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

…omponents.

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

web/build.mjs

@@ -88,7 +88,11 @@ const baseArgs = {
     treeShaking: true,
     external: ["*.woff", "*.woff2"],
     tsconfig: "./tsconfig.json",
-    loader: { ".css": "text", ".md": "text" },
+    loader: {
+        ".css": "text",
+        ".md": "text",
+        ".mdx": "text",
+    },
     define: definitions,
     format: "esm",
 };

web/src/admin/providers/oauth2/OAuth2ProviderViewPage.ts

@@ -4,7 +4,7 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EVENT_REFRESH } from "@goauthentik/common/constants";
 import renderDescriptionList from "@goauthentik/components/DescriptionList";
 import "@goauthentik/components/events/ObjectChangelog";
-import MDProviderOAuth2 from "@goauthentik/docs/add-secure-apps/providers/oauth2/index.md";
+import MDProviderOAuth2 from "@goauthentik/docs/add-secure-apps/providers/oauth2/index.mdx";
 import { AKElement } from "@goauthentik/elements/Base";
 import "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/EmptyState";

web/src/admin/providers/proxy/ProxyProviderViewPage.ts

@@ -13,7 +13,7 @@ import MDNginxStandalone from "@goauthentik/docs/add-secure-apps/providers/proxy
 import MDTraefikCompose from "@goauthentik/docs/add-secure-apps/providers/proxy/_traefik_compose.md";
 import MDTraefikIngress from "@goauthentik/docs/add-secure-apps/providers/proxy/_traefik_ingress.md";
 import MDTraefikStandalone from "@goauthentik/docs/add-secure-apps/providers/proxy/_traefik_standalone.md";
-import MDHeaderAuthentication from "@goauthentik/docs/add-secure-apps/providers/proxy/header_authentication.md";
+import MDHeaderAuthentication from "@goauthentik/docs/add-secure-apps/providers/proxy/header_authentication.mdx";
 import { AKElement } from "@goauthentik/elements/Base";
 import "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/Markdown";

web/src/global.d.ts

@@ -6,6 +6,12 @@ declare module "*.md" {
     const filename: string;
 }
 
