feat: disclosure directive (#250)

Author: ignatiusmb

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

@@ -778,7 +778,7 @@ describe('libretto', ({ concurrent: it }) => {
 		],
 
 		'directive#video': [
-			'@video{src="./video.mp4" caption="local video"}',
+			'@video{src=./video.mp4 caption="local video"}',
 			[
 				'<figure>',
 				'<div data-aubade="video">',
@@ -792,26 +792,26 @@ describe('libretto', ({ concurrent: it }) => {
 			].join('\n'),
 		],
 		'directive#video/disclosure': [
-			'@video{disclosure src="./video.mp4" caption="local video"}',
+			'@video{disclosure src=<http://127.0.0.1/video.mp4> caption="local video"}',
 			[
 				'<details>',
 				'<summary>local video</summary>',
 				'<div data-aubade="video">',
 				'<video controls preload="metadata">',
-				'<source src="./video.mp4" type="video/mp4" />',
+				'<source src="http://127.0.0.1/video.mp4" type="video/mp4" />',
 				'Your browser does not support HTML5 video.',
 				'</video>',
 				'</div>',
 				'</details>',
 			].join('\n'),
 		],
 		'directive#video/no-caption': [
-			'@video{src="./video.mp4"}',
+			'@video{src=[http://127.0.0.1/video.mp4]}',
 			[
 				'<figure>',
 				'<div data-aubade="video">',
 				'<video controls preload="metadata">',
-				'<source src="./video.mp4" type="video/mp4" />',
+				'<source src="http://127.0.0.1/video.mp4" type="video/mp4" />',
 				'Your browser does not support HTML5 video.',
 				'</video>',
 				'</div>',

workspace/aubade/src/artisan/registry.ts

@@ -130,8 +130,6 @@ export function directive({ cursor }: Context): null | {
 		if (text[0] !== '"' && text[0] !== "'") return text;
 		return last === text[0] ? text.slice(1, -1) : text;
 	}
-
-	// 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>'
 }
 
 export function markup({ compose, cursor }: Context): null | {

workspace/aubade/src/artisan/resolver.ts

@@ -1,6 +1,16 @@
 import type { Options } from './index.js';
 
 export const base = {
+	disclosure({ data, annotate, print }) {
+		return print(
+			`<details${data.open === 'true' ? ' open' : ''}>`,
+			`<summary>${annotate(data.summary || 'more')}</summary>`,
+			'<div data-aubade="disclosure">',
+			annotate(data.body || ''),
+			'</div>',
+			'</details>',
+		);
+	},
 	youtube({ data, annotate, print, sanitize }) {
 		const id = sanitize(data.series || data.id || '');
 		const prefix = data.series ? 'videoseries?list=' : '';
@@ -25,15 +35,20 @@ export const base = {
 		);
 	},
 	video({ data, annotate, print, sanitize }) {
-		const src = sanitize(data.src || '');
+		let source = data.src || '';
+		const pairs: Record<string, string> = { '<': '>', '[': ']' };
+		if (pairs[data.src[0]] === data.src[data.src.length - 1]) {
+			source = data.src.slice(1, -1);
+		}
+
 		const type = sanitize(data.type || 'video/mp4').toLowerCase();
 		const text = annotate(data.caption || 'video');
 		return print(
 			data.disclosure ? '<details>' : '<figure>',
 			data.disclosure && `<summary>${text}</summary>`,
 			'<div data-aubade="video">',
 			'<video controls preload="metadata">',
-			`<source src="${src}" type="${type}" />`,
+			`<source src="${sanitize(source)}" type="${type}" />`,
 			sanitize(data.fallback || 'Your browser does not support HTML5 video.'),
 			'</video>',
 			'</div>',

workspace/content/libretto/+article.md

@@ -64,6 +64,14 @@ Directives extend Markdown with inline metadata. They begin with `@`, followed b
 - **Separation**: properties are separated by spaces or newlines.
 - **End**: the directive closes with `}`.
 
+### `@disclosure`
+
+| Attribute | Type    | Description                            |
+| --------- | ------- | -------------------------------------- |
+| `summary` | string  | Text for `<summary>` (default: "more") |
+| `body`    | string  | Content inside the disclosure          |
+| `open`    | boolean | If `true`, the disclosure is expanded  |
+
 ### `@youtube`
 
 | Attribute          | Type    | Description                            |

workspace/website/src/routes/content/builder.ts

@@ -27,8 +27,8 @@ export const DATA = {
 				doc.tokens = doc.visit({
 					'aubade:directive'(token) {
 						if (token.meta.type !== 'video') return token;
-						const { source } = token.meta.data;
-						token.meta.data.source = materialize(source);
+						const { src } = token.meta.data;
+						token.meta.data.src = materialize(src);
 						return token;
 					},
 					'block:image'(token) {