vowel 0.6.4 → 0.7.0-beta.0

package/plugins/html/editor/nodes/ThematicBreak.svelte

@@ -0,0 +1,9 @@
+<script>
+  import { Node } from "svedit"
+
+  let { path } = $props()
+</script>
+
+<Node {path}>
+  <hr contenteditable="false" />
+</Node>

package/plugins/html/editor/nodes/index.js

@@ -0,0 +1,18 @@
+export { default as Page } from "./Page.svelte"
+export { default as Paragraph } from "./Paragraph.svelte"
+export { default as Heading } from "./Heading.svelte"
+export { default as List } from "./List.svelte"
+export { default as ListItem } from "./ListItem.svelte"
+export { default as Blockquote } from "./Blockquote.svelte"
+export { default as Alert } from "./Alert.svelte"
+export { default as CodeBlock } from "./CodeBlock.svelte"
+export { default as ThematicBreak } from "./ThematicBreak.svelte"
+export { default as Image } from "./Image.svelte"
+export { default as Embed } from "./Embed.svelte"
+
+export { default as Strong } from "./Strong.svelte"
+export { default as Emphasis } from "./Emphasis.svelte"
+export { default as InlineCode } from "./InlineCode.svelte"
+export { default as Highlight } from "./Highlight.svelte"
+export { default as Strikethrough } from "./Strikethrough.svelte"
+export { default as Link } from "./Link.svelte"

package/plugins/html/editor/rollup.config.js

@@ -0,0 +1,35 @@
+import svelte from "rollup-plugin-svelte"
+import resolve from "@rollup/plugin-node-resolve"
+import css from "rollup-plugin-import-css"
+import cleanup from "rollup-plugin-cleanup"
+
+// Compiles the Svedit editor into a single inlineable bundle,
+// committed at ../bundle/index.js -
+// vowel/plugins/html/index.js reads that file's contents once at plugin
+// load time and injects it into every previewed page's
+// handlePreviewRequest, the same way it already inlines votive's
+// openSocket() reload client. Rebuild with `npm run build:editor` from
+// vowel's root after editing anything in this folder.
+export default {
+  input: "main.js",
+  output: {
+    file: "../bundle/index.js",
+    format: "iife"
+  },
+  plugins: [
+    // emitCss: false - inline styles into the JS output instead of
+    // emitting a separate CSS asset, since this bundle gets injected as
+    // one self-contained inline <script>, not linked as a file.
+    svelte({ emitCss: false }),
+    resolve({
+      browser: true,
+      exportConditions: ["svelte"],
+      // The default extensions must be listed alongside .svelte: passing
+      // only .svelte overrides them, and bare package imports (e.g.
+      // mdast-util-to-markdown) then silently resolve to nothing.
+      extensions: [".svelte", ".mjs", ".js", ".json", ".node"]
+    }),
+    css(),
+    cleanup()
+  ]
+}

package/plugins/html/editor/serialize.js

