astro-accelerator 0.0.101 → 0.0.103

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.101",
+  "version": "0.0.103",
   "author": "Steve Fenton",
   "name": "astro-accelerator",
   "description": "A super-lightweight, accessible, SEO-friendly starter project for Astro",

package/public/css/main.css

@@ -14,11 +14,11 @@ html {
     outline: 0;
     padding: 0;
     vertical-align: baseline;
- }
+}
 
- html {
+html {
     scroll-padding-top: 5em;
- }
+}
 
 body {
     background-color: var(--aft);
@@ -642,6 +642,34 @@ form.site-search button {
     font-family: var(--code-font);
 }
 
+.result-headings li {
+    display: none;
+}
+
+.result-headings li:nth-child(-n+3) {
+    display: block;
+}
+
+.result-headings:has(li:nth-child(n+4))::after {
+    content: 'See more >';
+    color: var(--fore-link);
+    text-decoration: underline;
+  }
+
+.result-headings:focus-within li {
+    display: block;
+}
+
+.result-headings:focus-within::after {
+    display: none;
+}
+
+.show-more {
+    padding: 0.5em 1em;
+    background-color: var(--fore-link);
+    color: var(--aft-link-alt);
+}
+
 @media (max-width: 860px) {
     form.site-search div {
         grid-template-columns: repeat(1, auto);

package/public/js/search.js

@@ -5,40 +5,52 @@ import { raiseEvent } from './modules/events.js';
 import { contains, containsWord, sanitise, explode, highlight } from './modules/string.js';
 
 /**
-type Heading = {
-    text: string;
-    safeText: string;
-    slug: string;
-}
-
-type SearchEntry = {
-    score: number;
-    title: string;
-    safeTitle: string;
-    description: string;
-    safeDescription: string;
-    headings: Heading[];
-    tags: string;
-    url: string;
-    date: string;
-    matchedHeadings: Heading[];
-}
+@typedef {
+    {
+        text: string;
+        safeText: string;
+        slug: string;
+    }
+} Heading
+
+@typedef {
+    {
+        foundWords: number;
+        score: number;
+        title: string;
+        keywords: string;
+        safeTitle: string;
+        description: string;
+        safeDescription: string;
+        headings: Heading[];
+        tags: string[];
+        url: string;
+        date: string;
+        matchedHeadings: Heading[];
+    }
+}  SearchEntry
  */
 
-var dataUrl = qs('#site-search').dataset.sourcedata;
-var haystack = /** @type {SearchEntry} */ [];
+/** @type {SearchEntry[]} */
+var haystack = [];
 var currentQuery = '';
+var dataUrl = qs('#site-search').dataset.sourcedata;
 
 var ready = false;
 var scrolled = false;
 
 /**
- * 
+ * Search term `s` and number of results `r`
  * @param {string} s 
+ * @param {number|null} [r=12]
  * @returns 
  */
-function search(s) {
-    const needles = /** @type {SearchEntry} */ [];
+function search(s, r) {
+    const numberOfResults = r ?? 12;
+    console.log('search', s, numberOfResults);
+
+    /** @type {SearchEntry[]} */
+    const needles =  [];
 
     // Clean the input
     const cleanQuery = sanitise(s);
@@ -52,7 +64,7 @@ function search(s) {
     currentQuery = cleanQuery;
     const queryTerms = explode(currentQuery);
 
-    s.length > 0 && haystack.forEach( (item) => {
+    cleanQuery.length > 0 && haystack.forEach( (item) => {
 
         let foundWords = 0;
         item.score = 0;
@@ -152,7 +164,7 @@ function search(s) {
     const ol = document.createElement('ol');
     ol.className = 'site-search-results';
 
-    const limit = Math.min(needles.length, 12);
+    const limit = Math.min(needles.length, numberOfResults);
 
     // @ts-ignore
     const siteUrl = new URL(site_url);
@@ -176,25 +188,30 @@ function search(s) {
         markers.className = 'result-text';
         markers.innerHTML = highlight(needle.description, queryTerms);
 
-        const headings = document.createElement('ul');
-        markers.className = 'result-headings';
-        console.log(needle.matchedHeadings);
-        needle.matchedHeadings
-            .forEach(h => {
-                const item = document.createElement('li');
-                const link = document.createElement('a');
-                link.href = url + '#' + h.slug;
-                link.innerHTML = highlight(h.text, queryTerms);
-                item.appendChild(link);
-                headings.append(item);
-            });
-
         const li = document.createElement('li');
+        li.dataset.score = (Math.round((needle.score/ total) * 100)).toString();
         li.appendChild(a);
         li.appendChild(path);
         li.appendChild(markers);
-        li.append(headings);
-        li.dataset.score = (Math.round((needle.score/ total) * 100)).toString();
+
+        if (needle.matchedHeadings.length > 0) {
+            const headings = document.createElement('ul');
+            headings.className = 'result-headings';
+
+            headings.tabIndex = 0;
+
+            needle.matchedHeadings
+                .forEach(h => {
+                    const item = document.createElement('li');
+                    const link = document.createElement('a');
+                    link.href = url + '#' + h.slug;
+                    link.innerHTML = highlight(h.text, queryTerms);
+                    item.appendChild(link);
+                    headings.append(item);
+                });
+
+            li.appendChild(headings);
+        }
 
         ol.appendChild(li);
     }
@@ -204,14 +221,30 @@ function search(s) {
         ? results.dataset.emptytitle || 'No Results'
         : results.dataset.title || 'Results';
 
+    const more = document.createElement('button');
+    more.className = 'show-more';
+    more.type = 'button';
+    more.innerHTML = 'See more';
+    more.addEventListener('click', function() {
+        currentQuery = '';
+        const newTotal = numberOfResults + 12;
+        console.log('More', newTotal);
+        search(s, newTotal);
+    })
+
     results.innerHTML = '';
     results.appendChild(h2);
     results.appendChild(ol);
 
+    if (needles.length > numberOfResults) {
+        results.appendChild(more);
+    }
+
     const address = window.location.href.split('?')[0];
     window.history.pushState({}, '', address + '?q=' + encodeURIComponent(cleanQuery));
 }
 
+/** @type {Number} */
 var debounceTimer;
 
 function debounceSearch() {
@@ -248,9 +281,11 @@ fetch(dataUrl)
             item.headings.forEach(h => h.safeText = sanitise(h.text));
         }
 
-        var siteSearch = qs('#site-search');
+        /** @type {HTMLFormElement} */
+        const siteSearch = qs('#site-search');
 
-        var siteSearchQuery = qs('#site-search-query');
+        /** @type {HTMLInputElement} */
+        const siteSearchQuery = qs('#site-search-query');
 
         if (siteSearch == null || siteSearchQuery == null) {
             throw new Error('Cannot find #site-search or #site-search-query');
@@ -276,7 +311,7 @@ fetch(dataUrl)
 
         const params = new URLSearchParams(window.location.search);
         if (params.has('q')) {
-            siteSearchQuery.value = params.get('q');
+            siteSearchQuery.value = params.get('q') ?? '';
         }
 
         debounceSearch();