Merge pull request #12587 from jbonnier/dev/jubo/docsearch-by-algolia

chore(docsearch): Implement DocSearch by Algolia

doc/docfx.json

@@ -41,7 +41,7 @@
         "disableGitFeatures": false,
         "globalMetadata": {
             "_appLogoPath": "images/uno-logo.png",
-            "_enableSearch": "true",
+            "_enableSearch": false,
             "_appFaviconPath": "images/UnoLogoSmall.png",
             "_disableContribution": false,
             "_gitContribute": {

doc/gulpfile.js

@@ -7,7 +7,6 @@ const concat = require('gulp-concat');
 const postcss = require('gulp-postcss');
 const gulpif = require('gulp-if');
 const del = require('del');
-const sassLint = require('gulp-sass-lint');
 const sourcemaps = require('gulp-sourcemaps');
 const stripImportExport = require('gulp-strip-import-export');
 const browserSync = require('browser-sync').create();
@@ -26,9 +25,6 @@ function styles(done) {
 
     src([`${assets}/**/*.scss`, `${assets}/**/*.sass`])
         .pipe(gulpif(isDebug, sourcemaps.init()))
-        .pipe(gulpif(isDebug, sassLint()))
-        .pipe(gulpif(isDebug, sassLint.format()))
-        .pipe(gulpif(isDebug, sassLint.failOnError()))
         .pipe(
             sass({includePaths: ['./node_modules/'], outputStyle: output}).on(
                 'error',

doc/package.json

@@ -19,7 +19,6 @@
 		"gulp-postcss": "^9.0.0",
 		"gulp-rename": "^2.0.0",
 		"gulp-sass": "^4.1.0",
-		"gulp-sass-lint": "^1.3.4",
 		"gulp-sourcemaps": "^2.6.4",
 		"gulp-strip-import-export": "^1.0.0",
 		"gulp-uglify": "^3.0.2",

doc/templates/uno/partials/scripts.tmpl.partial

@@ -14,4 +14,19 @@ mermaid.initialize({
 startOnLoad: false
 });
 mermaid.init(undefined, ".lang-mermaid");
-</script>
\ No newline at end of file
+</script>
+<!-- Algolia DocSearch -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />
+<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
+<script>
+    window.addEventListener('DOMContentLoaded', function() {
+        docsearch({
+          container: '#docsearch',
+          appId: 'PHB9D8WS99',
+          indexName: 'platform',
+          apiKey: '7877394996f96cde1a9b795dce3f7787',
+          placeholder: 'Search Docs...'
+        });
+        console.log(docsearch);
+    });
+</script>

doc/templates/uno/service/search.scss

 @import "../variables";
 
+:root {
+  --docsearch-primary-color: #{$blue} !important;
+  --docsearch-logo-color: #{$blue} !important;
+}
+
 .sidefilter {
-  top: 116px;
-  z-index: 2;
-  padding: 10px;
-  background-color: transparent!important;
 
-  #search {
-    display: block;
-    border-radius: 10px;
-    input:focus {
-      outline: none;
-      border:2px solid #159bff;
-    }
-  }
+  background-color: transparent;
+  height: 60px;
+  padding: 10px;
 
-  #search-query {
+  .DocSearch-Button {
+    background: transparent;
+    border: 2px inset $darkgray;
     border-radius: 6px;
-    height: 45px;
-    width: 100%;
+    margin: 0;
+    min-height: 45px;
     padding: 10px;
+    width: 100%;
   }
 
-  #search-results {
-    background: white;
-    position: absolute;
-    margin:5px 0 0 0;
-    width:560px;
-    max-height: calc(100vh - 250px);
-    border: 1px solid rgba(0,0,0,0.15);
-    border-radius: 10px;
-    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
-    z-index: 1;
-    overflow-y: auto;
-
-    .sr-items {
-      a {
-        color: black;
-        &:last-child {
-          margin-bottom: 0;
-        }
-      }
-
-      p {
-        margin: 10px;
-      }
-
-      .sr-item {
-        display: block;
-        padding: 15px;
-        margin-bottom: 10px;
-        &:hover{
-          background-image:linear-gradient(to bottom, rgba(21,155,255, 0.11) 0%, rgba(21,155,255, 0.11) 100%), linear-gradient(to bottom, rgba(21,155,255, 0.11) 0%, rgba(21,155,255, 0.11) 100%);
-        }
-      }
-
-      .item-title {
-        font-size: 16px;
-        font-weight: bold;
-      }
+  .DocSearch-Button:active, .DocSearch-Button:focus, .DocSearch-Button:hover {
+    border: 2px solid $blue;
+    box-shadow: none;
+  }
 
-      .item-brief {
-        font-size: 16px;
-        color: black;
-      }
-    }
+  .DocSearch-Button .DocSearch-Search-Icon {
+    display: none;
+  }
 
-    @media (max-width: 767px) {
-      width: 95%;
-      overflow-y: scroll;
-      max-height: 400px;
-    }
+  .DocSearch-Button-Placeholder {
+    color: rgb(117, 117, 117);
+    font-family: "Open Sans", sans-serif;
+    font-size: 14px;
+    line-height: 20px;
+    padding: 10px;
+    display: block;
   }
 }
+
+.DocSearch.DocSearch-Container {
+  z-index: 9999;
+}

doc/templates/uno/styles/main.js

-document.addEventListener("DOMContentLoaded",function(){initializeNavbar(),document.addEventListener("click",function(e){var n=e.target;980<=window.innerWidth||!n.matches("#navbar .has-children a")||(e.stopImmediatePropagation(),n.parentElement.classList.toggle("open"))},!0)},!1);
\ No newline at end of file
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+document.addEventListener(
+    "DOMContentLoaded",
+    function () {
+
+        initializeNavbar();
+
+        document.addEventListener(
+            "click",
+            function (e) {
+                const t = e.target;
+                if (
+                    window.innerWidth >= 980 ||
+                    !t.matches("#navbar .has-children a")
+                )
+                    return;
+                e.stopImmediatePropagation();
+                t.parentElement.classList.toggle("open");
+            },
+            true
+        );
+    },
+    false
+);
+

doc/templates/uno/toc.html.tmpl

@@ -3,18 +3,12 @@
 <div id="sidetoggle">
     <div>
         <div class="sidefilter">
-            <form role="search" id="search">
-                <input type="text" id="search-query" aria-label="search box" autocomplete="off"
-                       placeholder="Search Docs..." onsubmit="if(e.key === 'Enter') {return false;}">
-            </form>
-            <div id="search-results">
-                <div class="sr-items"></div>
-            </div>
+            <div id="docsearch"></div>
         </div>
         <div class="sidetoc">
             <div class="toc" id="toc">
                 {{^leaf}}
-                    {{>partials/li}}
+                {{>partials/li}}
                 {{/leaf}}
             </div>
         </div>