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/customize/blueprints/v1/models.mdx

@@ -4,7 +4,7 @@ Some models behave differently and allow for access to different API fields when
 
 ## `authentik_core.token`
 
-### `key` <span class="badge badge--version">authentik 2023.4+</span>
+### `key`
 
 Via the standard API, a token's key cannot be changed, it can only be rotated. This is to ensure a high entropy in it's key, and to prevent insecure data from being used. However, when provisioning tokens via a blueprint, it may be required to set a token to an existing value.
 
@@ -26,7 +26,7 @@ For example:
 
 ## `authentik_core.user`
 
-### `password` <span class="badge badge--version">authentik 2023.6+</span>
+### `password`
 
 Via the standard API, a user's password can only be set via the separate `/api/v3/core/users/<id>/set_password/` endpoint. In blueprints, the password of a user can be set using the `password` field.
 
@@ -45,7 +45,7 @@ For example:
       password: this-should-be-a-long-value
 ```
 
-### `permissions` <span class="badge badge--version">authentik 2024.8+</span>
+### `permissions`:ak-version[2024.8]
 
 The `permissions` field can be used to set global permissions for a user. A full list of possible permissions is included in the JSON schema for blueprints.
 
@@ -63,7 +63,7 @@ For example:
 
 ## `authentik_core.application`
 
-### `icon` <span class="badge badge--version">authentik 2023.5+</span>
+### `icon`
 
 Application icons can be directly set to URLs with the `icon` field.
 
@@ -81,7 +81,7 @@ For example:
 
 ## `authentik_sources_oauth.oauthsource`, `authentik_sources_saml.samlsource`, `authentik_sources_plex.plexsource`
 
-### `icon` <span class="badge badge--version">authentik 2023.5+</span>
+### `icon`
 
 Source icons can be directly set to URLs with the `icon` field.
 
@@ -99,7 +99,7 @@ For example:
 
 ## `authentik_flows.flow`
 
-### `icon` <span class="badge badge--version">authentik 2023.5+</span>
+### `icon`
 
 Flow backgrounds can be directly set to URLs with the `background` field.
 
@@ -119,7 +119,7 @@ For example:
 
 ## `authentik_rbac.role`
 
-### `permissions` <span class="badge badge--version">authentik 2024.8+</span>
+### `permissions`:ak-version[2024.8]
 
 The `permissions` field can be used to set global permissions for a role. A full list of possible permissions is included in the JSON schema for blueprints.
 

website/docs/customize/blueprints/v1/tags.mdx

@@ -4,7 +4,7 @@ To use the custom tags with your preferred editor, you must make the editor awar
 
 For VS Code, for example, add these entries to your `settings.json`:
 
-```
+```json
 {
     "yaml.customTags": [
         "!Condition sequence",
@@ -301,7 +301,7 @@ The above example will resolve to something like this:
     - "bar: (index: 2, letter: r)"
 ```
 
-#### `!AtIndex` <span class="badge badge--version">authentik 2024.12+</span>
+#### `!AtIndex`:ak-version[2024.12]
 
 Minimal example: