Add Algolia search (#407)

PHP-DI · May 11, 2016 · 401a219 · 401a219
1 parent 1602506
commit 401a219
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 6 deletions.
diff --git a/website/default.twig b/website/default.twig
@@ -27,15 +27,10 @@
 
     {% block css %}
         <link href="http://fonts.googleapis.com/css?family=Abel:400|Oswald:300,400,700" media="all" rel="stylesheet" type="text/css">
+        <link href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" rel="stylesheet">
         <link href="{{ baseUrl }}/css/highlight.github.css" rel="stylesheet">
         <link href="{{ baseUrl }}/css/all.min.css" rel="stylesheet">
     {% endblock %}
-
-    <script>
-        if (window.location.href.indexOf('http://mnapoli.fr') === 0) {
-            window.location.href = 'http://php-di.org';
-        }
-    </script>
 </head>
 <body>
 
@@ -51,6 +46,9 @@
                     </button>
                     <a class="navbar-brand" href="{{ baseUrl }}/">PHP-DI</a>
                 </div>
+                <div class="navbar-form navbar-left hidden-xs hidden-sm">
+                    <input id="search-input" type="text" class="form-control" placeholder="Search...">
+                </div>
                 <div class="collapse navbar-collapse" id="top-navigation">
                     <ul class="nav navbar-nav navbar-right">
                         <li><a href="{{ baseUrl }}/doc/getting-started.html">Getting started</a></li>
@@ -134,5 +132,32 @@
     </script>
     <script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>
 
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
+    <script type="text/javascript">
+        $(function () {
+            var search = docsearch({
+                apiKey: 'ef6af24cbacae1f85d3c44741df49167',
+                indexName: 'php-di',
+                inputSelector: '#search-input'
+            });
+            var delay = (function () {
+                var timer = 0;
+                return function (callback, ms) {
+                    clearTimeout(timer);
+                    timer = setTimeout(callback, ms);
+                };
+            })();
+            search.autocomplete.on('autocomplete:selected', function (e, suggestion) {
+                _gaq.push(['_trackEvent', 'search', 'click', suggestion.subcategory]);
+            });
+            $('#search-input').bind('input', function () {
+                var search = $(this).val();
+                delay(function () {
+                    _gaq.push(['_trackPageview', '/search?q=' + search]);
+                }, 500);
+            });
+        });
+    </script>
+
 </body>
 </html>
diff --git a/website/less/algolia.less b/website/less/algolia.less
@@ -0,0 +1,54 @@
+// Box
+.aa-dropdown-menu {
+    background-color: white;
+    border-color: #ccc;
+    border-radius: 0;
+}
+// Each suggestion
+.algolia-docsearch-suggestion {
+    background-color: transparent;
+    color: @text-color;
+    border-color: #e7e7e7;
+}
+// Main category headers
+.algolia-docsearch-suggestion--category-header {
+    background-color: @grey-background-light;
+    color: @text-color;
+    border-bottom: solid 1px #e7e7e7;
+    font-weight: normal;
+    padding: 10px;
+}
+.algolia-docsearch-suggestion--subcategory-column {
+    background-color: transparent;
+    border-color: #e7e7e7;
+    font-weight: bold;
+    width: 200px;
+    max-width: 200px;
+}
+.algolia-docsearch-suggestion--title {
+    font-weight: normal;
+}
+.algolia-docsearch-suggestion--content {
+    border-top: none;
+    width: 70%;
+}
+/* Highlighted search terms */
+.algolia-docsearch-suggestion--highlight {
+    color: @link-color;
+}
+/* Highligted search terms in the main category headers */
+.algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight  {
+    background-color: transparent;
+}
+/* Currently selected suggestion */
+.aa-cursor .algolia-docsearch-suggestion--content {
+    color: @link-hover-color;
+}
+.aa-cursor .algolia-docsearch-suggestion {
+    background-color: transparent;
+}
+
+.algolia-docsearch-footer {
+    border-top: solid 1px #e7e7e7;
+    color: #616161;
+}
diff --git a/website/less/main.less b/website/less/main.less
@@ -4,6 +4,7 @@
 @import "variables.less";
 @import "home.less";
 @import "blog.less";
+@import "algolia.less";
 
 body {
     font-family: 'Source Sans Pro', sans-serif;
@@ -98,6 +99,12 @@ pre code {
             }
         }
     }
+    #search-input {
+        width: 300px;
+        margin-left: 30px;
+        background-color: #FBFBFB;
+        border: 1px solid #E4E4E4;
+    }
 }
 
 article {