astro-accelerator 5.9.21 → 5.10.1

package/public/css/vars.css

@@ -1,94 +1,113 @@
-/**
- * Recommended Tools
- *     Check accessibility for colour combinations
- *     https://toolness.github.io/accessible-color-matrix/
- *
- * @format
- */
-
-:root {
-    --fore: #333;
-    --fore-headings: #225;
-    --aft: #fbfbfc;
+@font-face {
+    font-family: "hyper-reg";
+    font-weight: normal;
+    font-style: normal;
+    src: url("AtkinsonHyperlegibleNext-Regular.otf");
+    font-display: block;
+}
 
-    --fore-link: #2d4295;
-    --fore-link-alt: #4d71ff;
-    --aft-link-alt: #f3f5ff;
+@font-face {
+    font-family: "hyper-bold";
+    font-weight: bold;
+    font-style: normal;
+    src: url("AtkinsonHyperlegibleNext-Bold.otf");
+    font-display: block;
+}
 
-    --fore-head: #333;
-    --aft-head: #e6e8f1;
-    --icon-head: #2d4295;
+@font-face {
+    font-family: "hyper-mono";
+    font-weight: bold;
+    font-style: normal;
+    src: url("AtkinsonHyperlegibleMono-Regular.otf");
+    font-display: block;
+}
 
-    --fore-breadcrumb: #333;
-    --aft-breadcrumb: #f3f5ff;
+:root {
+    --fore: #233;
+    --aft: #DFF;
+    --aft-image: #DFF;
 
-    --link-head: #2d4295;
-    --link-alt-head: #2a4dd8;
+    --fore-link: #355;
+    --fore-link-alt: #699;
+    --aft-link-alt: #e6e6eC;
+    
+    --fore-input: var(--fore);
+    --aft-input: var(--aft);
 
     --fore-block: #333;
-    --aft-block: #f3f5ff;
-    --icon-block: #4d71ff;
+    --aft-block: #BEE;
+    --icon-block: #FF0;
 
-    --fore-table-head: #fdfdfe;
-    --aft-table-head: #2f3141;
+    --fore-table-head: #DFF;
+    --aft-table-head: #233;
     --fore-table-row-odd: #333;
-    --aft-table-row-odd: #fdfdfe;
+    --aft-table-row-odd: #DFF;
     --fore-table-row-even: #333;
-    --aft-table-row-even: #f3f5ff;
+    --aft-table-row-even: #CFF;
+
+    --heading-font: 'hyper-bold', sans-serif;
+    --content-font: 'hyper-reg', Verdana, Geneva, sans-serif;
+    --code-font: 'hyper-mono', Consolas, 'Courier New', Courier, monospace;
+    --unicode-font: font-family: "Segoe UI Symbol", "Arial Unicode MS", "DejaVu Sans", "Meiryo UI", "MS UI Gothic", "Everson Mono Unicode", Meiryo, "MS Gothic", "MS Mincho", "MS PGothic", "MS PMincho", "Meslo LG L", "Meslo LG L DZ", "Meslo M L", "Meslo M L DZ", "Meslo S L", "Meslo S L DZ", "Symbola", "DejaVu Sans Condensed", "DejaVu Sans Mono", Code2000, "Everson Mono", Quivira, sans-serif;
 
-    --heading-font: Georgia, 'Times New Roman', Times, serif;
-    --content-font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    --code-font: Consolas, 'Courier New', Courier, monospace;
-    --unicode-font: 'Segoe UI Symbol', 'Arial Unicode MS', sans-serif;
+    --font-size-meta: 0.9rem;
+    --font-size-h1: 3rem;
+    --font-size-h2: 2.3rem;
+    --font-size-h3: 2rem;
+    --font-size-h4: 1.7rem;
+    --font-size-h5: 1.7rem;
+    --font-size-h6: 1.7rem;
 
+    --paragraph-margin: 1.2rem;
     --block-gap: 2rem;
+    --block-gap-l: 3rem;
     --block-radius: 0.3rem;
+    --block-radius-round: 20px;
 
     --marker-size: 1.2rem;
-    --paragraph-margin: 1.2rem;
 
-    --box-shadow: 0 12px 24px -12px rgb(0 0 0 / 80%);
+    --box-shadow: 0 12px 24px -12px rgb(0 0 0 / 50%);
     --box-shadow-slight: 0 6px 12px -6px rgb(0 0 0 / 40%);
 
-    --content-width: 78vw;
-    --navigation-width: 260px;
-    --grid-gap: 1.5rem;
-    --grid-max-width: 60rem;
-    --grid-width: 90vw;
+    --box-shadow-unselected: rgb(0 0 0 / 6%) 0px 2px 4px, rgb(0 0 0 / 5%) 0px 0.5px 1px;
+    --transform-selected: translate3d(0px, -1px, 0px);
+
+    --content-width: 50rem;
+    --navigation-width: 300px;
+    --grid-gap: 1rem;
+    --grid-gap-s: 0.4rem;
+
+    /* Calculate the mobile width by removing l/r columns */
+    --content-width-mobile: calc(100vw - 1rem);
 
-    /* Calculate the mobile width by removing l/r columns and grid gap */
-    --content-width-mobile: calc(100vw - (1rem * 2));
+    /* Search variables */
+    --search-height: 2rem;
+    --search-dropdown-height: 65vh;
+    --search-dropdown-duration: 0.2s;
 }
 
 @media (prefers-color-scheme: dark) {
     :root {
-        --fore: #ccc;
-        --fore-headings: #cce;
-        --aft: #333;
-
-        --fore-link: #abb9ef;
-        --fore-link-alt: #abb9ef;
+        --fore: #DFF;
+        --aft: #233;
+        --aft-image: #DDD;
+    
+        --fore-link: #AFF;
+        --fore-link-alt: #FF0;
         --aft-link-alt: #232323;
 
-        --fore-head: #ccc;
-        --aft-head: #222;
-        --icon-head: #abb9ef;
-
-        --fore-breadcrumb: #ccc;
-        --aft-breadcrumb: #2c2c2c;
-
-        --link-head: #abb9ef;
-        --link-alt-head: #6580ed;
+        --fore-input: #var(--fore);
+        --aft-input: var(--aft);
 
-        --fore-block: #ccc;
-        --aft-block: #111;
-        --icon-block: #abb9ef;
+        --fore-block: #DFF;
+        --aft-block: #011;
+        --icon-block: #FF0;
 
-        --fore-table-head: #ccc;
-        --aft-table-head: #222;
-        --fore-table-row-odd: #ccc;
-        --aft-table-row-odd: #333;
-        --fore-table-row-even: #ccc;
-        --aft-table-row-even: #444;
+        --fore-table-head: #DFF;
+        --aft-table-head: #244; 
+        --fore-table-row-odd: #DFF;
+        --aft-table-row-odd: #355;
+        --fore-table-row-even: #DFF;
+        --aft-table-row-even: #466;
     }
 }

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 },
@@ -45,8 +50,7 @@ const SITE: Site = {
     },
     images: {
         // Generated using https://ausi.github.io/respimagelint/
-        contentSize:
-            '(min-width: 1280px) 668px, (min-width: 880px) calc(72.11vw - 241px), calc(100vw - 64px)',
+        contentSize: '(min-width: 1280px) 668px, (min-width: 880px) calc(72.11vw - 241px), calc(100vw - 64px)',
         listerSize:
             '(min-width: 1300px) 350px, (min-width: 880px) calc(34.25vw - 88px), (min-width: 700px) 50vw, calc(100vw - 32px)',
         authorSize: '50px',
@@ -62,7 +66,9 @@ const OPEN_GRAPH = {
 };
 
 const HEADER_SCRIPTS = `
-<!-- HEADER SCRIPTS -->
+<meta name="copyright" content="Steve Fenton">
+<link rel="preload" href="/css/AtkinsonHyperlegibleNext-Bold.otf" as="font" crossorigin>
+<link rel="preload" href="/css/AtkinsonHyperlegibleNext-Regular.otf" as="font" crossorigin>
 `.trim();
 
 export { SITE, OPEN_GRAPH, HEADER_SCRIPTS };

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;
+    };
+}