vowel 0.0.2 → 0.1.0

package/content/home.md

@@ -0,0 +1,73 @@
+# Home
+
+Vowel is a very simple Markdown- and CSS-based website generator.
+
+To try it out, `cd` into a directory of markdown files and run:
+
+```
+npx -p svelte@next -p vowel@latest npx vowel
+```
+
+(This `npx` command forces the Svelte 5 peer depedency, without which the app will throw an error.)
+
+![A woman dancing](https://littlefair.imgix.net/florence-tango.jpeg?width=2048&auto=format%2Ccompress) Here's a photo
+
+Vowel is a minimal website framework for developers who love to write CSS and read RSS.
+
+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.)
+
+Vowel is created by Sam Littlefair. If you have questions or comments, [reach out to me on Twitter](https://twitter.com/samlfair).
+
+**Warning!** This project is still in early development. There are many bugs and the API is changing quickly.
+
+# Features
+
+## 🗺️ Sitemap
+
+Submit your website to search engines with a sitemap that lists all of your pages.
+
+## 📡 RSS
+
+Deliver your content to RSS readers with an Atom feed that lists your full posts in reverse-chronology.
+
+## ⚡️ Speed
+
+Get a blazing-fast, Svelte-rendered website.
+
+## 🗿 Static generation
+
+Load pages quickly with plain HTML.
+
+## 🔒 Copyright
+
+Display an up-to-date copyright in the footer of your website.
+
+## 🔗 Rich link previews
+
+Create rich links with titles and images, both internally and externally.
+
+## 🚏 Navigation
+
+Structure your content with a header, nav, sitemap, and breadcrumbs.
+
+## 🙃 Emoji favicon
+
+Use any emoji you want for your website's icon.
+
+## 🖇️ Custom taxonomies
+
+Go beyond tags to create authors and categories.
+
+## 🧮 Advanced frontmatter
+
+Display dates, lists, nested properties, links, and images in your frontmatter.
+
+## 👩‍🎤 Live editing
+
+See updates live as you save.
+
+# Try it
+
+/docs/quickstart

package/content/roadmap.md

@@ -0,0 +1,81 @@
+---
+description: What's planned.
+---
+
+# Roadmap
+
+## MVP
+
+- [x] Add all element types supported in Obsidian to markdown
+- [x] Add rich link previews
+- [x] Add RSS
+- [x] Add robots.txt
+  - [x] AI
+  - [x] Search
+  - [x] Image
+- [x] Typing
+- [x] Add sitemap
+- [x] Make taxonomies linkable in frontmatter (if a corresponding folder exists)
+- [x] Add header metadata (meta tags)
+- [x] CSS handling
+- [x] Favicon handling
+- [x] Docs
+- [x] Build action
+
+## V2
+
+- [x] Fallback homepages
+- [ ] Create post list element (`#tags/blue`, `@tags/blue`, `~tags/blue`)
+- [/] CSS defaults (work in progress)
+- [ ] CSS layout [presets](https://github.com/swyxio/spark-joy?tab=readme-ov-file#drop-in-css-frameworks)
+- [x] Images as <figure>s
+- [x] Frontmatter interpolation (title and description)
+- [ ] Frontmatter interpolation (image)
+- [x] Better favicon and styles handling
+- [x] Ignore README files
+- [ ] Add more header metadata
+- [ ] Define folder settings
+  - [ ] Title
+  - [ ] Breadrumb
+- [x] Define special page properties
+  - [x] Title
+  - [x] Description
+  - [x] Meta image
+  - [x] Date
+  - [ ] Modified date
+  - [ ] Tags
+  - [ ] Author/Authors
+- [ ] Make file names kebab-cased for URLs and links
+- [x] Include breadcrumbs in page titles ~~(optionally)~~
+- [ ] Strikethrough
+- [ ] Add hidden routes (`$`)
+- [x] Image alt text
+- [ ] Code highlighter
+- [x] Deploy action (Vercel)
+- [x] Add anchor links for headings
+- [ ] Post TOC
+- [ ] GitHub-style notes
+- [ ] Add in-browser search
+- [x] Figure out how to stop components from remounting on every change
+- [ ] Make RSS optional
+- [ ] Pagination
+- [x] Demote headings global option (headings are now demoted intelligently)
+
+## Wish list
+
+- [ ] Automatic file creation
+- [ ] Image serving and optimization
+- [ ] GUI
+- [ ] More deploy actions
+- [ ] Optional JSON interactivity (ratings, comments, SubPubHub)
+- [ ] Redirects
+- [ ] Advanced markdown
+  - [ ] Highlight
+  - [ ] Sanitize
+  - [ ] Tables
+  - [ ] Strike
+  - [ ] Task lists
+  - [ ] Footnotes
+  - [ ] Mermaid
+  - [ ] Math
+  - [ ] Wikilinks

package/content/settings.md

@@ -0,0 +1,12 @@
+---
+title: Vowel
+slogan: Markup for your Markdown
+breadcrumb: Home
+domain: 'https://getvowel.com'
+author: Sam Littlefair
+icon: 🔥
+robots:
+  google: true
+  google_images: true
+  ai: true
+---

package/content/vercel.json

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

package/jsconfig.json

@@ -0,0 +1,18 @@
+{
+	// "extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

package/package.json

@@ -1,21 +1,39 @@
 {
-  "name": "vowel",
-  "version": "0.0.2",
-  "description": "tiny library for working with vowels",
-  "main": "index.js",
-  "repository": "pacocoursey/vowel",
-  "author": "Paco Coursey <paco@pacocoursey.com> (pacocoursey.com)",
-  "keywords": [
-    "english",
-    "alphabet",
-    "vowel",
-    "consonant",
-    "string"
-  ],
-  "license": "MIT",
-  "scripts": {
-    "start": ""
-  },
-  "dependencies": {},
-  "devDependencies": {}
+	"name": "vowel",
+	"version": "0.1.0",
+	"bin": "./bin.js",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
+		"lint": "prettier --check .",
+		"format": "prettier --write ."
+	},
+	"type": "module",
+	"dependencies": {
+		"@picocss/pico": "^1.5.10",
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/adapter-static": "^3.0.1",
+		"@sveltejs/kit": "^2.5.6",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0-next.3",
+		"any-date-parser": "^1.5.4",
+		"change-case": "^5.4.1",
+		"js-yaml": "^4.1.0",
+		"milligram": "^1.4.1",
+		"object-path": "^0.11.8",
+		"open-props": "^1.6.13",
+		"prettier": "^3.0.0",
+		"prettier-plugin-svelte": "^3.0.0",
+		"remark": "^15.0.1",
+		"remark-frontmatter": "^5.0.0",
+		"remark-html": "^16.0.1",
+		"spectre.css": "^0.5.9",
+		"svelte": "^5.0.0-next.121",
+		"typescript": "^5.0.0",
+		"url-metadata": "^3.4.9",
+		"vite": "^5.0.12",
+		"xml": "^1.0.1"
+	}
 }

package/server.js

@@ -0,0 +1,80 @@
+import { fileURLToPath } from 'url';
+import { createServer, build } from 'vite';
+import { writeFile, mkdir, readFile } from 'fs/promises';
+import { existsSync } from 'fs';
+import { dirname, join } from 'path';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+
+// Check if this is a package build
+const isBuild = process.argv[2] === 'build';
+
+// If this is not a build, read the process argument
+const arg = !isBuild ? process.argv[2] : false;
+
+// Check if this is a user (process argument) or package dev (cwd)
+const $home = [arg || join(process.cwd(), 'content')];
+
+const define = {
+	$home
+};
+
+const config = {
+	// any valid user config options, plus `mode` and `configFile`
+	configFile: join(__dirname, 'vite.config.js'),
+	root: __dirname,
+	server: {
+		port: 1337
+	},
+	define
+};
+
+const vercelDefaults = {
+	cleanUrls: true,
+	outputDirectory: '.output',
+	buildCommand: null
+};
+
+async function buildProject() {
+	const outputDir = join($home[0], '.output');
+	const vercelConfigPath = join($home[0], 'vercel.json');
+	const vercelDirPath = join($home[0], '.vercel');
+	const projectJsonPath = join(vercelDirPath, 'project.json');
+	let projectData = null;
+
+	try {
+		if (existsSync(projectJsonPath)) {
+			const data = await readFile(projectJsonPath, 'utf-8');
+			projectData = JSON.parse(data);
+		}
+
+		await build(config);
+
+		if (projectData !== null) {
+			await mkdir(vercelDirPath, { recursive: true });
+			await writeFile(projectJsonPath, JSON.stringify(projectData, null, 2), 'utf-8');
+		}
+
+		const jsonData = JSON.stringify(vercelDefaults, null, 2);
+		await writeFile(vercelConfigPath, jsonData, 'utf-8');
+		await writeFile(join($home[0], '.output', 'vercel.json'), jsonData, 'utf-8');
+		console.log('Build completed successfully.');
+	} catch (err) {
+		console.error('Build failed:', err);
+	}
+}
+
+async function runServer() {
+	const server = await createServer(config);
+	await server.listen();
+
+	server.printUrls();
+	server.bindCLIShortcuts({ print: true });
+}
+
+// If build mode
+if (isBuild || process.argv[3] === 'true') {
+	buildProject();
+} else {
+	runServer();
+}

package/src/app.d.ts

@@ -0,0 +1,12 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+	}
+}
+
+export {};

