vowel 0.1.12 → 0.1.14

package/README.md

@@ -1,136 +1,31 @@
-## MVP
+# Vowel
 
-- [x] Add all element types supported in Obsidian to markdown
-- [x] Add rich link previews
-- [x] Add RSS
-- [x] Add robots.txt
-  - [x] AI
-  - [x] Search
-  - [x] Image
-- [x] Typing
-- [x] Add sitemap
-- [x] Make taxonomies linkable in frontmatter (if a corresponding folder exists)
-- [x] Add header metadata (meta tags)
-- [x] CSS handling
-- [x] Favicon handling
-- [x] Docs
-- [x] Build action
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
 
-## V2
+The easiest way to code your own website.
 
-- [x] Fallback homepages
-- [ ] Create post list element (`#tags/blue`, `@tags/blue`, `~tags/blue`)
-- [x] Better favicon and styles handling
-- [ ] Ignore README files
-- [ ] Add more header metadata
-- [ ] Define folder settings
-  - [ ] Title
-  - [ ] Breadrumb
-- [x] Define special page properties
-  - [x] Title
-  - [x] Description
-  - [x] Meta image
-  - [x] Date
-  - [ ] Modified date
-  - [ ] Tags
-  - [ ] Author/Authors
-- [ ] Make file names kebab-cased for URLs and links
-- [ ] Add hidden routes (`$`)
-- [ ] Image alt text
-- [ ] Code highlighter
-- [x] Deploy action (Vercel)
-- [ ] Add anchor links for headings
-- [ ] Post TOC
-- [ ] GitHub-style notes
-- [ ] Add in-browser search
-- [x] Figure out how to stop components from remounting on every change
-- [ ] Make RSS optional
-- [ ] Pagination
-- [ ] Demote headings global option
+[Try it on StackBlitz](https://stackblitz.com/~/github.com/samlfair/vowel-site?file=home.md).
 
-## Wish list
-
-- [ ] Automatic file creation
-- [ ] Image serving and optimization
-- [ ] GUI
-- [ ] More deploy actions
-- [ ] Optional JSON interactivity (ratings, comments, SubPubHub)
-- [ ] Redirects
-- [ ] Advanced markdown
-  - [ ] Highlight
-  - [ ] Sanitize
-  - [ ] Tables
-  - [ ] Strike
-  - [ ] Task lists
-  - [ ] Footnotes
-  - [ ] Mermaid
-  - [ ] Math
-  - [ ] Wikilinks
-
-## Ideas
-
-https://github.com/arobase-che/remark-attr
-https://github.com/wataru-chocola/remark-definition-list
-https://github.com/FinnRG/remark-mentions
-https://github.com/remarkjs/remark-toc
-
-- Docusaurus
-- MkDocs
-- Coolify
-- NodeGui
-
-https://www.nngroup.com/articles/breadcrumb-navigation-useful/
-https://www.nngroup.com/articles/url-as-ui/
-
-CSS Frameworks:
-
-- Open Props
-- Pico
-- Milligram
-- Spectre
-
-## Docs
-
-Welcome to Vowel! This project is under development.
-
-Vowel is a Really Simple Static Site Generator. Write Markdown files, and Vowel will generate a website for you. Eventually, you will also be able to write a `style.css` file to style your website. When complete, Vowel will generate:
-
-- An RSS feed
-- A sitemap
-- Rich link previews (internal and external)
-- Post lists
-- Navigation
-- Optimized images
-- Metadata
-- And more
-
-Each file in Vowel is a page. Index pages are called `home.md`.
+Turn a folder of Markdown files into a website by running one command:
 
 ```
-.
-├── home.md
-├── settings.md
-├── about.md
-└── posts/
-    ├── home.md
-    ├── red-car.md
-    ├── blue-true.md
-    └── green-van.md
+npx -y -p svelte@next -p vowel@latest npx vowel
 ```
 
-In the above project, `/home.md` is the website homepage. `about.md` is `/about`, `/posts/home.md` is the blog homepage, `/blog`, and `/posts/red-car.md` is a blog post, `/posts/red-car`.
+No installs. No config.
 
-Every folder must have an index page. That means that there are two ways to represent a page:
+Create a blog, a documentation site, a landing page, a wiki (whatever you want), using just Markdown and CSS.
 
-- `/example-page.md`
-- `/example-page/home.md`
-  Both of the above will generate the `/example-page` URL. You cannot have both files.
+No HTML.
 
-At the root of a project, a `settings.md` file defines global configurations, like your site title. It can have the following properties:
+No JavaScript.
 
-- `title`: Website title
-- `breadcrumb`: The root breadcrumb
+[Read the docs](https://vowel.cc/docs).
 
-Each folder can also have a `settings.md` file, with the following properties:
+For comments, questions, bugs, and contributions, please reach out to me on Twitter: [@samlfair](https://twitter.com/samlfair).
 
-- `breadcrumb`: The breadcrumb for the folder
+[npm-version-src]: https://img.shields.io/npm/v/vowel/latest.svg
+[npm-version-href]: https://npmjs.com/package/vowel
+[npm-downloads-src]: https://img.shields.io/npm/dm/vowel.svg
+[npm-downloads-href]: https://npmjs.com/package/vowel

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vowel",
-	"version": "0.1.12",
+	"version": "0.1.14",
 	"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/server.js

@@ -46,21 +46,13 @@ async function buildProject() {
 	let projectData = null;
 
 	try {
-		console.log({ config });
 		if (existsSync(projectJsonPath)) {
-			console.log('inside');
 			const data = await readFile(projectJsonPath, 'utf-8');
-			console.log({ data });
 			projectData = JSON.parse(data);
 		}
 
-		console.log({ projectData });
-		console.log('Building...');
-
 		await build(config);
 
-		console.log('Build completed.');
-
 		if (projectData !== null) {
 			await mkdir(vercelDirPath, { recursive: true });
 			await writeFile(projectJsonPath, JSON.stringify(projectData, null, 2), 'utf-8');

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;
 		}
 
@@ -448,7 +452,7 @@
 		/* Sidebar */
 
 		.sidebar {
-			margin: auto;
+			margin-inline: auto;
 		}
 
 		/* Footer */
@@ -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,7 @@
 
 	let { props } = $props();
 
-	let { ast, level, website, format } = $derived(props);
+	let { ast, level, website, format, identifier } = $derived(props);
 
 	function getElement(node) {
 		if (node.type === 'heading') {
@@ -23,16 +23,32 @@
 			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];
 	}
+
+	const noteTypes = {
+		tip: 'Tip',
+		note: 'Note',
+		important: 'Important',
+		warning: 'Warning',
+		caution: 'Caution'
+	};
 </script>
 
 {#if ast}
@@ -70,9 +86,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);

package/src/routes/[...path]/+layout.server.js

@@ -3,6 +3,10 @@ import { access } from 'fs/promises';
 import { constants } from 'fs';
 import { normalize, join, basename } from 'path';
 import { dev } from '$app/environment';
+import mri from 'mri';
+
+const args = mri(process.argv);
+const isBuild = args._.includes('build');
 
 export const prerender = true;
 export const csr = dev;
@@ -24,7 +28,7 @@ async function checkFileExists(filePath, homeDir) {
 export async function load() {
 	// const startLoad = performance.now();
 	const now = Date.now();
-	const contentCacheDuration = 60000; // Cache for  1 minute
+	const contentCacheDuration = isBuild ? 60000 : 0; // Cache for  1 second
 	const initialURLCache = await loadCache($home[0]);
 
 	const cssExists = await checkFileExists(normalize('/assets/styles.css'), $home[0]);

package/src/routes/[...path]/+page.svelte

@@ -6,7 +6,7 @@
 	import { error } from '@sveltejs/kit';
 	import { getFolder, getFolderLabel } from '../../lib/utilities';
 	import { page as pageStore } from '$app/stores';
-	import ConditionalWrapper from '../../lib/components/ConditionalWrapper.svelte';
+	import { goto, invalidate, invalidateAll } from '$app/navigation';
 
 	let { data } = $props();
 
@@ -56,16 +56,34 @@
 
 	const favicon = getFavicon();
 
+	let key = $state(Date.now());
+
 	$effect(() => {
 		// Update website on file change
 		if (import.meta.hot) {
 			import.meta.hot.on('vowel:update', ({ path, file }) => {
 				let updatedPage = getPage(website, path);
+				if (!updatedPage) {
+					invalidateAll().then(() => {
+						window.location.reload();
+					});
+				}
 
 				for (const key in file) {
+					if (!updatedPage[key]) updatedPage[key] = {};
 					updatedPage[key] = file[key];
 				}
 			});
+			import.meta.hot.on('vowel:refresh', () => {
+				console.log('Refresh');
+				invalidateAll().then(() => {
+					console.log(website);
+					// location.reload();
+					// goto(window.location.href);
+					// key = Date.now();
+					window.location.reload();
+				});
+			});
 		}
 	});
 </script>
@@ -106,7 +124,7 @@
 		{#if website._.slogan}
 			<p class="slogan">{website._.slogan}</p>
 		{/if}
-		<Nav folder={data.website} segments={data.path.split('/')} />
+		<Nav folder={website} segments={data.path.split('/')} />
 		<nav class="breadcrumbs" aria-label="Breadcrumb">
 			<Breadcrumbs level={0} />
 		</nav>
@@ -115,7 +133,7 @@
 		<Page level={0} {page} {website} path={data.path} />
 	</main>
 	<nav class="sidebar">
-		<Sitemap section={data.website} segments={data.path.split('/')} root />
+		<Sitemap section={website} segments={data.path.split('/')} root />
 	</nav>
 	<footer>
 		© {website._.author ? website._.author + ' ' : ''}

package/vite.config.js

@@ -23,7 +23,16 @@ export default defineConfig({
 			name: 'markdown:watch',
 			configureServer(server) {
 				server.watcher.add(homeDir);
+				server.watcher.on('add', () => {
+					console.log('Add');
+					server.ws.send('vowel:refresh');
+				});
+				server.watcher.on('unlink', () => {
+					console.log('unlink');
+					server.ws.send('vowel:refresh');
+				});
 				server.watcher.on('change', async (homePath, stats) => {
+					console.log('change');
 					if (homePath.endsWith('.md')) {
 						// Remove `.md`
 						const cache = await loadCache(homeDir);