@rettangoli/vt 1.0.2 → 1.0.3

package/README.md

@@ -142,15 +142,15 @@ Screenshot naming:
 A pre-built Docker image with `rtgl` and Playwright browsers is available:
 
 ```bash
-docker pull han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.0-rc27
+docker pull han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.10
 ```
 
 Run commands against a local project:
 
 ```bash
-docker run --rm -v "$(pwd):/workspace" han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.0-rc27 rtgl vt screenshot
-docker run --rm -v "$(pwd):/workspace" han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.0-rc27 rtgl vt report
-docker run --rm -v "$(pwd):/workspace" han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.0-rc27 rtgl vt accept
+docker run --rm -v "$(pwd):/workspace" han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.10 rtgl vt screenshot
+docker run --rm -v "$(pwd):/workspace" han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.10 rtgl vt report
+docker run --rm -v "$(pwd):/workspace" han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.10 rtgl vt accept
 ```
 
 Note:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/vt",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Rettangoli Visual Testing",
   "type": "module",
   "repository": {

package/src/cli/templates/index.html

@@ -60,8 +60,8 @@
         {% for file in files %}
         <rtgl-view w="f">
           <a style="display: contents; text-decoration: none; color: inherit;"
-            href="#{{ file.frontMatter.title | slug }}">
-            <rtgl-text id="{{ file.frontMatter.title | slug }}" s="h3">{{ file.frontMatter.title | default: file.path
+            href="#{{ file.anchorId }}">
+            <rtgl-text id="{{ file.anchorId }}" s="h3">{{ file.frontMatter.title | default: file.path
               }}</rtgl-text>
           </a>
 

package/src/common.js

@@ -15,7 +15,7 @@ import path from "path";
 import { validateFiniteNumber, validateFrontMatter } from "./validation.js";
 import { createCaptureTasks } from "./capture/spec-loader.js";
 import { runCaptureScheduler } from "./capture/capture-scheduler.js";
-import { deriveSectionPageKey } from "./section-page-key.js";
+import { deriveAnchorId, deriveSectionPageKey } from "./section-page-key.js";
 
 const removeExtension = (filePath) => filePath.replace(/\.[^/.]+$/, "");
 
@@ -44,10 +44,9 @@ async function readYaml(filePath) {
   }
 }
 
-// Add custom filter to convert string to lowercase and replace spaces with hyphens
-engine.registerFilter("slug", (value) => {
-  if (typeof value !== "string") return "";
-  return value.toLowerCase().replace(/\s+/g, "-");
+// Add custom filter to derive slug-safe ids for URLs and anchors.
+engine.registerFilter("slug", (value, fallbackValue) => {
+  return deriveAnchorId(value, fallbackValue);
 });
 
 // Add custom filter to remove file extension
@@ -416,13 +415,18 @@ function generateOverview(data, templatePath, outputPath, configData) {
       try {
         renderedContent = engine.parseAndRenderSync(templateContent, {
           ...configData,
-          files: data.filter((file) => {
-            const filePath = path.normalize(file.path);
-            const sectionPath = path.normalize(section.files);
-            // Check if file is in the folder or any subfolder
-            const fileDir = path.dirname(filePath);
-            return fileDir === sectionPath || fileDir.startsWith(sectionPath + path.sep);
-          }),
+          files: data
+            .filter((file) => {
+              const filePath = path.normalize(file.path);
+              const sectionPath = path.normalize(section.files);
+              // Check if file is in the folder or any subfolder
+              const fileDir = path.dirname(filePath);
+              return fileDir === sectionPath || fileDir.startsWith(sectionPath + path.sep);
+            })
+            .map((file) => ({
+              ...file,
+              anchorId: deriveAnchorId(file.frontMatter?.title, removeExtension(file.path)),
+            })),
           currentSection: section,
           sidebarItems: encodeURIComponent(JSON.stringify(sidebarItems)),
         });

package/src/report/report-render.js

@@ -1,11 +1,11 @@
 import fs from "fs";
 import { Liquid } from "liquidjs";
+import { deriveAnchorId } from "../section-page-key.js";
 
 const engine = new Liquid();
 
-engine.registerFilter("slug", (value) => {
-  if (typeof value !== "string") return "";
-  return value.toLowerCase().replace(/\s+/g, "-");
+engine.registerFilter("slug", (value, fallbackValue) => {
+  return deriveAnchorId(value, fallbackValue);
 });
 
 export async function renderHtmlReport({ results, templatePath, outputPath }) {

package/src/section-page-key.js

@@ -5,10 +5,18 @@ function normalizeString(value) {
   return value.trim();
 }
 
-export function deriveSectionPageKey(sectionLike) {
-  return normalizeString(sectionLike?.title)
+export function derivePageKey(value) {
+  return normalizeString(value)
     .toLowerCase()
     .replace(/[^a-z0-9]+/g, "-")
     .replace(/-+/g, "-")
     .replace(/^-+|-+$/g, "");
 }
+
+export function deriveSectionPageKey(sectionLike) {
+  return derivePageKey(sectionLike?.title) || derivePageKey(sectionLike?.files);
+}
+
+export function deriveAnchorId(value, fallbackValue = "") {
+  return derivePageKey(value) || derivePageKey(fallbackValue);
+}

package/src/validation.js

@@ -136,7 +136,7 @@ function assertDerivableSectionPageKey(sectionLike, path) {
   const pageKey = deriveSectionPageKey(sectionLike);
   assert(
     pageKey.length > 0,
-    `"${path}" must contain at least one letter or number.`,
+    `"${path}" must produce a page key from title or files.`,
   );
 }
 
@@ -169,14 +169,14 @@ function validateSection(section, index) {
 
       assert(typeof item.title === "string" && item.title.trim().length > 0, `"${itemPath}.title" is required.`);
       assert(typeof item.files === "string" && item.files.trim().length > 0, `"${itemPath}.files" is required.`);
-      assertDerivableSectionPageKey(item, `${itemPath}.title`);
+      assertDerivableSectionPageKey(item, itemPath);
     });
     return;
   }
 
   validateOptionalString(section.files, `${sectionPath}.files`);
   assert(typeof section.files === "string" && section.files.trim().length > 0, `"${sectionPath}.files" is required.`);
-  assertDerivableSectionPageKey(section, `${sectionPath}.title`);
+  assertDerivableSectionPageKey(section, sectionPath);
 }
 
 function collectSectionPageKeys(vtConfig) {