vowel 0.7.7 → 0.8.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vowel",
   "type": "module",
-  "version": "0.7.7",
+  "version": "0.8.0",
   "engines": {
     "node": ">=26"
   },
@@ -88,4 +88,4 @@
     "!plugins/html/bundle.js",
     "!plugins/html/editorClient.js"
   ]
-}
+}

package/plugins/html/highlighting.js

@@ -0,0 +1,66 @@
+import { refractor } from "refractor"
+import graphql from "refractor/graphql"
+import jsx from "refractor/jsx"
+import shellSession from "refractor/shell-session"
+import toml from "refractor/toml"
+import tsx from "refractor/tsx"
+import wasm from "refractor/wasm"
+import { extendMarkdown } from "./markdownGrammar.js"
+
+/**
+ * Syntax highlighting for fenced code: Prism's grammars, through
+ * refractor, which returns a hast tree. Prism replaced highlight.js
+ * (vowel 0.8) because highlight.js's markdown grammar knew neither
+ * frontmatter, comments nor GFM, and Vowel's code blocks are mostly
+ * Vowel's own markup; Prism is as fast (markdownGrammar.js).
+ *
+ * refractor's common set is 62 languages. These are added so that every
+ * name highlight.js answered to still highlights: the languages it had
+ * and refractor's common set doesn't, and the other spellings of the
+ * ones it does.
+ */
+refractor.register(graphql)
+refractor.register(jsx)
+refractor.register(shellSession)
+refractor.register(toml)
+refractor.register(tsx)
+refractor.register(wasm)
+
+refractor.alias({
+  bash: ["zsh"],
+  c: ["h"],
+  cpp: ["cc", "c++", "h++", "hpp", "hh", "hxx", "cxx"],
+  csharp: ["c#"],
+  diff: ["patch"],
+  go: ["golang"],
+  graphql: ["gql"],
+  javascript: ["mjs", "cjs"],
+  json: ["jsonc", "json5"],
+  makefile: ["mk", "mak", "make"],
+  markdown: ["mkdown", "mkd"],
+  markup: ["xhtml", "xsd", "xsl", "plist"],
+  "objectivec": ["mm", "obj-c"],
+  perl: ["pl", "pm"],
+  python: ["ipython"],
+  ruby: ["gemspec", "podspec", "irb"],
+  rust: ["rs"],
+  "shell-session": ["console"],
+  typescript: ["mts", "cts"],
+  vbnet: ["vb"]
+})
+
+extendMarkdown(refractor)
+
+/**
+ * `code` highlighted as `language`, as hast, or undefined for a
+ * language Prism doesn't know. Matched case-insensitively, as a fence's
+ * language was by highlight.js.
+ * @param {string} code
+ * @param {string} language
+ * @returns {import("hast").Root | undefined}
+ */
+export function highlightCode(code, language) {
+  const name = language.toLowerCase()
+  if (!refractor.registered(name)) return undefined
+  return refractor.highlight(code, name)
+}

package/plugins/html/markdownGrammar.js

