@simmalugnt-se/payload-content-health 0.5.1 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## 0.6.0
+
+- The dashboard widget is a summary: a ring for the share in order, and one row per category (SEO,
+  Structure, Translations, Accessibility) with a bar and "N to fix". It no longer lists documents;
+  each row opens the work list on its category, and "Open details" opens the list.
+- The work list shows one category at a time as tabs, with the number of findings on each and the
+  category with most to fix open first. Under the tabs, every check has its own section with the
+  documents that need work, and its own "Fix N with the assistant" next to the heading. The check
+  filter and "Clear filters" are gone; collection and locale remain as selects where there is more
+  than one. `?category=` is the new address parameter; `?check=` still opens that check's category.
+- Red and amber mark what needs work, next to the blue accent. Colors are in `styles/tokens.css`.
+- `CATEGORY_IDS`, `categoryOf` and `categoryStats` are exported.
+
+## 0.5.2
+
+- Work-list filters use Payload's ReactSelect with its standard menu and focus styling.
+  Filters, Clear filters and individual and batch assistant buttons share one control height.
+  The filter row fills the available width, with Clear filters aligned to the batch action below.
+- The workspace dev app now includes content health alongside the editor assistant and visual
+  editing, with alt text, SEO, heading, thin content and translation checks on its seed data.
+- Source builds typecheck with the host app's generated collection and locale types.
+
 ## 0.5.1
 
 - The assistant's button now shows in the header of the work list. The view did not pass Admin's

package/README.md

@@ -112,14 +112,22 @@ The plugin registers the widget `content-health`. When the project sets no
 widget. Payload keeps each editor's own layout as a preference once they edit the dashboard; they add
 the widget from the dashboard's edit mode, and can limit it to some checks in its settings.
 
-Pass `addToDefaultLayout: false` to only register the widget. When a check has more documents than
-fit in its tile, "N more" opens the work list filtered on that check.
+The widget is a summary: the share of checked values in order, and one row per category with a bar
+and how much there is to fix. Categories group the checks: SEO (meta titles and descriptions, their
+lengths, share images), Structure (headings, page length), Translations and Accessibility (alt
+texts). A category none of the configured checks belong to is left out. Each row opens the work list
+on that category, and "Open details" opens the list itself.
+
+Pass `addToDefaultLayout: false` to only register the widget.
 
 ## Work list
 
-`/admin/content-health` (linked at the top of the nav) lists every finding, filterable by check,
-collection and locale. The filters are kept in the address, e.g.
-`/admin/content-health?check=seo.title-missing&locale=sv`. The view scans once per visit.
+`/admin/content-health` (linked at the top of the nav) shows one category at a time as tabs, each
+with its number of findings, and under them one section per check with the documents that need work.
+The category with most to fix opens first. Where the project has several collections or locales, two
+selects narrow the list. The tab and the selects are kept in the address, e.g.
+`/admin/content-health?category=seo&locale=sv`; an older link with `?check=seo.title-missing` opens
+that check's category. The view scans once per visit.
 
 Each row opens the document in the finding's locale with the field brought into view: tabs and
 collapsed rows are opened, and the field is scrolled to, focused and highlighted. A finding in a row
