astro-accelerator 5.9.21 → 5.10.0

package/astro.config.mjs

@@ -3,6 +3,7 @@
 import mdx from '@astrojs/mdx';
 import remarkDirective from 'remark-directive';
 import { defineConfig } from 'astro/config';
+import { readingTime } from '/src/themes/accelerator/utilities/reading-time.mjs';
 import { defaultLayout } from '/src/themes/accelerator/utilities/default-layout.mjs';
 import {
     attributeMarkdown,
@@ -19,6 +20,7 @@ export default defineConfig({
             remarkDirective,
             attributeMarkdown,
             wrapTables,
+            readingTime,
         ],
         closeSelfClosing: false,
         extendDefaultPlugins: true,

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "5.9.21",
+    "version": "5.10.0",
     "author": "Steve Fenton",
     "name": "astro-accelerator",
     "description": "A super-lightweight, accessible, SEO-friendly starter project for Astro",
@@ -35,8 +35,8 @@
     "dependencies": {
         "@astrojs/mdx": "^4.3.4",
         "@img/sharp-linux-x64": "^0.34.3",
-        "astro": "^5.13.4",
-        "astro-accelerator-utils": "^0.3.52",
+        "astro": "^5.13.5",
+        "astro-accelerator-utils": "^0.3.53",
         "cspell": "^8.19.4",
         "csv": "^6.4.1",
         "glob": "^11.0.3",

package/public/css/main.css

@@ -821,9 +821,22 @@ nav.site-nav h2 {
 
 .post-meta > .author-info {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
 }
 
+.post-meta.mini > .author-info > *:nth-child(n + 3)::before {
+    content: '|';
+    padding: 0 0.3rem;
+    opacity: 0.5;
+}
+
+.post-meta.mini > .author-info > .author-image {
+    height: 1rem;
+    width: 1rem;
+    margin: 0 0.3rem 0 0;
+}
+
 .post-meta time[itemprop='datePublished'] {
     display: inline-block;
 }

package/src/config.ts

@@ -33,6 +33,11 @@ const SITE: Site = {
         month: 'long',
         day: 'numeric',
     },
+    shortDateOptions: {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+    },
     cacheMaxAge: 200,
     featureFlags: {
         stickyNav: { top: 100 },

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

@@ -4,16 +4,20 @@
 import { Accelerator } from 'astro-accelerator-utils';
 import type { Frontmatter } from 'astro-accelerator-utils/types/Frontmatter';
 import { SITE } from '@config';
-import { Translations, Lang } from '@util/Languages';;
+import { Translations, Lang } from '@util/Languages';
+import { getImageInfo } from '@util/custom-markdown.mjs';
+import ReadingTime from '@components/ReadingTime.astro';
 
 const accelerator = new Accelerator(SITE);
-const stats = new accelerator.statistics('accelerator/components/AuthorsMini.astro');
+const stats = new accelerator.statistics(
+    'accelerator/components/AuthorsMini.astro'
+);
 stats.start();
 
 // Properties
 type Props = {
-  lang: string;
-  frontmatter: Frontmatter;
+    lang: string;
+    frontmatter: Frontmatter;
 };
 const { lang, frontmatter } = Astro.props satisfies Props;
 
@@ -22,29 +26,63 @@ const _ = Lang(lang);
 
 // Logic
 const authorList = accelerator.authors.forPost(frontmatter);
+const dateToShow =
+    frontmatter.modDate == null ? frontmatter.pubDate : frontmatter.modDate;
+
+// Get image info
+const authorImage = authorList?.image?.src
+    ? getImageInfo(authorList.image.src, 'author-image', SITE.images.authorSize)
+    : null;
 
 stats.stop();
 ---
-{authorList.writers.length > 0 && 
-<div class="post-meta">
-  <div class="author-info">
-    <span>{ _(Translations.post.written_by) + ' ' }
-      {authorList.mainAuthor &&
-        <span>{ authorList.mainAuthor.frontmatter.title }</span>
-      }{authorList.contributors.map((writer) => (
-        <span>, </span><span>{ writer.frontmatter.title }</span>
-      ))}<br />
-      {frontmatter.modDate == null && 
-      <time datetime={ frontmatter.pubDate.toString() }>
-      { accelerator.dateFormatter.formatDate(frontmatter.pubDate, lang) }
-      </time>
-      }
-      {frontmatter.modDate != null &&
-      <time datetime={ frontmatter.modDate.toString() }>
-      { accelerator.dateFormatter.formatDate(frontmatter.modDate, lang) }
-      </time>
-      }
-    </span>
-  </div>
-</div>
+
+{
+    authorList.writers.length > 0 && (
+        <div class="post-meta mini">
+            <div class="author-info">
+                {authorImage && (
+                    <img
+                        srcset={authorImage.srcset}
+                        sizes={authorImage.sizes}
+                        src={authorImage.src}
+                        alt={authorList?.image?.alt}
+                        class={authorImage.class}
+                        width={authorImage.metadata?.width}
+                        height={authorImage.metadata?.height}
+                    />
+                )}
+                {authorList.mainAuthor && (
+                    <a
+                        href={
+                            accelerator.urlFormatter.formatAddress(
+                                authorList.mainAuthor.url
+                            ) + '1/'
+                        }
+                        class="author-name">
+                        {authorList.mainAuthor.frontmatter.title}
+                    </a>
+                )}
+                {authorList.contributors.map((writer) => (
+                    <a
+                        href={
+                            accelerator.urlFormatter.formatAddress(writer.url) +
+                            '1/'
+                        }
+                        class="contributor-name">
+                        {writer.frontmatter.title}
+                    </a>
+                ))}
+                <time
+                    class="post-date"
+                    datetime={dateToShow.toString()}
+                    set:html={accelerator.dateFormatter.formatShortDate(
+                        dateToShow,
+                        lang
+                    )}
+                />
+                <ReadingTime lang={lang} frontmatter={frontmatter} />
+            </div>
+        </div>
+    )
 }

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

@@ -0,0 +1,44 @@
+---
+// warning: This file is overwritten by Astro Accelerator
+
+import { Accelerator } from 'astro-accelerator-utils';
+import type { Frontmatter } from 'astro-accelerator-utils/types/Frontmatter';
+import { SITE } from '@config';
+import { Translations, Lang } from '@util/Languages';
+
+const accelerator = new Accelerator(SITE);
+const stats = new accelerator.statistics(
+    'accelerator/components/ReadingTime.astro'
+);
+stats.start();
+
+// Properties
+type Props = {
+    lang: string;
+    frontmatter: Frontmatter;
+};
+const { lang, frontmatter } = Astro.props satisfies Props;
+
+// Language
+const _ = Lang(lang);
+
+// Logic
+const readingTimeText =
+    frontmatter?.readingTime === 1
+        ? _(Translations.post.reading_time_one_minute).replace(
+              '{n}',
+              frontmatter.readingTime
+          )
+        : _(Translations.post.reading_time_many_minutes).replace(
+              '{n}',
+              frontmatter.readingTime
+          );
+
+stats.stop();
+---
+
+{
+    frontmatter?.readingTime && (
+        <span class="reading-time" set:html={readingTimeText} />
+    )
+}

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

@@ -1,116 +1,135 @@
 ---
 // warning: This file is overwritten by Astro Accelerator
 
-import { Accelerator, PostFiltering } 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";
-import Footer from "@components/Footer.astro";
-import Copyright from "@components/Copyright.astro";
-import SkipLinks from "@components/SkipLinks.astro";
-import Breadcrumbs from "@components/Breadcrumbs.astro";
-import Navigation from "@components/Navigation.astro";
-import TableOfContents from "@components/TableOfContents.astro";
-import Authors from "@components/Authors.astro";
-import Taxonomy from "@components/Taxonomy.astro";
-import Related from "@components/Related.astro";
+import { Accelerator, PostFiltering } 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';
+import Footer from '@components/Footer.astro';
+import Copyright from '@components/Copyright.astro';
+import SkipLinks from '@components/SkipLinks.astro';
+import Breadcrumbs from '@components/Breadcrumbs.astro';
+import Navigation from '@components/Navigation.astro';
+import TableOfContents from '@components/TableOfContents.astro';
+import Authors from '@components/Authors.astro';
+import AuthorsMini from '@components/AuthorsMini.astro';
+import Taxonomy from '@components/Taxonomy.astro';
+import Related from '@components/Related.astro';
 
 const accelerator = new Accelerator(SITE);
-const stats = new accelerator.statistics("accelerator/layouts/Default.astro");
+const stats = new accelerator.statistics('accelerator/layouts/Default.astro');
 stats.start();
 
 type Props = {
-  frontmatter: Frontmatter;
-  headings: { depth: number; slug: string; text: string }[];
-  breadcrumbs?: { url: string; title: string; ariaCurrent?: string }[] | null;
+    frontmatter: Frontmatter;
+    headings: { depth: number; slug: string; text: string }[];
+    breadcrumbs?: { url: string; title: string; ariaCurrent?: string }[] | null;
 };
-const { frontmatter, headings, breadcrumbs } = Astro.props satisfies Props;
+const { frontmatter, headings, breadcrumbs, data } =
+    Astro.props satisfies Props;
 
 const lang = frontmatter.lang ?? SITE.default.lang;
 const textDirection = frontmatter.dir ?? SITE.default.dir;
 
 // Logic
 const metaImage = frontmatter.bannerImage
-  ? getImageInfo(frontmatter.bannerImage.src, "", SITE.images.contentSize)
-  : null;
+    ? getImageInfo(frontmatter.bannerImage.src, '', SITE.images.contentSize)
+    : null;
 
 const title = await accelerator.markdown.getInlineHtmlFrom(
-  frontmatter.title ?? SITE.title
+    frontmatter.title ?? SITE.title
 );
 const subtitle = frontmatter.subtitle
-  ? await accelerator.markdown.getInlineHtmlFrom(frontmatter.subtitle)
-  : null;
+    ? await accelerator.markdown.getInlineHtmlFrom(frontmatter.subtitle)
+    : null;
 
 const site_url = SITE.url;
 const site_features = SITE.featureFlags;
 const search =
-  accelerator.posts.all().filter(PostFiltering.isSearch).shift() ?? null;
+    accelerator.posts.all().filter(PostFiltering.isSearch).shift() ?? null;
 const searchUrl = search && accelerator.urlFormatter.formatAddress(search.url);
 const isSearchPage =
-  accelerator.urlFormatter.formatAddress(Astro.url.pathname) === searchUrl;
+    accelerator.urlFormatter.formatAddress(Astro.url.pathname) === searchUrl;
 const showSearch = !isSearchPage;
 
 stats.stop();
 ---
 
 <html dir={textDirection} lang={lang} class="initial">
-  <Head frontmatter={frontmatter} headings={headings} lang={lang} />
-  <body>
-    <SkipLinks frontmatter={frontmatter} headings={headings} lang={lang} />
-    <Header
-      frontmatter={frontmatter}
-      headings={headings}
-      lang={lang}
-      showSearch={showSearch}
-    />
-    <Breadcrumbs
-      frontmatter={frontmatter}
-      headings={headings}
-      lang={lang}
-      breadcrumbs={breadcrumbs}
-    />
-    <div class="content-group">
-      <main id="site-main">
-        <article itemscope itemtype="https://schema.org/Article">
-          <header>
-            <h1 itemprop="name headline"><Fragment set:html={title} /></h1>
-            {
-              subtitle && (
-                <p>
-                  <Fragment set:html={subtitle} />
-                </p>
-              )
-            }
-          </header>
-          <div class="page-content anim-show-parent" itemprop="articleBody">
-            <TableOfContents
-              frontmatter={frontmatter}
-              headings={headings}
-              lang={lang}
+    <Head frontmatter={frontmatter} headings={headings} lang={lang} />
+    <body>
+        <SkipLinks frontmatter={frontmatter} headings={headings} lang={lang} />
+        <Header
+            frontmatter={frontmatter}
+            headings={headings}
+            lang={lang}
+            showSearch={showSearch}
+        />
+        <Breadcrumbs
+            frontmatter={frontmatter}
+            headings={headings}
+            lang={lang}
+            breadcrumbs={breadcrumbs}
+        />
+        <div class="content-group">
+            <main id="site-main">
+                <article itemscope itemtype="https://schema.org/Article">
+                    <header>
+                        <h1 itemprop="name headline">
+                            <Fragment set:html={title} />
+                        </h1>
+                        {
+                            subtitle && (
+                                <p>
+                                    <Fragment set:html={subtitle} />
+                                </p>
+                            )
+                        }
+                    </header>
+                    <div
+                        class="page-content anim-show-parent"
+                        itemprop="articleBody">
+                        <AuthorsMini frontmatter={frontmatter} lang={lang} />
+                        <TableOfContents
+                            frontmatter={frontmatter}
+                            headings={headings}
+                            lang={lang}
+                        />
+                        <slot />
+                        <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>
+            <Navigation lang={lang} />
+        </div>
+        <Footer frontmatter={frontmatter} headings={headings} lang={lang}>
+            <Copyright
+                frontmatter={frontmatter}
+                headings={headings}
+                lang={lang}
             />
-            <slot />
-            <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>
-      <Navigation lang={lang} />
-    </div>
-    <Footer frontmatter={frontmatter} headings={headings} lang={lang}>
-      <Copyright frontmatter={frontmatter} headings={headings} lang={lang} />
-    </Footer>
-    <script define:vars={{ site_url, site_features }}>
-      window.site_url = site_url;
-      window.site_features = site_features;
-    </script>
-    <script src={SITE.subfolder + "/js/main.js"} type="module" async></script>
-  </body>
+        </Footer>
+        <script define:vars={{ site_url, site_features }}>
+            window.site_url = site_url;
+            window.site_features = site_features;
+        </script>
+        <script src={SITE.subfolder + '/js/main.js'} type="module" async
+        ></script>
+    </body>
 </html>

package/src/themes/accelerator/utilities/language.json

@@ -62,6 +62,12 @@
         },
         "last_modified": {
             "en": "Revised"
+        },
+        "reading_time_one_minute": {
+            "en": "{n} min read"
+        },
+        "reading_time_many_minutes": {
+            "en": "{n} min read"
         }
     },
     "author": {

package/src/themes/accelerator/utilities/reading-time.mjs

@@ -0,0 +1,18 @@
+/** @format */
+
+import { toString } from 'mdast-util-to-string';
+
+/**
+ * Remark plugin for calculating reading time
+ */
+export function readingTime() {
+    return function (tree, { data }) {
+        const wordsPerMinute = 200;
+        const textOnPage = toString(tree);
+        const readingTime = Math.ceil(
+            textOnPage.split(' ').length / wordsPerMinute
+        );
+
+        data.astro.frontmatter.readingTime = readingTime;
+    };
+}