c3b-lint 0.0.12 → 0.0.14

package/README.md

@@ -19,8 +19,8 @@ markdown that a tool can check, with one command and one config to install. It r
    `og:image`, `twitter:card`, one SVG favicon; a `noindex` page is excused the canonical and social tags), no external
    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,
+   otherwise, landing on `<main id="main">` — or on the id `<main>` already has), one `<h1>`, `alt` on every image, no inline handlers, no `<style>` or `style=""`
+   (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) {
@@ -138,11 +151,14 @@ function checkPage(report, file, source) {
     const skipLink = first && first.tagName === 'a' && attr(first, 'id') === 'skip-link';
     const main = all.find((el) => el.name === 'main');
     if (hasChrome) {
-        if (!skipLink || attr(first, 'href') !== '#main') {
-            report.error(file, 'a page with a header or nav starts <body> with <a id="skip-link" href="#main">');
+        // The skip link lands on <main> by its id: "main" by default, or the id <main> already has
+        // (a Barba site scopes each page's CSS by it)
+        const target = main && attr(main, 'id');
+        if (!target) {
+            report.error(file, '<main> carries an id for the skip link to land on (id="main", or the one it already has)');
         }
-        if (!main || attr(main, 'id') !== 'main') {
-            report.error(file, '<main> carries id="main" for the skip link');
+        if (!skipLink || attr(first, 'href') !== `#${ target || 'main' }`) {
+            report.error(file, `a page with a header or nav starts <body> with <a id="skip-link" href="#${ target || 'main' }">`);
         }
     } else if (skipLink) {
         report.error(at(first), 'a page with no header or nav has no skip link');
@@ -154,6 +170,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 +182,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.14",
   "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",