c3b-lint 0.0.12 → 0.0.13

package/README.md

@@ -20,7 +20,7 @@ markdown that a tool can check, with one command and one config to install. It r
    stylesheets (webfonts are self-hosted), stylesheet order (`reset`, `tokens`, `main`, …, page file last),
    the skip-link rule (`<a id="skip-link" href="#main">` first in `<body>` when there is a header or nav, absent
    otherwise, `<main id="main">`), one `<h1>`, `alt` on every image, no inline handlers, no `<style>` or `style=""`
-   (except a JS-driven custom property), relative paths only, kebab-case ids and classes, no duplicate ids,
+   (except a JS-driven custom property), relative paths only (a Barba site's links outside its container — header, menu — stay root-relative), kebab-case ids and classes, no duplicate ids,
    `integrity` on CDN scripts.
 5. **Project structure**: singular directory names, lowercase kebab-case asset names (and no camera exports), and,
    when `src/` holds pages, CSS only in `src/style/` + `style/page/` + `style/animation/`, JS only in `src/script/`

package/check/html.js

@@ -26,6 +26,19 @@ const toPosix = (p) => p.split(sep).join('/');
 const attr = (el, name) => el.attrs?.find((a) => a.name === name)?.value;
 const line = (el) => el.sourceCodeLocation?.startLine ?? 0;
 const isElement = (node) => Boolean(node.tagName);
+const isBarbaContainer = (node) => isElement(node) && attr(node, 'data-barba') === 'container';
+
+// Inside Barba's page container: replaced on every navigation, so its links resolve against the URL
+// of the page they came with
+function inBarbaContainer(el) {
+    for (let node = el.parentNode; node; node = node.parentNode) {
+        if (isBarbaContainer(node)) {
+            return true;
+        }
+    }
+
+    return false;
+}
 
 // Every element in document order
 function* elements(node) {
@@ -154,6 +167,10 @@ function checkPage(report, file, source) {
         report.error(h1s[1] ? at(h1s[1]) : file, `one <h1> per page (found ${ h1s.length })`);
     }
     const ids = new Map();
+    // A Barba site keeps everything outside its container (header, menu) for the whole visit while the URL
+    // changes under it, so a relative link there would resolve against whichever page is showing: those
+    // links stay root-relative
+    const barba = all.some((el) => attr(el, 'data-barba') === 'wrapper');
     for (const el of all) {
         for (const { name, value } of el.attrs ?? []) {
             if (/^on[a-z]+$/.test(name)) {
@@ -162,7 +179,8 @@ function checkPage(report, file, source) {
             if (name === 'style' && !/^\s*(--[a-z0-9-]+\s*:[^;]+;?\s*)+$/.test(value)) {
                 report.error(at(el), 'no style="" attributes, except to set a JS-driven custom property');
             }
-            if ((name === 'href' || name === 'src') && /^\/(?!\/)/.test(value)) {
+            const persistentLink = barba && el.name === 'a' && name === 'href' && !inBarbaContainer(el);
+            if ((name === 'href' || name === 'src') && /^\/(?!\/)/.test(value) && !persistentLink) {
                 report.error(at(el), `root-relative path ${ value } — use a relative path`);
             }
             if (name === 'id') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "c3b-lint",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "Lints a co:lab project against the rules a tool can check: ESLint, Stylelint, the 500-line limit and the shared .editorconfig; --init writes the config files.",
   "license": "GPL-3.0",
   "type": "module",