@jrpool/kilotest 60.1.6 → 60.1.8

package/lhm.plugin.json

@@ -4423,5 +4423,5 @@
       }
     }
   ],
-  "version": "60.1.6"
+  "version": "60.1.8"
 }

package/openapi-3.0.yaml

@@ -2,7 +2,7 @@ openapi: 3.0.3
 info:
   title: Kilotest API
   description: 'Kilotest is an ensemble testing and reporting service for front-end web quality. It uses an ensemble of 12 rule engines to test web pages for front-end quality (accessibility, usability, and web standards, including HTML, CSS, ARIA, and WCAG). Kilotest acts as a web server for human users, an MCP server for AI platforms, and an API for programmatic access. With this API you can request that a page be tested or retested, discover available reports, incrementally retrieve facts from a report: from what reports are available, to what issues were reported in one report, to what elements violated one issue, to what diagnoses rule engines gave for one violation.'
-  version: 60.1.6
+  version: 60.1.8
   license:
     name: MIT
     url: https://github.com/jrpool/kilotest/blob/main/LICENSE

package/openapi.yaml

@@ -2,7 +2,7 @@ openapi: 3.1.0
 info:
   title: Kilotest API
   description: 'Kilotest is an ensemble testing and reporting service for front-end web quality. It uses an ensemble of 12 rule engines to test web pages for front-end quality (accessibility, usability, and web standards, including HTML, CSS, ARIA, and WCAG). Kilotest acts as a web server for human users, an MCP server for AI platforms, and an API for programmatic access. With this API you can request that a page be tested or retested, discover available reports, incrementally retrieve facts from a report: from what reports are available, to what issues were reported in one report, to what elements violated one issue, to what diagnoses rule engines gave for one violation.'
-  version: 60.1.6
+  version: 60.1.8
   license:
     name: MIT
     identifier: MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jrpool/kilotest",
-  "version": "60.1.6",
+  "version": "60.1.8",
   "description": "Ensemble testing for front-end web quality",
   "type": "module",
   "main": "index.ts",

package/server.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/jrpool/kilotest",
     "source": "github"
   },