@@ -0,0 +1,157 @@
+// Svedit document -> markdown.
+//
+// The document was built from HTML (see ingest.js), so this is the only
+// place markdown is produced. mdast-util-to-markdown does the escaping,
+// which is the reason not to hand-roll it: a paragraph containing a
+// literal "*" has to come back out as "\*".
+
+import { toMarkdown } from "mdast-util-to-markdown"
+import { stringify as stringifyYAML } from "yaml"
+import { gfmStrikethroughToMarkdown } from "mdast-util-gfm-strikethrough"
+import { highlightMarkToMarkdown } from "mdast-util-highlight-mark"
+
+const MARK_BUILDERS = {
+  strong: (children) => ({ type: "strong", children }),
+  emphasis: (children) => ({ type: "emphasis", children }),
+  highlight: (children) => ({ type: "highlight", children }),
+  strikethrough: (children) => ({ type: "delete", children }),
+  link: (children, node) => ({ type: "link", url: node.href || "", children }),
+  inline_code: (children) => ({ type: "inlineCode", value: plainText(children) })
+}
+
+/** @param {object[]} children */
+function plainText(children) {
+  return children.map(child => child.value ?? plainText(child.children || [])).join("")
+}
+
+/**
+ * Offset ranges back to nested inline mdast. Marks are mutually exclusive
+ * and non-overlapping, so a single ordered pass over the string is enough.
+ *
+ * @param {{content: string, marks: object[]}} value
+ * @param {Record<string, object>} nodes
+ */
+function inlineFrom(value, nodes) {
+  const content = value.content || ""
+  const marks = [...(value.marks || [])].sort((left, right) => {
+    return left.start_offset - right.start_offset
+  })
+
+  const { children, cursor } = marks.reduce((accumulated, mark) => {
+    const markNode = nodes[mark.node_id]
+    const builder = markNode && MARK_BUILDERS[markNode.type]
+    if (!builder) return accumulated
+
+    const before = content.slice(accumulated.cursor, mark.start_offset)
+    const inner = content.slice(mark.start_offset, mark.end_offset)
+    const leading = before ? [{ type: "text", value: before }] : []
+
+    return {
+      cursor: mark.end_offset,
+      children: [
+        ...accumulated.children,
+        ...leading,
+        builder([{ type: "text", value: inner }], markNode)
+      ]
+    }
+  }, { children: [], cursor: 0 })
+
+  const trailing = content.slice(cursor)
+  return trailing ? [...children, { type: "text", value: trailing }] : children
+}
+
+/**
+ * @param {string} id
+ * @param {Record<string, object>} nodes
+ */
+function blockFrom(id, nodes) {
+  const node = nodes[id]
+  if (!node) return null
+
+  if (node.type === "paragraph") {
+    return { type: "paragraph", children: inlineFrom(node.content, nodes) }
+  }
+
+  if (node.type === "heading") {
+    return { type: "heading", depth: node.level || 2, children: inlineFrom(node.content, nodes) }
+  }
+
+  if (node.type === "list") {
+    const children = node.items.nodes.map(itemId => ({
+      type: "listItem",
+      spread: false,
+      children: [{ type: "paragraph", children: inlineFrom(nodes[itemId].content, nodes) }]
+    }))
+    return { type: "list", ordered: Boolean(node.ordered), spread: false, children }
+  }
+
+  if (node.type === "blockquote") {
+    return { type: "blockquote", children: node.body.nodes.map(child => blockFrom(child, nodes)) }
+  }
+
+  if (node.type === "alert") {
+    // The marker line the html plugin consumed is regenerated here. It is
+    // emitted raw rather than as text: escaping would make it "\[!NOTE]",
+    // which survives vowel's own parser but is not the literal GFM syntax.
+    const marker = {
+      type: "html",
+      value: `[!${(node.variant || "note").toUpperCase()}]`
+    }
+    const body = node.body.nodes.map(child => blockFrom(child, nodes))
+    return { type: "blockquote", children: [marker, ...body] }
+  }
+
+  if (node.type === "code_block") {
+    return { type: "code", lang: node.language || null, value: node.code || "" }
+  }
+
+  if (node.type === "thematic_break") {
+    return { type: "thematicBreak" }
+  }
+
+  if (node.type === "image") {
+    const image = { type: "image", url: node.source, alt: node.alt || "" }
+    const caption = node.caption ? [{ type: "text", value: ` ${node.caption}` }] : []
+    return { type: "paragraph", children: [image, ...caption] }
+  }
+
+  if (node.type === "embed") {
+    // The directive was reconstructed from the expansion's own class
+    // attributes at ingest; emitted verbatim so it never expands twice.
+    return { type: "html", value: node.directive }
+  }
+
+  return null
+}
+
+/**
+ * @param {{document_id: string, nodes: Record<string, object>}} doc
+ * @param {{title: string|null, properties: object}} [frontmatter]
+ * @returns {string}
+ */
+export default function serialize(doc, frontmatter = { title: null, properties: {} }) {
+  const page = doc.nodes[doc.document_id]
+  const children = page.body.nodes
+    .map(id => blockFrom(id, doc.nodes))
+    .filter(Boolean)
+
+  const body = toMarkdown({ type: "root", children }, {
+    extensions: [gfmStrikethroughToMarkdown(), highlightMarkToMarkdown],
+    bullet: "-",
+    emphasis: "_",
+    strong: "*",
+    fences: true,
+    rule: "-"
+  })
+
+  // The title is written as a heading rather than a frontmatter key, so a
+  // page whose title only ever lived in frontmatter gains one here.
+  const heading = frontmatter.title ? `# ${frontmatter.title}\n\n` : ""
+
+  const properties = frontmatter.properties || {}
+  const yaml = Object.keys(properties).length
+    ? `---\n${stringifyYAML(properties)}---\n\n`
+    : ""
+
+  return yaml + heading + body
+}

