docs: add search box

docs/_layouts/en.html

@@ -5,8 +5,15 @@
 <div id="header">
   <div class="container-lg px-3">
     <a class="logo" href="{{ '/' | relative_url }}">Leoric</a>
+
     <nav>
       <ul>
+        <li class="nav-item">
+          <form action="/search.html" method="get" class="search">
+            <input type="search" name="q" placeholder="Search the site..." id="search-box">
+            <input type="submit" value="🔍">
+          </form>
+        </li>
         <li class="nav-item">
           <a href="{{ '/starter' | relative_url }}">Starter</a>
         </li>

docs/_layouts/zh.html

@@ -7,6 +7,12 @@
     <a class="logo" href="{{ '/zh' | relative_url }}">Leoric</a>
     <nav>
       <ul>
+        <li class="nav-item">
+          <form action="/zh/search.html" method="get" class="search">
+            <input type="search" name="q" placeholder="Search the site..." id="search-box">
+            <input type="submit" value="🔍">
+          </form>
+        </li>
         <li class="nav-item">
           <a href="{{ '/zh/starter' | relative_url }}">快速上手</a>
         </li>

docs/assets/css/style.scss

@@ -137,6 +137,36 @@ body {
       }
     }
 
+    .search {
+      position: relative;
+
+      & [type="search"] {
+        padding: 0 24px 0 4px;
+        width: 100%;
+        background: var(--bg-color);
+        color: var(--color);
+        border: 1px solid rgb(118, 118, 118);
+        height: 1.6em;
+        border-radius: 0;
+
+        &:focus-visible {
+          border: none;
+        }
+      }
+
+      & [type="submit"] {
+        position: absolute;
+        right: 0;
+        width: 1.6em;
+        height: 1.6em;
+        line-height: 1.7;
+        padding: 0;
+        background: none;
+        border: none;
+        cursor: pointer;
+      }
+    }
+
     .dropdown-trigger {
       &:after {
         content: '';
@@ -249,12 +279,12 @@ body {
     }
 
     a.logo {
-      background: url(/favicon.ico) no-repeat 32px 8px;
+      background: url(/favicon.ico) no-repeat 0 8px;
       background-size: 40px;
       display: block;
       height: 56px;
       line-height: unset;
-      padding-left: 84px;
+      padding-left: 48px;
       padding-top: 6px;
       margin-bottom: 12px;
       font-size: 2em;
@@ -269,7 +299,6 @@ body {
     a {
       height: 32px;
       line-height: 32px;
-      padding: 0 12px 0 36px;
       background-color: transparent;
       opacity: 0.75;
       transition: all 0.1s ease-in-out;
@@ -281,7 +310,7 @@ body {
     }
 
     .color-scheme {
-      margin: 6px 6px 6px 36px;
+      margin: 6px 0;
     }
 
     nav {
@@ -290,15 +319,18 @@ body {
       .nav-item {
         display: block;
         padding: 0;
+      }
 
+      .search {
+        margin-bottom: 8px;
       }
 
       .dropdown-trigger:after {
         display: block;
         content: '';
         position: absolute;
         top: 12px;
-        right: 12px;
+        right: 0;
         bottom: initial;
         left: initial;
         background: none;
@@ -322,7 +354,7 @@ body {
           padding-left: 0;
 
           a {
-            padding: 0 12px 0 66px;
+            padding: 0 12px 0 24px;
           }
 
           a.active {

docs/assets/javascript/.eslintrc

@@ -2,6 +2,9 @@
   "env": {
     "browser": true
   },
+  "globals": {
+    "lunr": true
+  },
   "rules": {
     "strict": [2, "function"]
   }

docs/assets/javascript/search.mjs

@@ -0,0 +1,46 @@
+
+
+function displaySearchResults(results, store) {
+  var searchResults = document.getElementById('search-results');
+
+  if (results.length) { // Are there any results?
+    var appendString = '';
+
+    for (var i = 0; i < results.length; i++) {  // Iterate over the results
+      var item = store[results[i].ref];
+      appendString += '<li><a href="' + item.url + '"><h3>' + item.title + '</h3></a>';
+      appendString += '<p>' + item.content.substring(0, 150) + '...</p></li>';
+    }
+
+    searchResults.innerHTML = appendString;
+  } else {
+    searchResults.innerHTML = '<li>No results found</li>';
+  }
+}
+
+var searchTerm = new URLSearchParams(window.location.search).get('q');
+
+if (searchTerm) {
+  document.getElementById('search-box').setAttribute('value', searchTerm);
+
+  // Initalize lunr with the fields it will be searching on. I've given title
+  // a boost of 10 to indicate matches on this field are more important.
+  var idx = lunr(function () {
+    this.field('id');
+    this.field('title', { boost: 10 });
+    this.field('categories');
+    this.field('content');
+
+    for (var key in window.store) { // Add the data to lunr
+      this.add({
+      'id': key,
+      'title': window.store[key].title,
+      'categories': window.store[key].categories,
+      'content': window.store[key].content
+      });
+    }
+  });
+
+  var results = idx.search(searchTerm); // Get lunr to perform a search
+  displaySearchResults(results, window.store); // We'll write this in the next section
+}

docs/search.html

@@ -0,0 +1,37 @@
+---
+layout: en
+---
+
+<ul id="search-results"></ul>
+
+<script>
+  window.store = {
+    {% for post in site.posts %}
+    {% if post.categories contains "zh" %}
+      {% continue %}
+    {% else %}
+      "{{ post.url | slugify }}": {
+        "title": {{ post.title | jsonify }},
+        "categories": {{ post.categories | jsonify }},
+        "content": {{ post.content | strip_html | strip_newlines | jsonify }},
+        "url": {{ post.url | jsonify }}
+      },
+    {% endif %}
+    {% endfor %}
+    {% for page in site.pages %}
+    {% if page.url contains "/zh/" %}
+      {% continue %}
+    {% else %}
+      "{{ page.url | slugify }}": {
+        "title": {{ page.title | jsonify }},
+        "categories": {{ page.categories | jsonify }},
+        "content": {{ page.content | strip_html | strip_newlines | jsonify }},
+        "url": {{ page.url | jsonify }}
+      },
+    {% endif %}
+    {% endfor %}
+  };
+</script>
+
+<script src="https://unpkg.com/lunr/lunr.js"></script>
+<script src="{{ 'assets/javascript/search.mjs' | relative_url }}"></script>

docs/zh/search.html

@@ -0,0 +1,34 @@
+---
+layout: zh
+---
+
+<ul id="search-results"></ul>
+
+<script>
+  window.store = {
+    {% for post in site.posts %}
+    {% if post.categories contains "zh" %}
+      "{{ post.url | slugify }}": {
+        "title": {{ post.title | jsonify }},
+        "categories": {{ post.categories | jsonify }},
+        "content": {{ post.content | strip_html | strip_newlines | jsonify }},
+        "url": {{ post.url | jsonify }}
+      }
+      {% unless forloop.last %},{% endunless %}
+    {% endif %}
+    {% endfor %}
+    {% for page in site.pages %}
+    {% if page.url contains "/zh/" %}
+      "{{ page.url | slugify }}": {
+        "title": {{ page.title | jsonify }},
+        "categories": {{ page.categories | jsonify }},
+        "content": {{ page.content | strip_html | strip_newlines | jsonify }},
+        "url": {{ page.url | jsonify }}
+      },
+    {% endif %}
+    {% endfor %}
+  };
+</script>
+
+<script src="https://unpkg.com/lunr/lunr.js"></script>
+<script src="{{ 'assets/javascript/search.mjs' | relative_url }}"></script>