astro-accelerator 5.9.11 → 5.9.13

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "5.9.11",
+    "version": "5.9.13",
     "author": "Steve Fenton",
     "name": "astro-accelerator",
     "description": "A super-lightweight, accessible, SEO-friendly starter project for Astro",
@@ -21,9 +21,9 @@
     },
     "scripts": {
         "refresh": "npm version patch && pnpm update && pnpm test",
-        "img": "node --no-experimental-fetch ./src/themes/accelerator/utilities/img.mjs",
-        "dev": "node --no-experimental-fetch ./src/themes/accelerator/utilities/img.mjs && astro dev",
-        "stats": "node --no-experimental-fetch ./src/themes/accelerator/utilities/stats.mjs",
+        "img": "node ./src/themes/accelerator/utilities/img.mjs",
+        "dev": "node ./src/themes/accelerator/utilities/img.mjs && astro dev",
+        "stats": "node ./src/themes/accelerator/utilities/stats.mjs",
         "spellcheck": "git fetch origin main:refs/remotes/origin/main && git diff origin/main --name-only --diff-filter=ACMRTUXB | cspell --no-must-find-files --file-list stdin",
         "test": "astro build && npx playwright install --with-deps && npx playwright test",
         "crawl": "linkinator ./dist --skip \"^(?!http://localhost)\" --skip \"/404/\" --recurse  --verbosity error",

package/public/css/main.css

@@ -297,8 +297,8 @@ nav.skip-links a:focus {
     top: 0;
     z-index: 10;
     gap: 1rem;
-    display: flex;
-    justify-content: space-between;
+    display: grid;
+    grid-template-columns: auto 40px 40px;
     align-items: center;
 }
 
@@ -316,25 +316,20 @@ nav.skip-links a:focus {
 .site-header .site-title {
     letter-spacing: -1px;
     text-transform: uppercase;
+    text-align: left;
 
     @media (min-width: 338px) {
         flex-shrink: 0;
     }
 }
 
-.site-header .navigation-icon {
+.site-header .header-icon {
     --icon-width: 40px;
-    stroke: var(--link-head);
-    border: 1px solid var(--link-head);
-    border-radius: calc(var(--icon-width) / 2);
+    stroke: var(--icon-head);
     width: var(--icon-width);
     height: var(--icon-width);
 }
 
-.site-header .search-icon {
-    stroke: var(--link-head);
-}
-
 /* Navigation */
 
 nav.site-nav.sticky {
@@ -343,7 +338,7 @@ nav.site-nav.sticky {
 }
 
 nav.site-nav h2 {
-    margin-top: 0.1em;
+    margin-block-start: 0.1em;
     display: none;
 
     @media (max-width: 860px) {
@@ -352,10 +347,11 @@ nav.site-nav h2 {
 }
 
 .site-nav {
-    margin-top: 2rem;
+    margin-block-start: 10rem;
+    margin-block-end: 1rem;
 
     @media (max-width: 860px) {
-        grid-row: 2;
+        margin-block: 1rem;
     }
 }
 
@@ -464,25 +460,25 @@ nav.site-nav h2 {
             5vw,
             50vw
         );
-    grid-template-areas:
-        'top top top top'
-        'left menu content right';
+    grid-template-areas: 'left nav content right';
     gap: var(--grid-gap);
     padding-top: 0;
 
     @media (max-width: 860px) {
         grid-template-columns: 1.5rem auto 1.5rem;
         grid-template-rows: auto auto auto;
-        gap: 0;
         grid-template-areas:
-            'top top top'
             'left content right'
-            'left menu right';
+            'left nav right';
+        gap: 0;
     }
 }
 
+.content-group > main {
+    grid-area: content;
+}
+
 .content-group header {
-    grid-area: top;
     text-align: center;
     padding-bottom: var(--block-gap);
     max-width: 100%;
@@ -493,20 +489,15 @@ nav.site-nav h2 {
     margin: 0 auto;
     font-size: 2em;
     color: var(--fore-headings);
+    text-wrap: balance;
 }
 
 .content-group nav {
-    grid-area: menu;
+    grid-area: nav;
     padding: 0 1rem 0 0;
 }
 
-.content-group main,
-.content-group article {
-    display: contents;
-}
-
 .content-group article > .page-content {
-    grid-area: content;
     width: calc(var(--content-width) - var(--navigation-width));
     max-width: calc(var(--grid-max-width) - var(--navigation-width));
 
@@ -617,169 +608,64 @@ nav.site-nav h2 {
 
 /* Site Search */
 
-.site-search-wrapper {
-    position: relative;
-    width: 100%;
-    max-width: 34.75rem;
-    transition: max-width var(--search-dropdown-duration) ease-in-out;
-}
-
-.site-search-wrapper.is-active {
-    max-width: 57.8rem;
+.site-search > fieldset {
+    height: 100%;
+    display: flex;
+    align-items: center;
 }
 
-.site-search {
-    height: var(--search-height);
-    border-radius: var(--search-border-radius);
-    border: 1px solid var(--link-head);
-    background-color: var(--white);
-    position: relative;
-    z-index: 1;
+.site-search-wrapper input,
+.site-search-wrapper button {
+    padding: 0.5em;
+    font-size: 1.3rem;
+    border-radius: var(--block-radius);
 }
 
-header .site-search-results {
-    background-color: var(--white);
-    position: absolute;
-    top: var(--search-height);
-    width: 100%;
-    padding: 0;
-    border-radius: var(--search-border-radius);
-    border-radius: 0.9375rem;
-    list-style-type: none;
-    transition-property: padding, transform, visibility;
-    transition-duration: var(--search-dropdown-duration);
-    transition-timing-function: ease-in-out;
-    visibility: hidden;
-    transform: translateY(0) scaleY(0);
-    z-index: 1;
-    transform-origin: top;
-    will-change: transform;
+.site-search-wrapper input {
+    width: calc(100% - 110px);
 }
 
-.site-search.is-active + .site-search-results {
-    padding: 1rem 0;
-    transform: translateY(1.37rem) scaleY(1);
-    visibility: visible;
+.site-search-wrapper button {
+    width: 80px;
 }
 
-.site-search-results ul {
+.site-search-results ul.site-search-results-list {
     list-style-type: none;
-    margin-inline-start: 0;
-}
-
-header .site-search-results ul:not(.post-list):not(.result-headings) {
     margin: 0;
-    max-height: var(--search-dropdown-height);
-    overflow-y: scroll;
-}
-
-.site-search-overlay {
-    opacity: 0;
-    visibility: hidden;
-    background: rgba(12, 26, 36, 0.3);
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    transition: opacity var(--search-dropdown-duration) ease-in-out;
-    z-index: 1;
-}
-
-.site-search-wrapper.is-active .site-search-overlay {
-    opacity: 1;
-    visibility: visible;
-}
-
-.site-search-query {
-    width: 100%;
-    background: transparent;
-    height: 100%;
-    padding: 0 1rem;
-    width: calc(100% - 2rem);
-    font-size: 1.25rem;
-    color: var(--link-head);
-}
-
-.search-results-heading {
-    visibility: hidden;
-}
-
-.site-search.is-active + .site-search-results > .search-results-heading {
-    visibility: visible;
 }
 
-.site-search-results-item {
-    background-color: transparent;
-    transition-property: background-color, border-color;
-    transition-duration: var(--search-dropdown-duration);
-    transition-timing-function: ease-in-out;
-    border-bottom: 0.0625rem solid;
-    border-color: var(--search-item-border-color);
-    position: relative;
-
-    @media (max-width: 930px) {
-        padding: 1rem;
-    }
+.site-search-results ul.site-search-results-list > li {
+    list-style-type: none;
+    margin-block: 2rem;
+    padding-block-end: 2rem;
 }
 
-.site-search-results-item:hover,
-.site-search-results-item:focus-within {
-    --hover-color: rgba(13, 128, 216, 0.07);
-    background-color: var(--hover-color);
-    border-color: var(--hover-color);
+.site-search-results ul.site-search-results-list > li:not(:last-child) {
+    border-bottom: 1px solid var(--fore);
 }
 
-.site-search-results-item a:hover,
-.site-search-results-item a:focus {
-    color: var(--fore-link-alt);
+.site-search-results-item a {
+    text-decoration: none;
 }
 
-.site-search-results-item::after {
-    content: '';
+.site-search-results .show-more {
+    margin-block-start: 1rem;
     display: inline-block;
-    width: 0.75rem;
-    height: 1.25rem;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20' viewBox='0 0 12 20' fill='none'%3E%3Cpath d='M2 18L10 10L2 2' stroke='%230D80D8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-    background-size: 0.75rem 1.25rem;
-    background-repeat: no-repeat;
-    position: absolute;
-    right: 2rem;
-    top: 50%;
-    transform: translateY(-50%) translateX(-1rem);
-    opacity: 0;
-    transition-property: opacity, transform;
-    transition-duration: var(--search-dropdown-duration);
-    transition-timing-function: ease-in-out;
-}
-
-.site-search-results-item:hover::after {
-    opacity: 1;
-    transform: translateY(-50%) translateX(0);
-}
-
-.result-wrapper {
-    display: flex;
+    font-size: 1.2rem;
+    border-radius: 100px;
     text-decoration: none;
-    flex-direction: column;
-    gap: 0.56rem;
-    text-align: left;
-    @media (max-width: 930px) {
-        padding: 1rem;
-    }
-}
-
-header .result-wrapper {
-    padding: 1.5rem 3.6rem 1.75rem;
-}
-
-.result-wrapper:hover {
-    background-color: initial;
+    text-align: center;
+    padding: 0.2em 0.6em 0.3em 0.6em;
+    color: var(--aft-link-alt);
+    background-color: var(--fore-link);
+    cursor: pointer;
 }
 
 .result-wrapper mark,
 .result-headings mark {
-    background-color: var(--aft-mark);
+    color: unset;
+    background-color: unset;
+    text-decoration: underline;
 }
 
 .result-path {
@@ -789,6 +675,7 @@ header .result-wrapper {
     display: flex;
     gap: 0.5rem;
     flex-wrap: wrap;
+    font-family: monospace;
 }
 
 .result-path-icon {
@@ -801,7 +688,7 @@ header .result-wrapper {
 
 .result-title {
     color: var(--link-head);
-    font-size: 1.25rem;
+    font-size: 1.5rem;
     font-weight: 700;
 }
 
@@ -812,72 +699,6 @@ header .result-wrapper {
     margin: 0;
 }
 
-.site-search > fieldset {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    padding: 0 1rem;
-}
-
-.site-search-remove {
-    margin-left: auto;
-    background-color: transparent;
-    padding: 0.5rem;
-    cursor: pointer;
-    visibility: hidden;
-    transition: transform var(--search-dropdown-duration) ease-in-out;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.site-search-remove:hover {
-    transform: scale(1.2);
-}
-
-.site-search.is-active .site-search-remove {
-    visibility: visible;
-}
-
-.site-search-mobile {
-    display: none;
-}
-
-@media (max-width: 930px) {
-    .site-header .site-search-wrapper {
-        max-width: -moz-fit-content;
-        max-width: fit-content;
-    }
-
-    .site-header .site-search {
-        display: none;
-    }
-
-    .site-header .site-search-mobile {
-        --search-mobile-size: 40px;
-        display: flex;
-        width: var(--search-mobile-size);
-        height: var(--search-mobile-size);
-        border: 1px solid var(--link-head);
-        border-radius: calc(var(--search-mobile-size) / 2);
-        justify-content: center;
-        align-items: center;
-        fill: var(--link-head);
-    }
-}
-
-.site-search-results .show-more {
-    display: inline-block;
-    font-size: 1.2rem;
-    border-radius: 100px;
-    text-decoration: none;
-    text-align: center;
-    padding: 0.2em 0.6em 0.3em 0.6em;
-    color: var(--aft-link-alt);
-    background-color: var(--fore-link);
-    cursor: pointer;
-}
-
 .result-headings {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -888,57 +709,6 @@ header .result-wrapper {
     font-size: 1rem;
 }
 
-header .result-headings li {
-    padding: 0.1rem 3.6rem;
-}
-
-.show-more {
-    padding: 0.5em 1em;
-    background-color: var(--fore-link);
-    color: var(--aft-link-alt);
-}
-
-/* Search dialog */
-
-.search-dialog {
-    margin: auto;
-    padding: 2rem 3rem;
-    border-radius: var(--block-radius);
-    box-shadow: var(--box-shadow);
-    height: calc(90vh - 4em);
-    width: calc(80vw - 6em);
-    max-width: 860px;
-
-    @media (max-width: 860px) {
-        /* Fallback */
-        height: calc(100vh - 4rem);
-        width: calc(100vw - 6rem);
-        /* Ideal units */
-        height: calc(100dvh - 4rem);
-        width: calc(100dvw - 6rem);
-    }
-}
-
-.search-dialog::backdrop {
-    background-color: #000;
-    opacity: 0.5;
-}
-
-.search-dialog form {
-    margin-top: 2rem;
-}
-
-#site-search-close {
-    float: right;
-    position: relative;
-    top: -1rem;
-    left: 2.5rem;
-    background: none;
-    cursor: pointer;
-    font-size: 2rem;
-    stroke: var(--link-head);
-}
-
 /* Articles */
 
 .post-list {

package/public/css/vars.css

@@ -17,6 +17,7 @@
 
     --fore-head: #333;
     --aft-head: #e6e8f1;
+    --icon-head: #2d4295;
 
     --fore-breadcrumb: #333;
     --aft-breadcrumb: #f3f5ff;
@@ -28,8 +29,6 @@
     --aft-block: #f3f5ff;
     --icon-block: #4d71ff;
 
-    --aft-mark: #eef;
-
     --fore-table-head: #fdfdfe;
     --aft-table-head: #2f3141;
     --fore-table-row-odd: #333;
@@ -59,16 +58,6 @@
 
     /* Calculate the mobile width by removing l/r columns and grid gap */
     --content-width-mobile: calc(100vw - (1rem * 2));
-
-    /* Search variables */
-    --white: #fff;
-    --search-height: 3rem;
-    --search-border-radius: calc(var(--search-height) / 2);
-    --search-results-padding: 1rem;
-    --search-border: 0.0625rem solid #76a1c2;
-    --search-dropdown-height: 65vh;
-    --search-dropdown-duration: 0.3s;
-    --search-item-border-color: #dae2e9;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -83,6 +72,7 @@
 
         --fore-head: #ccc;
         --aft-head: #222;
+        --icon-head: #abb9ef;
 
         --fore-breadcrumb: #ccc;
         --aft-breadcrumb: #2c2c2c;
@@ -100,10 +90,5 @@
         --aft-table-row-odd: #333;
         --fore-table-row-even: #ccc;
         --aft-table-row-even: #444;
-
-        /* Search variables */
-        --white: var(--aft);
-        --search-border: 0.0625rem solid var(--link-alt-head);
-        --search-item-border-color: var(--link-head);
     }
 }

package/public/js/search.js

@@ -72,16 +72,23 @@ function unique(value, index, array) {
  */
 
 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]');
+    const siteSearchInput = /** @type {HTMLInputElement} */ (
+        qs('.site-search-query')
+    );
+    const siteSearchWrapper = /** @type {HTMLElement} */ (
+        qs('.site-search-wrapper')
+    );
+    const siteSearchElement = /** @type {HTMLFormElement} */ (
+        qs('.site-search-wrapper > form')
+    );
+    const siteSearchResults = /** @type {HTMLElement} */ (
+        qs('.site-search-results')
+    );
 
     /** @type {SearchEntry[]} */
     var haystack = [];
     var currentQuery = '';
-    var dataUrl = siteSearchElement.dataset.sourcedata;
+    var dataUrl = /** @type {string} */ (siteSearchElement.dataset.sourcedata);
 
     // Legacy scoring
     var scoring = {
@@ -105,139 +112,6 @@ function initializeSearch() {
     };
 
     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');
-        openDropdown();
-    }
-
-    function deactivateInput() {
-        if (!siteSearchWrapper.classList.contains('is-active')) {
-            return;
-        }
-        siteSearchWrapper.classList.remove('is-active');
-    }
-
-    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;
@@ -293,15 +167,6 @@ function initializeSearch() {
     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[]} */
         let needles = [];
 
@@ -464,7 +329,7 @@ function initializeSearch() {
         const results = siteSearchResults;
 
         const ul = document.createElement('ul');
-        ul.className = 'site-search-results__list';
+        ul.className = 'site-search-results-list';
 
         const limit = Math.min(needles.length, numberOfResults);
 
@@ -483,6 +348,7 @@ function initializeSearch() {
             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';
@@ -584,7 +450,7 @@ function initializeSearch() {
             await search(s, newTotal);
             window.setTimeout(function () {
                 const previousPosition = qs(
-                    `.site-search-results__list li:nth-child(${oldTotal}) > a`
+                    `.site-search-results-list li:nth-child(${oldTotal}) > a`
                 );
                 console.log(previousPosition.outerHTML);
                 previousPosition.focus();
@@ -617,7 +483,7 @@ function initializeSearch() {
         var input = siteSearchInput;
 
         if (input == null) {
-            throw new Error('Cannot find data-site-search-query');
+            throw new Error('Cannot find .site-search-query');
         }
 
         // Words chained with . are combined, i.e. System.Text is "systemtext"
@@ -662,7 +528,7 @@ function initializeSearch() {
 
             if (siteSearch == null || siteSearchQuery == null) {
                 throw new Error(
-                    'Cannot find #site-search or data-site-search-query'
+                    'Cannot find #site-search or .site-search-query'
                 );
             }
 
@@ -674,10 +540,6 @@ function initializeSearch() {
 
             siteSearchQuery.addEventListener('keyup', function (e) {
                 e.preventDefault();
-                if (!scrolled) {
-                    scrolled = true;
-                    this.scrollIntoView(true);
-                }
                 debounceSearch();
                 return false;
             });
@@ -704,9 +566,7 @@ function initializeSearch() {
 }
 
 if (document.readyState === 'loading') {
-    // Loading hasn't finished yet
     document.addEventListener('DOMContentLoaded', initializeSearch);
 } else {
-    // `DOMContentLoaded` has already fired
     initializeSearch();
 }

package/src/themes/accelerator/components/Header.astro

@@ -1,11 +1,10 @@
 ---
 // warning: This file is overwritten by Astro Accelerator
 
-import { Accelerator } from "astro-accelerator-utils";
+import { Accelerator, PostFiltering } from "astro-accelerator-utils";
 import type { Frontmatter } from "astro-accelerator-utils/types/Frontmatter";
 import { SITE } from "@config";
 import { Translations, Lang } from "@util/Languages";
-import Search from "./Search.astro";
 
 const accelerator = new Accelerator(SITE);
 const stats = new accelerator.statistics("accelerator/components/Header.astro");
@@ -23,31 +22,25 @@ const { lang, showSearch } = Astro.props satisfies Props;
 // Language
 const _ = Lang(lang);
 
+const search = accelerator.posts.all().filter(PostFiltering.isSearch).shift() ?? null;
+const searchUrl = (search && accelerator.urlFormatter.formatAddress(search.url)) || SITE.search.fallbackUrl;
+
 stats.stop();
 ---
 
 <header class="site-header">
   <a href={ (SITE.subfolder ?? '') + '/' } class="site-title" translate="no">{ SITE.title }</a>
-  <Search lang={ lang } showSearch={ showSearch } />
-  <a
-    href="#site-nav"
-    data-navigationid="site-nav"
-    class="navigation-icon"
-    title={_(Translations.header.toggle_menu)}
-    ><svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="40"
-      height="40"
-      viewBox="0 0 24 24"
-      stroke-width="1.5"
-      fill="none"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
+  <a href={searchUrl} class="header-icon">
+    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 20 19" stroke-width="1" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M19.0524 16.4267L15.3727 12.7273C15.2067 12.5603 14.9815 12.4675 14.7453 12.4675H14.1437C15.1624 11.1577 15.7676 9.5102 15.7676 7.718C15.7676 3.45455 12.3316 0 8.09097 0C3.85035 0 0.414307 3.45455 0.414307 7.718C0.414307 11.9814 3.85035 15.436 8.09097 15.436C9.87358 15.436 11.5123 14.8275 12.8151 13.8033V14.4082C12.8151 14.6456 12.9073 14.872 13.0734 15.039L16.7531 18.7384C17.1 19.0872 17.661 19.0872 18.0042 18.7384L19.0487 17.6883C19.3956 17.3395 19.3956 16.7755 19.0524 16.4267ZM8.09097 12.4675C5.48164 12.4675 3.36687 10.3451 3.36687 7.718C3.36687 5.09462 5.47795 2.96846 8.09097 2.96846C10.7003 2.96846 12.8151 5.09091 12.8151 7.718C12.8151 10.3414 10.704 12.4675 8.09097 12.4675Z"></path>
+    </svg>
+  </a>
+  <a href="#site-nav" data-navigationid="site-nav" class="header-icon" title={_(Translations.header.toggle_menu)}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
       <line x1="4" y1="6" x2="20" y2="6"></line>
       <line x1="4" y1="12" x2="20" y2="12"></line>
       <line x1="4" y1="18" x2="20" y2="18"></line>
-    </svg></a
-  >  
+    </svg>
+  </a>  
 </header>

package/src/themes/accelerator/components/Search.astro

@@ -18,86 +18,19 @@ const _ = Lang(lang);
 // Logic
 const siteUrl = Astro.site ? Astro.site.href : "";
 const accelerator = new Accelerator(SITE);
-const search =
-  accelerator.posts.all().filter(PostFiltering.isSearch).shift() ?? null;
-const searchUrl =
-  (search && accelerator.urlFormatter.formatAddress(search.url)) ||
-  SITE.search.fallbackUrl;
+
 ---
-<div class="site-search-wrapper" data-site-search-wrapper>
+<div class="site-search-wrapper">
 {showSearch &&
-  <div class="site-search-overlay"></div>
-  <form
-    method="GET"
-    action={SITE.search.fallbackUrl ?? "https://www.google.com/search"}
-    role="search"
-    class="site-search"
-    autocomplete="off"
-    data-sourcedata={SITE.subfolder + "/search.json"}
-    data-site-search
-  >
+  <form method="GET" action={SITE.search.fallbackUrl ?? "https://www.google.com/search"} role="search" autocomplete="off" data-sourcedata={SITE.subfolder + "/search.json"}>
     <fieldset>
-      <input
-        type="hidden"
-        name={SITE.search.fallbackSite ?? "q"}
-        value={"site:" + siteUrl}
-      />
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="19"
-        viewBox="0 0 20 19"
-      >
-        <path
-          d="M19.0524 16.4267L15.3727 12.7273C15.2067 12.5603 14.9815 12.4675 14.7453 12.4675H14.1437C15.1624 11.1577 15.7676 9.5102 15.7676 7.718C15.7676 3.45455 12.3316 0 8.09097 0C3.85035 0 0.414307 3.45455 0.414307 7.718C0.414307 11.9814 3.85035 15.436 8.09097 15.436C9.87358 15.436 11.5123 14.8275 12.8151 13.8033V14.4082C12.8151 14.6456 12.9073 14.872 13.0734 15.039L16.7531 18.7384C17.1 19.0872 17.661 19.0872 18.0042 18.7384L19.0487 17.6883C19.3956 17.3395 19.3956 16.7755 19.0524 16.4267ZM8.09097 12.4675C5.48164 12.4675 3.36687 10.3451 3.36687 7.718C3.36687 5.09462 5.47795 2.96846 8.09097 2.96846C10.7003 2.96846 12.8151 5.09091 12.8151 7.718C12.8151 10.3414 10.704 12.4675 8.09097 12.4675Z"
-          ></path>
-      </svg>
-      <input
-        type="text"
-        name={SITE.search.fallbackSite ?? "q"}
-        class="site-search-query"
-        placeholder={_(Translations.search.search_for)}
-        spellcheck="true"
-        autocomplete="off"
-        data-site-search-query
-      />
-      <button
-        class="site-search-remove"
-        type="button"
-        data-site-search-remove
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="11"
-          height="11"
-          viewBox="0 0 11 11"
-        >
-          <path
-            d="M7.585 5.5L10.7122 2.37281C11.0959 1.98906 11.0959 1.36687 10.7122 0.982812L10.0172 0.287813C9.63344 -0.0959375 9.01125 -0.0959375 8.62719 0.287813L5.5 3.415L2.37281 0.287813C1.98906 -0.0959375 1.36688 -0.0959375 0.982813 0.287813L0.287813 0.982812C-0.0959375 1.36656 -0.0959375 1.98875 0.287813 2.37281L3.415 5.5L0.287813 8.62719C-0.0959375 9.01094 -0.0959375 9.63312 0.287813 10.0172L0.982813 10.7122C1.36656 11.0959 1.98906 11.0959 2.37281 10.7122L5.5 7.585L8.62719 10.7122C9.01094 11.0959 9.63344 11.0959 10.0172 10.7122L10.7122 10.0172C11.0959 9.63344 11.0959 9.01125 10.7122 8.62719L7.585 5.5Z"
-            fill="#355670"></path>
-        </svg>
-      </button>
+      <input type="hidden" name={SITE.search.fallbackSite ?? "q"} value={"site:" + siteUrl} />
+      <input type="text" name={SITE.search.fallbackSite ?? "q"} class="site-search-query" placeholder={_(Translations.search.search_for)} spellcheck="true" autocomplete="off" />
+      <button type="submit" set:html={_(Translations.search.submit)}></button>
     </fieldset>
   </form>
-  <div
-    class="site-search-results"
-    data-title={_(Translations.search.results_title)}
-    data-emptytitle={_(Translations.search.no_results_title)}
-    data-site-search-results
-  >
+  <div class="site-search-results" data-title={_(Translations.search.results_title)} data-emptytitle={_(Translations.search.no_results_title)}>
   </div>
   <script src={SITE.subfolder + "/js/search.js"} type="module" async></script>
 }
-  <a href={searchUrl} class="site-search-mobile">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="19"
-      viewBox="0 0 20 19"
-    >
-      <path
-        d="M19.0524 16.4267L15.3727 12.7273C15.2067 12.5603 14.9815 12.4675 14.7453 12.4675H14.1437C15.1624 11.1577 15.7676 9.5102 15.7676 7.718C15.7676 3.45455 12.3316 0 8.09097 0C3.85035 0 0.414307 3.45455 0.414307 7.718C0.414307 11.9814 3.85035 15.436 8.09097 15.436C9.87358 15.436 11.5123 14.8275 12.8151 13.8033V14.4082C12.8151 14.6456 12.9073 14.872 13.0734 15.039L16.7531 18.7384C17.1 19.0872 17.661 19.0872 18.0042 18.7384L19.0487 17.6883C19.3956 17.3395 19.3956 16.7755 19.0524 16.4267ZM8.09097 12.4675C5.48164 12.4675 3.36687 10.3451 3.36687 7.718C3.36687 5.09462 5.47795 2.96846 8.09097 2.96846C10.7003 2.96846 12.8151 5.09091 12.8151 7.718C12.8151 10.3414 10.704 12.4675 8.09097 12.4675Z"
-        ></path>
-    </svg>
-  </a>
 </div>

package/src/themes/accelerator/utilities/language.json

@@ -7,7 +7,7 @@
             "en": "Site"
         },
         "toc": {
-            "en": "Table of contents"
+            "en": "On this page"
         },
         "paging": {
             "en": "Paging"
@@ -48,7 +48,7 @@
     },
     "toc": {
         "title": {
-            "en": "Table of contents"
+            "en": "On this page"
         }
     },
     "footer": {