web/elements: pass full Markdown object to ak-markdown, get title from metadata

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-12-16 12:18:43 +01:00
parent 83089b47d3
commit 59493c02c4
3 changed files with 23 additions and 20 deletions

View File

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

2
web/src/global.d.ts vendored
View File

@ -1,7 +1,7 @@
declare module "*.css";
declare module "*.md" {
const html: string;
const metadata: object;
const metadata: { [key: string]: string };
const filename: string;
}

View File

@ -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>