Search

README.md

@@ -23,9 +23,28 @@ $ git clone https://github.com/matcornic/hugo-theme-learn.git
 - Automatic table of contents
 - Create buttons (typically used to provide a link to a demo)
 
+# Search
+To use the `search` functionality, you just have to put a `lunr` index which respects this format :
+```json
+[
+    {
+        "uri": "/docs/01-start/index",
+        "title": "Get started",
+        "content": "\n\nGet started\n\nAll you need to know...\n",
+        "tags": ["start", "intro"]
+    },
+    ...
+]
+```
+
+into a `static/json/search.json` file in your hugo project.
+
+And set `search = true` in your config.toml
+
+To generate your lunr index, you can see this project https://github.com/gwleclerc/lunr-hugo which parse your markdown files and extract toml and yaml headers to create index with corresponding format.
+
 # TODO
 
 - [Handling more than 2 levels in documentation](https://github.com/matcornic/hugo-theme-learn/issues/11)
-- [Search in site](https://github.com/matcornic/hugo-theme-learn/issues/12)
 - [Handling videos](https://github.com/matcornic/hugo-theme-learn/issues/13)
 - [Add optional button to create doc issue (like github)](https://github.com/matcornic/hugo-theme-learn/issues/14)

layouts/partials/footer.html

@@ -14,7 +14,6 @@
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
     </div>
-    <script src="/js/jquery-2.x.min.js"></script>
     <script src="/js/clipboard.min.js"></script>
     <script src="/js/perfect-scrollbar.min.js"></script>
     <script src="/js/perfect-scrollbar.jquery.min.js"></script>

layouts/partials/header.html

@@ -13,8 +13,10 @@
     <link href="/css/hybrid.css" rel="stylesheet">
     <link href="/css/featherlight.min.css" rel="stylesheet">
     <link href="/css/perfect-scrollbar.min.css" rel="stylesheet">
+    <link href="/css/horsey.css" rel="stylesheet">
     <link href="/css/theme.css" rel="stylesheet">
     <link href="/css/hugo-theme.css" rel="stylesheet">
+    <script src="/js/jquery-2.x.min.js"></script>
     <style type="text/css">:root #header + #content > #left > #rlblock_left
     {display:none !important;}</style>
     {{ partial "style.html" . }}

layouts/partials/menu.html

@@ -3,11 +3,7 @@
     <div id="header">
       {{ partial "logo.html" . }}
       {{ if .Site.Params.search }}
-      <div class="searchbox">
-        <label for="search-by"><i class="fa fa-search"></i></label>
-        <input id="search-by" type="text" placeholder="Search Documentation" data-search-input="/lunr.json/query">
-        <span data-search-clear=""><i class="fa fa-close"></i></span>
-      </div>
+        {{ partial "search.html" . }}
       {{ end }}
     </div>
 </div>

layouts/partials/search.html

@@ -0,0 +1,8 @@
+<div class="searchbox">
+    <label for="search-by"><i class="fa fa-search"></i></label>
+    <input id="search-by" type="text" placeholder="Search">
+    <span data-search-clear=""><i class="fa fa-close"></i></span>
+</div>
+<script type="text/javascript" src="/js/lunr.min.js"></script>
+<script type="text/javascript" src="/js/horsey.js"></script>
+<script type="text/javascript" src="/js/search.js"></script>

static/css/horsey.css

@@ -0,0 +1,38 @@
+.sey-list {
+  display: none;
+  position: absolute;
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+  box-shadow: 1px 2px 6px;
+  background-color: #fff;
+  color: #333;
+  transition: left 0.1s ease-in-out;
+  position: fixed;
+  max-height: 70vh;
+  overflow: auto;
+  left: 17px !important;
+  top: 135px !important;
+  width: 265px;
+}
+.sey-show {
+  display: block;
+}
+.sey-hide {
+  display: none;
+}
+.sey-item {
+  cursor: pointer;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding: 7px;
+}
+.sey-item:hover {
+  background-color: #444;
+  color: #fff;
+}
+.sey-selected {
+  background-color: #333;
+  color: #fff;
+}