-  "version": "60.1.6",
+  "version": "60.1.8",
   "remotes": [
     {
       "type": "streamable-http",

package/style.css

@@ -244,6 +244,10 @@ body.styled h2 {
   color: var(--ink);
   font-size: 1.4rem;
 }
+body.styled h3 {
+  color: var(--ink);
+  font-size: 1.2rem;
+}
 body.styled li, body.styled p {
   line-height: 1.6;
 }
@@ -257,12 +261,11 @@ body.styled header {
 body.styled .header-inner {
   max-width: 64rem;
   margin-inline: auto;
-  padding: 1.1rem 1.5rem;
-  display: flex;
-  align-items: baseline;
-  gap: 0.75rem;
+  padding: 0.75rem 1.5rem;
 }
 body.styled .brand {
+  display: block;
+  padding-block: 0.4rem;
   font-weight: 800;
   font-size: 1.25rem;
   letter-spacing: -0.02em;
@@ -282,6 +285,7 @@ body.styled .brand svg {
   vertical-align: -0.2em;
 }
 body.styled .brand-tag {
+  margin: 0;
   font-size: 0.85rem;
   color: var(--muted);
 }
@@ -318,13 +322,15 @@ body.styled .hero .lede {
   color: var(--muted);
 }
 body.styled details {
-  max-width: 52rem;
   margin: 0 0 1rem;
   padding: 0;
   background: var(--card);
   border: 1px solid var(--line);
   border-radius: 0.75rem;
 }
+body.styled .hero details {
+  max-width: 52rem;
+}
 body.styled summary {
   min-height: 44px;
   padding: 0.9rem 1.25rem;
@@ -342,10 +348,10 @@ body.styled details[open] summary {
 body.styled details > :not(summary) {
   padding-inline: 1.25rem;
 }
-body.styled details h2 {
+body.styled .hero details h2 {
   margin: 1.5rem 0 0.5rem;
 }
-body.styled details h3 {
+body.styled .hero details h3 {
   margin: 1.35rem 0 0.35rem;
   font-size: 1.08rem;
 }
@@ -436,3 +442,24 @@ body.styled ul.links li {
   margin-bottom: 0.4rem;
   break-inside: avoid;
 }
+body.styled .page h3 {
+  margin: 1.25rem 0 0.4rem;
+}
+body.styled .page blockquote {
+  margin: 0.75rem 0;
+  padding-left: 1rem;
+  border-left: 3px solid var(--line);
+  color: var(--muted);
+}
+body.styled .page ul.headed > li + li {
+  margin-top: 1.25rem;
+  padding-top: 1.25rem;
+  border-top: 1px solid var(--line);
+}
+body.styled .warn {
+  margin: 0 0 1rem;
+  padding: 0.6rem 0.9rem;
+  background: #fdf6e3;
+  border: 1px solid #e8d48b;
+  border-radius: 0.5rem;
+}

package/util.ts

@@ -376,14 +376,23 @@ export const getPlainText = (string: string): string => string
 .replace(/&/g, '+')
 .replace(/[<>"']/g, ' ');
 // Markup shared by populated templates, lazily read once from files.
-let sharedContent: {head: string, logo: string} | undefined;
+let sharedContent: {head: string, header: string, headerNL: string, logo: string} | undefined;
 // Returns the markup shared by populated templates.
-const getSharedContent = async (): Promise<{head: string, logo: string}> => {
+const getSharedContent = async (): Promise<{head: string, header: string, headerNL: string, logo: string}> => {
   // Trailing newlines are stripped so injection does not add blank lines.
-  sharedContent ??= {
-    head: (await fs.readFile(path.join(import.meta.dirname, 'web', 'head.partial'), 'utf8')).trimEnd(),
-    logo: (await fs.readFile(path.join(import.meta.dirname, 'logo.svg'), 'utf8')).trimEnd()
-  };
+  if (!sharedContent) {
+    const webDir = path.join(import.meta.dirname, 'web');
+    const logo = (await fs.readFile(path.join(import.meta.dirname, 'logo.svg'), 'utf8')).trimEnd();
+    const header = (await fs.readFile(path.join(webDir, 'header.partial'), 'utf8')).trimEnd()
+    .replace(/__logo__/g, () => logo);
+    sharedContent = {
+      head: (await fs.readFile(path.join(webDir, 'head.partial'), 'utf8')).trimEnd(),
+      header,
+      // The home page gets the same header with its brand as text, not a link to itself.
+      headerNL: header.replace('<a class="brand" href="/">', '<span class="brand">').replace('</a>', '</span>'),
+      logo
+    };
+  }
   return sharedContent;
 };
 // Populates an HTML template file with named values.
@@ -394,6 +403,8 @@ export const populateFile = async (filePath: string, query: Record<string, strin
   const shared = await getSharedContent();
   answerPage = answerPage
   .replace(/__head__/g, () => shared.head)
+  .replace(/__headerNL__/g, () => shared.headerNL)
+  .replace(/__header__/g, () => shared.header)
   .replace(/__logo__/g, () => shared.logo);
   // Replace its placeholders.
   Object.keys(query).forEach(param => {

package/web/header.partial

@@ -0,0 +1,6 @@
+<header>
+      <div class="header-inner">
+        <a class="brand" href="/">__logo__<span class="brand-name">Kilotest</span></a>
+        <p class="brand-tag">Ensemble front-end testing</p>
+      </div>
+    </header>

package/web/home/index.html

@@ -52,12 +52,7 @@
     </script>
   </head>
   <body class="styled">
-    <header>
-      <div class="header-inner">
-        <span class="brand">__logo__Kilotest</span>
-        <span class="brand-tag">Ensemble front-end testing</span>
-      </div>
-    </header>
+    __headerNL__
     <main>
       <div class="hero">
         <p class="eyebrow">12 rule engines · ~1,300 tests</p>

package/web/listIssues/index.html

@@ -5,9 +5,10 @@
     <meta name="keywords" content="report,accessibility,a11y">
     <title>Issues reported for __target__ | Kilotest</title>
   </head>
-  <body>
-    <main>
-      <h1><a href="/">Kilotest</a>: Issues reported for __target__</h1>
+  <body class="styled">
+    __header__
+    <main class="page">
+      <h1>Issues reported for __target__</h1>
       __oldWarn__
       <h2>About the tests</h2>
 __pageFacts__

package/web/listIssues/index.ts

@@ -210,7 +210,7 @@ const populateQuery = async (reportID: string, query: Record<string, any>) => {
   // Add a warning if the report is not the latest about the page.
   query.oldWarn = history.isLatest
   ? ''
-  : '<p><strong>Warning: This report is not the latest about the page.</strong> See history below.</p>';
+  : '<p class="warn"><strong>Warning: This report is not the latest about the page.</strong> See history below.</p>';
   // Add the page-facts list to the query.
   query.pageFacts = getPageFactsLines(pageInfo, issuesData, margin).join('\n');
   // Add the history of reports about the page to the query.
@@ -243,17 +243,13 @@ const populateQuery = async (reportID: string, query: Record<string, any>) => {
         detailsLines.push(
           ...getIssueFactsLines(report, issueID, `${margin}    `, 'pseudoTopLevel')
         );
-        // Add the start of a link list to the lines.
-        detailsLines.push(`${margin}    <ul class="nav">`);
+        // Add a violations link to the lines.
         const whereQuestionString = 'Where was the issue found?';
         const labelString = `The ${description} page exhibits the ${summary} issue. Where was the issue found?`;
         const href = `href="/listViolators.html/${issueID}/${reportID}"`;
         const label = `aria-label="${labelString}"`;
         const whereLink = `<a ${href} ${label}>${whereQuestionString}</a>`;
-        // Add a violations link to the lines.
-        detailsLines.push(`${margin}      <li>${whereLink}</li>`);
-        // Add the end of the link list to the lines.
-        detailsLines.push(`${margin}    </ul>`);
+        detailsLines.push(`${margin}    <p class="links">${whereLink}</p>`);
         // Add the end of the list item to the lines.
         detailsLines.push(`${margin}  </li>`);
       });

package/web/listPages/index.html

@@ -6,12 +6,7 @@
     <title>Pages tested | Kilotest</title>
   </head>
   <body class="styled">
-    <header>
-      <div class="header-inner">
-        <a class="brand" href="/">__logo__<span class="brand-name">Kilotest</span></a>
-        <span class="brand-tag">Ensemble front-end testing</span>
-      </div>
-    </header>
+    __header__
     <main class="page">
       <h1>Pages tested</h1>
 __jobSections__