diff --git a/web/src/elements/Markdown.ts b/web/src/elements/Markdown.ts
new file mode 100644
index 000000000..c95d302ef
--- /dev/null
+++ b/web/src/elements/Markdown.ts
@@ -0,0 +1,25 @@
+import { CSSResult, LitElement, TemplateResult, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+
+import AKGlobal from "../authentik.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import PFList from "@patternfly/patternfly/components/List/list.css";
+
+@customElement("ak-markdown")
+export class Markdown extends LitElement {
+ @property()
+ md?: string;
+
+ static get styles(): CSSResult[] {
+ return [PFList, PFContent, AKGlobal];
+ }
+
+ render(): TemplateResult {
+ if (!this.md) {
+ return html``;
+ }
+ const finalHTML = this.md.replace("
", ``);
+ return html`${unsafeHTML(finalHTML)}`;
+ }
+}
diff --git a/web/src/pages/providers/proxy/ProxyProviderViewPage.ts b/web/src/pages/providers/proxy/ProxyProviderViewPage.ts
index 7192fffa7..03a655c15 100644
--- a/web/src/pages/providers/proxy/ProxyProviderViewPage.ts
+++ b/web/src/pages/providers/proxy/ProxyProviderViewPage.ts
@@ -1,7 +1,6 @@
import { t } from "@lingui/macro";
import { CSSResult, LitElement, TemplateResult, html } from "lit";
-import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
import { customElement, property } from "lit/decorators.js";
import AKGlobal from "../../../authentik.css";
@@ -28,6 +27,7 @@ import { DEFAULT_CONFIG } from "../../../api/Config";
import { EVENT_REFRESH } from "../../../constants";
import "../../../elements/CodeMirror";
import { PFColor } from "../../../elements/Label";
+import "../../../elements/Markdown";
import "../../../elements/Tabs";
import "../../../elements/buttons/ModalButton";
import "../../../elements/buttons/SpinnerButton";
@@ -90,7 +90,7 @@ export class ProxyProviderViewPage extends LitElement {
});
}
- renderConfigTemplate(tmpl: string): TemplateResult {
+ renderConfigTemplate(tmpl: string): string {
// See website/docs/providers/proxy/forward_auth.mdx
let final = "";
if (this.provider?.mode === ProxyMode.ForwardSingle) {
@@ -103,7 +103,7 @@ export class ProxyProviderViewPage extends LitElement {
.replaceAll("authentik.company", window.location.hostname)
.replaceAll("outpost.company", this.provider?.externalHost || "");
}
- return html`${unsafeHTML(final)}`;
+ return final;
}
render(): TemplateResult {
@@ -250,42 +250,58 @@ export class ProxyProviderViewPage extends LitElement {
data-tab-title="${t`Nginx (Ingress)`}"
class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
>
- ${this.renderConfigTemplate(MDNginxIngress.html)}
+
- ${this.renderConfigTemplate(MDNginxPM.html)}
+
- ${this.renderConfigTemplate(MDNginxStandalone.html)}
+
- ${this.renderConfigTemplate(MDTraefikIngres.html)}
+
- ${this.renderConfigTemplate(MDTraefikCompose.html)}
+
- ${this.renderConfigTemplate(MDTraefikStandalone.html)}
+
`