trustchain-oc1-orchestral/authentik
Archived
10
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

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

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

15
web/src/elements/Markdown.ts
View file

@ -6,10 +6,16 @@ import AKGlobal from "../authentik.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css"; import PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFList from "@patternfly/patternfly/components/List/list.css"; import PFList from "@patternfly/patternfly/components/List/list.css";
export interface MarkdownDocument {
html: string;
metadata: { [key: string]: string };
filename: string;
}
@customElement("ak-markdown") @customElement("ak-markdown")
export class Markdown extends LitElement { export class Markdown extends LitElement {
@property() @property({ attribute: false })
md?: string; md?: MarkdownDocument;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFList, PFContent, AKGlobal]; return [PFList, PFContent, AKGlobal];
@ -19,7 +25,8 @@ export class Markdown extends LitElement {
if (!this.md) { if (!this.md) {
return html``; return html``;
} }
const finalHTML = this.md.replace("<ul>", `<ul class="pf-c-list">`); const finalHTML = this.md?.html.replace("<ul>", "<ul class=\"pf-c-list\">");
return html`${unsafeHTML(finalHTML)}`; 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 "*.css";
declare module "*.md" { declare module "*.md" {
const html: string; const html: string;
const metadata: object; const metadata: { [key: string]: string };
const filename: string; const filename: string;
} }

26
web/src/pages/providers/proxy/ProxyProviderViewPage.ts
View file

@ -28,6 +28,7 @@ import { EVENT_REFRESH } from "../../../constants";
import "../../../elements/CodeMirror"; import "../../../elements/CodeMirror";
import { PFColor } from "../../../elements/Label"; import { PFColor } from "../../../elements/Label";
import "../../../elements/Markdown"; import "../../../elements/Markdown";
import { MarkdownDocument } from "../../../elements/Markdown";
import "../../../elements/Tabs"; import "../../../elements/Tabs";
import "../../../elements/buttons/ModalButton"; import "../../../elements/buttons/ModalButton";
import "../../../elements/buttons/SpinnerButton"; 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 // See website/docs/providers/proxy/forward_auth.mdx
let final = "";
if (this.provider?.mode === ProxyMode.ForwardSingle) { if (this.provider?.mode === ProxyMode.ForwardSingle) {
final = tmpl markdown.html = markdown.html
.replaceAll("authentik.company", window.location.hostname) .replaceAll("authentik.company", window.location.hostname)
.replaceAll("outpost.company", window.location.hostname) .replaceAll("outpost.company", window.location.hostname)
.replaceAll("app.company", this.provider?.externalHost || ""); .replaceAll("app.company", this.provider?.externalHost || "");
} else if (this.provider?.mode == ProxyMode.ForwardDomain) { } else if (this.provider?.mode == ProxyMode.ForwardDomain) {
final = tmpl markdown.html = markdown.html
.replaceAll("authentik.company", window.location.hostname) .replaceAll("authentik.company", window.location.hostname)
.replaceAll("outpost.company", this.provider?.externalHost || ""); .replaceAll("outpost.company", this.provider?.externalHost || "");
} }
return final; return markdown;
} }
render(): TemplateResult { 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" class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
> >
<ak-markdown <ak-markdown
md=${this.renderConfigTemplate(MDNginxIngress.html)} .md=${this.renderConfigTemplate(MDNginxIngress)}
></ak-markdown> ></ak-markdown>
</section> </section>
<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" class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
> >
<ak-markdown <ak-markdown
md=${this.renderConfigTemplate(MDNginxPM.html)} .md=${this.renderConfigTemplate(MDNginxPM)}
></ak-markdown> ></ak-markdown>
</section> </section>
<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" class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
> >
<ak-markdown <ak-markdown
md=${this.renderConfigTemplate( .md=${this.renderConfigTemplate(MDNginxStandalone)}
MDNginxStandalone.html,
)}
></ak-markdown> ></ak-markdown>
</section> </section>
<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" class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
> >
<ak-markdown <ak-markdown
md=${this.renderConfigTemplate(MDTraefikIngres.html)} .md=${this.renderConfigTemplate(MDTraefikIngres)}
></ak-markdown> ></ak-markdown>
</section> </section>
<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" class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
> >
<ak-markdown <ak-markdown
md=${this.renderConfigTemplate(MDTraefikCompose.html)} .md=${this.renderConfigTemplate(MDTraefikCompose)}
></ak-markdown> ></ak-markdown>
</section> </section>
<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" class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile"
> >
<ak-markdown <ak-markdown
md=${this.renderConfigTemplate( .md=${this.renderConfigTemplate(MDTraefikStandalone)}
MDTraefikStandalone.html,
)}
></ak-markdown> ></ak-markdown>
</section> </section>
</ak-tabs> </ak-tabs>