website: Use Docusaurus Frontmatter for badges (#12893)

website/docs: Reduce redundant usage of badges. Move badge logic to components.

- Fix JSX class name warning.
- Remove duplicate titles.
- Flesh out `support_level` frontmatter.

website/remark/support-directive.ts

@@ -0,0 +1,78 @@
+import "mdast-util-to-hast";
+import "mdast-util-directive";
+
+import { h } from "hastscript";
+import { Root } from "mdast";
+import { visit, SKIP } from "unist-util-visit";
+import { coerce } from "semver";
+
+/**
+ * Support levels for authentik.
+ */
+export type SupportLevel = "authentik" | "community" | "vendor" | "deprecated";
+
+/**
+ * Mapping of support levels to badge classes.
+ */
+export const SupportLevelToLabel = {
+    authentik: "authentik",
+    community: "Community",
+    vendor: "Vendor",
+    deprecated: "Deprecated",
+} as const satisfies Record<SupportLevel, string>;
+
+/**
+ * Type-predicate to determine if a string is a known support level.
+ */
+export function isSupportLevel(input: string): input is SupportLevel {
+    return Object.hasOwn(SupportLevelToLabel, input);
+}
+
+/**
+ * MDAST plugin to transform `ak-support` directives into preview badges.
+ */
+function remarkSupportDirective() {
+    return function (tree: Root) {
+        visit(tree, "textDirective", function (node) {
+            if (node.name !== "ak-support") return SKIP;
+
+            const firstChild = node.children[0];
+
+            if (firstChild?.type !== "text") return SKIP;
+
+            const level = firstChild.value.trim();
+
+            if (!isSupportLevel(level)) {
+                throw new TypeError(`Invalid support level: ${level}`);
+            }
+
+            const label = SupportLevelToLabel[level];
+
+            const data = node.data || (node.data = {});
+
+            const hast = h("span", {
+                ...node.attributes,
+                className: `badge badge--support-${level}`,
+                title: `This feature is supported at the ${label} level.`,
+                "aria-description": "Support level badge",
+                role: "img",
+            });
+
+            data.hName = hast.tagName;
+            data.hProperties = hast.properties;
+
+            data.hChildren = [
+                {
+                    type: "text",
+                    value: `Support level: ${label}`,
+                },
+            ];
+
+            node.children = [];
+
+            return SKIP;
+        });
+    };
+}
+
+export default remarkSupportDirective;