vowel 0.1.19 → 0.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vowel",
-	"version": "0.1.19",
+	"version": "0.1.20",
 	"bin": "./bin.js",
 	"scripts": {
 		"dev": "vite dev",
@@ -18,7 +18,6 @@
 		"@sveltejs/adapter-static": "^3.0.1",
 		"@sveltejs/kit": "^2.5.6",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0-next.3",
-		"@vowel/styles": "^0.0.5",
 		"any-date-parser": "^1.5.4",
 		"change-case": "^5.4.1",
 		"filter-console": "^1.0.0",

package/src/lib/components/DefaultStyles.svelte

@@ -102,6 +102,10 @@
 			margin-bottom: 2.5rem;
 		}
 
+		dt {
+			font-size: 1.1em;
+		}
+
 		dl.link dt {
 			display: none;
 		}
@@ -134,6 +138,20 @@
 			content: '#';
 		}
 
+		dl.contents ul {
+			list-style: none;
+			padding: 0;
+		}
+
+		dl.contents .depth-2 {
+			font-weight: 500;
+		}
+
+		dl.contents .depth-3 {
+			font-size: 0.95em;
+			padding-left: 0.5em;
+		}
+
 		/* Header */
 
 		header {

package/src/lib/components/Frontmatter.svelte

@@ -11,6 +11,7 @@
 	let { props } = $props();
 	// TODO: Normalize frontmatter props
 	let { properties, website, format } = $derived(props);
+	const keys = $derived(Object.keys(properties || {}));
 
 	const excludedProperties = [
 		'title',
@@ -41,7 +42,7 @@
 </script>
 
 {#if properties}
-	{#each Object.keys(properties) as key}
+	{#each keys as key}
 		{#if !excludedProperties.includes(key)}
 			{@const property = getProperty(properties, key)}
 			{#if website.hasOwnProperty(key)}

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

@@ -33,7 +33,9 @@
 	}
 </script>
 
-{#if urlObject}
+{#if urlObject?.pathname?.endsWith('.svg')}
+	<object type="image/svg+xml" data={urlObject.href} title={alt}></object>
+{:else if urlObject}
 	<img src={urlObject.href} {alt} {srcset} />
 {/if}
 

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

@@ -87,7 +87,7 @@
 		{:else if node.type === 'url'}
 			<LinkPreview url={node.value} metadata={node.metadata} {format} />
 		{:else if node.type === 'listItem'}
-			{@const isChecklistItem = node.hasOwnProperty('checked')}
+			{@const isChecklistItem = node.checked !== null}
 			{#if isChecklistItem}
 				<li
 					class={`checklist-item ${node.checked ? 'checked' : 'unchecked'}`}

package/src/lib/components/Nav.svelte

@@ -21,7 +21,7 @@
 	<nav class="top-bar">
 		{#if !child}
 			<a aria-current={isActiveLink(segments)} href={evergreen?.url || evergreen['$']?.url}
-				>{getFolderLabel(evergreen)}</a
+				>{getFolderLabel(evergreen, true)}</a
 			>
 		{/if}
 		{#each Object.keys(evergreen) as key}

package/src/lib/components/Page.svelte

@@ -1,5 +1,7 @@
 <script>
 	import { Markdown, Frontmatter } from '$lib/components';
+	import { toString } from 'mdast-util-to-string';
+	import { kebabCase } from 'change-case';
 	import Image from './Markdown/Image.svelte';
 
 	let { page, content = true, link, level = 0, website = {}, format = 'html' } = $props();
@@ -7,6 +9,8 @@
 
 	const dateObject = date?.type === 'date' && new Date(date.output);
 	// TODO: Add conditional logic for format = 'xml'
+
+	const headings = ast.filter((child) => child.type === 'heading');
 </script>
 
 <!-- Image -->
@@ -52,6 +56,22 @@
 	<p class="description">{page?.description || page?.imputedProperties.description}</p>
 {/if}
 
+{#if format === 'html' && page.toc && headings.length > 1}
+	<dl class="contents">
+		<dt>Contents</dt>
+		<dd>
+			<ul>
+				{#each headings as heading, index}
+					{@const headingString = toString(heading.children)}
+					<li class={`heading depth-${heading.depth}`}>
+						<a href={`#${kebabCase(headingString)}`}>{headingString}</a>
+					</li>
+				{/each}
+			</ul>
+		</dd>
+	</dl>
+{/if}
+
 {#if level < 2 && content}
 	<div class="content">
 		<Markdown props={{ ast, level, website, format }} />

package/src/lib/components/ResetStyles.svelte

@@ -39,7 +39,8 @@
 		picture,
 		video,
 		canvas,
-		svg {
+		svg,
+		object {
 			display: block;
 			max-width: 100%;
 		}
@@ -124,4 +125,4 @@
 			box-decoration-break: clone;
 		}
 	</style>
-</svelte:head>
+</svelte:head>

package/src/lib/utilities/getFileLabel.js

@@ -22,9 +22,10 @@ export default function getFileLabel(page, shorter = false, date = true) {
 			: false;
 
 	return (
-		page?.breadcrumb ||
+		(shorter && page?.breadcrumb) ||
 		page?.title ||
 		page?.imputedProperties?.title ||
+		page?.breadcrumb ||
 		formattedDate ||
 		(shorter && fileName) ||
 		description ||

package/src/routes/+error.svelte

@@ -0,0 +1,110 @@
+<script>
+	import { page } from '$app/stores';
+	import {
+		Nav,
+		Page,
+		Breadcrumbs,
+		Sitemap,
+		ResetStyles,
+		DefaultStyles,
+		TypographyStyles,
+		NoStyles
+	} from '$lib/components/index.js';
+	import { invalidateAll } from '$app/navigation';
+
+	const themes = {
+		none: NoStyles,
+		reset: ResetStyles,
+		typography: TypographyStyles,
+		default: DefaultStyles
+	};
+
+	let { error: data } = $page;
+
+	const { website } = $derived(data);
+
+	const { slogan, theme } = $derived(website?._);
+
+	// Import CSS for HMR in dev mode
+	if (data.dev && data.files.css.exists) {
+		import(/* @vite-ignore */ data.files.css.path);
+	}
+
+	const siteTitle = website._.title;
+
+	function makePageMetaTitle() {
+		if (siteTitle) return `Page not found = ${siteTitle}`;
+		return `Page not found`;
+	}
+
+	function getFavicon() {
+		if (website._?.icon)
+			return `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 20 90 60%22><text y=%22.9em%22 font-size=%2290%22>${website._.icon}</text></svg>`;
+		if (data.files.favicon.exists) return '/favicon.png';
+		return false;
+	}
+
+	const favicon = getFavicon();
+
+	$effect(() => {
+		// Update website on file change
+		if (import.meta.hot) {
+			import.meta.hot.on('vowel:update', ({ path, file }) => {
+				invalidateAll().then(() => {
+					window.location.reload();
+				});
+			});
+			import.meta.hot.on('vowel:refresh', () => {
+				console.log('Refresh');
+				invalidateAll().then(() => {
+					window.location.reload();
+				});
+			});
+		}
+	});
+</script>
+
+<svelte:component this={themes[theme || 'default']} />
+
+<svelte:head>
+	<title>{makePageMetaTitle()}</title>
+	<meta property="og:site_name" content={website._.title} />
+	{#if favicon}
+		<link rel="icon" href={favicon} />
+	{/if}
+	{#if !data.dev && data.files.css.exists}
+		<link rel="stylesheet" href="/styles.css" />
+	{/if}
+</svelte:head>
+
+<div data-sveltekit-preload-data="hover" class="page 404">
+	<header>
+		{#if website._.logo}
+			<a href="/" class="site-logo">
+				{#if website._.logo.endsWith('.svg')}
+					<object type="image/svg+xml" data={website._.logo} title={website._.title || undefined}
+					></object>
+				{:else}
+					<img alt="website logo" src={website._.logo} />
+				{/if}
+			</a>
+		{/if}
+		{#if siteTitle}
+			<a href="/" class="site-title">{siteTitle}</a>
+		{/if}
+		{#if website._.slogan}
+			<p class="slogan">{website._.slogan}</p>
+		{/if}
+		<Nav folder={website} segments={['']} />
+	</header>
+	<main>
+		<h1>Page Not Found</h1>
+	</main>
+	<nav class="sidebar">
+		<Sitemap section={website} segments={['']} root />
+	</nav>
+	<footer>
+		© {website._.author ? website._.author + ' ' : ''}
+		{new Date().getFullYear()}
+	</footer>
+</div>

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

@@ -4,6 +4,8 @@ import { constants } from 'fs';
 import { normalize, join, basename } from 'path';
 import { dev } from '$app/environment';
 import mri from 'mri';
+import { getPage } from '../../lib/utilities';
+import { error } from '@sveltejs/kit';
 
 const args = mri(process.argv);
 const isBuild = args._.includes('build');

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

@@ -1,11 +1,6 @@
-import {
-	getPagesByFolder,
-	processMarkdownFiles,
-	loadCache,
-	checkFileExists,
-	readMarkdownFile
-} from '../../lib/utilities';
-import { join } from 'path';
+import { getPagesByFolder, processMarkdownFiles, loadCache } from '../../lib/utilities';
+
+export const prerender = true;
 
 /** @type {import('./$types').PageLoad} */
 export async function load({ params }) {
@@ -15,8 +10,6 @@ export async function load({ params }) {
 	return { path, segments };
 }
 
-export const prerender = true;
-
 export async function entries() {
 	const initialCache = await loadCache($home[0]);
 

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

@@ -14,7 +14,7 @@
 	import { error } from '@sveltejs/kit';
 	import { getFolder, getFolderLabel } from '../../lib/utilities';
 	import { page as pageStore } from '$app/stores';
-	import { goto, invalidate, invalidateAll } from '$app/navigation';
+	import { invalidateAll } from '$app/navigation';
 
 	const themes = {
 		none: NoStyles,
@@ -27,6 +27,8 @@
 
 	const { website, folderName } = $derived(data);
 
+	throw error(404, { message: 'Page not found', ...data });
+
 	const { slogan, theme } = $derived(website._);
 
 	// Import CSS for HMR in dev mode
@@ -42,7 +44,7 @@
 
 	const websiteTitle = data.website._.title || data.folderName;
 	const pageMetaTitle = $derived(getFileLabel(page));
-	const siteTitle = website._.title || folderName;
+	const siteTitle = website._.title;
 
 	function getBreadcrumbs(level = 0) {
 		const path = $pageStore.data.segments.slice(0, level).join('/');
@@ -73,8 +75,6 @@
 
 	const favicon = getFavicon();
 
-	let key = $state(Date.now());
-
 	$effect(() => {
 		// Update website on file change
 		if (import.meta.hot) {
@@ -131,7 +131,12 @@
 	<header>
 		{#if website._.logo}
 			<a href="/" class="site-logo">
-				<img alt="website logo" src={website._.logo} />
+				{#if website._.logo.endsWith('.svg')}
+					<object type="image/svg+xml" data={website._.logo} title={website._.title || undefined}
+					></object>
+				{:else}
+					<img alt="website logo" src={website._.logo} />
+				{/if}
 			</a>
 		{/if}
 		{#if siteTitle}