+declare module "*.mdx" {
+    const html: string;
+    const metadata: { [key: string]: string };
+    const filename: string;
+}
+
 declare namespace Intl {
     class ListFormat {
         constructor(locale: string, args: { [key: string]: string });

website/docs/add-secure-apps/applications/index.md

@@ -6,12 +6,12 @@ Applications, as defined in authentik, are used to configure and separate the au
 
 When a user logs into authentik, they see a list of the applications for which authentik is configured to provide authentication and authorization (the applications that that they are authorized to use).
 
-Applications are the "other half" of providers. They typically exist in a 1-to-1 relationship; each application needs a provider and every provider can be used with one application. Applications can, however, use specific, additional providers to augment the functionality of the main provider. For more information, see [Backchannel providers](./manage_apps.md#backchannel-providers).
+Applications are the "other half" of providers. They typically exist in a 1-to-1 relationship; each application needs a provider and every provider can be used with one application. Applications can, however, use specific, additional providers to augment the functionality of the main provider. For more information, see [Backchannel providers](./manage_apps.mdx#backchannel-providers).
 
 Furthermore, the [RAC (Remote Access Control)](../providers/rac/index.md) feature uses a single application and a single provider, but multiple "endpoints". An endpoint defines each remote machine.
 
 :::info
-For information about creating and managing applications, refer to [Manage applications](./manage_apps.md).
+For information about creating and managing applications, refer to [Manage applications](./manage_apps.mdx).
 :::
 
 ## Appearance

website/docs/add-secure-apps/applications/manage_apps.md → website/docs/add-secure-apps/applications/manage_apps.mdx

@@ -10,7 +10,15 @@ Learn how to add new applications from our video or follow the instructions belo
 
 ### Video
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/broUAWrIWDI;start=22" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+<iframe
+    width="560"
+    height="315"
+    src="https://www.youtube.com/embed/broUAWrIWDI;start=22"
+    title="YouTube video player"
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    allowfullscreen
+></iframe>
 
 ### Instructions
 
@@ -45,8 +53,12 @@ When multiple policies/groups/users are attached, you can configure the _Policy
 
 ## Application Entitlements
 
-<span class="badge badge--preview">Preview</span>
-<span class="badge badge--version">authentik 2024.12+</span>
+<p className="badge-group">
+
+:ak-version[2024.12]
+:ak-preview
+
+</p>
 
 Application entitlements can be used through authentik to manage authorization within an application (what areas of the app users or groups can access). Entitlements are scoped to a single application and can be bound to multiple users and/or groups (binding policies is not currently supported), giving them access to the entitlement. An application can either check for the name of the entitlement (via the `entitlements` scope), or via attributes stored in entitlements.
 

website/docs/add-secure-apps/flows-stages/bindings/index.md

@@ -24,7 +24,7 @@ A _policy binding_ connects a specific policy to a flow or to a stage. With the
 
 You can also bind groups and users to another component (a policy, a stage, a flow, etc.). For example, you can create a binding for a specific group, and then [bind that to a stage binding](../stages/index.md#bind-users-and-groups-to-a-flows-stage-binding), with the result that everyone in that group now will see that stage (and any policies bound to that stage) as part of their flow. Or more specifically, and going one step deeper, you can also _bind a binding to a binding_.
 
-Bindings are also used for [Application Entitlements](../../applications/manage_apps.md#application-entitlements), where you can bind specific users or groups to an application as a way to manage who has access to the application.
+Bindings are also used for [Application Entitlements](../../applications/manage_apps.mdx#application-entitlements), where you can bind specific users or groups to an application as a way to manage who has access to the application.
 
 It's important to remember that bindings are instantiated objects themselves, and conceptually can be considered as a "connector" between two components. This is why you might read about "binding a binding", because technically, a binding is "spliced" into another binding, in order to intercept and enforce the criteria defined in the second binding.
 

website/docs/add-secure-apps/flows-stages/bindings/work_with_bindings.md

@@ -8,6 +8,6 @@ For instructions to create a binding, refer to the documentation for the specifi
 
 - [Bind a stage to a flow](../stages/index.md#bind-a-stage-to-a-flow)
 - [Bind a policy to a flow or stage](../../../customize/policies/working_with_policies#bind-a-policy-to-a-flow-or-stage)
-- [Bind users or groups to a specific application with an Application Entitlement](../../applications/manage_apps.md#application-entitlements)
-- [Bind a policy to a specific application when you create a new app using the Wizard](../../applications/manage_apps.md#instructions)
+- [Bind users or groups to a specific application with an Application Entitlement](../../applications/manage_apps.mdx#application-entitlements)
+- [Bind a policy to a specific application when you create a new app using the Wizard](../../applications/manage_apps.mdx#instructions)
 - [Bind users and groups to a stage binding, to define whether or not that stage is shown](../stages/index.md#bind-users-and-groups-to-a-flows-stage-binding)

website/docs/add-secure-apps/flows-stages/flow/context/index.md → website/docs/add-secure-apps/flows-stages/flow/context/index.mdx

@@ -24,11 +24,11 @@ Keys prefixed with `goauthentik.io` are used internally by authentik and are sub
 
 ### Common keys
 
-#### `pending_user` ([User object](../../../../users-sources/user/user_ref.md#object-properties))
+#### `pending_user` ([User object](../../../../users-sources/user/user_ref.mdx#object-properties))
 
-`pending_user` is used by multiple stages. In the context of most flow executions, it represents the data of the user that is executing the flow. This value is not set automatically, it is set via the [Identification stage](../../stages/identification/index.md).
+`pending_user` is used by multiple stages. In the context of most flow executions, it represents the data of the user that is executing the flow. This value is not set automatically, it is set via the [Identification stage](../../stages/identification/index.mdx).
 
-Stages that require a user, such as the [Password stage](../../stages/password/index.md), the [Authenticator validation stage](../../stages/authenticator_validate/index.md) and others will use this value if it is set, and fallback to the request's users when possible.
+Stages that require a user, such as the [Password stage](../../stages/password/index.md), the [Authenticator validation stage](../../stages/authenticator_validate/index.mdx) and others will use this value if it is set, and fallback to the request's users when possible.
 
 #### `prompt_data` (Dictionary)
 
@@ -62,7 +62,7 @@ When an unauthenticated user attempts to access a secured resource, they are red
 
 When a user authenticates/enrolls via an external source, this will be set to the source they are using.
 
-#### `outpost` (dictionary) <span class="badge badge--version">authentik 2024.10+</span>
+#### `outpost` (dictionary):ak-version[2024.10]
 
 When a flow is executed by an Outpost (for example the [LDAP](../../../providers/ldap/index.md) or [RADIUS](../../../providers/radius/index.mdx)), this will be set to a dictionary containing the Outpost instance under the key `"instance"`.
 
@@ -76,7 +76,7 @@ This key is set to `True` when the flow is executed from an "SSO" context. For e
 
 This key is set when a flow execution is continued from a token. This happens for example when an [Email stage](../../stages/email/index.mdx) is used and the user clicks on the link within the email. The token object contains the key that was used to restore the flow execution.
 
-#### `is_redirected` (Flow object) <span class="badge badge--version">authentik 2024.12+</span>
+#### `is_redirected` (Flow object):ak-version[2024.12]
 
 This key is set when the current flow was reached through a [Redirect stage](../../stages/redirect/index.md) in Flow mode.
 
@@ -98,7 +98,7 @@ URL that the form will be submitted to.
 
 Key-value pairs of the data that is included in the form and will be submitted to `url`.
 
-#### Captcha stage <span class="badge badge--version">authentik 2024.6+</span>
+#### Captcha stage:ak-version[2024.6]
 
 ##### `captcha` (dictionary)
 
@@ -118,7 +118,7 @@ An optional list of all permissions that will be given to the application by gra
 
 #### Deny stage
 
-##### `deny_message` (string) <span class="badge badge--version">authentik 2023.10+</span>
+##### `deny_message` (string)
 
 Optionally overwrite the deny message shown, has a higher priority than the message configured in the stage.
 
@@ -134,7 +134,7 @@ If set, this must be a list of group objects and not group names.
 
 Path the `pending_user` will be written to. If not set in the flow, falls back to the value set in the user_write stage, and otherwise to the `users` path.
 
-##### `user_type` (string) <span class="badge badge--version">authentik 2023.10+</span>
+##### `user_type` (string)
 
 Type the `pending_user` will be created as. Must be one of `internal`, `external` or `service_account`.
 
@@ -146,7 +146,7 @@ Set by the [Password stage](../../stages/password/index.md) after successfully a
 
 ##### `auth_method` (string)
 
-Set by the [Password stage](../../stages/password/index.md), the [Authenticator validation stage](../../stages/authenticator_validate/index.md), the [OAuth2 Provider](../../../providers/oauth2/index.md), and the API authentication depending on which method was used to authenticate.
+Set by the [Password stage](../../stages/password/index.md), the [Authenticator validation stage](../../stages/authenticator_validate/index.mdx), the [OAuth2 Provider](../../../providers/oauth2/index.mdx), and the API authentication depending on which method was used to authenticate.
 
 Possible options:
 
@@ -155,7 +155,7 @@ Possible options:
 - `ldap` (Authenticated via LDAP bind from an LDAP source)
 - `auth_mfa` (Authentication via MFA device without password)
 - `auth_webauthn_pwl` (Passwordless authentication via WebAuthn)
-- `jwt` ([M2M](../../../providers/oauth2/client_credentials.md) authentication via an existing JWT)
+- `jwt` ([M2M](../../../providers/oauth2/client_credentials.mdx) authentication via an existing JWT)
 
 ##### `auth_method_args` (dictionary)
 
@@ -198,7 +198,7 @@ If _Show matched user_ is disabled, this key will be set to the user identifier
 
 #### Redirect stage
 
-##### `redirect_stage_target` (string) <span class="badge badge--version">authentik 2024.12+</span>
+##### `redirect_stage_target` (string):ak-version[2024.12]
 
 [Set this key](../../../../customize/policies/expression/managing_flow_context_keys.md) in an Expression Policy to override [Redirect stage](../../stages/redirect/index.md) to force it to redirect to a certain URL or flow. This is useful when a flow requires that the redirection target be decided dynamically.
 

website/docs/add-secure-apps/flows-stages/flow/examples/snippets.md → website/docs/add-secure-apps/flows-stages/flow/examples/snippets.mdx

@@ -2,7 +2,7 @@
 title: Example policy snippets for flows
 ---
 
-### Redirect current flow to another URL <span class="badge badge--version">authentik 2022.7+</span>
+### Redirect current flow to another URL
 
 ```python
 plan = request.context.get("flow_plan")

website/docs/add-secure-apps/flows-stages/flow/executors/headless.md

@@ -6,6 +6,6 @@ The headless flow executor is used by clients that don't have access to the web
 
 The following stages are supported:
 
-- [**Identification stage**](../../stages/identification/index.md)
+- [**Identification stage**](../../stages/identification/index.mdx)
 - [**Password stage**](../../stages/password/index.md)
-- [**Authenticator Validation Stage**](../../stages/authenticator_validate/index.md)
+- [**Authenticator Validation Stage**](../../stages/authenticator_validate/index.mdx)

website/docs/add-secure-apps/flows-stages/flow/executors/sfe.md

@@ -1,9 +1,8 @@
 ---
 title: Simplified flow executor
+authentik_version: "2024.6.1"
 ---
 
-<span class="badge badge--version">authentik 2024.6.1+</span>
-
 A simplified web-based flow executor that authentik automatically uses for older browsers that do not support modern web technologies.
 
 Currently this flow executor is automatically used for the following browsers:
@@ -13,14 +12,14 @@ Currently this flow executor is automatically used for the following browsers:
 
 The following stages are supported:
 
-- [**Identification stage**](../../stages/identification/index.md)
+- [**Identification stage**](../../stages/identification/index.mdx)
 
     :::info
     Only user identifier and user identifier + password stage configurations are supported; sources and passwordless configurations are not supported.
     :::
 
 - [**Password stage**](../../stages/password/index.md)
-- [**Authenticator Validation Stage**](../../stages/authenticator_validate/index.md)
+- [**Authenticator Validation Stage**](../../stages/authenticator_validate/index.mdx)
 
 Compared to the [default flow executor](./if-flow.md), this flow executor does _not_ support the following features:
 

website/docs/add-secure-apps/flows-stages/flow/executors/user-settings.md

@@ -2,10 +2,6 @@
 title: User settings
 ---
 
-<span class="badge badge--version">authentik 2023.3+</span>
-
----
-
 The user interface (/if/user/) uses a specialized flow executor to allow individual users to customize their profile. A user's profile consists of key/value fields, so this executor only supports Prompt or User Write stages. If the configured flow contains another stage, a button will be shown to open the default executor.
 
 Because the stages in a flow can change during its execution, be awre that configuring this executor to use any stage type other than Prompt or User Write will automatically trigger a redirect to the standard executor.

website/docs/add-secure-apps/flows-stages/flow/flow_list/_defaultflowlist.mdx

@@ -6,7 +6,7 @@
 
 - **Invalidation**: designates a default flow to be used to invalidate a session. Use `default-invalidation-flow` for invalidation from authentik itself, or use `default-provider-invalidation-flow` to invalidate when the session of an application ends. When you use the `default-invalidation-flow` as a global invalidation flow, it should contain a [**User Logout**](../../stages/user_logout.md) stage. When you use the `default-provider-invalidation-flow` (supported with OIDC, SAML, Proxy, and RAC providers), you can configure this default flow to present users log-off options such as "log out of the app but remain logged in to authentik" or "return to the **My Applications** page", or "log out completely". (Alternatively, you can create a custom invalidation flow, with a branded background image.)
 
-- **Recovery**: designates a flow for recovery. This flow normally contains an [**Identification**](../../stages/identification/index.md) stage to find the user. It can also contain any amount of verification stages, such as [**Email**](../../stages/email/index.mdx) or [**CAPTCHA**](../../stages/captcha/index.md). Afterwards, use the [**Prompt**](../../stages/prompt/index.md) stage to ask the user for a new password and the [**User Write**](../../stages/user_write.md) stage to update the password.
+- **Recovery**: designates a flow for recovery. This flow normally contains an [**Identification**](../../stages/identification/index.mdx) stage to find the user. It can also contain any amount of verification stages, such as [**Email**](../../stages/email/index.mdx) or [**CAPTCHA**](../../stages/captcha/index.md). Afterwards, use the [**Prompt**](../../stages/prompt/index.md) stage to ask the user for a new password and the [**User Write**](../../stages/user_write.md) stage to update the password.
 
 - **Stage configuration**: designates a flow for general setup. This designation doesn't have any constraints in what you can do. For example, by default this designation is used to configure authenticators, like change a password and set up TOTP.
 

website/docs/add-secure-apps/flows-stages/flow/index.md

@@ -20,7 +20,7 @@ When these stages are successfully completed, authentik logs in the user.
 
 By default, policies are evaluated dynamically, right before the stage (to which a policy is bound) is presented to the user. This flexibility allows the login process to continue, change, or stop, based on the success or failure of each policy.
 
-This default behaviour can be altered by enabling the **Evaluate when flow is planned** option on the stage binding. With this setting a _flow plan_ containing all stages is generated upon flow execution. This means that all attached policies are evaluated upon execution. For more information about flow plans, read our [flow context documentation](./context/index.md).
+This default behaviour can be altered by enabling the **Evaluate when flow is planned** option on the stage binding. With this setting a _flow plan_ containing all stages is generated upon flow execution. This means that all attached policies are evaluated upon execution. For more information about flow plans, read our [flow context documentation](./context/index.mdx).
 
 ## Permissions
 

website/docs/add-secure-apps/flows-stages/flow/inspector.md

@@ -2,7 +2,7 @@
 title: Flow Inspector
 ---
 
-The flow inspector, introduced in 2021.10, allows administrators to visually determine how custom flows work, inspect the current [flow context](./context/index.md), and investigate issues.
+The flow inspector, introduced in 2021.10, allows administrators to visually determine how custom flows work, inspect the current [flow context](./context/index.mdx), and investigate issues.
 
 As shown in the screenshot below, the flow inspector displays next to the selected flow (in this case, "Change Password"), with [information](#flow-inspector-details) about that specific flow and flow context.