@nurkamol/seo-audit 1.37.0 → 1.38.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nurkamol/seo-audit",
-  "version": "1.37.0",
+  "version": "1.38.0",
   "description": "Crawl a site's sitemap and check every page for SEO, metadata and structured-data problems that single-page graders miss. Zero dependencies.",
   "type": "module",
   "bin": {

package/src/kept.mjs

@@ -38,3 +38,98 @@ export function keptSince(rows, at) {
     return Number.isNaN(when) ? true : when >= at;
   });
 }
+
+/** The columns a kept-runs list can be ordered by.
+ *
+ *  Named here rather than in the page so the sentence in a header link, the
+ *  value in a URL and the comparison below cannot drift apart. `descFirst` is
+ *  which direction a column should take when it is first clicked: dates and
+ *  numbers are most useful largest-first, a site name is not.
+ */
+export const SORTS = {
+  site: { label: 'Site', descFirst: false, of: (r) => String(r?.host ?? r?.site ?? '').toLowerCase() },
+  when: { label: 'When', descFirst: true, of: (r) => String(r?.finishedAt ?? '') },
+  pages: { label: 'Pages', descFirst: true, of: (r) => Number(r?.pages ?? 0) },
+  causes: { label: 'To change', descFirst: true, of: (r) => Number(r?.causes ?? 0) },
+  score: { label: 'Score', descFirst: true, of: (r) => (typeof r?.score === 'number' ? r.score : -1) },
+};
+
+/** Kept runs in the order asked for. Unknown columns fall back to the newest
+ *  first, which is the order the library already hands them over in.
+ *
+ *  A copy, never in place: the caller's array is the store's own list, and
+ *  sorting it underneath them would reorder a list somebody else is holding.
+ *  Stable on ties by date then id, so two runs of one site at the same minute
+ *  do not swap places between one request and the next. */
+export function sortKept(rows, sort = 'when', dir = 'desc') {
+  const column = SORTS[sort] ?? SORTS.when;
+  const way = dir === 'asc' ? 1 : -1;
+  return [...(rows ?? [])].sort((a, b) => {
+    const left = column.of(a);
+    const right = column.of(b);
+    if (left < right) return -1 * way;
+    if (left > right) return 1 * way;
+    return (
+      String(b?.finishedAt ?? '').localeCompare(String(a?.finishedAt ?? '')) ||
+      String(a?.id ?? '').localeCompare(String(b?.id ?? ''))
+    );
+  });
+}
+
+/** What a `sort`/`dir` pair means, with anything unrecognised refused rather
+ *  than carried. These arrive from a URL and from a cookie, and a cookie is
+ *  just a URL somebody kept — neither may name a column that does not exist. */
+export function sortAsked(sort, dir) {
+  const column = Object.hasOwn(SORTS, sort ?? '') ? sort : 'when';
+  const way = dir === 'asc' || dir === 'desc' ? dir : SORTS[column].descFirst ? 'desc' : 'asc';
+  return { sort: column, dir: way };
+}
+
+/** The name the remembered view is kept under. */
+const VIEW_COOKIE = 'seo_audit_view';
+
+/** What this browser last asked the kept-runs list to show.
+ *
+ *  A cookie rather than `localStorage` so the page needs no JavaScript to
+ *  honour it — the filter and the sort are links and a form, and a preference
+ *  that only works once a script has run would be the one control on the page
+ *  that does not.
+ *
+ *  Everything is put back through the same validators the query string goes
+ *  through. A cookie is a URL somebody kept, and it may have been edited since:
+ *  it names a column or it is ignored. */
+export function rememberedView(cookieHeader) {
+  const raw = String(cookieHeader ?? '')
+    .split(';')
+    .map((part) => part.trim())
+    .find((part) => part.startsWith(`${VIEW_COOKIE}=`));
+  if (!raw) return {};
+  let asked;
+  try {
+    asked = new URLSearchParams(decodeURIComponent(raw.slice(VIEW_COOKIE.length + 1)));
+  } catch {
+    return {};
+  }
+  const since = asked.get('since') ?? '';
+  const { sort, dir } = sortAsked(asked.get('sort'), asked.get('dir'));
+  return {
+    // A date that no longer parses is dropped rather than shown back as a
+    // filter nobody can see the effect of.
+    ...(since && !sinceWhen(since).error ? { since } : {}),
+    sort,
+    dir,
+  };
+}
+
+/** That view, as a `Set-Cookie` value.
+ *
+ *  `SameSite=Lax` and no `Secure`, because the server this is served from is
+ *  usually `http://127.0.0.1`. It holds a date and a column name — nothing
+ *  worth protecting, and nothing worth sending anywhere else. */
+export function rememberView({ since = '', sort = 'when', dir = 'desc' } = {}) {
+  const value = new URLSearchParams();
+  if (since) value.set('since', since);
+  value.set('sort', sort);
+  value.set('dir', dir);
+  return `${VIEW_COOKIE}=${encodeURIComponent(value.toString())}; Path=/; Max-Age=31536000; SameSite=Lax`;
+}

package/src/report.mjs

@@ -920,7 +920,17 @@ export function reportParts(findings, meta, { backHref, backLabel = 'New audit',
     padding: 0 1.25rem 6rem;
     background: var(--bg);
     color: var(--fg);
-    font: 400 15px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    /* The interface face each system actually uses, in the order a system is
+       likely to have one. Windows 11's UI face is Segoe UI Variable Text, not
+       Segoe UI, and desktop Linux has Cantarell or Noto long before it has
+       Roboto, which is an Android face. system-ui catches what the list does
+       not name. This is most of what makes a window feel like it belongs to
+       the machine it is on — more than any border radius does. */
+    font: 400 15px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
+      "Segoe UI", system-ui, Cantarell, "Noto Sans", Ubuntu, Roboto, Helvetica, Arial, sans-serif;
+    /* A variable face has real weights; letting the renderer fake them is the
+       blurry bold that reads as "web page in a window". */
+    font-synthesis: none;
     -webkit-font-smoothing: antialiased;
   }
   main { max-width: 62rem; margin-inline: auto; }