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:
parent
83089b47d3
commit
59493c02c4
|
@ -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)}`;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
declare module "*.css";
|
||||
declare module "*.md" {
|
||||
const html: string;
|
||||
const metadata: object;
|
||||
const metadata: { [key: string]: string };
|
||||
const filename: string;
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
Reference in New Issue