[docs] Add docsearch integration (#1596)

makseq · web-flow · commit 25ba33db7c81 · 2021-10-15T11:56:34.000-07:00
* Add docsearch intergration

* Pretty fixes
diff --git a/docs/themes/htx/layout/layout.ejs b/docs/themes/htx/layout/layout.ejs
@@ -90,6 +90,8 @@
 
     <%- partial('partials/google_analytics') %>
 
+    <!-- docsearch -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
   </head>
   <body >
     <div id="mobile-bar" <%- isBlog ? 'style="display: none"' : '' %>>
@@ -134,5 +136,16 @@
       })
     });
   </script>
+
+  <!-- docsearch -->
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+  <script type="text/javascript"> docsearch({
+    apiKey: 'e5286d9454e04e9d10c9e927b4a4a205',
+    indexName: 'labelstud',
+    inputSelector: '#docsearch-input',
+    debug: false // Set debug to true if you want to inspect the dropdown
+    });
+  </script>
+
   </body>
 </html>
diff --git a/docs/themes/htx/layout/partials/header.ejs b/docs/themes/htx/layout/partials/header.ejs
@@ -49,7 +49,13 @@
         </nav>
       </div>
       <a href="/playground" class="head-main-menu-item-link-single <%- page.type === "playground" ? "current": "" %>">Playground</a>
-      <!-- <ul role="list" class="head-main-menu hidden w-list-unstyled"><li class="head-main-menu-item"><a href="/tags" class="head-main-menu-item-link">Tags</a></li><li class="head-main-menu-item"><a href="/templates" class="head-main-menu-item-link">Templates</a></li><li class="head-main-menu-item"><a href="/api" class="head-main-menu-item-link">API</a></li><li class="head-main-menu-item"><a href="/playground" class="head-main-menu-item-link">Playground</a></li><li class="head-main-menu-item"><a href="/blog" class="head-main-menu-item-link">Blog</a></li></ul> -->
+
+      <br><br>
+      <div class="search__head">
+        <input type="text" placeholder="Search" id="docsearch-input">
+        <input type="submit" value="">
+      </div>
+
     </div>
 
     <!-- <div class="head__menu--wrapper">
@@ -62,10 +68,7 @@
         <li class="<%- page.type === "blog" ? "current": "" %>"><a href="<%- url_for("/blog/") %>">Blog</a></li>
       </ul>
     </div> -->
-    <!-- <div class="search__head">
-      <input type="text" placeholder="Search" id="local-search-input">
-      <input type="submit" value="">
-    </div> -->
+
     <!-- Place this tag where you want the button to render. -->
     <a class="github-button" href="https://github.com/heartexlabs/label-studio" data-size="large" data-show-count="true" aria-label="Star heartexlabs/label-studio on GitHub">GitHub</a>
   </div>
diff --git a/docs/themes/htx/source/css/_header.styl b/docs/themes/htx/source/css/_header.styl
@@ -114,6 +114,11 @@ body.docs
   &:focus
     border-color: $green
 
+#docsearch-input
+  padding: 4px 10px;
+  border-radius: 4px;
+  border: none;
+
 #logo
   font-size: 1.5em
   line-height: $header-height
diff --git a/docs/themes/htx/source/css/new-header.css b/docs/themes/htx/source/css/new-header.css
@@ -1,3 +1,59 @@
+/* docsearch */
+.ds-dropdown-menu > * {
+  line-height: normal;
+}
+
+.ds-suggestion:hover {
+  background: red !important;
+}
+
+.algolia-docsearch-suggestion--wrapper {
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.algolia-docsearch-suggestion--category-header {
+  font-weight: 500 !important;
+}
+
+.algolia-docsearch-suggestion--subcategory-column {
+  display: none !important;
+}
+
+.algolia-docsearch-suggestion--content {
+  width: 100% !important;
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
+.algolia-docsearch-suggestion--content:before {
+  display: none !important;
+}
+.algolia-docsearch-suggestion--title {
+  font-weight: 400 !important;
+}
+
+.algolia-docsearch-suggestion--highlight {
+  color: #f58a48 !important;
+}
+
+.ds-dataset-1 {
+
+}
+
+.ds-suggestions {
+
+}
+
+.ds-suggestion {
+
+}
+
+.algolia-docsearch-footer {
+  display: none !important;
+}
+
+
 div.container__head{
   padding-left:40px;
   padding-right:40px;
@@ -32,6 +88,7 @@ div.container__head{
   display: flex;
   align-items:center;
   padding:0px;
+  margin: 0 10px;
   list-style-type: none;
 }
 .head__main>.container__head>.head__menu--wrapper > *{
@@ -134,11 +191,11 @@ div.container__head{
   justify-content:center;
   position: relative;
 }
-.head__main .search__head>input[type="text"]{
+#docsearch-input, .head__main .search__head>input[type="text"]{
   box-sizing: border-box;
   width: 180px;
   height:40px;
-  background: rgba(0, 0, 0, 0.05);
+  background: rgba(5, 0, 0, 0.05);
   border-radius: 6px;
   outline:none;
   border:0px;
@@ -147,6 +204,11 @@ div.container__head{
   font-size:18px;
   font-weight:500;
   color:#000;
+  transition: all 0.25s;
+}
+#docsearch-input:focus {
+  background-color: rgba(255, 255, 255, 0.9);
+  width: 300px;
 }
 .head__main .search__head>input[type="submit"]{
   position: absolute;
@@ -162,6 +224,12 @@ div.container__head{
   cursor:pointer;
   right: 12px;
 }
+@media (max-width: 991px) {
+  .head__main .search__head>input[type="submit"] {
+    display: none;
+  }
+
+}
 
 .head__main .search__head>input[type="text"]::-webkit-input-placeholder { /* Chrome/Opera/Safari */
   color: rgba(0,0,0,.2);
@@ -202,6 +270,10 @@ div.container__head{
   }
 }
 @media (max-width: 991px){
+  div.container__head{
+    padding: 0;
+  }
+
   .small__head{
     display: flex;
     justify-content: space-between;
@@ -302,4 +374,8 @@ div.container__head{
   .head__main{
     min-height:60px;
   }
+
+  #docsearch-input {
+    display: none;
+  }
 }
