Merge pull request #14 from oleeskild/search

Search

.eleventy.js

@@ -184,6 +184,9 @@ module.exports = function(eleventyConfig) {
 
     eleventyConfig.addPassthroughCopy("src/site/img");
     eleventyConfig.addPlugin(faviconPlugin, { destination: 'dist' });
+    eleventyConfig.addFilter('jsonify', function (variable) {
+      return JSON.stringify(variable);
+    });
 
     return {
         dir: {

.eleventyignore

@@ -0,0 +1 @@
+netlify/functions

.gitignore

@@ -1,2 +1,6 @@
 node_modules
 dist
+netlify/functions/search/data.json
+netlify/functions/search/index.json
+# Local Netlify folder
+.netlify

netlify.toml

@@ -2,7 +2,13 @@
   publish = "dist"
   command = "npm install && npm run build"
 
+[[redirects]]
+  from = "/api/*"
+  to = "/.netlify/functions/:splat"
+  status = 200
+
 [[redirects]]
   from = "/*"
   to = "/404"
   status = 404
+

netlify/functions/search/search.js

@@ -0,0 +1,45 @@
+const lunrjs = require('lunr');
+
+const handler = async (event) => {
+  try {
+
+
+    const search = event.queryStringParameters.term;
+    if(!search) throw('Missing term query parameter');
+
+    const data = require('./data.json');
+    const indexJson = require('./index.json');
+    const index = lunrjs.Index.load(indexJson);
+    console.log('index made');
+
+    let results = index.search(search);
+
+    results.forEach(r => {
+      r.title = data[r.ref].title;
+      r.content = truncate(data[r.ref].content, 400);
+      r.date = data[r.ref].date;
+      r.url = data[r.ref].url;
+      
+      delete r.ref;
+    });
+
+    return {
+      statusCode: 200,
+      body: JSON.stringify(results),
+      // // more keys you can return:
+      // headers: { "headerName": "headerValue", ... },
+      // isBase64Encoded: true,
+    }
+  } catch (error) {
+    return { statusCode: 500, body: error.toString() }
+  }
+}
+
+function truncate(str, size) {
+  //first, remove HTML
+  str = str.replace(/<.*?>/g, '');
+  if(str.length < size) return str;
+  return str.substring(0, size-3) + '...';
+}
+
+module.exports = { handler }

package-lock.json

@@ -17,6 +17,7 @@
                 "eleventy-favicon": "^1.1.2",
                 "fs-file-tree": "^1.1.1",
                 "gray-matter": "^4.0.3",
+                "lunr": "^2.3.9",
                 "markdown-it": "^12.3.2",
                 "markdown-it-footnote": "^3.0.3",
                 "markdown-it-mathjax3": "^4.3.1",
@@ -3332,6 +3333,11 @@
                 "yallist": "^2.1.2"
             }
         },
+        "node_modules/lunr": {
+            "version": "2.3.9",
+            "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz",
+            "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow=="
+        },
         "node_modules/luxon": {
             "version": "2.3.1",
             "resolved": "https://registry.npmjs.org/luxon/-/luxon-2.3.1.tgz",
@@ -8855,6 +8861,11 @@
                 "yallist": "^2.1.2"
             }
         },
+        "lunr": {
+            "version": "2.3.9",
+            "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz",
+            "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow=="
+        },
         "luxon": {
             "version": "2.3.1",
             "resolved": "https://registry.npmjs.org/luxon/-/luxon-2.3.1.tgz",

package.json

@@ -9,7 +9,8 @@
         "watch:eleventy": "cross-env ELEVENTY_ENV=dev eleventy --serve",
         "build:eleventy": "cross-env ELEVENTY_ENV=prod NODE_OPTIONS=--max-old-space-size=4096 eleventy",
         "build:sass": "sass src/site/styles:dist/styles",
-        "build": "npm-run-all build:*"
+        "build": "npm-run-all build:*",
+        "postbuild": "node src/site/lunr-index.js"
     },
     "keywords": [],
     "author": "",
