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