astro-accelerator 0.0.45 → 0.0.47

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.45",
+  "version": "0.0.47",
   "author": "Steve Fenton",
   "name": "astro-accelerator",
   "description": "A super-lightweight, accessible, SEO-friendly starter project for Astro",
@@ -25,13 +25,13 @@
   },
   "dependencies": {
     "@squoosh/lib": "^0.4.0",
-    "astro": "^1.6.13",
-    "astro-accelerator-utils": "^0.2.10",
+    "astro": "^1.6.14",
+    "astro-accelerator-utils": "^0.2.12",
     "hast-util-from-selector": "^2.0.0",
     "remark-directive": "^2.0.1"
   },
   "devDependencies": {
-    "@playwright/test": "^1.27.1"
+    "@playwright/test": "^1.28.1"
   },
   "engines": {
     "node": "*"

package/public/css/main.css

@@ -44,7 +44,7 @@ summary:focus {
     background-color: var(--aft-link-alt);
 }
 
-:focus {
+.input-keyboard :focus {
     outline: 2px dashed var(--fore-link-alt);
     border-radius: 5px;
 }
@@ -597,7 +597,7 @@ form.site-search {
 
 form.site-search div {
     display: grid;
-    grid-template-columns: repeat(3, auto);
+    grid-template-columns: fit-content(400px) auto 30px;
     gap: 1em;
 }
 
@@ -733,13 +733,13 @@ form.site-search button {
 
 .post-meta {
     display: flex;
-    align-items: center;
+    align-items: top;
 }
 
 .post-meta .author-image {
-    width: 50px;
+    width: 80px;
+    height: 80px;
     margin-right: 1rem;
-    aspect-ratio: 1/1;
     object-fit: cover;
 }
 

package/public/js/main.js

@@ -5,6 +5,7 @@ import { addStickyNavigation } from './modules/nav-sticky.js';
 import { addMobileNav } from './modules/nav-mobile.js';
 import { setClickableBlocks } from './modules/click-blocks.js';
 import { setExternalLinkAttributes } from './modules/external-links.js';
+import { monitorInputType } from './modules/input-type.js';
 
 const resizedEventName = addResizedEvent();
 
@@ -14,6 +15,7 @@ addStickyNavigation('.site-header', '#site-nav', '#site-nav > ul', resizedEventN
 addMobileNav(resizedEventName);
 addIntersectionObserver('.anim-show-parent img, .anim-show-parent > *:not(h1, h2, h3, h4, h5, h6)');
 addListImageIntersectionObserver('.post-list img');
+monitorInputType();
 
 // @ts-ignore
 const f = site_features ?? {};

package/public/js/modules/input-type.js

@@ -0,0 +1,53 @@
+// @ts-check
+
+let inputType = 'unknown';
+
+/**
+ * Sets the user input mode as a class
+ */
+function monitorInputType() {
+    window.addEventListener('keydown', event => {
+        const eventType = 'input-keyboard';
+        processInput(eventType);
+    });
+
+    window.addEventListener('mousemove', event => {
+        const eventType = 'input-mouse';
+        processInput(eventType);
+    });
+
+    window.addEventListener('touchstart', event => {
+        const eventType = 'input-touch';
+        processInput(eventType);
+    });
+}
+
+/**
+ * Processes the keyboard, mouse, or touch event
+ * @param {string} eventType 
+ */
+function processInput(eventType) {
+    if (inputType !== eventType) {
+        removeClass(inputType);
+        inputType = eventType;
+        addClass(inputType);
+    }
+}
+
+/**
+ * Removes an input type class from the body
+ * @param {string} inputType 
+ */
+function removeClass(inputType) {
+    document.body.classList.remove(inputType);
+}
+
+/**
+ * Adds an input type class to the body
+ * @param {string} inputType 
+ */
+function addClass(inputType) {
+    document.body.classList.add(inputType);
+}
+
+export { monitorInputType };

package/src/config.ts

@@ -35,6 +35,9 @@ const SITE: Site = {
 		figures: ['enlarge'],
 		youTubeLinks: ['embed'],
 	},
+	layouts: {
+		default: 'src/layouts/Default.astro'
+	},
 	images: {
 		contentSize: '(max-width: 860px) 100vw, 620px',
 		listerSize: '(max-width: 860px) 90vw, 350px',

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

@@ -49,6 +49,8 @@ const authorImage = authorList?.image?.src
       <br /><time datetime={ frontmatter.modDate.toString() } itemprop="dateModified">
         { _(Translations.post.last_modified) } { accelerator.dateFormatter.formatDate(frontmatter.modDate, lang) }
       </time>
+      }{authorList.mainAuthor &&
+        <p>{ authorList.mainAuthor.frontmatter.description }</p>
       }
     </span>
   </div>

package/src/themes/accelerator/layouts/Default.astro

@@ -51,8 +51,8 @@ const site_features = SITE.featureFlags;
                     </header>
                     <div class="page-content anim-show-parent" itemprop="articleBody">
                         <TableOfContents frontmatter={ frontmatter } headings={ headings } lang={ lang } />
-                        <Authors frontmatter={ frontmatter } lang={ lang } />
                         <slot />
+                        <Authors frontmatter={ frontmatter } lang={ lang } />
                         <Taxonomy frontmatter={ frontmatter } lang={ lang } />
                         <Related frontmatter={ frontmatter } headings={ headings } lang={ lang } />
                     </div>