From f51db60b3567c5947b135116a5cbca280e5a4f0c Mon Sep 17 00:00:00 2001
From: Gabriele Musco <gabmus@disroot.org>
Date: Tue, 13 Apr 2021 15:21:40 +0200
Subject: [PATCH] added optional js powered search

---
 README.md                          |  2 ++
 assets/scss/style.scss             | 26 ++++++++++++++-
 content/search.md                  |  7 ++++
 layouts/_default/search.html       | 51 ++++++++++++++++++++++++++++++
 layouts/_default/search.json       | 26 +++++++++++++++
 layouts/partials/header.html       |  3 ++
 layouts/partials/js_paginator.html | 44 ++++++++++++++++++++++++++
 layouts/partials/paginator.html    | 43 +------------------------
 8 files changed, 159 insertions(+), 43 deletions(-)
 create mode 100644 content/search.md
 create mode 100644 layouts/_default/search.html
 create mode 100644 layouts/_default/search.json
 create mode 100644 layouts/partials/js_paginator.html

diff --git a/README.md b/README.md
index 3fe3038..303ce1a 100644
--- a/README.md
+++ b/README.md
@@ -44,6 +44,8 @@ summaryLength = 70  # number of words for article summaries
     gridView = false  # show post list as a grid. goes well with discreteCards
     highlightBgColor = "#34363b";  # card and circle navigation background color for discrete card mode
 
+    enableSearch = true  # enable search page
+
     # enable comments support with commento using the script from your server
     commento = "https://example.com/js/commento.js"
 
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 0d75361..939dfbf 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -33,7 +33,7 @@ a {
     color: $fg_color;
     text-decoration: none;
     border-bottom: 2px solid $fg_color;
-    &:hover {
+    &:hover, &:focus {
         border-color: $accent_color !important;
     }
 }
@@ -335,3 +335,27 @@ ul.list {
         }
     }
 }
