astro-accelerator 4.0.10 → 4.0.13

package/README.md

@@ -7,6 +7,15 @@ Review the documentation at [astro.stevefenton.co.uk](https://astro.stevefenton.
 [![npm](https://img.shields.io/npm/v/astro-accelerator?color=blue&style=plastic)](https://www.npmjs.com/package/astro-accelerator/)
 [![npm](https://img.shields.io/npm/dm/astro-accelerator?style=plastic)](https://www.npmjs.com/package/astro-accelerator/)
 
+## Image optimization on Linux
+
+Currently, to run the image optimization on Linux, you need to force a compatible version of Sharp to be installed. Any suggestions for a better approach would be appreciated:
+
+```bash
+pnpm install --include=optional sharp
+pnpm install --force @img/sharp-linux-x64
+```
+
 ## Publish to NPM
 
 Update the `package.json` with the new version number, and commit the change with the message "Release n.n.n", for example, if the new version is `4.0.9` commit with: "Release 4.0.9".

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.10",
+  "version": "4.0.13",
   "author": "Steve Fenton",
   "name": "astro-accelerator",
   "description": "A super-lightweight, accessible, SEO-friendly starter project for Astro",
@@ -39,6 +39,7 @@
     "hast-util-from-selector": "^3.0.0",
     "html-to-text": "^9.0.5",
     "keyword-extractor": "^0.0.28",
+    "optional": "^0.1.4",
     "remark-directive": "^3.0.0",
     "sharp": "^0.33.2"
   },

package/public/css/main.css

@@ -604,44 +604,259 @@ nav.site-nav h2 {
 
 /* Site Search */
 
-form.site-search {
-    padding: 1em;
+.site-search__wrapper {
+    position: relative;
+    width: 100%;
+    max-width: 34.75rem;
+    transition: max-width var(--search-dropdown-duration) ease-in-out;
 }
 
-form.site-search div {
-    display: grid;
-    grid-template-columns: fit-content(400px) auto 30px;
-    gap: 1em;
+.site-search__wrapper.is-active {
+    max-width: 57.8rem;
 }
 
-form.site-search label > * {
-    padding: 0.2em;
+.site-search {
+    height: var(--search-height);
+    border-radius: var(--search-border-radius);
+    border: var(--search-border);
+    background-color: var(--white);
+    position: relative;
+    z-index: 1
 }
 
-form.site-search #site-search-button {
-    display: none;
+.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;
+    overflow-y: scroll;
+    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;
+    max-height: var(--search-dropdown-height);
+    transform-origin: top;
+    will-change: transform;
 }
 
-#site-search-results {
-    padding-bottom: 3rem;
+.site-search.is-active+.site-search-results {
+    padding: 1rem 0;
+    transform: translateY(1.37rem) scaleY(1);
+    visibility: visible;
 }
 
-.site-search-results {
-    font-size: 1.3rem;
+.site-search-results ul {
+    list-style-type: none;
+    margin-inline-start: 0;
 }
 
-.site-search-results a {
+.site-search-results ul:not(.post-list) {
+    margin: 0;
+}
+
+.site-search-results .show-more {
+    border-radius: 4.0625rem;
+    background: #00FFA3;
+    padding: 0.5rem 0.75rem;
     display: block;
-    padding: 0.2em;
+    margin: 1rem auto 0;
+    cursor: pointer;
 }
 
-.site-search-results .result-text {
-    font-size: 1rem;
+.site-search__overlay {
+    opacity: 0;
+    visibility: hidden;
+    background: rgba(12, 26, 36, 0.30);
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    transition: opacity var(--search-dropdown-duration) ease-in-out;
+    z-index: 1;
 }
 
-.site-search-results .result-path {
-    font-size: 1rem;
-    font-family: var(--code-font);
+.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);
+}
+
+.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;
+}
+
+.site-search-results__item:hover {
+    --hover-color: rgba(13, 128, 216, 0.07);
+    background-color: var(--hover-color);
+    border-color: var(--hover-color);
+}
+
+.site-search-results__item::after {
+    content: "";
+    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);
+}
+
+@media (max-width: 930px) {
+    .site-search-results__item {
+        padding: 1rem;
+    }
+}
+
+.result-wrapper {
+    display: flex;
+    padding: 1.5rem 3.6rem 1.75rem;
+    text-decoration: none;
+    flex-direction: column;
+    gap: 0.56rem;
+}
+
+.result-wrapper:hover {
+    background-color: initial;
+}
+
+@media (max-width: 930px) {
+    .result-wrapper {
+        padding: 1rem;
+    }
+}
+
+.site-search-results__item:hover .result-wrapper {
+    color: initial;
+}
+
+.result-wrapper mark {
+    color: var(--blue-500);
+}
+
+.result-path {
+    color:  var(--blue-grey-lighter);
+    font-size: var(--font-size-small);
+    font-weight: 400;
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+
+.result-path__segment:last-child {
+    color: var(--blue-grey);
+}
+
+.result-title {
+    color: var(--blue-midnight);
+    font-size: var(--font-size-large);
+    font-weight: 700;
+}
+
+.result-description {
+    color: var(--blue-grey-dark);
+    font-size: var(--font-size-medium);
+    font-weight: 400;
+}
+
+.site-search>fieldset {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding: 0 1rem;
+}
+
+.site-search__remove-btn {
+    margin-left: auto;
+    background-color: transparent;
+    padding: 0.5rem;
+    cursor: pointer;
+    visibility: hidden;
+    transition: transform var(--search-dropdown-duration) ease-in-out;
+}
+
+.site-search__remove-btn:hover {
+    transform: scale(1.2);
+}
+
+.site-search.is-active .site-search__remove-btn {
+    visibility: visible;
+}
+
+.site-search__mobile {
+    display: none;
+}
+
+@media (max-width: 930px) {
+    .site-header .site-search__wrapper {
+        max-width: fit-content;
+    }
+
+    .site-header .site-search {
+        display: none;
+    }
+
+    .site-header .site-search__mobile {
+        --search-mobile-size: 3rem;
+        display: flex;
+        width: var(--search-mobile-size);
+        height: var(--search-mobile-size);
+        border-radius: calc(var(--search-mobile-size) / 2);
+        justify-content: center;
+        align-items: center;
+        border: var(--search-border);
+    }
+}
+
+.site-search .show-more {
+    display: inline-block;
+    font-size: var(--font-size-small);
+    border-radius: 100px;
+    text-decoration: none;
+    text-align: center;
+    padding: 0.2em 0.6em 0.3em 0.6em;
+    color: var(--color-hint);
+    background-color: var(--bg-color-hint);
 }
 
 .result-headings li {

package/public/css/vars.css

@@ -24,7 +24,7 @@
     --fore-block: #333;
     --aft-block: #F3F5FF;
     --icon-block: #4D71FF;
-    
+
     --fore-table-head: #FDFDFE;
     --aft-table-head: #2F3141;
     --fore-table-row-odd: #333;
@@ -54,6 +54,16 @@
 
     /* 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) {
@@ -61,11 +71,11 @@
         --fore: #CCC;
         --fore-headings: #CCE;
         --aft: #333;
-    
+
         --fore-link: #abb9ef;
         --fore-link-alt: #abb9ef;
         --aft-link-alt: #232323;
-        
+
         --fore-head: #CCC;
         --aft-head: #222;
 
@@ -80,10 +90,16 @@
         --icon-block: #abb9ef;
 
         --fore-table-head: #CCC;
-        --aft-table-head: #222; 
+        --aft-table-head: #222;
         --fore-table-row-odd: #CCC;
         --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

@@ -57,10 +57,16 @@ function enabled(settings, option) {
 } Synonyms
  */
 
+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 = qs('#site-search').dataset.sourcedata;
+var dataUrl = siteSearchElement.dataset.sourcedata;
 
 var scoring = {
     depth: 5,
@@ -77,6 +83,106 @@ var scoring = {
 var ready = false;
 var scrolled = false;
 
+siteSearchInput.addEventListener('focus', () => activateInput());
+
+// Close the dropdown upon clicking outside the search
+document.addEventListener('click', function (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);
+    }
+});
+
+// Reopen the dropdown upon clicking the input after it has been closed
+siteSearchInput.addEventListener('click', () => {
+    if (siteSearchInput.value.trim() !== '') {
+        activateInput();
+        openDropdown();
+    }
+});
+
+// Clear the search input
+removeSearchButton.addEventListener('click', () => clearInput());
+
+// Dropdown accessibility controls
+document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape' && siteSearchWrapper.classList.contains('is-active')) {
+        closeDropdown();
+        deactivateInput();
+    }
+
+    // Only proceed if search is active
+    if (!siteSearchWrapper.classList.contains('is-active')) return;
+
+    const firstElement = siteSearchInput;
+    const lastElement = siteSearchResults.querySelector('button');
+
+    if (e.key === 'Tab') {
+        if (e.shiftKey && document.activeElement === firstElement) {
+            // If shift+tab is pressed on the first focusable element, move to the last
+            e.preventDefault();
+            if (lastElement) lastElement.focus();
+        } else if (!e.shiftKey && document.activeElement === lastElement) {
+            // If tab is pressed on the last focusable element, move to the first
+            e.preventDefault();
+            firstElement.focus();
+        }
+    }
+});
+  
+function activateInput() {
+    siteSearchWrapper.classList.add('is-active');
+}
+
+function deactivateInput() {
+    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) {
+            // 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);
+        } else {
+            // If dropdown is fully visible, no need to adjust scroll but prevent further scrolling
+            document.body.style.overflow = 'hidden';
+        }
+    });
+}
+
+function closeDropdown() {
+    siteSearchElement.classList.remove('is-active');
+    document.body.style.overflow = '';
+    siteSearchInput.blur();
+}
+
+function clearInput() {
+    closeDropdown();
+    siteSearchInput.value = '';
+    siteSearchInput.focus();
+}
+
 /** @type{Synonyms | null} */
 var _synonyms = null;
 
@@ -91,7 +197,7 @@ async function getSynonyms() {
 
     try {
         const synonymsModule = await import('./synonyms.js');
-        _synonyms =synonymsModule.synonyms;
+        _synonyms = synonymsModule.synonyms;
     } catch {
         _synonyms = {};
     }
@@ -105,7 +211,7 @@ async function getSynonyms() {
  */
 async function replaceSynonyms(queryTerms) {
     const synonyms = await getSynonyms();
-    
+
     for (let i = 0; i < queryTerms.length; i++) {
         const term = queryTerms[i];
         if (synonyms[term] != null) {
@@ -125,8 +231,17 @@ async function replaceSynonyms(queryTerms) {
 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 {
+        // Remove 'is-active' class when search is cleared
+        closeDropdown();
+    }
+
     /** @type {SearchEntry[]} */
-    const needles =  [];
+    const needles = [];
 
     // Clean the input
     const cleanQuery = sanitise(s);
@@ -149,7 +264,7 @@ async function search(s, r) {
 
     const allTerms = queryTerms.concat(stemmedTerms);
 
-    cleanQuery.length > 0 && haystack.forEach( (item) => {
+    cleanQuery.length > 0 && haystack.forEach((item) => {
 
         item.foundWords = 0;
         item.score = 0;
@@ -163,7 +278,7 @@ async function search(s, r) {
         if (item.safeTitle === currentQuery) {
             item.foundWords += 2;
         }
-        
+
         if (contains(item.safeTitle, currentQuery)) {
             item.score = item.score + scoring.phraseTitle;
             item.foundWords += 2;
@@ -187,7 +302,7 @@ async function search(s, r) {
         // Part 2 - Term Matches, i.e. "Kitchen" or "Sink"
 
         let foundWords = 0;
-        
+
         allTerms.forEach(term => {
             let isTermFound = false;
 
@@ -255,7 +370,7 @@ async function search(s, r) {
         }
     });
 
-    needles.sort(function (a, b){
+    needles.sort(function (a, b) {
         if (b.foundWords === a.foundWords) {
             return b.score - a.score;
         }
@@ -265,12 +380,12 @@ async function search(s, r) {
 
     const total = needles.reduce(function (accumulator, needle) {
         return accumulator + needle.score;
-        }, 0);
+    }, 0);
 
-    const results = qs('#site-search-results');
+    const results = siteSearchResults;
 
-    const ol = document.createElement('ol');
-    ol.className = 'site-search-results';
+    const ul = document.createElement('ul');
+    ul.className = 'site-search-results__list';
 
     const limit = Math.min(needles.length, numberOfResults);
 
@@ -282,28 +397,59 @@ async function search(s, r) {
 
         const address = new URL(needle.url);
         const isSameHost = siteUrl.host == address.host;
-        const url =  isSameHost ? address.pathname : needle.url;
+        const url = isSameHost ? address.pathname : needle.url;
+
+        const listElementWrapper = document.createElement('a');
+        listElementWrapper.href = url;
+        listElementWrapper.className = 'result-wrapper';
 
-        const a = document.createElement('a');
+        const listElementTitle = document.createElement('span');
         // Only highlight user query terms, not stemmed terms
-        a.innerHTML = highlight(needle.title, queryTerms);
-        a.href = url;
+        listElementTitle.innerHTML = highlight(needle.title, queryTerms);
+        listElementTitle.className = 'result-title';
 
         const path = document.createElement('div');
         path.className = 'result-path';
-        path.innerHTML = address.pathname;
 
-        const markers = document.createElement('div');
-        markers.className = 'result-text';
+        // 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" fill="none">
+                        <path d="M1 9L5 5L1 1" stroke="#7C98B4" 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
-        markers.innerHTML = highlight(needle.description, queryTerms);
+        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();
-        li.appendChild(a);
-        li.appendChild(path);
-        li.appendChild(markers);
+        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');
@@ -325,28 +471,30 @@ async function search(s, r) {
             li.appendChild(headings);
         }
 
-        ol.appendChild(li);
+        ul.appendChild(li);
     }
 
-    var h2 = document.createElement('h2');
-    h2.innerHTML = needles.length === 0
-        ? results.dataset.emptytitle || 'No Results'
-        : results.dataset.title || 'Results';
+    let h2;
+    if (needles.length === 0) {
+        h2 = document.createElement('h2');
+        h2.classList.add('search-results__heading');
+        h2.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', function() {
+    more.addEventListener('click', function (e) {
+        e.stopPropagation(); // Prevent the click from closing the dropdown
         currentQuery = '';
         const newTotal = numberOfResults + 12;
-        
         search(s, newTotal);
-    })
+    });
 
     results.innerHTML = '';
-    results.appendChild(h2);
-    results.appendChild(ol);
+    results.appendChild(ul);
+    h2 && results.appendChild(h2);
 
     if (needles.length > numberOfResults) {
         results.appendChild(more);
@@ -361,10 +509,12 @@ async function search(s, r) {
 var debounceTimer;
 
 function debounceSearch() {
-    var input = /** @type {HTMLInputElement} */(qs('#site-search-query'));
+    var input = siteSearchInput;
+
+    document.body.style.overflow = 'hidden'; // Prevent scrolling when active
 
     if (input == null) {
-        throw new Error('Cannot find #site-search-query');
+        throw new Error('Cannot find data-site-search-query');
     }
 
     // Words chained with . are combined, i.e. System.Text is "systemtext"
@@ -379,10 +529,10 @@ function debounceSearch() {
 }
 
 fetch(dataUrl)
-    .then(function (response) { 
+    .then(function (response) {
         return response.json();
     })
-    .then(function (data) { 
+    .then(function (data) {
         haystack = data;
         ready = true;
 
@@ -397,21 +547,21 @@ fetch(dataUrl)
         }
 
         /** @type {HTMLFormElement} */
-        const siteSearch = qs('#site-search');
+        const siteSearch = siteSearchElement;
 
         /** @type {HTMLInputElement} */
-        const siteSearchQuery = qs('#site-search-query');
+        const siteSearchQuery = siteSearchInput;
 
         if (siteSearch == null || siteSearchQuery == null) {
-            throw new Error('Cannot find #site-search or #site-search-query');
+            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) {
@@ -429,7 +579,7 @@ fetch(dataUrl)
 
         for (let key of Object.keys(scoring)) {
             if (params.has(`s_${key}`)) {
-                scoring[key] = parseInt(params.get(`s_${key}`) ?? scoring[key].toString(), 10)  ;
+                scoring[key] = parseInt(params.get(`s_${key}`) ?? scoring[key].toString(), 10);
             }
         }
 

package/src/config.ts

@@ -38,7 +38,7 @@ const SITE: Site = {
 		youTubeLinks: ['embed'],
 		headers: ['link'],
 		details: ['tabs'],
-		search: ['dialog','headings'],
+		search: [],
 	},
 	images: {
 		// Generated using https://ausi.github.io/respimagelint/

package/src/layouts/Search.astro

@@ -1,8 +1,9 @@
 ---
-// warning: This file is overwritten by Astro Accelerator
-
 import type { Frontmatter } from 'astro-accelerator-utils/types/Frontmatter';
-import Search from '@layouts/Search.astro';
+import { SITE } from '@config';
+import { Lang } from '@util/Languages';
+import Default from './Default.astro';
+import Search from '../themes/accelerator/components/Search.astro';
 
 // Properties
 type Props = {
@@ -10,7 +11,12 @@ type Props = {
     headings: { depth: number; slug: string; text: string; }[];
 }
 const { frontmatter, headings } = Astro.props satisfies Props;
+const lang = frontmatter.lang ?? SITE.default.lang;
+
+// Language
+const _ = Lang(lang);
 ---
-<Search frontmatter={ frontmatter } headings={ headings }>
+<Default frontmatter={ frontmatter } headings={ headings }>
     <slot />
-</Search>
+    <Search lang={ lang }/>
+</Default>

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

@@ -0,0 +1,99 @@
+---
+import { Accelerator, PostFiltering } from "astro-accelerator-utils";
+import { Translations, Lang } from "@util/Languages";
+import { SITE } from "@config";
+
+// Properties
+type Props = {
+  lang: string;
+};
+const { lang } = Astro.props satisfies Props;
+
+// Language
+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__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
+  >
+    <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"
+        fill="none"
+      >
+        <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"
+          fill="#274B66"></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-btn" data-site-search-remove>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="11"
+          height="11"
+          viewBox="0 0 11 11"
+          fill="none"
+        >
+          <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>
+    </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>
+  <a href={searchUrl} class="site-search__mobile">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="19"
+      viewBox="0 0 20 19"
+      fill="none"
+    >
+      <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"
+        fill="#274B66"></path>
+    </svg>
+  </a>
+</div>
+
+<script src={SITE.subfolder + "/js/search.js"} type="module" async></script>