poops 1.9.6 → 1.9.8

package/README.md

@@ -1023,6 +1023,20 @@ The language argument is optional. If omitted, highlight.js will attempt to auto
 
 Registered languages: `javascript`/`js`, `typescript`/`ts`, `css`, `scss`, `html`, `xml`, `json`, `bash`/`sh`, `shell`, `python`/`py`, `ruby`/`rb`, `php`, `java`, `c`, `cpp`, `csharp`/`cs`, `go`, `rust`/`rs`, `yaml`/`yml`, `markdown`/`md`, `sql`, `diff`.
 
+**Fence info strings.** Only the first word names the language. Anything after it is carried onto the `<code>` element instead of being dropped: a bare word becomes a class, a `key=value` token becomes a `data-` attribute. This is how a fence marks itself for a later stage — a post-`markup` `exec` script that turns `code.preview` blocks into live demos, for example — without a marker comment in the markdown.
+
+````md
+```html preview tab=options widths=375,768
+<my-element></my-element>
+```
+````
+
+```html
+<pre><code class="hljs language-html preview" data-tab="options" data-widths="375,768">…</code></pre>
+```
+
+Values are single tokens — no quotes, no spaces. A trailing `=` with nothing after it emits a valueless attribute (`expanded=` → `data-expanded=""`), for a flag you want to read with `hasAttribute` rather than as a class. The same applies to the `{% highlight %}` tag and the `highlight` filter.
+
 #### Custom Filters
 
 All filters are available in both engines. The only syntax difference is how arguments are passed: Nunjucks uses parentheses `| filter("arg")`, Liquid uses a colon `| filter: "arg"`.
