audience metadata component

.github/workflows/deploy.yml

@@ -44,7 +44,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v5
         with:
-          node-version: "24"
+          node-version: "26"
 
       - name: Setup Pages
         uses: actions/configure-pages@v6

app/connect/connect-submission/page.mdx

@@ -1,5 +1,6 @@
 ---
 readingTime: PT15M
+audiences: tre-operator
 ---
 
 import { Steps, Callout, Table } from "nextra/components";

components/Badge.tsx

@@ -0,0 +1,7 @@
+import { JSX, PropsWithChildren } from "react";
+
+export function Badge({ children, className, ...p }: PropsWithChildren<JSX.IntrinsicElements["span"]>) {
+    return <span className={`px-2 py-1 rounded-xl bg-blue-300 text-blue-700 text-sm ${className}`} {...p}>
+        {children}
+    </span>
+}

components/doc-metadata/DocMetadata.tsx

@@ -1,11 +1,13 @@
 "use client";
 import { useConfig } from "nextra-theme-docs";
 import { TimeToRead } from "./TimeToRead";
+import { TargetAudiences } from "./TargetAudiences";
 
 export function DocMetadata() {
     const metadata = useConfig().normalizePagesResult.activeMetadata;
 
     return <>
+        <TargetAudiences metadata={metadata} />
         <TimeToRead metadata={metadata} />
     </>
 }

components/doc-metadata/TargetAudiences.tsx

@@ -0,0 +1,55 @@
+import { LucideUsers } from "lucide-react";
+import { FrontMatter } from "nextra";
+import { Badge } from "@/components/Badge";
+
+type BadgeSpec = {
+    label: string;
+    colors?: string;
+}
+
+const audienceBadges: { [k: string]: BadgeSpec } = {
+    "everyone": {label: "Everyone", colors: "text-blue-900 font-semibold bg-gradient-to-r from-red-400/70 via-green-200/70 to-violet-500/70" },
+    "tre-operator": { label: "TRE Operator", colors: "bg-blue-200 text-blue-700" },
+    "federation-operator": { label: "Federation Operator", colors: "bg-orange-200 text-orange-700" },
+    "researcher": { label: "Researcher", colors: "bg-purple-200 text-purple-700" },
+    "integrator": { label: "Integrator", colors: "bg-green-200 text-green-700" },
+    "contributor": { label: "Contributor", colors: "bg-red-200 text-red-700" }
+}
+
+export function TargetAudiences({ metadata }: { metadata?: FrontMatter }) {
+    if (metadata?.audiences == null) return null;
+
+    // standardise to a string array, or bail if impossible
+    let { audiences } = metadata;
+    if (typeof audiences === "string") audiences = [audiences]
+    if (!Array.isArray(audiences)) return null;
+
+    // map valid keys only to badge specs
+    audiences = audiences.reduce((a, v) => {
+        const badge = audienceBadges[v];
+        return badge == null ? a : [...a, badge];
+    }, []);
+
+    // Leave if we didn't have any valid keys
+    if(audiences.length < 1) return null
+
+    return (<dl className="flex w-full p-2 gap-2">
+        <dt className="">
+            <div className="flex gap-2 font-semibold items-center">
+                <LucideUsers /> Target Audience{audiences.length > 1 && "s"}
+            </div>
+        </dt>
+
+        <div className="flex flex-wrap gap-2">
+            {audiences.map(({ label, colors }: BadgeSpec) => {
+                if (label == null) return null
+
+                return <dd key={label}>
+                    <Badge className={colors ?? ""}>
+                        {label}
+                    </Badge>
+                </dd>
+            })}
+        </div>
+    </dl>)
+}

components/doc-metadata/TimeToRead.tsx

@@ -1,11 +1,12 @@
 import { LucideClock } from "lucide-react";
 import { FrontMatter } from "nextra";
+import { useEffect } from "react";
 
 // conditionally polyfill Temporal for Safari :(
 const loadTemporal = async () => {
-    if (typeof Temporal === 'undefined') {
-        const polyfill = await import('@js-temporal/polyfill');
-        window.Temporal = polyfill.Temporal;
+    if (typeof Temporal === "undefined") {
+        const polyfill = await import("temporal-polyfill");
+        globalThis.Temporal = polyfill.Temporal;
     }
 };
 
@@ -14,7 +15,9 @@ await loadTemporal();
 export function TimeToRead({ metadata }: { metadata?: FrontMatter }) {
     if (metadata?.readingTime == null) return null;
 
-    return (<dl className="flex w-full p-2 gap-2 border-solid border-white border-thick">
+    useEffect(() => { loadTemporal() }, [])
+
+    return (<dl className="flex w-full p-2 gap-2 items-center">
         <dt className="">
             <div className="flex gap-2 font-semibold">
                 <LucideClock /> Time to read

package.json

@@ -10,14 +10,14 @@
     "postbuild": "pagefind --site .next/server/app --output-path out/_pagefind"
   },
   "dependencies": {
-    "@js-temporal/polyfill": "^0.5.1",
     "lucide-react": "^1.25.0",
     "next": "16.2.10",
     "nextra": "^4.6.1",
     "nextra-theme-docs": "^4.6.1",
     "postcss": "^8.5.21",
     "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "react-dom": "19.2.4",
+    "temporal-polyfill": "^1.0.1"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.3.3",
@@ -28,6 +28,6 @@
     "eslint-config-next": "16.2.10",
     "pagefind": "^1.5.2",
     "tailwindcss": "^4.3.3",
-    "typescript": "^5"
+    "typescript": "^6"
   }
 }