@@ -29,6 +30,7 @@
         "eleventy-favicon": "^1.1.2",
         "fs-file-tree": "^1.1.1",
         "gray-matter": "^4.0.3",
+        "lunr": "^2.3.9",
         "markdown-it": "^12.3.2",
         "markdown-it-footnote": "^3.0.3",
         "markdown-it-mathjax3": "^4.3.1",

src/helpers/constants.js

@@ -4,5 +4,6 @@ exports.ALL_NOTE_SETTINGS= [
     "dgShowBacklinks",
     "dgShowLocalGraph",
     "dgShowInlineTitle",
-    "dgShowFileTree"
+    "dgShowFileTree",
+    "dgEnableSearch"
 ];

src/site/_includes/components/filetree.njk

@@ -19,22 +19,26 @@
         {%endif%}
     {% endmacro %}
     
-    <div x-init="isDesktop = window.innerWidth>=1490;" 
+    <div x-init="isDesktop = (window.innerWidth>=1490) ? true: false;" 
             x-on:resize.window="isDesktop = (window.innerWidth>=1490) ? true : false;" 
             x-data="{isDesktop: true, showFilesMobile: false}">
 
-        <div x-show="!isDesktop">
+        <div x-show.important="!isDesktop">
             {%include "components/filetreeNavbar.njk"%}
         </div>
         
         <div x-show="showFilesMobile && !isDesktop" @click="showFilesMobile = false" style="display:none;" class="fullpage-overlay"></div>
 
-      <nav class="filetree-sidebar" style="display:none;" x-show="isDesktop || showFilesMobile">
+      <nav class="filetree-sidebar"  x-show.important="isDesktop || showFilesMobile">
 
          <a href="/" style="text-decoration: none;">
                <h1 style="text-align:center;">{{meta.siteName}}</h1>
          </a>
-
+        {% if settings.dgEnableSearch === true%}
+            <div style="display: flex; justify-content: center;">
+                {% include "components/searchButton.njk" %}
+            </div>
+        {%endif%}
          <div class="folder" x-data="{isOpen: true}">
                {%- for fileOrFolderName, fileOrFolder in filetree -%}
                   {{menuItem(fileOrFolderName, fileOrFolder, 0)}}

src/site/_includes/components/filetreeNavbar.njk

@@ -5,4 +5,8 @@
             <h1>{{meta.siteName}}</h1>
         </a>
     </div>
+    
+    {% if settings.dgEnableSearch === true%}
+        {% include "components/searchButton.njk" %}
+    {%endif%}
 </nav>

src/site/_includes/components/navbar.njk

@@ -1,5 +1,18 @@
+{%if settings.dgHomeLink === true%}
     <nav class="navbar">
+        <div class="navbar-inner">
             <a href="/" style="text-decoration: none;">
                 <h1>{{meta.siteName}}</h1>
             </a>
+        </div>
+        {% if settings.dgEnableSearch === true%}
+            {% include "components/searchButton.njk" %}
+        {%endif%}
     </nav>
+    {%else%}
+    <div class="empty-navbar" >
+        {% if settings.dgEnableSearch === true%}
+            {% include "components/searchButton.njk" %}
+        {%endif%}
+    </div>
+{%endif%}

src/site/_includes/components/searchButton.njk

@@ -0,0 +1,7 @@
+<div class="search-button" onclick="toggleSearch()">
+        <i class="fa fa-search"></i>
+        <span>Search</span>
+        <div style="font-size: 0.6rem; margin:0 10px 0 12px; text-align:center;" class="search-keys">
+            CTRL + K
+        </div>
+</div>

src/site/_includes/components/searchContainer.njk