package/plugins/html/editor/settings-file.js

@@ -0,0 +1,83 @@
+// Reading and writing the project's settings.md from the browser.
+//
+// The preview hands the root settings.md over with the page (source.js),
+// and votive's POST endpoint writes it back. No endpoint to read it, and
+// no settings.md target on the site - the panel edits the same file a
+// person would open in an editor.
+
+import { parse, stringify } from "yaml"
+import { getSource, updateSettings } from "./source.js"
+
+const FRONTMATTER = /^---\r?\n([\s\S]*?)\r?\n---(?:\r?\n)?/
+
+/**
+ * Splits a markdown file into its frontmatter mapping and everything
+ * after it. The body is kept as raw text and never parsed: only the
+ * frontmatter is rewritten on save, so prose survives a round trip
+ * byte for byte.
+ * @param {string} text
+ */
+export function splitFrontmatter(text) {
+  const match = text.match(FRONTMATTER)
+  if (!match) return { data: {}, body: text, had: false }
+
+  const data = parse(match[1]) || {}
+  return { data, body: text.slice(match[0].length), had: true }
+}
+
+/**
+ * The inverse. YAML comments and key order inside the frontmatter are
+ * lost here - the same trade the markdown round trip already makes, and
+ * the reason the body is spliced back rather than re-emitted.
+ * @param {object} data
+ * @param {string} body
+ */
+export function joinFrontmatter(data, body) {
+  return `---\n${stringify(data)}---\n${body.replace(/^\r?\n/, "")}`
+}
+
+/**
+ * The theme mapping, always as an object. `theme: default` is the short
+ * form of `{name: default}`, and a panel that is about to write a font
+ * into it needs the long one.
+ * @param {unknown} theme
+ */
+export function themeObject(theme) {
+  if (theme && typeof theme === "object" && !Array.isArray(theme)) return { ...theme }
+  if (typeof theme === "string") return { name: theme }
+  return {}
+}
+
+/**
+ * The root settings.md, as the preview handed it over (see source.js).
+ * A project with none yet reads as an empty file, so the panel can
+ * create it on first save.
+ */
+export async function readSettings() {
+  const { settings } = getSource()
+  return splitFrontmatter(settings.markdown ?? "")
+}
+
+/**
+ * Writes the file back through votive's write endpoint, which resolves the
+ * path under sourceFolder and refuses anything outside it. The rebuild
+ * needs no trigger: the same watcher that sees a hand edit sees this one.
+ * @param {string} filePath
+ * @param {string} data
+ */
+export async function writeSettings(filePath, data) {
+  const response = await fetch("/", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ type: "file", filePath, data })
+  })
+
+  if (!response.ok) {
+    const detail = await response.json().catch(() => ({}))
+    throw new Error(detail.error || `write failed (${response.status})`)
+  }
+
+  // What was written is the newest copy until the rebuild pushes one.
+  updateSettings(data)
+  return response.json()
+}

package/plugins/html/editor/socket.js

