Add a description of the triage labels.

frontend/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@js-temporal/polyfill": "^0.4.4",
     "astro": "^3.2.4",
+    "colorjs.io": "^0.4.5",
     "zod": "^3.22.4"
   }
 }

frontend/src/components/GhLabel.astro

@@ -1,8 +1,24 @@
 ---
+import Color from "colorjs.io";
 interface Props {
-  color: string;
+    name: string;
+    color: string;
 }
-const { color } = Astro.props;
+const { name, color } = Astro.props;
+
+const darkBg =
+    Color.contrastAPCA(color, "white") + Color.contrastAPCA(color, "black") < 0;
 ---
 
-<span class="label" data-color={color}></span>
+<span class="label" style=`--bg: ${color}` class:list={{ darkBg }}>{name}</span>
+
+<style is:global>
+    .label {
+        background-color: var(--bg);
+        padding: 0 .5lh;
+        border-radius: .5lh;
+    }
+    .label.darkBg {
+        color: white;
+    }
+</style>

frontend/src/pages/index.astro

@@ -15,7 +15,10 @@ let totalUrgent = 0;
 let totalImportant = 0;
 let totalOther = 0;
 
-const andFormatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });
+const andFormatter = new Intl.ListFormat("en", {
+    style: "long",
+    type: "conjunction",
+});
 
 const repoSummaries = repos.map((repo) => {
     let triageViolations = 0;
@@ -61,7 +64,7 @@ const repoSummaries = repos.map((repo) => {
     totalImportant += important;
     totalOther += other;
 
-    let message :string[]= [];
+    let message: string[] = [];
     if (triageViolations > 0 || urgentViolations > 0) {
         if (triageViolations > 0) {
             message.push(`${triageViolations} triage SLO violations`);
@@ -100,28 +103,37 @@ const repoSummaries = repos.map((repo) => {
     });
 });
 
-function sortKey(summary: typeof repoSummaries[0]) : {priority: number, count: number} {
+function sortKey(summary: (typeof repoSummaries)[0]): {
+    priority: number;
+    count: number;
+} {
     if (summary.triageViolations > 0 || summary.urgentViolations > 0) {
-        return {priority: 4, count: summary.triageViolations + summary.urgentViolations};
+        return {
+            priority: 4,
+            count: summary.triageViolations + summary.urgentViolations,
+        };
     } else if (summary.importantViolations > 0) {
-        return {priority: 3, count: summary.importantViolations};
+        return { priority: 3, count: summary.importantViolations };
     } else if (summary.needTriage > 0 || summary.urgent > 0) {
-        return {priority: 2, count: summary.needTriage + summary.urgent};
+        return { priority: 2, count: summary.needTriage + summary.urgent };
     } else if (summary.important > 0) {
-        return {priority: 1, count: summary.important};
+        return { priority: 1, count: summary.important };
     } else {
-        return {priority: 0, count: summary.other};
+        return { priority: 0, count: summary.other };
     }
 }
-function compareByKey(a:typeof repoSummaries[0], b:typeof repoSummaries[0]): number {
-    const aKey = sortKey(a), bKey = sortKey(b);
+function compareByKey(
+    a: (typeof repoSummaries)[0],
+    b: (typeof repoSummaries)[0]
+): number {
+    const aKey = sortKey(a),
+        bKey = sortKey(b);
     if (aKey.priority != bKey.priority) {
         return bKey.priority - aKey.priority;
     }
     return bKey.count - aKey.count;
 }
 repoSummaries.sort(compareByKey);
-
 ---
 
 <Layout title="Browser Spec Maintenance Status">
@@ -176,8 +188,14 @@ repoSummaries.sort(compareByKey);
                                 {repo.org}/{repo.repo}
                             </a>
                         </dt>
-                        <dd class={repo.class_}>
-                            {repo.message}
+                        <dd>
+                            <span class={repo.class_}>{repo.message}</span>
+                            {repo.labelsPresent ? null : (
+                                <p>
+                                    This repository is missing its{" "}
+                                    <a href="triage-labels">triage labels</a>.
+                                </p>
+                            )}
                         </dd>
                     </>
                 ))

frontend/src/pages/triage-labels.astro

@@ -0,0 +1,36 @@
+---
+import GhLabel from "@components/GhLabel.astro";
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout title="Triage Labels">
+    <a href="/">Back home.</a>
+    <main>
+        <p>
+            This summary relies on repository maintainers using a particular set
+            of labels to triage issues. These are:
+        </p>
+
+        <dl>
+            <dt><GhLabel name="Priority: Urgent" color="#b60205" /></dt>
+            <dd>
+                Needs to be resolved more quickly than other issues. These
+                issues and PRs are expected to be resolved within 14 days.
+            </dd>
+            <dt><GhLabel name="Priority: Important" color="#fbca04" /></dt>
+            <dd>
+                Needs to be resolved within a reasonable timeframe, but not as
+                quickly as urgent issues. These issues and PRs are expected to
+                be resolved within 3 months.
+            </dd>
+            <dt><GhLabel name="Priority: Eventually" color="#c2e0c6" /></dt>
+            <dd>Doesn't need to be resolved within a particular time limit.</dd>
+            <dt><GhLabel name="Needs Reporter Feedback" color="#5319e7" /></dt>
+            <dd>
+                The person who reported the issue needs to answer a question
+                before progress can be made. The SLO clock doesn't advance
+                between when this label is set and when the reporter replies.
+            </dd>
+        </dl>
+    </main>
+</Layout>