astro-accelerator 0.0.46 → 0.0.48

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.46",
+  "version": "0.0.48",
   "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;
 }

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

@@ -38,9 +38,9 @@ const authorImage = authorList?.image?.src
   <div class="author-info">
     <span class="author-list">{ _(Translations.post.written_by) }
       {authorList.mainAuthor &&
-        <a href={ accelerator.urlFormatter.addSlashToAddress(authorList.mainAuthor.url) + '1/' } itemprop="author">{ authorList.mainAuthor.frontmatter.title }</a>
+        <span itemprop="author" itemscope itemtype="https://schema.org/Person"><a href={ accelerator.urlFormatter.addSlashToAddress(authorList.mainAuthor.url) + '1/' } itemprop="url"><span itemprop="name">{ authorList.mainAuthor.frontmatter.title }</span></a></span>
       }{authorList.contributors.map((writer) => (
-        <span>, </span><a href={ accelerator.urlFormatter.addSlashToAddress(writer.url) + '1/' } itemprop="contributor">{ writer.frontmatter.title }</a>
+        <span>, </span><span itemprop="contributor" itemscope itemtype="https://schema.org/Person"><a href={ accelerator.urlFormatter.addSlashToAddress(writer.url) + '1/' } itemprop="url"><span itemprop="name">{ writer.frontmatter.title }</span></a></span>
       ))}
       <br /><time datetime={ frontmatter.pubDate.toString() } itemprop="datePublished">
       { accelerator.dateFormatter.formatDate(frontmatter.pubDate, lang) }

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

@@ -1,6 +1,7 @@
 ---
 import { Accelerator } from 'astro-accelerator-utils';
 import type { Frontmatter } from 'astro-accelerator-utils/types/Frontmatter';
+import { getImageInfo } from '@util/custom-markdown.mjs';
 import { SITE } from '@config';
 import Head from '@components/HtmlHead.astro';
 import Header from '@components/Header.astro';
@@ -25,6 +26,10 @@ const textDirection = frontmatter.dir ?? SITE.default.dir;
 // Logic
 const accelerator = new Accelerator(SITE);
 
+const metaImage = frontmatter.bannerImage
+      ? getImageInfo(frontmatter.bannerImage.src, '', SITE.images.contentSize)
+      : null
+
 const title = await accelerator.markdown.getInlineHtmlFrom(frontmatter.title ?? SITE.title);
 const subtitle = frontmatter.subtitle
     ? await accelerator.markdown.getInlineHtmlFrom(frontmatter.subtitle)
@@ -55,6 +60,7 @@ const site_features = SITE.featureFlags;
                         <Authors frontmatter={ frontmatter } lang={ lang } />
                         <Taxonomy frontmatter={ frontmatter } lang={ lang } />
                         <Related frontmatter={ frontmatter } headings={ headings } lang={ lang } />
+                        {metaImage && <meta itemprop="image" content={ metaImage.src } />}
                     </div>
                 </article>
             </main>