vowel 0.1.13 → 0.1.15

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.13",
+	"version": "0.1.15",
 	"bin": "./bin.js",
 	"scripts": {
 		"dev": "vite dev",

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/app.html

@@ -3,6 +3,26 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<style>
+			html {
+				-webkit-text-size-adjust: 100%;
+				margin: 0;
+				font-size: 62.5%;
+			}
+
+			body {
+				font-size: 1.6rem;
+				line-height: 1.5;
+				-webkit-font-smoothing: antialiased;
+				font-weight: 400;
+				margin: 0;
+			}
+
+			.container {
+				height: 100vh;
+				overflow-y: scroll;
+			}
+		</style>
 		%sveltekit.head%
 	</head>
 

package/src/lib/components/DefaultStyles.svelte

@@ -4,7 +4,7 @@
 		Barebones, Basic.css, Pico, Typeplate, Simple.css, and more
 	*/
 
-	:global {
+	.theme-default {
 		/* Variables */
 
 		:root {
@@ -48,19 +48,6 @@
 			margin: 0;
 		}
 
-		html {
-			line-height: 1.15;
-			-webkit-text-size-adjust: 100%;
-			font-size: 62.5%;
-		}
-
-		body {
-			font-size: 1.6rem;
-			line-height: 1.5;
-			-webkit-font-smoothing: antialiased;
-			font-weight: 400;
-		}
-
 		main,
 		img,
 		details,
@@ -138,13 +125,8 @@
 
 		/* Layout */
 
-		.container {
-			height: 100vh;
-			overflow-y: scroll;
-			font-family: var(--font-sans);
-		}
-
 		.page {
+			font-family: var(--font-sans);
 			max-width: 60ch;
 			margin: auto;
 			min-height: 100vh;
@@ -452,7 +434,7 @@
 		/* Sidebar */
 
 		.sidebar {
-			margin: auto;
+			margin-inline: auto;
 		}
 
 		/* Footer */

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

@@ -13,10 +13,6 @@
 
 	let { ast, level, website, format, identifier } = $derived(props);
 
-	if (identifier) {
-		console.log(identifier);
-	}
-
 	function getElement(node) {
 		if (node.type === 'heading') {
 			return ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'div'][node.depth - 1];
@@ -44,7 +40,6 @@
 		// Handle `footnoteDefinition` and `footnoteReference`
 
 		if (elements[node.type]) return elements[node.type];
-		console.log(node);
 	}
 
 	const noteTypes = {

package/src/lib/components/index.js

@@ -6,4 +6,4 @@ export { default as Page } from './Page.svelte';
 export { default as Sitemap } from './Sitemap.svelte';
 export { default as FrontmatterProperty } from './FrontmatterProperty.svelte';
 export { default as FrontmatterTaxonomy } from './FrontMatterTaxonomy.svelte';
-export { default as DefaultStyles } from './DefaultStyles.svelte';
+// export { default as DefaultStyles } from './DefaultStyles.svelte';

package/src/lib/utilities/createPageClass.js

@@ -1,5 +1,6 @@
-export default function createPageClass(url, type = 'page') {
+export default function createPageClass(url, type = 'page', theme) {
 	if (!url) return 'item';
-	if (url === '/') return 'page home';
+	if (url === '/') return `page home${theme ? ` theme-${theme}` : ''}`;
+	if (type === 'page') return `page ${url.split('/').join(' ')}${theme ? ` theme-${theme}` : ''}`;
 	return type + url.split('/').join(' ');
 }

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

@@ -1,12 +1,12 @@
 <script>
-	import { Nav, Page, Breadcrumbs, Sitemap, DefaultStyles } from '$lib/components/index.js';
+	import { Nav, Page, Breadcrumbs, Sitemap } from '$lib/components/index.js';
 	import { getPage, createPageClass } from '$lib/utilities/index.js';
 	import LinkPreview from '$lib/components/Markdown/LinkPreview.svelte';
 	import getFileLabel from '../../lib/utilities/getFileLabel';
 	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,23 +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(() => {
+					window.location.reload();
+				});
+			});
 		}
 	});
 </script>
 
-<!-- svelte-ignore state_referenced_locally -->
-<!-- svelte-ignore state_referenced_locally -->
-
 <svelte:head>
 	<title>{makePageMetaTitle()}</title>
 	<meta property="”og:url”" content={page.url} />
@@ -91,9 +102,10 @@
 	{/if}
 </svelte:head>
 
-<DefaultStyles />
-
-<div data-sveltekit-preload-data="hover" class={createPageClass(page.url)}>
+<div
+	data-sveltekit-preload-data="hover"
+	class={createPageClass(page.url, null, website._.theme === 'default' ? 'default' : false)}
+>
 	<header>
 		{#if website._.logo}
 			<a href="/" class="site-logo">
@@ -106,7 +118,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,10 +127,558 @@
 		<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 + ' ' : ''}
 		{new Date().getFullYear()}
 	</footer>
 </div>
+
+<style>
+	/* 
+		Inspiration for this stylesheet comes from Normalize.css, Josh Comeau, 
+		Barebones, Basic.css, Pico, Typeplate, Simple.css, and more
+	*/
+
+	:global {
+		body:has(> div > .theme-default) {
+			--font-sans: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue,
+				helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+			--font-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif,
+				Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+			--font-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
+			--text-color: hsl(0, 0%, 13%);
+			--accent-color: hsl(215, 100%, 35%);
+			--accent-color-hover: hsl(215, 76%, 49%);
+			--border-color: hsl(0, 0%, 73%);
+			--main-background: hsl(0, 0%, 100%);
+			--code-background: hsl(0, 0%, 95%);
+			--soft-background: hsl(0, 0%, 95%);
+
+			@media (prefers-color-scheme: dark) {
+				--text-color: hsl(0, 0%, 80%);
+				--accent-color: hsl(194, 76%, 49%);
+				--accent-color-hover: hsl(194, 86%, 57%);
+				--border-color: hsl(0, 0%, 27%);
+				--main-background: hsl(0, 0%, 12%);
+				--code-background: hsl(0, 0%, 5%);
+				--soft-background: hsl(0, 0%, 14%);
+			}
+
+			color: var(--text-color);
+			background: var(--main-background);
+		}
+
+		.theme-default {
+			&.page {
+				font-family: var(--font-sans);
+				max-width: 60ch;
+				margin: auto;
+				min-height: 100vh;
+				display: flex;
+				flex-direction: column;
+				padding: 1rem;
+				overflow-x: hidden;
+			}
+
+			/* 
+			Reset
+			*/
+
+			*,
+			*::before,
+			*::after {
+				box-sizing: border-box;
+			}
+
+			* {
+				margin: 0;
+			}
+
+			main,
+			img,
+			details,
+			picture,
+			video,
+			canvas,
+			svg {
+				display: block;
+				max-width: 100%;
+			}
+
+			summary {
+				display: list-item;
+			}
+
+			hr {
+				box-sizing: content-box;
+				height: 0;
+				overflow: visible;
+			}
+
+			pre {
+				font-family: monospace, monospace;
+				font-size: 1em;
+			}
+
+			a {
+				background-color: transparent;
+			}
+
+			abbr[title] {
+				border-bottom: none;
+				text-decoration: underline;
+				text-decoration: underline dotted;
+			}
+
+			b,
+			strong {
+				font-weight: bolder;
+			}
+
+			code,
+			kbd,
+			samp {
+				font-family: monospace, monospace;
+				font-size: 1em;
+			}
+
+			small {
+				font-size: 80%;
+			}
+
+			sub,
+			sup {
+				font-size: 75%;
+				line-height: 0;
+				position: relative;
+				vertical-align: baseline;
+			}
+
+			sub {
+				bottom: -0.25em;
+			}
+
+			sup {
+				top: -0.5em;
+			}
+
+			img {
+				border-style: none;
+				height: auto;
+				border-radius: 5px;
+				overflow: hidden;
+			}
+
+			/* Layout */
+
+			main {
+				margin-bottom: auto;
+				padding-bottom: 4rem;
+			}
+
+			/* Colors */
+
+			a {
+				color: var(--accent-color);
+			}
+
+			a:hover {
+				color: var(--accent-color-hover);
+			}
+
+			/* Typography */
+
+			p,
+			h1,
+			h2,
+			h3,
+			h4,
+			h5,
+			h6 {
+				overflow-wrap: break-word;
+			}
+
+			h1,
+			h2,
+			h3,
+			h4,
+			h5,
+			h6 {
+				margin-top: 0.5rem;
+				margin-bottom: 1rem;
+				text-rendering: optimizeLegibility;
+				font-weight: 600;
+				line-height: 1.1;
+			}
+			h1 {
+				font-size: 3rem;
+				line-height: 1.2;
+				font-weight: 800;
+			}
+
+			h2 {
+				font-size: 2.6rem;
+				margin-top: 3rem;
+			}
+
+			h3 {
+				font-size: 2rem;
+				margin-top: 3rem;
+			}
+
+			h4 {
+				font-size: 1.44rem;
+			}
+
+			h5 {
+				font-size: 1.15rem;
+			}
+
+			h6 {
+				font-size: 0.96rem;
+			}
+
+			article h1 {
+				font-weight: 600;
+				font-size: 2rem;
+			}
+
+			@media only screen and (max-width: 720px) {
+				h1 {
+					font-size: 2.5rem;
+				}
+
+				h2 {
+					font-size: 2.1rem;
+				}
+
+				h3 {
+					font-size: 1.75rem;
+				}
+
+				h4 {
+					font-size: 1.25rem;
+				}
+			}
+
+			p {
+				margin-top: 0;
+			}
+
+			ol,
+			ul {
+				/* padding-left: 0; */
+				margin-top: 0;
+			}
+
+			ul ul,
+			ul ol,
+			ol ol,
+			ol ul {
+				font-size: 100%;
+				/* margin: 1rem 0 1rem 3rem; */
+			}
+
+			li {
+				margin-bottom: 0.5rem;
+			}
+
+			/* Extra selector for specificity, see below */
+			li > p:not(:last-child) {
+				margin: 0;
+				padding: 0;
+			}
+
+			code {
+				background: var(--code-background);
+				font-size: 0.9em;
+				white-space: nowrap;
+				margin-inline: 0px;
+				padding: 3px 4px;
+				border-radius: 5px;
+			}
+
+			code,
+			mark {
+				-webkit-box-decoration-break: clone;
+				box-decoration-break: clone;
+			}
+
+			pre {
+				background: var(--code-background);
+				padding: 1rem 1.5rem;
+				border-radius: 5px;
+				overflow-x: auto;
+			}
+
+			dt {
+				float: left;
+				margin: 0 20px 0 0;
+				width: 120px;
+				color: #daf2fd;
+				font-weight: 500;
+				text-align: right;
+			}
+
+			dd {
+				margin: 0 0 5px 0;
+				text-align: left;
+			}
+
+			blockquote {
+				margin: 1.5em 0;
+				padding: 0 1.6em 0 1.6em;
+				border-left: 5px solid var(--border-color);
+			}
+
+			a {
+				text-decoration: none;
+			}
+
+			figcaption {
+				margin-top: 0.5rem;
+				font-style: italic;
+			}
+
+			article {
+				border: 1px solid var(--border-color);
+				background: var(--soft-background);
+				padding: 1rem 2rem 1.5rem;
+				border-radius: 0.5rem;
+			}
+
+			article + article {
+				margin-top: 1rem;
+			}
+
+			th,
+			td {
+				padding: 12px 15px;
+				text-align: left;
+				border-bottom: 1px solid var(--border-color-softer);
+			}
+			th:first-child,
+			td:first-child {
+				padding-left: 0;
+			}
+			th:last-child,
+			td:last-child {
+				padding-right: 0;
+			}
+
+			:where(pre, blockquote, dl, figure, table, p, ul, ol, form, article, section, aside):not(
+					:last-child
+				) {
+				margin-bottom: 2.5rem;
+			}
+
+			hr {
+				margin-top: 3rem;
+				margin-bottom: 3.5rem;
+				border-width: 0px;
+				border-top: 1px solid var(--text-color);
+			}
+
+			/* Header */
+
+			header {
+				margin-top: 4rem;
+			}
+
+			nav.top-bar {
+				border: 1px solid var(--border-color);
+				padding: 6px 10px;
+				margin-inline: -3px;
+				border-radius: 5px;
+				display: flex;
+				column-gap: 2rem;
+				row-gap: 0.5rem;
+				flex-wrap: wrap;
+				justify-content: flex-start;
+				background: var(--soft-background);
+			}
+
+			nav.top-bar:has(+ nav.top-bar) {
+				border-bottom: none;
+				border-bottom-left-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+
+			nav.top-bar:has(+ nav.top-bar):after {
+				display: block;
+				content: '';
+				border-bottom: 1px solid var(--border-color);
+				flex-basis: 100%;
+				margin-top: 0.7rem;
+			}
+
+			nav.top-bar + nav.top-bar {
+				border-top-left-radius: 0;
+				border-top-right-radius: 0;
+				border-top: none;
+				margin-top: 0;
+			}
+
+			nav > a {
+				text-wrap: nowrap;
+			}
+
+			header a.site-title {
+				color: unset;
+				text-decoration: none;
+				font-weight: 900;
+				font-size: 2.8em;
+			}
+
+			header .slogan {
+				/* font-family: var(--font-serif); */
+				font-weight: 500;
+			}
+
+			nav :where([aria-current='page'], [aria-current='true']),
+			nav :where([aria-current='page'], [aria-current='true']):hover {
+				text-decoration: none;
+				color: unset;
+				cursor: default;
+			}
+
+			header .breadcrumbs > a:only-child {
+				display: none;
+			}
+
+			header .breadcrumbs {
+				margin-block: 4rem 1rem;
+			}
+
+			header .breadcrumbs a {
+				font-size: 0.9em;
+				text-decoration: none;
+				color: unset;
+			}
+
+			header .breadcrumbs .separator:after {
+				margin-inline: 0.5rem;
+				content: '|';
+			}
+
+			/* Sidebar */
+
+			.sidebar {
+				margin-inline: auto;
+			}
+
+			/* Footer */
+
+			footer {
+				text-align: center;
+				margin-block: 6rem 8rem;
+			}
+
+			/* Pages */
+
+			.page.home > main > h1 {
+				display: none;
+			}
+
+			.page.home .content p:first-child {
+				font-size: 1.2em;
+			}
+
+			section[class*='$'] {
+				display: grid;
+				grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+				grid-auto-rows: auto;
+				grid-gap: 2rem;
+
+				& article {
+					margin: 0;
+				}
+			}
+
+			article.item {
+				display: grid;
+				flex-direction: column;
+				grid-template-areas:
+					'title icon'
+					'description description';
+				align-content: start;
+			}
+
+			article.item h1 {
+				grid-area: title;
+				font-size: 1.6rem;
+			}
+
+			article.item dl.icon {
+				grid-area: icon;
+				font-size: 1.5em;
+			}
+
+			article.item dl.icon dd {
+				text-align: right;
+			}
+
+			article.item .description {
+				grid-area: description;
+			}
+
+			article.item dt {
+				display: none;
+			}
+
+			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/vite.config.js

@@ -23,6 +23,12 @@ export default defineConfig({
 			name: 'markdown:watch',
 			configureServer(server) {
 				server.watcher.add(homeDir);
+				server.watcher.on('add', () => {
+					server.ws.send('vowel:refresh');
+				});
+				server.watcher.on('unlink', () => {
+					server.ws.send('vowel:refresh');
+				});
 				server.watcher.on('change', async (homePath, stats) => {
 					if (homePath.endsWith('.md')) {
 						// Remove `.md`