v6 / lib / shortcodes.js

import { execSync } from 'node:child_process';

const html = (strings, ...values) => String.raw({ raw: strings }, ...values);

function htmlEscape(s) {
	const lookup = {
		'&': "&",
		'"': """,
		'\'': "'",
		'<': "&lt;",
		'>': "&gt;"
	};
	return s.replace( /[&"'<>]/g, c => lookup[c] );
}

/** @param {import('@11ty/eleventy').UserConfig} eleventyConfig */
export function setupShortcodes(eleventyConfig) {
	eleventyConfig.addPairedShortcode('code', (code, lang, filename) => {
		let highlighted;
		if (lang != null && lang !== "" && lang !== "plain") {
			highlighted = execSync(`arborium --html --lang ${lang}`, {
				input: code.trim(),
				encoding: 'utf-8',
			})
		}

		const caption = lang || filename
			? html`<figcaption>
					${lang ? html`<span class="lang code-lang-tag">${lang}</span>` : ''}
					${filename ? html`<span class="filename code-filename-tag">${filename}</span>` : ''}
				</figcaption>`
			: ''

		return html`
		<figure class="code-block">
			${caption}
			<pre><code>${highlighted ?? htmlEscape(code.trim())}</code></pre>
		</figure>`
	})

	eleventyConfig.addPairedShortcode('speech', (contents, option) => {
		return html`
		<aside class="speech-box">
			<div class="speech-character character-${option}">
				<div class="glass glassleft"></div>
				<div class="eye glassleft"></div>

				<div class="glass glassright"></div>
				<div class="eye glassright"></div>
				<div class="nose"></div>
			</div>
			<p class="speech-content">${contents}</p>
		</aside>`
	})
}