vowel 0.1.4 → 0.1.6

package/bin.js

@@ -21,7 +21,7 @@ const binDirName = path.dirname(binFilePath);
 const homeDir = process.cwd();
 
 const spawnArgs = ['./server.js', '--directory', homeDir];
-if (args.build) spawnArgs.push('--build');
+if (args._.includes('build')) spawnArgs.push('--build');
 
 if (!args.verbose) {
 	filterConsole(['jsconfig', 'vite', 'Vite', 'tsconfig', `--host`]);

package/content/$features/cards.md

@@ -0,0 +1,7 @@
+---
+icon: 🃏
+---
+
+# Cards
+
+Create eye-catching content with no fuss. (Like this.)

package/content/$features/editing.md

@@ -0,0 +1,7 @@
+---
+icon: 👩‍🎤
+---
+
+# Live editing
+
+See updates live as you save.

package/content/$features/emoji.md

@@ -0,0 +1,7 @@
+---
+icon: 🙃
+---
+
+# Emoji favicons
+
+Use any emoji you want for your website's icon.

package/content/$features/frontmatter.md

@@ -0,0 +1,7 @@
+---
+icon: 🧮
+---
+
+# Frontmatter
+
+Display dates, lists, nested properties, links, and images in your frontmatter.

package/content/$features/lists.md

@@ -0,0 +1,7 @@
+---
+icon: 🍱
+---
+
+# Blog
+
+Write one line to list your blog posts.

package/content/$features/navigation.md

@@ -0,0 +1,7 @@
+---
+icon: 🚏
+---
+
+# Navigation
+
+Structure your content with smart nav menus.

package/content/$features/rich-previews.md

@@ -0,0 +1,7 @@
+---
+icon: 🤿
+---
+
+# Rich link previews
+
+Create rich links with titles and images.

package/content/$features/robots.md

@@ -0,0 +1,7 @@
+---
+icon: 🤖
+---
+
+# Robots
+
+Take control of your robots.txt.

package/content/$features/rss.md

@@ -0,0 +1,7 @@
+---
+icon: 📡
+---
+
+# RSS
+
+Deliver your content to RSS readers with an Atom feed.

package/content/$features/sitemap.md

@@ -0,0 +1,7 @@
+---
+icon: 🗺️
+---
+
+# Sitemap
+
+Submit your website to search engines with a sitemap that lists all of your pages.

package/content/$features/speed.md

@@ -0,0 +1,7 @@
+---
+icon: 🏎️
+---
+
+# Speed
+
+Get a blazing-fast, Svelte-rendered website.

package/content/$features/static.md

@@ -0,0 +1,7 @@
+---
+icon: 🏛️
+---
+
+# Static generation
+
+Load pages quickly with plain HTML.

package/content/$features/taxonomies.md

@@ -0,0 +1,7 @@
+---
+icon: 🔖
+---
+
+# Taxonomies
+
+Go beyond tags to create authors and categories.

package/content/docs/file-structure.md

@@ -1,6 +1,6 @@
 ---
 title: File structure
-breadcrumb: File structure
+breadcrumb: Files
 description: Organize your files.
 ---
 

package/content/docs/folder-settings.md

@@ -1,5 +1,6 @@
 ---
 title: Folder settings
+breadcrumb: Folders
 description: Configure your project.
 ---
 

package/content/docs/items.md

@@ -0,0 +1,13 @@
+# Items
+
+With Vowel, you can create reusable pieces of content and embed them throughout your website.
+
+To create one, prefix a file or folder with a `$`, such as `$faqs`. The file or folder will not produce a page, but the content can be displayed on other pages, like so:
+
+```md
+Here are answers to common questions:
+
+/$faqs?count=10
+```
+
+This also allows richer content, as the item will be displayed with frontmatter.

package/content/docs/run-build-deploy.md

@@ -1,5 +1,5 @@
 ---
-title: Run, Build, and Deploy
+title: Deploy
 description: Get going.
 ---
 

package/content/home.md

@@ -26,49 +26,7 @@ Vowel is created by Sam Littlefair. If you have questions or comments, [reach ou
 
 # 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.
+/$features?count=20
 
 # Try it
 

package/content/vercel.json

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

package/package.json

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

package/server.js

@@ -57,8 +57,10 @@ async function buildProject() {
 		}
 
 		const jsonData = JSON.stringify(vercelDefaults, null, 2);
-		await writeFile(vercelConfigPath, jsonData, 'utf-8');
-		await writeFile(join($home[0], '.output', 'vercel.json'), jsonData, 'utf-8');
+
+		const path = join($home, 'vercel.json');
+		await writeFile(path, jsonData, 'utf-8');
+		// await writeFile(vercelConfigPath, jsonData, 'utf-8');
 		console.log('Build completed successfully.');
 	} catch (err) {
 		console.error('Build failed:', err);

package/src/lib/components/DefaultStyles.svelte

@@ -352,7 +352,7 @@
 			padding-right: 0;
 		}
 
-		:where(pre, blockquote, dl, figure, table, p, ul, ol, form, article):not(:last-child) {
+		:where(pre, blockquote, dl, figure, table, p, ul, ol, form, article, section):not(:last-child) {
 			margin-bottom: 2.5rem;
 		}
 
@@ -365,10 +365,14 @@
 
 		/* Header */
 
+		header {
+			margin-top: 4rem;
+		}
+
 		nav.top-bar {
 			border: 1px solid var(--border-color);
 			padding: 6px 10px;
-			margin-inline: -10px;
+			margin-inline: -3px;
 			border-radius: 5px;
 			display: flex;
 			column-gap: 2rem;
@@ -422,6 +426,10 @@
 			cursor: default;
 		}
 
+		header .breadcrumbs > a:only-child {
+			display: none;
+		}
+
 		header .breadcrumbs {
 			margin-block: 4rem 1rem;
 		}
@@ -455,5 +463,55 @@
 		.page.home > main > h1 {
 			display: none;
 		}
+
+		.page.home .content p:first-child {
+			font-size: 1.2em;
+		}
+
+		section[class*='$'] {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+			grid-auto-rows: auto;
+			grid-gap: 2rem;
+
+			& article {
+				margin: 0;
+			}
+		}
+
+		article.item {
+			display: grid;
+			flex-direction: column;
+			grid-template-areas:
+				'title icon'
+				'description description';
+			align-content: start;
+		}
+
+		article.item h1 {
+			grid-area: title;
+			font-size: 1.6rem;
+		}
+
+		article.item dl.icon {
+			grid-area: icon;
+			font-size: 1.5em;
+		}
+
+		article.item dl.icon dd {
+			text-align: right;
+		}
+
+		article.item .description {
+			grid-area: description;
+		}
+
+		article.item dt {
+			display: none;
+		}
+
+		article.item dl.icon {
+			order: -1;
+		}
 	}
 </style>

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

@@ -1,4 +1,4 @@
-const pathRegex = /^\/[\/\w\d=-_\.\?&-]*$/;
+const pathRegex = /^\/[\/\$\w\d=-_\.\?&-]*$/;
 
 export function getFolderAndCount(node) {
 	if (

package/src/lib/components/Nav.svelte

@@ -7,7 +7,7 @@
 	function filterFolder(folder) {
 		const filteredFolder = {};
 		for (let key in folder) {
-			if (!folder[key]['$']?.date) {
+			if (!folder[key]['$']?.date && !key.startsWith('$')) {
 				filteredFolder[key] = folder[key];
 			}
 		}
@@ -19,7 +19,7 @@
 
 {#if Object.keys(evergreen).some((key) => key !== '$' && key !== '_')}
 	<nav class="top-bar">
-		{#if !child && evergreen['$']?.url !== '/'}
+		{#if !child}
 			<a aria-current={isActiveLink(segments)} href={evergreen['$']?.url}
 				>{getFolderLabel(evergreen)}</a
 			>

package/src/lib/components/Page.svelte

@@ -22,7 +22,7 @@
 
 <!-- Title -->
 {#if title}
-	{#if link}
+	{#if link && page.url}
 		<h1>
 			<a href={page.url}>
 				{page.imputedProperties.title || title || page.imputedProperties?.fileName}

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

package/src/lib/utilities/createPageClass.js

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

package/src/lib/utilities/getPagesByFolder.js

@@ -17,30 +17,32 @@ function traverseFolder(folder, root = false, property = '.') {
 	let pages = [];
 
 	for (let key in folder) {
-		if (key === '$') {
-			if (!root) {
-				if (propertyKey) {
-					if (
-						folder[key].hasOwnProperty(propertyKey) &&
-						folder[key][propertyKey] === propertyValue
-					) {
+		if (!key.startsWith('$') || key.length === 1) {
+			if (key === '$') {
+				if (!root) {
+					if (propertyKey) {
+						if (
+							folder[key].hasOwnProperty(propertyKey) &&
+							folder[key][propertyKey] === propertyValue
+						) {
+							pages.push(folder[key]);
+						}
+					} else {
 						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];
+				// 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
+				pages.push(...traverseFolder(child, false, property));
+			}
 		}
 	}
 

package/src/lib/utilities/processMarkdownFiles.js

@@ -90,7 +90,7 @@ function DefaultDirectory(path) {
  * @param {import('./loadCache').Cache} cache
  * @returns {Promise<Directory>}
  */
-async function readFolder(folderPath, parents, cache) {
+async function readFolder(folderPath, parents, cache, hidden) {
 	function filterFiles(file) {
 		if (file.name.startsWith('.')) return false;
 		if (file.name.startsWith('README')) return false;
@@ -105,7 +105,9 @@ async function readFolder(folderPath, parents, cache) {
 
 	console.log(`filesfound:${files.length}`);
 
-	const promises = files.map(async (file) => await readFile(file, parents, cache, folderPath));
+	const promises = files.map(
+		async (file) => await readFile(file, parents, cache, folderPath, hidden)
+	);
 
 	const folder = (await Promise.all(promises)).reduce((acc, obj) => ({ ...acc, ...obj }), {});
 
@@ -123,13 +125,15 @@ async function readFolder(folderPath, parents, cache) {
 	return folder;
 }
 
-async function readFile(file, parents, cache, folderPath) {
+async function readFile(file, parents, cache, folderPath, hidden) {
 	const route = path.parse(file.name).name;
 	const url = buildURL(parents, route);
 	const filePath = path.join(folderPath, file.name);
 
 	const extension = path.extname(file.name);
 
+	const hide = file.name.startsWith('$') || hidden;
+
 	if (file.isFile() && extension === '.md') {
 		const startLoad = performance.now();
 		const shortPath = parents + '/' + file.name;
@@ -150,13 +154,15 @@ async function readFile(file, parents, cache, folderPath) {
 				}
 			};
 		}
+
 		return {
 			[route]: {
 				$: {
 					...frontmatter,
 					imputedProperties,
 					ast,
-					url
+					// url,
+					url: hide ? false : url
 				}
 			}
 		};
@@ -173,7 +179,7 @@ async function readFile(file, parents, cache, folderPath) {
 		const shortPath = parents + '/' + file.name;
 
 		const startLoad = performance.now();
-		const folder = await readFolder(path.join(folderPath, file.name), url, cache);
+		const folder = await readFolder(path.join(folderPath, file.name), url, cache, hide);
 
 		const loadTime = (performance.now() - startLoad).toFixed(2);
 		// console.log(`📁 ${shortPath} (${loadTime}ms)`);