@@ -1093,6 +1107,18 @@ All filters are available in both engines. The only syntax difference is how arg
   ---
   ```
 
+  The same `jsonld` object works in your `site` data, as a site-wide default — useful when every page on the site is one type. A docs site is `TechArticle`, not `WebPage`:
+
+  ```json
+  "markup": {
+    "site": {
+      "jsonld": { "@type": "TechArticle" }
+    }
+  }
+  ```
+
+  Precedence is defaults → `site.jsonld` → `page.jsonld`, so a single page can still opt out (a `FAQPage` inside a `TechArticle` site). A site-wide `@type` also overrides the auto-detected `BlogPosting` on dated pages, so on a site mixing docs and a blog set the type per page instead. Both merge into the page's own block only — the auto-emitted `WebSite` and `BreadcrumbList` blocks are untouched.
+
   poops auto-picks `BlogPosting` (page has a `date`) or `WebPage`. Override `@type` with the `jsonld` object for any schema.org type — common ones search/generative engines act on: `Article`, `NewsArticle`, `HowTo`, `FAQPage`, `QAPage`, `Product`, `Recipe`, `Event`, `Course`, `VideoObject`, `SoftwareApplication`, `Organization`, `Person`, `BreadcrumbList`, `WebSite`. Full list at [schema.org/docs/full](https://schema.org/docs/full.html); validate with the [Rich Results Test](https://search.google.com/test/rich-results). A per-`@type` table with the notable fields is in the [Templating docs](example/src/markup/docs/quick-start/templating-html.md).
 
 - `breadcrumb` — generates a visible breadcrumb `<nav class="breadcrumb"><ol>…</ol></nav>` trail for the page body (blog posts, nested pages), from the same URL-depth data the `jsonld` `BreadcrumbList` uses: the site root, each ancestor folder (humanized, e.g. `docs/static-site` → _Static Site_), then the current page as `aria-current` text. Pass `relativePathPrefix` so links resolve against the current output location (localhost in dev, your deployed subpath in prod) — not the absolute domain.

package/lib/markup/engines/liquid.js

@@ -1,7 +1,7 @@
 import fs from 'node:fs'
 import path from 'node:path'
 import { Liquid } from 'liquidjs'
-import { highlightCode } from '../highlight.js'
+import { highlightCode, codeBlock } from '../highlight.js'
 import { marked, renderMarkdownCached } from '../renderer.js'
 import { discoverImageVariants, parseFrontMatter, groupby, buildImageTag, buildPaginationTag, renderToc, buildJsonLd, buildOpenGraph, buildCanonical, buildBreadcrumb } from '../helpers.js'
 import { getImageExif, listImages } from '../image-cache.js'
@@ -131,11 +131,7 @@ export default class LiquidEngine {
     engine.registerFilter('canonical', (page, site) => buildCanonical(page, site))
     engine.registerFilter('breadcrumb', (page, site, prefix) => buildBreadcrumb(page, site, prefix))
     engine.registerFilter('groupby', (arr, key, datePart) => groupby(arr, key, datePart))
-    engine.registerFilter('highlight', (code, lang) => {
-      const highlighted = highlightCode(code, lang)
-      const langClass = lang ? ` language-${lang}` : ''
-      return `<pre><code class="hljs${langClass}">${highlighted}</code></pre>`
-    })
+    engine.registerFilter('highlight', (code, lang) => codeBlock(highlightCode(code, lang), lang))
   }
 
   registerTags(getOutputDir) {
@@ -347,10 +343,7 @@ function registerHighlightTag(engine) {
     },
     * render(ctx) {
       const code = yield this.liquid.renderer.renderTemplates(this.templates, ctx)
-      const lang = this.lang
-      const highlighted = highlightCode(code, lang)
-      const langClass = lang ? ` language-${lang}` : ''
-      return `<pre><code class="hljs${langClass}">${highlighted}</code></pre>`
+      return codeBlock(highlightCode(code, this.lang), this.lang)
     }
   })
 }

package/lib/markup/engines/nunjucks.js

@@ -6,7 +6,7 @@ import path from 'node:path'
 import { discoverImageVariants, parseFrontMatter, groupby, buildImageTag, buildPaginationTag, renderToc, buildJsonLd, buildOpenGraph, buildCanonical, buildBreadcrumb } from '../helpers.js'
 import { getImageExif, listImages } from '../image-cache.js'
 import { toPosix } from '../../utils/helpers.js'
-import { highlightCode } from '../highlight.js'
+import { highlightCode, codeBlock } from '../highlight.js'
 import { marked, renderMarkdownCached } from '../renderer.js'
 import { slugify, humanize } from 'book-of-spells'
 import dayjs from 'dayjs'
@@ -197,11 +197,7 @@ export default class NunjucksEngine {
     env.addFilter('canonical', (page, site) => new nunjucks.runtime.SafeString(buildCanonical(page, site)))
     env.addFilter('breadcrumb', (page, site, prefix) => new nunjucks.runtime.SafeString(buildBreadcrumb(page, site, prefix)))
     env.addFilter('groupby', (arr, key, datePart) => groupby(arr, key, datePart))
-    env.addFilter('highlight', (code, lang) => {
-      const highlighted = highlightCode(code, lang)
-      const langClass = lang ? ` language-${lang}` : ''
-      return new nunjucks.runtime.SafeString(`<pre><code class="hljs${langClass}">${highlighted}</code></pre>`)
-    })
+    env.addFilter('highlight', (code, lang) => new nunjucks.runtime.SafeString(codeBlock(highlightCode(code, lang), lang)))
   }
 
   registerTags(getOutputDir) {
@@ -335,12 +331,7 @@ export class HighlightExtension {
   }
 
   run(context, lang, body) {
-    const code = body()
-    const highlighted = highlightCode(code, lang)
-    const langClass = lang ? ` language-${lang}` : ''
-    return new nunjucks.runtime.SafeString(
-      `<pre><code class="hljs${langClass}">${highlighted}</code></pre>`
-    )
+    return new nunjucks.runtime.SafeString(codeBlock(highlightCode(body(), lang), lang))
   }
 }
 

package/lib/markup/helpers.js

@@ -532,10 +532,12 @@ export function buildBreadcrumb(page, site = {}, prefix = '') {
 // gains a `logo` ImageObject when `site.logo` is set — Google Article rich
 // results require it. On the homepage (page has no `url`) a second `WebSite`
 // block is emitted, declaring the site name for search results.
-// Anything in `page.jsonld` (an object) is merged over the generated defaults,
-// so a page can add or replace any field — including @type — as a full escape
-// hatch. Values come from front matter, so the JSON is escaped for a <script>
-// context to prevent a `</script>` break-out (XSS).
+// `site.jsonld` and `page.jsonld` (objects) are merged over the generated
+// defaults — site-wide first, then the page — so a site can set a default
+// @type (a docs site is TechArticle, not WebPage) and a page can still add or
+// replace any field as a full escape hatch. Values come from front matter, so
+// the JSON is escaped for a <script> context to prevent a `</script>`
+// break-out (XSS).
 export function buildJsonLd(page, site = {}) {
   page = page || {}
   site = site || {}
@@ -577,8 +579,10 @@ export function buildJsonLd(page, site = {}) {
     if (page.wordcount) data.wordCount = page.wordcount
   }
 
-  // page.jsonld extends/overrides. Shallow merge — nested schema is rare and
-  // the escape hatch is meant for whole-key replacement.
+  // site.jsonld then page.jsonld extend/override — the page wins. Shallow
+  // merge — nested schema is rare and the escape hatch is meant for whole-key
+  // replacement.
+  if (site.jsonld && typeof site.jsonld === 'object') Object.assign(data, site.jsonld)
   if (page.jsonld && typeof page.jsonld === 'object') Object.assign(data, page.jsonld)
 
   const blocks = [jsonLdScript(data)]

package/lib/markup/highlight.js

@@ -58,20 +58,53 @@ function escapeHtml(str) {
   return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
 }
 
-export function highlightCode(code, language) {
-  if (language) {
-    const lang = language.toLowerCase().trim()
-    if (hljs.getLanguage(lang)) {
-      return hljs.highlight(code, { language: lang }).value
+// A fence's info string is everything after the backticks — the language plus
+// any meta words (```html preview). Only the first word names the language, so
+// the rest has to come off before a hljs lookup or a `language-` class: with it
+// attached, getLanguage misses and the block silently falls to auto-detection.
+export function fenceLang(info) {
+  return String(info || '').trim().split(/\s+/)[0].toLowerCase()
+}
+
+// Everything after the language is the fence's own markup for a later stage:
+// a bare word becomes a class (```html preview → code.preview), `key=value`
+// becomes a data attribute (tab=options → data-tab="options"). Values are
+// single tokens — no quotes, no spaces — which keeps the parser a split and is
+// enough for settings; anything longer belongs in the markdown around the fence.
+export function fenceAttrs(info) {
+  const [lang, ...rest] = String(info || '').trim().split(/\s+/).filter(Boolean)
+  const classes = ['hljs']
+  if (lang) classes.push(`language-${lang.toLowerCase().replace(/[^\w-]/g, '')}`)
+  let data = ''
+  for (const token of rest) {
+    const eq = token.indexOf('=')
+    if (eq < 0) {
+      const name = token.replace(/[^\w-]/g, '')
+      if (name) classes.push(name)
+      continue
     }
+    const key = token.slice(0, eq).replace(/[^\w-]/g, '')
+    if (key) data += ` data-${key}="${escapeHtml(token.slice(eq + 1))}"`
+  }
+  return ` class="${classes.join(' ')}"${data}`
+}
+
+// The one place a highlighted fence becomes html. Every renderer and engine
+// goes through it, so they cannot drift on what a fence produces again.
+export function codeBlock(highlighted, info) {
+  return `<pre><code${fenceAttrs(info)}>${highlighted}</code></pre>`
+}
+
+export function highlightCode(code, language) {
+  const lang = fenceLang(language)
+  if (lang && hljs.getLanguage(lang)) {
+    return hljs.highlight(code, { language: lang }).value
   }
   return hljs.highlightAuto(code).value
 }
 
 export const highlightRenderer = {
   code({ text, lang }) {
-    const highlighted = highlightCode(text, lang)
-    const langClass = lang ? ` language-${escapeHtml(lang)}` : ''
-    return `<pre><code class="hljs${langClass}">${highlighted}</code></pre>\n`
+    return `${codeBlock(highlightCode(text, lang), lang)}\n`
   }
 }

