80 lines
2.6 KiB
TypeScript
80 lines
2.6 KiB
TypeScript
import "@goauthentik/elements/Alert";
|
|
import { AKElement } from "@goauthentik/elements/Base";
|
|
|
|
import { CSSResult, TemplateResult, html } from "lit";
|
|
import { customElement, property } from "lit/decorators.js";
|
|
import { unsafeHTML } from "lit/directives/unsafe-html.js";
|
|
|
|
import AKGlobal from "@goauthentik/common/styles/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;
|
|
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``;
|
|
}
|
|
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)}`;
|
|
}
|
|
}
|