blog/lib/tasks/articles.ts

import { basename, dirname, join } from "node:path";
import asciidoctor from "asciidoctor";
import { DateTime } from "luxon";
import { unified } from "unified";
import rehypeParse from "rehype-parse";
import rehypeStringify from "rehype-stringify";
import rehypePresetMinify from "rehype-preset-minify";
import rehypePrism from "rehype-prism";
import { DEFAULT_DATE, PRODUCTION } from "../environment.ts";
import rehypeExternalLinks from "rehype-external-links";
import { visit } from "unist-util-visit";
import renderLayout from "../views/layout.tsx";
import renderArticleLayout, { Article } from "../views/article.tsx";
import renderIndex from "../views/index.tsx";
import { renderToStaticMarkup } from "preact-render-to-string";
import { SITE_DESCRIPTION, SITE_TITLE } from "../constants.ts";
import { JSX } from "preact/jsx-runtime";
import { reloadAssets } from "../assets.ts";
import { lastValueFrom, mergeMap, Observable, Subscriber } from "rxjs";
import { dest, fromGlob, onComplete } from "../rx-utils.ts";
import { VFile } from "vfile";

const encoder = new TextEncoder();
const decoder = new TextDecoder();
const DOCTYPE = encoder.encode("<!doctype html>");

const Asciidoctor = asciidoctor();
const EXTENSION_REGISTRY = Asciidoctor.Extensions.create();
EXTENSION_REGISTRY.inlineMacro("abbr", function () {
    this.process(function (parent, target, attributes) {
        return this.createInline(
            parent,
            "quoted",
            `<abbr title="${attributes["$positional"]}">${target}</abbr>`,
        );
    });
});

function extractImages(sink: Subscriber<VFile>, articlePath: string) {
    return function () {
        return function (tree: any) {
            visit(tree, "element", function (node: any) {
                if (node.tagName !== "img") {
                    return;
                }

                const imagePath = join(dirname(articlePath));
                const image = new VFile({
                    path: join(basename(articlePath, ".asciidoc"), node.properties.src),
                    value: Deno.readFileSync(imagePath),
                });

                sink.next(image);
            });
        };
    };
}

function renderDocument(root: JSX.Element): Uint8Array {
    const result = encoder.encode(renderToStaticMarkup(root));
    const dest = new Uint8Array(DOCTYPE.length + result.length);

    dest.set(DOCTYPE);
    dest.set(result, DOCTYPE.length);

    return dest;
}

const transformArticle = (sink: Subscriber<VFile>, articles: Article[]) => async (file: VFile) => {
    const slug = basename(file.path, ".asciidoc");
    const document = Asciidoctor.load(decoder.decode(file.value as Uint8Array), {
        extension_registry: EXTENSION_REGISTRY,
    });
    const date = DateTime.fromISO(document.getAttribute("docdate", { zone: "UTC" }));
    const article = { path: file.path, slug, date, document };

    if (PRODUCTION && date.equals(DEFAULT_DATE)) {
        return;
    }

    const vfile = await unified()
        .use(rehypeParse as any)
        .use(rehypeExternalLinks, { rel: "noopener", target: "_blank" })
        .use(extractImages(sink, file.path))
        .use(rehypePrism)
        .use(rehypePresetMinify as any)
        .use(rehypeStringify as any)
        .process(document.convert());
    const content = renderLayout({
        title: document.getDoctitle({}) as string,
        meta: {
            description: document.getAttribute("description"),
            keywords: document.getAttribute("keywords"),
            "og:title": document.getDoctitle({}) as string,
            "og:type": "article",
            "og:article:published_time": document.getAttribute("docdate"),
            "og:url": `https://adaedra.eu/${slug}/`,
            "og:description": document.getAttribute("description"),
            "og:site_name": SITE_TITLE,
        },
        Content: () => renderArticleLayout({ article, body: vfile.toString() }),
    });

    file.path = join(slug, "index.html");
    file.value = renderDocument(content);

    articles.push(article);
    sink.next(file);
};

