astro-accelerator 5.9.9 → 5.9.11

package/package.json

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

package/public/css/main.css

@@ -637,7 +637,7 @@ nav.site-nav h2 {
     z-index: 1;
 }
 
-.site-search-results {
+header .site-search-results {
     background-color: var(--white);
     position: absolute;
     top: var(--search-height);
@@ -667,7 +667,7 @@ nav.site-nav h2 {
     margin-inline-start: 0;
 }
 
-.site-search-results ul:not(.post-list):not(.result-headings) {
+header .site-search-results ul:not(.post-list):not(.result-headings) {
     margin: 0;
     max-height: var(--search-dropdown-height);
     overflow-y: scroll;
@@ -760,7 +760,6 @@ nav.site-nav h2 {
 
 .result-wrapper {
     display: flex;
-    padding: 1.5rem 3.6rem 1.75rem;
     text-decoration: none;
     flex-direction: column;
     gap: 0.56rem;
@@ -770,6 +769,10 @@ nav.site-nav h2 {
     }
 }
 
+header .result-wrapper {
+    padding: 1.5rem 3.6rem 1.75rem;
+}
+
 .result-wrapper:hover {
     background-color: initial;
 }
@@ -882,10 +885,13 @@ nav.site-nav h2 {
 
 .result-headings li {
     text-align: left;
-    padding: 0.1rem 3.6rem;
     font-size: 1rem;
 }
 
+header .result-headings li {
+    padding: 0.1rem 3.6rem;
+}
+
 .show-more {
     padding: 0.5em 1em;
     background-color: var(--fore-link);

package/public/js/search.js

@@ -9,7 +9,6 @@
 
 import { qs } from './modules/query.js';
 import { raiseEvent } from './modules/events.js';
-import { removeScroll, resetScroll } from './modules/scrollbar.js';
 import { contains, sanitise, explode, highlight } from './modules/string.js';
 import { stemmer } from './modules/stemmer.js';
 
@@ -158,7 +157,6 @@ function initializeSearch() {
             return;
         }
         siteSearchWrapper.classList.add('is-active');
-        removeScroll();
         openDropdown();
     }
 
@@ -167,7 +165,6 @@ function initializeSearch() {
             return;
         }
         siteSearchWrapper.classList.remove('is-active');
-        resetScroll();
     }
 
     function openDropdown() {

package/src/pages/404.md

@@ -1,6 +1,6 @@
 ---
 warning: This file is overwritten by Astro Accelerator
-layout: src/layouts/Search.astro
+layout: src/layouts/Default.astro
 title: Not Found
 listable: false
 navMenu: false
@@ -13,7 +13,7 @@ bannerImage:
     alt: Dummy image
 ---
 
-We couldn't find that, but you might find it with a search.
+We couldn't find that... hit the search bar as you might have a super old link
 
 <script>
     {

package/public/js/search2.js

@@ -1,676 +0,0 @@
-/**
- * This javascript file comes from Astro Accelerator
- * Edits will be overwritten if you change the file locally
- * THIS IS THE PREVIOUS SEARCH VERSION
- *
- * @format
- */
-
-// @ts-check
-
-import { qs } from './modules/query.js';
-import { raiseEvent } from './modules/events.js';
-import { removeScroll, resetScroll } from './modules/scrollbar.js';
-import { contains, sanitise, explode, highlight } from './modules/string.js';
-import { stemmer } from './modules/stemmer.js';
-
-// @ts-ignore
-const f = window.site_features ?? {};
-
-/**
- *
- * @param {string[]} settings
- * @param {string} option
- * @returns
- */
-function enabled(settings, option) {
-    return settings && settings.includes(option);
-}
-
-/**
-@typedef {
-    {
-        text: string;
-        safeText: string;
-        slug: string;
-    }
-} Heading
-
-@typedef {
-    {
-        foundWords: number;
-        score: number;
-        depth: number;
-        title: string;
-        keywords: string;
-        safeTitle: string;
-        description: string;
-        safeDescription: string;
-        headings: Heading[];
-        tags: string[];
-        url: string;
-        date: string;
-        matchedHeadings: Heading[];
-    }
-}  SearchEntry
-
-@typedef {
-    {
-        [ix: string]: string
-    }
-} Synonyms
- */
-
-function initializeSearch() {
-    const siteSearchInput = qs('[data-site-search-query]');
-    const siteSearchWrapper = qs('[data-site-search-wrapper]');
-    const siteSearchElement = qs('[data-site-search]');
-    const siteSearchResults = qs('[data-site-search-results');
-    const removeSearchButton = qs('[data-site-search-remove]');
-
-    /** @type {SearchEntry[]} */
-    var haystack = [];
-    var currentQuery = '';
-    var dataUrl = siteSearchElement.dataset.sourcedata;
-
-    var scoring = {
-        depth: 5,
-        phraseTitle: 60,
-        phraseHeading: 20,
-        phraseDescription: 20,
-        termTitle: 40,
-        termHeading: 15,
-        termDescription: 15,
-        termTags: 15,
-        termKeywords: 15,
-    };
-
-    var ready = false;
-    var scrolled = false;
-
-    siteSearchInput.addEventListener('focus', () => activateInput());
-
-    function deactivate(e) {
-        if (
-            !siteSearchElement.contains(e.target) &&
-            !siteSearchResults.contains(e.target)
-        ) {
-            closeDropdown();
-
-            const duration = getComputedStyle(
-                siteSearchWrapper
-            ).getPropertyValue('--search-dropdown-duration');
-
-            // Convert duration to milliseconds for setTimeout
-            const durationMs =
-                parseFloat(duration) * (duration.endsWith('ms') ? 1 : 1000);
-
-            setTimeout(() => {
-                deactivateInput();
-            }, durationMs);
-        }
-    }
-
-    // Close the dropdown upon activity outside the search
-    document.addEventListener('click', deactivate);
-    document.addEventListener('keydown', deactivate);
-
-    function removeSearch() {
-        clearInput();
-        deactivateInput();
-        debounceSearch();
-        siteSearchInput.focus();
-    }
-
-    // Clear the search input
-    removeSearchButton.addEventListener('click', () => {
-        removeSearch();
-    });
-
-    // Dropdown accessibility controls
-    document.addEventListener('keydown', handleDropdownKeyboardNavigation);
-
-    function activateInput() {
-        if (
-            siteSearchWrapper.classList.contains('is-active') ||
-            siteSearchInput.value.trim().length === 0
-        ) {
-            return;
-        }
-        siteSearchWrapper.classList.add('is-active');
-        removeScroll();
-        openDropdown();
-    }
-
-    function deactivateInput() {
-        if (!siteSearchWrapper.classList.contains('is-active')) {
-            return;
-        }
-        siteSearchWrapper.classList.remove('is-active');
-        resetScroll();
-    }
-
-    function openDropdown() {
-        siteSearchElement.classList.add('is-active');
-
-        requestAnimationFrame(() => {
-            const dropdownHeightPercentage = parseFloat(
-                getComputedStyle(siteSearchWrapper).getPropertyValue(
-                    '--search-dropdown-height'
-                )
-            );
-            // Convert vh to pixels
-            const dropdownHeight =
-                window.innerHeight * (dropdownHeightPercentage / 100) + 32;
-            const siteSearchElementRect =
-                siteSearchElement.getBoundingClientRect();
-            const offsetFromBottomToElement =
-                window.innerHeight - siteSearchElementRect.bottom;
-
-            if (offsetFromBottomToElement < dropdownHeight) {
-                document.body.style.overflow = '';
-
-                // Scroll to the siteSearchElement
-                siteSearchElement.scrollIntoView({
-                    behavior: 'smooth',
-                    block: 'start',
-                });
-
-                // Delay the overflow to allow for smooth scrolling
-                setTimeout(() => {
-                    document.body.style.overflow = 'hidden';
-                }, 300);
-            }
-        });
-    }
-
-    function closeDropdown() {
-        siteSearchElement.classList.remove('is-active');
-    }
-
-    function clearInput() {
-        closeDropdown();
-        siteSearchInput.value = '';
-    }
-
-    function handleDropdownKeyboardNavigation(e) {
-        // Proceed only if search dropdown is active
-        if (!siteSearchWrapper.classList.contains('is-active')) return;
-
-        if (e.key === 'Escape') {
-            removeSearch();
-            return;
-        }
-
-        if (e.key === 'Tab') {
-            const firstElement = siteSearchInput;
-            const lastElement =
-                siteSearchResults.querySelector('button') ||
-                siteSearchResults.querySelector(
-                    '.site-search-results-item:last-child .result-wrapper'
-                );
-
-            if (e.shiftKey && document.activeElement === firstElement) {
-                // Shift + Tab: Move focus to the last element if the first element is currently focused
-                e.preventDefault();
-                if (lastElement) lastElement.focus();
-            } else if (!e.shiftKey && document.activeElement === lastElement) {
-                // Tab: Move focus to the first element if the last element is currently focused
-                e.preventDefault();
-                firstElement.focus();
-            }
-        }
-    }
-
-    /** @type{Synonyms | null} */
-    var _synonyms = null;
-
-    /**
-     * Gets the list of synonyms if they exist
-     * @returns { Promise<Synonyms> }
-     */
-    async function getSynonyms() {
-        if (_synonyms != null) {
-            return _synonyms;
-        }
-
-        try {
-            const synonymsModule = await import('./synonyms.js');
-            _synonyms = synonymsModule.synonyms;
-        } catch {
-            _synonyms = {};
-        }
-
-        return _synonyms ?? {};
-    }
-
-    /**
-     * Replaces synonyms
-     * @param {string[]} queryTerms
-     */
-    async function replaceSynonyms(queryTerms) {
-        const synonyms = await getSynonyms();
-
-        for (let i = 0; i < queryTerms.length; i++) {
-            const term = queryTerms[i];
-            if (synonyms[term] != null) {
-                queryTerms.push(synonyms[term]);
-            }
-        }
-
-        return queryTerms;
-    }
-
-    /**
-     * Search term `s` and number of results `r`
-     * @param {string} s
-     * @param {number|null} [r=12]
-     * @returns
-     */
-    async function search(s, r) {
-        const numberOfResults = r ?? 12;
-
-        // Add 'is-active' class when search is performed
-        if (s && s.trim().length > 0) {
-            activateInput();
-            openDropdown();
-        } else if (siteSearchElement.classList.contains('is-active')) {
-            // Remove 'is-active' class when search is cleared
-            closeDropdown();
-        }
-
-        /** @type {SearchEntry[]} */
-        const needles = [];
-
-        // Clean the input
-        const cleanQuery = sanitise(s);
-
-        if (currentQuery === cleanQuery) {
-            return;
-        }
-
-        currentQuery = cleanQuery;
-        /** @type {string[]} */
-        const stemmedTerms = [];
-        const queryTerms = await replaceSynonyms(explode(currentQuery));
-
-        for (const term of queryTerms) {
-            const stemmed = stemmer(term);
-            if (stemmed !== term) {
-                stemmedTerms.push(stemmed);
-            }
-        }
-
-        const allTerms = queryTerms.concat(stemmedTerms);
-
-        cleanQuery.length > 0 &&
-            haystack.forEach((item) => {
-                item.foundWords = 0;
-                item.score = 0;
-                item.matchedHeadings = [];
-
-                // The user searches for "Kitchen Sink"
-
-                // Part 1 - Phrase Matches, i.e. "Kitchen Sink"
-
-                // Title
-                if (item.safeTitle === currentQuery) {
-                    item.foundWords += 2;
-                }
-
-                if (contains(item.safeTitle, currentQuery)) {
-                    item.score = item.score + scoring.phraseTitle;
-                    item.foundWords += 2;
-                }
-
-                // Headings
-                item.headings.forEach((c) => {
-                    if (contains(c.safeText, currentQuery)) {
-                        item.score = item.score + scoring.phraseHeading;
-                        item.matchedHeadings.push(c);
-                        item.foundWords++;
-                    }
-                });
-
-                // Description
-                if (contains(item.description, currentQuery)) {
-                    item.score = item.score + scoring.phraseDescription;
-                    item.foundWords++;
-                }
-
-                // Part 2 - Term Matches, i.e. "Kitchen" or "Sink"
-
-                let foundWords = 0;
-
-                allTerms.forEach((term) => {
-                    let isTermFound = false;
-
-                    // Title
-                    if (contains(item.safeTitle, term)) {
-                        item.score = item.score + scoring.termTitle;
-                        isTermFound = true;
-                    }
-
-                    // Headings
-                    item.headings.forEach((c) => {
-                        if (contains(c.safeText, term)) {
-                            item.score = item.score + scoring.termHeading;
-                            isTermFound = true;
-
-                            if (
-                                item.matchedHeadings.filter(
-                                    (h) => h.slug == c.slug
-                                ).length == 0
-                            ) {
-                                item.matchedHeadings.push(c);
-                            }
-                        }
-                    });
-
-                    // Description
-                    if (contains(item.description, term)) {
-                        isTermFound = true;
-                        item.score = item.score + scoring.termDescription;
-                    }
-
-                    // Tags
-                    item.tags.forEach((t) => {
-                        if (contains(t, term)) {
-                            isTermFound = true;
-                            item.score = item.score + scoring.termTags;
-                        }
-                    });
-
-                    // Keywords
-                    if (contains(item.keywords, term)) {
-                        isTermFound = true;
-                        item.score = item.score + scoring.termKeywords;
-                    }
-
-                    if (isTermFound) {
-                        foundWords++;
-                    }
-                });
-
-                item.foundWords += foundWords;
-
-                if (item.score > 0) {
-                    needles.push(item);
-                }
-            });
-
-        needles.forEach((n) => {
-            // Bonus points for shallow results, i.e. /features over /features/something/something
-
-            if (n.depth < 5) {
-                n.score += scoring.depth;
-                n.foundWords++;
-            }
-
-            if (n.depth < 4) {
-                n.score += scoring.depth;
-                n.foundWords++;
-            }
-        });
-
-        needles.sort(function (a, b) {
-            if (b.foundWords === a.foundWords) {
-                return b.score - a.score;
-            }
-
-            return b.foundWords - a.foundWords;
-        });
-
-        const total = needles.reduce(function (accumulator, needle) {
-            return accumulator + needle.score;
-        }, 0);
-
-        const results = siteSearchResults;
-
-        const ul = document.createElement('ul');
-        ul.className = 'site-search-results__list';
-
-        const limit = Math.min(needles.length, numberOfResults);
-
-        // @ts-ignore
-        const siteUrl = new URL(site_url);
-
-        for (let i = 0; i < limit; i++) {
-            const needle = needles[i];
-
-            const address = new URL(needle.url);
-            const isSameHost = siteUrl.host == address.host;
-            const url = isSameHost ? address.pathname : needle.url;
-
-            const listElementWrapper = document.createElement('a');
-            listElementWrapper.href = url;
-            listElementWrapper.className = 'result-wrapper';
-
-            const listElementTitle = document.createElement('span');
-            // Only highlight user query terms, not stemmed terms
-            listElementTitle.innerHTML = highlight(needle.title, queryTerms);
-            listElementTitle.className = 'result-title';
-
-            const path = document.createElement('div');
-            path.className = 'result-path';
-
-            // Split the path into segments, filter out empty segments (in case of leading slash)
-            const segments = address.pathname.split('/').filter(Boolean);
-
-            segments.forEach((segment, index) => {
-                const words = segment.replace(/-/g, ' ').split(' ');
-                const processedSegment = words
-                    .map((word, index) =>
-                        index === 0
-                            ? word.charAt(0).toUpperCase() +
-                              word.slice(1).toLowerCase()
-                            : word.toLowerCase()
-                    )
-                    .join(' ');
-
-                const segmentSpan = document.createElement('span');
-                segmentSpan.className = 'result-path-segment';
-                segmentSpan.textContent = processedSegment;
-                path.appendChild(segmentSpan);
-
-                if (index < segments.length - 1) {
-                    const svgIcon = document.createElement('span');
-                    svgIcon.className = 'result-path-icon';
-                    svgIcon.innerHTML = `
-                      <svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10">
-                          <path d="M1 9L5 5L1 1" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
-                      </svg>
-                  `;
-                    path.appendChild(svgIcon);
-                }
-            });
-
-            const listElementDescription = document.createElement('p');
-            listElementDescription.className = 'result-description';
-            // Only highlight user query terms, not stemmed terms
-            listElementDescription.innerHTML = highlight(
-                needle.description,
-                queryTerms
-            );
-
-            const li = document.createElement('li');
-            li.classList.add('site-search-results-item');
-            li.dataset.words = needle.foundWords.toString();
-            li.dataset.score = (
-                Math.round((needle.score / total) * 1000) / 1000
-            ).toString();
-            listElementWrapper.appendChild(path);
-            listElementWrapper.appendChild(listElementTitle);
-            listElementWrapper.appendChild(listElementDescription);
-            li.appendChild(listElementWrapper);
-
-            if (
-                enabled(f.search, 'headings') &&
-                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;
-                    // Only highlight user query terms, not stemmed terms
-                    link.innerHTML = highlight(h.text, queryTerms);
-                    item.appendChild(link);
-                    headings.append(item);
-                });
-
-                li.appendChild(headings);
-            }
-
-            ul.appendChild(li);
-        }
-
-        let h4;
-        if (needles.length === 0) {
-            h4 = document.createElement('h4');
-            h4.classList.add('search-results-heading');
-            h4.innerHTML = results.dataset.emptytitle || 'No Results';
-        }
-
-        const more = document.createElement('button');
-        more.className = 'show-more';
-        more.type = 'button';
-        more.innerHTML = 'See more';
-        more.addEventListener('click', async function (e) {
-            e.stopPropagation(); // Prevent the click from closing the dropdown
-            currentQuery = '';
-            const oldTotal = numberOfResults;
-            const newTotal = numberOfResults + 12;
-            await search(s, newTotal);
-            window.setTimeout(function () {
-                const previousPosition = qs(
-                    `.site-search-results__list li:nth-child(${oldTotal}) > a`
-                );
-                console.log(previousPosition.outerHTML);
-                previousPosition.focus();
-            }, 10);
-        });
-
-        if (needles.length > numberOfResults) {
-            const moreLi = document.createElement('li');
-            moreLi.appendChild(more);
-            ul.appendChild(moreLi);
-        }
-
-        results.innerHTML = '';
-        results.appendChild(ul);
-        h4 && results.appendChild(h4);
-
-        const address = window.location.href.split('?')[0];
-        window.history.pushState(
-            {},
-            '',
-            address + '?q=' + encodeURIComponent(cleanQuery)
-        );
-        raiseEvent('searched', { search: s });
-    }
-
-    /** @type {Number} */
-    var debounceTimer;
-
-    function debounceSearch() {
-        var input = siteSearchInput;
-
-        if (input == null) {
-            throw new Error('Cannot find data-site-search-query');
-        }
-
-        // Words chained with . are combined, i.e. System.Text is "systemtext"
-        var s = input.value.replace(/\./g, '').trim();
-
-        if (!s) {
-            const address = window.location.href.split('?')[0];
-            window.history.pushState({}, '', address);
-        }
-
-        window.clearTimeout(debounceTimer);
-        debounceTimer = window.setTimeout(function () {
-            if (ready && s) {
-                search(s);
-            }
-        }, 400);
-    }
-
-    fetch(dataUrl)
-        .then(function (response) {
-            return response.json();
-        })
-        .then(function (data) {
-            haystack = data;
-            ready = true;
-
-            for (let i = 0; i < haystack.length; i++) {
-                const item = haystack[i];
-                item.safeTitle = sanitise(item.title);
-                item.tags = item.tags.map((t) => sanitise(t));
-                item.safeDescription = sanitise(item.description);
-                item.depth = item.url.match(/\//g)?.length ?? 0;
-
-                item.headings.forEach((h) => (h.safeText = sanitise(h.text)));
-            }
-
-            /** @type {HTMLFormElement} */
-            const siteSearch = siteSearchElement;
-
-            /** @type {HTMLInputElement} */
-            const siteSearchQuery = siteSearchInput;
-
-            if (siteSearch == null || siteSearchQuery == null) {
-                throw new Error(
-                    'Cannot find #site-search or data-site-search-query'
-                );
-            }
-
-            siteSearch.addEventListener('submit', function (e) {
-                e.preventDefault();
-                debounceSearch();
-                return false;
-            });
-
-            siteSearchQuery.addEventListener('keyup', function (e) {
-                e.preventDefault();
-                if (!scrolled) {
-                    scrolled = true;
-                    this.scrollIntoView(true);
-                }
-                debounceSearch();
-                return false;
-            });
-
-            const params = new URLSearchParams(window.location.search);
-            if (params.has('q')) {
-                siteSearchQuery.value = params.get('q') ?? '';
-            }
-
-            for (let key of Object.keys(scoring)) {
-                if (params.has(`s_${key}`)) {
-                    scoring[key] = parseInt(
-                        params.get(`s_${key}`) ?? scoring[key].toString(),
-                        10
-                    );
-                }
-            }
-
-            debounceSearch();
-        })
-        .catch((error) => {
-            console.log(error);
-        });
-}
-
-if (document.readyState === 'loading') {
-    // Loading hasn't finished yet
-    document.addEventListener('DOMContentLoaded', initializeSearch);
-} else {
-    // `DOMContentLoaded` has already fired
-    initializeSearch();
-}