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

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

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)}`;
     }