const finalizeArticles = (articles: Article[]) => (sink: Subscriber<VFile>) => {
    articles.sort(({ date: a }, { date: b }) => b.diff(a).toMillis());
    const contents = renderLayout({
        meta: {
            description: SITE_DESCRIPTION,
            "og:title": SITE_TITLE,
            "og:type": "website",
            "og:url": `https://adaedra.eu`,
        },
        Content: () => renderIndex({ articles }),
    });

    sink.next(new VFile({ path: "index.html", value: renderDocument(contents) }));
    return Promise.resolve();
};

export const articles = async () => {
    reloadAssets();
    const articles: Article[] = [];

    await lastValueFrom(
        fromGlob("articles/**/*.asciidoc").pipe(
            mergeMap(
                (file) =>
                    new Observable<VFile>((subscriber) => {
                        transformArticle(
                            subscriber,
                            articles,
                        )(file).then(() => subscriber.complete());
                    }),
            ),
            onComplete(finalizeArticles(articles)),
            mergeMap(dest("dist")),
        ),
    );
};
Switch to deno 2024-06-27 04:22:58 +00:00			`import { basename, dirname, join } from "node:path";`
Un-gulpify build: articles 2024-06-26 02:21:31 +00:00			`import asciidoctor from "asciidoctor";`
Explode gulpfile * Import TypeScript * Explode gulpfile into smaller files * Actual CSS and Font (incomplete) file cache buster 2024-06-21 19:17:32 +00:00			`import { DateTime } from "luxon";`
			`import { unified } from "unified";`
			`import rehypeParse from "rehype-parse";`
			`import rehypeStringify from "rehype-stringify";`
			`import rehypePresetMinify from "rehype-preset-minify";`
Switch to deno 2024-06-27 04:22:58 +00:00			`import rehypePrism from "rehype-prism";`
			`import { DEFAULT_DATE, PRODUCTION } from "../environment.ts";`
Explode gulpfile * Import TypeScript * Explode gulpfile into smaller files * Actual CSS and Font (incomplete) file cache buster 2024-06-21 19:17:32 +00:00			`import rehypeExternalLinks from "rehype-external-links";`
Switch to deno 2024-06-27 04:22:58 +00:00			`import { visit } from "unist-util-visit";`
			`import renderLayout from "../views/layout.tsx";`
			`import renderArticleLayout, { Article } from "../views/article.tsx";`
			`import renderIndex from "../views/index.tsx";`
Remove pug and use Preact for templating 2024-06-24 16:55:39 +00:00			`import { renderToStaticMarkup } from "preact-render-to-string";`
Switch to deno 2024-06-27 04:22:58 +00:00			`import { SITE_DESCRIPTION, SITE_TITLE } from "../constants.ts";`
Remove pug and use Preact for templating 2024-06-24 16:55:39 +00:00			`import { JSX } from "preact/jsx-runtime";`
Switch to deno 2024-06-27 04:22:58 +00:00			`import { reloadAssets } from "../assets.ts";`
Own task runner 2024-06-27 02:10:50 +00:00			`import { lastValueFrom, mergeMap, Observable, Subscriber } from "rxjs";`
Switch to deno 2024-06-27 04:22:58 +00:00			`import { dest, fromGlob, onComplete } from "../rx-utils.ts";`
Use `vfile` instead of `vinyl` 2024-06-27 08:06:39 +00:00			`import { VFile } from "vfile";`

			`const encoder = new TextEncoder();`
			`const decoder = new TextDecoder();`
			`const DOCTYPE = encoder.encode("<!doctype html>");`
Explode gulpfile * Import TypeScript * Explode gulpfile into smaller files * Actual CSS and Font (incomplete) file cache buster 2024-06-21 19:17:32 +00:00
Switch to deno 2024-06-27 04:22:58 +00:00			`const Asciidoctor = asciidoctor();`
Explode gulpfile * Import TypeScript * Explode gulpfile into smaller files * Actual CSS and Font (incomplete) file cache buster 2024-06-21 19:17:32 +00:00			`const EXTENSION_REGISTRY = Asciidoctor.Extensions.create();`
			`EXTENSION_REGISTRY.inlineMacro("abbr", function () {`
			`this.process(function (parent, target, attributes) {`
			`return this.createInline(`
			`parent,`
			`"quoted",`
			`<abbr title="${attributes["$positional"]}">${target}</abbr>`,
			`);`
			`});`
			`});`

