Skip to content

Commit cc1bad5

Browse files
skevyskevy
committed
[Website] First pass at Algolia Doc Search
It’s not yet responsive :(
1 parent 4963225 commit cc1bad5

6 files changed

Lines changed: 130 additions & 0 deletions

File tree

‎website/core/AlgoliaDocSearch.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/**
2+
* Copyright (c) 2015-present, Facebook, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the BSD-style license found in the
6+
* LICENSE file in the root directory of this source tree. An additional grant
7+
* of patent rights can be found in the PATENTS file in the same directory.
8+
*
9+
* @providesModule AlgoliaDocSearch
10+
*/
11+
12+
var AlgoliaDocSearch = React.createClass({
13+
render: function() {
14+
return (
15+
<div className="algolia-search-wrapper">
16+
<input id="algolia-doc-search" type="text" placeholder="Search docs..." />
17+
</div>
18+
);
19+
}
20+
});
21+
22+
module.exports = AlgoliaDocSearch;

‎website/core/HeaderLinks.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
*/
1111

1212
var React = require('React');
13+
var AlgoliaDocSearch = require('AlgoliaDocSearch');
1314

1415
var HeaderLinks = React.createClass({
1516
linksInternal: [
@@ -44,6 +45,9 @@ var HeaderLinks = React.createClass({
4445
<ul className="nav-site nav-site-internal">
4546
{this.makeLinks(this.linksInternal)}
4647
</ul>
48+
49+
<AlgoliaDocSearch />
50+
4751
<ul className="nav-site nav-site-external">
4852
{this.makeLinks(this.linksExternal)}
4953
</ul>

‎website/core/Site.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ var Site = React.createClass({
2929
<meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2" />
3030
<meta property="og:description" content="A framework for building native apps using React" />
3131

32+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
33+
3234
<link rel="shortcut icon" href="/react-native/img/favicon.png?2" />
3335
<link rel="stylesheet" href="/react-native/css/react-native.css" />
3436

@@ -68,6 +70,7 @@ var Site = React.createClass({
6870
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
6971
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
7072
`}} />
73+
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
7174
<script src="/react-native/js/scripts.js" />
7275
</body>
7376
</html>

‎website/src/react-native/css/react-native.css‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1222,3 +1222,97 @@ div[data-twttr-id] iframe {
12221222
}
12231223
}
12241224

1225+
/** Algolia Doc Search **/
1226+
1227+
1228+
div.algolia-search-wrapper {
1229+
display: inline-block;
1230+
vertical-align: top;
1231+
margin-left: 15px;
1232+
}
1233+
1234+
@media screen and (max-width: 960px) {
1235+
div.algolia-search-wrapper {
1236+
display: none;
1237+
}
1238+
}
1239+
1240+
input#algolia-doc-search {
1241+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
1242+
font-family: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif;
1243+
1244+
background: transparent url('/react-native/img/search.png') no-repeat left center;
1245+
background-size: 16px 16px;
1246+
1247+
padding-left: 30px;
1248+
font-size: 16px;
1249+
line-height: 20px;
1250+
background-color: #3B3738;
1251+
border-bottom: solid 3px #3B3738;
1252+
color: white;
1253+
outline: none;
1254+
width: 130px;
1255+
height: 53px;
1256+
1257+
transition: border-color .2s ease, width .2s ease;
1258+
-webkit-transition: border-color .2s ease, width .2s ease;
1259+
-moz-transition: border-color .2s ease, width .2s ease;
1260+
-o-transition: border-color .2s ease, width .2s ease;
1261+
}
1262+
1263+
input#algolia-doc-search:focus {
1264+
border-color: #05A5D1;
1265+
width: 240px;
1266+
}
1267+
1268+
@media screen and (max-width: 1085px) {
1269+
input#algolia-doc-search:focus {
1270+
width: 178px;
1271+
}
1272+
}
1273+
1274+
.algolia-autocomplete {
1275+
vertical-align: top;
1276+
height: 53px;
1277+
1278+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
1279+
font-family: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif;
1280+
}
1281+
1282+
/* Bottom border of each suggestion */
1283+
.algolia-docsearch-suggestion {
1284+
border-bottom-color: #05A5D1;
1285+
}
1286+
/* Main category headers */
1287+
.algolia-docsearch-suggestion--category-header {
1288+
background-color: #3B3738;
1289+
}
1290+
/* Highlighted search terms */
1291+
.algolia-docsearch-suggestion--highlight {
1292+
color: #05A5D1;
1293+
}
1294+
/* Highligted search terms in the main category headers */
1295+
.algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight {
1296+
background-color: #05A5D1;
1297+
}
1298+
/* Currently selected suggestion */
1299+
.aa-cursor .algolia-docsearch-suggestion--content {
1300+
color: #05A5D1;
1301+
}
1302+
.aa-cursor .algolia-docsearch-suggestion {
1303+
background: hsl(198, 100%, 96%);
1304+
}
1305+
1306+
/* For bigger screens, when displaying results in two columns */
1307+
@media (min-width: 768px) {
1308+
/* Bottom border of each suggestion */
1309+
.algolia-docsearch-suggestion {
1310+
border-bottom-color: hsl(198, 100%, 94%);
1311+
}
1312+
/* Left column, with secondary category header */
1313+
.algolia-docsearch-suggestion--subcategory-column {
1314+
border-right-color: hsl(198, 100%, 94%);
1315+
background-color: hsl(198, 100%, 96%);
1316+
color: #3B3738;
1317+
}
1318+
}

‎website/src/react-native/img/search.png‎

1.35 KB
Loading

‎website/src/react-native/js/scripts.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,4 +42,11 @@
4242
modal.classList.remove('modal-open');
4343
}
4444

45+
// Algolia
46+
docsearch({
47+
apiKey: 'e3d767b736584dbe6d4c35f7cf7d4633',
48+
indexName: 'react-native',
49+
inputSelector: '#algolia-doc-search'
50+
});
51+
4552
}());

0 commit comments

Comments
 (0)