@@ -0,0 +1,23 @@
+<div class="search-container" id="globalsearch" onclick="toggleSearch()">
+    <div class="search-box">
+        <input type="search" id="term" placeholder="Start typing...">
+        <div id="search-results"></div>
+        <footer class="search-box-footer">
+            <div class="navigation-hint">
+                <span>Enter to select</span>
+            </div>
+
+            <div class="navigation-hint">
+               <i class="fa fa-arrow-up" aria-hidden="true"></i>
+                <i class="fa fa-arrow-down" aria-hidden="true"></i>
+                <span>to navigate</span>
+            </div>
+
+            <div class="navigation-hint">
+                <span>ESC to close</span>
+            </div>
+
+        </footer>
+    </div>
+</div>
+{%include "components/searchScript.njk"%}

src/site/_includes/components/searchScript.njk

@@ -0,0 +1,148 @@
+<script>
+    document.addEventListener('DOMContentLoaded', init, false);
+    document.addEventListener('DOMContentLoaded', setCorrectShortcut, false);
+
+    window.toggleSearch=function(){
+        if(document.getElementById('globalsearch').classList.contains('active')){
+            document.getElementById('globalsearch').classList.remove('active');
+        }else{
+
+            document.getElementById('globalsearch').classList.add('active');
+            document.getElementById('term').focus();
+        }
+    }
+    
+
+    function debounce(func, timeout = 300) {
+        let timer;
+        return(...args) => {
+            clearTimeout(timer);
+            timer = setTimeout(() => {
+                func.apply();
+            }, timeout);
+        };
+    }
+
+    function setCorrectShortcut(){
+        if(navigator.platform.toUpperCase().indexOf('MAC')>=0){
+            document.querySelectorAll(".search-keys").forEach(x=>x.innerHTML = "⌘ + K");
+        }
+    }
+
+    async function init() {
+
+        //open searchmodal when ctrl + k is pressed, cmd + k on mac
+        document.addEventListener('keydown', (e) => {
+            if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+                e.preventDefault();
+                toggleSearch();
+            }
+            if (e.key === 'Escape') {
+                document.getElementById('globalsearch').classList.remove('active');
+            }
+
+            //navigate search results with arrow keys
+            if (document.getElementById('globalsearch').classList.contains('active')) {
+                if (e.key === 'ArrowDown') {
+                    e.preventDefault();
+                    let active = document.querySelector('.searchresult.active');
+                    if (active) {
+                        active.classList.remove('active');
+                        if (active.nextElementSibling) {
+                            active.nextElementSibling.classList.add('active');
+                        } else {
+                            document.querySelector('.searchresult').classList.add('active');
+                        }
+                    } else {
+                        document.querySelector('.searchresult').classList.add('active');
+                    }
+                    
+                    let currentActive = document.querySelector('.searchresult.active');
+                    if (currentActive) {
+                        currentActive .scrollIntoView({
+                            behavior: 'smooth',
+                            block: 'nearest',
+                            inline: 'start',
+                        });
+                    }
+                }
+                if (e.key === 'ArrowUp') {
+                    e.preventDefault();
+                    let active = document.querySelector('.searchresult.active');
+                    if (active) {
+                        active.classList.remove('active');
+                        if (active.previousElementSibling) {
+                            active.previousElementSibling.classList.add('active');
+                        } else {
+                            document.querySelectorAll('.searchresult').forEach((el) => {
+                                if (!el.nextElementSibling) {
+                                    el.classList.add('active');
+                                }
+                            });
+                        }
+                    } else {
+                        document.querySelectorAll('.searchresult').forEach((el) => {
+                            if (el.nextElementSibling) {
+                                el.classList.add('active');
+                            }
+                        });
+                    }
+
+                    let currentActive = document.querySelector('.searchresult.active');
+                    if (currentActive) {
+                        currentActive .scrollIntoView({
+                            behavior: 'smooth',
+                            block: 'nearest',
+                            inline: 'start',
+                        });
+                    }
+
+                }
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    let active = document.querySelector('.searchresult.active');
+                    if (active) {
+                        window.location.href = active.querySelector("a").href;
+                    }
+                }
+            }
+        });
+
+        field = document.querySelector('#term');
+        field.addEventListener('keydown', (e) => {
+            if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') {
+                debounce(()=>search())();
+            }
+        });
+        resultsDiv = document.querySelector('#search-results');
+
+        const params = new URL(location.href).searchParams;
+        if (params.get('q')) {
+            field.setAttribute('value', params.get('q'));
+            search();
+        }
+    }
+    async function search() {
+        let search = field
+            .value
+            .trim();
+        if (!search) 
+            return;
+        console.log(`search for ${search}`);
+        let searchRequest = await fetch(`/api/search?term=${encodeURIComponent(search)}`);
+        let results = await searchRequest.json();
+        let resultsHTML = '';
+        if (!results.length) {
+            resultsHTML += `<p>No results for "${search}"</p>`;
+            resultsDiv.innerHTML = resultsHTML;
+            return;
+        }
+        resultsHTML += '<ul>';
+        // we need to add title, url from ref
+        results.forEach(r => {
+            resultsHTML += `<li class="searchresult"><a class="search-link" href="${r.url}">${r.title}</a><span onclick="window.location='${r.url}'">${r.content}</span></li>`;
+        });
+        resultsHTML += '</ul>';
+        resultsDiv.innerHTML = resultsHTML;
+    }
+</script>

