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

web/elements: add Markdown component to improve rendering 

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-12-16 12:10:46 +01:00
parent 103e723d8c
commit 83089b47d3
2 changed files with 50 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
web/src/elements/Markdown.ts Normal file
View File

@ -0,0 +1,25 @@
import { CSSResult, LitElement, TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { unsafeHTML } from "lit/directives/unsafe-html.js";
import AKGlobal from "../authentik.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFList from "@patternfly/patternfly/components/List/list.css";
@customElement("ak-markdown")
export class Markdown extends LitElement {
@property()
md?: string;
static get styles(): CSSResult[] {
return [PFList, PFContent, AKGlobal];
}
render(): TemplateResult {
if (!this.md) {
return html``;
}
const finalHTML = this.md.replace("<ul>", `<ul class="pf-c-list">`);
return html`${unsafeHTML(finalHTML)}`;
}
}

34
web/src/pages/providers/proxy/ProxyProviderViewPage.ts
View File

@ -1,7 +1,6 @@
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
import { CSSResult, LitElement, TemplateResult, html } from "lit"; import { CSSResult, LitElement, TemplateResult, html } from "lit";
import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
import { customElement, property } from "lit/decorators.js"; import { customElement, property } from "lit/decorators.js";
import AKGlobal from "../../../authentik.css"; import AKGlobal from "../../../authentik.css";
@ -28,6 +27,7 @@ import { DEFAULT_CONFIG } from "../../../api/Config";
import { EVENT_REFRESH } from "../../../constants"; 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/Tabs"; import "../../../elements/Tabs";
import "../../../elements/buttons/ModalButton"; import "../../../elements/buttons/ModalButton";
import "../../../elements/buttons/SpinnerButton"; import "../../../elements/buttons/SpinnerButton";
@ -90,7 +90,7 @@ export class ProxyProviderViewPage extends LitElement {
}); });
} }
renderConfigTemplate(tmpl: string): TemplateResult { renderConfigTemplate(tmpl: string): string {
// See website/docs/providers/proxy/forward_auth.mdx // See website/docs/providers/proxy/forward_auth.mdx
let final = ""; let final = "";
if (this.provider?.mode === ProxyMode.ForwardSingle) { if (this.provider?.mode === ProxyMode.ForwardSingle) {
@ -103,7 +103,7 @@ export class ProxyProviderViewPage extends LitElement {
.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 html`${unsafeHTML(final)}`; return final;
} }
render(): TemplateResult { render(): TemplateResult {
@ -250,42 +250,58 @@ export class ProxyProviderViewPage extends LitElement {
data-tab-title="${t`Nginx (Ingress)`}" data-tab-title="${t`Nginx (Ingress)`}"
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"
> >
${this.renderConfigTemplate(MDNginxIngress.html)} <ak-markdown
md=${this.renderConfigTemplate(MDNginxIngress.html)}
></ak-markdown>
</section> </section>
<section <section
slot="page-nginx-proxy-manager" slot="page-nginx-proxy-manager"
data-tab-title="${t`Nginx (Proxy Manager)`}" data-tab-title="${t`Nginx (Proxy Manager)`}"
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"
> >
${this.renderConfigTemplate(MDNginxPM.html)} <ak-markdown
md=${this.renderConfigTemplate(MDNginxPM.html)}
></ak-markdown>
</section> </section>
<section <section
slot="page-nginx-standalone" slot="page-nginx-standalone"
data-tab-title="${t`Nginx (standalone)`}" data-tab-title="${t`Nginx (standalone)`}"
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"
> >
${this.renderConfigTemplate(MDNginxStandalone.html)} <ak-markdown
md=${this.renderConfigTemplate(
MDNginxStandalone.html,
)}
></ak-markdown>
</section> </section>
<section <section
slot="page-traefik-ingress" slot="page-traefik-ingress"
data-tab-title="${t`Traefik (Ingress)`}" data-tab-title="${t`Traefik (Ingress)`}"
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"
> >
${this.renderConfigTemplate(MDTraefikIngres.html)} <ak-markdown
md=${this.renderConfigTemplate(MDTraefikIngres.html)}
></ak-markdown>
</section> </section>
<section <section
slot="page-traefik-compose" slot="page-traefik-compose"
data-tab-title="${t`Traefik (Compose)`}" data-tab-title="${t`Traefik (Compose)`}"
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"
> >
${this.renderConfigTemplate(MDTraefikCompose.html)} <ak-markdown
md=${this.renderConfigTemplate(MDTraefikCompose.html)}
></ak-markdown>
</section> </section>
<section <section
slot="page-traefik-standalone" slot="page-traefik-standalone"
data-tab-title="${t`Traefik (Standalone)`}" data-tab-title="${t`Traefik (Standalone)`}"
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"
> >
${this.renderConfigTemplate(MDTraefikStandalone.html)} <ak-markdown
md=${this.renderConfigTemplate(
MDTraefikStandalone.html,
)}
></ak-markdown>
</section> </section>
</ak-tabs> </ak-tabs>
` `