@@ -147,10 +155,10 @@ Both parameters are removed from the address once read. `editURL(adminRoute, fin
 
 ### Many documents at once
 
-Where the assistant allows `content.update` (0.11.0 or later), a list filtered to missing alt texts,
-meta titles or descriptions (missing or the wrong length) or missing translations offers "Fix N with
-the assistant" above the rows. It opens the assistant's panel beside the list with up to 20 of the
-documents shown and one prompt for all of them; the assistant proposes a change per document, and
+Where the assistant allows `content.update` (0.11.0 or later), the sections for missing alt texts,
+meta titles or descriptions (missing or the wrong length) and missing translations offer "Fix N with
+the assistant" next to their heading. It opens the assistant's panel beside the list with up to 20 of
+the documents in the section and one prompt for all of them; the assistant proposes a change per document, and
 the editor saves the ones they want. Saved documents drop out of the list. `batchURL(adminRoute,
 filters, targets, prompt)` and `batchTarget(finding)` build the link.
 

package/dist/categories.d.ts

@@ -0,0 +1,21 @@
+import type { CheckStats } from "./group.ts";
+import type { CheckId } from "./types.ts";
+/** What an editor sorts the checks by: the order tabs and rows come in. */
+export declare const CATEGORY_IDS: readonly ["seo", "structure", "translations", "accessibility"];
+export type CategoryId = (typeof CATEGORY_IDS)[number];
+export declare const CATEGORY_CHECKS: Record<CategoryId, readonly CheckId[]>;
+export declare function categoryOf(check: CheckId): CategoryId;
+export type CategoryStats = {
+    category: CategoryId;
+    /** Field values the category's checks applied to. */
+    checked: number;
+    /** Values with a finding. */
+    failing: number;
+};
+/** Per category with at least one check that ran, in `CATEGORY_IDS` order. */
+export declare function categoryStats(stats: CheckStats[]): CategoryStats[];
+/** How a category reads at a glance: nothing to measure, all in order, mostly in order, or not. */
+export type Tone = "none" | "ok" | "warn" | "bad";
+export declare function categoryTone({ checked, failing, }: Pick<CategoryStats, "checked" | "failing">): Tone;
+/** The category to open first: the one with most to fix, else the first. */
+export declare function defaultCategory(stats: CategoryStats[]): CategoryId | undefined;

package/dist/categories.js

@@ -0,0 +1,43 @@
+/** What an editor sorts the checks by: the order tabs and rows come in. */
+export const CATEGORY_IDS = ["seo", "structure", "translations", "accessibility"];
+export const CATEGORY_CHECKS = {
+    seo: [
+        "seo.title-missing",
+        "seo.title-length",
+        "seo.description-missing",
+        "seo.description-length",
+        "seo.image-missing",
+    ],
+    structure: ["content.h1-missing", "content.h1-multiple", "content.heading-skip", "content.thin"],
+    translations: ["content.untranslated"],
+    accessibility: ["media.alt-missing"],
+};
+export function categoryOf(check) {
+    return CATEGORY_IDS.find((id) => CATEGORY_CHECKS[id].includes(check));
+}
+/** Per category with at least one check that ran, in `CATEGORY_IDS` order. */
+export function categoryStats(stats) {
+    return CATEGORY_IDS.flatMap((category) => {
+        const own = stats.filter((stat) => categoryOf(stat.check) === category);
+        return own.length
+            ? [
+                {
+                    category,
+                    checked: own.reduce((sum, stat) => sum + stat.checked, 0),
+                    failing: own.reduce((sum, stat) => sum + stat.failing, 0),
+                },
+            ]
+            : [];
+    });
+}
+export function categoryTone({ checked, failing, }) {
+    if (!checked)
+        return failing ? "bad" : "none";
+    if (!failing)
+        return "ok";
+    return (checked - failing) / checked >= 0.5 ? "warn" : "bad";
+}
+/** The category to open first: the one with most to fix, else the first. */
+export function defaultCategory(stats) {
+    return stats.reduce((best, stat) => (!best || stat.failing > best.failing ? stat : best), undefined)?.category;
+}

package/dist/copy.d.ts

@@ -1,13 +1,10 @@
 /** Everything the widget and the work list say, in Admin's language. */
+import type { CategoryId } from "./categories.ts";
 import type { CheckId, Finding } from "./types.ts";
 export type UiLanguage = "sv" | "en";
 export declare function uiLanguage(adminLanguage: string | undefined): UiLanguage;
 export declare const CHECK_LABELS: Record<UiLanguage, Record<CheckId, string>>;
-/** Tile headings: what is measured, so "0 of 4 filled in" reads without a double negative. */
-export declare const TILE_LABELS: Record<UiLanguage, Record<CheckId, string>>;
-type Status = (ok: number, total: number) => string;
-/** A tile's "x of y" line, phrased as what is in order for that check. */
-export declare const STATUS: Record<UiLanguage, Record<CheckId, Status>>;
+export declare const CATEGORY_LABELS: Record<UiLanguage, Record<CategoryId, string>>;
 export declare const COPY: {
     readonly en: {
         readonly title: "Content health";
@@ -17,8 +14,8 @@ export declare const COPY: {
         readonly ok: (ok: number, total: number) => string;
         readonly checkPasses: "All good";
         readonly nothingYet: "Nothing to measure yet";
-        readonly passing: (count: number) => string;
-        readonly more: (count: number) => string;
+        readonly toFix: (count: number) => string;
+        readonly openDetails: "Open details";
         readonly length: (actual: number, min: number, max: number) => string;
         readonly headingSkip: (previous: number, level: number) => string;
         readonly h1Count: (count: number) => string;
@@ -34,8 +31,8 @@ export declare const COPY: {
         readonly ok: (ok: number, total: number) => string;
         readonly checkPasses: "Allt i ordning";
         readonly nothingYet: "Inget att mäta än";
-        readonly passing: (count: number) => string;
-        readonly more: (count: number) => string;
+        readonly toFix: (count: number) => string;
+        readonly openDetails: "Öppna detaljer";
         readonly length: (actual: number, min: number, max: number) => string;
         readonly headingSkip: (previous: number, level: number) => string;
         readonly h1Count: (count: number) => string;
@@ -62,13 +59,12 @@ export declare const LIST_COPY: {
         readonly nav: "Content health";
         readonly intro: "Everything the checks found, in the latest version of each document, drafts included.";
         readonly summary: (findings: number, documents: number) => string;
-        readonly check: "Check";
+        readonly categories: "Categories";
         readonly collection: "Collection";
         readonly locale: "Locale";
         readonly all: "All";
-        readonly clear: "Clear filters";
-        readonly document: "Document";
-        readonly issue: "Issue";
+        readonly documents: (count: number) => string;
+        readonly categoryOk: "Everything in this category is in order.";
         readonly draft: "Draft";
         readonly fix: "Fix with the assistant";
         readonly fixMany: (count: number, total: number) => string;
@@ -80,13 +76,12 @@ export declare const LIST_COPY: {
         readonly nav: "Innehållshälsa";
         readonly intro: "Allt kontrollerna hittade, i den senaste versionen av varje dokument, utkast inräknade.";
         readonly summary: (findings: number, documents: number) => string;
-        readonly check: "Kontroll";
+        readonly categories: "Kategorier";
         readonly collection: "Samling";
         readonly locale: "Språk";
         readonly all: "Alla";
-        readonly clear: "Rensa filter";
-        readonly document: "Dokument";
-        readonly issue: "Problem";
+        readonly documents: (count: number) => string;
+        readonly categoryOk: "Allt i den här kategorin är i ordning.";
         readonly draft: "Utkast";
         readonly fix: "Åtgärda med assistenten";
         readonly fixMany: (count: number, total: number) => string;

package/dist/copy.js

@@ -29,62 +29,18 @@ export const CHECK_LABELS = {
         "content.untranslated": "Saknar översättning",
     },
 };
-/** Tile headings: what is measured, so "0 of 4 filled in" reads without a double negative. */
-export const TILE_LABELS = {
+export const CATEGORY_LABELS = {
     en: {
-        "media.alt-missing": "Alt texts",
-        "seo.title-missing": "Meta titles",
-        "seo.title-length": "Meta title length",
-        "seo.description-missing": "Meta descriptions",
-        "seo.description-length": "Meta description length",
-        "seo.image-missing": "Share images",
-        "content.h1-missing": "Main heading",
-        "content.h1-multiple": "Single main heading",
-        "content.heading-skip": "Heading order",
-        "content.thin": "Page length",
-        "content.untranslated": "Translations",
-    },
-    sv: {
-        "media.alt-missing": "Alt-texter",
-        "seo.title-missing": "Metatitlar",
-        "seo.title-length": "Metatitlarnas längd",
-        "seo.description-missing": "Metabeskrivningar",
-        "seo.description-length": "Metabeskrivningarnas längd",
-        "seo.image-missing": "Delningsbilder",
-        "content.h1-missing": "Huvudrubrik",
-        "content.h1-multiple": "En huvudrubrik",
-        "content.heading-skip": "Rubrikordning",
-        "content.thin": "Sidlängd",
-        "content.untranslated": "Översättningar",
-    },
-};
-/** A tile's "x of y" line, phrased as what is in order for that check. */
-export const STATUS = {
-    en: {
-        "media.alt-missing": (ok, total) => `${ok} of ${total} filled in`,
-        "seo.title-missing": (ok, total) => `${ok} of ${total} filled in`,
-        "seo.title-length": (ok, total) => `${ok} of ${total} the right length`,
-        "seo.description-missing": (ok, total) => `${ok} of ${total} filled in`,
-        "seo.description-length": (ok, total) => `${ok} of ${total} the right length`,
-        "seo.image-missing": (ok, total) => `${ok} of ${total} filled in`,
-        "content.h1-missing": (ok, total) => `${ok} of ${total} pages have an H1`,
-        "content.h1-multiple": (ok, total) => `${ok} of ${total} pages have at most one`,
-        "content.heading-skip": (ok, total) => `${ok} of ${total} pages in order`,
-        "content.thin": (ok, total) => `${ok} of ${total} pages long enough`,
-        "content.untranslated": (ok, total) => `${ok} of ${total} translated`,
+        seo: "SEO",
+        structure: "Structure",
+        translations: "Translations",
+        accessibility: "Accessibility",
     },
     sv: {
-        "media.alt-missing": (ok, total) => `${ok} av ${total} ifyllda`,
-        "seo.title-missing": (ok, total) => `${ok} av ${total} ifyllda`,
-        "seo.title-length": (ok, total) => `${ok} av ${total} med rätt längd`,
-        "seo.description-missing": (ok, total) => `${ok} av ${total} ifyllda`,
-        "seo.description-length": (ok, total) => `${ok} av ${total} med rätt längd`,
-        "seo.image-missing": (ok, total) => `${ok} av ${total} ifyllda`,
-        "content.h1-missing": (ok, total) => `${ok} av ${total} sidor har en H1`,
-        "content.h1-multiple": (ok, total) => `${ok} av ${total} sidor har högst en`,
-        "content.heading-skip": (ok, total) => `${ok} av ${total} sidor i ordning`,
-        "content.thin": (ok, total) => `${ok} av ${total} sidor tillräckligt långa`,
-        "content.untranslated": (ok, total) => `${ok} av ${total} översatta`,
+        seo: "SEO",
+        structure: "Struktur",
+        translations: "Översättningar",
+        accessibility: "Tillgänglighet",
     },
 };
 export const COPY = {
@@ -96,8 +52,8 @@ export const COPY = {
         ok: (ok, total) => `${ok} of ${total} OK`,
         checkPasses: "All good",
         nothingYet: "Nothing to measure yet",
-        passing: (count) => `${count} ${count === 1 ? "check passes" : "checks pass"}`,
-        more: (count) => `${count} more`,
+        toFix: (count) => `${count} to fix`,
+        openDetails: "Open details",
         length: (actual, min, max) => `${actual} characters, aim for ${min}–${max}`,
         headingSkip: (previous, level) => `H${previous} → H${level}`,
         h1Count: (count) => `${count} H1s`,
@@ -113,8 +69,8 @@ export const COPY = {
         ok: (ok, total) => `${ok} av ${total} OK`,
         checkPasses: "Allt i ordning",
         nothingYet: "Inget att mäta än",
-        passing: (count) => `${count} ${count === 1 ? "kontroll godkänd" : "kontroller godkända"}`,
-        more: (count) => `${count} till`,
+        toFix: (count) => `${count} att åtgärda`,
+        openDetails: "Öppna detaljer",
         length: (actual, min, max) => `${actual} tecken, sikta på ${min}–${max}`,
         headingSkip: (previous, level) => `H${previous} → H${level}`,
         h1Count: (count) => `${count} H1:or`,
@@ -257,13 +213,12 @@ export const LIST_COPY = {
         nav: "Content health",
         intro: "Everything the checks found, in the latest version of each document, drafts included.",
         summary: (findings, documents) => `${findings} ${findings === 1 ? "issue" : "issues"} in ${documents} ${documents === 1 ? "document" : "documents"}`,
-        check: "Check",
+        categories: "Categories",
         collection: "Collection",
         locale: "Locale",
         all: "All",
-        clear: "Clear filters",
-        document: "Document",
-        issue: "Issue",
+        documents: (count) => `${count} ${count === 1 ? "document" : "documents"}`,
+        categoryOk: "Everything in this category is in order.",
         draft: "Draft",
         fix: "Fix with the assistant",
         fixMany: (count, total) => count < total
@@ -277,13 +232,12 @@ export const LIST_COPY = {
         nav: "Innehållshälsa",
         intro: "Allt kontrollerna hittade, i den senaste versionen av varje dokument, utkast inräknade.",
         summary: (findings, documents) => `${findings} problem i ${documents} dokument`,
-        check: "Kontroll",
+        categories: "Kategorier",
         collection: "Samling",
         locale: "Språk",
         all: "Alla",
-        clear: "Rensa filter",
-        document: "Dokument",
-        issue: "Problem",
+        documents: (count) => `${count} dokument`,
+        categoryOk: "Allt i den här kategorin är i ordning.",
         draft: "Utkast",
         fix: "Åtgärda med assistenten",
         fixMany: (count, total) => count < total

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+export type { CategoryId, CategoryStats } from "./categories.ts";
+export { CATEGORY_IDS, categoryOf, categoryStats } from "./categories.ts";
 export type { DocumentInput, DocumentResult, FieldRule, ResolvedRule } from "./checks.ts";
 export { checkDocument, DEFAULT_MIN_WORDS, rulesFor, SEO_DEFAULTS } from "./checks.ts";
 export type { Heading, PageContent } from "./content.ts";

package/dist/index.js

@@ -1,3 +1,4 @@
+export { CATEGORY_IDS, categoryOf, categoryStats } from "./categories.js";
 export { checkDocument, DEFAULT_MIN_WORDS, rulesFor, SEO_DEFAULTS } from "./checks.js";
 export { countWords, readContent } from "./content.js";
 export { checkStats, countDocuments, groupFindings } from "./group.js";

package/dist/links.d.ts

@@ -1,3 +1,4 @@
+import { type CategoryId } from "./categories.ts";
 import { type CheckId, type Finding } from "./types.ts";
 /** Admin path of the work list. */
 export declare const VIEW_PATH = "/content-health";
@@ -62,7 +63,12 @@ export declare function batchTarget(finding: Finding): string;
 export declare function batchURL(adminRoute: string, filters: ListFilters, targets: string[], ask: string): string;
 /** The document in the finding's locale with its field brought into view, and a prompt when given. */
 export declare function editURL(adminRoute: string, finding: Finding, ask?: string): string;
+/**
+ * The work list's filters. `category` picks the tab. `check` is only an entry point (an older link,
+ * or a batch link): the view turns it into its category and `check` stays out of the state.
+ */
 export type ListFilters = {
+    category?: CategoryId;
     check?: CheckId;
     collection?: string;
     locale?: string;

package/dist/links.js

@@ -4,6 +4,7 @@
  * the client bridge build and read the same addresses.
  */
 import { formatAdminURL } from "payload/shared";
+import { CATEGORY_IDS, categoryOf } from "./categories.js";
 import { CHECK_IDS } from "./types.js";
 /** Admin path of the work list. */
 export const VIEW_PATH = "/content-health";
@@ -128,7 +129,7 @@ export function listURL(adminRoute, filters = {}) {
 }
 export function filterQuery(filters) {
     const params = new URLSearchParams();
-    for (const key of ["check", "collection", "locale"]) {
+    for (const key of ["category", "check", "collection", "locale"]) {
         const value = filters[key];
         if (value) {
             params.set(key, value);
@@ -142,17 +143,22 @@ export function readFilters(searchParams) {
         const value = searchParams?.[key];
         return (Array.isArray(value) ? value[0] : value) || undefined;
     };
+    const category = first("category");
     const check = first("check");
     const collection = first("collection");
     const locale = first("locale");
     return {
+        ...(category && CATEGORY_IDS.includes(category)
+            ? { category: category }
+            : {}),
         ...(check && CHECK_IDS.includes(check) ? { check: check } : {}),
         ...(collection ? { collection } : {}),
         ...(locale ? { locale } : {}),
     };
 }
 export function matchesFilters(finding, filters) {
-    return ((!filters.check || finding.check === filters.check) &&
+    return ((!filters.category || categoryOf(finding.check) === filters.category) &&
+        (!filters.check || finding.check === filters.check) &&
         (!filters.collection || finding.collection === filters.collection) &&
         // Unlocalized fields belong to every locale.
         (!filters.locale || !finding.locale || finding.locale === filters.locale));

package/dist/scan.js

@@ -31,7 +31,7 @@ export async function scanContentHealth({ payload, user, checks }) {
         ? payload.config.localization.localeCodes
         : [undefined];
     for (const [slug, collectionOptions] of Object.entries(options.collections)) {
-        const collection = payload.collections[slug]?.config;
+        const collection = payload.config.collections.find((collection) => collection.slug === slug);
         if (!collection) {
             result.problems.push(`Collection "${slug}" does not exist.`);
             continue;
@@ -95,7 +95,7 @@ export async function scanContentHealth({ payload, user, checks }) {
                     depth: 0,
                     draft: drafts,
                     fallbackLocale: false,
-                    ...(locale ? { locale } : {}),
+                    ...(locale ? { locale: locale } : {}),
                     overrideAccess: false,
                     pagination: false,
                     select: select,
@@ -159,7 +159,7 @@ async function scanTranslations(input) {
         depth: 0,
         draft: input.drafts,
         fallbackLocale: false,
-        locale,
+        locale: locale,
         overrideAccess: false,
         pagination: false,
         user: input.user,

package/dist/styles/tokens.css

@@ -0,0 +1,26 @@
+/*
+ * Colors shared by the widget and the work list. The accent is the blue the editor assistant and
+ * visual editing use; red and amber mark what needs work. The text tones are darker, so small text
+ * keeps its contrast on Payload's light background.
+ */
+.content-health,
+.content-health-list {
+  --content-health-accent: #2563eb;
+  --content-health-accent-text: #2563eb;
+  --content-health-accent-tint: rgba(37, 99, 235, 0.1);
+  --content-health-bad: #dc2626;
+  --content-health-bad-text: #b91c1c;
+  --content-health-warn: #d97706;
+  --content-health-warn-text: #b45309;
+}
+
+html[data-theme="dark"] .content-health,
+html[data-theme="dark"] .content-health-list {
+  --content-health-accent: #60a5fa;
+  --content-health-accent-text: #60a5fa;
+  --content-health-accent-tint: rgba(96, 165, 250, 0.14);
+  --content-health-bad: #f87171;
+  --content-health-bad-text: #f87171;
+  --content-health-warn: #fbbf24;
+  --content-health-warn-text: #fbbf24;
+}