+
+.search {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    .nerdlink {
+        display: inline-block;
+        cursor: pointer;
+    }
+    #searchbar {
+        @extend a;
+        width: 100%;
+        display: inline-block;
+        background-color: transparent;
+        border-top: none;
+        border-left: none;
+        border-right: none;
+        padding: 6px 0;
+        font-family: $main_font;
+        font-size: 1.3em;
+        outline: none;
+    }
+}
diff --git a/content/search.md b/content/search.md
new file mode 100644
index 0000000..ae3e341
--- /dev/null
+++ b/content/search.md
@@ -0,0 +1,7 @@
+---
+title: Search
+layout: search
+outputs:
+ - "html"
+ - "json"
+---
diff --git a/layouts/_default/search.html b/layouts/_default/search.html
new file mode 100644
index 0000000..c746082
--- /dev/null
+++ b/layouts/_default/search.html
@@ -0,0 +1,51 @@
+{{ define "main" }}
+<noscript>
+    You need to enable JavaScript to be able to search.
+</noscript>
+<div class="search">
+    <input id="searchbar" type="text" placeholder="{{ .Title }}" />
+    <a class="nerdlink" onclick="newSearch();">&#xf002;</a>
+</div>
+<div class="postlist {{ if .Site.Params.gridView }}gridView{{ end }}" id="postlist">
+</div>
+{{- partial "js_paginator.html" . -}}
+<script>
+    function matchTags(page, term) {
+        for (let tag of page.tags) {
+            if (tag.includes(term)) return true;
+        }
+        return false;
+    }
+    function performSearch(term) {
+        document.getElementById('postlist').innerHTML = '';
+        term = term.toLowerCase();
+        fetch('/search/index.json').then(res => res.json())
+        .then(res => {
+            let articles = res.pages.filter(page => (
+                page.title.toLowerCase().includes(term) ||
+                matchTags(page, term) ||
+                page.text.includes(term)
+            ));
+            if (articles.length > 0) renderArticles(articles);
+            else document.getElementById('postlist').innerHTML = `
+                <h3>No results found</h3>
+            `;
+        });
+    }
+    var url = location.href;
+    var baseUrl = url.split('?')[0];
+    var searchbar = document.getElementById('searchbar');
+    if (url.includes('?')) {
+        var urlParams = new URLSearchParams(url.split('?')[1]);
+        if (urlParams.has('q')) {
+            let searchTerm = urlParams.get('q');
+            searchbar.value = searchTerm;
+            performSearch(searchTerm);
+        }
+    }
+    function newSearch() {
+        location.href = baseUrl+`?q=${searchbar.value}`;
+    }
+    searchbar.onkeyup = (ev) => {if (ev.keyCode == 13) newSearch()};
+</script>
+{{ end }}
diff --git a/layouts/_default/search.json b/layouts/_default/search.json
new file mode 100644
index 0000000..7dae89a
--- /dev/null
+++ b/layouts/_default/search.json
@@ -0,0 +1,26 @@
+{{ define "main" }}
+{
+    "pages": [
+        {{ range $i, $e := .Site.RegularPages }}
+        {{ if $i }},{{ end }}
+        {
+            "title": {{ .Title | jsonify }},
+            "date": {{ .Date.Format "2006-01-02" | jsonify }},
+            "tags": {{ if .Params.tags }}
+                        {{ .Params.tags | jsonify }}
+                    {{ else }}
+                        []
+                    {{ end }},
+            "summary": {{ .Summary | jsonify }},
+            "text": {{ lower .Plain | jsonify }},
+            "link": "{{ .Permalink }}"
+            {{ if .Site.Params.imageInArticlePreview }}
+                , "image": {{ if .Params.Image }}
+                        {{ .Params.Image | jsonify }}{{ else }}""
+                {{ end }}
+            {{ end }}
+        }
+        {{ end }}
+    ]
+}
+{{ end }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index f8390ae..34c5ea3 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -16,6 +16,9 @@
                     {{ if (.Site.Params.showTags | default true) }}
                         <li><a href="/tags">Tags</a></li>
                     {{ end }}
+                    {{ if (.Site.Params.enableSearch | default true) }}
+                        <li><a href="/search">Search</a></li>
+                    {{ end }}
                 </ul>
             </nav>
         </div>
diff --git a/layouts/partials/js_paginator.html b/layouts/partials/js_paginator.html
new file mode 100644
index 0000000..7459881
--- /dev/null
+++ b/layouts/partials/js_paginator.html
@@ -0,0 +1,44 @@
+<script>
+    function renderTags(tags) {
+        if (tags.length <= 0) return '';
+        let res = '| <span title="tags"> </span>';
+        for (let tag of tags) {
+            res += `<a href="/tags/${tag}">#${tag}</a>
+            `;
+        }
+        return res;
+    }
+    function renderImage(image) {
+        if (!image) return '';
+        return `<img src="${image}" />`
+    }
+    function renderSingleArticle(article) {
+        if (article.ignore) return '';
+        return `
+        <article class="card postlistitem {{ if .Site.Params.discreteCards }}discrete{{ end }}">
+            <div>
+                <h2>
+                <a href="${article.link}">${article.title}</a>
+                </h2>
+                <p class="date">
+                <span title="Date"> </span>
+                ${article.date}
+                ${renderTags(article.tags)}
+                </p>
+                {{ if .Site.Params.imageInArticlePreview }}
+                    ${renderImage(article.image)}
+                {{end}}
+                <div class="articlePreview">
+                    <p>${article.summary}</p>
+                    <p><a href="${article.link}">Continue reading </a></p>
+                </div>
+            </div>
+            <hr />
+        </article>
+        `;
+    }
+    function renderArticles(articles) {
+        let rendered = articles.map(a => renderSingleArticle(a)).join('\n');
+        document.getElementById('postlist').innerHTML += rendered;
+    }
+</script>
diff --git a/layouts/partials/paginator.html b/layouts/partials/paginator.html
index 1d254a6..bdf1a13 100644
--- a/layouts/partials/paginator.html
+++ b/layouts/partials/paginator.html
@@ -1,48 +1,7 @@
 {{ if .Site.Params.infiniteScrolling }}
+{{- partial "js_paginator.html" . -}}
 <script>
     var nextPage = '/index.json';
-    function renderTags(tags) {
-        if (tags.length <= 0) return '';
-        let res = '| <span title="tags"> </span>';
-        for (let tag of tags) {
-            res += `<a href="/tags/${tag}">#${tag}</a>
-            `;
-        }
-        return res;
-    }
-    function renderImage(image) {
-        if (!image) return '';
-        return `<img src="${image}" />`
-    }
-    function renderSingleArticle(article) {
-        if (article.ignore) return '';
-        return `
-        <article class="card postlistitem {{ if .Site.Params.discreteCards }}discrete{{ end }}">
-            <div>
-                <h2>
-                <a href="${article.link}">${article.title}</a>
-                </h2>
-                <p class="date">
-                <span title="Date"> </span>
-                ${article.date}
-                ${renderTags(article.tags)}
-                </p>
-                {{ if .Site.Params.imageInArticlePreview }}
-                    ${renderImage(article.image)}
-                {{end}}
-                <div class="articlePreview">
-                    <p>${article.summary}</p>
-                    <p><a href="${article.link}">Continue reading </a></p>
-                </div>
-            </div>
-            <hr />
-        </article>
-        `;
-    }
-    function renderArticles(articles) {
-        let rendered = articles.map(a => renderSingleArticle(a)).join('\n');
-        document.getElementById('postlist').innerHTML += rendered;
-    }
     function getNext(first=false) {
         if (!nextPage) return;
         fetch(nextPage).then(res => res.json())