Docs search added. (HumanSignal#231)

* Docs search added. * Space results. * Fix. * from_search in query. * Playground margin top.
wxthon · Mar 5, 2020 · 85f3f49 · 85f3f49
1 parent e3ccf03
commit 85f3f49
Show file tree

Hide file tree

Showing 13 changed files with 806 additions and 483 deletions.
diff --git a/docs/_config.yml b/docs/_config.yml
@@ -95,3 +95,8 @@ deploy:
   type: git
   repo: [email protected]:heartexlabs/heartexlabs.github.io.git
   branch: master
+
+search:
+  path: search.xml
+  field: all
+  content: true
diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/package.json b/docs/package.json
@@ -15,6 +15,7 @@
     "hexo-generator-archive": "^0.1.5",
     "hexo-generator-category": "^0.1.3",
     "hexo-generator-index": "^0.2.1",
+    "hexo-generator-search": "^2.4.0",
     "hexo-generator-tag": "^0.2.0",
     "hexo-renderer-ejs": "^0.3.1",
     "hexo-renderer-marked": "^2.0.0",

diff --git a/docs/source/playground/index.md b/docs/source/playground/index.md
@@ -3,7 +3,7 @@ type: playground
 order: 201
 ---
 
-<div style="padding-left: 60px; max-width: 700px; margin: 0 auto; margin-bottom: 2em;">
+<div style="padding-left: 60px; max-width: 700px; margin: 0 auto; margin-bottom: 2em; margin-top: 1.5em">
     <h1>Playground</h1>
     Start typing in the config, and you can quickly preview the labeling interface. At the bottom of the page, you have live serialization updates of what Label Studio expects as an input and what it gives you as a result of your labeling work.
 </div>

diff --git a/docs/themes/htx/layout/layout.ejs b/docs/themes/htx/layout/layout.ejs
@@ -13,7 +13,7 @@
       <meta property="og:description" content="<%- theme.site_description %>">
       <meta property="og:image" content="https://repository-images.githubusercontent.com/192640529/6b34d180-dd95-11e9-8016-fddd7751cb2c">
       <meta name="thumbnail" content="https://<%- theme.root_domain %>/images/opossum/[email protected]"/>
-    
+
 
       <meta name="twitter:card" content="summary">
       <meta name="twitter:title" content="<%- page.title ? page.title + ' — ' : '' %>Label Studio">
@@ -27,30 +27,33 @@
       <link rel="manifest" href="/manifest.json">
 
       <link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico"/>
-      
+
       <link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css'>
       <link href='//fonts.googleapis.com/css?family=Dosis:500&text=LabelStudio' rel='stylesheet' type='text/css'>
 
       <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
 
       <!-- Place this tag in your head or just before your close body tag. -->
+      <script src="<%- url_for("js/jquery.min.js") %>"></script>
       <script async defer src="https://buttons.github.io/buttons.js"></script>
+      <script src="<%- url_for("js/search.js") %>"></script>
 
       <script src="<%- url_for("/js/smooth-scroll.min.js") %>"></script>
-    
+
     <!-- main page styles -->
     <%- css(isIndex ? 'css/index' : 'css/page') %>
+    <%- css('css/search') %>
 
     <% if (page.type === "playground") { %>
       <%- css('css/codemirror') %>
       <script src="<%- url_for("/js/jquery.min.js") %>"></script>
       <script src="<%- url_for("/js/jquery-ui.min.js") %>"></script>
       <script src="<%- url_for("/js/codemirror.js") %>"></script>
-      <script src="<%- url_for("/js/xml.js") %>"></script>      
+      <script src="<%- url_for("/js/xml.js") %>"></script>
     <% } %>
 
     <!-- this needs to be loaded before guide's inline scripts -->
-    
+
   </head>
   <body class="<%- isIndex ? '' : 'docs' -%>">
     <div id="mobile-bar" <%- isIndex ? 'style="display: none"' : '' %>>
@@ -68,5 +71,5 @@
     <script src="<%- url_for("/js/css.escape.js") %>"></script>
     <script src="<%- url_for("/js/common.js") %>"></script>
     <%- partial('partials/google_analytics') %>
-  </body>  
+  </body>
 </html>
diff --git a/docs/themes/htx/layout/page.ejs b/docs/themes/htx/layout/page.ejs
@@ -8,17 +8,28 @@
   </div>
 <% } %>
 <div class="content <%- page.type ? page.type + ' with-sidebar' : '' %> <%- page.type === 'guide' ? page.path.replace(/.+\//, '').replace('.html', '') + '-guide' : '' %>">
+
+  <div id="local-search-result-wrapper"></div>
+  <script>
+      var search_path = "<%= config.search.path %>";
+      if (search_path.length === 0) {
+        search_path = "search.xml";
+      }
+      var path = "<%= config.root %>" + search_path;
+      searchFunc(path, 'local-search-input', 'local-search-result-wrapper');
+  </script>
+
   <% if (page.type) { %>
     <% if (page.type === 'menu') { %>
       <form id="search-form">
         <input type="text" id="search-query-menu" class="search-query st-default-search-input">
       </form>
-      <%- partial('partials/toc', { type: 'guide' }) %>    
+      <%- partial('partials/toc', { type: 'guide' }) %>
     <% } %>
   <% } %>
   <% if (page.title.trim()) { %>
     <h1><%- page.title %><%- page.type === 'examples' ? ' Example' : '' %></h1>
-  <% } %>  
+  <% } %>
   <%- page.content %>
   <% if (page.type === 'guide') { %>
     <div class="guide-links">
@@ -32,7 +43,7 @@
       <% } %>
     </div>
   <% } %>