@@ -0,0 +1,202 @@
+import { updateFromTarget } from "./source.js"
+/**
+ * Live reload without the reload. Every "a target changed" message is
+ * the target itself (see TargetOutput in votive/lib/createDatabase.js),
+ * with `data` holding the file as written. For the page being viewed
+ * that is a whole HTML document, and this patches the live DOM to match
+ * it rather than calling location.reload().
+ *
+ * It used to compare the pushed <head> with the live one and reload on
+ * any difference. Three things made that a reload on nearly every edit:
+ * <title>, og:title and og:description are derived from the content, so
+ * editing the content changed the head; a settings row that flipped
+ * every build changed it too (fixed at the source); and a stylesheet
+ * cache-buster that hashed mutable data flipped every pass (also fixed).
+ * None of those needed a reload - they needed the head patched, which
+ * this does.
+ *
+ * The body is morphed, not replaced. `body.replaceWith(newBody)` also
+ * threw away everything the client had put there: the injected editor
+ * script, the Edit button, the settings panel, and the editor itself if
+ * it was mounted - so a save from the settings panel destroyed the
+ * panel, and one patch removed the Edit button. Only the elements the
+ * build produced are touched; anything else in the body is left alone.
+ * While the editor is mounted (`data-vowel-editing` on <html>), <main>
+ * is left alone too: the editor's own content is the newer of the two.
+ */
+export default function openSocket() {
+  console.info("Socket opened")
+  const socket = new WebSocket(`ws://${window.location.host}`);
+  socket.addEventListener('open', () => {
+    socket.send('opened')
+  });
+
+
+  socket.addEventListener("close", () => {
+    console.info("Socket closed")
+    socket.close()
+    setTimeout(() => {
+      console.info("socket closed refresh")
+      location.reload()
+
+    }, 1000)
+  })
+
+  function isOpen() {
+    return socket.readyState === 1
+  }
+
+  socket.addEventListener('message', e => {
+    if (!isOpen()) return
+
+    const target = JSON.parse(e.data)
+
+    // Nothing here knows what a non-html target should do on change yet -
+    // that's each content type's own concern to add, same as html's own
+    // patch logic below isn't generic.
+    if (target.extension !== ".html") return
+
+    const regex = new RegExp(window.location.pathname + "(index)?(\\.html)")
+    if (!("/" + target.path).match(regex)) return
+
+    // The page's source travels with the target; the editor saves from it.
+    updateFromTarget(target)
+
+    // No data at all (too large for the socket, or already gone) is the
+    // one case a reload is still the honest answer.
+    if (!target.data) {
+      location.reload()
+      return
+    }
+
+    const next = new DOMParser().parseFromString(target.data, "text/html")
+    patchHead(document.head, next.head)
+    patchBody(document.body, next.body)
+  });
+}
+
+/**
+ * Elements are matched by their serialized form: one that exists in
+ * both heads is kept where it is (a <link> that is neither moved nor
+ * re-created is never refetched, so the page doesn't flash), one only
+ * in the new head is inserted before the next element that survives,
+ * one only in the old head is removed. <title> is special-cased because
+ * its text is what changes most.
+ * @param {HTMLHeadElement} head
+ * @param {HTMLHeadElement} nextHead
+ */
+function patchHead(head, nextHead) {
+  const nextTitle = nextHead.querySelector("title")
+  if (nextTitle && document.title !== nextTitle.textContent) document.title = nextTitle.textContent
+
+  const isTitle = element => element.tagName === "TITLE"
+  const remaining = new Map()
+  for (const element of head.children) {
+    if (isTitle(element)) continue
+    const key = element.outerHTML
+    if (!remaining.has(key)) remaining.set(key, [])
+    remaining.get(key).push(element)
+  }
+
+  const keep = new Set()
+  const pending = []
+  const place = (clone, before) => {
+    before ? head.insertBefore(clone, before) : head.appendChild(clone)
+    keep.add(clone)
+  }
+  for (const element of nextHead.children) {
+    if (isTitle(element)) continue
+    const matches = remaining.get(element.outerHTML)
+    const existing = matches && matches.shift()
+    if (existing) {
+      // Everything queued since the last survivor goes in front of it,
+      // in order.
+      pending.forEach(clone => place(clone, existing))
+      pending.length = 0
+      keep.add(existing)
+      continue
+    }
+    pending.push(document.importNode(element, true))
+  }
+  pending.forEach(clone => place(clone, null))
+
+  for (const element of [...head.children]) {
+    if (isTitle(element) || keep.has(element)) continue
+    element.remove()
+  }
+}
+
+/**
+ * The build's top-level body elements are matched by tag and id (a
+ * page has one <header>, one <main>, one <aside>, one <footer>, and
+ * the html plugin gives anything else an id). Each is replaced with its
+ * new version, a new one is inserted where the build put it, an old one
+ * the build no longer produces is removed. Nothing the client added is
+ * touched.
+ * @param {HTMLElement} body
+ * @param {HTMLElement} nextBody
+ */
+function patchBody(body, nextBody) {
+  const editing = document.documentElement.dataset.vowelEditing === "true"
+  const keyOf = element => element.id ? `${element.tagName}#${element.id}` : element.tagName
+  // Only the build's own elements take part, on both sides: a <script>
+  // in the pushed file would not run if inserted, and never matches
+  // the client's.
+  const incoming = [...nextBody.children].filter(wasProduced)
+  const produced = new Set(incoming.map(keyOf))
+
+  const current = new Map()
+  for (const element of body.children) {
+    if (!wasProduced(element)) continue
+    const key = keyOf(element)
+    if (produced.has(key) && !current.has(key)) current.set(key, element)
+  }
+
+  // Walk the new body in order, keeping a cursor so an element the
+  // build added lands in the right place relative to its siblings.
+  const placed = new Set()
+  let cursor = null
+  for (const element of incoming) {
+    const key = keyOf(element)
+    const existing = current.get(key)
+    if (existing && editing && existing.tagName === "MAIN") {
+      placed.add(existing)
+      cursor = existing
+      continue
+    }
+    const fresh = document.importNode(element, true)
+    if (existing) {
+      existing.replaceWith(fresh)
+    } else if (cursor) {
+      cursor.after(fresh)
+    } else {
+      body.prepend(fresh)
+    }
+    placed.add(fresh)
+    cursor = fresh
+  }
+
+  for (const [, element] of current) {
+    if (!placed.has(element) && element.isConnected) element.remove()
+  }
+
+  for (const element of [...body.children]) {
+    if (!produced.has(keyOf(element)) && wasProduced(element)) element.remove()
+  }
+}
+
+/**
+ * The client adds elements that aren't the build's: the editor's own
+ * <script type="module">, and whatever Svelte mounts into the body (the
+ * Edit button, the settings panel, overlays). A <script> or a Svelte
+ * host is never the build's, so the morph never touches them - the
+ * Svelte components that mount into the body mark their root with
+ * data-vowel-client (the settings panel is an <aside>, like the page's
+ * nav); the page-structure elements and anything with an id are.
+ * @param {Element} element
+ */
+function wasProduced(element) {
+  if (element.tagName === "SCRIPT") return false
+  if (element.hasAttribute("data-vowel-client")) return false
+  return ["HEADER", "MAIN", "ASIDE", "FOOTER", "NAV"].includes(element.tagName) || Boolean(element.id)
+}

