Merge pull request #19 from influxdata/doc-search

Docsearch styles

assets/js/search-interactions.js

@@ -0,0 +1,8 @@
+$('#algolia-search-input').focus(function() {
+  $('.content-wrapper').fadeTo(400, .35);
+})
+
+$('#algolia-search-input').blur(function() {
+  $('.content-wrapper').fadeTo(200, 1);
+  $('.ds-dropdown-menu').hide();
+})

assets/styles/layouts/_algolia-search-overrides.scss

@@ -0,0 +1,135 @@
+.algolia-autocomplete {
+  width: 100%;
+
+  /* Main dropdown wrapper */
+  .ds-dropdown-menu {
+    width: 74vw;
+    max-width: 800px;
+    background: $article-bg;
+
+    [class^=ds-dataset-] {
+      background-color: $article-bg;
+      border: none;
+      box-shadow: 2px 2px 10px $sidebar-search-shadow;
+      transition: background-color .2s;
+    }
+    &:before {
+      display: none;
+    }
+
+    .ds-suggestions {
+      padding: 2rem;
+    }
+  }
+
+  /* Main category (eg. Getting Started) */
+  .algolia-docsearch-suggestion {
+    background: $article-bg;
+
+    &--category-header {
+      color: $article-heading;
+      border-color: $article-hr;
+      text-decoration: none;
+      &-lvl0{
+        font-size: 1.5rem;
+        font-weight: bold !important;
+        padding-bottom: 1rem;
+      }
+    }
+
+    /* Category (eg. Downloads) */
+    &--subcategory-column {
+      color: rgba($article-text, .5) !important;
+      &:before { background: $article-hr; }
+    }
+
+    /* Title (eg. Bootstrap CDN) */
+    &--title {
+      font-weight: bold;
+      color: $article-heading;
+    }
+
+    /* Description description (eg. Bootstrap currently works...) */
+    &--text {
+      font-size: 0.8rem;
+      color: $article-text;
+    }
+
+    /* Highlighted text */
+    &--highlight {
+      color: $article-link;
+    }
+
+    &--content {
+      &:before { background: $article-hr; }
+    }
+  }
+}
+
+//////////////////////////////// HARD OVERRIDES ////////////////////////////////
+.algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main
+.algolia-docsearch-suggestion--category-header,
+.algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__secondary {
+  text-decoration: none;
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main
+.algolia-docsearch-suggestion--category-header {
+  padding-bottom: .75rem;
+  margin-bottom: .5rem;
+}
+
+.algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu {
+  left: 24vw !important;
+  top: -.45rem !important;
+}
+
+.ds-suggestion:not(:first-child) {
+  .algolia-docsearch-suggestion--category-header{
+      margin-top: 1.5rem;
+  }
+}
+
+////////////////////////////////////////////////////////////////////////////////
+///////////////////////////////// MEDIA QUERIES ////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////
+
+@media (min-width: 801px) and (max-width: 1200px) {
+  .algolia-autocomplete .ds-dropdown-menu {
+    max-width: 70vw;
+  }
+  .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu {
+    left: 28.5vw !important;
+    top: -.45rem !important;
+  }
+}
+
+@include media(medium) {
+  .algolia-autocomplete .ds-dropdown-menu {
+    max-width: 100vw;
+    width: 100vw;
+    min-width: 0;
+  }
+  .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu {
+    left: -1rem !important;
+    top: 112% !important;
+  }
+  .algolia-autocomplete .algolia-docsearch-suggestion {
+    .algolia-docsearch-suggestion--subcategory-column,
+    .algolia-docsearch-suggestion--content {
+      display: block;
+      margin: 2px 0;
+      float: none;
+      &:after { content: ""; }
+    }
+  }
+}
+
+@include media(small) {
+  .algolia-autocomplete .ds-dropdown-menu {
+    width: 100vw;
+  }
+  .algolia-autocomplete .ds-dropdown-menu .ds-suggestions {
+    padding: .5rem;
+  }
+}

assets/styles/styles-default.scss

@@ -17,5 +17,6 @@
         "layouts/layout-content-wrapper",
         "layouts/layout-article",
         "layouts/syntax-highlighting",
+        "layouts/algolia-search-overrides",
         "layouts/layout-landing",
         "layouts/layout-error-page";

layouts/partials/article/latest-version.html

@@ -2,7 +2,7 @@
 {{ $latestVersion := $.Site.Data.versions.latest_version }}
 {{ $latestVersionURL := replaceRE "[^/]+.*?[0]" $latestVersion .RelPermalink }}
 {{ if not (eq $currentVersion $latestVersion) }}
-  <div class="warn">
+  <div class="warn old-version">
     <p>
       This page documents an earlier version of InfluxDB.
       View the latest version of this page in the <a href="{{ $latestVersionURL }}">InfluxDB {{ $latestVersion }}</a> documentation.

layouts/partials/footer.html

@@ -1,3 +1,20 @@
+  {{ $currentVersion := (index (findRE "[^/]+.*?" .RelPermalink) 0) }}
+  <!-- Docsearch JS -->
+  <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+  <script>
+  docsearch({
+    apiKey: 'ba4435a9d456ac0d954cc276206eac06',
+    appId: 'WHM9UWMP6M',
+    indexName: 'influxdata',
+    inputSelector: '#algolia-search-input',
+    // Set debug to true if you want to inspect the dropdown
+    debug: true,
+    algoliaOptions: {
+    'facetFilters': ["version:{{ $currentVersion }}"]
+  },
+  });
+  </script>
+
   </body>
   {{ partial "footer/javascript.html" }}
 </html>

layouts/partials/footer/javascript.html

@@ -1,5 +1,6 @@
 {{ $versionSelector := resources.Get "js/version-selector.js" }}
 {{ $contentInteractions := resources.Get "js/content-interactions.js" }}
-{{ $footerjs := slice $versionSelector $contentInteractions | resources.Concat "js/footer.bundle.js" }}
+{{ $searchInteractions := resources.Get "js/search-interactions.js" }}
+{{ $footerjs := slice $versionSelector $contentInteractions $searchInteractions | resources.Concat "js/footer.bundle.js" }}
 
 <script type="text/javascript" src="{{ $footerjs.RelPermalink }}" ></script>

layouts/partials/header/stylesheets.html

@@ -1,3 +1,6 @@
+<!-- Docsearch Styles -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"/>
+
 {{ $cssOptionsDark := (dict "targetPath" "dark-theme.css" "outputStyle" "compressed" "enableSourceMap" true) }}
 {{ $cssOptionsLight := (dict "targetPath" "light-theme.css" "outputStyle" "compressed" "enableSourceMap" true) }}
 {{ $cssSidebarOpen := (dict "targetPath" "sidebar-open.css" "outputStyle" "compressed" "enableSourceMap" true) }}