vowel 0.1.12 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vowel",
-	"version": "0.1.12",
+	"version": "0.1.13",
 	"bin": "./bin.js",
 	"scripts": {
 		"dev": "vite dev",
@@ -31,11 +31,18 @@
 		"prettier": "^3.0.0",
 		"prettier-plugin-svelte": "^3.0.0",
 		"remark": "^15.0.1",
+		"remark-admonitions": "^1.2.1",
+		"remark-directive": "^3.0.0",
 		"remark-frontmatter": "^5.0.0",
+		"remark-gfm": "^4.0.0",
 		"remark-html": "^16.0.1",
+		"remark-images": "^4.0.0",
+		"remark-parse": "^11.0.0",
+		"remark-rehype": "^11.1.0",
 		"spectre.css": "^0.5.9",
 		"svelte": "^5.0.0-next.121",
 		"typescript": "^5.0.0",
+		"unified": "^11.0.4",
 		"url-metadata": "^3.4.9",
 		"vite": "^5.0.12",
 		"xml": "^1.0.1"

package/src/lib/components/DefaultStyles.svelte

@@ -132,6 +132,8 @@
 		img {
 			border-style: none;
 			height: auto;
+			border-radius: 5px;
+			overflow: hidden;
 		}
 
 		/* Layout */
@@ -352,7 +354,9 @@
 			padding-right: 0;
 		}
 
-		:where(pre, blockquote, dl, figure, table, p, ul, ol, form, article, section):not(:last-child) {
+		:where(pre, blockquote, dl, figure, table, p, ul, ol, form, article, section, aside):not(
+				:last-child
+			) {
 			margin-bottom: 2.5rem;
 		}
 
@@ -513,5 +517,53 @@
 		article.item dl.icon {
 			order: -1;
 		}
+
+		aside.note {
+			&.note {
+				--icon: 'ℹ️';
+				--rgb: 71, 139, 230;
+			}
+			&.tip {
+				--icon: '💡';
+				--rgb: 87, 171, 90;
+			}
+			&.important {
+				--icon: '💬';
+				--rgb: 152, 110, 226;
+			}
+			&.warning {
+				--icon: '⚠️';
+				--rgb: 198, 144, 38;
+			}
+			&.caution {
+				--icon: '⛔️';
+				--rgb: 229, 83, 75;
+			}
+
+			border-left: 3px solid rgb(var(--rgb));
+			padding: 1.5rem 2rem;
+			background: rgba(var(--rgb), 0.04);
+
+			h2 {
+				margin: 0 0 0.5em 0;
+				font-size: 1.1em;
+				color: rgb(var(--rgb));
+			}
+
+			h2:before {
+				font-size: 0.8em;
+				margin-right: 0.7rem;
+				opacity: 0.9;
+			}
+
+			h2:before {
+				content: var(--icon);
+			}
+		}
+
+		li.checked,
+		li.unchecked {
+			padding-left: 0.8rem;
+		}
 	}
 </style>

package/src/lib/components/Markdown/index.svelte

@@ -11,7 +11,11 @@
 
 	let { props } = $props();
 
-	let { ast, level, website, format } = $derived(props);
+	let { ast, level, website, format, identifier } = $derived(props);
+
+	if (identifier) {
+		console.log(identifier);
+	}
 
 	function getElement(node) {
 		if (node.type === 'heading') {
@@ -23,16 +27,33 @@
 			paragraph: 'p',
 			strong: 'strong',
 			list: node.ordered ? 'ol' : 'ul',
-			listItem: 'li',
+			// listItem: 'li',
 			blockquote: 'blockquote',
 			inlineCode: 'code',
 			code: 'pre',
 			figure: 'figure',
-			figcaption: 'figcaption'
+			figcaption: 'figcaption',
+			delete: 's',
+			table: 'table',
+			tableRow: 'tr',
+			tableCell: 'td'
 		};
 
-		return elements[node.type];
+		// Handle list item separately
+		// Handle `pre` properly
+		// Handle `footnoteDefinition` and `footnoteReference`
+
+		if (elements[node.type]) return elements[node.type];
+		console.log(node);
 	}
