@kirigami/php-prepros 1.7.1 → 1.8.0

package/README.md

@@ -34,6 +34,7 @@ Part of the **Kirigami** project ecosystem.
 - [@kirigami/php-prepros](#kirigamiphp-prepros)
   - [Overview](#overview)
   - [Table of contents](#table-of-contents)
+  - [What's new in 1.7.2](#whats-new-in-172)
   - [What's new in 1.7.1](#whats-new-in-171)
   - [What's new in 1.7.0](#whats-new-in-170)
   - [What's new in 1.6.0](#whats-new-in-160)
@@ -108,6 +109,46 @@ Part of the **Kirigami** project ecosystem.
 
 ---
 
+## What's new in 1.8.0
+
+- **`{% img-asset %}` — a new built-in Markdown plugin.** Same pipeline as the
+  `<img asset>` HTML tag (`IMG::asset()`: resize, cache, publish under
+  `image.dest`), usable straight from Markdown text:
+
+  ```
+  {% img-asset photo.jpg %}
+  {% img-asset photo.jpg 800 %}
+  {% img-asset photo.jpg 800 600 %}
+  {% img-asset photo.jpg 800 600 cover %}
+  ```
+
+  Positional args: source path (relative to `image.source`), width, height,
+  and the literal `cover` keyword. Registered in `md.plugins.php` alongside
+  `codepen`/`youtube`/`checklist`/`callout` — available out of the box, drop
+  it with `MD::unregisterPlugin('img-asset')` if you don't want it.
+
+---
+
+## What's new in 1.7.2
+
+- **Cleaner formatted output around highlighted code.** The de-indent script
+  `PREPROS::injectHead()` adds when `prepros.format` is on now flattens the
+  `<pre><code>` indentation `HTML::format()` writes for *every* block, including
+  ones a build-time highlighter has wrapped in `<span>`s. It works on
+  `innerHTML` line by line and removes only the shared leading run (relative
+  indentation is kept). This lets [`@kirigami/plugin-highlight`](https://www.npmjs.com/package/@kirigami/plugin-highlight)
+  1.7.2+ re-indent its markup to line up with the rest of the document instead
+  of leaving it flush-left — the served HTML stays consistently indented, the
+  rendered code is still de-indented before the first paint.
+
+- **`<markdown prose>` wraps in `.prose`.** With the `prose` attribute the
+  built-in tag emits `<div class="prose"> … </div>` so long-form Markdown picks
+  up `@kirigami/canva`'s `styles/prose` typography with no extra markup. Opt-in
+  (a bare `<markdown>` is unchanged); `class` / `id` on the tag land on the
+  wrapper.
+
+---
+
 ## What's new in 1.7.1
 
 - **No side effects on import.** `kirigami.yaml` is now loaded on first use
@@ -157,10 +198,11 @@ Part of the **Kirigami** project ecosystem.
 - **`HTML::format()` indents `<pre><code>`.** A fenced code block's lines are
   shifted to the block's nesting depth so the HTML source stays readable
   (relative indentation preserved). The exact leading run is stripped again
-  before it's shown — at build time by `@kirigami/plugin-highlight`, otherwise
-  by a ~250-byte de-indent script `prepros.head` injects before `</body>` (only
-  when `format` is on; it skips blocks a highlighter already flattened). A bare
-  `<pre>` and `<textarea>` are still emitted byte-for-byte.
+  before it's shown, by a small de-indent script `prepros.head` injects before
+  `</body>` (only when `format` is on). Since 1.7.2 the script works on
+  `innerHTML` line by line, so it also flattens blocks a build-time highlighter
+  has wrapped in `<span>`s. A bare `<pre>` and `<textarea>` are still emitted
+  byte-for-byte.
 
 ---
 
@@ -623,6 +665,13 @@ your template. All registered [MD plugins](#md-plugins) work inside it. See
 </section>
 ```
 
+Add the `prose` attribute — `<markdown prose>` — to wrap the output in
+`<div class="prose">`, so it picks up the long-form typography of
+[`@kirigami/canva`'s `styles/prose`](https://www.npmjs.com/package/@kirigami/canva)
+with no extra markup. Any `class` / `id` on the tag lands on that wrapper
+(`<markdown prose class="lede" id="intro">` → `<div class="prose lede" id="intro">`).
+A bare `<markdown>` emits just the converted HTML, as before.
+
 #### `<img asset="…">`
 
 The HTML-side entry point of the image autogenerator — the exact same feature as

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kirigami/php-prepros",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "description": "PHP preprocessor for the Kirigami static site generator. Compile PHP page templates to clean, deployable HTML — with zero server dependency.",
   "keywords": [
     "kirigami",

package/src/libraries/fs.class.php

@@ -212,7 +212,7 @@ class FS
 			$line = preg_replace('#\s*\*/\s*$#', '', $line);
 			$line = preg_replace('#^[ \t]*\*[ \t]?#', '', $line, 1);
 
-			if (preg_match('/^[ \t]*@([A-Za-z0-9_]+)[ \t]*(.*)$/', $line, $m)) {
+			if (preg_match('/^@([A-Za-z0-9_]+)[ \t]*(.*)$/', $line, $m)) {
 				$current = trim($m[1]);
 				$info[$current] = trim($m[2]);
 			} elseif (trim($line) === '') {

package/src/libraries/html.class.php

@@ -27,6 +27,10 @@ class HTML
         'span', 'strong', 'sub', 'sup', 'textarea', 'time', 'tt', 'u', 'var',
     ];
 
+    // The HTML namespace URI Lexbor assigns to plain HTML elements (foreign
+    // content — SVG, MathML — gets its own namespace URI instead).
+    private const HTML_NS = 'http://www.w3.org/1999/xhtml';
+
     private const RAW  = ['script', 'style'];
     // Whitespace-significant elements: their text content is emitted byte for
     // byte, never re-indented or collapsed (a code block must keep its line
@@ -71,13 +75,32 @@ class HTML
         };
     }
 
+    // Whether $node sits in the HTML namespace (as opposed to foreign content —
+    // SVG, MathML — whose element/attribute names carry meaningful case that
+    // Lexbor already restored while parsing).
+    private static function isHtmlNamespace(Dom\Node $node): bool
+    {
+        $ns = $node->namespaceURI ?? null;
+        return $ns === null || $ns === self::HTML_NS;
+    }
+
+    // The name to emit for $node: lowercase in the HTML namespace, verbatim
+    // (parser-adjusted) case in foreign content — e.g. `viewBox`, not `viewbox`.
+    private static function tagName(Dom\Node $node): string
+    {
+        return static::isHtmlNamespace($node) ? strtolower($node->nodeName) : $node->nodeName;
+    }
+
     private static function renderElement(Dom\Node $node, int $depth): string
     {
-        $tag    = strtolower($node->nodeName);
+        // VOID/RAW/VERBATIM/INLINE are HTML-only concepts — always look them up
+        // by the lowercase name, independent of the case emitted for $tag.
+        $lookup = strtolower($node->nodeName);
+        $tag    = static::tagName($node);
         $pad    = str_repeat(' ', $depth * self::INDENT);
         $attrs  = static::renderAttrs($node);
-        $isVoid = in_array($tag, self::VOID, true);
-        $isRaw  = in_array($tag, self::RAW,  true);
+        $isVoid = in_array($lookup, self::VOID, true);
+        $isRaw  = in_array($lookup, self::RAW,  true);
 
         if ($isVoid) {
             return "{$pad}<{$tag}{$attrs}>\n";
@@ -114,7 +137,7 @@ class HTML
         // Whitespace-significant: emit the inner HTML exactly as parsed, so a
         // bare <pre>/<textarea> keeps its line breaks and indentation. Only the
         // opening tag is padded to the current depth.
-        if (in_array($tag, self::VERBATIM, true)) {
+        if (in_array($lookup, self::VERBATIM, true)) {
             /** @var DOMElement $node */
             $token = "\x01VERB" . count(self::$verbatim) . "\x01";
             self::$verbatim[$token] = $node->innerHTML;
@@ -191,9 +214,10 @@ class HTML
             if ($child->nodeType !== XML_ELEMENT_NODE) {
                 continue;
             }
-            $tag   = strtolower($child->nodeName);
-            $attrs = static::renderAttrs($child);
-            if (in_array($tag, self::VOID, true)) {
+            $tag    = static::tagName($child);
+            $lookup = strtolower($child->nodeName);
+            $attrs  = static::renderAttrs($child);
+            if (in_array($lookup, self::VOID, true)) {
                 $out .= "<{$tag}{$attrs}>";
             } else {
                 $out .= "<{$tag}{$attrs}>" . static::renderInline($child) . "</{$tag}>";
@@ -283,13 +307,16 @@ class HTML
     private static function renderAttrs(Dom\Node $node): string
     {
         $out = '';
-        /** @var DOMElement $node */
+        /** @var DOMElement|DOM\Node $node */
         if (!$node->hasAttributes()) {
             return $out;
         }
+        $isHtml = static::isHtmlNamespace($node);
         foreach ($node->attributes as $attr) {
-            $name = strtolower(trim((string) $attr->name));
-            if (in_array($name, self::BOOLEAN_ATTRS, true)) {
+            $raw    = trim((string) $attr->name);
+            $lookup = strtolower($raw);
+            $name   = $isHtml ? $lookup : $raw;
+            if (in_array($lookup, self::BOOLEAN_ATTRS, true)) {
                 $out .= ' ' . $name;
             } else {
                 $out .= ' ' . $name . '="' . htmlspecialchars((string) $attr->value, ENT_QUOTES | ENT_HTML5, 'UTF-8') . '"';

package/src/libraries/md.class.php

@@ -807,11 +807,11 @@ class MD {
                 $label   = htmlspecialchars($matches[2], ENT_QUOTES, 'UTF-8');
                 $content = preg_replace('/^>\s?\[!(?:NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\n?/m', '', $matches[1]);
                 $content = preg_replace('/^>[ \t]?/m', '', $content);
-                $content = htmlspecialchars(trim($content), ENT_QUOTES, 'UTF-8');
+                $content = self::toHtml(trim($content));
                 $placeholder = "\x02BQ" . count($blockquotes) . "\x03";
                 $blockquotes[$placeholder] = "<div class=\"markdown-alert markdown-alert-{$type}\">"
                     . "<p class=\"markdown-alert-title\">{$label}</p>"
-                    . "<p>{$content}</p></div>";
+                    . "{$content}</div>";
                 // The trailing \n consumed by the regex is re-injected after
                 // the placeholder so the following blank line doesn't merge
                 // with the placeholder's line (which would break, for example,

package/src/libraries/md.plugins.php

@@ -89,4 +89,21 @@ MD::registerPlugin('callout', function (array $args, string $body): string {
 
     $titleHtml = $title ? "<strong>{$title}</strong><br>" : '';
     return "<div class=\"callout callout-{$type}\">{$titleHtml}{$content}</div>";
+});
+
+// --- Image asset (inline) — same pipeline as <img asset>, via IMG::asset() ---
+// {% img-asset photo.jpg %}
+// {% img-asset photo.jpg 800 %}
+// {% img-asset photo.jpg 800 600 %}
+// {% img-asset photo.jpg 800 600 cover %}
+MD::registerPlugin('img-asset', function (array $args, string $body): string {
+    $path = trim($args[0] ?? '');
+    if ($path === '') return '<!-- img-asset: missing path -->';
+
+    $width  = isset($args[1]) ? (int) $args[1] : 0;
+    $height = isset($args[2]) ? (int) $args[2] : 0;
+    $cover  = isset($args[3]) && strtolower($args[3]) === 'cover';
+
+    $src = IMG::asset($path, $width, $height, $cover, PREPROS::$file);
+    return '<img src="' . htmlspecialchars($src, ENT_QUOTES, 'UTF-8') . '" alt="">';
 });

package/src/libraries/prepros.class.php

@@ -161,14 +161,16 @@ final class PREPROS
         $scripts = [];
 
         // Undo the <pre><code> indentation HTML::format() added, at parse time
-        // (before first paint), for blocks a build-time highlighter didn't
-        // already flatten (those carry child <span>s).
+        // (before first paint). Works on innerHTML line by line so it also
+        // flattens blocks a build-time highlighter has wrapped in <span>s
+        // (@kirigami/plugin-highlight re-indents its output to match the
+        // formatter); only the shared leading run is removed, relative
+        // indentation is kept.
         if (!empty(self::$config->format)) {
             $scripts[] = '<script>document.querySelectorAll("pre>code").forEach(function(c){'
-                . 'if(c.children.length)return;'
-                . 'var L=c.textContent.replace(/^\n+/,"").replace(/\s+$/,"").split("\n"),n=1/0;'
-                . 'L.forEach(function(l){if(l.trim())n=Math.min(n,l.match(/^\s*/)[0].length)});'
-                . 'if(n&&n<1/0)c.textContent=L.map(function(l){return l.slice(n)}).join("\n")});</script>';
+                . 'var L=c.innerHTML.replace(/^\n+/,"").replace(/\n[^\S\n]*$/,"").split("\n"),n=1/0;'
+                . 'L.forEach(function(l){if(l.trim())n=Math.min(n,l.match(/^[ \t]*/)[0].length)});'
+                . 'if(n&&n<1/0)c.innerHTML=L.map(function(l){return l.slice(n)}).join("\n")});</script>';
         }
         foreach ((array) (self::$config->tasks ?? []) as $task) {
             $task = (array) $task;

package/src/libraries/prepros.plugins.php

@@ -2,8 +2,17 @@
 
 
 PREPROS::registerTag('markdown', function ($tag, $attrs, $body) {
-	$body = STR::trimIndent($body);
-    return MD::toHtml($body);
+	$html = MD::toHtml(STR::trimIndent($body));
+
+	// `<markdown prose>` wraps the output in the canva `.prose` container so
+	// long-form Markdown picks up the typographic styles with no extra markup.
+	// Opt-in (a bare `<markdown>` is unchanged); extra classes / id on the tag
+	// land on the wrapper: `<markdown prose class="lede" id="intro">`.
+	if (empty($attrs['prose'])) return $html;
+
+	$class = trim('prose ' . (is_string($attrs['class'] ?? null) ? $attrs['class'] : ''));
+	$id = is_string($attrs['id'] ?? null) ? ' id="' . htmlspecialchars($attrs['id'], ENT_QUOTES) . '"' : '';
+	return '<div class="' . htmlspecialchars($class, ENT_QUOTES) . '"' . $id . ">\n{$html}\n</div>";
 });