package/lib/markup/renderer.js

@@ -3,7 +3,7 @@ import { markedGithubEmoji } from 'marked-github-emoji'
 import { markedGithubAlerts } from 'marked-github-alerts'
 import { markedGithubFootnote } from 'marked-github-footnote'
 import { slugify } from 'book-of-spells'
-import { highlightRenderer, highlightCode } from './highlight.js'
+import { highlightRenderer, highlightCode, codeBlock } from './highlight.js'
 import { decodeTemplateEntities } from './helpers.js'
 
 const RAW_BLOCK_RE = /\{%-?\s*raw\s*-?%\}([\s\S]*?)\{%-?\s*endraw\s*-?%\}/g
@@ -36,8 +36,7 @@ export const markdownRenderer = {
   // never splits the delimiters, so it needs no special casing.
   code({ text, lang }) {
     const highlighted = mapRawSegments(text, (s) => s && highlightCode(s, lang), (s) => highlightCode(s, lang))
-    const langClass = lang ? ` language-${lang.replace(/[^\w-]/g, '')}` : ''
-    return `<pre><code class="hljs${langClass}">${highlighted}</code></pre>\n`
+    return `${codeBlock(highlighted, lang)}\n`
   },
   // Give every heading a slug id + a permalink anchor. The anchor is empty on
   // purpose — themes reveal a "#" via `.heading-anchor::before`, so a site with

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "poops",
   "description": "Straightforward, no-bullshit bundler for the web.",
-  "version": "1.9.6",
+  "version": "1.9.8",
   "license": "MIT",
   "type": "module",
   "main": "poops.js",