astro-accelerator 4.1.5 → 4.1.7

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "4.1.5",
+    "version": "4.1.7",
     "author": "Steve Fenton",
     "name": "astro-accelerator",
     "description": "A super-lightweight, accessible, SEO-friendly starter project for Astro",
@@ -32,9 +32,9 @@
     },
     "dependencies": {
         "@astrojs/mdx": "^2.3.1",
-        "astro": "^4.16.6",
-        "astro-accelerator-utils": "^0.3.25",
-        "cspell": "^8.15.4",
+        "astro": "^4.16.8",
+        "astro-accelerator-utils": "^0.3.26",
+        "cspell": "^8.15.7",
         "csv": "^6.3.10",
         "glob": "^11.0.0",
         "hast-util-from-selector": "^3.0.0",
@@ -45,7 +45,7 @@
         "sharp": "^0.33.5"
     },
     "devDependencies": {
-        "@playwright/test": "^1.48.1"
+        "@playwright/test": "^1.48.2"
     },
     "files": [
         ".npmrc",

package/public/css/main.css

@@ -774,7 +774,8 @@ nav.site-nav h2 {
     background-color: initial;
 }
 
-.result-wrapper mark {
+.result-wrapper mark,
+.result-headings mark {
     background-color: var(--aft-mark);
 }
 
@@ -874,26 +875,15 @@ nav.site-nav h2 {
     cursor: pointer;
 }
 
-.result-headings li {
-    display: none;
-}
-
-.result-headings li:nth-child(-n + 3) {
-    display: block;
-}
-
-.result-headings:has(li:nth-child(n + 4))::after {
-    content: 'See more >';
-    color: var(--fore-link);
-    text-decoration: underline;
-}
-
-.result-headings:focus-within li {
-    display: block;
+.result-headings {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
 }
 
-.result-headings:focus-within::after {
-    display: none;
+.result-headings li {
+    text-align: left;
+    padding: 0.1rem 3.6rem;
+    font-size: 1rem;
 }
 
 .show-more {

package/public/js/search.js

@@ -72,6 +72,7 @@ function initializeSearch() {
     var currentQuery = '';
     var dataUrl = siteSearchElement.dataset.sourcedata;
 
+    // Legacy scoring
     var scoring = {
         depth: 5,
         phraseTitle: 60,
@@ -84,6 +85,14 @@ function initializeSearch() {
         termKeywords: 15,
     };
 
+    // Found word scoring
+    const scores = {
+        titleExact: 20,
+        titleContains: 15,
+        headingContains: 10,
+        contentContains: 1,
+    };
+
     var ready = false;
     var scrolled = false;
 
@@ -246,6 +255,7 @@ function initializeSearch() {
     /**
      * Replaces synonyms
      * @param {string[]} queryTerms
+     * @returns {Promise<string[]>}
      */
     async function replaceSynonyms(queryTerms) {
         const synonyms = await getSynonyms();
@@ -253,11 +263,17 @@ function initializeSearch() {
         for (let i = 0; i < queryTerms.length; i++) {
             const term = queryTerms[i];
             if (synonyms[term] != null) {
-                queryTerms.push(synonyms[term]);
+                if (synonyms[term].length === 0) {
+                    // @ts-ignore
+                    queryTerms[i] = null;
+                } else {
+                    queryTerms.push(synonyms[term]);
+                }
             }
         }
 
-        return queryTerms;
+        console.log('Post-synonym', queryTerms);
+        return queryTerms.filter((qt) => qt != null);
     }
 
     /**
@@ -314,12 +330,12 @@ function initializeSearch() {
 
                 // Title
                 if (item.safeTitle === currentQuery) {
-                    item.foundWords += 2;
+                    item.foundWords += scores.titleExact;
                 }
 
                 if (contains(item.safeTitle, currentQuery)) {
                     item.score = item.score + scoring.phraseTitle;
-                    item.foundWords += 2;
+                    item.foundWords += scores.titleContains;
                 }
 
                 // Headings
@@ -327,14 +343,14 @@ function initializeSearch() {
                     if (contains(c.safeText, currentQuery)) {
                         item.score = item.score + scoring.phraseHeading;
                         item.matchedHeadings.push(c);
-                        item.foundWords++;
+                        item.foundWords += scores.headingContains;
                     }
                 });
 
                 // Description
                 if (contains(item.description, currentQuery)) {
                     item.score = item.score + scoring.phraseDescription;
-                    item.foundWords++;
+                    item.foundWords += scores.contentContains;
                 }
 
                 // Part 2 - Term Matches, i.e. "Kitchen" or "Sink"

package/public/js/search2.js

@@ -0,0 +1,676 @@
+/**
+ * This javascript file comes from Astro Accelerator
+ * Edits will be overwritten if you change the file locally
+ * THIS IS THE PREVIOUS SEARCH VERSION
+ *
+ * @format
+ */
+
+// @ts-check
+
+import { qs } from './modules/query.js';
+import { raiseEvent } from './modules/events.js';
+import { removeScroll, resetScroll } from './modules/scrollbar.js';
+import { contains, sanitise, explode, highlight } from './modules/string.js';
+import { stemmer } from './modules/stemmer.js';
+
+// @ts-ignore
+const f = window.site_features ?? {};
+
+/**
+ *
+ * @param {string[]} settings
+ * @param {string} option
+ * @returns
+ */
+function enabled(settings, option) {
+    return settings && settings.includes(option);
+}
+
+/**
+@typedef {
+    {
+        text: string;
+        safeText: string;
+        slug: string;
+    }
+} Heading
+
+@typedef {
+    {
+        foundWords: number;
+        score: number;
+        depth: number;
+        title: string;
+        keywords: string;
+        safeTitle: string;
+        description: string;
+        safeDescription: string;
+        headings: Heading[];
+        tags: string[];
+        url: string;
+        date: string;
+        matchedHeadings: Heading[];
+    }
+}  SearchEntry
+
+@typedef {
+    {
+        [ix: string]: string
+    }
+} Synonyms
+ */
+
+function initializeSearch() {
+    const siteSearchInput = qs('[data-site-search-query]');
+    const siteSearchWrapper = qs('[data-site-search-wrapper]');
+    const siteSearchElement = qs('[data-site-search]');
+    const siteSearchResults = qs('[data-site-search-results');
+    const removeSearchButton = qs('[data-site-search-remove]');
+
+    /** @type {SearchEntry[]} */
+    var haystack = [];
+    var currentQuery = '';
+    var dataUrl = siteSearchElement.dataset.sourcedata;
+
+    var scoring = {
+        depth: 5,
+        phraseTitle: 60,
+        phraseHeading: 20,
+        phraseDescription: 20,
+        termTitle: 40,
+        termHeading: 15,
+        termDescription: 15,
+        termTags: 15,
+        termKeywords: 15,
+    };
+
+    var ready = false;
+    var scrolled = false;
+
+    siteSearchInput.addEventListener('focus', () => activateInput());
+
+    function deactivate(e) {
+        if (
+            !siteSearchElement.contains(e.target) &&
+            !siteSearchResults.contains(e.target)
+        ) {
+            closeDropdown();
+
+            const duration = getComputedStyle(
+                siteSearchWrapper
+            ).getPropertyValue('--search-dropdown-duration');
+
+            // Convert duration to milliseconds for setTimeout
+            const durationMs =
+                parseFloat(duration) * (duration.endsWith('ms') ? 1 : 1000);
+
+            setTimeout(() => {
+                deactivateInput();
+            }, durationMs);
+        }
+    }
+
+    // Close the dropdown upon activity outside the search
+    document.addEventListener('click', deactivate);
+    document.addEventListener('keydown', deactivate);
+
+    function removeSearch() {
+        clearInput();
+        deactivateInput();
+        debounceSearch();
+        siteSearchInput.focus();
+    }
+
+    // Clear the search input
+    removeSearchButton.addEventListener('click', () => {
+        removeSearch();
+    });
+
+    // Dropdown accessibility controls
+    document.addEventListener('keydown', handleDropdownKeyboardNavigation);
+
+    function activateInput() {
+        if (
+            siteSearchWrapper.classList.contains('is-active') ||
+            siteSearchInput.value.trim().length === 0
+        ) {
+            return;
+        }
+        siteSearchWrapper.classList.add('is-active');
+        removeScroll();
+        openDropdown();
+    }
+
+    function deactivateInput() {
+        if (!siteSearchWrapper.classList.contains('is-active')) {
+            return;
+        }
+        siteSearchWrapper.classList.remove('is-active');
+        resetScroll();
+    }
+
+    function openDropdown() {
+        siteSearchElement.classList.add('is-active');
+
+        requestAnimationFrame(() => {
+            const dropdownHeightPercentage = parseFloat(
+                getComputedStyle(siteSearchWrapper).getPropertyValue(
+                    '--search-dropdown-height'
+                )
+            );
+            // Convert vh to pixels
+            const dropdownHeight =
+                window.innerHeight * (dropdownHeightPercentage / 100) + 32;
+            const siteSearchElementRect =
+                siteSearchElement.getBoundingClientRect();
+            const offsetFromBottomToElement =
+                window.innerHeight - siteSearchElementRect.bottom;
+
+            if (offsetFromBottomToElement < dropdownHeight) {
+                document.body.style.overflow = '';
+
+                // Scroll to the siteSearchElement
+                siteSearchElement.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start',
+                });
+
+                // Delay the overflow to allow for smooth scrolling
+                setTimeout(() => {
+                    document.body.style.overflow = 'hidden';
+                }, 300);
+            }
+        });
+    }
+
+    function closeDropdown() {
+        siteSearchElement.classList.remove('is-active');
+    }
+
+    function clearInput() {
+        closeDropdown();
+        siteSearchInput.value = '';
+    }
+
+    function handleDropdownKeyboardNavigation(e) {
+        // Proceed only if search dropdown is active
+        if (!siteSearchWrapper.classList.contains('is-active')) return;
+
+        if (e.key === 'Escape') {
+            removeSearch();
+            return;
+        }
+
+        if (e.key === 'Tab') {
+            const firstElement = siteSearchInput;
+            const lastElement =
+                siteSearchResults.querySelector('button') ||
+                siteSearchResults.querySelector(
+                    '.site-search-results-item:last-child .result-wrapper'
+                );
+
+            if (e.shiftKey && document.activeElement === firstElement) {
+                // Shift + Tab: Move focus to the last element if the first element is currently focused
+                e.preventDefault();
+                if (lastElement) lastElement.focus();
+            } else if (!e.shiftKey && document.activeElement === lastElement) {
+                // Tab: Move focus to the first element if the last element is currently focused
+                e.preventDefault();
+                firstElement.focus();
+            }
+        }
+    }
+
+    /** @type{Synonyms | null} */
+    var _synonyms = null;
+
+    /**
+     * Gets the list of synonyms if they exist
+     * @returns { Promise<Synonyms> }
+     */
+    async function getSynonyms() {
+        if (_synonyms != null) {
+            return _synonyms;
+        }
+
+        try {
+            const synonymsModule = await import('./synonyms.js');
+            _synonyms = synonymsModule.synonyms;
+        } catch {
+            _synonyms = {};
+        }
+
+        return _synonyms ?? {};
+    }
+
+    /**
+     * Replaces synonyms
+     * @param {string[]} queryTerms
+     */
+    async function replaceSynonyms(queryTerms) {
+        const synonyms = await getSynonyms();
+
+        for (let i = 0; i < queryTerms.length; i++) {
+            const term = queryTerms[i];
+            if (synonyms[term] != null) {
+                queryTerms.push(synonyms[term]);
+            }
+        }
+
+        return queryTerms;
+    }
+
+    /**
+     * Search term `s` and number of results `r`
+     * @param {string} s
+     * @param {number|null} [r=12]
+     * @returns
+     */
+    async function search(s, r) {
+        const numberOfResults = r ?? 12;
+
+        // Add 'is-active' class when search is performed
+        if (s && s.trim().length > 0) {
+            activateInput();
+            openDropdown();
+        } else if (siteSearchElement.classList.contains('is-active')) {
+            // Remove 'is-active' class when search is cleared
+            closeDropdown();
+        }
+
+        /** @type {SearchEntry[]} */
+        const needles = [];
+
+        // Clean the input
+        const cleanQuery = sanitise(s);
+
+        if (currentQuery === cleanQuery) {
+            return;
+        }
+
+        currentQuery = cleanQuery;
+        /** @type {string[]} */
+        const stemmedTerms = [];
+        const queryTerms = await replaceSynonyms(explode(currentQuery));
+
+        for (const term of queryTerms) {
+            const stemmed = stemmer(term);
+            if (stemmed !== term) {
+                stemmedTerms.push(stemmed);
+            }
+        }
+
+        const allTerms = queryTerms.concat(stemmedTerms);
+
+        cleanQuery.length > 0 &&
+            haystack.forEach((item) => {
+                item.foundWords = 0;
+                item.score = 0;
+                item.matchedHeadings = [];
+
+                // The user searches for "Kitchen Sink"
+
+                // Part 1 - Phrase Matches, i.e. "Kitchen Sink"
+
+                // Title
+                if (item.safeTitle === currentQuery) {
+                    item.foundWords += 2;
+                }
+
+                if (contains(item.safeTitle, currentQuery)) {
+                    item.score = item.score + scoring.phraseTitle;
+                    item.foundWords += 2;
+                }
+
+                // Headings
+                item.headings.forEach((c) => {
+                    if (contains(c.safeText, currentQuery)) {
+                        item.score = item.score + scoring.phraseHeading;
+                        item.matchedHeadings.push(c);
+                        item.foundWords++;
+                    }
+                });
+
+                // Description
+                if (contains(item.description, currentQuery)) {
+                    item.score = item.score + scoring.phraseDescription;
+                    item.foundWords++;
+                }
+
+                // Part 2 - Term Matches, i.e. "Kitchen" or "Sink"
+
+                let foundWords = 0;
+
+                allTerms.forEach((term) => {
+                    let isTermFound = false;
+
+                    // Title
+                    if (contains(item.safeTitle, term)) {
+                        item.score = item.score + scoring.termTitle;
+                        isTermFound = true;
+                    }
+
+                    // Headings
+                    item.headings.forEach((c) => {
+                        if (contains(c.safeText, term)) {
+                            item.score = item.score + scoring.termHeading;
+                            isTermFound = true;
+
+                            if (
+                                item.matchedHeadings.filter(
+                                    (h) => h.slug == c.slug
+                                ).length == 0
+                            ) {
+                                item.matchedHeadings.push(c);
+                            }
+                        }
+                    });
+
+                    // Description
+                    if (contains(item.description, term)) {
+                        isTermFound = true;
+                        item.score = item.score + scoring.termDescription;
+                    }
+
+                    // Tags
+                    item.tags.forEach((t) => {
+                        if (contains(t, term)) {
+                            isTermFound = true;
+                            item.score = item.score + scoring.termTags;
+                        }
+                    });
+
+                    // Keywords
+                    if (contains(item.keywords, term)) {
+                        isTermFound = true;
+                        item.score = item.score + scoring.termKeywords;
+                    }
+
+                    if (isTermFound) {
+                        foundWords++;
+                    }
+                });
+
+                item.foundWords += foundWords;
+
+                if (item.score > 0) {
+                    needles.push(item);
+                }
+            });
+
+        needles.forEach((n) => {
+            // Bonus points for shallow results, i.e. /features over /features/something/something
+
+            if (n.depth < 5) {
+                n.score += scoring.depth;
+                n.foundWords++;
+            }
+
+            if (n.depth < 4) {
+                n.score += scoring.depth;
+                n.foundWords++;
+            }
+        });
+
+        needles.sort(function (a, b) {
+            if (b.foundWords === a.foundWords) {
+                return b.score - a.score;
+            }
+
+            return b.foundWords - a.foundWords;
+        });
+
+        const total = needles.reduce(function (accumulator, needle) {
+            return accumulator + needle.score;
+        }, 0);
+
+        const results = siteSearchResults;
+
+        const ul = document.createElement('ul');
+        ul.className = 'site-search-results__list';
+
+        const limit = Math.min(needles.length, numberOfResults);
+
+        // @ts-ignore
+        const siteUrl = new URL(site_url);
+
+        for (let i = 0; i < limit; i++) {
+            const needle = needles[i];
+
+            const address = new URL(needle.url);
+            const isSameHost = siteUrl.host == address.host;
+            const url = isSameHost ? address.pathname : needle.url;
+
+            const listElementWrapper = document.createElement('a');
+            listElementWrapper.href = url;
+            listElementWrapper.className = 'result-wrapper';
+
+            const listElementTitle = document.createElement('span');
+            // Only highlight user query terms, not stemmed terms
+            listElementTitle.innerHTML = highlight(needle.title, queryTerms);
+            listElementTitle.className = 'result-title';
+
+            const path = document.createElement('div');
+            path.className = 'result-path';
+
+            // Split the path into segments, filter out empty segments (in case of leading slash)
+            const segments = address.pathname.split('/').filter(Boolean);
+
+            segments.forEach((segment, index) => {
+                const words = segment.replace(/-/g, ' ').split(' ');
+                const processedSegment = words
+                    .map((word, index) =>
+                        index === 0
+                            ? word.charAt(0).toUpperCase() +
+                              word.slice(1).toLowerCase()
+                            : word.toLowerCase()
+                    )
+                    .join(' ');
+
+                const segmentSpan = document.createElement('span');
+                segmentSpan.className = 'result-path-segment';
+                segmentSpan.textContent = processedSegment;
+                path.appendChild(segmentSpan);
+
+                if (index < segments.length - 1) {
+                    const svgIcon = document.createElement('span');
+                    svgIcon.className = 'result-path-icon';
+                    svgIcon.innerHTML = `
+                      <svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10">
+                          <path d="M1 9L5 5L1 1" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+                      </svg>
+                  `;
+                    path.appendChild(svgIcon);
+                }
+            });
+
+            const listElementDescription = document.createElement('p');
+            listElementDescription.className = 'result-description';
+            // Only highlight user query terms, not stemmed terms
+            listElementDescription.innerHTML = highlight(
+                needle.description,
+                queryTerms
+            );
+
+            const li = document.createElement('li');
+            li.classList.add('site-search-results-item');
+            li.dataset.words = needle.foundWords.toString();
+            li.dataset.score = (
+                Math.round((needle.score / total) * 1000) / 1000
+            ).toString();
+            listElementWrapper.appendChild(path);
+            listElementWrapper.appendChild(listElementTitle);
+            listElementWrapper.appendChild(listElementDescription);
+            li.appendChild(listElementWrapper);
+
+            if (
+                enabled(f.search, 'headings') &&
+                needle.matchedHeadings.length > 0
+            ) {
+                const headings = document.createElement('ul');
+                headings.className = 'result-headings';
+
+                headings.tabIndex = 0;
+
+                needle.matchedHeadings.forEach((h) => {
+                    const item = document.createElement('li');
+                    const link = document.createElement('a');
+                    link.href = url + '#' + h.slug;
+                    // Only highlight user query terms, not stemmed terms
+                    link.innerHTML = highlight(h.text, queryTerms);
+                    item.appendChild(link);
+                    headings.append(item);
+                });
+
+                li.appendChild(headings);
+            }
+
+            ul.appendChild(li);
+        }
+
+        let h4;
+        if (needles.length === 0) {
+            h4 = document.createElement('h4');
+            h4.classList.add('search-results-heading');
+            h4.innerHTML = results.dataset.emptytitle || 'No Results';
+        }
+
+        const more = document.createElement('button');
+        more.className = 'show-more';
+        more.type = 'button';
+        more.innerHTML = 'See more';
+        more.addEventListener('click', async function (e) {
+            e.stopPropagation(); // Prevent the click from closing the dropdown
+            currentQuery = '';
+            const oldTotal = numberOfResults;
+            const newTotal = numberOfResults + 12;
+            await search(s, newTotal);
+            window.setTimeout(function () {
+                const previousPosition = qs(
+                    `.site-search-results__list li:nth-child(${oldTotal}) > a`
+                );
+                console.log(previousPosition.outerHTML);
+                previousPosition.focus();
+            }, 10);
+        });
+
+        if (needles.length > numberOfResults) {
+            const moreLi = document.createElement('li');
+            moreLi.appendChild(more);
+            ul.appendChild(moreLi);
+        }
+
+        results.innerHTML = '';
+        results.appendChild(ul);
+        h4 && results.appendChild(h4);
+
+        const address = window.location.href.split('?')[0];
+        window.history.pushState(
+            {},
+            '',
+            address + '?q=' + encodeURIComponent(cleanQuery)
+        );
+        raiseEvent('searched', { search: s });
+    }
+
+    /** @type {Number} */
+    var debounceTimer;
+
+    function debounceSearch() {
+        var input = siteSearchInput;
+
+        if (input == null) {
+            throw new Error('Cannot find data-site-search-query');
+        }
+
+        // Words chained with . are combined, i.e. System.Text is "systemtext"
+        var s = input.value.replace(/\./g, '').trim();
+
+        if (!s) {
+            const address = window.location.href.split('?')[0];
+            window.history.pushState({}, '', address);
+        }
+
+        window.clearTimeout(debounceTimer);
+        debounceTimer = window.setTimeout(function () {
+            if (ready && s) {
+                search(s);
+            }
+        }, 400);
+    }
+
+    fetch(dataUrl)
+        .then(function (response) {
+            return response.json();
+        })
+        .then(function (data) {
+            haystack = data;
+            ready = true;
+
+            for (let i = 0; i < haystack.length; i++) {
+                const item = haystack[i];
+                item.safeTitle = sanitise(item.title);
+                item.tags = item.tags.map((t) => sanitise(t));
+                item.safeDescription = sanitise(item.description);
+                item.depth = item.url.match(/\//g)?.length ?? 0;
+
+                item.headings.forEach((h) => (h.safeText = sanitise(h.text)));
+            }
+
+            /** @type {HTMLFormElement} */
+            const siteSearch = siteSearchElement;
+
+            /** @type {HTMLInputElement} */
+            const siteSearchQuery = siteSearchInput;
+
+            if (siteSearch == null || siteSearchQuery == null) {
+                throw new Error(
+                    'Cannot find #site-search or data-site-search-query'
+                );
+            }
+
+            siteSearch.addEventListener('submit', function (e) {
+                e.preventDefault();
+                debounceSearch();
+                return false;
+            });
+
+            siteSearchQuery.addEventListener('keyup', function (e) {
+                e.preventDefault();
+                if (!scrolled) {
+                    scrolled = true;
+                    this.scrollIntoView(true);
+                }
+                debounceSearch();
+                return false;
+            });
+
+            const params = new URLSearchParams(window.location.search);
+            if (params.has('q')) {
+                siteSearchQuery.value = params.get('q') ?? '';
+            }
+
+            for (let key of Object.keys(scoring)) {
+                if (params.has(`s_${key}`)) {
+                    scoring[key] = parseInt(
+                        params.get(`s_${key}`) ?? scoring[key].toString(),
+                        10
+                    );
+                }
+            }
+
+            debounceSearch();
+        })
+        .catch((error) => {
+            console.log(error);
+        });
+}
+
+if (document.readyState === 'loading') {
+    // Loading hasn't finished yet
+    document.addEventListener('DOMContentLoaded', initializeSearch);
+} else {
+    // `DOMContentLoaded` has already fired
+    initializeSearch();
+}

package/public/js/synonyms.js

@@ -0,0 +1,14 @@
+/** @format */
+
+const synonyms = {
+    // Keep me alphabetical
+    // Removes join words
+    and: '',
+    for: '',
+    if: '',
+    the: '',
+    to: '',
+    with: '',
+};
+
+export { synonyms };

package/src/config.ts

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

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

@@ -26,6 +26,11 @@ const canonicalURL =  accelerator.urlFormatter.formatUrl(new URL(Astro.url.pathn
 const socialTitle = await accelerator.markdown.getTextFrom(frontmatter?.title);
 const title = `${ accelerator.markdown.titleCase(socialTitle) } ${ ((frontmatter.titleAdditional) ? ` ${frontmatter.titleAdditional}` : '') } | ${ SITE.title }`;
 
+const authorList = accelerator.authors.forPost(frontmatter);
+const authorMeta = (authorList.mainAuthor?.frontmatter?.meta && authorList.mainAuthor?.frontmatter?.meta?.length > 0)
+  ? authorList.mainAuthor.frontmatter.meta
+  : [];
+
 stats.stop();
 ---
 <head>
@@ -52,6 +57,9 @@ stats.stop();
   <meta property="og:description" content={ frontmatter.description } />
   <meta property="og:image" content={ canonicalImageSrc } />
   <meta property="og:image:alt" content={ imageAlt } />
+  {authorMeta.map(m =>
+    <meta name={ m.name } content={ m.content } />
+  )}
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="twitter:title" content={ socialTitle } />
   <meta name="twitter:description" content={ frontmatter.description } />