blog/src/plugins/rehype.js

import { visit, CONTINUE, EXIT, SKIP, } from 'unist-util-visit';
import { find } from 'unist-util-find';
import { toText } from 'hast-util-to-text';
import { makeSlug } from '../lib/utils.js';

import {writeFileSync} from 'node:fs';
import {toHtml} from 'hast-util-to-html';


export function localRehype() {
    return (tree, vfile) => {
        const needsDropcap = vfile.data.fm.dropcap !== false
        let dropcapAdded = false;

        let sidenotesCount = 0;
        let moduleScript;
        let imports = new Set();
        if (needsDropcap) {
            imports.add("import Dropcap from '$lib/Dropcap.svelte';");
        }

        visit(tree, node => {
            // add slugs to headings
            if (isHeading(node)) {
                processHeading(node);
                imports.add("import Heading from '$lib/Heading.svelte';");
                return SKIP;
            }

            // mdsvex adds a <script context="module"> so we just hijack that for our own purposes
            if (isModuleScript(node)) {
                moduleScript = node;
            }

            // convert first letter/word of first paragraph to <Dropcap word="{whatever}">
            if (needsDropcap && !dropcapAdded && isParagraph(node)) {
                addDropcap(node);
                dropcapAdded = true;
            }

            // add `count` prop to each <Sidenote> component
            if (isSidenote(node)) {
                // increment the counter first so that the count starts at 1
                sidenotesCount += 1;
                addSidenoteCount(node, sidenotesCount);
            }
        });

        // insert our imports at the top of the `<script context="module">` tag
        if (imports.size > 0) {
            const script = moduleScript.value;
            // split the script where the opening tag ends
            const i = script.indexOf('>');
            const openingTag = script.slice(0, i + 1);
            const remainder = script.slice(i + 1);

            // mdvsex uses tabs so we will as well
            const importScript = Array.from(imports).join('\n\t');

            moduleScript.value = `${openingTag}\n\t${importScript}${remainder}`;
        }

        // const name = vfile.filename.split('/').findLast(() => true);
        // writeFileSync(`scratch/${name}.json`, JSON.stringify(tree, undefined, 4));
    }
}


function processHeading(node) {
    const level = node.tagName.slice(1);
    node.tagName = 'Heading';
    node.properties.level = level;
    node.properties.id = makeSlug(toText(node));
}


function addDropcap(par) {
    let txtNode = find(par, {type: 'text'});
    const i = txtNode.value.search(/\s/);
    const firstWord = txtNode.value.slice(0, i);
    const remainder = txtNode.value.slice(i);

    par.children.unshift({
        type: 'raw',
        value: `<Dropcap word="${firstWord}" />`,
    });
    txtNode.value = remainder;
}


function addSidenoteCount(node, count) {
    // get the index of the closing >
    const i = node.value.search(/>\s*$/);
    if (i < 0) {
        throw new Error('Failed to add counter to element, closing angle bracket not found.');
    }
    // splice in the count prop
    node.value = `${node.value.slice(0, i)} count={${count}}>`;
}


function isHeading(node) {
    return node.type === 'element' && node.tagName.match(/h[1-6]/);
}

function isModuleScript(node) {
    return node.type === 'raw' && node.value.match(/^<script context="module">/);
}

function isParagraph(node) {
    return node.type === 'element' && node.tagName === 'p';
}

function isSidenote(node) {
    return node.type === 'raw' && node.value.match(/<\s*Sidenote/);
}