web/elements: add Markdown component to improve rendering

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

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("<ul>", `<ul class="pf-c-list">`);
+        return html`${unsafeHTML(finalHTML)}`;
+    }
+}

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)}
+                                          <ak-markdown
+                                              md=${this.renderConfigTemplate(MDNginxIngress.html)}
+                                          ></ak-markdown>
                                       </section>
                                       <section
                                           slot="page-nginx-proxy-manager"
                                           data-tab-title="${t`Nginx (Proxy Manager)`}"
                                           class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
                                       >
-                                          ${this.renderConfigTemplate(MDNginxPM.html)}
+                                          <ak-markdown
+                                              md=${this.renderConfigTemplate(MDNginxPM.html)}
+                                          ></ak-markdown>
                                       </section>
                                       <section
                                           slot="page-nginx-standalone"
                                           data-tab-title="${t`Nginx (standalone)`}"
                                           class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
                                       >
-                                          ${this.renderConfigTemplate(MDNginxStandalone.html)}
+                                          <ak-markdown
+                                              md=${this.renderConfigTemplate(
+                                                  MDNginxStandalone.html,
+                                              )}
+                                          ></ak-markdown>
                                       </section>
                                       <section
                                           slot="page-traefik-ingress"
                                           data-tab-title="${t`Traefik (Ingress)`}"
                                           class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
                                       >
-                                          ${this.renderConfigTemplate(MDTraefikIngres.html)}
+                                          <ak-markdown
+                                              md=${this.renderConfigTemplate(MDTraefikIngres.html)}
+                                          ></ak-markdown>
                                       </section>
                                       <section
                                           slot="page-traefik-compose"
                                           data-tab-title="${t`Traefik (Compose)`}"
                                           class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
                                       >
-                                          ${this.renderConfigTemplate(MDTraefikCompose.html)}
+                                          <ak-markdown
+                                              md=${this.renderConfigTemplate(MDTraefikCompose.html)}
+                                          ></ak-markdown>
                                       </section>
                                       <section
                                           slot="page-traefik-standalone"
                                           data-tab-title="${t`Traefik (Standalone)`}"
                                           class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
                                       >
-                                          ${this.renderConfigTemplate(MDTraefikStandalone.html)}
+                                          <ak-markdown
+                                              md=${this.renderConfigTemplate(
+                                                  MDTraefikStandalone.html,
+                                              )}
+                                          ></ak-markdown>
                                       </section>
                                   </ak-tabs>
                               `