implement ugly search, commented out

semanticdata · Feb 9, 2024 · 1912f0c · 1912f0c
1 parent bcc407c
commit 1912f0c
Show file tree

Hide file tree

Showing 13 changed files with 642 additions and 10 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -1,9 +1,11 @@
+const dayjs = require("dayjs");
+const autoprefixer = require("autoprefixer");
+const markdownIt = require("markdown-it");
+const postcss = require("postcss");
+const tailwindcss = require("tailwindcss");
+const searchFilter = require("./src/assets/js/searchFilter");
+
 module.exports = function (eleventyConfig) {
-  const dayjs = require("dayjs");
-  const autoprefixer = require("autoprefixer");
-  const markdownIt = require("markdown-it");
-  const postcss = require("postcss");
-  const tailwindcss = require("tailwindcss");
   const markdownItOptions = {
     html: true,
     linkify: true,
@@ -42,6 +44,9 @@ module.exports = function (eleventyConfig) {
     };
   };
 
+  // Search w/ Elasticlunr-js
+  eleventyConfig.addFilter("search", searchFilter);
+
   // Syntax Highlighting
   const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
   eleventyConfig.addPlugin(syntaxHighlight);
@@ -101,5 +106,6 @@ module.exports = function (eleventyConfig) {
       includes: "_includes",
       data: "_data",
     },
+    passthroughFileCopy: true,
   };
 };
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,3 @@
-/_site
-node_modules
+_site
 .DS_Store
+node_modules
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "markdown-it-anchor": "^8.6.7",
     "markdown-it-attrs": "^4.1.6",
     "markdown-it-footnote": "^4.0.0",
-    "markdown-it-table-of-contents": "^0.6.0"
+    "markdown-it-table-of-contents": "^0.6.0",
+    "elasticlunr": "^0.9.5"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/_includes/head.html b/src/_includes/head.html
@@ -40,6 +40,7 @@
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bitter&display=swap">
 
 <!-- Stylesheets -->
+<link rel="stylesheet" href="/assets/css/search-main.css" />
 <link rel="stylesheet" href="/assets/css/prism.css" />
 <link rel="stylesheet" href="/assets/css/styles.css" />
 <link rel="stylesheet" href="/assets/css/style.css" />

diff --git a/src/_includes/search.html b/src/_includes/search.html
@@ -0,0 +1,13 @@
+<div id="nav-search" class="nav-search">
+  <form>
+    <input id="nav-search__input" class="nav-search__input" type="search" onfocusin="inFocus(this)"
+      placeholder='search notes (type "/" to focus &#38; "ESC" to lose)'
+      aria-label='search notes (type "/" to focus &#38; "ESC" to lose)'>
+  </form>
+  <div id="nav-search__result-container" style="display: none;">
+    <ul id="nav-search__ul"></ul>
+    <div id="nav-search__no-result" style="display: none;">
+      <p>No results found.</p>
+    </div>
+  </div>
+</div>
diff --git a/src/_layouts/default.html b/src/_layouts/default.html
@@ -15,6 +15,8 @@
 
   </header>
 
+  <!-- {% include 'search.html' %} -->
+
   <main>{{content}}</main>
 
   <footer class="page-footer">
@@ -31,8 +33,13 @@
     {% include 'darkmode-toggle.html' %}
   </footer>
 
-  <script src="/assets/js/script.js"></script>
-  <script src="/assets/js/prism.js"></script>
+  <script type="text/javascript"
+    src="https://cdnjs.cloudflare.com/ajax/libs/elasticlunr/0.9.6/elasticlunr.min.js"></script>
+
+  <script type="text/javascript" src="/assets/js/script.js"></script>
+  <script type="text/javascript" src="/assets/js/prism.js"></script>
+  <script type="text/javascript" src="/assets/js/search.js"></script>
+  <script type="text/javascript" src="/assets/js/search_custom.js"></script>
 </body>
 
 </html>
