From be46e671ebd8545e1c734147666aed4e8afe3e7a Mon Sep 17 00:00:00 2001
From: Chen Yangjian <252317+cyjake@users.noreply.github.com>
Date: Tue, 27 Aug 2024 10:19:12 +0800
Subject: [PATCH] docs: add search box (#424)

---
 docs/_layouts/en.html             |  7 +++++
 docs/_layouts/zh.html             |  6 ++++
 docs/assets/css/style.scss        | 44 +++++++++++++++++++++++++----
 docs/assets/javascript/.eslintrc  |  3 ++
 docs/assets/javascript/search.mjs | 46 +++++++++++++++++++++++++++++++
 docs/search.html                  | 37 +++++++++++++++++++++++++
 docs/zh/search.html               | 34 +++++++++++++++++++++++
 7 files changed, 171 insertions(+), 6 deletions(-)
 create mode 100644 docs/assets/javascript/search.mjs
 create mode 100644 docs/search.html
 create mode 100644 docs/zh/search.html

diff --git a/docs/_layouts/en.html b/docs/_layouts/en.html
index c5ecb4eb..6705c5e3 100644
--- a/docs/_layouts/en.html
+++ b/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>
diff --git a/docs/_layouts/zh.html b/docs/_layouts/zh.html
index 3d991843..d798b63d 100644
--- a/docs/_layouts/zh.html
+++ b/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>
diff --git a/docs/assets/css/style.scss b/docs/assets/css/style.scss
index 2b79f8f4..ecac469b 100644
--- a/docs/assets/css/style.scss
+++ b/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,7 +319,10 @@ body {
       .nav-item {
         display: block;
         padding: 0;
+      }
 
+      .search {
+        margin-bottom: 8px;
       }
 
       .dropdown-trigger:after {
@@ -298,7 +330,7 @@ body {
         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 {
diff --git a/docs/assets/javascript/.eslintrc b/docs/assets/javascript/.eslintrc
index 55601b14..e7cf0fc1 100644
--- a/docs/assets/javascript/.eslintrc
+++ b/docs/assets/javascript/.eslintrc
@@ -2,6 +2,9 @@
   "env": {
     "browser": true
   },
+  "globals": {
+    "lunr": true
+  },
   "rules": {
     "strict": [2, "function"]
   }
diff --git a/docs/assets/javascript/search.mjs b/docs/assets/javascript/search.mjs
new file mode 100644
index 00000000..24336e27
--- /dev/null
+++ b/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
+}
diff --git a/docs/search.html b/docs/search.html
new file mode 100644
index 00000000..c0172b8a
--- /dev/null
+++ b/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>
diff --git a/docs/zh/search.html b/docs/zh/search.html
new file mode 100644
index 00000000..b1b16212
--- /dev/null
+++ b/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>