Introduce search
Powered by the awesome Algolia :)
Christopher Chedeau committed
Mar 7, 2016 at 11:45 UTC
3d51c7523a0cac1e1c5fb9740a88f66f2ee24cfa
3 files changed
+79
-1
docs/_layouts/default.html
+11
@@ -16,6 +16,7 @@
16
<link rel="shortcut icon" href="/react/favicon.ico">
17
<link rel="alternate" type="application/rss+xml" title="{{ site.name }}" href="{{ site.url }}{{ site.baseurl }}/feed.xml">
18
19
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
20
<link rel="stylesheet" href="/react/css/syntax.css">
21
<link rel="stylesheet" href="/react/css/codemirror.css">
22
<link rel="stylesheet" href="/react/css/react.css">
@@ -28,6 +29,7 @@
29
<script src="/react/js/es5-shim.min.js"></script>
30
<script src="/react/js/es5-sham.min.js"></script>
31
<![endif]-->
32
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
33
<script src="/react/js/codemirror.js"></script>
34
<script src="/react/js/javascript.js"></script>
35
<script src="/react/js/react.js"></script>
@@ -50,6 +52,9 @@
52
<li><a href="/react/support.html"{% if page.id == 'support' %} class="active"{% endif %}>Support</a></li>
53
<li><a href="/react/downloads.html"{% if page.id == 'downloads' %} class="active"{% endif %}>Download</a></li>
54
<li><a href="/react/blog/"{% if page.sectionid == 'blog' %} class="active"{% endif %}>Blog</a></li>
55
+ <li>
56
+ <input id="algolia-doc-search" type="text" placeholder="Search docs..." />
57
+ </li>
58
</ul>
59
60
<ul class="nav-site nav-site-external">
@@ -107,6 +112,12 @@
112
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=623268441017527";
113
fjs.parentNode.insertBefore(js, fjs);
114
}(document, 'script', 'facebook-jssdk'));
115
+
116
+ docsearch({
117
+ apiKey: '36221914cce388c46d0420343e0bb32e',
118
+ indexName: 'react',
119
+ inputSelector: '#algolia-doc-search'
120
+ });
121
</script>
122
</body>
123
</html>
docs/css/react.scss
+68
-1
@@ -129,7 +129,7 @@ h1, h2, h3, h4, h5, h6 {
129
margin: 0;
130
}
131
132
- a {
132
+ li > a {
133
box-sizing: content-box;
134
padding: 0 10px;
135
line-height: $navHeight;
@@ -856,3 +856,70 @@ div[data-twttr-id] iframe {
856
.three-column > ul:first-child {
857
margin-left: 20px;
858
}
859
+
860
+
861
+/* Algolia Doc Search */
862
+
863
+@media screen and (max-width: 960px) {
864
+ #algolia-doc-search {
865
+ display: none;
866
+ }
867
+}
868
+
869
+input#algolia-doc-search {
870
+ background: transparent url('/react/img/search.png') no-repeat 10px center;
871
+ background-size: 16px 16px;
872
+
873
+ margin-left: 10px;
874
+ padding: 0 10px;
875
+ padding-left: 35px;
876
+ height: 30px;
877
+ margin-top: 10px;
878
+ font-size: 16px;
879
+ line-height: 20px;
880
+ background-color: #333;
881
+ border-radius: 4px;
882
+ color: white;
883
+ outline: none;
884
+ width: 170px;
885
+
886
+ transition: width .2s ease;
887
+}
888
+
889
+input#algolia-doc-search:focus {
890
+ width: 240px;
891
+}
892
+
893
+.algolia-autocomplete .aa-dropdown-menu {
894
+ margin-left: -110px;
895
+ margin-top: -4px;
896
+}
897
+
898
+.algolia-autocomplete {
899
+ vertical-align: top;
900
+ height: 53px;
901
+}
902
+
903
+.algolia-docsearch-suggestion {
904
+ border-bottom-color: #c05b4d;
905
+}
906
+
907
+.algolia-docsearch-suggestion--category-header {
908
+ background-color: #cc7a6f;
909
+}
910
+
911
+.algolia-docsearch-suggestion--highlight {
912
+ color: #c05b4d;
913
+}
914
+
915
+.algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight {
916
+ background-color: #c05b4d;
917
+}
918
+
919
+.aa-cursor .algolia-docsearch-suggestion--content {
920
+ color: #c05b4d;
921
+}
922
+
923
+.aa-cursor .algolia-docsearch-suggestion {
924
+ background: #f1f3f5;
925
+}
docs/img/search.png
Binary files /dev/null and b/docs/img/search.png differ