vowel 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vowel",
-	"version": "0.1.0",
+	"version": "0.1.2",
 	"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/Frontmatter.svelte

@@ -10,7 +10,9 @@
 	 */
 	let { props } = $props();
 	// TODO: Normalize frontmatter props
-	let { properties, website } = $derived(props);
+	let { properties, website, format } = $derived(props);
+
+	console.log(`Frontmatter format ${format}`);
 
 	const excludedProperties = [
 		'title',
@@ -47,7 +49,7 @@
 			{#if website.hasOwnProperty(key)}
 				<FrontmatterTaxonomy {property} {key} {website} />
 			{:else}
-				<FrontmatterProperty {property} {key} />
+				<FrontmatterProperty {property} {key} {format} />
 			{/if}
 		{/if}
 	{/each}

package/src/lib/components/FrontmatterProperty.svelte

@@ -4,7 +4,9 @@
 	import Image from './Markdown/Image.svelte';
 
 	/** @type {{ property: any, key: string }}*/
-	let { property, key } = $props();
+	let { property, key, format } = $props();
+
+	console.log(`Frontmatter property format: ${format}`);
 </script>
 
 {#if property}
@@ -30,7 +32,7 @@
 	{#if value.type === 'array'}
 		{@render array(value.output)}
 	{:else if value.type === 'object'}
-		<Frontmatter props={{ properties: value.output }} />
+		<Frontmatter props={{ properties: value.output, format }} />
 	{:else if value.type === 'image'}
 		{@render image(value.output)}
 	{:else if value.type === 'date'}
@@ -52,19 +54,25 @@
 {/snippet}
 
 {#snippet url(value)}
-	<article>
+	{#if format === 'rss'}
 		<a href={value.url}>
-			{#if value['og:image']}
-				<img src={value['og:image']} alt="" />
-			{/if}
-			<h2>
-				{value['og:title'] || value.title}
-			</h2>
-			<p>
-				{value['og:description']}
-			</p>
+			{value.title || value['og:title']}
 		</a>
-	</article>
+	{:else}
+		<article>
+			<a href={value.url}>
+				{#if value['og:image']}
+					<img src={value['og:image']} alt="" />
+				{/if}
+				<h2>
+					{value.title || value['og:title']}
+				</h2>
+				<p>
+					{value['og:description']}
+				</p>
+			</a>
+		</article>
+	{/if}
 {/snippet}
 
 {#snippet pdf(value)}

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

@@ -1,5 +1,5 @@
 <script>
-	let { metadata, url } = $props();
+	let { metadata, url, format } = $props();
 	let { image, description, author } = $derived(metadata || {});
 
 	const href = $derived(metadata?.ogURL || metadata?.canonicalURL || url || '');
@@ -10,24 +10,30 @@
 </script>
 
 {#if metadata}
-	<article class="link-preview">
-		<a {href}>
-			{#if image}
-				<img src={image} alt="" />
-			{/if}
-			<h2>{title ? title + ' - ' : ''}<span class="host">{urlObject.host}</span></h2>
-			{#if author}
-				<p>
-					By {author}
-				</p>
-			{/if}
-			{#if description}
-				<p>
-					{description}
-				</p>
-			{/if}
-		</a>
-	</article>
+	{#if format === 'rss'}
+		<p><a {href}>{title ? title + ' - ' : ''}{urlObject.host}</a></p>
+	{:else}
+		<article class="link-preview">
+			<a {href}>
+				{#if image}
+					<img src={image} alt="" />
+				{/if}
+				<h2>{title ? title + ' - ' : ''}<span class="host">{urlObject.host}</span></h2>
+				{#if author}
+					<p>
+						By {author}
+					</p>
+				{/if}
+				{#if description}
+					<p>
+						{description}
+					</p>
+				{/if}
+			</a>
+		</article>
+	{/if}
+{:else if format === 'rss'}
+	<p><a {href}>{urlObject.host}</a></p>
 {:else}
 	<article class="link-preview">
 		<a {href}>

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

@@ -11,7 +11,7 @@
 
 	let { props } = $props();
 
-	let { ast, level, website } = $derived(props);
+	let { ast, level, website, format } = $derived(props);
 
 	function getElement(node) {
 		if (node.type === 'heading') {
@@ -43,7 +43,7 @@
 			<section class={createFolderClass(path)}>
 				{#each pages as page}
 					<article class={createPageClass(page.url, 'thumbnail')}>
-						<Page link={true} {content} {page} level={level + 1} {website} />
+						<Page link={true} {content} {page} level={level + 1} {website} {format} />
 					</article>
 				{/each}
 			</section>
@@ -55,6 +55,7 @@
 					level={level + 1}
 					{website}
 					content={false}
+					{format}
 				/>
 			</article>
 		{:else if node.type === 'heading'}
@@ -62,16 +63,16 @@
 				<svelte:self props={{ ast: node.children, level }} />
 			</svelte:element>
 		{:else if node.type === 'link' && node.children}
-			<Link {node} {level} {website} />
+			<Link {node} {level} {website} {format} />
 		{:else if node.type === 'thematicBreak'}
 			<hr />
 		{:else if node.type === 'image'}
 			<Image {node} />
 		{:else if node.type === 'url'}
-			<LinkPreview url={node.value} metadata={node.metadata} />
+			<LinkPreview url={node.value} metadata={node.metadata} {format} />
 		{:else if node.children}
 			<svelte:element this={getElement(node)}>
-				<svelte:self props={{ ast: node.children, level }} />
+				<svelte:self props={{ ast: node.children, level, format }} />
 			</svelte:element>
 		{:else if node.type === 'text'}
 			<Text {node} />

package/src/lib/components/Page.svelte

@@ -5,6 +5,8 @@
 	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>
@@ -46,7 +48,7 @@
 	<time datetime={dateObject.toISOString()}>{dateObject.toLocaleDateString()}</time>
 {/if}
 
-<Frontmatter props={{ properties: page, website }} />
+<Frontmatter props={{ properties: page, website, format }} />
 
 {#if page?.description || (!content && page?.imputedProperties?.description)}
 	<p class="description">{page?.description || page?.imputedProperties.description}</p>
@@ -54,6 +56,6 @@
 
 {#if level < 2 && content}
 	<div class="content">
-		<Markdown props={{ ast, level, website }} />
+		<Markdown props={{ ast, level, website, format }} />
 	</div>
 {/if}

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);
 	}
 
@@ -44,8 +42,8 @@
 		}
 
 		const breadcrumbs = getBreadcrumbs().slice(1, -1).reverse();
-		const breadcrumbSegment = breadcrumbs.length ? `${breadcrumbs.join(' - ')}` : '';
-		return `${pageMetaTitle} - ${breadcrumbSegment} - ${siteTitle}`;
+		const breadcrumbSegment = breadcrumbs.length ? ` - ${breadcrumbs.join(' - ')} - ` : '';
+		return `${pageMetaTitle}${breadcrumbSegment}${siteTitle}`;
 	}
 
 	function getFavicon() {
@@ -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/src/routes/feed.xml/+server.js

@@ -98,7 +98,7 @@ export async function GET({}) {
 			entry.push({
 				content: [
 					{ _attr: { type: 'html' } },
-					render(Page, { props: { page, level: 0, format: 'xml' } }).html
+					render(Page, { props: { page, level: 0, format: 'rss' } }).html
 				]
 			});
 

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
-}