fix: improve directive handling (#248)

Author: ignatiusmb

workspace/aubade/src/artisan/example.spec.ts

@@ -712,13 +712,13 @@ describe('libretto', ({ concurrent: it }) => {
 		'comment#inline/3': ['a <!-- comment b', '<p>a &lt;!– comment b</p>'],
 
 		'directive#youtube': [
-			'@youtube{id=7TovqLDCosk caption="hitoribocchi tokyo"}',
+			'@youtube{id=7TovqLDCosk caption="[hitoribocchi tokyo](https://music.youtube.com/watch?v=7TovqLDCosk) by kessoku band"}',
 			[
 				'<figure>',
 				'<div data-aubade="youtube">',
 				'<iframe src="https://www.youtube-nocookie.com/embed/7TovqLDCosk" title="YouTube video player" loading="lazy" frameborder="0" allowfullscreen allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"></iframe>',
 				'</div>',
-				'<figcaption>hitoribocchi tokyo</figcaption>',
+				'<figcaption><a href="https://music.youtube.com/watch?v=7TovqLDCosk">hitoribocchi tokyo</a> by kessoku band</figcaption>',
 				'</figure>',
 			].join('\n'),
 		],
@@ -734,7 +734,7 @@ describe('libretto', ({ concurrent: it }) => {
 			].join('\n'),
 		],
 		'directive#youtube/newlines': [
-			['@youtube{', '  id=7TovqLDCosk', '  caption="hitoribocchi tokyo"', '}'].join('\n'),
+			'@youtube{\n  id=7TovqLDCosk\n  caption="hitoribocchi tokyo"\n}',
 			[
 				'<figure>',
 				'<div data-aubade="youtube">',
@@ -755,7 +755,7 @@ describe('libretto', ({ concurrent: it }) => {
 			].join('\n'),
 		],
 		'directive#youtube/series': [
-			'@youtube{series="PLZRRxQcaEjA4qyEuYfAMCazlL0vQDkIj2" caption="Mind Field: Season 1"}',
+			'@youtube{series=PLZRRxQcaEjA4qyEuYfAMCazlL0vQDkIj2 caption="Mind Field: Season 1"}',
 			[
 				'<figure>',
 				'<div data-aubade="youtube">',
@@ -765,6 +765,17 @@ describe('libretto', ({ concurrent: it }) => {
 				'</figure>',
 			].join('\n'),
 		],
+		'directive#youtube/timestamp': [
+			'@youtube{id="B3akM3m_tz0?t=37" caption="Guitar, Loneliness and Blue Planet"',
+			[
+				'<figure>',
+				'<div data-aubade="youtube">',
+				'<iframe src="https://www.youtube-nocookie.com/embed/B3akM3m_tz0?t=37" title="YouTube video player" loading="lazy" frameborder="0" allowfullscreen allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"></iframe>',
+				'</div>',
+				'<figcaption>Guitar, Loneliness and Blue Planet</figcaption>',
+				'</figure>',
+			].join('\n'),
+		],
 
 		'directive#video': [
 			'@video{src="./video.mp4" caption="local video"}',

workspace/aubade/src/artisan/index.ts

@@ -6,9 +6,8 @@ import { escape } from './utils.js';
 
 export type Director = (panel: {
 	data: Extract<Token, { type: 'aubade:directive' }>['meta']['data'];
-	annotate: typeof annotate;
+	annotate(source: string): string;
 	print(...lines: Array<string | false>): string;
-	render(token: Token): string;
 	sanitize: typeof escape;
 }) => string;
 
@@ -37,12 +36,9 @@ export function forge({ directive = {}, renderer = {}, transform = {} }: Options
 			if (!transform) throw new Error(`Unknown directive type: ${meta.type}`);
 			return transform({
 				data: meta.data,
-				annotate,
-				render,
+				annotate: (source) => annotate(source).map(render).join(''),
+				print: (...lines) => lines.flatMap((l) => (!l ? [] : l)).join('\n'),
 				sanitize,
-				print(...lines) {
-					return lines.flatMap((l) => (!l ? [] : l)).join('\n');
-				},
 			});
 		},
 	} satisfies Options['renderer'];
@@ -74,7 +70,8 @@ export function forge({ directive = {}, renderer = {}, transform = {} }: Options
 				function html<T extends Token['type']>(token: Extract<Token, { type: T }>): string {
 					const resolve: Resolver<T> = { ...resolver, ...overrides }[token.type] as any;
 					if (!resolve) throw new Error(`Unknown token type: ${token.type}`);
-					return resolve({ token, render: html, sanitize: escape });
+					const visited = transform[token.type] ? walk(token, transform) : token;
+					return resolve({ token: visited, render: html, sanitize: escape });
 				}
 				return stream.map(html).join('\n');
 			},

workspace/aubade/src/artisan/registry.ts

@@ -103,7 +103,7 @@ export function directive({ cursor }: Context): null | {
 				data[clean(name)] = String(value === '' || value);
 				name = value = '';
 				equals = false;
-			} else if (char === '=') {
+			} else if (!quoted && char === '=') {
 				equals = true;
 			} else if (quoted || char !== ' ') {
 				if (!equals) name += char;

workspace/aubade/src/artisan/resolver.ts

@@ -1,7 +1,7 @@
 import type { Options } from './index.js';
 
 export const base = {
-	youtube({ data, annotate, print, render, sanitize }) {
+	youtube({ data, annotate, print, sanitize }) {
 		const id = sanitize(data.series || data.id || '');
 		const prefix = data.series ? 'videoseries?list=' : '';
 		const src = `https://www.youtube-nocookie.com/embed/${prefix}${id}`;
@@ -13,7 +13,7 @@ export const base = {
 			'allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; web-share"',
 			'referrerpolicy="strict-origin-when-cross-origin"',
 		];
-		const text = annotate(data.caption || 'youtube video').map(render);
+		const text = annotate(data.caption || 'youtube video');
 		return print(
 			data.disclosure ? '<details>' : '<figure>',
 			data.disclosure && `<summary>${text}</summary>`,
@@ -24,10 +24,10 @@ export const base = {
 			data.disclosure ? '</details>' : '</figure>',
 		);
 	},
-	video({ data, annotate, print, render, sanitize }) {
+	video({ data, annotate, print, sanitize }) {
 		const src = sanitize(data.src || '');
 		const type = sanitize(data.type || 'video/mp4').toLowerCase();
-		const text = annotate(data.caption || 'video').map(render);
+		const text = annotate(data.caption || 'video');
 		return print(
 			data.disclosure ? '<details>' : '<figure>',
 			data.disclosure && `<summary>${text}</summary>`,

workspace/content/artisan/+article.md

@@ -34,9 +34,8 @@ engrave('hello world').html();
 ```typescript
 export type Director = (panel: {
 	data: Extract<Token, { type: 'aubade:directive' }>['meta']['data'];
-	annotate: typeof annotate;
+	annotate(source: string): string;
 	print(...lines: Array<string | false>): string;
-	render(token: Token): string;
 	sanitize: typeof escape;
 }) => string;