habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: Client-side MDX rendering (#13610)

Browse Source 
* web: Allow build errors to propagate.

* web: Refactor MDX for client-side rendering.

* Remove override

Signed-off-by: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>

* revert css for links and tables

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* web: Move Markdown specific styles.

---------

Signed-off-by: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com>
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Teffen Ellis
2025-03-21 20:32:52 +01:00
committed by GitHub
parent 9538cf4690
commit 0b806b7130
28 changed files with 917 additions and 2431 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/admin/admin-settings/AdminSettingsPage.ts
View File

@ -5,7 +5,6 @@ import "@goauthentik/components/events/ObjectChangelog";
import { AKElement } from "@goauthentik/elements/Base";
import "@goauthentik/elements/CodeMirror";
import "@goauthentik/elements/EmptyState";
import "@goauthentik/elements/Markdown";
import "@goauthentik/elements/PageHeader";
import "@goauthentik/elements/Tabs";
import "@goauthentik/elements/buttons/ModalButton";

4
web/src/admin/applications/ApplicationListPage.ts
View File

@ -3,7 +3,7 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import MDApplication from "@goauthentik/docs/add-secure-apps/applications/index.md";
import "@goauthentik/elements/AppIcon.js";
import { WithBrandConfig } from "@goauthentik/elements/Interface/brandProvider";
import "@goauthentik/elements/Markdown";
import "@goauthentik/elements/ak-mdx";
import "@goauthentik/elements/buttons/SpinnerButton";
import "@goauthentik/elements/forms/DeleteBulkForm";
import "@goauthentik/elements/forms/ModalForm";
@ -89,7 +89,7 @@ export class ApplicationListPage extends WithBrandConfig(TablePage<Application>)
return html`<div class="pf-c-sidebar__panel pf-m-width-25">
<div class="pf-c-card">
<div class="pf-c-card__body">
<ak-markdown .content=${MDApplication}></ak-markdown>
<ak-mdx .url=${MDApplication}></ak-mdx>
</div>
</div>
</div>`;

1
web/src/admin/providers/google_workspace/GoogleWorkspaceProviderViewPage.ts
View File

@ -7,7 +7,6 @@ import { EVENT_REFRESH } from "@goauthentik/common/constants";
import "@goauthentik/components/ak-status-label";
import "@goauthentik/components/events/ObjectChangelog";
import { AKElement } from "@goauthentik/elements/Base";
import "@goauthentik/elements/Markdown";
import "@goauthentik/elements/SyncStatusCard";
import "@goauthentik/elements/Tabs";
import "@goauthentik/elements/buttons/ActionButton";

1
web/src/admin/providers/microsoft_entra/MicrosoftEntraProviderViewPage.ts
View File

@ -6,7 +6,6 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { EVENT_REFRESH } from "@goauthentik/common/constants";
import "@goauthentik/components/events/ObjectChangelog";
import { AKElement } from "@goauthentik/elements/Base";
import "@goauthentik/elements/Markdown";
import "@goauthentik/elements/Tabs";
import "@goauthentik/elements/buttons/ActionButton";
import "@goauthentik/elements/buttons/ModalButton";

10
web/src/admin/providers/oauth2/OAuth2ProviderViewPage.ts
View File

@ -8,8 +8,8 @@ import MDProviderOAuth2 from "@goauthentik/docs/add-secure-apps/providers/oauth2
import { AKElement } from "@goauthentik/elements/Base";
import "@goauthentik/elements/CodeMirror";
import "@goauthentik/elements/EmptyState";
import "@goauthentik/elements/Markdown";
import "@goauthentik/elements/Tabs";
import "@goauthentik/elements/ak-mdx";
import "@goauthentik/elements/buttons/ModalButton";
import "@goauthentik/elements/buttons/SpinnerButton";
@ -357,20 +357,20 @@ export class OAuth2ProviderViewPage extends AKElement {
class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-12-col-on-xl pf-m-12-col-on-2xl"
>
<div class="pf-c-card__body">
<ak-markdown
.content=${MDProviderOAuth2}
<ak-mdx
.url=${MDProviderOAuth2}
.replacers=${[
(input: string) => {
if (!this.provider) {
return input;
}
return input.replaceAll(
"&lt;application slug&gt;",
"<application slug>",
this.provider.assignedApplicationSlug,
);
},
]}
></ak-markdown>
></ak-mdx>
</div>
</div>
</div>`;

23
web/src/admin/providers/proxy/ProxyProviderViewPage.ts
View File

@ -16,10 +16,9 @@ import MDTraefikStandalone from "@goauthentik/docs/add-secure-apps/providers/pro
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";
import "@goauthentik/elements/Markdown";
import { Replacer } from "@goauthentik/elements/Markdown";
import "@goauthentik/elements/Tabs";
import "@goauthentik/elements/ak-mdx";
import type { Replacer } from "@goauthentik/elements/ak-mdx";
import "@goauthentik/elements/buttons/ModalButton";
import "@goauthentik/elements/buttons/SpinnerButton";
import { getURLParam } from "@goauthentik/elements/router/RouteMatch";
@ -127,37 +126,30 @@ export class ProxyProviderViewPage extends AKElement {
{
label: msg("Nginx (Ingress)"),
md: MDNginxIngress,
meta: "providers/proxy/_nginx_ingress.md",
},
{
label: msg("Nginx (Proxy Manager)"),
md: MDNginxPM,
meta: "providers/proxy/_nginx_proxy_manager.md",
},
{
label: msg("Nginx (standalone)"),
md: MDNginxStandalone,
meta: "providers/proxy/_nginx_standalone.md",
},
{
label: msg("Traefik (Ingress)"),
md: MDTraefikIngress,
meta: "providers/proxy/_traefik_ingress.md",
},
{
label: msg("Traefik (Compose)"),
md: MDTraefikCompose,
meta: "providers/proxy/_traefik_compose.md",
},
{
label: msg("Traefik (Standalone)"),
md: MDTraefikStandalone,
meta: "providers/proxy/_traefik_standalone.md",
},
{
label: msg("Caddy (Standalone)"),
md: MDCaddyStandalone,
meta: "providers/proxy/_caddy_standalone.md",
},
];
const replacers: Replacer[] = [
@ -195,11 +187,7 @@ export class ProxyProviderViewPage extends AKElement {
data-tab-title="${server.label}"
class="pf-c-page__main-section pf-m-no-padding-mobile ak-markdown-section"
>
<ak-markdown
.content=${server.md}
.replacers=${replacers}
meta=${server.meta}
></ak-markdown>
<ak-mdx .url=${server.md} .replacers=${replacers}></ak-mdx>
</section>`;
})}</ak-tabs
>`;
@ -265,10 +253,7 @@ export class ProxyProviderViewPage extends AKElement {
</div>
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__body">
<ak-markdown
.content=${MDHeaderAuthentication}
meta="proxy/header_authentication.md"
></ak-markdown>
<ak-mdx .url=${MDHeaderAuthentication}></ak-mdx>
</div>
</div>
</div>`;

