vowel 0.1.3 → 0.1.4

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

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/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/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()}