audience metadata component (#5)

* audience metadata component

* everyone audience, Temporal polyfill fixes, node 26 in github, Typescript 6

* case fix for build part 1

* case fix for build part 2

Author: beforan

.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";

app/connect/setup-TRE/_meta.js app/connect/setup-tre/_meta.jsapp/connect/setup-TRE/_meta.js renamed to app/connect/setup-tre/_meta.js

@@ -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>
+}

…nect/setup-TRE/deployment-steps/page.mdx …nect/setup-tre/deployment-steps/page.mdxapp/connect/setup-TRE/deployment-steps/page.mdx renamed to app/connect/setup-tre/deployment-steps/page.mdx app/connect/setup-TRE/deployment-steps/page.mdx renamed to app/connect/setup-tre/deployment-steps/page.mdx

@@ -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} />
     </>
 }

app/connect/setup-TRE/page.mdx app/connect/setup-tre/page.mdxapp/connect/setup-TRE/page.mdx renamed to app/connect/setup-tre/page.mdx

@@ -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/Badge.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