package/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+
+	<body>
+		<div class="container">%sveltekit.body%</div>
+	</body>
+</html>

package/src/lib/components/Breadcrumbs.svelte

@@ -0,0 +1,19 @@
+<script>
+	import { page } from '$app/stores';
+	import { getFolderLabel, getFolder } from '$lib/utilities';
+
+	let { level } = $props();
+
+	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 active = $derived(level === $page.data.segments.length);
+</script>
+
+<a aria-current={active ? 'page' : undefined} href={crumbyPage?.['$'].url}>{folderLabel}</a>
+{#if !active}
+	<span aria-hidden="true" class="separator"></span>
+	<svelte:self level={level + 1} />
+{/if}

package/src/lib/components/DefaultStyles.svelte

@@ -0,0 +1,126 @@
+<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;
+	}
+
+	:global(:where(html, body, .page)) {
+		margin: 0;
+		padding: 0;
+		box-sizing: border-box;
+	}
+
+	:global(:where(.container)) {
+		height: 100vh;
+		overflow-y: scroll;
+		font-family: var(--font-sans);
+	}
+
+	:global(:where(.page)) {
+		max-width: 60ch;
+		margin: auto;
+		min-height: 100vh;
+		display: flex;
+		flex-direction: column;
+		padding: 1rem;
+		overflow-x: hidden;
+	}
+
+	/* Header */
+
+	:global(:where(nav)) {
+		display: flex;
+		column-gap: 1rem;
+		row-gap: 0.5rem;
+		flex-wrap: wrap;
+		justify-content: flex-start;
+	}
+
+	:global(:where(nav + nav)) {
+		margin-top: 1rem;
+	}
+
+	:global(:where(nav > a)) {
+		text-wrap: nowrap;
+	}
+
+	:global(:where(header a.site-title)) {
+		color: unset;
+		text-decoration: none;
+		font-weight: bold;
+		font-size: 2em;
+	}
+
+	:global(:where(nav, aside.sitemap) :where([aria-current='page'], [aria-current='true'])) {
+		text-decoration: none;
+		color: unset;
+		cursor: default;
+	}
+
+	:global(:where(header .breadcrumbs)) {
+		margin-top: 2rem;
+	}
+
+	:global(:where(header .breadcrumbs a)) {
+		font-size: 0.9em;
+		text-decoration: none;
+		color: unset;
+	}
+
+	:global(:where(header .breadcrumbs .separator):after) {
+		content: '/';
+	}
+
+	/* Content block elements */
+
+	:global(:where(pre)) {
+		padding: 1rem;
+		background: #eee;
+		overflow-x: auto;
+	}
+
+	:global(:where(article)) {
+		border: 8px ridge #eee;
+		padding-inline: 1rem;
+	}
+
+	:global(:where(article + article)) {
+		margin-top: 1rem;
+	}
+
+	/* Content inline elements */
+
+	:global(:where(code)) {
+		background: #eee;
+		margin: -3px -1px;
+		padding: 3px 4px;
+		border-radius: 5px;
+	}
+
+	/* Aside */
+
+	:global(:where(aside.sitemap)) {
+		margin-top: auto;
+	}
+
+	:global([aria-current='page']) {
+		color: unset;
+		text-decoration: none;
+		cursor: unset;
+	}
+
+	/* Footer */
+
+	:global(:where(footer)) {
+		text-align: center;
+	}
+
+	/* Pages */
+
+	:global(:where(.page.home > main > h1)) {
+		display: none;
+	}
+</style>

