vowel 0.7.1-beta.0 → 0.7.3

package/plugins/images/index.js

@@ -1,4 +1,5 @@
 import { hash as digest } from "node:crypto"
+import { readFileSync } from "node:fs"
 import path from "node:path"
 import sharp from 'sharp'
 import { createImagePath, imageSizes, imageExts } from "./../../utils.js"
@@ -37,6 +38,18 @@ function hex(channel) {
   return Math.round(channel).toString(16).padStart(2, "0")
 }
 
+/**
+ * A blurry stand-in for the image while it loads, inlined in the page:
+ * 16 px on its long side, low-quality WebP, a data URI of roughly
+ * 150-300 bytes. The browser smooths it as it scales up. Done here
+ * rather than with lqip-modern, which wraps these same sharp calls.
+ * @param {import("sharp").Sharp} image
+ */
+async function placeholderURI(image) {
+  const bytes = await image.clone().resize(16, 16, { fit: "inside" }).webp({ quality: 20 }).toBuffer()
+  return `data:image/webp;base64,${bytes.toString("base64")}`
+}
+
 /**
  * Runs deferred, with the bytes (buffer format), so this is where an
  * image is looked at. Dimensions go on <img width height> so the browser
@@ -51,26 +64,55 @@ function hex(channel) {
 async function readImagePath(source) {
   const buffer = source.buffer()
   const image = sharp(buffer)
-  const [{ width, height }, { dominant }] = await Promise.all([image.metadata(), image.stats()])
+  const [{ width, height, hasAlpha }, { dominant }] = await Promise.all([image.metadata(), image.stats()])
   const dominantColor = dominant ? `#${hex(dominant.r)}${hex(dominant.g)}${hex(dominant.b)}` : undefined
+  // Not behind an image with transparency: the page has no script to take
+  // it away once the image loads, so it would show through.
+  const placeholder = hasAlpha ? undefined : await placeholderURI(image)
   const hash = digest("sha1", buffer).slice(0, 8)
 
   const ext = path.extname(source.target)
-  const targets = imageSizes.flatMap(size => [...imageExts, ext].map(format => ({
+  const formats = [...imageExts, ext.replace(/^\./, "")]
+  const targets = formats.flatMap(format => imageSizes.map(size => ({
     path: createImagePath({ targetFilePath: source.target, size, ext: format, targetDirectory: "", uuid: hash }),
-    metadata: { derivative: { size, format: format.replace(/^\./, "") } }
+    metadata: { derivative: { size, format } }
   })))
+  const metadata = { hash, width, height, dominant: dominantColor, placeholder }
+
+  if (!isOptimized(source)) return { metadata, targets }
+
+  // Grouped by format in <picture> order (avif, webp, its own), each
+  // smallest first. This list is the one place a derivative's path is
+  // decided: plugins/html/image.js links what it names.
+  const derivatives = targets.map(({ path, metadata }) => ({ path, ...metadata.derivative }))
+  return { metadata: { ...metadata, derivatives }, targets, write: false }
+}
 
-  return { metadata: { hash, width, height, dominant: dominantColor }, targets }
+/**
+ * A png or jpeg is never published at full size: its derivatives are
+ * linked everywhere instead, and the original is a virtual target. The
+ * root favicon.png is exempt, because it is linked as it is, as the
+ * site's icon. The other formats are copied through as before; their
+ * derivatives are made but nothing links them yet.
+ * @param {{ path: string, target: string }} source
+ */
+function isOptimized(source) {
+  if (source.path === "favicon.png") return false
+  return /^\.(png|jpe?g)$/.test(path.extname(source.target))
 }
 
 /**
- * An original is copied through. A derivative is resized and converted
- * from its owner's bytes - which is what target.buffer() reads, because
- * votive stored the owner as the derivative's source.
+ * A derivative is resized and converted from its owner's bytes - which
+ * is what target.buffer() reads, because votive stored the owner as the
+ * derivative's source. An original with derivatives is virtual and
+ * writes nothing; any other original is copied through.
  * @type {Votive.ProcessorWrite}
  */
 async function writeImage(target) {
+  // The placeholder favicon has no file to read; its bytes are its data.
+  if (target.metadata?.favicon) return { data: Buffer.from(target.data, "base64") }
+  if (target.metadata?.derivatives) return
+
   const bytes = target.buffer()
   const recipe = target.metadata?.derivative
   if (!recipe) return { data: bytes }
@@ -89,10 +131,29 @@ const imagesProcessor = {
   writeFile: writeImage
 }
 
+/**
+ * Every site has Vowel's mark as a placeholder favicon,
+ * `favicon-placeholder.png`, published always and linked only when the
+ * site has no `icon` and no `favicon.png` of its own (the html plugin).
+ * A stub of its own source type (`.favicon`, which nothing else uses)
+ * read as base64 text, so it is read with the pages rather than with
+ * the images in the background. A write is matched on the target's
+ * extension, so writeImage writes it, from that text.
+ * @type {Votive.VotiveProcessor}
+ */
+const faviconProcessor = {
+  extensions: [".favicon"],
+  format: "text",
+  router: ({ name, dir }) => ({ name, dir, ext: ".png" }),
+  createStubs: () => [{ path: "favicon-placeholder.favicon" }],
+  expandStubs: () => ({ text: readFileSync(path.join(import.meta.dirname, "favicon.png")).toString("base64") }),
+  readFile: (source) => ({ data: source.text, metadata: { favicon: true } })
+}
+
 /** @type {Votive.VotivePlugin} */
 const vowelImagesPlugin = {
   name: "vowel-images",
-  processors: [imagesProcessor]
+  processors: [imagesProcessor, faviconProcessor]
 }
 
 export default vowelImagesPlugin

package/plugins/markdown/colorScheme.js

@@ -4,16 +4,70 @@ import { fallbackColors } from "./brandColors.js"
 /**
  * Ten shades per role, named `01` (darkest) to `10` (lightest) in
  * colorhorse's own darkest-first order. DefaultStyles.css reads them
- * that way round: `light-dark(var(--primary-10), var(--primary-01))`
+ * that way round: `light-dark(var(--color-primary-10), var(--color-primary-01))`
  * is the body background. tests/colorScheme.js pins the order.
  */
 const shadeCount = 10
 
+/**
+ * The `theme` keys that tune the scheme, each one colorhorse option, all
+ * numbers from 0 to 1. The defaults are vowel's, set before these were
+ * settings; `contrast` 0 is colorhorse's, evenly spread shades.
+ */
+const schemeSettings = [
+  { key: "darkest-shade", option: "minLightness", default: 0.3 },
+  { key: "lightest-shade", option: "maxLightness", default: 0.99 },
+  { key: "min-saturation", option: "minChroma", default: 0.2 },
+  { key: "contrast", option: "contrast", default: 0 }
+]
+
+const defaultOptions = Object.fromEntries(schemeSettings.map(setting => [setting.option, setting.default]))
+
 /** @param {number} index */
 function shadeName(index) {
   return String(index).padStart(2, "0")
 }
 
+/** @param {unknown} value */
+function isFraction(value) {
+  return typeof value === "number" && value >= 0 && value <= 1
+}
+
+/**
+ * The part of a theme the colors sheet is generated from, as stub
+ * params: the sheet re-expands when one of these changes, and only then.
+ * @param {Record<string, unknown>} theme - a resolved theme's config
+ */
+function colorParams(theme) {
+  const settings = schemeSettings.map(setting => [setting.key, theme[setting.key] ?? null])
+  return { colors: theme.colors ?? null, ...Object.fromEntries(settings) }
+}
+
+/**
+ * colorhorse's options from a theme's settings. A value that is not a
+ * number from 0 to 1 is reported and left at its default, rather than
+ * costing the site its colors: colorhorse throws for `contrast` alone,
+ * and turns the rest into ramps nobody asked for.
+ * @param {Record<string, unknown>} theme
+ * @param {(error: Error) => void} onError
+ */
+function schemeOptions(theme, onError) {
+  const entries = schemeSettings.map(setting => {
+    const value = theme[setting.key]
+    if (value === undefined || value === null) return [setting.option, setting.default]
+    if (isFraction(value)) return [setting.option, value]
+    onError(new Error(`ignoring theme.${setting.key} - expected a number from 0 to 1, got ${JSON.stringify(value)}`))
+    return [setting.option, setting.default]
+  })
+  const options = Object.fromEntries(entries)
+
+  // Reversed, colorhorse still answers, with a ramp whose "darkest"
+  // shade is the lighter one.
+  if (options.minLightness < options.maxLightness) return options
+  onError(new Error(`ignoring theme.darkest-shade and theme.lightest-shade - the darkest shade (${options.minLightness}) must be below the lightest (${options.maxLightness})`))
+  return { ...options, minLightness: defaultOptions.minLightness, maxLightness: defaultOptions.maxLightness }
+}
+
 /**
  * Builds the `:root` block for a theme's `colors` seed pair, falling
  * back to Vowel's brand colors when a site hasn't configured any.
@@ -23,20 +77,21 @@ function shadeName(index) {
  * messages are specific ("colorOne has a chroma of zero...") and are
  * left to surface as they are.
  * @param {unknown} colors - a theme setting's `colors`
+ * @param {object} [options] - colorhorse's, already checked (schemeOptions)
  * @returns {string}
  */
-function colorSchemeCSS(colors) {
-  if (colors === undefined || colors === null) return colorSchemeCSS(fallbackColors)
+function colorSchemeCSS(colors, options = defaultOptions) {
+  if (colors === undefined || colors === null) return colorSchemeCSS(fallbackColors, options)
 
   if (!Array.isArray(colors) || colors.length !== 2) {
     throw new Error(`theme.colors must be an array of two "#rrggbb" colors, got ${JSON.stringify(colors)}`)
   }
 
   const [colorOne, colorTwo] = colors
-  const scheme = getScheme(colorOne, colorTwo, { shadeCount, minLightness: 0.3, maxLightness: 0.99, minChroma: 0.2 })
+  const scheme = getScheme(colorOne, colorTwo, { ...options, shadeCount })
 
   const declarations = Object.entries(scheme).flatMap(([role, ramp]) => (
-    ramp.map((color, index) => `  --${role}-${shadeName(index + 1)}: ${color};`)
+    ramp.map((color, index) => `  --color-${role}-${shadeName(index + 1)}: ${color};`)
   ))
 
   return `:root {\n${declarations.join("\n")}\n}\n`
@@ -45,20 +100,21 @@ function colorSchemeCSS(colors) {
 /**
  * The build-facing entry point: always returns a usable `:root` block.
  * Invalid configuration is reported through `onError` and then falls
- * back to the brand colors, so a typo in settings.md leaves the site
- * styled instead of stripping every color variable out from under
- * DefaultStyles.css.
- * @param {unknown} colors
+ * back - unusable colors to the brand colors, a bad setting to its
+ * default - so a typo in settings.md leaves the site styled instead of
+ * stripping every color variable out from under DefaultStyles.css.
+ * @param {Record<string, unknown>} theme - colorParams' shape
  * @param {(error: Error) => void} onError
  * @returns {string}
  */
-function themeColorSchemeCSS(colors, onError) {
+function themeColorSchemeCSS(theme, onError) {
+  const options = schemeOptions(theme, onError)
   try {
-    return colorSchemeCSS(colors)
+    return colorSchemeCSS(theme.colors, options)
   } catch (error) {
-    onError(error)
-    return colorSchemeCSS(fallbackColors)
+    onError(new Error(`ignoring theme.colors - ${error.message}`))
+    return colorSchemeCSS(fallbackColors, options)
   }
 }
 
-export { colorSchemeCSS, themeColorSchemeCSS, fallbackColors }
+export { colorSchemeCSS, themeColorSchemeCSS, colorParams, fallbackColors }

package/plugins/markdown/frontmatter.js

@@ -33,13 +33,13 @@ import extractDate from "../../extractDate.js"
  */
 
 /**
- * @typedef {"string" | "date" | "path" | "boolean" | "number" | "strings" | "theme" | "links" | "publication" | "object" | "status"} Shape
+ * @typedef {"string" | "date" | "path" | "paths" | "boolean" | "number" | "strings" | "theme" | "links" | "publication" | "object" | "status"} Shape
  */
 
 /**
  * A page's visibility. `published` is the default. `hidden` writes the
  * page but lists it nowhere - no menu, listing, sitemap, feed or record.
- * `draft` skips the page entirely, as `published: false` does.
+ * `draft` skips the page entirely.
  * `deleted` skips it too, and tells `atproto-publish` to delete its
  * record.
  */
@@ -54,7 +54,7 @@ const EXPECTED = {
   title: "string",
   breadcrumb: "string",
   description: "string",
-  tagline: "string",
+  slogan: "string",
   name: "string",
   author: "string",
   domain: "string",
@@ -63,15 +63,16 @@ const EXPECTED = {
   logo: "path",
   wordmark: "path",
   icon: "path",
+  fallback_image: "path",
+  styles: "paths",
   tags: "strings",
   aliases: "strings",
-  published: "boolean",
   status: "status",
   html_file: "boolean",
   rss_item: "boolean",
   sitemap_item: "boolean",
-  global_menu_item: "boolean",
-  local_menu_item: "boolean",
+  global_nav_item: "boolean",
+  local_nav_item: "boolean",
   feed_limit: "number",
   theme: "theme",
   social_links: "links",
@@ -143,6 +144,12 @@ function coerceOne(shape, value, folder) {
     if (inner) return { value: resolvePath(inner, folder), problem: `expected a path, got ${Array.isArray(value) ? "a list" : "an object"}; using "${inner}"` }
     return { value: undefined, problem: `expected a path, got ${JSON.stringify(value)}` }
   }
+  if (shape === "paths") {
+    const values = Array.isArray(value) ? value : [value]
+    const kept = values.filter(item => typeof item === "string" && item.trim()).map(item => resolvePath(item, folder))
+    if (!kept.length) return { value: undefined, problem: `expected a path or a list of paths, got ${JSON.stringify(value)}` }
+    return kept.length === values.length ? { value: kept } : { value: kept, problem: "expected a list of paths; dropped what was not" }
+  }
   if (shape === "boolean") {
     if (typeof value === "boolean") return { value }
     const word = String(value).trim().toLowerCase()
@@ -191,9 +198,12 @@ function coerceOne(shape, value, folder) {
     return wrong.length ? { value: kept, problem: `${wrong.join(", ")}; dropped` } : { value: kept }
   }
   if (shape === "status") {
+    // One of vowel's four controls the page. Anything else is the
+    // author's own `status` - a digital garden's "evergreen" or
+    // "growing" - kept as written, the page published as usual.
     const word = typeof value === "string" ? value.trim().toLowerCase() : undefined
     if (STATUSES.includes(word)) return { value: word }
-    return { value: undefined, problem: `expected one of ${STATUSES.join(", ")}, got ${JSON.stringify(value)}` }
+    return { value }
   }
   if (shape === "object") {
     if (isPlainObject(value)) return { value }
@@ -266,4 +276,4 @@ function asContent(tree, node) {
   return undefined
 }
 
-export { EXPECTED, coerce, parseFrontmatter, resolvePath, toISODate }
+export { EXPECTED, STATUSES, coerce, parseFrontmatter, resolvePath, toISODate }

package/plugins/markdown/index.js

@@ -13,11 +13,11 @@ import { gfmTable } from 'micromark-extension-gfm-table'
 import { gfmTableFromMarkdown } from 'mdast-util-gfm-table'
 import { normalizeHeadingLevels } from './metadata.js'
 import { readFileSync } from "fs"
-import { createHashtagPage, toTitleCase, listPages } from "./../../utils.js"
-import { toHast } from 'mdast-util-to-hast'
+import { createHashtagPage, labelFromName, showPages } from "./../../utils.js"
+import { toHast, defaultHandlers } from 'mdast-util-to-hast'
 import { toString as hastToString } from 'hast-util-to-string'
-import getMetadata, { reservedProperties } from "./metadata.js"
-import { isSecretPath } from "./../../secretPaths.js"
+import getMetadata, { imageFromPage, reservedProperties } from "./metadata.js"
+import { isSecretPath, secretRouter, displayPath } from "./../../secretPaths.js"
 import { collectLinks } from "./links.js"
 import { readWalk } from "./readRules.js"
 import { h } from "hastscript"
@@ -63,15 +63,16 @@ function readFile(source, { api, config }) {
   if (!metadata.image) {
     const firstImageParagraph = mdast.children.find(child => child.children && child.children[0].type === "image")
     if (firstImageParagraph) {
-      metadata.first_image = firstImageParagraph.children[0].url
+      // A card shows it from another folder's page, so from the root.
+      const folder = path.dirname(targetPath ?? filePath).replace(/^\.$/, "")
+      metadata.first_image = imageFromPage(firstImageParagraph.children[0].url, folder)
     }
   }
 
 
-  // `status` (frontmatter.js). A draft - or `published: false`, its older
-  // spelling - is not a page at all.
+  // `status` (frontmatter.js). A draft is not a page at all.
   const status = metadata.fm_status ?? "published"
-  if (metadata.fm_published === false || status === "draft") return
+  if (status === "draft") return
 
   // A deleted page is not written, and carries nothing a listing, a tag
   // page, a backlink or a wikilink could find it by. It exists only so
@@ -96,11 +97,13 @@ function readFile(source, { api, config }) {
   // time, could not cover a folder, left a virtual target at the public
   // path, and had to be hidden from its own rendering.
   // `status: hidden` is the same promise made on purpose: written, never
-  // listed.
-  if (isSecretPath(filePath) || status === "hidden") {
+  // listed. So is the site's 404 page, generated or the author's own: it
+  // is served for a missing url, and no listing, sitemap, feed or
+  // AT Protocol record should name it.
+  if (isSecretPath(filePath) || status === "hidden" || filePath === "404.md") {
     metadata.hidden = true
-    metadata.local_menu_item ??= false
-    metadata.global_menu_item ??= false
+    metadata.local_nav_item ??= false
+    metadata.global_nav_item ??= false
     metadata.sitemap_item ??= false
     metadata.rss_item ??= false
   }
@@ -131,6 +134,13 @@ function readFile(source, { api, config }) {
 
 
   const hast = toHast(mdast, {
+    // A table in a <figure>: the figure scrolls sideways when the table
+    // is too wide, so the table itself can be a real table at full width
+    // (a table that scrolls has to be display: block, which sizes its
+    // columns to their content), and a caption has somewhere to go.
+    handlers: {
+      table: (state, node) => h("figure", [defaultHandlers.table(state, node)])
+    },
     // `state.all(node)` converts the children to hast; handing over
     // `node.children` gives the HTML compiler raw *mdast* instead. Plain
     // text survives that by coincidence - mdast and hast spell a text
@@ -209,7 +219,7 @@ function withDeclaredTypes(metadata) {
  * label inferred from its own filename - and its first paragraph became
  * the description. The site's name is `name:` (read as `fm_name`); a
  * `title:` here is an old spelling and is warned about, since a page
- * has a title and a site has a name. `tagline:` is warned about too: it
+ * has a title and a site has a name. `slogan:` is warned about too: it
  * is a page's, and the homepage's is the one a site shows on its front
  * door. `markdown` is the source, which the settings panel edits.
  * @param {Record<string, any>} metadata
@@ -220,8 +230,8 @@ function settingsContribution(metadata, filePath, log) {
   if (metadata.fm_title !== undefined && metadata.fm_name === undefined) {
     log?.("warn", `${filePath}: \`title:\` in a settings file does nothing - the site's name is \`name:\``)
   }
-  if (metadata.fm_tagline !== undefined) {
-    log?.("warn", `${filePath}: \`tagline:\` in a settings file does nothing - a tagline belongs to a page, e.g. home.md`)
+  if (metadata.fm_slogan !== undefined) {
+    log?.("warn", `${filePath}: \`slogan:\` in a settings file does nothing - a slogan belongs to a page, e.g. home.md`)
   }
   const declared = Object.entries(metadata)
     .filter(([key]) => key.startsWith("fm_") || reservedProperties.includes(key))
@@ -293,10 +303,12 @@ function createStubs({ api }) {
   ]
   const taken = new Set(named.map(stub => stub.path))
 
-  // A section index per folder with a listed page (see folderIndexes) -
-  // except where a stub above already is that page: `tags.md` is the
-  // tags folder's index.
-  return [...named, ...folderIndexes(api).filter(stub => !taken.has(stub.path))]
+  // A section index per folder with a listed page (see folderIndexes),
+  // and per secret folder with a page (secretFolderIndexes) - except
+  // where a stub above already is that page: `tags.md` is the tags
+  // folder's index.
+  const indexes = [...folderIndexes(api), ...secretFolderIndexes(api)]
+  return [...named, ...indexes.filter(stub => !taken.has(stub.path))]
 }
 
 /**
@@ -307,10 +319,13 @@ function createStubs({ api }) {
  * find it with no change.
  *
  * Derived from the targets, since there is no api.folders(): a folder
- * counts when a page *listPages would show* lives in it or below it.
- * An empty folder, an asset-only folder and a secret folder (every page
- * hidden) get no index, and a folder whose last page goes loses its
- * index on that pass - the stub is simply no longer declared.
+ * counts when a page *a listing would show* lives in it or below it -
+ * a page without a file (`html_file: false`) too, since the index is
+ * where its card is.
+ * An empty folder and an asset-only folder get no index, and a folder
+ * whose last page goes loses its index on that pass - the stub is simply
+ * no longer declared. A secret folder's pages are all hidden, so none
+ * counts here; secretFolderIndexes gives those folders theirs.
  *
  * An author's own `blog.md` beside `blog/` shadows the stub by path,
  * votive's ordinary rule; the stub stands down when `<folder>.html`
@@ -322,7 +337,7 @@ function createStubs({ api }) {
  * @param {any} api - the enumerator's untracked api
  */
 function folderIndexes(api) {
-  const pages = listPages(api, { folder: "", recursive: true })
+  const pages = showPages(api, { folder: "", recursive: true })
     .filter(page => page.source && page.dir)
 
   const folders = new Set()
@@ -341,6 +356,50 @@ function folderIndexes(api) {
   })
 }
 
+/**
+ * One index per secret folder (`members##salt/`) with a written page,
+ * and per folder below one. Per Sam: a secret folder should get its
+ * index like any other, and without one its breadcrumb had nothing to
+ * link to.
+ *
+ * Built in *source* terms, because a secret folder's published name is
+ * a hash. The stub is `members##salt.md`, which routing hashes to
+ * `<hash>.html` beside the folder's `<hash>/`, the way `blog.md` sits
+ * beside `blog/` - so the breadcrumb's `<folder>.html` lookup finds it.
+ * Its listing is a relative glob, the only kind that sees secret pages,
+ * and its title is the folder's name without the salt (expandStubs). As
+ * a page under a secret segment it is hidden itself.
+ *
+ * Folders *above* the secret segment get nothing from a secret page:
+ * their index would list none of it. A `status: hidden` page doesn't
+ * count. An author's own `members##salt.md` shadows the stub by path.
+ * @param {any} api - the enumerator's untracked api
+ */
+function secretFolderIndexes(api) {
+  const pages = api.targets({ folder: "", recursive: true, query: { hidden: true } })
+    .filter(page => page.write !== false
+      && page.extension === ".html"
+      && typeof page.source === "string"
+      && isSecretPath(page.source)
+      && page.metadata.fm_status !== "hidden")
+
+  const folders = new Set(pages.flatMap(page => {
+    const segments = page.source.split(path.sep).slice(0, -1)
+    const first = segments.findIndex(segment => isSecretPath(segment))
+    if (first === -1) return []
+    return segments.slice(first).map((_, offset) => segments.slice(0, first + offset + 1).join(path.sep))
+  }))
+
+  return [...folders].sort().flatMap(folder => {
+    const stubPath = `${folder}.md`
+    // vowel's router (config.js): secret segments hashed, then lowercased.
+    const routed = secretRouter(stubPath).toLowerCase().replace(/\.md$/, ".html")
+    const indexTarget = api.target(routed.split("/").join(path.sep))
+    const ours = !indexTarget || indexTarget.source === stubPath
+    return ours ? [{ path: stubPath, params: { folder, secret: true } }] : []
+  })
+}
+
 /**
  * Produces a declared stub's markdown, on demand.
  *
@@ -371,13 +430,23 @@ function expandStubs({ path: sourcePath, params }) {
     return { text: createHashtagPage(params.tag) }
   }
 
+  if (params?.secret) {
+    // A secret folder's index: titled by its name without the salt, and
+    // listed by a relative glob, resolved against this stub's own source
+    // path - the folder beside it - which is how a listing sees the
+    // secret pages a published-path glob never does.
+    const name = displayPath(params.folder).split(path.sep).at(-1)
+    const own = params.folder.split(path.sep).at(-1)
+    return { text: `# ${labelFromName(name)}\n\n./${own}/*` }
+  }
+
   if (params?.folder !== undefined) {
     // The folder's name as its title, and a listing of the folder - not
     // recursive: a nested section has an index of its own, and that
     // index is what appears here.
     const name = params.folder.split(path.sep).at(-1)
     const url = "/" + params.folder.split(path.sep).join("/")
-    return { text: `# ${toTitleCase(name)}\n\n${url}/*` }
+    return { text: `# ${labelFromName(name)}\n\n${url}/*` }
   }
 
   return null