astro-accelerator 0.0.1

package/src/themes/accelerator/utilities/Taxonomy.astro

@@ -0,0 +1,112 @@
+---
+import type { Entry } from '@util/Languages.astro';
+
+import t from '@util/language.json';
+
+import { SITE } from '@config';
+import { getPages } from '@util/PageQueries.astro';
+import { getItem, setItem } from '@util/Cache.astro';
+import { addSlashToAddress } from '@util/Url.astro';
+
+type TaxonomyEntry = {
+    title: string;
+    count: number;
+};
+
+type Taxonomy = { 
+    tags: TaxonomyEntry[];
+    topTags: TaxonomyEntry[];
+    categories: TaxonomyEntry[];
+};
+
+export function sortByTitle (a: TaxonomyEntry, b: TaxonomyEntry) {
+  if ( a.title < b.title ){
+    return -1;
+  }
+
+  if ( a.title > b.title ){
+    return 1;
+  }
+  
+  return 0;
+}
+
+export function taxonomyLinks(lang: (entry: Entry) => string) {
+    const category = lang(t.articles.category) ?? 'category';
+    const categoryLink = `${SITE.subfolder}/${category}/`;
+
+    const tag = lang(t.articles.tag) ?? 'category';
+    const tagLink = `${SITE.subfolder}/${tag}/`;
+
+    return {
+        tag: tag,
+        category: category,
+        getCategoryLink: (category: string) => {
+            return addSlashToAddress(categoryLink + category.toLowerCase().replace(/ /g, '-') + '/1/');
+        },
+        getTagLink: (tag: string) => {
+            return addSlashToAddress(tagLink + tag.toLowerCase().replace(/ /g, '-') + '/1/');
+        }
+    };
+
+}
+
+export async function getTaxonomy (): Promise<Taxonomy> {
+    const cacheKey = 'Global__taxonomy';
+
+    let taxonomy: Taxonomy = await getItem(cacheKey);
+
+    if (taxonomy == null) {
+        const allPages = await getPages();
+        const tags: { [key: string]: number } = {};
+        const cats: { [key: string]: number } = {};
+
+        // Get taxonomy and counts
+        allPages.forEach((p) => {
+            p.frontmatter.tags && p.frontmatter.tags.forEach(t => {
+                tags[t] = (tags[t] ?? 0) + 1;
+            });
+
+            p.frontmatter.categories && p.frontmatter.categories.forEach(c => {
+                cats[c] = (cats[c] ?? 0) + 1;
+            });
+        });
+
+        // Map into the taxonomy
+        taxonomy = {
+            tags: Object.keys(tags).sort().map(x => {
+                return {
+                    title: x,
+                    count: tags[x]
+                };
+            }),
+            topTags: [],
+            categories: Object.keys(cats).sort().map(x => {
+                return {
+                    title: x,
+                    count: cats[x]
+                };
+            })
+        };
+
+        // Get a list of "top tags" by usage count
+        const length = Math.min(taxonomy.categories.length, taxonomy.tags.length);
+        taxonomy.topTags = taxonomy.tags
+            .sort((a, b) => b.count - a.count)
+            .slice(0, length)
+            .sort((a, b) => {
+                if ( a.title < b.title ){
+                    return -1;
+                }
+                if ( a.title > b.title ){
+                    return 1;
+                }
+                return 0;
+             });
+
+        await setItem(cacheKey, taxonomy);
+    }
+
+    return taxonomy;
+}
+---

package/src/themes/accelerator/utilities/Url.astro

@@ -0,0 +1,19 @@
+---
+export function addSlashToUrl (url: URL) {
+    url.pathname += url.pathname.endsWith('/') ? '' : '/';
+    return url;
+}
+
+export function addSlashToAddress (address: string | undefined) {
+    if (!address) {
+        address = '/';
+    }
+
+    if (address.indexOf('://') > -1) {
+        return address;
+    }
+
+    const url = addSlashToUrl(new URL(address, Astro.site));
+    return url.pathname + url.search;
+}
+---

package/src/themes/accelerator/utilities/custom-markdown.mjs

