vowel 0.0.2 → 0.1.0

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

@@ -0,0 +1,48 @@
+<script>
+	let { node } = $props();
+	let { url, alt } = node;
+
+	let defaultWidth = 800;
+	const srcsetWidths = [640, 828, 1080, 1200, 1920, 2048, 3840];
+
+	let urlObject = createURLObject();
+
+	function createURLObject() {
+		try {
+			return new URL(url);
+		} catch (e) {
+			console.error(`Error on image ${url}:`);
+			console.error(e);
+		}
+	}
+
+	let srcset = createSrcset();
+
+	function createSrcset() {
+		if (urlObject?.host.includes('imgix.net')) {
+			urlObject?.searchParams.set('width', String(defaultWidth));
+			urlObject?.searchParams.append('auto', 'format,compress');
+
+			return srcsetWidths.reduce((srcset, width) => {
+				urlObject?.searchParams.set('width', width);
+				return `${srcset}, ${urlObject?.href} ${width}w`;
+			}, '');
+
+			urlObject?.searchParams.set('width', String(defaultWidth));
+		}
+	}
+</script>
+
+{#if urlObject}
+	<img src={urlObject.href} {alt} {srcset} />
+{/if}
+
+<style>
+	img {
+		transition: max-width 1s linear;
+		max-width: 100%;
+		height: auto;
+		width: auto;
+		margin-inline: auto;
+	}
+</style>

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

@@ -0,0 +1,10 @@
+<script>
+	import Markdown from './index.svelte';
+
+	let { node, level, website } = $props();
+	let { url, children } = $derived(node);
+</script>
+
+<a href={url}>
+	<Markdown props={{ ast: children, level, website }} />
+</a>

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

@@ -0,0 +1,39 @@
+<script>
+	let { metadata, url } = $props();
+	let { image, description, author } = $derived(metadata || {});
+
+	const href = $derived(metadata?.ogURL || metadata?.canonicalURL || url || '');
+
+	const title = $derived(metadata?.ogTitle || metadata?.title || '');
+
+	const urlObject = new URL(url);
+</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>
+{:else}
+	<article class="link-preview">
+		<a {href}>
+			<h2>
+				<span class="host">{urlObject.host}</span>
+			</h2>
+		</a>
+	</article>
+{/if}

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

@@ -0,0 +1,6 @@
+<script>
+	let { node } = $props();
+	let { value } = $derived(node);
+</script>
+
+{value}

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

@@ -0,0 +1,84 @@
+<script>
+	import { Page } from '$lib/components';
+	import { getPage, getPagesByFolder, createPageClass, createFolderClass } from '$lib/utilities';
+	import { getFolderAndCount, isFileLink } from './validators';
+	import Image from './Image.svelte';
+	import Link from './Link.svelte';
+	import Text from './Text.svelte';
+	import LinkPreview from './LinkPreview.svelte';
+	import { toString } from 'mdast-util-to-string';
+	import { kebabCase } from 'change-case';
+
+	let { props } = $props();
+
+	let { ast, level, website } = $derived(props);
+
+	function getElement(node) {
+		if (node.type === 'heading') {
+			return ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'div'][node.depth - 1];
+		}
+		const elements = {
+			emphasis: 'em',
+			text: 'span',
+			paragraph: 'p',
+			strong: 'strong',
+			list: node.ordered ? 'ol' : 'ul',
+			listItem: 'li',
+			blockquote: 'blockquote',
+			inlineCode: 'code',
+			code: 'pre',
+			figure: 'figure',
+			figcaption: 'figcaption'
+		};
+
+		return elements[node.type];
+	}
+</script>
+
+{#if ast}
+	{#each ast as node}
+		{@const { count, path, property, content } = getFolderAndCount(node)}
+		{#if count}
+			{@const pages = getPagesByFolder(website, path, true, count, property)}
+			<section class={createFolderClass(path)}>
+				{#each pages as page}
+					<article class={createPageClass(page.url, 'thumbnail')}>
+						<Page link={true} {content} {page} level={level + 1} {website} />
+					</article>
+				{/each}
+			</section>
+		{:else if isFileLink(node)}
+			<article class={createPageClass(node.children[0].value, 'thumbnail')}>
+				<Page
+					link={true}
+					page={getPage(website, node.children[0].value)}
+					level={level + 1}
+					{website}
+					content={false}
+				/>
+			</article>
+		{:else if node.type === 'heading'}
+			<svelte:element this={getElement(node)} id={kebabCase(toString(node))}>
+				<svelte:self props={{ ast: node.children, level }} />
+			</svelte:element>
+		{:else if node.type === 'link' && node.children}
+			<Link {node} {level} {website} />
+		{: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} />
+		{:else if node.children}
+			<svelte:element this={getElement(node)}>
+				<svelte:self props={{ ast: node.children, level }} />
+			</svelte:element>
+		{:else if node.type === 'text'}
+			<Text {node} />
+		{:else}
+			<svelte:element this={getElement(node)}>
+				<Text {node} />
+			</svelte:element>
+		{/if}
+	{/each}
+{/if}

package/src/lib/components/Markdown/validators.js

@@ -0,0 +1,29 @@
+const pathRegex = /^\/[\/\w\d=-_\.\?&-]*$/;
+
+export function getFolderAndCount(node) {
+	if (
+		node.type === 'paragraph' &&
+		node.children.length === 1 &&
+		node.children[0].type === 'text' &&
+		(node.children[0].value.match(pathRegex) || node.children[0].value.match(/^\/$/))
+	) {
+		const urlObject = new URL(node.children[0].value, 'https://placeholder.getvowel.com');
+		const isFolder = urlObject.searchParams.get('count');
+		const property = urlObject.searchParams.get('property');
+		const content = urlObject.searchParams.get('content') === 'true';
+		if (isFolder) return { count: isFolder, path: urlObject.pathname, property, content };
+	}
+	return false;
+}
+
+export function isFileLink(node) {
+	if (
+		node.type === 'paragraph' &&
+		node.children.length === 1 &&
+		node.children[0].type === 'text' &&
+		node.children[0].value.match(pathRegex)
+	) {
+		return true;
+	}
+	return false;
+}

package/src/lib/components/Nav.svelte

@@ -0,0 +1,39 @@
+<script>
+	import { getFileLabel, getFolderLabel, isActiveLink } from '$lib/utilities';
+
+	let { folder, segments, child } = $props();
+
+	// There's definitely a better way to filter this
+	function filterFolder(folder) {
+		const filteredFolder = {};
+		for (let key in folder) {
+			if (!folder[key]['$']?.date) {
+				filteredFolder[key] = folder[key];
+			}
+		}
+		return filteredFolder;
+	}
+
+	const evergreen = $derived(filterFolder(folder));
+</script>
+
+{#if Object.keys(evergreen).some((key) => key !== '$' && key !== '_')}
+	<nav>
+		{#if !child && evergreen['$']?.url !== '/'}
+			<a aria-current={isActiveLink(segments)} href={evergreen['$']?.url}
+				>{getFolderLabel(evergreen)}</a
+			>
+		{/if}
+		{#each Object.keys(evergreen) as key}
+			{#if !key.match(/^[$_]$/) && key !== '.obsidian'}
+				<a
+					href={evergreen[key]['_']?.url || evergreen[key]['$']?.url}
+					aria-current={isActiveLink(segments, key)}>{getFolderLabel(evergreen[key]) || key}</a
+				>
+			{/if}
+		{/each}
+	</nav>
+	{#if segments[0]}
+		<svelte:self folder={evergreen[segments[0]]} segments={segments.slice(1)} child={true} />
+	{/if}
+{/if}

package/src/lib/components/Page.svelte

@@ -0,0 +1,59 @@
+<script>
+	import { Markdown, Frontmatter } from '$lib/components';
+	import Image from './Markdown/Image.svelte';
+
+	let { page, content = true, link, level = 0, website = {}, format = 'html' } = $props();
+	let { ast, title, date, image, imputedProperties } = $derived(page || {});
+
+	const dateObject = date?.type === 'date' && new Date(date.output);
+	// TODO: Add conditional logic for format = 'xml'
+</script>
+
+<!-- Image -->
+{#if image}
+	{#if link}
+		<a href={page.url}>
+			<Image node={{ url: image.output, alt: '' }} />
+		</a>
+	{:else}
+		<Image node={{ url: image.output, alt: '' }} />
+	{/if}
+{/if}
+
+<!-- Title -->
+{#if title}
+	{#if link}
+		<h1>
+			<a href={page.url}>
+				{page.imputedProperties.title || title || page.imputedProperties?.fileName}
+			</a>
+		</h1>
+	{:else}
+		<h1>{page.imputedProperties.title || title || page.imputedProperties?.fileName}</h1>
+	{/if}
+{/if}
+
+<!-- Date -->
+{#if link}
+	{#if dateObject}
+		<time datetime={dateObject.toISOString()}>
+			<a href={page.url}>
+				{dateObject.toLocaleDateString()}
+			</a>
+		</time>
+	{/if}
+{:else if dateObject}
+	<time datetime={dateObject.toISOString()}>{dateObject.toLocaleDateString()}</time>
+{/if}
+
+<Frontmatter props={{ properties: page, website }} />
+
+{#if page?.description || (!content && page?.imputedProperties?.description)}
+	<p class="description">{page?.description || page?.imputedProperties.description}</p>
+{/if}
+
+{#if level < 2 && content}
+	<div class="content">
+		<Markdown props={{ ast, level, website }} />
+	</div>
+{/if}

package/src/lib/components/Sitemap.svelte

@@ -0,0 +1,38 @@
+<script>
+	import { getFileLabel } from '$lib/utilities';
+	import { getFolderLabel, isActiveLink } from '../utilities';
+
+	let { section, key, root, segments } = $props();
+
+	const element = section['_'] ? 'ul' : 'div';
+</script>
+
+<!-- TODO: Add a sort -->
+
+{#if typeof section === 'object'}
+	<ul>
+		{#if root}
+			<li class="home">
+				<a aria-current={isActiveLink(segments)} href={section['$'].url}>
+					{getFileLabel(section['$']) || getFolderLabel(section)}
+				</a>
+			</li>
+		{/if}
+		{#each Object.keys(section) as key}
+			{#if Object.keys(section[key]).length === 1 && section[key].$}
+				<li class={key}>
+					<a aria-current={isActiveLink(segments, key)} href={section[key].$.url}>
+						{getFileLabel(section[key]['$']) || getFolderLabel(section[key])}
+					</a>
+				</li>
+			{:else if section[key].$}
+				<li class={key}>
+					<a aria-current={isActiveLink(segments, key)} href={section[key].$.url}>
+						{getFileLabel(section[key]['$']) || getFolderLabel(section[key])}
+					</a>
+					<svelte:self section={section[key]} segments={segments.slice(1)} {key} />
+				</li>
+			{/if}
+		{/each}
+	</ul>
+{/if}

package/src/lib/components/index.js

@@ -0,0 +1,9 @@
+export { default as Breadcrumbs } from './Breadcrumbs.svelte';
+export { default as Markdown } from './Markdown/index.svelte';
+export { default as Nav } from './Nav.svelte';
+export { default as Frontmatter } from './Frontmatter.svelte';
+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';

package/src/lib/index.js

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

package/src/lib/utilities/buildURL.js

@@ -0,0 +1,18 @@
+/**
+ * Build a URL for a file.
+ * @param {string} parents - Parent URL.
+ * @param {string} route - Filename.
+ * @returns {string} - URL for the file.
+ */
+export default function buildURL(parents, route) {
+	if (!parents) {
+		if (route === 'home' || route === 'settings') {
+			return '/';
+		}
+		return '/' + route;
+	}
+	if (route === 'home' || route === 'settings') {
+		return parents;
+	}
+	return parents + '/' + route;
+}

package/src/lib/utilities/checkFileExists.js

@@ -0,0 +1,16 @@
+import fs from 'fs/promises';
+// import { constants as fsConstants } from 'fs';
+
+/**
+ * Description
+ * @param {string} folderPath - File page for a document.
+ * @returns {Promise<boolean>}
+ */
+export default async function checkFileExists(folderPath) {
+	try {
+		await fs.access(folderPath);
+		return true; // Folder exists
+	} catch (error) {
+		return false; // Folder does not exist
+	}
+}

package/src/lib/utilities/createFolderClass.js

@@ -0,0 +1,4 @@
+export default function createFolderClass(url) {
+	if (url === '/') return 'folder-root';
+	return 'folder' + url.replaceAll('/', '-');
+}

package/src/lib/utilities/createPageClass.js

@@ -0,0 +1,4 @@
+export default function createPageClass(url, type = 'page') {
+	if (url === '/') return 'page home';
+	return type + url.split('/').join(' ');
+}

package/src/lib/utilities/getFileLabel.js

@@ -0,0 +1,18 @@
+function createTitleFromDescription(description) {
+	if (description?.length > 30) {
+		return description.slice(0, 30) + '...';
+	}
+	return description;
+}
+
+export default function getFileLabel(page) {
+	return (
+		page?.breadcrumb ||
+		page?.title ||
+		page?.imputedProperties?.title ||
+		createTitleFromDescription(page?.description) ||
+		createTitleFromDescription(page?.imputedProperties?.description) ||
+		page?.imputedProperties?.fileName ||
+		null
+	);
+}

package/src/lib/utilities/getFolder.js

@@ -0,0 +1,16 @@
+export default function getFolder(website, path) {
+	const dotPath = path
+		.replace(/^\//, '') // Remove preceding slash
+		.replace(/\/$/, '') // Remove trailing slash
+		.replaceAll('/', '.'); // Convert to dots
+
+	let drill = website;
+
+	dotPath.split('.').forEach((segment) => {
+		if (segment) {
+			drill = drill[segment];
+		}
+	});
+
+	return drill;
+}

package/src/lib/utilities/getFolderLabel.js

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

package/src/lib/utilities/getPage.js

@@ -0,0 +1,24 @@
+// import objectPath from 'object-path';
+
+/**
+ * Takes a file URL and a website object and returns the file object.
+ * @param {import('./processMarkdownFiles').Directory} website - A website object.
+ * @param {string} path - A `/`-delimited filepath.
+ * @returns {import('./processMarkdownFiles').MarkdownFile}
+ */
+export default function getPage(website, path) {
+	let page = website;
+
+	// const dotPath = path.replace(/^\//, '').replaceAll('/', '.') + (path ? '.' : '') + '$';
+
+	const segments = path
+		.replace(/^\//, '')
+		.concat(path ? '/$' : '$')
+		.split('/');
+
+	segments.forEach((segment) => {
+		if (typeof page === 'object' && page !== null) page = page[segment];
+	});
+
+	return page;
+}

package/src/lib/utilities/getPagesByFolder.js

@@ -0,0 +1,93 @@
+// @ts-ignore
+import { getFolder, getFileLabel } from '.';
+
+// @ts-ignore
+const excludedFileNames = ['_'];
+
+/**
+ * Traverse a folder to get all of the pages.
+ * @param {import('./processMarkdownFiles').Directory} folder - The path to the folder to retrieve.
+ * @param {boolean} root - Whether this is the root of the recursion.
+ * @returns {Array<Page>}
+ */
+function traverseFolder(folder, root = false, property = '.') {
+	let propertyKey = (property || '.').split('.')[0];
+	let propertyValue = (property || '.').split('.')[1];
+
+	let pages = [];
+
+	for (let key in folder) {
+		if (key === '$') {
+			if (!root) {
+				if (propertyKey) {
+					if (
+						folder[key].hasOwnProperty(propertyKey) &&
+						folder[key][propertyKey] === propertyValue
+					) {
+						pages.push(folder[key]);
+					}
+				} else {
+					pages.push(folder[key]);
+				}
+			}
+			// if (
+			// 	!root &&
+			// 	folder[key].$?.hasOwnProperty(propertyKey) &&
+			// 	folder[key][propertyKey] === propertyValue
+			// )
+			// 	pages.push(folder[key]);
+		} else if (key !== '_') {
+			const child = folder[key];
+
+			// @ts-ignore
+			pages.push(...traverseFolder(child, false, property));
+		}
+	}
+
+	// @ts-ignore
+	return pages;
+}
+
+/**
+ * Description
+ * @param {Page} a
+ * @param {Page} b
+ * @returns {number}
+ */
+function sortPage(a, b) {
+	if (a.hasOwnProperty('date') && !b.hasOwnProperty('date')) return -1;
+	else if (!a.hasOwnProperty('date') && b.hasOwnProperty('date')) return 1;
+	else if (a.date && b.date) {
+		const aDate = Number(new Date(a.date.output));
+		const bDate = Number(new Date(b.date.output));
+		return bDate - aDate;
+	} else if (getFileLabel(a) > getFileLabel(b)) return 1;
+	return -1;
+}
+
+/**
+ * @typedef {import('./processMarkdownFiles').MarkdownFile} Page
+ */
+
+/**
+ * Recursively get all of the pages in a folder.
+ * @param {import('./processMarkdownFiles').Directory} website - The entire website.
+ * @param {string} path - The path to the folder to retrieve.
+ * @param {number | undefined} count - Number of pages to return.
+ * @returns {Array<Page>}
+ */
+export default function getPagesByFolder(
+	website,
+	path,
+	excludeRoot = true,
+	count = undefined,
+	property
+) {
+	const folder = getFolder(website, path);
+
+	const pages = traverseFolder(folder, excludeRoot, property);
+
+	pages.sort(sortPage);
+
+	return pages.slice(0, count);
+}

package/src/lib/utilities/index.js

@@ -0,0 +1,20 @@
+export { default as getPage } from './getPage';
+export { default as getFileLabel } from './getFileLabel';
+export { default as getFolderLabel } from './getFolderLabel';
+export { default as getFolder } from './getFolder';
+export { default as getPagesByFolder } from './getPagesByFolder';
+export { default as buildURL } from './buildURL';
+export { default as checkFileExists } from './checkFileExists';
+export { default as writeCache } from './writeCache';
+export { default as readMarkdownFile } from './readMarkdownFile';
+export { default as processMarkdownFiles } from './processMarkdownFiles';
+export { default as loadCache } from './loadCache';
+export { default as mutateMarkdownFrontmatter } from './mutateMarkdownFrontmatter';
+export { default as isObject } from './isObject';
+export { default as regexPatterns } from './regexPatterns';
+export { default as mutateMarkdownAST } from './mutateMarkdownAST';
+export { default as parseDate } from './parseDate';
+export { default as resolveHomeDirPath } from './resolveHomeDirPath';
+export { default as createPageClass } from './createPageClass';
+export { default as createFolderClass } from './createFolderClass';
+export { default as isActiveLink } from './isActiveLink';

package/src/lib/utilities/isActiveLink.js

@@ -0,0 +1,12 @@
+export default function isActiveLink(segments, key) {
+	if (!segments?.[0] && !key) {
+		return 'page';
+	}
+	if (segments.length === 1 && segments[0] === key) {
+		return 'page';
+	}
+	if (segments.length > 1 && segments[0] === key) {
+		return 'true';
+	}
+	return undefined;
+}

package/src/lib/utilities/isObject.js

@@ -0,0 +1,8 @@
+/**
+ * Check if a value is an object
+ * @param {any} value - Value to check.
+ * @returns {boolean}
+ */
+export default function isObject(value) {
+	return typeof value === 'object' && !Array.isArray(value) && value !== null;
+}

package/src/lib/utilities/loadCache.js

@@ -0,0 +1,28 @@
+import fs from 'fs/promises';
+import resolveHomeDirPath from './resolveHomeDirPath';
+
+/**
+ * @typedef {Object<string, object>} Cache
+ * @description A map of URLs to their metadata.
+ */
+
+/**
+ * Load a cache of URLs
+ * @returns {Promise<Cache>}
+ */
+export default async function loadCache(homeDir) {
+	const cachePath = resolveHomeDirPath('.cache.json', homeDir);
+
+	try {
+		let data = await fs.readFile(cachePath);
+		return JSON.parse(data);
+	} catch (error) {
+		if (error.code === 'ENOENT') {
+			await fs.writeFile(cachePath, '{}', 'utf8');
+			console.log('.cache.json created');
+		} else {
+			throw error;
+		}
+	}
+	return {};
+}