package/plugins/html/editor/source.js

@@ -0,0 +1,43 @@
+/**
+ * The page's source, as the preview handed it over: the source path and
+ * markdown of this page, and of the root settings.md. Seeded from the
+ * JSON the html plugin injects (#vowel-source) and kept current from the
+ * live-reload socket, which pushes the whole target - metadata included
+ * - on every rebuild. The editor and the settings panel read it at save
+ * time, so the frontmatter they keep is the newest the build has seen.
+ *
+ * It used to be fetched: GET <page>?source for the page, and settings.md
+ * was emitted as a target so the panel could GET it. Neither exists now.
+ */
+
+const empty = { path: null, markdown: null, settings: { path: "settings.md", markdown: null }, editor: false }
+
+let current = null
+
+function seed() {
+  if (current) return current
+  const element = document.getElementById("vowel-source")
+  try {
+    current = element ? { ...empty, ...JSON.parse(element.textContent) } : { ...empty }
+  } catch {
+    current = { ...empty }
+  }
+  return current
+}
+
+/** The page's source path and markdown, and the root settings.md's. */
+export function getSource() {
+  return seed()
+}
+
+/** A rebuilt target arrived over the socket: take its source and markdown. */
+export function updateFromTarget(target) {
+  const source = seed()
+  if (typeof target.source === "string") source.path = target.source
+  if (typeof target.metadata?.markdown === "string") source.markdown = target.metadata.markdown
+}
+
+/** The settings panel wrote settings.md: remember what it wrote. */
+export function updateSettings(markdown) {
+  seed().settings.markdown = markdown
+}