+
+	const noteTypes = {
+		tip: 'Tip',
+		note: 'Note',
+		important: 'Important',
+		warning: 'Warning',
+		caution: 'Caution'
+	};
 </script>
 
 {#if ast}
@@ -70,9 +91,54 @@
 			<Image {node} />
 		{:else if node.type === 'url'}
 			<LinkPreview url={node.value} metadata={node.metadata} {format} />
+		{:else if node.type === 'listItem'}
+			{@const isChecklistItem = node.hasOwnProperty('checked')}
+			{#if isChecklistItem}
+				<li
+					class={`checklist-item ${node.checked ? 'checked' : 'unchecked'}`}
+					style:list-style-type={`"${node.checked ? '☑' : '☐'}"`}
+				>
+					<svelte:self props={{ ast: node.children, level, format }} />
+				</li>
+			{:else}
+				<li>
+					<svelte:self props={{ ast: node.children, level, format }} />
+				</li>
+			{/if}
+		{:else if node.type === 'footnoteReference'}
+			<sup
+				><a
+					href={`#footnote-definition-${node.identifier}`}
+					id={`footnote-${node.identifier}`}
+					aria-describedby="footnotes">{node.label}</a
+				></sup
+			>
+		{:else if node.type === 'footnotes'}
+			<section id="footnotes">
+				<h2>Footnotes</h2>
+				<ol>
+					{#each node.children as footnote}
+						<li id={`footnote-definition-${footnote.identifier}`}>
+							<svelte:self
+								props={{ ast: footnote.children, level, format, identifier: footnote.identifier }}
+							/>
+						</li>
+					{/each}
+				</ol>
+			</section>
+		{:else if node.type === 'containerDirective' && noteTypes[node.name]}
+			<aside class={`note ${node.name}`}>
+				<h2>
+					{noteTypes[node.name]}
+				</h2>
+				<svelte:self props={{ ast: node.children, level, format }}></svelte:self>
+			</aside>
 		{:else if node.children}
 			<svelte:element this={getElement(node)}>
 				<svelte:self props={{ ast: node.children, level, format }} />
+				{#if identifier}
+					<a href={`#footnote-${identifier}`} aria-label="Back to content">↩</a>
+				{/if}
 			</svelte:element>
 		{:else if node.type === 'text'}
 			<Text {node} />

package/src/lib/utilities/readMarkdownFile.js

@@ -1,7 +1,9 @@
 import fs from 'fs/promises';
 import { remark } from 'remark';
 import remarkFrontmatter from 'remark-frontmatter';
+import remarkDirective from 'remark-directive';
 import remarkHTML from 'remark-html';
+import remarkGFM from 'remark-gfm';
 import yaml from 'js-yaml';
 import { toString } from 'mdast-util-to-string';
 import path from 'path';
@@ -102,7 +104,32 @@ export default async function readMarkdownFile(filePath, cache) {
 	const parsedMarkdown = markdownParser.parse(fileContent);
 	const frontmatterNode = parsedMarkdown.children.find((node) => node.type === 'yaml');
 	const frontmatter = frontmatterNode?.type === 'yaml' ? parseFrontmatter(frontmatterNode) : {};
-	const ast = remark().use(remarkFrontmatter).parse(fileContent);
+	const ast = remark()
+		.use(remarkDirective)
+		.use(remarkFrontmatter)
+		.use(remarkGFM)
+		.parse(fileContent);
+
+	const footnotes = [];
+
+	for (let i = 0; i < ast.children.length; i++) {
+		if (ast.children[i].type === 'footnoteDefinition') {
+			footnotes.push(ast.children[i]);
+		}
+	}
+
+	if (footnotes.length) {
+		ast.children.push({
+			type: 'footnotes',
+			children: footnotes
+		});
+	}
+
+	// ast.children.sort((a, b) => {
+	// 	if (a.type !== 'footnoteDefinition' && b.type === 'footnoteDefinition') return -1;
+	// 	return 0;
+	// });
+
 	const filteredAST = ast.children.filter((child) => child.type !== 'yaml');
 
 	const imputedTitle = imputeTitleFromAST(filteredAST);