vowel 0.1.2 → 0.1.4

package/.cache.json

@@ -0,0 +1 @@
+{}

package/bin.js

@@ -3,6 +3,14 @@
 import { execSync, spawn } from 'child_process';
 import path from 'node:path';
 import url from 'node:url';
+import pc from 'picocolors';
+import mri from 'mri';
+import filterConsole from 'filter-console';
+import process from 'process';
+import readline from 'readline';
+import logUpdate from 'log-update';
+
+const args = mri(process.argv);
 
 // Directory where the module is
 const binURL = import.meta.url;
@@ -12,17 +20,54 @@ const binDirName = path.dirname(binFilePath);
 // Directory where the command was called
 const homeDir = process.cwd();
 
+const spawnArgs = ['./server.js', '--directory', homeDir];
+if (args.build) spawnArgs.push('--build');
+
+if (!args.verbose) {
+	filterConsole(['jsconfig', 'vite', 'Vite', 'tsconfig', `--host`]);
+	console.log(`\n\n`);
+}
+
 // Args: File to run, home directory,
-const child = spawn('node', ['./server.js', homeDir, process.argv[2] === 'build'], {
+const child = spawn('node', spawnArgs, {
 	cwd: binDirName
 });
 
+let processedFiles = 0;
+let foundFiles = 0;
+const std = process.stdout;
+
 child.stdout.on('data', (data) => {
-	console.log(`${data}`);
+	const message = data.toString();
+	if (message.match('fileread')) {
+		processedFiles++;
+		logUpdate(pc.green(`    Files read: ${processedFiles}/${foundFiles}`));
+	} else if (message.startsWith('filesfound')) {
+		const count = Number(message.split(':').at(-1).slice(0, -1));
+		foundFiles += count;
+	} else if (message.startsWith('loaded')) {
+		logUpdate(pc.green(`    Files read: ${foundFiles}/${foundFiles}`));
+		console.log(`\n\n`);
+		processedFiles = 0;
+		foundFiles = 0;
+	} else if (message.match('http://localhost:')) {
+		const url = message.match(/http:\/\/localhost:\S+/);
+		console.log(
+			pc.bgCyan(
+				pc.bold(`
+
+    Website: ${url}
+`)
+			)
+		);
+		console.log(`\n`);
+	} else {
+		console.log(pc.blue(data));
+	}
 });
 
 child.stderr.on('data', (data) => {
-	console.error(`${data}`);
+	console.error(pc.red(data));
 });
 
 child.on('close', (code) => {

package/content/home.md

@@ -14,6 +14,8 @@ npx -p svelte@next -p vowel@latest npx vowel
 
 Vowel is a minimal website framework for developers who love to write CSS and read RSS.
 
+> Here's a lovely block quote.
+
 Vowel will generate a feature-rich HTML website from a directory of markdown files. The output is plain HTML. You can style it however you want with your own CSS.
 
 See a [demo on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-nh7m7v?file=home.md). (**Error:** This demo might not work due conflicts in Svelte 5's peer dependencies.)
@@ -24,47 +26,47 @@ Vowel is created by Sam Littlefair. If you have questions or comments, [reach ou
 
 # Features
 
-## 🗺️ Sitemap
+## Sitemap 🗺️
 
 Submit your website to search engines with a sitemap that lists all of your pages.
 
-## 📡 RSS
+## RSS 📡
 
 Deliver your content to RSS readers with an Atom feed that lists your full posts in reverse-chronology.
 
-## ⚡️ Speed
+## Speed ⚡️
 
 Get a blazing-fast, Svelte-rendered website.
 
-## 🗿 Static generation
+## Static generation 🗿
 
 Load pages quickly with plain HTML.
 
-## 🔒 Copyright
+## Copyright 🔒
 
 Display an up-to-date copyright in the footer of your website.
 
-## 🔗 Rich link previews
+## Rich link previews 🔗
 
 Create rich links with titles and images, both internally and externally.
 
-## 🚏 Navigation
+## Navigation 🚏
 
 Structure your content with a header, nav, sitemap, and breadcrumbs.
 
-## 🙃 Emoji favicon
+## Emoji favicon 🙃
 
 Use any emoji you want for your website's icon.
 
-## 🖇️ Custom taxonomies
+## Custom taxonomies 🖇️
 
 Go beyond tags to create authors and categories.
 
-## 🧮 Advanced frontmatter
+## Advanced frontmatter 🧮
 
 Display dates, lists, nested properties, links, and images in your frontmatter.
 
-## 👩‍🎤 Live editing
+## Live editing 👩‍🎤
 
 See updates live as you save.
 

package/content/roadmap.md

@@ -24,10 +24,13 @@ description: What's planned.
 
 ## V2
 
-- [x] Fallback homepages
-- [ ] Create post list element (`#tags/blue`, `@tags/blue`, `~tags/blue`)
+- [ ] Tables of contents
 - [/] CSS defaults (work in progress)
+- [ ] Fallback homepages
+- [ ] Init CLI
+- [ ] Better default styles
 - [ ] CSS layout [presets](https://github.com/swyxio/spark-joy?tab=readme-ov-file#drop-in-css-frameworks)
+- [ ] Post list element (`#tags/blue`, `@tags/blue`, `~tags/blue`)
 - [x] Images as <figure>s
 - [x] Frontmatter interpolation (title and description)
 - [ ] Frontmatter interpolation (image)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vowel",
-	"version": "0.1.2",
+	"version": "0.1.4",
 	"bin": "./bin.js",
 	"scripts": {
 		"dev": "vite dev",
@@ -20,10 +20,14 @@
 		"@sveltejs/vite-plugin-svelte": "^4.0.0-next.3",
 		"any-date-parser": "^1.5.4",
 		"change-case": "^5.4.1",
+		"filter-console": "^1.0.0",
 		"js-yaml": "^4.1.0",
+		"loading-cli": "^1.1.2",
+		"log-update": "^6.0.0",
 		"milligram": "^1.4.1",
 		"object-path": "^0.11.8",
 		"open-props": "^1.6.13",
+		"picocolors": "^1.0.1",
 		"prettier": "^3.0.0",
 		"prettier-plugin-svelte": "^3.0.0",
 		"remark": "^15.0.1",

package/server.js

@@ -3,17 +3,18 @@ import { createServer, build } from 'vite';
 import { writeFile, mkdir, readFile } from 'fs/promises';
 import { existsSync } from 'fs';
 import { dirname, join } from 'path';
+import mri from 'mri';
 
-const __dirname = fileURLToPath(new URL('.', import.meta.url));
+const args = mri(process.argv);
+const { build: isBuild, directory } = args;
 
-// Check if this is a package build
-const isBuild = process.argv[2] === 'build';
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
 // If this is not a build, read the process argument
 const arg = !isBuild ? process.argv[2] : false;
 
 // Check if this is a user (process argument) or package dev (cwd)
-const $home = [arg || join(process.cwd(), 'content')];
+const $home = isBuild ? join(process.cwd(), 'content') : directory;
 
 const define = {
 	$home
@@ -73,7 +74,7 @@ async function runServer() {
 }
 
 // If build mode
-if (isBuild || process.argv[3] === 'true') {
+if (isBuild) {
 	buildProject();
 } else {
 	runServer();

package/src/lib/components/ConditionalWrapper.svelte

@@ -0,0 +1,10 @@
+<script>
+	let { children, component, ...rest } = $props();
+</script>
+
+{#if component}
+	<svelte:component this={component} {...rest}>
+		{@render children()}
+	</svelte:component>
+{/if}
+{@render children()}

package/src/lib/components/DefaultStyles.svelte

@@ -1,138 +1,459 @@
 <style>
-	:global(:root) {
-		--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;
-	}
+	/* 
+		Inspiration for this stylesheet comes from Normalize.css, Josh Comeau, 
+		Barebones, Basic.css, Pico, Typeplate, Simple.css, and more
+	*/
 
-	:global(:where(html, body, .page)) {
-		margin: 0;
-		padding: 0;
-		box-sizing: border-box;
-	}
+	:global {
+		/* Variables */
 
-	:global(:where(.container)) {
-		height: 100vh;
-		overflow-y: scroll;
-		font-family: var(--font-sans);
-	}
+		:root {
+			--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%);
+		}
 
-	:global(:where(.page)) {
-		max-width: 60ch;
-		margin: auto;
-		min-height: 100vh;
-		display: flex;
-		flex-direction: column;
-		padding: 1rem;
-		overflow-x: hidden;
-	}
+		@media (prefers-color-scheme: dark) {
+			:root {
+				--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%);
+			}
+		}
 
-	/* Global */
+		/* 
+			Reset
+		*/
 
-	:global(:where(img)) {
-		display: block;
-		width: 100%;
-		height: auto;
-	}
+		*,
+		*::before,
+		*::after {
+			box-sizing: border-box;
+		}
 
-	/* Header */
+		* {
+			margin: 0;
+		}
 
-	:global(:where(nav)) {
-		display: flex;
-		column-gap: 1rem;
-		row-gap: 0.5rem;
-		flex-wrap: wrap;
-		justify-content: flex-start;
-	}
+		html {
+			line-height: 1.15;
+			-webkit-text-size-adjust: 100%;
+			font-size: 62.5%;
+		}
 
-	:global(:where(nav + nav)) {
-		margin-top: 1rem;
-	}
+		body {
+			font-size: 1.6rem;
+			line-height: 1.5;
+			-webkit-font-smoothing: antialiased;
+			font-weight: 400;
+		}
 
-	:global(:where(nav > a)) {
-		text-wrap: nowrap;
-	}
+		main,
+		img,
+		details,
+		picture,
+		video,
+		canvas,
+		svg {
+			display: block;
+			max-width: 100%;
+		}
 
-	:global(:where(header a.site-title)) {
-		color: unset;
-		text-decoration: none;
-		font-weight: bold;
-		font-size: 2em;
-	}
+		summary {
+			display: list-item;
+		}
 
-	:global(:where(.sitemap)) {
-		margin: auto;
-	}
+		hr {
+			box-sizing: content-box;
+			height: 0;
+			overflow: visible;
+		}
 
-	:global(:where(nav, aside.sitemap) :where([aria-current='page'], [aria-current='true'])) {
-		text-decoration: none;
-		color: unset;
-		cursor: default;
-	}
+		pre {
+			font-family: monospace, monospace;
+			font-size: 1em;
+		}
 
-	:global(:where(header .breadcrumbs)) {
-		margin-top: 2rem;
-	}
+		a {
+			background-color: transparent;
+		}
 
-	:global(:where(header .breadcrumbs a)) {
-		font-size: 0.9em;
-		text-decoration: none;
-		color: unset;
-	}
+		abbr[title] {
+			border-bottom: none;
+			text-decoration: underline;
+			text-decoration: underline dotted;
+		}
 
-	:global(:where(header .breadcrumbs .separator):after) {
-		content: '/';
-	}
+		b,
+		strong {
+			font-weight: bolder;
+		}
 
-	/* Content block elements */
+		code,
+		kbd,
+		samp {
+			font-family: monospace, monospace;
+			font-size: 1em;
+		}
 
-	:global(:where(pre)) {
-		padding: 1rem;
-		background: #eee;
-		overflow-x: auto;
-	}
+		small {
+			font-size: 80%;
+		}
 
-	:global(:where(article)) {
-		border: 8px ridge #eee;
-		padding-inline: 1rem;
-	}
+		sub,
+		sup {
+			font-size: 75%;
+			line-height: 0;
+			position: relative;
+			vertical-align: baseline;
+		}
 
-	:global(:where(article + article)) {
-		margin-top: 1rem;
-	}
+		sub {
+			bottom: -0.25em;
+		}
 
-	/* Content inline elements */
+		sup {
+			top: -0.5em;
+		}
 
-	:global(:where(code)) {
-		background: #eee;
-		margin: -3px -1px;
-		padding: 3px 4px;
-		border-radius: 5px;
-	}
+		img {
+			border-style: none;
+			height: auto;
+		}
 
-	/* Aside */
+		/* Layout */
 
-	:global(:where(aside.sitemap)) {
-		margin-top: auto;
-	}
+		.container {
+			height: 100vh;
+			overflow-y: scroll;
+			font-family: var(--font-sans);
+		}
 
-	:global([aria-current='page']) {
-		color: unset;
-		text-decoration: none;
-		cursor: unset;
-	}
+		.page {
+			max-width: 60ch;
+			margin: auto;
+			min-height: 100vh;
+			display: flex;
+			flex-direction: column;
+			padding: 1rem;
+			overflow-x: hidden;
+		}
 
-	/* Footer */
+		main {
+			margin-bottom: auto;
+			padding-bottom: 4rem;
+		}
 
-	:global(:where(footer)) {
-		text-align: center;
-	}
+		/* Colors */
+
+		body {
+			color: var(--text-color);
+			background: var(--main-background);
+		}
+
+		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):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 */
+
+		nav.top-bar {
+			border: 1px solid var(--border-color);
+			padding: 6px 10px;
+			margin-inline: -10px;
+			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 {
+			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: auto;
+		}
+
+		/* Footer */
+
+		footer {
+			text-align: center;
+			margin-block: 6rem 8rem;
+		}
 
-	/* Pages */
+		/* Pages */
 
-	:global(:where(.page.home > main > h1)) {
-		display: none;
+		.page.home > main > h1 {
+			display: none;
+		}
 	}
 </style>

package/src/lib/components/Frontmatter.svelte

@@ -12,8 +12,6 @@
 	// TODO: Normalize frontmatter props
 	let { properties, website, format } = $derived(props);
 
-	console.log(`Frontmatter format ${format}`);
-
 	const excludedProperties = [
 		'title',
 		'description',

package/src/lib/components/FrontmatterProperty.svelte

@@ -5,8 +5,6 @@
 
 	/** @type {{ property: any, key: string }}*/
 	let { property, key, format } = $props();
-
-	console.log(`Frontmatter property format: ${format}`);
 </script>
 
 {#if property}

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

@@ -11,8 +11,8 @@
 		try {
 			return new URL(url);
 		} catch (e) {
-			console.error(`Error on image ${url}:`);
-			console.error(e);
+			// console.error(`Error on image ${url}:`);
+			// console.error(e);
 		}
 	}
 

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

@@ -3,8 +3,17 @@
 
 	let { node, level, website } = $props();
 	let { url, children } = $derived(node);
+
+	function isAbsoluteURL(url) {
+		try {
+			new URL(url);
+			return true;
+		} catch (e) {
+			return false;
+		}
+	}
 </script>
 
-<a href={url}>
+<a href={url} target={isAbsoluteURL(url) ? '_blank' : null}>
 	<Markdown props={{ ast: children, level, website }} />
 </a>

package/src/lib/components/Nav.svelte

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

package/src/lib/components/Page.svelte

@@ -5,8 +5,6 @@
 	let { page, content = true, link, level = 0, website = {}, format = 'html' } = $props();
 	let { ast, title, date, image, imputedProperties } = $derived(page || {});
 
-	console.log(`Page format: ${format}`);
-
 	const dateObject = date?.type === 'date' && new Date(date.output);
 	// TODO: Add conditional logic for format = 'xml'
 </script>

package/src/lib/utilities/mutateMarkdownAST.js

@@ -37,7 +37,7 @@ export default async function mutateMarkdownAST(ast, cache) {
 						delete node.children;
 					} catch (error) {
 						node.value = url;
-						console.log(`Error on URL in content: ${url}`);
+						// console.log(`Error on URL in content: ${url}`);
 					}
 				} else {
 					node.metadata = cache[node.value];

package/src/lib/utilities/mutateMarkdownFrontmatter.js

@@ -89,7 +89,7 @@ export default async function mutateMarkdownFrontmatter(frontmatter, cache) {
 							input
 						};
 					} catch (e) {
-						console.error(`Error on URL in frontmatter: ${frontmatter[key]}`);
+						// console.error(`Error on URL in frontmatter: ${frontmatter[key]}`);
 						frontmatter[key] = {
 							type: 'string',
 							output: input,

package/src/lib/utilities/processMarkdownFiles.js

@@ -103,6 +103,8 @@ async function readFolder(folderPath, parents, cache) {
 
 	let files = (await fs.readdir(folderPath, { withFileTypes: true })).filter(filterFiles);
 
+	console.log(`filesfound:${files.length}`);
+
 	const promises = files.map(async (file) => await readFile(file, parents, cache, folderPath));
 
 	const folder = (await Promise.all(promises)).reduce((acc, obj) => ({ ...acc, ...obj }), {});
@@ -134,7 +136,8 @@ async function readFile(file, parents, cache, folderPath) {
 
 		const { ast, frontmatter, imputedProperties } = await readMarkdownFile(filePath, cache);
 		const loadTime = (performance.now() - startLoad).toFixed(2);
-		console.log(`📄 ${shortPath} (${loadTime}ms)`);
+		// console.log(`📄 ${shortPath} (${loadTime}ms)`);
+		console.log('fileread');
 		if (frontmatter.published == false) return;
 		if (file.name === 'home.md' || file.name === 'settings.md') {
 			const key = file.name === 'home.md' ? '$' : '_';
@@ -173,7 +176,7 @@ async function readFile(file, parents, cache, folderPath) {
 		const folder = await readFolder(path.join(folderPath, file.name), url, cache);
 
 		const loadTime = (performance.now() - startLoad).toFixed(2);
-		console.log(`📁 ${shortPath} (${loadTime}ms)`);
+		// console.log(`📁 ${shortPath} (${loadTime}ms)`);
 
 		if (!folder.hasOwnProperty('$')) {
 			const $ = DefaultFile(url);
@@ -208,5 +211,7 @@ export default async function processMarkdownFiles(cache) {
 	const [homeDir] = $home;
 	const folder = await readFolder(homeDir, '', cache);
 
+	console.log('loaded');
+
 	return { folder, finalCache: cache };
 }

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

@@ -22,15 +22,15 @@ async function checkFileExists(filePath, homeDir) {
 
 /** @type {import('./$types').PageLoad} */
 export async function load() {
-	const startLoad = performance.now();
+	// const startLoad = performance.now();
 	const now = Date.now();
 	const contentCacheDuration = 60000; // Cache for  1 minute
 	const initialURLCache = await loadCache($home[0]);
 
 	const cssExists = await checkFileExists(normalize('/assets/styles.css'), $home[0]);
 
-	if (cssExists) console.log('Found CSS file at /assets/styles.css');
-	else console.log('No CSS file found as /assets/styles.css');
+	// if (cssExists) console.log('Found CSS file at /assets/styles.css');
+	// else console.log('No CSS file found as /assets/styles.css');
 
 	const faviconExists = await checkFileExists(normalize('/assets/favicon.png'), $home[0]);
 
@@ -51,7 +51,7 @@ export async function load() {
 		console.log('Using content cache');
 		data = contentCache;
 	} else {
-		console.log('Not using content cache');
+		// console.log('Not using content cache');
 		data = await processMarkdownFiles(initialURLCache);
 		contentCache = data;
 		contentCacheTime = now;
@@ -64,7 +64,7 @@ export async function load() {
 		writeCache(finalCache, $home[0]);
 	}
 
-	console.log(`Load time: ${(performance.now() - startLoad).toFixed(2)} ms`);
+	// console.log(`Load time: ${(performance.now() - startLoad).toFixed(2)} ms`);
 
 	const folderName = basename($home[0]);
 

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

@@ -6,6 +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';
 
 	let { data } = $props();
 
@@ -42,7 +43,7 @@
 		}
 
 		const breadcrumbs = getBreadcrumbs().slice(1, -1).reverse();
-		const breadcrumbSegment = breadcrumbs.length ? ` - ${breadcrumbs.join(' - ')} - ` : '';
+		const breadcrumbSegment = breadcrumbs.length ? ` - ${breadcrumbs.join(' - ')} - ` : ' - ';
 		return `${pageMetaTitle}${breadcrumbSegment}${siteTitle}`;
 	}
 
@@ -113,9 +114,9 @@
 	<main>
 		<Page level={0} {page} {website} path={data.path} />
 	</main>
-	<aside class="sitemap">
+	<nav class="sidebar">
 		<Sitemap section={data.website} segments={data.path.split('/')} root />
-	</aside>
+	</nav>
 	<footer>
 		© {website._.author ? website._.author + ' ' : ''}
 		{new Date().getFullYear()}

package/svelte.config.js

@@ -1,10 +1,15 @@
 import adapter from '@sveltejs/adapter-static';
 import path, { join } from 'path';
+import mri from 'mri';
+
+const args = mri(process.argv);
+
+const isDev = args._.includes('dev');
 
 const demoDir = process.cwd() + '/content';
-const NPMRunDev = process.argv[2] === 'dev';
-const isBuild = process.argv[2] === 'build';
-const receivedHomePath = NPMRunDev || isBuild ? false : process.argv[2];
+// const NPMRunDev = process.argv[2] === 'dev';
+// const isBuild = process.argv[2] === 'build';
+const receivedHomePath = isDev || args.build ? false : args.directory;
 const homeDir = receivedHomePath || demoDir;
 const relativePathToHome = path.relative(process.cwd(), homeDir);
 

package/vite.config.js

@@ -2,11 +2,14 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 import path from 'path';
 import { readMarkdownFile, loadCache } from './src/lib/utilities/index';
+import mri from 'mri';
+
+const args = mri(process.argv);
 
 const demoDir = process.cwd() + '/content';
 const NPMRunDev = process.argv[2] === 'dev';
 const isBuild = process.argv[2] === 'build';
-const receivedHomePath = NPMRunDev || isBuild ? false : process.argv[2];
+const receivedHomePath = NPMRunDev || isBuild ? false : args.directory;
 
 const homeDir = receivedHomePath || demoDir;
 
@@ -19,7 +22,6 @@ export default defineConfig({
 			// Hot reload markdown
 			name: 'markdown:watch',
 			configureServer(server) {
-				console.log(`Root directory: ${homeDir}`);
 				server.watcher.add(homeDir);
 				server.watcher.on('change', async (homePath, stats) => {
 					if (homePath.endsWith('.md')) {