vowel 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vowel",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"bin": "./bin.js",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/components/Breadcrumbs.svelte

@@ -7,7 +7,7 @@
 	const path = $derived($page.data.segments.slice(0, level).join('/'));
 	// The page for the current crumb
 	const crumbyPage = $derived(getFolder($page.data.website, path));
-	const folderLabel = $derived(getFolderLabel(crumbyPage));
+	const folderLabel = $derived(getFolderLabel(crumbyPage, true, false));
 
 	const active = $derived(level === $page.data.segments.length);
 </script>

package/src/lib/components/DefaultStyles.svelte

@@ -29,6 +29,14 @@
 		overflow-x: hidden;
 	}
 
+	/* Global */
+
+	:global(:where(img)) {
+		display: block;
+		width: 100%;
+		height: auto;
+	}
+
 	/* Header */
 
 	:global(:where(nav)) {
@@ -54,6 +62,10 @@
 		font-size: 2em;
 	}
 
+	:global(:where(.sitemap)) {
+		margin: auto;
+	}
+
 	:global(:where(nav, aside.sitemap) :where([aria-current='page'], [aria-current='true'])) {
 		text-decoration: none;
 		color: unset;

package/src/lib/components/Sitemap.svelte

@@ -19,13 +19,13 @@
 			</li>
 		{/if}
 		{#each Object.keys(section) as key}
-			{#if Object.keys(section[key]).length === 1 && section[key].$}
+			{#if Object.keys(section[key]).length === 1 && section[key].$ && !section[key].$.date}
 				<li class={key}>
 					<a aria-current={isActiveLink(segments, key)} href={section[key].$.url}>
-						{getFileLabel(section[key]['$']) || getFolderLabel(section[key])}
+						{getFileLabel(section[key]['$'], true) || getFolderLabel(section[key], true)}
 					</a>
 				</li>
-			{:else if section[key].$}
+			{:else if section[key].$ && !section[key].$.date}
 				<li class={key}>
 					<a aria-current={isActiveLink(segments, key)} href={section[key].$.url}>
 						{getFileLabel(section[key]['$']) || getFolderLabel(section[key])}

package/src/lib/utilities/getFileLabel.js

@@ -1,3 +1,5 @@
+import { capitalCase } from 'change-case';
+
 function createTitleFromDescription(description) {
 	if (description?.length > 30) {
 		return description.slice(0, 30) + '...';
@@ -5,14 +7,28 @@ function createTitleFromDescription(description) {
 	return description;
 }
 
-export default function getFileLabel(page) {
+export default function getFileLabel(page, shorter = false, date = true) {
+	const description = createTitleFromDescription(
+		page?.description || page?.imputedProperties?.description
+	);
+
+	const fileName = page?.imputedProperties?.fileName
+		? capitalCase(page?.imputedProperties?.fileName)
+		: false;
+
+	const formattedDate =
+		page?.date && date
+			? new Intl.DateTimeFormat('en-US').format(new Date(page?.date?.output))
+			: false;
+
 	return (
 		page?.breadcrumb ||
 		page?.title ||
 		page?.imputedProperties?.title ||
-		createTitleFromDescription(page?.description) ||
-		createTitleFromDescription(page?.imputedProperties?.description) ||
-		page?.imputedProperties?.fileName ||
+		formattedDate ||
+		(shorter && fileName) ||
+		description ||
+		fileName ||
 		null
 	);
 }

package/src/lib/utilities/getFolderLabel.js

@@ -2,7 +2,11 @@ import { getFileLabel } from '.';
 
 const fallBackLabel = 'Untitled';
 
-export default function getFolderLabel(folder) {
+export default function getFolderLabel(folder, shorter, date) {
 	if (typeof folder !== 'object') return 'Untitled';
-	return getFileLabel(folder['_']) || getFileLabel(folder['$']) || fallBackLabel;
+	return (
+		getFileLabel(folder['_'], shorter, date) ||
+		getFileLabel(folder['$'], shorter, date) ||
+		fallBackLabel
+	);
 }

package/src/lib/utilities/readMarkdownFile.js

@@ -30,13 +30,14 @@ function parseFrontmatter(frontmatterNode) {
 }
 
 function deduceDescriptionFromAST(ast) {
-	for (let i = 0; i < ast?.children?.length; i++) {
-		if (ast?.children?.[i]?.type === 'paragraph') {
+	for (let i = 0; i < ast?.length; i++) {
+		if (ast?.[i]?.type === 'paragraph') {
 			const firstParagraph = toString(ast[i]);
 			if (firstParagraph.length > 150) {
 				return firstParagraph.slice(0, 150);
+			} else if (firstParagraph.length > 1) {
+				return firstParagraph;
 			}
-			return firstParagraph;
 		}
 	}
 	return null;
@@ -117,7 +118,7 @@ export default async function readMarkdownFile(filePath, cache) {
 	if (!frontmatter.title && imputedTitle) frontmatter.title = imputedTitle;
 
 	const imputedProperties = {
-		description: deduceDescriptionFromAST(ast),
+		description: deduceDescriptionFromAST(filteredAST),
 		title: imputedTitle,
 		fileName
 	};

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

@@ -2,10 +2,11 @@ import { loadCache, writeCache, processMarkdownFiles } from '$lib/utilities';
 import { access } from 'fs/promises';
 import { constants } from 'fs';
 import { normalize, join, basename } from 'path';
+import { dev } from '$app/environment';
 
 export const prerender = true;
-// export const csr = false;
-// export const ssr = false;
+export const csr = dev;
+// export const ssr = true;
 
 let contentCache;
 let contentCacheTime;
@@ -67,5 +68,5 @@ export async function load() {
 
 	const folderName = basename($home[0]);
 
-	return { website, homeDir: $home[0], folderName, files };
+	return { website, homeDir: $home[0], folderName, files, dev };
 }

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

@@ -6,15 +6,13 @@
 	import { error } from '@sveltejs/kit';
 	import { getFolder, getFolderLabel } from '../../lib/utilities';
 	import { page as pageStore } from '$app/stores';
-	import { dev, building } from '$app/environment';
 
 	let { data } = $props();
 
 	const { website, folderName } = $derived(data);
 	const { slogan } = website;
 
-	if (data.files.css.exists && dev) {
-		// Import styles in dev mode
+	if (data.dev && data.files.css.exists) {
 		import(/* @vite-ignore */ data.files.css.path);
 	}
 
@@ -73,6 +71,7 @@
 
 <!-- svelte-ignore state_referenced_locally -->
 <!-- svelte-ignore state_referenced_locally -->
+
 <svelte:head>
 	<title>{makePageMetaTitle()}</title>
 	<meta property="”og:url”" content={page.url} />
@@ -86,9 +85,8 @@
 	{#if favicon}
 		<link rel="icon" href={favicon} />
 	{/if}
-	{#if data.files.css.exists && !dev}
-		<!-- Import styles in build mode -->
-		<link rel="stylesheet" href="styles.css" />
+	{#if !data.dev && data.files.css.exists}
+		<link rel="stylesheet" href="/styles.css" />
 	{/if}
 </svelte:head>
 

package/vite.config.js

@@ -64,6 +64,9 @@ export default defineConfig({
 		fs: {
 			strict: false,
 			allow: homeDir
+		},
+		hmr: {
+			overlay: false
 		}
 	},
 	resolve: {

package/content/vercel.json

@@ -1,5 +0,0 @@
-{
-  "cleanUrls": true,
-  "outputDirectory": ".output",
-  "buildCommand": null
-}

package/vercel.json

@@ -1,5 +0,0 @@
-{
-  "cleanUrls": true,
-  "outputDirectory": "./.output",
-  "buildCommand": null
-}