7
web/src/admin/providers/scim/SCIMProviderViewPage.ts
View File

@ -9,9 +9,9 @@ import "@goauthentik/components/ak-status-label";
import "@goauthentik/components/events/ObjectChangelog";
import MDSCIMProvider from "@goauthentik/docs/add-secure-apps/providers/scim/index.md";
import { AKElement } from "@goauthentik/elements/Base";
import "@goauthentik/elements/Markdown";
import "@goauthentik/elements/SyncStatusCard";
import "@goauthentik/elements/Tabs";
import "@goauthentik/elements/ak-mdx";
import "@goauthentik/elements/buttons/ActionButton";
import "@goauthentik/elements/buttons/ModalButton";
@ -243,10 +243,7 @@ export class SCIMProviderViewPage extends AKElement {
</div>
<div class="pf-c-card pf-l-grid__item pf-m-5-col">
<div class="pf-c-card__body">
<ak-markdown
.content=${MDSCIMProvider}
meta="providers/scim/index.md"
></ak-markdown>
<ak-mdx .content=${MDSCIMProvider}></ak-mdx>
</div>
</div>
</div>`;

1
web/src/admin/providers/ssf/SSFProviderViewPage.ts
View File

@ -7,7 +7,6 @@ import "@goauthentik/components/events/ObjectChangelog";
import { AKElement } from "@goauthentik/elements/Base";
import "@goauthentik/elements/CodeMirror";
import "@goauthentik/elements/EmptyState";
import "@goauthentik/elements/Markdown";
import "@goauthentik/elements/Tabs";
import "@goauthentik/elements/buttons/ModalButton";
import "@goauthentik/elements/buttons/SpinnerButton";

8
web/src/admin/sources/kerberos/KerberosSourceViewPage.ts
View File

@ -7,9 +7,9 @@ import "@goauthentik/components/events/ObjectChangelog";
import MDSourceKerberosBrowser from "@goauthentik/docs/users-sources/sources/protocols/kerberos/browser.md";
import { AKElement } from "@goauthentik/elements/Base";
import "@goauthentik/elements/CodeMirror";
import "@goauthentik/elements/Markdown";
import "@goauthentik/elements/SyncStatusCard";
import "@goauthentik/elements/Tabs";
import "@goauthentik/elements/ak-mdx";
import "@goauthentik/elements/buttons/ActionButton";
import "@goauthentik/elements/buttons/SpinnerButton";
import "@goauthentik/elements/forms/ModalForm";
@ -186,11 +186,7 @@ export class KerberosSourceViewPage extends AKElement {
${this.renderSyncCards()}
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__body">
<ak-markdown
.content=${MDSourceKerberosBrowser}
meta="users-sources/protocols/kerberos/browser.md"
;
></ak-markdown>
<ak-mdx .url=${MDSourceKerberosBrowser}></ak-mdx>
</div>
</div>
</div>