Use `vfile` instead of `vinyl` 2024-06-27 08:06:39 +00:00			`function extractImages(sink: Subscriber<VFile>, articlePath: string) {`
Explode gulpfile * Import TypeScript * Explode gulpfile into smaller files * Actual CSS and Font (incomplete) file cache buster 2024-06-21 19:17:32 +00:00			`return function () {`
Switch to deno 2024-06-27 04:22:58 +00:00			`return function (tree: any) {`
Explode gulpfile * Import TypeScript * Explode gulpfile into smaller files * Actual CSS and Font (incomplete) file cache buster 2024-06-21 19:17:32 +00:00			`visit(tree, "element", function (node: any) {`
			`if (node.tagName !== "img") {`
			`return;`
			`}`

Un-gulpify build: articles 2024-06-26 02:21:31 +00:00			`const imagePath = join(dirname(articlePath));`
Use `vfile` instead of `vinyl` 2024-06-27 08:06:39 +00:00			`const image = new VFile({`
Un-gulpify build: articles 2024-06-26 02:21:31 +00:00			`path: join(basename(articlePath, ".asciidoc"), node.properties.src),`
Use `vfile` instead of `vinyl` 2024-06-27 08:06:39 +00:00			`value: Deno.readFileSync(imagePath),`
Explode gulpfile * Import TypeScript * Explode gulpfile into smaller files * Actual CSS and Font (incomplete) file cache buster 2024-06-21 19:17:32 +00:00			`});`

Use `vfile` instead of `vinyl` 2024-06-27 08:06:39 +00:00			`sink.next(image);`
Explode gulpfile * Import TypeScript * Explode gulpfile into smaller files * Actual CSS and Font (incomplete) file cache buster 2024-06-21 19:17:32 +00:00			`});`
			`};`
			`};`
			`}`

Use `vfile` instead of `vinyl` 2024-06-27 08:06:39 +00:00			`function renderDocument(root: JSX.Element): Uint8Array {`
			`const result = encoder.encode(renderToStaticMarkup(root));`
			`const dest = new Uint8Array(DOCTYPE.length + result.length);`

			`dest.set(DOCTYPE);`
			`dest.set(result, DOCTYPE.length);`

			`return dest;`
Remove pug and use Preact for templating 2024-06-24 16:55:39 +00:00			`}`

Use `vfile` instead of `vinyl` 2024-06-27 08:06:39 +00:00			`const transformArticle = (sink: Subscriber<VFile>, articles: Article[]) => async (file: VFile) => {`
Switch to deno 2024-06-27 04:22:58 +00:00			`const slug = basename(file.path, ".asciidoc");`
Use `vfile` instead of `vinyl` 2024-06-27 08:06:39 +00:00			`const document = Asciidoctor.load(decoder.decode(file.value as Uint8Array), {`
Switch to deno 2024-06-27 04:22:58 +00:00			`extension_registry: EXTENSION_REGISTRY,`
			`});`
			`const date = DateTime.fromISO(document.getAttribute("docdate", { zone: "UTC" }));`
			`const article = { path: file.path, slug, date, document };`
Un-gulpify build: articles 2024-06-26 02:21:31 +00:00
Switch to deno 2024-06-27 04:22:58 +00:00			`if (PRODUCTION && date.equals(DEFAULT_DATE)) {`
			`return;`
			`}`
Explode gulpfile * Import TypeScript * Explode gulpfile into smaller files * Actual CSS and Font (incomplete) file cache buster 2024-06-21 19:17:32 +00:00
Switch to deno 2024-06-27 04:22:58 +00:00			`const vfile = await unified()`
			`.use(rehypeParse as any)`
			`.use(rehypeExternalLinks, { rel: "noopener", target: "_blank" })`
			`.use(extractImages(sink, file.path))`
			`.use(rehypePrism)`
			`.use(rehypePresetMinify as any)`
			`.use(rehypeStringify as any)`
			`.process(document.convert());`
			`const content = renderLayout({`
			`title: document.getDoctitle({}) as string,`
			`meta: {`
			`description: document.getAttribute("description"),`
			`keywords: document.getAttribute("keywords"),`
			`"og:title": document.getDoctitle({}) as string,`
			`"og:type": "article",`
			`"og:article:published_time": document.getAttribute("docdate"),`
			"og:url": `https://adaedra.eu/${slug}/`,
			`"og:description": document.getAttribute("description"),`
			`"og:site_name": SITE_TITLE,`
			`},`
			`Content: () => renderArticleLayout({ article, body: vfile.toString() }),`
			`});`