diff --git a/src/assets/css/search-main.css b/src/assets/css/search-main.css
@@ -0,0 +1,128 @@
+body {
+  background: #282a36;
+  color: #fff;
+  font-family: 'Poppins', sans-serif; }
+
+a {
+  color: #ffd479;
+  text-decoration: none; }
+  a:hover {
+    color: #fff;
+    border-bottom: 2px solid #ffd479; }
+
+b, strong {
+  color: #8cc8ff; }
+
+img {
+  max-width: 100%; }
+
+.container {
+  width: 100%;
+  margin: 2rem auto; }
+  @media (min-width: 1200px) {
+    .container {
+      max-width: 900px; } }
+
+.site-footer {
+  margin-top: 2rem;
+  padding: 1rem 0; }
+
+.nav-search {
+  margin-top: 2rem;
+  display: block;
+  background-image: linear-gradient(to right, #3d4251, #3b3f4c, #393d46, #373a41, #35373c);
+  width: 100%;
+  position: relative;
+  border-radius: 10px; }
+  .nav-search form {
+    display: flex; }
+  .nav-search .nav-search__input {
+    border: 0;
+    background: transparent;
+    color: #ddd;
+    font-size: 1.2rem;
+    padding: 1.5rem 1rem;
+    width: 100%; }
+    .nav-search .nav-search__input:focus {
+      outline: none;
+      border: 0; }
+  .nav-search #nav-search__result-container {
+    position: absolute;
+    max-height: 80vh;
+    overflow: auto;
+    width: 100%;
+    background: #35373c;
+    border-bottom-right-radius: 5px;
+    border-bottom-left-radius: 5px;
+    padding: 0;
+    filter: drop-shadow(2px 4px 6px black); }
+    @media (max-width: 767px) {
+      .nav-search #nav-search__result-container {
+        position: fixed;
+        left: 0;
+        right: 0;
+        border-radius: 0; } }
+    .nav-search #nav-search__result-container ul#nav-search__ul {
+      padding: 0;
+      margin: 0;
+      list-style: none; }
+      .nav-search #nav-search__result-container ul#nav-search__ul li {
+        display: flex;
+        padding: 10px;
+        align-items: center;
+        justify-content: space-between;
+        overflow: hidden; }
+        .nav-search #nav-search__result-container ul#nav-search__ul li .item__icon {
+          width: 20px; }
+          .nav-search #nav-search__result-container ul#nav-search__ul li .item__icon img {
+            width: 100%;
+            height: auto; }
+        .nav-search #nav-search__result-container ul#nav-search__ul li .item__content {
+          padding: 0 10px;
+          width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis; }
+          .nav-search #nav-search__result-container ul#nav-search__ul li .item__content h3 {
+            margin: 0;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis; }
+            .nav-search #nav-search__result-container ul#nav-search__ul li .item__content h3 a {
+              color: #ffcb5e;
+              white-space: inherit;
+              padding: 0;
+              text-align: left;
+              font-weight: normal;
+              font-size: 16px;
+              line-height: 1.5;
+              margin: 0;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              display: block; }
+              .nav-search #nav-search__result-container ul#nav-search__ul li .item__content h3 a:hover {
+                border-bottom: none;
+                color: #8cc8ff; }
+          .nav-search #nav-search__result-container ul#nav-search__ul li .item__content p {
+            text-align: left;
+            margin: 0;
+            line-height: 1.5;
+            font-size: 0.95rem;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis; }
+        .nav-search #nav-search__result-container ul#nav-search__ul li .enter {
+          width: 20px;
+          display: none; }
+        .nav-search #nav-search__result-container ul#nav-search__ul li.selected {
+          background: #282a36; }
+          .nav-search #nav-search__result-container ul#nav-search__ul li.selected .enter {
+            display: block; }
+      .nav-search #nav-search__result-container ul#nav-search__ul mark {
+        background: none;
+        color: inherit;
+        box-shadow: inset 0 -3px 0 0 #fff; }
+    .nav-search #nav-search__result-container #nav-search__no-result {
+      padding: 0 10px; }
+      .nav-search #nav-search__result-container #nav-search__no-result p {
+        text-align: left; }