From 59493c02c483e62142adfb3c9154a855426c0d8a Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Thu, 16 Dec 2021 12:18:43 +0100
Subject: [PATCH] web/elements: pass full Markdown object to ak-markdown, get
 title from metadata

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/elements/Markdown.ts                  | 15 ++++++++---
 web/src/global.d.ts                           |  2 +-
 .../providers/proxy/ProxyProviderViewPage.ts  | 26 ++++++++-----------
 3 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/web/src/elements/Markdown.ts b/web/src/elements/Markdown.ts
index c95d302ef..40561a59f 100644
--- a/web/src/elements/Markdown.ts
+++ b/web/src/elements/Markdown.ts
@@ -6,10 +6,16 @@ import AKGlobal from "../authentik.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFList from "@patternfly/patternfly/components/List/list.css";
 
+export interface MarkdownDocument {
+    html: string;
+    metadata: { [key: string]: string };
+    filename: string;
+}
+
 @customElement("ak-markdown")
 export class Markdown extends LitElement {
-    @property()
-    md?: string;
+    @property({ attribute: false })
+    md?: MarkdownDocument;
 
     static get styles(): CSSResult[] {
         return [PFList, PFContent, AKGlobal];
@@ -19,7 +25,8 @@ export class Markdown extends LitElement {
         if (!this.md) {
             return html``;
         }
-        const finalHTML = this.md.replace("<ul>", `<ul class="pf-c-list">`);
-        return html`${unsafeHTML(finalHTML)}`;
+        const finalHTML = this.md?.html.replace("<ul>", "<ul class=\"pf-c-list\">");
+        return html`${this.md?.metadata.title ? html`<h2>${this.md.metadata.title}</h2>` : html``}
+        ${unsafeHTML(finalHTML)}`;
     }
 }
diff --git a/web/src/global.d.ts b/web/src/global.d.ts
index 203b51ec2..b7b3dfdf8 100644
--- a/web/src/global.d.ts
+++ b/web/src/global.d.ts
@@ -1,7 +1,7 @@
 declare module "*.css";
 declare module "*.md" {
     const html: string;
-    const metadata: object;
+    const metadata: { [key: string]: string };
     const filename: string;
 }
 
diff --git a/web/src/pages/providers/proxy/ProxyProviderViewPage.ts b/web/src/pages/providers/proxy/ProxyProviderViewPage.ts
index 03a655c15..b8909bb43 100644
--- a/web/src/pages/providers/proxy/ProxyProviderViewPage.ts
+++ b/web/src/pages/providers/proxy/ProxyProviderViewPage.ts
@@ -28,6 +28,7 @@ import { EVENT_REFRESH } from "../../../constants";
 import "../../../elements/CodeMirror";
 import { PFColor } from "../../../elements/Label";
 import "../../../elements/Markdown";
+import { MarkdownDocument } from "../../../elements/Markdown";
 import "../../../elements/Tabs";
 import "../../../elements/buttons/ModalButton";
 import "../../../elements/buttons/SpinnerButton";
@@ -90,20 +91,19 @@ export class ProxyProviderViewPage extends LitElement {
         });
     }
 
-    renderConfigTemplate(tmpl: string): string {
+    renderConfigTemplate(markdown: MarkdownDocument): MarkdownDocument {
         // See website/docs/providers/proxy/forward_auth.mdx
-        let final = "";
         if (this.provider?.mode === ProxyMode.ForwardSingle) {
-            final = tmpl
+            markdown.html = markdown.html
                 .replaceAll("authentik.company", window.location.hostname)
                 .replaceAll("outpost.company", window.location.hostname)
                 .replaceAll("app.company", this.provider?.externalHost || "");
         } else if (this.provider?.mode == ProxyMode.ForwardDomain) {
-            final = tmpl
+            markdown.html = markdown.html
                 .replaceAll("authentik.company", window.location.hostname)
                 .replaceAll("outpost.company", this.provider?.externalHost || "");
         }
-        return final;
+        return markdown;
     }
 
     render(): TemplateResult {
@@ -251,7 +251,7 @@ export class ProxyProviderViewPage extends LitElement {
                                           class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
                                       >
                                           <ak-markdown
-                                              md=${this.renderConfigTemplate(MDNginxIngress.html)}
+                                              .md=${this.renderConfigTemplate(MDNginxIngress)}
                                           ></ak-markdown>
                                       </section>
                                       <section
@@ -260,7 +260,7 @@ export class ProxyProviderViewPage extends LitElement {
                                           class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
                                       >
                                           <ak-markdown
-                                              md=${this.renderConfigTemplate(MDNginxPM.html)}
+                                              .md=${this.renderConfigTemplate(MDNginxPM)}
                                           ></ak-markdown>
                                       </section>
                                       <section
@@ -269,9 +269,7 @@ export class ProxyProviderViewPage extends LitElement {
                                           class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
                                       >
                                           <ak-markdown
-                                              md=${this.renderConfigTemplate(
-                                                  MDNginxStandalone.html,
-                                              )}
+                                              .md=${this.renderConfigTemplate(MDNginxStandalone)}
                                           ></ak-markdown>
                                       </section>
                                       <section
@@ -280,7 +278,7 @@ export class ProxyProviderViewPage extends LitElement {
                                           class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
                                       >
                                           <ak-markdown
-                                              md=${this.renderConfigTemplate(MDTraefikIngres.html)}
+                                              .md=${this.renderConfigTemplate(MDTraefikIngres)}
                                           ></ak-markdown>
                                       </section>
                                       <section
@@ -289,7 +287,7 @@ export class ProxyProviderViewPage extends LitElement {
                                           class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
                                       >
                                           <ak-markdown
-                                              md=${this.renderConfigTemplate(MDTraefikCompose.html)}
+                                              .md=${this.renderConfigTemplate(MDTraefikCompose)}
                                           ></ak-markdown>
                                       </section>
                                       <section
@@ -298,9 +296,7 @@ export class ProxyProviderViewPage extends LitElement {
                                           class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
                                       >
                                           <ak-markdown
-                                              md=${this.renderConfigTemplate(
-                                                  MDTraefikStandalone.html,
-                                              )}
+                                              .md=${this.renderConfigTemplate(MDTraefikStandalone)}
                                           ></ak-markdown>
                                       </section>
                                   </ak-tabs>