Merge pull request #5027 from skevy/algolia

[Website] Adding Algolia Doc Search
This commit is contained in:
Christopher Chedeau 2015-12-29 09:46:47 -08:00
commit 93f3aa8a82
6 changed files with 136 additions and 0 deletions

View File

@ -0,0 +1,22 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule AlgoliaDocSearch
*/
var AlgoliaDocSearch = React.createClass({
render: function() {
return (
<div className="algolia-search-wrapper">
<input id="algolia-doc-search" type="text" placeholder="Search docs..." />
</div>
);
}
});
module.exports = AlgoliaDocSearch;

View File

@ -10,6 +10,7 @@
*/
var React = require('React');
var AlgoliaDocSearch = require('AlgoliaDocSearch');
var HeaderLinks = React.createClass({
linksInternal: [
@ -44,6 +45,9 @@ var HeaderLinks = React.createClass({
<ul className="nav-site nav-site-internal">
{this.makeLinks(this.linksInternal)}
</ul>
<AlgoliaDocSearch />
<ul className="nav-site nav-site-external">
{this.makeLinks(this.linksExternal)}
</ul>

View File

@ -29,6 +29,8 @@ var Site = React.createClass({
<meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2" />
<meta property="og:description" content="A framework for building native apps using React" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
<link rel="shortcut icon" href="/react-native/img/favicon.png?2" />
<link rel="stylesheet" href="/react-native/css/react-native.css" />
@ -68,6 +70,7 @@ var Site = React.createClass({
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
`}} />
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
<script src="/react-native/js/scripts.js" />
</body>
</html>

View File

@ -1222,3 +1222,97 @@ div[data-twttr-id] iframe {
}
}
/** Algolia Doc Search **/
div.algolia-search-wrapper {
display: inline-block;
vertical-align: top;
margin-left: 15px;
}
@media screen and (max-width: 960px) {
div.algolia-search-wrapper {
display: none;
}
}
input#algolia-doc-search {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif;
background: transparent url('/react-native/img/search.png') no-repeat left center;
background-size: 16px 16px;
padding-left: 30px;
font-size: 16px;
line-height: 20px;
background-color: #3B3738;
border-bottom: solid 3px #3B3738;
color: white;
outline: none;
width: 130px;
height: 53px;
transition: border-color .2s ease, width .2s ease;
-webkit-transition: border-color .2s ease, width .2s ease;
-moz-transition: border-color .2s ease, width .2s ease;
-o-transition: border-color .2s ease, width .2s ease;
}
input#algolia-doc-search:focus {
border-color: #05A5D1;
width: 240px;
}
@media screen and (max-width: 1085px) {
input#algolia-doc-search:focus {
width: 178px;
}
}
.algolia-autocomplete {
vertical-align: top;
height: 53px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* Bottom border of each suggestion */
.algolia-docsearch-suggestion {
border-bottom-color: #05A5D1;
}
/* Main category headers */
.algolia-docsearch-suggestion--category-header {
background-color: #3B3738;
}
/* Highlighted search terms */
.algolia-docsearch-suggestion--highlight {
color: #05A5D1;
}
/* Highligted search terms in the main category headers */
.algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight {
background-color: #05A5D1;
}
/* Currently selected suggestion */
.aa-cursor .algolia-docsearch-suggestion--content {
color: #05A5D1;
}
.aa-cursor .algolia-docsearch-suggestion {
background: hsl(198, 100%, 96%);
}
/* For bigger screens, when displaying results in two columns */
@media (min-width: 768px) {
/* Bottom border of each suggestion */
.algolia-docsearch-suggestion {
border-bottom-color: hsl(198, 100%, 94%);
}
/* Left column, with secondary category header */
.algolia-docsearch-suggestion--subcategory-column {
border-right-color: hsl(198, 100%, 94%);
background-color: hsl(198, 100%, 96%);
color: #3B3738;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -8,6 +8,8 @@
function init() {
var backdrop = document.querySelector('.modal-backdrop');
if (!backdrop) return;
var modalButtonOpenList = document.querySelectorAll('.modal-button-open');
var modalButtonClose = document.querySelector('.modal-button-close');
@ -22,6 +24,8 @@
function showModal(e) {
var backdrop = document.querySelector('.modal-backdrop');
if (!backdrop) return;
var modal = document.querySelector('.modal');
backdrop.classList.add('modal-open');
@ -30,10 +34,19 @@
function hideModal(e) {
var backdrop = document.querySelector('.modal-backdrop');
if (!backdrop) return;
var modal = document.querySelector('.modal');
backdrop.classList.remove('modal-open');
modal.classList.remove('modal-open');
}
// Algolia
docsearch({
apiKey: 'e3d767b736584dbe6d4c35f7cf7d4633',
indexName: 'react-native',
inputSelector: '#algolia-doc-search'
});
}());