Explode gulpfile * Import TypeScript * Explode gulpfile into smaller files * Actual CSS and Font (incomplete) file cache buster 2024-06-21 19:17:32 +00:00
Switch to deno 2024-06-27 04:22:58 +00:00			`file.path = join(slug, "index.html");`
Use `vfile` instead of `vinyl` 2024-06-27 08:06:39 +00:00			`file.value = renderDocument(content);`
Explode gulpfile * Import TypeScript * Explode gulpfile into smaller files * Actual CSS and Font (incomplete) file cache buster 2024-06-21 19:17:32 +00:00
Switch to deno 2024-06-27 04:22:58 +00:00			`articles.push(article);`
Use `vfile` instead of `vinyl` 2024-06-27 08:06:39 +00:00			`sink.next(file);`
Switch to deno 2024-06-27 04:22:58 +00:00			`};`
Un-gulpify build: articles 2024-06-26 02:21:31 +00:00
Use `vfile` instead of `vinyl` 2024-06-27 08:06:39 +00:00			`const finalizeArticles = (articles: Article[]) => (sink: Subscriber<VFile>) => {`
Un-gulpify build: articles 2024-06-26 02:21:31 +00:00			`articles.sort(({ date: a }, { date: b }) => b.diff(a).toMillis());`
			`const contents = renderLayout({`
			`meta: {`
			`description: SITE_DESCRIPTION,`
			`"og:title": SITE_TITLE,`
			`"og:type": "website",`
			"og:url": `https://adaedra.eu`,
Explode gulpfile * Import TypeScript * Explode gulpfile into smaller files * Actual CSS and Font (incomplete) file cache buster 2024-06-21 19:17:32 +00:00			`},`
`then` pattern 2024-06-26 03:30:43 +00:00			`Content: () => renderIndex({ articles }),`
Explode gulpfile * Import TypeScript * Explode gulpfile into smaller files * Actual CSS and Font (incomplete) file cache buster 2024-06-21 19:17:32 +00:00			`});`

Use `vfile` instead of `vinyl` 2024-06-27 08:06:39 +00:00			`sink.next(new VFile({ path: "index.html", value: renderDocument(contents) }));`
Style updates 2024-06-27 04:45:39 +00:00			`return Promise.resolve();`
Use rxjs properly 2024-06-27 01:28:17 +00:00			`};`

Style updates 2024-06-27 04:45:39 +00:00			`export const articles = async () => {`
Use rxjs properly 2024-06-27 01:28:17 +00:00			`reloadAssets();`
Switch to deno 2024-06-27 04:22:58 +00:00			`const articles: Article[] = [];`
Use rxjs properly 2024-06-27 01:28:17 +00:00
Style updates 2024-06-27 04:45:39 +00:00			`await lastValueFrom(`
Own task runner 2024-06-27 02:10:50 +00:00			`fromGlob("articles/*/.asciidoc").pipe(`
Use rxjs properly 2024-06-27 01:28:17 +00:00			`mergeMap(`
			`(file) =>`
Use `vfile` instead of `vinyl` 2024-06-27 08:06:39 +00:00			`new Observable<VFile>((subscriber) => {`
Use rxjs properly 2024-06-27 01:28:17 +00:00			`transformArticle(`
Use `vfile` instead of `vinyl` 2024-06-27 08:06:39 +00:00			`subscriber,`
Use rxjs properly 2024-06-27 01:28:17 +00:00			`articles,`
			`)(file).then(() => subscriber.complete());`
			`}),`
			`),`
			`onComplete(finalizeArticles(articles)),`
Own task runner 2024-06-27 02:10:50 +00:00			`mergeMap(dest("dist")),`
			`),`
Style updates 2024-06-27 04:45:39 +00:00			`);`
Use rxjs properly 2024-06-27 01:28:17 +00:00			`};`