src/site/_includes/layouts/note.njk

@@ -17,7 +17,11 @@ permalink: "notes/{{ page.fileSlug | slugify }}/"
       {%include "components/filetree.njk"%}
     {% endif %}
 
-    <div class="content">
+    {% if settings.dgEnableSearch === true %}
+      {%include "components/searchContainer.njk"%}
+    {% endif %}
+
+    <div class="content cm-s-obsidian">
       {% if settings.dgShowInlineTitle === true %}
         <h1>{{ page.fileSlug }}</h1>
       {% endif %}
@@ -27,5 +31,8 @@ permalink: "notes/{{ page.fileSlug | slugify }}/"
         {%include "components/sidebar.njk"%}
       {% endif %}
     </div>
+    {% if dgShowBacklinks === true or dgShowLocalGraph === true%}
+      {%include "components/sidebar.njk"%}
+    {% endif %}
   </body>
 </html>

src/site/index.njk

@@ -11,7 +11,10 @@
     {%else%}
       {%include "components/filetree.njk"%}
     {% endif %}
-    <div class="content">
+    {% if settings.dgEnableSearch === true %}
+      {%include "components/searchContainer.njk"%}
+    {% endif %}
+    <div class="content cm-s-obsidian">
 
       {% if settings.dgShowInlineTitle === true %}
         <h1>{{ noteTitle  }}</h1>

src/site/lunr-index.js

@@ -0,0 +1,23 @@
+require("dotenv").config()
+const lunrjs = require('lunr');
+const path = require('path');
+
+function createIndex(posts) {
+  return lunrjs(function () {
+    this.ref('id');
+    this.field('title');
+    this.field('content');
+    this.field('date');
+
+    posts.forEach((p, idx) => {
+      p.id = idx;
+      this.add(p);
+    });
+  });
+}
+
+if (process.env.dgEnableSearch) {
+  const data = require('../../netlify/functions/search/data.json');
+  const index = createIndex(data);
+  require('fs').writeFileSync(path.join(__dirname, '../../netlify/functions/search/index.json'), JSON.stringify(index));
+}

src/site/lunr.njk

@@ -0,0 +1,12 @@
+---
+permalink: netlify/functions/search/data.json
+permalinkBypassOutputDir: true
+---
+[{% for post in collections.note %}
+{
+		"title": {{post.fileSlug | jsonify | safe }},
+		"date":"{{ post.date }}",
+		"url":"{{ post.url }}",
+		"content": {{ post.templateContent | striptags(true) | link | jsonify | safe  }}
+}{% if not loop.last %},{% endif %}
+{% endfor %}]