package/src/lib/components/FrontMatterTaxonomy.svelte

@@ -0,0 +1,48 @@
+<script>
+	import { sentenceCase } from 'change-case';
+	// @ts-ignore
+	import { getFileLabel, getPage } from '$lib/utilities';
+
+	/** @type {{ property: any, key: string }}*/
+	let { property, key, website } = $props();
+
+	const path = key + '/' + property;
+	const page = getPage(website, path);
+
+	/**
+	 * Check if a value is an object
+	 * @param {any} value - Value to check.
+	 * @returns {boolean}
+	 */
+	function isObject(value) {
+		return typeof value === 'object' && !Array.isArray(value) && value !== null;
+	}
+
+	/**
+	 * Check if a value is an object
+	 * @param {any} value - Value to check.
+	 * @returns {boolean}
+	 */
+	function isArray(value) {
+		return typeof value === 'object' && Array.isArray(value) && value !== null;
+	}
+</script>
+
+<dl>
+	<dt class={key}>{sentenceCase(key)}</dt>
+	<dd class={key}>
+		{#if isArray(property)}
+			<ul>
+				{#each property as item}
+					{@const path = key + '/' + item}
+					{@const page = getPage(website, path)}
+					<li>
+						<a href={page.url}>{getFileLabel(page)}</a>
+					</li>
+				{/each}
+			</ul>
+		{:else}
+			<a href={page.url}>{getFileLabel(page)}</a>
+		{/if}
+	</dd>
+</dl>

package/src/lib/components/Frontmatter.svelte

@@ -0,0 +1,54 @@
+<script>
+	import { FrontmatterProperty, FrontmatterTaxonomy } from './';
+
+	/**
+	 * @typedef {import("../utilities/processMarkdownFiles").MarkdownFile} MarkdownFile
+	 */
+
+	/**
+	 * @type {{props: {properties: MarkdownFile}}}
+	 */
+	let { props } = $props();
+	// TODO: Normalize frontmatter props
+	let { properties, website } = $derived(props);
+
+	const excludedProperties = [
+		'title',
+		'description',
+		'type',
+		'ast',
+		'url',
+		'frontmatter',
+		'published',
+		'date',
+		'image',
+		'breadcrumb',
+		'imputedProperties'
+	];
+
+	// const { website } = $page.data;
+
+	/**
+	 * Fetch a given property from a page.
+	 * @param {MarkdownFile} properties - A markdown file.
+	 * @param {string} key - The name of a property
+	 * @returns {any}
+	 */
+	function getProperty(properties, key) {
+		// @ts-ignore
+		return properties[key];
+	}
+</script>
+
+{#if properties}
+	{#each Object.keys(properties) as key}
+		{#if !excludedProperties.includes(key)}
+			{@const property = getProperty(properties, key)}
+			{#if website.hasOwnProperty(key)}
+				<FrontmatterTaxonomy {property} {key} {website} />
+			{:else}
+				<FrontmatterProperty {property} {key} />
+			{/if}
+		{/if}
+	{/each}
+{/if}

package/src/lib/components/FrontmatterProperty.svelte

@@ -0,0 +1,72 @@
+<script>
+	import { sentenceCase } from 'change-case';
+	import Frontmatter from './Frontmatter.svelte';
+	import Image from './Markdown/Image.svelte';
+
+	/** @type {{ property: any, key: string }}*/
+	let { property, key } = $props();
+</script>
+
+{#if property}
+	<dl class={key}>
+		<dt>{sentenceCase(key)}</dt>
+		<dd>
+			{@render propertySwitch(property)}
+		</dd>
+	</dl>
+{/if}
+
+{#snippet array(items)}
+	<ul>
+		{#each items as item}
+			<li>
+				{@render propertySwitch(item)}
+			</li>
+		{/each}
+	</ul>
+{/snippet}
+
+{#snippet propertySwitch(value)}
+	{#if value.type === 'array'}
+		{@render array(value.output)}
+	{:else if value.type === 'object'}
+		<Frontmatter props={{ properties: value.output }} />
+	{:else if value.type === 'image'}
+		{@render image(value.output)}
+	{:else if value.type === 'date'}
+		{@render date(value.output)}
+	{:else if value.type === 'url'}
+		{@render url(value.output)}
+	{:else}
+		{value.output || value}
+	{/if}
+{/snippet}
+
+{#snippet image(value)}
+	<Image node={{ url: value, alt: '' }} />
+{/snippet}
+
+{#snippet date(value)}
+	{@const date = new Date(value)}
+	<time datetime={date.toISOString()}>{date.toLocaleDateString('en-US')}</time>
+{/snippet}
+
+{#snippet url(value)}
+	<article>
+		<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>
+		</a>
+	</article>
+{/snippet}
+
+{#snippet pdf(value)}
+	<a href={value.url}>{value.url}</a>
+{/snippet}