@@ -0,0 +1,104 @@
+import { SITE } from '/src/config';
+import { visit } from 'unist-util-visit';
+import { h } from 'hastscript';
+import { size } from '/src/data/image-size.mjs';
+import { fromSelector } from 'hast-util-from-selector'
+
+
+/* Based on https://github.com/remarkjs/remark-directive
+* Examples:
+
+## Inline
+
+This is an inline :abbr[I18n]{ title="Internationalization" } element
+
+## Images
+
+:img{ src="/img/frankenstein.png" alt="Book cover" loading="lazy" }
+
+## Block
+
+:::div{.note}
+This is a custom div element with the class `note`
+:::
+
+## Combinations
+:::figure
+:img{ src="/img/frankenstein.png" alt="Book cover" loading="lazy" }
+::figcaption[The modern hardback edition of Frankenstein]
+:::
+
+*/
+
+export function getDestination(uri, s) {
+  const fromRegEx = new RegExp('^' + SITE.subfolder + '/img/');
+  const replacement = SITE.subfolder + '/i/' + s.toString() + '/';
+  return uri.replace(fromRegEx, replacement);
+}
+
+export function getImageInfo(src, className, sizes) {
+  const info = {};
+
+  let uri = src;
+  uri = uri.replace(/.jpg|.jpeg|.png/, '.webp');
+
+  const imgFallback = getDestination(src, 'x');
+
+  const imgSmall = getDestination(uri, size.small);
+  const imgMedium = getDestination(uri, size.medium);
+  const imgLarge = getDestination(uri, size.large);
+
+  info.src = imgFallback;
+  info.srcset = `${imgSmall} ${size.small}w, ${imgMedium} ${size.medium}w, ${imgLarge}`;
+  info.sizes = sizes;
+  info.class = (className ?? '' + ' resp-img').trim();
+
+  return info;
+}
+
+/** @type {import('unified').Plugin<[], import('mdast').Root>} */
+export function attributeMarkdown() {
+  return (tree) => {
+
+    visit(tree, (node) => {
+      if (['textDirective', 'leafDirective', 'containerDirective'].includes(node.type)) {
+        const data = node.data || (node.data = {});
+        const hast = h(node.name, node.attributes);
+
+        if (hast.properties.src) {
+          // Process the image
+          const info = getImageInfo(hast.properties.src, hast.properties.class, SITE.images.contentSize);
+
+          hast.properties.src = info.src;
+          hast.properties.srcset = info.srcset;
+          hast.properties.sizes = info.sizes;
+          hast.properties.class = info.class;
+        }
+
+        data.hName = hast.tagName;
+        data.hProperties = hast.properties;
+      }
+    });
+  }
+}
+
+/** @type {import('unified').Plugin<[], import('mdast').Root>} */
+export function wrapTables() {
+  return (tree) => {
+    visit(tree, (node, i, parent) => {
+      if (node.type == 'table') {
+        // Create the wrapping element
+        const wrap = fromSelector('div');
+        const data = wrap.data || (wrap.data = {})
+        const props = data.hProperties || (data.hProperties = {})
+        props.className = 'table-wrap';
+
+        // Add the table to the wrapper
+        wrap.children = [node];
+
+        // Replace the table with the wrapper
+        parent.children[i] = wrap;
+      }
+    });
+  }
+}

package/src/themes/accelerator/utilities/img.mjs

