astro-accelerator 6.0.12 → 6.0.14

package/package.json

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

package/public/css/main.css

@@ -859,6 +859,7 @@ code {
 }
 
 pre.astro-code {
+    border-radius: var(--block-radius);
     font-family: var(--code-font);
     margin: var(--block-gap) 0;
     overflow: auto;

package/public/js/modules/string.js

@@ -59,6 +59,7 @@ function sanitise(string) {
         string
             .trim()
             .normalize('NFD')
+            .replace(/./g, ' ')
             .replace(/[\u0300-\u036f]/g, '')
             .toLowerCase()
             .replace(/-/g, '');

package/public/js/search.js

@@ -60,6 +60,7 @@ function unique(value, index, array) {
         tags: string[];
         url: string;
         date: string;
+        bannerImage: { src: string; alt: string } | null;
         matchedHeadings: Heading[];
     }
 }  SearchEntry
@@ -358,40 +359,11 @@ function initializeSearch() {
 
             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);
-                }
-            });
+            path.innerText = address.pathname;
 
             const listElementDescription = document.createElement('p');
             listElementDescription.className = 'result-description';
+
             // Only highlight user query terms, not stemmed terms
             listElementDescription.innerHTML = highlight(
                 needle.description,
@@ -404,9 +376,22 @@ function initializeSearch() {
             li.dataset.score = (
                 Math.round((needle.score / total) * 1000) / 1000
             ).toString();
-            listElementWrapper.appendChild(path);
-            listElementWrapper.appendChild(listElementTitle);
-            listElementWrapper.appendChild(listElementDescription);
+            const resultContent = document.createElement('div');
+            resultContent.className = 'result-content';
+            resultContent.appendChild(path);
+            resultContent.appendChild(listElementTitle);
+            resultContent.appendChild(listElementDescription);
+
+            if (needle.bannerImage) {
+                const resultImage = document.createElement('img');
+                resultImage.src = needle.bannerImage.src;
+                resultImage.alt = needle.bannerImage.alt;
+                resultImage.className = 'result-image';
+                resultImage.loading = 'lazy';
+                listElementWrapper.appendChild(resultImage);
+            }
+
+            listElementWrapper.appendChild(resultContent);
             li.appendChild(listElementWrapper);
 
             if (
@@ -489,8 +474,8 @@ function initializeSearch() {
             throw new Error('Cannot find .site-search-query');
         }
 
-        // Words chained with . are combined, i.e. System.Text is "systemtext"
-        var s = input.value.replace(/\./g, '').trim();
+        // Words chained with . are exploded, i.e. System.Text is "system text"
+        var s = input.value.replace(/\./g, ' ').trim();
 
         if (!s) {
             const address = window.location.href.split('?')[0];

package/src/pages/search.json.ts

@@ -70,6 +70,7 @@ const getData = async () => {
             tags: page.frontmatter.tags ?? [],
             url: SITE.url + accelerator.urlFormatter.formatAddress(url),
             date: page.frontmatter.pubDate ?? '',
+            bannerImage: page.frontmatter.bannerImage ?? null,
         });
     }
 

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

@@ -36,56 +36,127 @@ const accelerator = new Accelerator(SITE);
 </div>
 
 <style is:global>
+    .site-search-wrapper {
+        width: 100%;
+    }
+
     .site-search-wrapper fieldset {
         height: 100%;
         display: flex;
-        align-items: center;
+        gap: 0.75rem;
+        align-items: stretch;
         padding: 0;
     }
 
     .site-search-wrapper input {
         background-color: var(--aft-block);
         border-radius: var(--block-radius);
+        border: 2px solid var(--fore-link);
         color: var(--fore);
-        font-size: 1.3rem;
-        padding: 0.5em;
+        font-size: 1.1rem;
+        font-family: var(--content-font);
+        padding: 0.75em 1em;
+        flex: 1;
+        transition: border-color 0.2s ease, box-shadow 0.2s ease;
     }
 
-    .site-search-wrapper input {
-        width: calc(100% - 110px);
+    .site-search-wrapper input::placeholder {
+        color: var(--fore-block);
+        opacity: 0.7;
     }
 
     .site-search-wrapper button {
-        width: 80px;
+        width: 100px;
+        border-radius: var(--block-radius);
+        background-color: var(--fore-link);
+        color: var(--aft);
+        font-family: var(--content-font);
+        font-size: 1rem;
+        font-weight: 600;
+        border: none;
+        cursor: pointer;
+        transition: background-color 0.2s ease, transform 0.1s ease;
+    }
+
+    .site-search-wrapper button:hover {
+        background-color: var(--fore-link-alt);
+    }
+
+    .site-search-wrapper button:active {
+        transform: scale(0.98);
+    }
+
+    .site-search-results {
+        margin-top: 2rem;
     }
 
     .site-search-results ul.site-search-results-list {
         list-style-type: none;
-        margin-block: 1rem;
+        margin-block: 0;
         margin-inline: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 1.5rem;
     }
 
     .site-search-results li.site-search-results-item {
         list-style-type: none;
-        margin: var(--block-gap-l) 0 var(--block-gap-l) 0;
+        padding: var(--paragraph-margin);
+        background-color: var(--aft-block);
+        border-radius: var(--block-radius);
+        box-shadow: var(--box-shadow-slight);
+        color: var(--fore-block);
+        transition: box-shadow 0.2s ease, transform 0.2s ease;
+    }
+
+    .site-search-results li.site-search-results-item:hover {
+        box-shadow: var(--box-shadow);
+        transform: translateY(-2px);
     }
 
     .site-search-results-item a {
         text-decoration: none;
+        display: flex;
+        gap: 1.5rem;
+        align-items: flex-start;
+    }
+
+    .result-image {
+        width: 120px;
+        height: 120px;
+        object-fit: cover;
+        border-radius: var(--block-radius);
+        flex-shrink: 0;
+    }
+
+    .result-content {
+        flex: 1;
+        min-width: 0;
     }
 
     .site-search-results .show-more {
-        margin-block-start: 1rem;
         display: inline-block;
-        font-size: 1.2rem;
+        font-size: 1rem;
+        font-family: var(--content-font);
         border-radius: 100px;
         text-decoration: none;
         text-align: center;
-        padding: 0.2em 0.6em 0.3em 0.6em;
-        color: var(--aft-link-alt);
+        padding: 0.6em 1.5em;
+        margin-top: 1.5rem;
+        color: var(--aft);
         background-color: var(--fore-link);
         cursor: pointer;
         width: auto;
+        transition: background-color 0.2s ease, transform 0.1s ease;
+    }
+
+    .site-search-results .show-more:hover {
+        background-color: var(--fore-link-alt);
+    }
+
+    .site-search-results .show-more:active {
+        transform: scale(0.98);
     }
 
     .result-wrapper mark,
@@ -96,36 +167,85 @@ const accelerator = new Accelerator(SITE);
     }
 
     .result-path {
-        display: none;
-    }
-
-    .result-path-icon {
-        stroke: var(--fore);
+        font-size: 0.85rem;
+        color: var(--fore-block);
+        opacity: 0.7;
+        margin-bottom: 0.25rem;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
     .result-path-segment:last-child {
         color: var(--fore-link);
+        font-weight: 600;
+    }
+
+    .result-path-icon {
+        stroke: var(--fore-block);
+        opacity: 0.5;
     }
 
     .result-title {
         color: var(--fore-link);
-        font-size: 1.5rem;
+        font-size: 1.35rem;
         font-weight: 700;
+        font-family: var(--heading-font);
+        line-height: 1.3;
+        margin-bottom: 0.5rem;
     }
 
     .result-description {
         color: var(--fore-block);
         font-size: 1rem;
         font-weight: 400;
+        font-family: var(--content-font);
         margin: 0;
+        line-height: 1.6;
     }
 
     .result-headings {
         list-style: none;
-        font-size: 1rem;
+        font-size: 0.95rem;
+        margin-top: 0.5rem;
+        padding-inline-start: 0;
+    }
+
+    .result-headings li {
+        padding: 0 0 calc(var(--paragraph-margin) / 2) 0;
+        list-style-type: '➜ ';
     }
 
-    .result-headings li:not(:last-child) {
-        text-align: left;
+    @media (max-width: 600px) {
+        .site-search-wrapper fieldset {
+            flex-direction: column;
+        }
+
+        .site-search-wrapper input {
+            width: unset;
+        }
+
+        .result-wrapper {
+            flex-direction: column;
+            gap: 1rem;
+        }
+
+        .result-image {
+            width: 100%;
+            height: auto;
+            max-height: 200px;
+        }
+
+        .site-search-wrapper button {
+            width: 100%;
+        }
+
+        .site-search-results li.site-search-results-item {
+            padding: 1rem;
+        }
+
+        .result-title {
+            font-size: 1.2rem;
+        }
     }
 </style>