astro-accelerator 0.0.111 → 0.3.0

package/astro.config.mjs

@@ -17,6 +17,6 @@ export default defineConfig({
         ],
         extendDefaultPlugins: true,
         trailingSlash: 'always',
-        server: { port: 3000, host: true},
     },
+    server: { port: 3000, host: true},
 });

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.111",
+  "version": "0.3.0",
   "author": "Steve Fenton",
   "name": "astro-accelerator",
   "description": "A super-lightweight, accessible, SEO-friendly starter project for Astro",
@@ -25,15 +25,15 @@
     "dts": "tsc ./tests/locate-content.js ./tests/locate-navigation.js ./tests/locate-search.js --allowJs --declaration --emitDeclarationOnly"
   },
   "dependencies": {
-    "@astrojs/mdx": "^0.19.7",
-    "astro": "^2.10.1",
-    "astro-accelerator-utils": "^0.2.38",
-    "csv": "^6.3.1",
+    "@astrojs/mdx": "^1.0.0",
+    "astro": "^3.0.0",
+    "astro-accelerator-utils": "^0.2.39",
+    "csv": "^6.3.3",
     "hast-util-from-selector": "^3.0.0",
     "html-to-text": "^9.0.5",
     "keyword-extractor": "^0.0.25",
     "remark-directive": "^2.0.1",
-    "sharp": "^0.32.4"
+    "sharp": "^0.32.5"
   },
   "devDependencies": {
     "@playwright/test": "^1.36.2"

package/public/css/main.css

@@ -616,7 +616,7 @@ form.site-search label > * {
     padding: 0.2em;
 }
 
-form.site-search button {
+form.site-search #site-search-button {
     display: none;
 }
 
@@ -676,6 +676,39 @@ form.site-search button {
     }    
 }
 
+/* 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);
+}
+
+.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);
+}
+
+@media (max-width: 860px) {
+    .search-dialog {
+        height: calc(100vh - 4em);
+        width: calc(100vw - 6em);
+    }
+}
+
 /* Articles */
 
 .post-list {

package/public/js/main.js

@@ -59,3 +59,8 @@ if (enabled(f.headers, 'link')) {
     const headers = await import('./modules/headers.js');
     headers.enhanceHeaders();
 }
+
+if (enabled(f.search, 'dialog')) {
+    const searchDialog = await import ('./modules/search-dialog.js');
+    searchDialog.enhanceSearchIcon();
+}

package/public/js/modules/search-dialog.js

@@ -0,0 +1,55 @@
+// @ts-check
+
+function enhanceSearchIcon() {
+    if (document.querySelector('#site-search-query') == null) {
+        const icon = document.querySelector('a.search-icon');
+
+        if (icon != null) {
+            fetch(icon.href)
+                .then(response => response.text())
+                .then(html => {
+                    const parser = new DOMParser();
+                    const doc = parser.parseFromString(html, 'text/html');
+                    const form = doc.querySelector('#site-search');
+                    const input = form.querySelector('#site-search-query');
+                    const results = doc.querySelector('#site-search-results');
+
+                    
+                    input?.setAttribute('autofocus', 'autofocus');
+
+                    const close = document.createElement('button');
+                    close.id = 'site-search-close';
+                    close.value = 'cancel';
+                    close.formMethod = 'dialog';
+                    close.innerHTML = `<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="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                    </svg>`;
+                    close.addEventListener('click', () => dialog.close());
+
+                    const script = doc.querySelector('script[src*="/search.js"]');
+                    const scr = document.createElement('script');
+                    for (let att, i = 0, atts = script.attributes, n = atts.length; i < n; i++){
+                        att = atts[i];
+                        scr.setAttribute(att.nodeName, att.nodeValue ?? '');
+                    }
+
+                    const dialog = document.createElement('dialog');
+                    dialog.className = 'search-dialog';
+                    dialog.append(close, form, results);
+                    
+                    document.body.appendChild(dialog);
+                    document.body.appendChild(scr);
+
+                    icon.addEventListener('click', (e) => {
+                        e.preventDefault();
+                        dialog.showModal();
+                        return false;
+                    })
+                });
+        }
+    }
+}
+
+export { enhanceSearchIcon };

package/public/js/search.js

@@ -247,8 +247,6 @@ function search(s, r) {
         return;
     }
 
-    raiseEvent('searched', { search: s });
-
     currentQuery = cleanQuery;
     /** @type {string[]} */
     const stemmedTerms = [];
@@ -447,6 +445,7 @@ function search(s, r) {
 
     const address = window.location.href.split('?')[0];
     window.history.pushState({}, '', address + '?q=' + encodeURIComponent(cleanQuery));
+    raiseEvent('searched', { search: s });
 }
 
 /** @type {Number} */

package/src/config.ts

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

package/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

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

@@ -54,7 +54,7 @@ stats.stop();
       </time>
       {frontmatter.modDate &&
       <br /><time datetime={ frontmatter.modDate.toString() } itemprop="dateModified">
-        { _(Translations.post.last_modified) } { accelerator.dateFormatter.formatDate(frontmatter.modDate, lang) }
+        { _(Translations.post.last_modified) + ' ' + accelerator.dateFormatter.formatDate(frontmatter.modDate, lang) }
       </time>
       }{authorList.mainAuthor &&
         <p>{ authorList.mainAuthor.frontmatter.description }</p>