change title of search results page

Implement site search

assets/js/search.js

@@ -0,0 +1,44 @@
+function displayResults (results, store) {
+  const searchResults = document.getElementById('results');
+  if (results.length) {
+    let resultList = '';
+    for (const n in results) {
+      const item = store[results[n].ref];
+      resultList += '<li><a href="' + item.url + '">' + item.title + '</a></li>'
+      if (item.description)
+        resultList += '<p>' + item.description + '</p>'
+      else
+        resultList += '<p>' + item.content.substring(0, 150) + '...</p>'
+    }
+    searchResults.innerHTML = resultList;
+  } else {
+    searchResults.innerHTML = 'No results found.';
+  }
+}
+const params = new URLSearchParams(window.location.search);
+const query = params.get('query');
+if (query) {
+  document.getElementById('search-query').setAttribute('value', query);
+  const idx = lunr(function () {
+    this.ref('id')
+    this.field('title', {
+      boost: 15
+    })
+    this.field('tags')
+    this.field('content', {
+      boost: 10
+    })
+    for (const key in window.store) {
+      this.add({
+        id: key,
+        title: window.store[key].title,
+        tags: window.store[key].tags,
+        content: window.store[key].content
+      })
+    }
+  })
+  const results = idx.search(query);
+  displayResults(results, window.store)
+}
+
+

content/search/_index.md

@@ -0,0 +1,3 @@
+---
+title: Search Results Page
+---

layouts/_default/rss.xml

@@ -43,6 +43,8 @@
       <guid>{{ .Permalink }}</guid>
       {{- $content := replaceRE "a href=\"(#.*?)\"" (printf "%s%s%s" "a href=\"" .Permalink "$1\"") .Content -}}
       {{- $content = replaceRE "img src=\"(.*?)\"" (printf "%s%s%s" "img src=\"" .Permalink "$1\"") $content -}}
+      {{- $content = replaceRE "<svg.*</svg>" "" $content -}}
+      {{- $content = replaceRE `-moz-tab-size:\d;-o-tab-size:\d;tab-size:\d;?` "" $content -}}
       <description>{{ $content | html }}</description>
     </item>
     {{ end }}

layouts/partials/about.html

@@ -14,3 +14,4 @@
     </li>
     {{ end }}
 </ul>
+{{ partial "search-form.html" . }}

layouts/partials/footer.html

@@ -3,6 +3,7 @@
 <p class="powered_by">{"powered_by": [{{- range $i, $link :=  .Site.Params.powerLinks }}{{ if $i }}, {{ end }}&quot;<a target="_blank" href="{{ $link.url }}">{{ $link.title }}</a>&quot;{{ end }}]}
 <br>&lt;<a target="_blank" href="https://github.com/jbowdre/runtimeterror">view source</a>&gt;</p>
 
+{{ partial "search-index.html" .}}
 {{ if (findRE "<pre" .Content 1) }}
   {{ $jsCopy := resources.Get "js/code-copy-button.js" | minify }}
   <script src="{{ $jsCopy.RelPermalink }}"></script>

layouts/partials/search-form.html

@@ -0,0 +1,5 @@
+<form id="search"
+  action='{{ with .GetPage "/search" }}{{ .Permalink }}{{ end }}' method="get">
+  <input type="input" id="search-query" name="query" placeholder="grep -i" aria-label="search text">
+  <button type="submit" aria-label="search button"><i class="fa-solid fa-magnifying-glass"></i></button>
+</form>

layouts/partials/search-index.html

@@ -0,0 +1,17 @@
+<script>
+  window.store = {
+    {{ range where .Site.Pages "Section" "posts" }}
+    "{{ .Permalink }}": {
+      "title": "{{ .Title }}",
+      "tags": [{{ range .Params.Tags }}"{{ . }}",{{ end }}],
+      "content": {{ .Content | plainify }},
+      "description": {{ .Description | plainify }},
+      "url": "{{ .Permalink }}"
+    },
+    {{ end }}
+  }
+</script>
+{{ $jsLunr := resources.Get "js/lunr.js" | minify }}
+<script src="{{ $jsLunr.RelPermalink }}"></script>
+{{ $jsSearch := resources.Get "js/search.js" | minify }}
+<script src="{{ $jsSearch.RelPermalink }}"></script>

layouts/search/list.html

@@ -0,0 +1,9 @@
+{{ define "main" }}
+{{ partial "search-form.html" . }}
+<br>
+<ul id="results">
+  <li>
+    Enter a keyword above to search this site.
+  </li>
+</ul>
+{{ end }}

static/css/custom.css

@@ -1,3 +1,8 @@
+/* color overrides */
+:root {
+  --code: var(--base06);
+}
+
 /* override page max-width */
 .page {
   max-width: 72rem;
@@ -203,4 +208,46 @@ ul.pagination li {
 
 small[style^="opacity: .5"] {
   opacity: 1 !important;
-}
+}
+
+/* code overrides */
+pre,
+code,
+kbd,
+samp {
+  color: var(--code);
+}
+
+/* search box styling */
+form {
+  display: flex;
+  flex-direction: row;
+  border-radius: 0.25rem;
+  outline: 0.25rem solid var(--bg);
+}
+
+input {
+  flex-grow: 2;
+  border: none;
+  background-color: var(--off-bg);
+  color: var(--off-fg);
+  height: 1.5rem;
+  border-radius: 0.25rem;
+  padding-left: 0.5rem;
+  font-family: var(--font-monospace);
+}
+
+input:focus {
+  outline: none;
+}
+
+form:focus-within {
+  outline: 1px solid var(--logo);
+}
+
+form button {
+  outline: none;
+  border: none;
+  background-color: var(--off-bg);
+  color: var(--link);
+}

static/css/palettes/runtimeterror.css

@@ -6,9 +6,9 @@
 	--base01: #282828;  /* off-bg */
 	--base02: #383838;  /* inner-bg */
 	--base03: #585858;  /* muted */
-	--base04: #cfcfcf;  /* off-fg */
+	--base04: #abaaaa;  /* off-fg */
 	--base05: #d8d8d8;  /* fg */
-	--base06: #e8e8e8;
+	--base06: #cfcfcf;  /* code */
 	--base07: #5f8700;  /* user prompt */
 	--base08: #ab4642;  /* root prompt */
 	--base09: #dc9656;

torchlight.config.js

@@ -58,7 +58,9 @@ module.exports = {
     // appear, the file will be ignored.
     excludePatterns: [
       '/node_modules/',
-      '/vendor/'
+      '/vendor/',
+      '/series/',
+      '/tags/'
     ]
   }
 }