Merge pull request #5027 from skevy/algolia
[Website] Adding Algolia Doc Search
This commit is contained in:
commit
93f3aa8a82
|
@ -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;
|
|
@ -10,6 +10,7 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var React = require('React');
|
var React = require('React');
|
||||||
|
var AlgoliaDocSearch = require('AlgoliaDocSearch');
|
||||||
|
|
||||||
var HeaderLinks = React.createClass({
|
var HeaderLinks = React.createClass({
|
||||||
linksInternal: [
|
linksInternal: [
|
||||||
|
@ -44,6 +45,9 @@ var HeaderLinks = React.createClass({
|
||||||
<ul className="nav-site nav-site-internal">
|
<ul className="nav-site nav-site-internal">
|
||||||
{this.makeLinks(this.linksInternal)}
|
{this.makeLinks(this.linksInternal)}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
<AlgoliaDocSearch />
|
||||||
|
|
||||||
<ul className="nav-site nav-site-external">
|
<ul className="nav-site nav-site-external">
|
||||||
{this.makeLinks(this.linksExternal)}
|
{this.makeLinks(this.linksExternal)}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
@ -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: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" />
|
<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="shortcut icon" href="/react-native/img/favicon.png?2" />
|
||||||
<link rel="stylesheet" href="/react-native/css/react-native.css" />
|
<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";
|
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||||||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
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" />
|
<script src="/react-native/js/scripts.js" />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -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 |
|
@ -8,6 +8,8 @@
|
||||||
|
|
||||||
function init() {
|
function init() {
|
||||||
var backdrop = document.querySelector('.modal-backdrop');
|
var backdrop = document.querySelector('.modal-backdrop');
|
||||||
|
if (!backdrop) return;
|
||||||
|
|
||||||
var modalButtonOpenList = document.querySelectorAll('.modal-button-open');
|
var modalButtonOpenList = document.querySelectorAll('.modal-button-open');
|
||||||
var modalButtonClose = document.querySelector('.modal-button-close');
|
var modalButtonClose = document.querySelector('.modal-button-close');
|
||||||
|
|
||||||
|
@ -22,6 +24,8 @@
|
||||||
|
|
||||||
function showModal(e) {
|
function showModal(e) {
|
||||||
var backdrop = document.querySelector('.modal-backdrop');
|
var backdrop = document.querySelector('.modal-backdrop');
|
||||||
|
if (!backdrop) return;
|
||||||
|
|
||||||
var modal = document.querySelector('.modal');
|
var modal = document.querySelector('.modal');
|
||||||
|
|
||||||
backdrop.classList.add('modal-open');
|
backdrop.classList.add('modal-open');
|
||||||
|
@ -30,10 +34,19 @@
|
||||||
|
|
||||||
function hideModal(e) {
|
function hideModal(e) {
|
||||||
var backdrop = document.querySelector('.modal-backdrop');
|
var backdrop = document.querySelector('.modal-backdrop');
|
||||||
|
if (!backdrop) return;
|
||||||
|
|
||||||
var modal = document.querySelector('.modal');
|
var modal = document.querySelector('.modal');
|
||||||
|
|
||||||
backdrop.classList.remove('modal-open');
|
backdrop.classList.remove('modal-open');
|
||||||
modal.classList.remove('modal-open');
|
modal.classList.remove('modal-open');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Algolia
|
||||||
|
docsearch({
|
||||||
|
apiKey: 'e3d767b736584dbe6d4c35f7cf7d4633',
|
||||||
|
indexName: 'react-native',
|
||||||
|
inputSelector: '#algolia-doc-search'
|
||||||
|
});
|
||||||
|
|
||||||
}());
|
}());
|
||||||
|
|
Loading…
Reference in New Issue