vowel 0.2.4 → 0.3.0

package/README.md

@@ -5,42 +5,132 @@
 - Bundled with [Votive](https://github.com/samlfair/votive)
 - Served with [Voot](https://github.com/samlfair/voot)
 
+See the docs: [vowel.cc](https://vowel.cc).
+
 ## Roadmap
 
+### Launch checklist
+
+- [x] CLI
+- [ ] Docs
+- [x] Classes
+- [x] Route patterns
+- [x] Post list metadata
+- [.] Transaction management
+
+- [.] Fixes
+  - [x] Global nav sublinks
+  - [x] Hot reload
+  - [.] Explicit asset handling
+  - [.] Change "job" to "resources"
+    - [.] ReadResource types
+  - [.] Processor utilities param
+  - [.] Delete old SQLite logic
+  - [.] Make metadata explicit in SQLiteTarget type
+  - [x] Add SQLite begin/commit logic
+  - [.] Remove "loadDatabase"
+  - [.] Check all types
+- [.] File handling
+  - [x] CSS prefixing
+  - [x] Homepage in global nav
+  - [x] Metadata in header
+  - [x] Page list sort
+  - [.] Limit in sort
+- [x] Metafiles
+  - [x] Robots.txt
+  - [x] Sitemap.xml
+  - [x] RSS
+  - [x] 404.html (just make 404.md)
+- [ ] Markup
+  - [.] Image as figure
+  - [ ] Admonitions
+  - [x] Heading anchors
+  - [ ] GFM emoji
+  - [ ] Mermaid
+  - [x] Slogan
+  - [x] TOC
+- [ ] Non-urgent fixes / improvements
+  - [ ] Compare metadata on file update
+  - [ ] Prune/cleanup step
+  - [ ] Dependency type (file, settings, folder)
+- [ ] New systems
+  - [ ] Tags
+  - [ ] External links
+  - [ ] Syntax highlighting
+  - [ ] Social links
+
 ### High priority
 
-- [ ] robots.txt
-- [ ] sitemap.xml
+- [x] Global nav
+- [x] Breadcrumbs
+- [x] Page classes
+- [ ] GetMany "path exists" filter
+- [ ] GetMany "extension" filter
+- [ ] Delete settings logic
+- [ ] Update settings logic
+- [ ] Logical operators for filters
+- [ ] Customize menus
+- [ ] More file handling plugins
+  - [ ] Fonts
+    - [x] .woff
+    - [x] .woff2
+    - [x] .ttf
+    - [x] .otf
+    - [ ] Handling
+  - [ ] Images
+    - [x] .png
+    - [x] .jpg
+    - [x] .jpeg
+    - [x] .webp
+    - [x] .gif
+    - [ ] Formatting
+  - [ ] Icons
+    - [x] .ico
+  - [ ] Vectors
+    - [x] .svg
+  - [ ] Styles
+    - [x] .css
+    - [x] Bundling
+  - [ ] PDFs
+  - [ ] Videos
+  - [ ] Arbitrary data
+- [x] Add homepage to global nav
+- [x] Page lists
+- [x] Dates
+- [x] robots.txt
+- [x] sitemap.xml
 - [ ] 404.html
 - [ ] Better URL normalization (see notes)
-- [ ] TUI
-  - [ ] Create settings.md
-    - [ ] Site title
-    - [ ] Domain
+- [x] Name casing
+- [x] TUI
+  - [x] Create settings.md
+    - [x] Site title
+    - [x] Domain
     - [ ] Webmentions
-    - [ ] Logo
-    - [ ] Wordmark
+    - [x] Logo
+    - [x] Wordmark
     - [ ] Identity (rel=me)
-    - [ ] Filename breadcrumbs
-    - [ ] RSS
-    - [ ] Sitemap
-  - [ ] Create home.md
+    - [x] Filename breadcrumbs
+    - [x] RSS
+    - [x] Sitemap
+  - [x] Create home.md
   - [ ] Create folder settings files
     - [ ] Title
     - [ ] Breadcrumb
-- [ ] Custom CSS
+- [ ] Remove index file rules
+- [x] Custom CSS
+  - [x] styles.css
+  - [ ] Any CSS file
 - [ ] Tags
-- [ ] Customize index fallback
 - [ ] Date format settings
 - [ ] ::mark::
-- [ ] Infer images
+- [x] Infer images
 - [ ] Favicon
-- [ ] Webmentions
-- [ ] HTML boilerplate
-- [ ] Page lists
+- [-] Webmentions
+- [x] HTML boilerplate
 - [ ] View transitions
-- [ ] Logo
-- [ ] Wordmark
+- [x] Logo
+- [x] Wordmark
 - [ ] Sort nav items
 - [ ] Canonical URL
 - [ ] Handle external links
@@ -52,15 +142,16 @@
   - [ ] HTML
   - [ ] RSS
   - [ ] Sitemap
-- [ ] Heading anchors
+- [x] Heading anchors
 - [ ] Taxonomy pages and smart frontmatter
-- [ ] CSS cache busting
-- [ ] Slogan in homepage title
+- [x] CSS cache busting
+- [x] Slogan in homepage title
 - [ ] GFM emojis (:smile:)
 
 ### Medium priority
 
 - [ ] Tests
+- [ ] Internal backlinks
 - [ ] Break code into multiple files
 - [ ] Image optimization (unpic)
 - [ ] [SVG by mask](https://pqina.nl/blog/set-svg-background-image-fill-color/) and [CSS icons](https://antfu.me/posts/icons-in-pure-css)
@@ -71,7 +162,7 @@
 - [ ] Deploy
   - [ ] Cloudflare pages
   - [ ] GitHub pages
-- [ ] Post-publish work (ping webmentions)
+- [-] Post-publish work (ping webmentions)
 - [ ] [Desktop app](https://blackboard.sh/electrobun/docs/)
 - [ ] Mermaid
 - [ ] Codeblock syntax highlighting
@@ -84,8 +175,9 @@
   - [ ] Date
 - [ ] TOC
 - [ ] Versioning/publishing script
-- [ ] Verify all element types form Obsidian
+- [ ] Verify all element types from Obsidian
 - [ ] Order/position/kanban
+- [ ] Next/prev links
 - [ ] Banner
 - [ ] CTA
 - [ ] Menu toggle
@@ -126,7 +218,23 @@ rel=author? rel=bookmark? rel=external?
 
 Annotations (see notes)
 
-
 Interactivity (see notes)
 
 Calculated properties?
+
+
+OG tags to consider:
+
+```
+  
+  /*
+    og:type - The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.
+    og:locale - The locale these tags are marked up in. Of the format language_TERRITORY. Default is en_US.
+    article:published_time - datetime - When the article was first published.
+    article:modified_time - datetime - When the article was last changed.
+    article:expiration_time - datetime - When the article is out of date after.
+    article:author - profile array - Writers of the article.
+    article:section - string - A high-level section name. E.g. Technology
+    article:tag - string array - Tag words associated with this article.
+  */
+```

package/bin.js

@@ -1,5 +1,213 @@
 #!/usr/bin/env node
 
+import fs from "node:fs/promises"
+import { intro, note, text, select, confirm, spinner, outro, box } from "@clack/prompts"
+import { parse } from "@bomb.sh/args"
+import t from "@bomb.sh/tab"
+import votive from "votive"
+import { styleText } from "node:util"
+import { config } from "./config.js"
+
+/** @param {number} ms */
+function wait(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
 import init from "./index.js"
 
-await init()
+/** @param {boolean} verbose */
+async function removeCache(verbose) {
+  try {
+    await fs.rm("./.votive.db")
+    if (verbose) console.info(`${styleText("dim", "loading:")} ${styleText("green", "cache cleared")}`)
+  } catch (e) {
+    if (verbose) console.info(`${styleText("dim", "loading:")} ${styleText("green", "no database cache found")}`)
+  }
+}
+
+/** @param {boolean} verbose */
+async function removeDB(verbose) {
+  try {
+    await fs.rm("./output", { recursive: true, force: true })
+    if (verbose) console.info(`${styleText("dim", "loading:")} ${styleText("green", "output cleared")}`)
+  } catch (e) {
+    if (verbose) console.info(`${styleText("dim", "loading:")} ${styleText("green", "no output cache found")}`)
+  }
+}
+
+async function exists(filePath) {
+  try {
+    await fs.stat(filePath)
+    return true
+  } catch (e) {
+    return false
+  }
+}
+
+async function wizard() {
+
+  {
+    box(`Welcome!\n\nVowel is a static blog generator. It bundles markdown into HTML.`)
+
+    await select({
+      message: "Proceed",
+      options: [
+        {
+          value: true,
+          label: "OK"
+        }]
+    })
+
+    box(`Vowel infers most relevant information from common markdown conventions, so it requires very little configuration.
+
+The few configurations that Vowel uses live in a 'settings.md' file at the root of your project.`)
+
+
+
+
+    const proceed = await confirm({
+      message: "Generate settings file"
+    })
+
+    if (proceed) {
+      const frontmatter = [`---`]
+
+      box(`Change these configurations by editing 'settings.md'.`)
+
+      const websiteTitle = await text({
+        message: "Website title",
+        placeholder: "My Cool Website"
+      })
+
+      frontmatter.push(`title: ${websiteTitle}`)
+
+      const tagline = await text({
+        message: "Website tagline (leave empty to skip)",
+        placeholder: "All the news that's fit to blog"
+      })
+
+      if (tagline) {
+        frontmatter.push(`tagline: ${tagline}`)
+      }
+
+      box(`Vowel comes loaded with themes. You can override these themes by writing styles in a 'styles.css' file at the root of your project.`)
+
+      const theme = await select({
+        message: "Theme",
+        options: [
+          {
+            value: 'default',
+            label: 'Default',
+            hint: 'full blog styling'
+          },
+          {
+            value: 'typography',
+            label: 'Typography',
+            hint: 'sensible typographic presets'
+          },
+          {
+            value: 'reset',
+            label: 'Reset',
+            hint: 'standard CSS reset'
+          },
+          {
+            value: false,
+            label: 'None',
+            hint: 'write your own styles in `./styles.css`'
+          }
+        ]
+      })
+
+      if (theme) {
+        frontmatter.push(`theme: ${theme}`)
+      }
+
+      box(`To publish a sitemap and RSS feed, provide the domain that you plan to use.`)
+
+      const domain = await text({
+        message: "Domain",
+        placeholder: "thebomb.com"
+      })
+
+      if (domain) {
+        frontmatter.push(`domain: ${domain}`)
+      }
+
+      box(`To credit an author on your RSS feed, provide an author.`)
+
+      const author = await text({
+        message: "Author",
+        placeholder: "George Constanza"
+      })
+
+      if (author) {
+        frontmatter.push(`author: ${author}`)
+      }
+
+      box(`Markdown files are pages. Filenames are breadcrumbs. Folders are website sections. 'home.md' is your homepage.`)
+
+      const homepage = await confirm({
+        message: "Generate homepage"
+      })
+
+      const spin = spinner()
+
+      spin.start('Setting up')
+
+      frontmatter.push(`---`)
+
+      const settings = frontmatter.join(`\n`)
+
+      const settingsExists = await exists("settings.md")
+
+      if (!settingsExists) {
+        await fs.writeFile("settings.md", settings, "utf-8")
+      }
+
+      const homeExists = await exists("home.md")
+
+      if (!homeExists) {
+        await fs.writeFile("home.md", `# Home\n\nWelcome home!`, "utf-8")
+      }
+
+      spin.clear()
+
+      await select({
+        message: "Ready to go. Vowel will now launch your website.",
+        options: [
+          {
+            value: true,
+            label: "Let's go"
+          }
+        ]
+      })
+
+
+    }
+
+
+  }
+}
+
+
+async function main() {
+  const args = parse(process.argv.slice(2))
+
+  const dbExists = await exists(".votive.db")
+
+  await removeCache(args.logging === "verbose")
+  // await removeDB(args.logging === "verbose")
+  await fs.mkdir(config.destinationFolder, { recursive: true })
+
+  if (!args.skip && !dbExists) {
+    const loading = votive({ ...config, verbose: false })
+    await wizard()
+    await (loading)
+  }
+
+
+  init(args)
+}
+
+
+main()

package/config.js

@@ -0,0 +1,20 @@
+import vowelImagesPlugin from "./plugins/images/index.js"
+import vowelStylesPlugin from "./plugins/styles/index.js"
+import vowelMarkdownPlugin from "./plugins/markdown/index.js"
+import vowelRobotsPlugin from "./plugins/robots/index.js"
+import vowelXMLPlugin from "./plugins/xml/index.js"
+import vowelVectorPlugin from "./plugins/vectors/index.js"
+
+/** @import {VotiveConfig} from "votive" */
+export const config = {
+  sourceFolder: ".",
+  destinationFolder: "output",
+  plugins: [
+    vowelMarkdownPlugin,
+    vowelImagesPlugin,
+    vowelStylesPlugin,
+    vowelRobotsPlugin,
+    vowelXMLPlugin,
+    vowelVectorPlugin
+  ]
+}

package/docs-source/blog/url-ui.md

@@ -1,13 +1,9 @@
----
-link: https://www.nngroup.com/articles/url-as-ui/
-breadcrumb: URL Design
----
+# Long Live the URL
 
 June 27, 2024
 
 ![some things](./dog.jpeg)
 
-# Long Live the URL
 
 This article from 1999 about how to write good URLs is awesome. Some tips:
 

package/docs-source/blog.md

@@ -0,0 +1,5 @@
+# Blog
+
+Here's a blog.
+
+/blog/**

package/docs-source/docs/items.md

@@ -7,7 +7,7 @@ To create one, prefix a file or folder with a `$`, such as `$faqs`. The file or
 ```md
 Here are answers to common questions:
 
-/$faqs?count=10
+/faqs?count=10
 ```
 
 This also allows richer content, as the item will be displayed with frontmatter.

package/docs-source/home.md

@@ -35,7 +35,7 @@ Vowel is created by Sam Littlefair. If you have questions or comments, [reach ou
 
 # Features
 
-/$features?count=25
+/features/*
 
 # Try it
 

package/docs-source/output/about.html

@@ -0,0 +1 @@
+<!doctypehtml><html lang=en><meta charset=UTF-8><meta name=viewport content="width=device-width, initial-scale=1.0"><meta http-equiv=X-UA-Compatible content=ie-edge><title>About - Vowel</title><meta property=og:title content="About - Vowel"><meta property=og:description content="This is an about page."><meta property=og:url content=/about><link rel=stylesheet href=/default.css?47tfcu05><link rel=stylesheet href=/reset.css?bg1gg3lc><link rel=stylesheet href=/typography.css?z0u4qr1t><meta property=og:site_name><body class=about><header><a class=title href=/ rel=home>Vowel</a><p class=slogan>The easiest way to code a website<nav><a href=/about aria-current=page>About</a><a href=/blog>Blog</a><a href=/docs>Docs</a><a href=/features>Features</a><a href=/roadmap>Roadmap</a></nav></header><main><nav aria-label=Breadcrumbs><a href=/>Home</a><a href=/about aria-current=page>About</a></nav><h1>About</h1><p itemprop=description>This is an about page.<nav aria-label=Contents><ol class="toc-level toc-level-1"></ol></nav></main><aside><nav><ul><li><a href=index.html>Home</a><li><a href=/about.html>About</a><li><a href=/blog.html>Blog</a><ul><li><a href=/blog/url-ui.html>Long Live the URL</a></ul><li><a href=/docs.html>Docs</a><ul><li><a href=/docs/deploy.html>Deploy</a><li><a href=/docs/file-structure.html>Files</a><li><a href=/docs/folder-settings.html>Folders</a><li><a href=/docs/images.html>Images</a><li><a href=/docs/items.html>Items</a><li><a href=/docs/pages.html>Pages</a><li><a href=/docs/styling.html>Styling</a><li><a href=/docs/taxonomies.html>Taxonomies</a></ul><li><a href=/features.html>Features</a><ul><li><a href=/features/cards.html>Cards</a><li><a href=/features/editing.html>Live editing</a><li><a href=/features/emoji.html>Emoji favicons</a><li><a href=/features/frontmatter.html>Frontmatter</a><li><a href=/features/lists.html>Blog</a><li><a href=/features/navigation.html>Navigation</a><li><a href=/features/rich-previews.html>Rich link previews</a><li><a href=/features/robots.html>Robots</a><li><a href=/features/rss.html>RSS</a><li><a href=/features/sitemap.html>Sitemap</a><li><a href=/features/speed.html>Speed</a><li><a href=/features/static.html>Static generation</a><li><a href=/features/taxonomies.html>Taxonomies</a></ul><li><a href=/roadmap.html>Roadmap</a></ul></nav></aside><footer><section class=copyright>© 2026</section><section class=shoutout>Made with <a href=https://vowel.cc>Vowel</a></section></footer>

package/docs-source/output/blog/url-ui.html

@@ -0,0 +1,8 @@
+<!doctypehtml><html lang=en><meta charset=UTF-8><meta name=viewport content="width=device-width, initial-scale=1.0"><meta http-equiv=X-UA-Compatible content=ie-edge><title>Long Live the URL - Vowel</title><meta property=og:title content="Long Live the URL - Vowel"><meta property=og:description content="This article from 1999 about how to write good URLs is awesome. Some tips:"><meta property=og:url content=/blog/url-ui><link rel=stylesheet href=/default.css?c8247kf4><link rel=stylesheet href=/reset.css?8xnhn2cn><link rel=stylesheet href=/typography.css?i5lk5yqt><meta property=og:image content=./dog.jpeg><meta property=og:site_name><body class=blog_url-ui><header><a class=title href=/ rel=home>Vowel</a><p class=slogan>The easiest way to code a website<nav><a href=/about>About</a><a href=/blog>Blog</a><a href=/docs>Docs</a><a href=/features>Features</a><a href=/roadmap>Roadmap</a></nav></header><main><nav aria-label=Breadcrumbs><a href=/>Home</a><a href=/blog/>Blog</a><a href=/blog/url-ui aria-current=page>Long Live the URL</a></nav><h1>Long Live the URL</h1><time datetime=2024-06-27T03:00:00.000Z itemprop=date>June 27, 2024</time><img src=./dog.jpeg itemprop=image><p itemprop=description>This article from 1999 about how to write good URLs is awesome. Some tips:<nav aria-label=Contents><ol class="toc-level toc-level-1"></ol></nav><ul>
+<li>Write in lowercase
+<li>Check for typos
+<li>URLs should be permanent
+<li>Keep URLs short
+</ul>
+<p>But Nielsen's overall view is that URLs are an important part of user experience. They contribute to a website visitor's sense of trust and geography. One of Neilsen's rules dictates that a user should be able to "hack" of the last segment of a URL to get to the parent page.
+<p>Ironically, in 1999 Nielsen thought that URLs and search engines would soon fade into obscurity as better solutions to information management emerged. Lo, 25 years later the URL remains more important than ever. Sometimes the simple solutions is the best one.</main><aside><nav><ul><li><a href=index.html>Home</a><li><a href=/about.html>About</a><li><a href=/blog.html>Blog</a><ul><li><a href=/blog/url-ui.html>Long Live the URL</a></ul><li><a href=/docs.html>Docs</a><ul><li><a href=/docs/deploy.html>Deploy</a><li><a href=/docs/file-structure.html>Files</a><li><a href=/docs/folder-settings.html>Folders</a><li><a href=/docs/images.html>Images</a><li><a href=/docs/items.html>Items</a><li><a href=/docs/pages.html>Pages</a><li><a href=/docs/styling.html>Styling</a><li><a href=/docs/taxonomies.html>Taxonomies</a></ul><li><a href=/features.html>Features</a><ul><li><a href=/features/cards.html>Cards</a><li><a href=/features/editing.html>Live editing</a><li><a href=/features/emoji.html>Emoji favicons</a><li><a href=/features/frontmatter.html>Frontmatter</a><li><a href=/features/lists.html>Blog</a><li><a href=/features/navigation.html>Navigation</a><li><a href=/features/rich-previews.html>Rich link previews</a><li><a href=/features/robots.html>Robots</a><li><a href=/features/rss.html>RSS</a><li><a href=/features/sitemap.html>Sitemap</a><li><a href=/features/speed.html>Speed</a><li><a href=/features/static.html>Static generation</a><li><a href=/features/taxonomies.html>Taxonomies</a></ul><li><a href=/roadmap.html>Roadmap</a></ul></nav></aside><footer><section class=copyright>© 2026</section><section class=shoutout>Made with <a href=https://vowel.cc>Vowel</a></section></footer>

package/docs-source/output/blog.html

@@ -0,0 +1 @@
+<!doctypehtml><html lang=en><meta charset=UTF-8><meta name=viewport content="width=device-width, initial-scale=1.0"><meta http-equiv=X-UA-Compatible content=ie-edge><title>Blog - Vowel</title><meta property=og:title content="Blog - Vowel"><meta property=og:description content="Here&#39s a blog."><meta property=og:url content=/blog><link rel=stylesheet href=/default.css?gdz9k908><link rel=stylesheet href=/reset.css?p2z8rcu0><link rel=stylesheet href=/typography.css?7h47d6pa><meta property=og:site_name><body class=blog><header><a class=title href=/ rel=home>Vowel</a><p class=slogan>The easiest way to code a website<nav><a href=/about>About</a><a href=/blog aria-current=page>Blog</a><a href=/docs>Docs</a><a href=/features>Features</a><a href=/roadmap>Roadmap</a></nav></header><main><nav aria-label=Breadcrumbs><a href=/>Home</a><a href=/blog aria-current=page>Blog</a></nav><h1>Blog</h1><p itemprop=description>Here's a blog.<nav aria-label=Contents><ol class="toc-level toc-level-1"></ol></nav><section><article><a href=/blog/url-ui><h1>Long Live the URL</h1><time datetime=2024-06-27T03:00:00.000Z itemprop=date>June 27, 2024</time><img src=./dog.jpeg itemprop=image><p itemprop=description>This article from 1999 about how to write good URLs is awesome. Some tips:</p></a></article></section></main><aside><nav><ul><li><a href=index.html>Home</a><li><a href=/about.html>About</a><li><a href=/blog.html>Blog</a><ul><li><a href=/blog/url-ui.html>Long Live the URL</a></ul><li><a href=/docs.html>Docs</a><ul><li><a href=/docs/deploy.html>Deploy</a><li><a href=/docs/file-structure.html>Files</a><li><a href=/docs/folder-settings.html>Folders</a><li><a href=/docs/images.html>Images</a><li><a href=/docs/items.html>Items</a><li><a href=/docs/pages.html>Pages</a><li><a href=/docs/styling.html>Styling</a><li><a href=/docs/taxonomies.html>Taxonomies</a></ul><li><a href=/features.html>Features</a><ul><li><a href=/features/cards.html>Cards</a><li><a href=/features/editing.html>Live editing</a><li><a href=/features/emoji.html>Emoji favicons</a><li><a href=/features/frontmatter.html>Frontmatter</a><li><a href=/features/lists.html>Blog</a><li><a href=/features/navigation.html>Navigation</a><li><a href=/features/rich-previews.html>Rich link previews</a><li><a href=/features/robots.html>Robots</a><li><a href=/features/rss.html>RSS</a><li><a href=/features/sitemap.html>Sitemap</a><li><a href=/features/speed.html>Speed</a><li><a href=/features/static.html>Static generation</a><li><a href=/features/taxonomies.html>Taxonomies</a></ul><li><a href=/roadmap.html>Roadmap</a></ul></nav></aside><footer><section class=copyright>© 2026</section><section class=shoutout>Made with <a href=https://vowel.cc>Vowel</a></section></footer>

package/docs-source/output/default.css

@@ -0,0 +1 @@
+@layer reset,typography;@layer default{:root{--text-color:#212121;--accent-color:#004ab3;--accent-color-hover:#1e6ddc;--border-color:#bababa;--main-background:#fff;--code-background:#f2f2f2;--soft-background:#f2f2f2}@media (prefers-color-scheme:dark){:root{--text-color:#ccc;--accent-color:#1eb0dc;--accent-color-hover:#33c4f0;--border-color:#454545;--main-background:#1f1f1f;--code-background:#0d0d0d;--soft-background:#242424}}body{font-family:var(--font-sans);flex-flow:row-reverse wrap;align-content:start;justify-items:center;gap:4rem 1rem;max-width:min(100ch,100vi - 10vw);margin-inline:auto;display:flex;overflow-y:scroll;& header{flex-basis:100%}& main{flex:60ch}& aside{flex:100%}& footer{min-width:100%}}main,article{flex-flow:wrap;align-items:baseline;column-gap:.5rem;margin-bottom:auto;padding-bottom:4rem;display:flex}:is(main,article)>*{flex-basis:100%}:is(main,article) :is(time,dl:not(.link)){opacity:.8;font-size:.9em}dt{display:none}dd{display:inline}html{color:var(--text-color);background:var(--main-background)}a:where(:not([rel=home])){color:var(--accent-color);&:hover{color:var(--accent-color-hover)}}code,pre{background:var(--code-background)}blockquote{border-left:5px solid var(--border-color)}article{border:1px solid var(--border-color);background:var(--soft-background);border-radius:calc(1rem + 5px);flex-direction:column;padding:2rem;display:flex}th,td{border-bottom:1px solid var(--border-color-softer)}hr{border-top:1px solid var(--text-color)}main>img{margin-bottom:2.5rem}dt{font-size:1.1em}dl.link dt{display:none}dl.link{order:calc(Infinity);margin-top:2.5rem;margin-bottom:0}dl.tags,time{font-size:1.1em}dl.tags dt{display:none}dl.tags :is(dd,ul,li){padding-inline:0;display:inline}dl.tags li{margin-inline:.2em}dl.tags li:before{content:"#"}dl.contents ul{padding:0;list-style:none}dl.contents .depth-2{font-weight:500}dl.contents .depth-3{padding-left:.5em;font-size:.95em}nav[aria-label=Contents]:has(>ol:empty){display:none}nav[aria-label=Contents]{background:var(--soft-background);border:1px solid var(--border-color);border-radius:2px;flex-basis:30%;min-width:max-content;max-width:100%;margin-bottom:2.5em;padding:.8em 1.2em;&:before{content:"Contents";width:max-content;margin-bottom:.5em;font-weight:600;display:block}& ol{width:max-content;margin:0;padding:0;list-style:none;& ol{margin-left:1em}}}header{flex-flow:wrap;align-items:center;column-gap:1em;margin-top:4rem;display:flex;& p.slogan{align-self:flex-end;margin-bottom:.5em;margin-left:auto;font-size:1.5em}& nav{border:1px solid var(--border-color);width:100%;padding:0 6px;&:first-of-type{padding-top:7px}&:last-of-type{padding-bottom:7px}background:var(--soft-background);border-radius:5px;flex-wrap:wrap;justify-content:flex-start;column-gap:2rem;margin-inline:-3px;display:flex}& nav:has(+nav){border-bottom:none;border-bottom-right-radius:0;border-bottom-left-radius:0;&:after{content:"";border-bottom:1px solid var(--border-color);flex-basis:100%;margin-block:.7rem;display:block}}& nav+nav{border-top:none;border-top-left-radius:0;border-top-right-radius:0;margin-top:0}}nav[aria-label=Breadcrumbs]>a:only-child{display:none}nav[aria-label=Breadcrumbs]{text-transform:uppercase;color:var(--border-color);& a{color:unset}}aside nav{margin-inline:auto;&>ul{flex-direction:row;justify-content:center;gap:2em;display:flex}& ul{padding-left:0;list-style:none}& li{margin:0;line-height:1.7em}&>ul>li{&>a{font-weight:500}&>ul{font-size:.9em;line-height:1.2em;& ul{padding-left:1em}}}}footer{text-align:center}p:where([itemprop=description]){color:light-dark(oklch(from currentColor calc(l + .2) c h),oklch(from currentColor calc(l - .2) c h));font-size:1.3em}article a{flex-direction:column;row-gap:1em;display:flex;&>*{margin:0}}article img{order:-1}article a,article a:hover{color:unset}article h1{grid-area:title;font-size:1.6rem}article p{font-size:1.6rem}article dl.icon{grid-area:icon;font-size:1.5em}article dl.icon dd{text-align:right}article .description{grid-area:description}article dt{display:none}article dl.icon{order:-1}aside.alert.note{--icon:"ℹ️";--rgb:71, 139, 230}aside.alert.tip{--icon:"💡";--rgb:87, 171, 90}aside.alert.important{--icon:"💬";--rgb:152, 110, 226}aside.alert.warning{--icon:"⚠️";--rgb:198, 144, 38}aside.alert.caution{--icon:"⛔️";--rgb:229, 83, 75}aside.alert{border-left:3px solid rgb(var(--rgb));background:rgba(var(--rgb), .04);padding:1.5rem 2rem}aside.alert h2{color:rgb(var(--rgb))}aside.alert h2:before{opacity:.9;content:var(--icon);margin-right:.7rem;font-size:.8em}}img{border-radius:5px}

package/docs-source/output/docs/deploy.html

@@ -0,0 +1,34 @@
+<!doctypehtml><html lang=en><meta charset=UTF-8><meta name=viewport content="width=device-width, initial-scale=1.0"><meta http-equiv=X-UA-Compatible content=ie-edge><title>Deploy - Documentation - Vowel</title><meta property=og:title content="Deploy - Documentation - Vowel"><meta property=og:description content="Get going."><meta property=og:url content=/docs/deploy><link rel=stylesheet href=/default.css?bq97ngho><link rel=stylesheet href=/reset.css?fsu4xldi><link rel=stylesheet href=/typography.css?kj95bs00><meta property=og:site_name><body class=docs_deploy><header><a class=title href=/ rel=home>Vowel</a><p class=slogan>The easiest way to code a website<nav><a href=/about>About</a><a href=/blog>Blog</a><a href=/docs>Docs</a><a href=/features>Features</a><a href=/roadmap>Roadmap</a></nav><nav><a href=/docs/deploy aria-current=page>Deploy</a><a href=/docs/file-structure>Files</a><a href=/docs/folder-settings>Folders</a><a href=/docs/images>Images</a><a href=/docs/items>Items</a><a href=/docs/pages>Pages</a><a href=/docs/styling>Styling</a><a href=/docs/taxonomies>Taxonomies</a></nav></header><main><nav aria-label=Breadcrumbs><a href=/>Home</a><a href=/docs/>Docs</a><a href=/docs/deploy aria-current=page>Deploy</a></nav><h1>Deploy</h1><p itemprop=description>Get going.<nav aria-label=Contents><ol class="toc-level toc-level-1"><li class="toc-item toc-item-h1"><a class="toc-link toc-link-h1"href=#github>GitHub</a><ol class="toc-level toc-level-2"><li class="toc-item toc-item-h2"><a class="toc-link toc-link-h2"href=#npx>npx</a><li class="toc-item toc-item-h2"><a class="toc-link toc-link-h2"href=#npm>npm</a></ol></ol></nav><p><strong>Note on URLs:</strong> This guide includes instructions for Vercel, which specify a deploy option called <code>cleanUrls</code>. This will trim the <code>.html</code> extension from your deployment URLs. If you configure your own deploy, ensure you use clean URLs or your links will not work.
+
+<p>If you have a GitHub repository of Markdown files, you can deploy them on Vercel automatically on changes.
+<p>Add a <code>vercel.json</code> file to the root of your project with the following contents:
+<pre><code class=language-js>{
+  "cleanUrls": true,
+  "outputDirectory": ".output",
+  "buildCommand": "npx -p svelte@next -p vowel@latest npx vowel build"
+}
+</code></pre>
+<p>Then create a new Vercel project and connect your GitHub repository.
+<p>When you push changes to your repository, your Vercel project will automatically rebuild.
+<h2 id=npx>npx</h2>
+<p>You can manually build your project with <code>npx</code>. Run this command:
+<pre><code>npx -y -p svelte@next -p vowel@latest npx vowel build
+</code></pre>
+<p>The build command will create a <code>vercel.json</code> file at the root of your project with the necessary configuration for a Vercel deploy. Now deploy to Vercel:
+<pre><code>npx vercel --prod
+</code></pre>
+<p>(The <code>--prod</code> flag will deploy to production.)
+<p>If you don't want to use the Vercel CLI, you can deploy the <code>.output</code> directory to any server that supports static HTML.
+<h2 id=npm>npm</h2>
+<p>If you set up your project with npm, you can include a <code>build</code> command in your <code>package.json</code>:
+<pre><code class=language-diff>    "scripts": {
+      "dev": "vowel",
++     "build": "vowel build"
+    },
+</code></pre>
+<p>Run <code>npm run build</code> (<code>vowel build</code>) to build your website.
+<p>Now you can deploy to Vercel:
+<pre><code>npx vercel --prod
+</code></pre>
+<p>(The <code>--prod</code> flag will deploy to production.)
+<p>If you don't want to use the Vercel CLI, you can deploy the <code>.output</code> directory to any server that supports static HTML.</main><aside><nav><ul><li><a href=index.html>Home</a><li><a href=/about.html>About</a><li><a href=/blog.html>Blog</a><ul><li><a href=/blog/url-ui.html>Long Live the URL</a></ul><li><a href=/docs.html>Docs</a><ul><li><a href=/docs/deploy.html>Deploy</a><li><a href=/docs/file-structure.html>Files</a><li><a href=/docs/folder-settings.html>Folders</a><li><a href=/docs/images.html>Images</a><li><a href=/docs/items.html>Items</a><li><a href=/docs/pages.html>Pages</a><li><a href=/docs/styling.html>Styling</a><li><a href=/docs/taxonomies.html>Taxonomies</a></ul><li><a href=/features.html>Features</a><ul><li><a href=/features/cards.html>Cards</a><li><a href=/features/editing.html>Live editing</a><li><a href=/features/emoji.html>Emoji favicons</a><li><a href=/features/frontmatter.html>Frontmatter</a><li><a href=/features/lists.html>Blog</a><li><a href=/features/navigation.html>Navigation</a><li><a href=/features/rich-previews.html>Rich link previews</a><li><a href=/features/robots.html>Robots</a><li><a href=/features/rss.html>RSS</a><li><a href=/features/sitemap.html>Sitemap</a><li><a href=/features/speed.html>Speed</a><li><a href=/features/static.html>Static generation</a><li><a href=/features/taxonomies.html>Taxonomies</a></ul><li><a href=/roadmap.html>Roadmap</a></ul></nav></aside><footer><section class=copyright>© 2026</section><section class=shoutout>Made with <a href=https://vowel.cc>Vowel</a></section></footer>

package/docs-source/output/docs/file-structure.html

@@ -0,0 +1,24 @@
+<!doctypehtml><html lang=en><meta charset=UTF-8><meta name=viewport content="width=device-width, initial-scale=1.0"><meta http-equiv=X-UA-Compatible content=ie-edge><title>File structure - Documentation - Vowel</title><meta property=og:title content="File structure - Documentation - Vowel"><meta property=og:description content="Organize your files."><meta property=og:url content=/docs/file-structure><link rel=stylesheet href=/default.css?4ke3uiwc><link rel=stylesheet href=/reset.css?wdx8q8xm><link rel=stylesheet href=/typography.css?nfgslefd><meta property=og:site_name><body class=docs_file-structure><header><a class=title href=/ rel=home>Vowel</a><p class=slogan>The easiest way to code a website<nav><a href=/about>About</a><a href=/blog>Blog</a><a href=/docs>Docs</a><a href=/features>Features</a><a href=/roadmap>Roadmap</a></nav><nav><a href=/docs/deploy>Deploy</a><a href=/docs/file-structure aria-current=page>Files</a><a href=/docs/folder-settings>Folders</a><a href=/docs/images>Images</a><a href=/docs/items>Items</a><a href=/docs/pages>Pages</a><a href=/docs/styling>Styling</a><a href=/docs/taxonomies>Taxonomies</a></nav></header><main><nav aria-label=Breadcrumbs><a href=/>Home</a><a href=/docs/>Docs</a><a href=/docs/file-structure aria-current=page>Files</a></nav><h1>File structure</h1><p itemprop=description>Organize your files.<nav aria-label=Contents><ol class="toc-level toc-level-1"></ol></nav><p>Almost every file and folder represents a page on your website:
+<ul>
+<li><code>home.md</code> is your homepage, <code>/</code>
+<li><code>about.md</code> would be your about page, <code>/about</code>
+<li><code>blog/home.md</code> would be your blog homepage, <code>/blog</code>
+<li><code>blog/hello-world.md</code> would be a blog post, <code>/blog/hello-world</code>
+</ul>
+<p>(File names like <code>Hello World.md</code> also seem to work fine so far.))
+<p>Even if a folder doesn't have a <code>home.md</code> file, it will still generate a page, so long as it contains any markdown files. So, if you have a <code>blog</code> folder with posts inside it, Vowel will generate a <code>/blog</code> homepage even if you don't have a <code>/blog/home.md</code> file.
+<p>There are a few special files and folders:
+<ul>
+<li><code>assets/</code> contains some static files
+<ul>
+<li><code>assets/styles.css</code> contains your stylesheet, which will be automatically applied if present
+<li><code>assets/favicon.png</code> is your favicon
+</ul>
+
+<li><code>templates/</code> is a commonly-used directory in Obsidian projects, so it will be ignored
+<li>A <code>settings.md</code> file will not generate a page. If you want a page called <code>settings</code>, you can create a <code>/settings/home.md</code> file.
+<li><code>.cache.json</code>
+<li><code>.output/</code>
+<li><code>vercel.json</code>
+</ul>
+<p>Any files prefixed with a period will be ignored, as will any files that are not markdown.</main><aside><nav><ul><li><a href=index.html>Home</a><li><a href=/about.html>About</a><li><a href=/blog.html>Blog</a><ul><li><a href=/blog/url-ui.html>Long Live the URL</a></ul><li><a href=/docs.html>Docs</a><ul><li><a href=/docs/deploy.html>Deploy</a><li><a href=/docs/file-structure.html>Files</a><li><a href=/docs/folder-settings.html>Folders</a><li><a href=/docs/images.html>Images</a><li><a href=/docs/items.html>Items</a><li><a href=/docs/pages.html>Pages</a><li><a href=/docs/styling.html>Styling</a><li><a href=/docs/taxonomies.html>Taxonomies</a></ul><li><a href=/features.html>Features</a><ul><li><a href=/features/cards.html>Cards</a><li><a href=/features/editing.html>Live editing</a><li><a href=/features/emoji.html>Emoji favicons</a><li><a href=/features/frontmatter.html>Frontmatter</a><li><a href=/features/lists.html>Blog</a><li><a href=/features/navigation.html>Navigation</a><li><a href=/features/rich-previews.html>Rich link previews</a><li><a href=/features/robots.html>Robots</a><li><a href=/features/rss.html>RSS</a><li><a href=/features/sitemap.html>Sitemap</a><li><a href=/features/speed.html>Speed</a><li><a href=/features/static.html>Static generation</a><li><a href=/features/taxonomies.html>Taxonomies</a></ul><li><a href=/roadmap.html>Roadmap</a></ul></nav></aside><footer><section class=copyright>© 2026</section><section class=shoutout>Made with <a href=https://vowel.cc>Vowel</a></section></footer>

package/docs-source/output/docs/folder-settings.html

@@ -0,0 +1,20 @@
+<!doctypehtml><html lang=en><meta charset=UTF-8><meta name=viewport content="width=device-width, initial-scale=1.0"><meta http-equiv=X-UA-Compatible content=ie-edge><title>Folder settings - Documentation - Vowel</title><meta property=og:title content="Folder settings - Documentation - Vowel"><meta property=og:description content="Configure your project."><meta property=og:url content=/docs/folder-settings><link rel=stylesheet href=/default.css?y4rw9vtn><link rel=stylesheet href=/reset.css?6ev25jay><link rel=stylesheet href=/typography.css?lm3o88q7><meta property=og:site_name><body class=docs_folder-settings><header><a class=title href=/ rel=home>Vowel</a><p class=slogan>The easiest way to code a website<nav><a href=/about>About</a><a href=/blog>Blog</a><a href=/docs>Docs</a><a href=/features>Features</a><a href=/roadmap>Roadmap</a></nav><nav><a href=/docs/deploy>Deploy</a><a href=/docs/file-structure>Files</a><a href=/docs/folder-settings aria-current=page>Folders</a><a href=/docs/images>Images</a><a href=/docs/items>Items</a><a href=/docs/pages>Pages</a><a href=/docs/styling>Styling</a><a href=/docs/taxonomies>Taxonomies</a></nav></header><main><nav aria-label=Breadcrumbs><a href=/>Home</a><a href=/docs/>Docs</a><a href=/docs/folder-settings aria-current=page>Folders</a></nav><h1>Folder settings</h1><p itemprop=description>Configure your project.<nav aria-label=Contents><ol class="toc-level toc-level-1"></ol></nav><ul>
+<li><code>breadcrumb</code>: A navigation label
+</ul>
+<p>At the root of the project, there should be a global settings file with the <code>breadcrumb</code> property and any of the following properties:
+<ul>
+<li>All folder settings, plus
+<li><code>title</code>: Website title
+<li><code>robots</code>
+<ul>
+<li><code>google</code>: Allow Google Search indexing (<code>true</code>/<code>false</code>)
+<li><code>google_images</code>: Allow Google Image indexing (<code>true</code>/<code>false</code>)
+<li><code>ai</code>: Allow AI training (<code>true</code>/<code>false</code>)
+</ul>
+
+<li><code>domain</code>: Full root URL for the website domain (e.g. <code>https://example.com</code>)
+<li><code>author</code>: Website author credit for RSS and copyright
+<li><code>icon</code>: An emoji to use as the site favicon
+<li><code>slogan</code>: The website slogan
+<li><code>logo</code>: The website logo
+</ul></main><aside><nav><ul><li><a href=index.html>Home</a><li><a href=/about.html>About</a><li><a href=/blog.html>Blog</a><ul><li><a href=/blog/url-ui.html>Long Live the URL</a></ul><li><a href=/docs.html>Docs</a><ul><li><a href=/docs/deploy.html>Deploy</a><li><a href=/docs/file-structure.html>Files</a><li><a href=/docs/folder-settings.html>Folders</a><li><a href=/docs/images.html>Images</a><li><a href=/docs/items.html>Items</a><li><a href=/docs/pages.html>Pages</a><li><a href=/docs/styling.html>Styling</a><li><a href=/docs/taxonomies.html>Taxonomies</a></ul><li><a href=/features.html>Features</a><ul><li><a href=/features/cards.html>Cards</a><li><a href=/features/editing.html>Live editing</a><li><a href=/features/emoji.html>Emoji favicons</a><li><a href=/features/frontmatter.html>Frontmatter</a><li><a href=/features/lists.html>Blog</a><li><a href=/features/navigation.html>Navigation</a><li><a href=/features/rich-previews.html>Rich link previews</a><li><a href=/features/robots.html>Robots</a><li><a href=/features/rss.html>RSS</a><li><a href=/features/sitemap.html>Sitemap</a><li><a href=/features/speed.html>Speed</a><li><a href=/features/static.html>Static generation</a><li><a href=/features/taxonomies.html>Taxonomies</a></ul><li><a href=/roadmap.html>Roadmap</a></ul></nav></aside><footer><section class=copyright>© 2026</section><section class=shoutout>Made with <a href=https://vowel.cc>Vowel</a></section></footer>