vowel 0.1.18 → 0.1.20

package/src/lib/components/ResetStyles.svelte

@@ -0,0 +1,128 @@
+<svelte:head>
+	<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;
+		}
+
+		.page {
+			min-height: 100vh;
+			overflow-x: hidden;
+		}
+
+		*,
+		*::before,
+		*::after {
+			box-sizing: border-box;
+		}
+
+		* {
+			margin: 0;
+		}
+
+		img,
+		details,
+		picture,
+		video,
+		canvas,
+		svg,
+		object {
+			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;
+		}
+
+		p,
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			overflow-wrap: break-word;
+		}
+
+		code,
+		mark {
+			-webkit-box-decoration-break: clone;
+			box-decoration-break: clone;
+		}
+	</style>
+</svelte:head>

package/src/lib/components/TypographyStyles.svelte

@@ -0,0 +1,265 @@
+<script>
+	import ResetStyles from './ResetStyles.svelte';
+</script>
+
+<ResetStyles />
+
+<svelte:head>
+	<style>
+		html {
+			font-family:
+				-apple-system,
+				BlinkMacSystemFont,
+				avenir next,
+				avenir,
+				segoe ui,
+				helvetica neue,
+				helvetica,
+				Cantarell,
+				Ubuntu,
+				roboto,
+				noto,
+				arial,
+				sans-serif;
+		}
+
+		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;
+		}
+
+		pre,
+		code {
+			font-family:
+				Menlo,
+				Consolas,
+				Monaco,
+				Liberation Mono,
+				Lucida Console,
+				monospace;
+		}
+
+		code {
+			font-size: 0.9em;
+			margin-inline: 0px;
+			padding: 3px 4px;
+			border-radius: 5px;
+		}
+
+		pre {
+			padding: 1rem 1.5rem;
+			border-radius: 5px;
+			overflow-x: auto;
+		}
+
+		blockquote {
+			margin: 1.5em 0;
+			padding: 0 1.6em 0 1.6em;
+		}
+
+		a {
+			text-decoration: none;
+		}
+
+		li.checked,
+		li.unchecked {
+			padding-left: 0.8rem;
+		}
+
+		figcaption {
+			margin-top: 0.5rem;
+			font-style: italic;
+		}
+
+		article + article {
+			margin-top: 1rem;
+		}
+
+		article a {
+			color: unset;
+		}
+
+		article a:hover {
+			color: unset;
+		}
+
+		article h2 {
+			margin-top: 2rem;
+		}
+
+		th,
+		td {
+			padding: 12px 15px;
+			text-align: left;
+		}
+
+		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,
+				time,
+				dl
+			):not(:last-child) {
+			margin-bottom: 2.5rem;
+		}
+
+		hr {
+			margin-top: 3rem;
+			margin-bottom: 3.5rem;
+			border-width: 0px;
+		}
+
+		dt {
+			font-weight: 500;
+		}
+
+		time {
+			display: block;
+		}
+
+		time a {
+			color: unset;
+		}
+
+		.breadcrumbs a {
+			font-size: 0.9em;
+			color: unset;
+		}
+
+		.breadcrumbs .separator:after {
+			margin-inline: 0.2em;
+			content: '/';
+		}
+
+		nav > a {
+			text-wrap: nowrap;
+		}
+
+		header a.site-title {
+			color: unset;
+			font-weight: 900;
+			font-size: 2.8em;
+		}
+
+		header .slogan {
+			font-weight: 500;
+		}
+
+		nav a:where([aria-current='page'], [aria-current='true']),
+		nav a:where([aria-current='page'], [aria-current='true']):hover {
+			text-decoration: none;
+			color: unset;
+			cursor: default;
+		}
+
+		aside h2 {
+			margin: 0 0 0.5em 0;
+			font-size: 1.1em;
+		}
+	</style>
+</svelte:head>

package/src/lib/components/index.js

@@ -6,4 +6,7 @@ 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 ResetStyles } from './ResetStyles.svelte';
+export { default as TypographyStyles } from './TypographyStyles.svelte';
+export { default as DefaultStyles } from './DefaultStyles.svelte';
+export { default as NoStyles } from './NoStyles.svelte';

package/src/lib/utilities/createPageClass.js

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

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,16 +4,17 @@ 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');
 
 export const prerender = true;
 export const csr = dev;
-// export const ssr = true;
 
-let contentCache;
-let contentCacheTime;
+let contentCache = false;
+// let contentCacheTime = $build[0] ? 600000 : 0;
 
 async function checkFileExists(filePath, homeDir) {
 	try {
@@ -27,8 +28,7 @@ async function checkFileExists(filePath, homeDir) {
 /** @type {import('./$types').PageLoad} */
 export async function load() {
 	// const startLoad = performance.now();
-	const now = Date.now();
-	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]);
@@ -51,14 +51,13 @@ export async function load() {
 
 	let data = {};
 
-	if (contentCache && now - contentCacheTime < contentCacheDuration) {
+	if (contentCache) {
 		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;
+		if ($build[0]) contentCache = data;
 	}
 
 	// const { folder: website, finalCache } = await processMarkdownFiles(initialCache);

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

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