@@ -0,0 +1,145 @@
+/**
+ * Prism's markdown grammar, made to read what Vowel reads: GitHub
+ * Flavored Markdown, then Vowel's own syntax on top (per Sam, Nov 6:
+ * Vowel is a GFM superset, so its code blocks highlight as GFM).
+ *
+ * Prism's grammar is close. These change what it gets wrong, measured
+ * against micromark, which Vowel parses pages with:
+ *
+ * - frontmatter only on the first line (Prism allowed blank lines
+ *   before it);
+ * - fences of `~~~` as well as ```, and longer fences (a `~~~` fence was
+ *   strikethrough, and a ```` fence ended at the first ``` inside it);
+ * - table delimiter cells of one dash (Prism wanted three);
+ * - task list items, footnotes and autolinks, which it didn't know.
+ *
+ * And these add Vowel's syntax, with the patterns `readRules.js` reads
+ * it with: alerts, wikilinks, hashtags, `:shortcodes:`, `==highlights==`
+ * and listing lines (`/blog/*`).
+ *
+ * Prism grammars are objects that are changed in place: `insertBefore`
+ * is how a rule is added, and the order of rules is the order they are
+ * tried in. A token that is cut out of a line hides it from the rules
+ * after it: that is why a task item takes its list marker with it.
+ */
+
+/**
+ * Prism's table patterns with one dash or more per delimiter cell.
+ * @param {RegExp} pattern
+ */
+const oneDash = (pattern) => new RegExp(pattern.source.replaceAll("-{3,}", "-+"), pattern.flags)
+
+/**
+ * Extends the markdown grammar of this refractor, once.
+ * @param {import("refractor/core").Refractor} refractor - with markdown registered
+ */
+export function extendMarkdown(refractor) {
+  const languages = refractor.languages
+  const markdown = languages.markdown
+
+  markdown["front-matter-block"].pattern = /^---(?!.)[\s\S]*?[\r\n]---(?!.)/
+  markdown["front-matter-block"].lookbehind = false
+
+  // Three or more backticks or tildes, closed by the same character at
+  // least as many times. The parts stay in the order Prism's
+  // after-tokenize hook expects (fence, language, newline, block,
+  // newline, fence): it reads the language from them, and highlights
+  // the block in it.
+  markdown.code[1] = {
+    pattern: /^(([`~])\2{2,})[^\r\n]*(?:\r\n?|\n)(?:[\s\S]*?(?:\r\n?|\n))??\1\2*[ \t]*$/m,
+    greedy: true,
+    inside: {
+      "code-block": {
+        pattern: /^((?:`{3,}|~{3,})[^\r\n]*(?:\r\n?|\n))[\s\S]+(?=(?:\r\n?|\n)(?:`{3,}|~{3,})[ \t]*$)/,
+        lookbehind: true
+      },
+      "code-language": {
+        pattern: /^(`{3,}|~{3,})[^\s`~][^\r\n]*/,
+        lookbehind: true
+      },
+      punctuation: /`{3,}|~{3,}/
+    }
+  }
+
+  const table = markdown.table
+  const rows = table.inside["table-data-rows"]
+  const line = table.inside["table-line"]
+  table.pattern = oneDash(table.pattern)
+  rows.pattern = oneDash(rows.pattern)
+  line.pattern = oneDash(line.pattern)
+  line.inside.punctuation = oneDash(line.inside.punctuation)
+
+  languages.insertBefore("markdown", "blockquote", {
+    // `> [!NOTE]`, any word, at the start of a quote.
+    alert: {
+      pattern: /(^>[ \t]*)\[![A-Za-z]+\]/m,
+      lookbehind: true,
+      alias: "important"
+    }
+  })
+
+  languages.insertBefore("markdown", "list", {
+    // `- [x]` and `1. [ ]`.
+    task: {
+      pattern: /^[ \t]*(?:[*+-]|\d+[.)])[ \t]+\[[ xX]\](?=[ \t])/m,
+      inside: {
+        list: { pattern: /^[ \t]*(?:[*+-]|\d+[.)])/, alias: "punctuation" },
+        checkbox: { pattern: /\[[ xX]\]/, alias: "keyword" }
+      }
+    },
+    // A paragraph that is only a path: a listing (`/blog/*`, `./drafts/**`)
+    // or a reference to a page (`/blog/post`).
+    directive: {
+      pattern: /(^|\n[ \t]*\n)(?:\/|\.\.?\/)\S*(?=[ \t]*(?:\n[ \t]*\n|\n?$))/,
+      lookbehind: true,
+      alias: "function"
+    }
+  })
+
+  languages.insertBefore("markdown", "url-reference", {
+    // `[^1]: The source.`, which Prism read as a link definition with
+    // the first word as its url.
+    "footnote-definition": {
+      pattern: /^[ \t]*\[\^[^\]\s]+\]:/m,
+      alias: "url"
+    }
+  })
+
+  languages.insertBefore("markdown", "url", {
+    // `[[Name]]`, `[[Name#Section]]`, `[[Name|words]]` and `![[Name]]`.
+    wikilink: {
+      pattern: /!?\[\[[^\]|#\r\n]+(?:#[^\]|\r\n]+)?(?:\|[^\]\r\n]+)?\]\]/,
+      greedy: true,
+      alias: "url",
+      inside: { punctuation: /^!?\[\[|\]\]$|[|#]/ }
+    },
+    // `[^1]`
+    footnote: {
+      pattern: /\[\^[^\]\s]+\]/,
+      alias: "url"
+    },
+    // `<https://vowel.cc>`, and a bare `https://vowel.cc` without the
+    // punctuation that ends a sentence.
+    autolink: {
+      pattern: /<(?:https?|mailto):[^\s>]+>|\bhttps?:\/\/[^\s<]*[^\s<.,:;"')\]]/,
+      alias: "url"
+    },
+    // `#tag` after the start of a line or a space: never a heading's
+    // `# `, a salt's `##` or the `#` in `a#b`.
+    hashtag: {
+      pattern: /(^|[ \t])#[\w\-/]+\b/m,
+      lookbehind: true,
+      alias: "tag"
+    },
+    // `:name:` and `:folder/name:`, an emoji or an icon.
+    shortcode: {
+      pattern: /:[a-z0-9_+-]+(?:\/[a-z0-9_+-]+)?:/,
+      alias: "symbol"
+    },
+    // `==highlighted==`
+    mark: {
+      pattern: /==(?=\S)[^=\r\n]*\S==/,
+      alias: "important"
+    }
+  })
+}

package/plugins/html/writeRules.js

@@ -1,12 +1,12 @@
 import path from "node:path"
 import { h } from "hastscript"
-import { common, createLowlight } from "lowlight"
 import { toText } from "hast-util-to-text"
 import GithubSlugger from "github-slugger"
 import { createVisitor, SKIP } from "../markdown/visitor.js"
 import { showPages, isPageWithoutFile, imageSizes, sourceLocation } from "../../utils.js"
 import { globClasses, alertLabel } from "./editor/directives.js"
 import createDynamicImage, { derivativeURL } from "./image.js"
+import { highlightCode } from "./highlighting.js"
 import { displayPath } from "../../secretPaths.js"
 
 /**
@@ -31,7 +31,6 @@ const at = (node, target) => sourceLocation(target.source ?? target.path, node?.
  * write can link the highlight stylesheet only on pages that need it.
  */
 
-const lowlight = createLowlight(common)
 
 /** @param {any} node */
 const isElement = (node) => node?.type === "element"
@@ -276,9 +275,10 @@ const icon = {
 }
 
 /**
- * A fenced block with a language: what rehype-highlight did, without
- * its walk. hljs plus per-token spans on the <code>; the language class
- * is left for the stylesheet. An unregistered language is left alone.
+ * A fenced block with a language, highlighted by Prism
+ * (highlighting.js): per-token spans in the <code>, and the language
+ * class on the <pre> as well as the <code>, where Prism's themes look
+ * for it. A language Prism doesn't know is left alone.
  * @type {import("../markdown/visitor.js").BlockRule}
  */
 const highlight = {
@@ -288,14 +288,10 @@ const highlight = {
     const code = node.children[0]
     const language = (code.properties?.className ?? []).map(String).find(name => name.startsWith("language-"))?.slice("language-".length)
     if (!language) return SKIP
-    let result
-    try {
-      result = lowlight.highlight(language, toText(code, { whitespace: "pre" }))
-    } catch (error) {
-      if (/Unknown language/.test(error.message)) return SKIP
-      throw error
-    }
-    code.properties.className = ["hljs", ...code.properties.className.filter(name => name !== "hljs")]
+    const result = highlightCode(toText(code, { whitespace: "pre" }), language)
+    if (!result) return SKIP
+    const preClasses = (node.properties?.className ?? []).map(String).filter(name => !name.startsWith("language-"))
+    node.properties = { ...node.properties, className: [...preClasses, `language-${language}`] }
     if (result.children.length) code.children = result.children
     context.highlighted = true
     return SKIP

package/stylesheets/DefaultStyles.css

@@ -17,7 +17,7 @@
 	--_name is internal to a sheet: computed here, not for setting.
 */
 
-@layer reset, typography, default, dynamic-typography;
+@layer reset, typography, syntax-highlighting, default, dynamic-typography;
 
 @layer default {
 	:root {

package/stylesheets/SyntaxHighlightingStyles.css

@@ -1,269 +1,214 @@
 /*
- * Syntax highlighting theme for code blocks (rehype-highlight), based on
- * highlight.js's GitHub theme. Light by default, dark under
- * prefers-color-scheme - see highlight.js/styles/github.css and
- * github-dark.css for the source themes this was combined from.
+ * Syntax highlighting for code blocks, highlighted by Prism (refractor):
+ * GitHub's light and dark colours, as highlight.js's GitHub themes had
+ * them, on Prism's token classes. Light by default, dark under
+ * prefers-color-scheme.
+ *
+ * In its own layer, before the default theme's (per Sam), so a theme
+ * overrides it: DefaultStyles.css's `pre, code` background replaces the
+ * dark background here. A project's own stylesheet is unlayered, so it
+ * overrides everything, a Prism theme included. The order is declared
+ * in every theme sheet, because a layer named for the first time later
+ * would go to the end.
+ *
+ * Rules of the same specificity are in an order that matters: a token
+ * can have several classes (a heading is `title important`, a YAML key
+ * `key atrule`), and the later rule wins.
  */
-pre code.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 1em
-}
-
-code.hljs {
-  padding: 3px 5px
-}
-
-/*!
-  Theme: GitHub
-  Description: Light theme as seen on github.com
-  Author: github.com
-  Maintainer: @Hirse
-  Updated: 2021-05-15
-
-  Outdated base version: https://github.com/primer/github-syntax-light
-  Current colors taken from GitHub's CSS
-*/
-.hljs {
-  color: #24292e;
-}
-
-.hljs-doctag,
-.hljs-keyword,
-.hljs-meta .hljs-keyword,
-.hljs-template-tag,
-.hljs-template-variable,
-.hljs-type,
-.hljs-variable.language_ {
-  /* prettylights-syntax-keyword */
-  color: #d73a49
-}
-
-.hljs-title,
-.hljs-title.class_,
-.hljs-title.class_.inherited__,
-.hljs-title.function_ {
-  /* prettylights-syntax-entity */
-  color: #6f42c1
-}
-
-.hljs-attr,
-.hljs-attribute,
-.hljs-literal,
-.hljs-meta,
-.hljs-number,
-.hljs-operator,
-.hljs-variable,
-.hljs-selector-attr,
-.hljs-selector-class,
-.hljs-selector-id {
-  /* prettylights-syntax-constant */
-  color: #005cc5
-}
-
-.hljs-regexp,
-.hljs-string,
-.hljs-meta .hljs-string {
-  /* prettylights-syntax-string */
-  color: #032f62
-}
-
-.hljs-built_in,
-.hljs-symbol {
-  /* prettylights-syntax-variable */
-  color: #e36209
-}
-
-.hljs-comment,
-.hljs-code,
-.hljs-formula {
-  /* prettylights-syntax-comment */
-  color: #6a737d
-}
-
-.hljs-name,
-.hljs-quote,
-.hljs-selector-tag,
-.hljs-selector-pseudo {
-  /* prettylights-syntax-entity-tag */
-  color: #22863a
-}
-
-.hljs-subst {
-  /* prettylights-syntax-storage-modifier-import */
-  color: #24292e
-}
-
-.hljs-section {
-  /* prettylights-syntax-markup-heading */
-  color: #005cc5;
-  font-weight: bold
-}
-
-.hljs-bullet {
-  /* prettylights-syntax-markup-list */
-  color: #735c0f
-}
-
-.hljs-emphasis {
-  /* prettylights-syntax-markup-italic */
-  color: #24292e;
-  font-style: italic
-}
-
-.hljs-strong {
-  /* prettylights-syntax-markup-bold */
-  color: #24292e;
-  font-weight: bold
-}
-
-.hljs-addition {
-  /* prettylights-syntax-markup-inserted */
-  color: #22863a;
-  background-color: #f0fff4
-}
-
-.hljs-deletion {
-  /* prettylights-syntax-markup-deleted */
-  color: #b31d28;
-  background-color: #ffeef0
-}
-
-.hljs-char.escape_,
-.hljs-link,
-.hljs-params,
-.hljs-property,
-.hljs-punctuation,
-.hljs-tag {
-  /* purposely ignored */
 
-}
-
-@media (prefers-color-scheme: dark) {
+@layer reset, typography, syntax-highlighting, default, dynamic-typography;
 
-  /*!
-    Theme: GitHub Dark
-    Description: Dark theme as seen on github.com
-    Author: github.com
-    Maintainer: @Hirse
-    Updated: 2021-05-15
-
-    Outdated base version: https://github.com/primer/github-syntax-dark
-    Current colors taken from GitHub's CSS
-  */
-  .hljs {
-    color: #c9d1d9;
-    background: #0d1117
+@layer syntax-highlighting {
+  pre[class*="language-"] {
+    color: #24292e;
   }
 
-  .hljs-doctag,
-  .hljs-keyword,
-  .hljs-meta .hljs-keyword,
-  .hljs-template-tag,
-  .hljs-template-variable,
-  .hljs-type,
-  .hljs-variable.language_ {
-    /* prettylights-syntax-keyword */
-    color: #ff7b72
+  pre[class*="language-"]>code {
+    display: block;
+    overflow-x: auto;
+    padding: 1em;
   }
 
-  .hljs-title,
-  .hljs-title.class_,
-  .hljs-title.class_.inherited__,
-  .hljs-title.function_ {
-    /* prettylights-syntax-entity */
-    color: #d2a8ff
+  /* prettylights-syntax-keyword */
+  .token.keyword,
+  .token.atrule,
+  .token.rule,
+  .token.important {
+    color: #d73a49;
   }
 
-  .hljs-attr,
-  .hljs-attribute,
-  .hljs-literal,
-  .hljs-meta,
-  .hljs-number,
-  .hljs-operator,
-  .hljs-variable,
-  .hljs-selector-attr,
-  .hljs-selector-class,
-  .hljs-selector-id {
-    /* prettylights-syntax-constant */
-    color: #79c0ff
+  /* prettylights-syntax-entity */
+  .token.function,
+  .token.class-name {
+    color: #6f42c1;
   }
 
-  .hljs-regexp,
-  .hljs-string,
-  .hljs-meta .hljs-string {
-    /* prettylights-syntax-string */
-    color: #a5d6ff
+  /* prettylights-syntax-constant */
+  .token.number,
+  .token.boolean,
+  .token.constant,
+  .token.operator,
+  .token.variable,
+  .token.property,
+  .token.attr-name,
+  .token.entity,
+  .token.doctype,
+  .token.prolog,
+  .token.key {
+    color: #005cc5;
   }
 
-  .hljs-built_in,
-  .hljs-symbol {
-    /* prettylights-syntax-variable */
-    color: #ffa657
+  /* prettylights-syntax-string */
+  .token.string,
+  .token.char,
+  .token.attr-value,
+  .token.regex,
+  .token.url {
+    color: #032f62;
   }
 
-  .hljs-comment,
-  .hljs-code,
-  .hljs-formula {
-    /* prettylights-syntax-comment */
-    color: #8b949e
+  /* prettylights-syntax-variable */
+  .token.builtin,
+  .token.symbol {
+    color: #e36209;
   }
 
-  .hljs-name,
-  .hljs-quote,
-  .hljs-selector-tag,
-  .hljs-selector-pseudo {
-    /* prettylights-syntax-entity-tag */
-    color: #7ee787
+  /* prettylights-syntax-comment: also markdown's code, whose language
+     is highlighted inside it */
+  .token.comment,
+  .token.cdata,
+  .token.code-snippet,
+  .token.code.keyword {
+    color: #6a737d;
   }
 
-  .hljs-subst {
-    /* prettylights-syntax-storage-modifier-import */
-    color: #c9d1d9
+  /* prettylights-syntax-entity-tag */
+  .token.tag,
+  .token.selector,
+  .token.blockquote {
+    color: #22863a;
   }
 
-  .hljs-section {
-    /* prettylights-syntax-markup-heading */
-    color: #1f6feb;
-    font-weight: bold
+  /* prettylights-syntax-markup-heading */
+  .token.title {
+    color: #005cc5;
+    font-weight: bold;
   }
 
-  .hljs-bullet {
-    /* prettylights-syntax-markup-list */
-    color: #f2cc60
+  /* prettylights-syntax-markup-list */
+  .token.list,
+  .token.checkbox {
+    color: #735c0f;
   }
 
-  .hljs-emphasis {
-    /* prettylights-syntax-markup-italic */
-    color: #c9d1d9;
-    font-style: italic
+  .token.table-header {
+    color: inherit;
+    font-weight: bold;
   }
 
-  .hljs-strong {
-    /* prettylights-syntax-markup-bold */
-    color: #c9d1d9;
-    font-weight: bold
+  .token.bold {
+    font-weight: bold;
   }
 
-  .hljs-addition {
-    /* prettylights-syntax-markup-inserted */
-    color: #aff5b4;
-    background-color: #033a16
+  .token.italic {
+    font-style: italic;
   }
 
-  .hljs-deletion {
-    /* prettylights-syntax-markup-deleted */
-    color: #ffdcd7;
-    background-color: #67060c
+  .token.strike {
+    text-decoration: line-through;
   }
 
-  .hljs-char.escape_,
-  .hljs-link,
-  .hljs-params,
-  .hljs-property,
-  .hljs-punctuation,
-  .hljs-tag {
-    /* purposely ignored */
+  /* prettylights-syntax-markup-inserted */
+  .token.inserted {
+    color: #22863a;
+    background-color: #f0fff4;
+  }
 
+  /* prettylights-syntax-markup-deleted */
+  .token.deleted {
+    color: #b31d28;
+    background-color: #ffeef0;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    pre[class*="language-"] {
+      color: #c9d1d9;
+      background: #0d1117;
+    }
+
+    .token.keyword,
+    .token.atrule,
+    .token.rule,
+    .token.important {
+      color: #ff7b72;
+    }
+
+    .token.function,
+    .token.class-name {
+      color: #d2a8ff;
+    }
+
+    .token.number,
+    .token.boolean,
+    .token.constant,
+    .token.operator,
+    .token.variable,
+    .token.property,
+    .token.attr-name,
+    .token.entity,
+    .token.doctype,
+    .token.prolog,
+    .token.key {
+      color: #79c0ff;
+    }
+
+    .token.string,
+    .token.char,
+    .token.attr-value,
+    .token.regex,
+    .token.url {
+      color: #a5d6ff;
+    }
+
+    .token.builtin,
+    .token.symbol {
+      color: #ffa657;
+    }
+
+    .token.comment,
+    .token.cdata,
+    .token.code-snippet,
+    .token.code.keyword {
+      color: #8b949e;
+    }
+
+    .token.tag,
+    .token.selector,
+    .token.blockquote {
+      color: #7ee787;
+    }
+
+    .token.title {
+      color: #1f6feb;
+    }
+
+    .token.list,
+    .token.checkbox {
+      color: #f2cc60;
+    }
+
+    .token.table-header {
+      color: inherit;
+    }
+
+    .token.inserted {
+      color: #aff5b4;
+      background-color: #033a16;
+    }
+
+    .token.deleted {
+      color: #ffdcd7;
+      background-color: #67060c;
+    }
   }
-}
+}

package/stylesheets/TypographyStyles.css

@@ -1,4 +1,4 @@
-@layer reset, typography;
+@layer reset, typography, syntax-highlighting;
 
 @layer typography {