@@ -0,0 +1,152 @@
+import fs from 'fs';
+import path from 'path';
+import { ImagePool } from '@squoosh/lib';
+
+const workingDirectory = process.cwd();
+
+const imageSize = await import('file://' + path.join(workingDirectory, 'src/data/image-size.mjs'));
+const imageModule = await import('file://' + path.join(workingDirectory, 'src/data/images.mjs'));
+const size = imageSize.size;
+const imagePaths = imageModule.imagePaths;
+
+const imagePath = path.join('public', imagePaths.src);
+const outputPath = path.join('public', imagePaths.dest);
+const imageDirectory = path.join(workingDirectory, imagePath);
+
+console.log(imageDirectory);
+
+const filesToProcess = [];
+
+function getDestinationFilePathless(source, s) {
+    let destination = path.join(workingDirectory, outputPath, s.toString(), source);
+    destination = destination.replace(path.parse(destination).ext, '');
+    return destination;
+}
+
+async function createDestinationFolder(destinationFile) {
+    const file = path.parse(destinationFile + '.txt');
+    console.log(file.dir);
+    await fs.promises.mkdir(file.dir, { recursive: true });
+}
+
+async function recurseFiles(directory) {
+    const f = await fs.promises.readdir(path.join(imageDirectory, directory), { withFileTypes: true });
+
+    for (const file of f) {
+        if (file.isDirectory()) {
+            const nextDirectory = path.join(directory, file.name);
+            await recurseFiles(nextDirectory);
+        } else {
+            const ext = path.parse(file.name).ext;
+
+            switch (ext) {
+                case '.jpg':
+                case '.jpeg':
+                case '.png':
+                case '.webp':
+                    const sourcePath = path.join(directory, file.name);
+
+                    const webP = sourcePath.replace(/.jpg$|.jpeg$|.png$/, '.webp');
+                    const info = {
+                        path: sourcePath,
+                        webP: webP
+                    };
+
+                    const fullDestination = path.join(workingDirectory, outputPath, 'x', info.path);
+                    
+                    if(!fs.existsSync(fullDestination)) {
+                        filesToProcess.push(info);
+                    }
+                    
+                    // The code below uses modified dates (and will update more images than the above)
+                    // const fullPath = path.join(imageDirectory, info.path);
+                    // const modified = fs.statSync(fullPath).mtime;
+
+                    // const destinationModified = fs.existsSync(fullDestination)
+                    //     ? fs.statSync(fullDestination).mtime
+                    //     : new Date(0);
+
+                    // if (destinationModified < modified) {
+                    //     filesToProcess.push(info);
+                    // }
+                    break;
+            }
+        }
+    }
+}
+
+await recurseFiles('');
+
+console.log(`Found ${filesToProcess.length} files to process`);
+
+async function processImage(imagePool, src, options) {
+    const file = await fs.promises.readFile(src);
+    const image = imagePool.ingestImage(file);
+    await image.encode(options);
+    return image;
+}
+
+for (const file of filesToProcess) {
+    console.log(file.path);
+    const source = path.join(imageDirectory, file.path);
+    const destination = getDestinationFilePathless(file.path, 'x');
+    await createDestinationFolder(destination);
+
+    const ext = path.parse(source).ext;
+
+    let image;
+    let rawEncodedImage;
+
+    // Create optimised fallback image
+    const imagePool = new ImagePool(1);
+    switch (ext) {
+        case '.png':
+            image = await processImage(imagePool, source, { oxipng: {} });
+            rawEncodedImage = (await image.encodedWith.oxipng).binary;
+            await fs.promises.writeFile(destination + '.png', rawEncodedImage);
+            break;
+        case '.jpg':
+        case '.jpeg':
+            image = await processImage(imagePool, source, { mozjpeg: {} });
+            rawEncodedImage = (await image.encodedWith.mozjpeg).binary;
+            await fs.promises.writeFile(destination + '.jpg', rawEncodedImage);
+            break;
+        case '.webp':
+            image = await processImage(imagePool, source, { webp: { quality: 85 } });
+            rawEncodedImage = (await image.encodedWith.webp).binary;
+            await fs.promises.writeFile(destination + '.webp', rawEncodedImage);
+            break;
+    }
+    await imagePool.close();
+
+    // Create resized images
+    for (const key in size) {
+        const imagePool = new ImagePool(1);
+        const resizeDestination = getDestinationFilePathless(file.path, size[key]);
+        await createDestinationFolder(resizeDestination);
+
+        const imgFile = await fs.promises.readFile(source);
+        const image = imagePool.ingestImage(imgFile);
+
+        const info = await image.decoded;
+        if (info.width > size[key]) {
+            // Only resize if the image is larger than the target size
+            const preprocessOptions = {
+                resize: {
+                    width: size[key]
+                }
+            };
+    
+            await image.preprocess(preprocessOptions);
+        }
+
+        await image.encode({ webp: {} });
+
+        rawEncodedImage = (await image.encodedWith.webp).binary;
+        await fs.promises.writeFile(resizeDestination + '.webp', rawEncodedImage);
+
+        await imagePool.close();
+    }
+}
+
+console.log(`Finished`);

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

@@ -0,0 +1,111 @@
+{
+    "aria": {
+        "breadcrumbs": {
+            "en": "Breadcrumb"
+        },
+        "site_navigation": {
+            "en": "Site Navigation"
+        },
+        "toc": {
+            "en": "Table of contents"
+        },
+        "paging": {
+            "en": "Paging"
+        },
+        "skiplinks": {
+            "en": "Skip Links"
+        },
+        "back_to_top": {
+            "en": "Skip Back"
+        }
+    },
+    "skiplinks": {
+        "skip_to_top": {
+            "en": "Back to top"      
+        },
+        "skip_to_navigation": {
+            "en": "Skip to navigation"
+        },
+        "skip_to_content": {
+            "en": "Skip to main content"
+        },
+        "skip_to_footer": {
+            "en": "Skip to footer"
+        }
+    },
+    "header": {
+      "open_menu": {
+          "en": "Open menu"
+      },
+      "open_search": {
+          "en": "Open site search"
+      }
+    },
+    "navigation": {
+        "title": {
+            "en": "Navigation"
+        }
+    },
+    "toc": {
+        "title":{
+            "en": "Table of contents"
+        }
+    },
+    "footer": {
+        "copyright": {
+            "en": "Copyright"
+        }
+    },
+    "post": {
+        "written_by": {
+            "en": "Written by"
+        },
+        "last_modified": {
+            "en": "Revised"
+        }
+    },
+    "author": {
+        "recent_articles": {
+            "en": "Recent Articles"
+        },
+        "twitter": {
+            "en": "Twitter"
+        }
+    },
+    "search": {
+        "search_for": {
+            "en": "Search for"
+        },
+        "submit": {
+            "en": "Go"
+        },
+        "results_title": {
+            "en": "Results"
+        },
+        "no_results_title": {
+            "en": "No Results"
+        }
+    },
+    "articles": {
+        "previous": {
+            "en": "Prev"
+        },
+        "next": {
+            "en": "Next"
+        },
+        "category_title": {
+            "en": "Categories"
+        },
+        "tag_title": {
+            "en": "Tags"
+        },
+        "category": {
+            "_note": "This must match your URL path to category pages, as in /category/example/1/",
+            "en": "category"
+        },
+        "tag": {
+            "_note": "This must match your URL path to tag pages, as in /tag/example/1/",
+            "en": "tag"
+        }
+    }
+}