@cube-drone/marquee-html-renderer 0.3.0 → 0.4.0

package/dist/render.js

@@ -323,6 +323,11 @@ function directive(name, attrs, nodes, ctx) {
             // only inside the other two, which is exactly when you want it).
             // Physical directions, deliberately: predictable beats logical.
             return `<div class="mq-${name}">${inner}</div>`;
+        case "spoiler":
+            // The block form of the [spoiler] span: hide a whole region (an image,
+            // a paragraph) behind the same blur, same reveal-on-hover. Reuses the
+            // mq-spoiler class - the CSS is element-agnostic.
+            return `<div class="mq-spoiler mq-spoiler-block" tabindex="0">${inner}</div>`;
     }
     // Unknown vocabulary: a container renders its children with an affordance
     // that something wrapped them; a leaf renders the inert placeholder.
@@ -397,6 +402,13 @@ function span(name, attrs, nodes, ctx) {
             return `<small>${inner}</small>`;
         case "big":
             return `<big>${inner}</big>`; // obsolete and eternal, like <font>
+        case "spoiler":
+            // The content is present and never eaten - just blurred, revealed on
+            // hover/focus (the static renderer has no JS to gate a click). An
+            // interactive renderer turns the same class into click-to-reveal.
+            // Degrades, like everything, to readable content: no stylesheet means
+            // a visible spoiler, which beats a hidden one.
+            return `<span class="mq-spoiler" tabindex="0">${inner}</span>`;
         case "size": {
             const value = attrs["size"];
             if (value !== undefined && /^[1-7]$/.test(value)) {

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@cube-drone/marquee-html-renderer",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Reference static HTML renderer for the Marquee markup language",
   "license": "MPL-2.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cube-drone/marqueemarkup.git",
-    "directory": "ts/html_renderer"
+    "directory": "ts/marquee-html-renderer"
   },
   "type": "module",
   "engines": {
@@ -35,12 +35,12 @@
     "prepack": "npm run build"
   },
   "dependencies": {
-    "@cube-drone/marquee-parser": "^0.3.0"
+    "@cube-drone/marquee-parser": "^0.4.0"
   },
   "devDependencies": {
-    "@cube-drone/marquee-css": "^0.3.0",
-    "@cube-drone/marquee-fonts": "^0.3.0",
-    "@cube-drone/marquee-turbolink": "^0.3.0",
+    "@cube-drone/marquee-css": "^0.4.0",
+    "@cube-drone/marquee-fonts": "^0.4.0",
+    "@cube-drone/marquee-turbolink": "^0.4.0",
     "@types/node": "^24.0.0",
     "typescript": "^5.9.0"
   }

package/src/render.ts

@@ -357,6 +357,11 @@ function directive(name: string, attrs: Attrs, nodes: Node[], ctx: Ctx): string
       // only inside the other two, which is exactly when you want it).
       // Physical directions, deliberately: predictable beats logical.
       return `<div class="mq-${name}">${inner}</div>`;
+    case "spoiler":
+      // The block form of the [spoiler] span: hide a whole region (an image,
+      // a paragraph) behind the same blur, same reveal-on-hover. Reuses the
+      // mq-spoiler class - the CSS is element-agnostic.
+      return `<div class="mq-spoiler mq-spoiler-block" tabindex="0">${inner}</div>`;
   }
   // Unknown vocabulary: a container renders its children with an affordance
   // that something wrapped them; a leaf renders the inert placeholder.
@@ -433,6 +438,13 @@ function span(name: string, attrs: Attrs, nodes: Node[], ctx: Ctx): string {
       return `<small>${inner}</small>`;
     case "big":
       return `<big>${inner}</big>`; // obsolete and eternal, like <font>
+    case "spoiler":
+      // The content is present and never eaten - just blurred, revealed on
+      // hover/focus (the static renderer has no JS to gate a click). An
+      // interactive renderer turns the same class into click-to-reveal.
+      // Degrades, like everything, to readable content: no stylesheet means
+      // a visible spoiler, which beats a hidden one.
+      return `<span class="mq-spoiler" tabindex="0">${inner}</span>`;
     case "size": {
       const value = attrs["size"];
       if (value !== undefined && /^[1-7]$/.test(value)) {