package/plugins/html/image.js

@@ -12,7 +12,6 @@ import * as unpic from "unpic"
  * @param {boolean} [itemprop]
  */
 function createDynamicImage(imagePath, api, alt, itemprop) {
-  // TODO: Hardcode image height and width
   const parsed = path.parse(imagePath);
   const isURL = testURL(imagePath)
   const isImg = !parsed.ext.search(/^.(png|jpeg|jpg)$/);
@@ -46,16 +45,31 @@ function createDynamicImage(imagePath, api, alt, itemprop) {
         })
       })
 
-      return h("picture", { itemprop: itemprop && "image" }, sources)
+      // The derivative paths in srcset are hash-based, so the original asset
+  // path cannot be recovered from them. Carried here rather than as a
+  // <source>, which is a loading candidate a browser could select.
+  return h("picture", { itemprop: itemprop && "image", "data-original": imagePath }, sources)
     }
   }
 
   if (!isImg) return
 
-  const relativePath = imagePath.startsWith("/") ? path.relative("/", imagePath) : imagePath
+  // Lowercased: every vowel target path is (config.js's router), and
+  // the author may well have typed the file's real name.
+  const relativePath = (imagePath.startsWith("/") ? path.relative("/", imagePath) : imagePath).toLowerCase()
   const image = api.target(relativePath)
   if (!image) return
-  const formats = createImagePaths(image.abstract.sourcePath, "./", image.abstract.uuid)
+  // Until the image has been read (a deferred buffer read) it has no
+  // hash and no derivatives; a plain <img> stands in, and the tracked
+  // read of `hash` rewrites this page when they arrive. Derivatives are
+  // named from the *target* path, as the images processor declares them.
+  if (!image.metadata.hash) return h("img", { src: "/" + image.path, alt, loading: "lazy" })
+  const formats = createImagePaths(image.path, "./", image.metadata.hash)
+
+  // Intrinsic size, measured at read (plugins/images): the browser
+  // reserves the right box before the bytes arrive, and the reset's
+  // `img { height: auto }` keeps the ratio when the width is capped.
+  const { width, height, dominant } = image.metadata
 
   const sources = formats.map((format, index) => {
     const isImg = index === formats.length - 1
@@ -68,11 +82,23 @@ function createDynamicImage(imagePath, api, alt, itemprop) {
       loading: isImg && "lazy",
       src: isImg && "/" + format.at(-1),
       sizes: "100vw",
+      width: isImg && width,
+      height: isImg && height,
       alt: isImg && alt
     })
   })
 
-  return h("picture", { itemprop: itemprop && "image" }, sources)
+  // The derivative paths in srcset are hash-based, so the original asset
+  // path cannot be recovered from them. Carried here rather than as a
+  // <source>, which is a loading candidate a browser could select.
+  // --dominant is the image's dominant colour, for a stylesheet to use
+  // as the placeholder behind a lazy image (`picture { background:
+  // var(--dominant) }`); nothing here decides that it should.
+  return h("picture", {
+    itemprop: itemprop && "image",
+    "data-original": imagePath,
+    style: dominant && `--dominant: ${dominant}`
+  }, sources)
 }
 
 export default createDynamicImage