web/admin: rework markdown, correctly render Admonitions, fix links

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

web/src/elements/Alert.ts

@@ -0,0 +1,41 @@
+import { AKElement } from "@goauthentik/elements/Base";
+
+import { CSSResult, TemplateResult, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
+import PFAlert from "@patternfly/patternfly/components/Alert/alert.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+
+export enum Level {
+    Warning = "pf-m-warning",
+    Info = "pf-m-info",
+    Success = "pf-m-success",
+    Danger = "pf-m-danger",
+}
+
+@customElement("ak-alert")
+export class Alert extends AKElement {
+    @property({ type: Boolean })
+    inline = false;
+
+    @property()
+    level: Level = Level.Warning;
+
+    static get styles(): CSSResult[] {
+        return [PFBase, PFAlert, AKGlobal];
+    }
+
+    render(): TemplateResult {
+        return html`<div
+            class="pf-c-alert ${this.inline ? html`pf-m-inline` : html``} ${this.level}"
+        >
+            <div class="pf-c-alert__icon">
+                <i class="fas fa-exclamation-circle"></i>
+            </div>
+            <h4 class="pf-c-alert__title">
+                <slot></slot>
+            </h4>
+        </div>`;
+    }
+}

web/src/elements/Markdown.ts

@@ -1,3 +1,4 @@
+import "@goauthentik/elements/Alert";
 import { AKElement } from "@goauthentik/elements/Base";
 
 import { CSSResult, TemplateResult, html } from "lit";
@@ -12,22 +13,66 @@ export interface MarkdownDocument {
     html: string;
     metadata: { [key: string]: string };
     filename: string;
+    path: string;
 }
 
+export type Replacer = (input: string, md: MarkdownDocument) => string;
+
 @customElement("ak-markdown")
 export class Markdown extends AKElement {
     @property({ attribute: false })
     md?: MarkdownDocument;
 
+    @property({ attribute: false })
+    replacers: Replacer[] = [];
+
+    defaultReplacers: Replacer[] = [
+        this.replaceAdmonitions,
+        this.replaceList,
+        this.replaceRelativeLinks,
+    ];
+
     static get styles(): CSSResult[] {
         return [PFList, PFContent, AKGlobal];
     }
 
+    replaceAdmonitions(input: string): string {
+        const admonitionStart = /:::(\w+)<br\s\/>/gm;
+        const admonitionEnd = /:::/gm;
+        return input
+            .replaceAll(admonitionStart, "<ak-alert level=\"$1\">")
+            .replaceAll(admonitionEnd, "</ak-alert>");
+    }
+
+    replaceList(input: string): string {
+        return input.replace("<ul>", "<ul class='pf-c-list'>");
+    }
+
+    replaceRelativeLinks(input: string, md: MarkdownDocument): string {
+        const relativeLink = /href=".(.*)"/gm;
+        const cwd = process.env.CWD as string;
+        // cwd will point to $root/web, but the docs are in $root/website/docs
+        let relPath = md.path.replace(cwd + "site", "");
+        if (md.filename === "index.md") {
+            relPath = relPath.replace("index.md", "");
+        }
+        const baseURL = "https://goauthentik.io";
+        const fullURL = `${baseURL}${relPath}.$1`;
+        return input.replace(relativeLink, `href="${fullURL}" target="_blank"`);
+    }
+
     render(): TemplateResult {
         if (!this.md) {
             return html``;
         }
-        const finalHTML = this.md?.html.replace("<ul>", "<ul class='pf-c-list'>");
+        let finalHTML = this.md.html;
+        const replacers = [...this.defaultReplacers, ...this.replacers];
+        replacers.forEach((r) => {
+            if (!this.md) {
+                return;
+            }
+            finalHTML = r(finalHTML, this.md);
+        });
         return html`${this.md?.metadata.title ? html`<h2>${this.md.metadata.title}</h2>` : html``}
         ${unsafeHTML(finalHTML)}`;
     }