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/docusaurus.config.ts

@@ -2,10 +2,14 @@ import type { Config } from "@docusaurus/types";
 import type * as Preset from "@docusaurus/preset-classic";
 import { themes as prismThemes } from "prism-react-renderer";
 import type * as OpenApiPlugin from "docusaurus-plugin-openapi-docs";
+import remarkGithub, { BuildUrlValues } from "remark-github";
+import { defaultBuildUrl } from "remark-github";
+import remarkDirective from "remark-directive";
+import remarkVersionDirective from "./remark/version-directive";
+import remarkPreviewDirective from "./remark/preview-directive";
+import remarkSupportDirective from "./remark/support-directive";
 
-module.exports = async function (): Promise<Config> {
-    const remarkGithub = (await import("remark-github")).default;
-    const defaultBuildUrl = (await import("remark-github")).defaultBuildUrl;
+const createConfig = (): Config => {
     return {
         title: "authentik",
         tagline: "Bring all of your authentication into a unified platform.",
@@ -80,7 +84,15 @@ module.exports = async function (): Promise<Config> {
             prism: {
                 theme: prismThemes.oneLight,
                 darkTheme: prismThemes.oneDark,
-                additionalLanguages: ["python", "diff", "json", "http"],
+                additionalLanguages: [
+                    // ---
+                    "apacheconf",
+                    "diff",
+                    "http",
+                    "json",
+                    "nginx",
+                    "python",
+                ],
             },
         },
         presets: [
@@ -93,13 +105,19 @@ module.exports = async function (): Promise<Config> {
                         editUrl:
                             "https://github.com/goauthentik/authentik/edit/main/website/",
                         docItemComponent: "@theme/ApiItem",
+                        beforeDefaultRemarkPlugins: [
+                            remarkDirective,
+                            remarkVersionDirective,
+                            remarkPreviewDirective,
+                            remarkSupportDirective,
+                        ],
                         remarkPlugins: [
                             [
                                 remarkGithub,
                                 {
                                     repository: "goauthentik/authentik",
                                     // Only replace issues and PR links
-                                    buildUrl: function (values) {
+                                    buildUrl: (values: BuildUrlValues) => {
                                         return values.type === "issue" ||
                                             values.type === "mention"
                                             ? defaultBuildUrl(values)
@@ -151,3 +169,5 @@ module.exports = async function (): Promise<Config> {
         themes: ["@docusaurus/theme-mermaid", "docusaurus-theme-openapi-docs"],
     };
 };
+
+module.exports = createConfig;