src/site/styles/digital-garden-base.scss

@@ -3,12 +3,15 @@
 * MODIFY THE custom-style.scss FILE INSTEAD.
 ***/
 
+body {
+    overflow-x: hidden;
+}
 .content {
     max-width: 800px;
     margin: auto;
     font-size: 22px;
     line-height: 1.5;
-    margin-top: 75px;
+    margin-top: 90px;
 }
 
 .external-link {
@@ -153,6 +156,20 @@ ul.task-list {
     width: 250px;
 }
 
+.empty-navbar {
+    display: flex; 
+    justify-content: flex-end; 
+    margin-bottom: -60px;
+
+    @media(max-width: 800px) {
+        justify-content: center; 
+    }
+
+    .search-button {
+        margin: 10px 65px 10px 65px;
+    }
+}
+
 .navbar {
     background-color: var(--background-secondary);
     position: absolute;
@@ -162,12 +179,23 @@ ul.task-list {
     right: 0;
     z-index: 3;
     padding-left: var(--file-margins);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 
     .navbar-inner {
         display: flex; 
         align-items: center; 
         cursor: pointer;
     }
+
+    .search-button{
+
+        @media(max-width: 800px) {
+            min-width: 120px;
+            margin: 10px 50px 10px 25px;
+        }
+    }
 }
 
 .notelink {
@@ -198,6 +226,128 @@ ul.task-list {
 }
 
 
+.search-container {
+    background-color: rgba(0,0,0,0.5);
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 15;
+    height: 100%;
+    justify-content: center;
+    display: none;
+}
+
+.search-container.active {
+    display: flex;
+}
+
+.search-box {
+    transform: translateY(100px);
+    background-color: var(--background-primary);
+    max-width: 80%;
+    width: 900px;
+    border-radius: 15px;
+    padding: 10px;
+    height: fit-content;
+}
+
+.search-box input {
+    width: 100%;
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    font-size: 2rem;
+    background-color: var(--background-primary);
+    color: var(--text-primary);
+
+}
+.search-box input:focus {
+    outline: none;
+}
+
+#search-results {
+    margin-top: 20px;
+    overflow-y: auto;
+    padding: 20px;
+    display: flex;
+    justify-content: center;
+    max-height: 50vh;
+}
+
+#search-results ul {
+    padding-inline-start: 0;
+    width: 100%;
+}
+
+#search-results .searchresult {
+    margin-bottom: 15px;
+    list-style: none;
+    background-color: var(--background-secondary);
+    padding: 10px;
+    border-radius: 10px;
+    font-size: 1.2rem;
+    cursor: pointer;
+
+    &:hover {
+        border: 2px solid var(--text-accent);
+    }
+
+    &.active{
+        border: 2px solid var(--text-accent);
+    }
+}
+
+.search-box-footer {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 10px;
+}
+
+.navigation-hint {
+    font-size: 1rem;
+    color: var(--text-secondary);
+    margin-right: 20px;
+}
+.search-link {
+    display: block;
+    margin-bottom: 4px;
+    font-size: 1.2rem;
+}
+
+.search-button {
+    background-color: var(--background-primary);
+    border-radius: 20px;
+    height: 2em;
+    display: flex;
+    align-items: center;
+    min-width: 150px;
+    margin: 10px 65px;
+    border: 1px solid var(--text-normal);
+    cursor: pointer;
+    >span{
+        padding: 3px 3px 3px 15px;
+    }
+    >i{
+        margin-left: 10px;
+    }
+
+    &:hover{
+        border: 1px solid var(--text-accent);
+    }
+
+
+}
+
+
+
+.search-keys {
+    @media(max-width: 800px) {
+        display: none;
+    }
+}
+
 div[class*="language-ad-"],
 div[class*="callout-"] {
     font-family: 'Roboto', sans-serif;