-  <div class="footer">    
+  <div class="footer">
       <!-- Caught a mistake or want to contribute to the documentation?
 	   <a href="https://github.com/heartexlabs/label-studio/blob/master/src/<%- page.path.replace(/\.html$/, '.md') %>" target="_blank">
 	   Edit this page on GitHub!

diff --git a/docs/themes/htx/layout/partials/header.ejs b/docs/themes/htx/layout/partials/header.ejs
@@ -7,3 +7,5 @@
     <%- partial('partials/main_menu', { context: 'nav' }) %>
   </ul>
 </div>
+
+
diff --git a/docs/themes/htx/layout/partials/index.ejs b/docs/themes/htx/layout/partials/index.ejs
diff --git a/docs/themes/htx/layout/partials/main_menu.ejs b/docs/themes/htx/layout/partials/main_menu.ejs
@@ -1,4 +1,5 @@
 
+
 <% if (page.type === "guide") { %>
 <span style="margin-right: 1em;">Guide</span>
 <% } else { %>
@@ -30,7 +31,10 @@
        data-size="large" data-show-count="true" aria-label="Star heartexlabs/label-studio on GitHub"></a>
 
 </div>
-<img src="/images/github-icon.png" height="25px" style="margin-left: 10px; cursor:pointer"
+<img src="/images/github-icon.png" height="25px" style="margin-left: 10px; cursor:pointer" class="github-link"
      onclick="window.location='https://github.com/heartexlabs/label-studio'">
 
-
+<div id="site_search">
+  <input type="text" id="local-search-input" name="q" results="0"
+         placeholder="Search" class="st-search-input st-default-search-input form-control"/>
+</div>
diff --git a/docs/themes/htx/layout/partials/sidebar.ejs b/docs/themes/htx/layout/partials/sidebar.ejs
@@ -5,6 +5,6 @@
       <%- partial('partials/toc', { type: type }) %>
     </div>
   </div>
-  <img src="<%- url_for("/images/opossum/other/5.svg") %>" alt="label studio logo" height="120" />
+  <a href="/"><img src="<%- url_for("/images/opossum/other/5.svg") %>" alt="label studio logo" height="120" /></a>
 </div>
 <% } %>
diff --git a/docs/themes/htx/source/css/page.styl b/docs/themes/htx/source/css/page.styl
@@ -9,6 +9,19 @@
 @import "_modal"
 @import "_themes-example"
 
+::-webkit-scrollbar-track
+  /*-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3) !important;*/
+  background-color: #f5f5f5 !important;
+
+::-webkit-scrollbar
+  width: 6px !important;
+  height: 6px !important;
+  background-color: #f5f5f5 !important;
+
+::-webkit-scrollbar-thumb
+  background-color: #AAA !important;
+  border: 1px solid #999 !important;
+
 #header
   box-shadow: 0 0 1px rgba(0,0,0,.25)
   transition: background-color .3s ease-in-out
@@ -254,7 +267,8 @@
   iframe
     margin: 0 !important
 
-@media screen and (max-width: 400px)
+@media screen and (max-width: 450px)
+  .github-link,
   .github-button-wrap
     display: none;
 

diff --git a/docs/themes/htx/source/css/search.styl b/docs/themes/htx/source/css/search.styl
@@ -0,0 +1,60 @@
+#site_search
+  right: 0;
+  z-index: 2000;
+  margin-right: 1em;
+  margin-left: 1em;
+
+#local-search-input
+  padding: 5px;
+  border-radius: 3px;
+  border: solid 1px #d67500 !important;
+  opacity: 0.7;
+
+#local-search-result-wrapper
+  margin-bottom: 3em;
+  position: fixed;
+  background: white;
+  z-index: 1000;
+  top: 70px;
+  right: 0;
+  margin-right: 1em;
+  margin-left: 1em;
+
+#local-search-result
+  min-width: 400px;
+  box-shadow: 0 0 10px rgba(0,0,0,0.3);
+  border-radius: 5px;
+  background: white;
+  overflow: auto;
+  max-height: 4in;
+  padding: 20px;
+  word-break: break-all;
+
+  h3
+    margin-top: 1.5em;
+
+ul.search-result-list
+  padding-left: 20px;
+
+  li
+    margin-top: 1em;
+    margin-bottom: 0.5em;
+    cursor: pointer;
+
+a.search-result-title
+  margin-top: 2em !important;
+  font-weight: bold;
+  color: #f58a48;
+
+p.search-result
+  color: #555;
+  margin-top: 0;
+
+em.search-keyword
+  border-bottom: 1px dashed #4088b8;
+  font-weight: bold !important;
+  font-style: normal;
+
+@media screen and (max-width: 900px)
+  #local-search-result
+    min-width: 200px;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,3 +7,5 @@
		<%- partial('partials/main_menu', { context: 'nav' }) %>
		</ul>
		</div>