vowel 0.1.13 → 0.1.14

package/README.md

@@ -1,136 +1,31 @@
-## MVP
+# Vowel
 
-- [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
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
 
-## V2
+The easiest way to code your own website.
 
-- [x] Fallback homepages
-- [ ] Create post list element (`#tags/blue`, `@tags/blue`, `~tags/blue`)
-- [x] Better favicon and styles handling
-- [ ] 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
-- [ ] Add hidden routes (`$`)
-- [ ] Image alt text
-- [ ] Code highlighter
-- [x] Deploy action (Vercel)
-- [ ] 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
-- [ ] Demote headings global option
+[Try it on StackBlitz](https://stackblitz.com/~/github.com/samlfair/vowel-site?file=home.md).
 
-## 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
-
-## Ideas
-
-https://github.com/arobase-che/remark-attr
-https://github.com/wataru-chocola/remark-definition-list
-https://github.com/FinnRG/remark-mentions
-https://github.com/remarkjs/remark-toc
-
-- Docusaurus
-- MkDocs
-- Coolify
-- NodeGui
-
-https://www.nngroup.com/articles/breadcrumb-navigation-useful/
-https://www.nngroup.com/articles/url-as-ui/
-
-CSS Frameworks:
-
-- Open Props
-- Pico
-- Milligram
-- Spectre
-
-## Docs
-
-Welcome to Vowel! This project is under development.
-
-Vowel is a Really Simple Static Site Generator. Write Markdown files, and Vowel will generate a website for you. Eventually, you will also be able to write a `style.css` file to style your website. When complete, Vowel will generate:
-
-- An RSS feed
-- A sitemap
-- Rich link previews (internal and external)
-- Post lists
-- Navigation
-- Optimized images
-- Metadata
-- And more
-
-Each file in Vowel is a page. Index pages are called `home.md`.
+Turn a folder of Markdown files into a website by running one command:
 
 ```
-.
-├── home.md
-├── settings.md
-├── about.md
-└── posts/
-    ├── home.md
-    ├── red-car.md
-    ├── blue-true.md
-    └── green-van.md
+npx -y -p svelte@next -p vowel@latest npx vowel
 ```
 
-In the above project, `/home.md` is the website homepage. `about.md` is `/about`, `/posts/home.md` is the blog homepage, `/blog`, and `/posts/red-car.md` is a blog post, `/posts/red-car`.
+No installs. No config.
 
-Every folder must have an index page. That means that there are two ways to represent a page:
+Create a blog, a documentation site, a landing page, a wiki (whatever you want), using just Markdown and CSS.
 
-- `/example-page.md`
-- `/example-page/home.md`
-  Both of the above will generate the `/example-page` URL. You cannot have both files.
+No HTML.
 
-At the root of a project, a `settings.md` file defines global configurations, like your site title. It can have the following properties:
+No JavaScript.
 
-- `title`: Website title
-- `breadcrumb`: The root breadcrumb
+[Read the docs](https://vowel.cc/docs).
 
-Each folder can also have a `settings.md` file, with the following properties:
+For comments, questions, bugs, and contributions, please reach out to me on Twitter: [@samlfair](https://twitter.com/samlfair).
 
-- `breadcrumb`: The breadcrumb for the folder
+[npm-version-src]: https://img.shields.io/npm/v/vowel/latest.svg
+[npm-version-href]: https://npmjs.com/package/vowel
+[npm-downloads-src]: https://img.shields.io/npm/dm/vowel.svg
+[npm-downloads-href]: https://npmjs.com/package/vowel

package/package.json

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

package/server.js

@@ -46,21 +46,13 @@ async function buildProject() {
 	let projectData = null;
 
 	try {
-		console.log({ config });
 		if (existsSync(projectJsonPath)) {
-			console.log('inside');
 			const data = await readFile(projectJsonPath, 'utf-8');
-			console.log({ data });
 			projectData = JSON.parse(data);
 		}
 
-		console.log({ projectData });
-		console.log('Building...');
-
 		await build(config);
 
-		console.log('Build completed.');
-
 		if (projectData !== null) {
 			await mkdir(vercelDirPath, { recursive: true });
 			await writeFile(projectJsonPath, JSON.stringify(projectData, null, 2), 'utf-8');

package/src/lib/components/DefaultStyles.svelte

@@ -452,7 +452,7 @@
 		/* Sidebar */
 
 		.sidebar {
-			margin: auto;
+			margin-inline: auto;
 		}
 
 		/* Footer */

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

@@ -13,10 +13,6 @@
 
 	let { ast, level, website, format, identifier } = $derived(props);
 
-	if (identifier) {
-		console.log(identifier);
-	}
-
 	function getElement(node) {
 		if (node.type === 'heading') {
 			return ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'div'][node.depth - 1];
@@ -44,7 +40,6 @@
 		// Handle `footnoteDefinition` and `footnoteReference`
 
 		if (elements[node.type]) return elements[node.type];
-		console.log(node);
 	}
 
 	const noteTypes = {

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

@@ -3,6 +3,10 @@ import { access } from 'fs/promises';
 import { constants } from 'fs';
 import { normalize, join, basename } from 'path';
 import { dev } from '$app/environment';
+import mri from 'mri';
+
+const args = mri(process.argv);
+const isBuild = args._.includes('build');
 
 export const prerender = true;
 export const csr = dev;
@@ -24,7 +28,7 @@ async function checkFileExists(filePath, homeDir) {
 export async function load() {
 	// const startLoad = performance.now();
 	const now = Date.now();
-	const contentCacheDuration = 60000; // Cache for  1 minute
+	const contentCacheDuration = isBuild ? 60000 : 0; // Cache for  1 second
 	const initialURLCache = await loadCache($home[0]);
 
 	const cssExists = await checkFileExists(normalize('/assets/styles.css'), $home[0]);

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

@@ -6,7 +6,7 @@
 	import { error } from '@sveltejs/kit';
 	import { getFolder, getFolderLabel } from '../../lib/utilities';
 	import { page as pageStore } from '$app/stores';
-	import ConditionalWrapper from '../../lib/components/ConditionalWrapper.svelte';
+	import { goto, invalidate, invalidateAll } from '$app/navigation';
 
 	let { data } = $props();
 
@@ -56,16 +56,34 @@
 
 	const favicon = getFavicon();
 
+	let key = $state(Date.now());
+
 	$effect(() => {
 		// Update website on file change
 		if (import.meta.hot) {
 			import.meta.hot.on('vowel:update', ({ path, file }) => {
 				let updatedPage = getPage(website, path);
+				if (!updatedPage) {
+					invalidateAll().then(() => {
+						window.location.reload();
+					});
+				}
 
 				for (const key in file) {
+					if (!updatedPage[key]) updatedPage[key] = {};
 					updatedPage[key] = file[key];
 				}
 			});
+			import.meta.hot.on('vowel:refresh', () => {
+				console.log('Refresh');
+				invalidateAll().then(() => {
+					console.log(website);
+					// location.reload();
+					// goto(window.location.href);
+					// key = Date.now();
+					window.location.reload();
+				});
+			});
 		}
 	});
 </script>
@@ -106,7 +124,7 @@
 		{#if website._.slogan}
 			<p class="slogan">{website._.slogan}</p>
 		{/if}
-		<Nav folder={data.website} segments={data.path.split('/')} />
+		<Nav folder={website} segments={data.path.split('/')} />
 		<nav class="breadcrumbs" aria-label="Breadcrumb">
 			<Breadcrumbs level={0} />
 		</nav>
@@ -115,7 +133,7 @@
 		<Page level={0} {page} {website} path={data.path} />
 	</main>
 	<nav class="sidebar">
-		<Sitemap section={data.website} segments={data.path.split('/')} root />
+		<Sitemap section={website} segments={data.path.split('/')} root />
 	</nav>
 	<footer>
 		© {website._.author ? website._.author + ' ' : ''}

package/vite.config.js

@@ -23,7 +23,16 @@ export default defineConfig({
 			name: 'markdown:watch',
 			configureServer(server) {
 				server.watcher.add(homeDir);
+				server.watcher.on('add', () => {
+					console.log('Add');
+					server.ws.send('vowel:refresh');
+				});
+				server.watcher.on('unlink', () => {
+					console.log('unlink');
+					server.ws.send('vowel:refresh');
+				});
 				server.watcher.on('change', async (homePath, stats) => {
+					console.log('change');
 					if (homePath.endsWith('.md')) {
 						// Remove `.md`
 						const cache = await loadCache(homeDir);