habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: Fix inline documentation rendering (#13379)

Browse Source 
web: Fix issues surrounding markdown rendering.

- Fix issue where Mermaid diagrams do not render.
- Fix link colors in dark mode.
- Fix anchored links triggering router.
- Fix issue where links occasionally link to missing page.
This commit is contained in:
Teffen Ellis
2025-03-19 17:09:47 +01:00
committed by GitHub
parent 74292e6c23
commit b6442c233d
26 changed files with 5117 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/admin/applications/ApplicationListPage.ts
View File

@ -89,7 +89,7 @@ export class ApplicationListPage extends WithBrandConfig(TablePage<Application>)
return html`<div class="pf-c-sidebar__panel pf-m-width-25">
<div class="pf-c-card">
<div class="pf-c-card__body">
<ak-markdown .md=${MDApplication} meta="applications/index.md"></ak-markdown>
<ak-markdown .content=${MDApplication}></ak-markdown>
</div>
</div>
</div>`;

9
web/src/admin/providers/oauth2/OAuth2ProviderViewPage.ts
View File

@ -221,7 +221,7 @@ export class OAuth2ProviderViewPage extends AKElement {
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
<div class="pf-c-description-list__text pf-m-monospace">
${this.provider.clientId}
</div>
</dd>
@ -236,7 +236,9 @@ export class OAuth2ProviderViewPage extends AKElement {
<div class="pf-c-description-list__text">
<ul>
${this.provider.redirectUris.map((ru) => {
return html`<li>${ru.matchingMode}: ${ru.url}</li>`;
return html`<li class="pf-m-monospace">
${ru.matchingMode}: ${ru.url}
</li>`;
})}
</ul>
</div>
@ -356,6 +358,7 @@ export class OAuth2ProviderViewPage extends AKElement {
>
<div class="pf-c-card__body">
<ak-markdown
.content=${MDProviderOAuth2}
.replacers=${[
(input: string) => {
if (!this.provider) {
@ -367,8 +370,6 @@ export class OAuth2ProviderViewPage extends AKElement {
);
},
]}
.md=${MDProviderOAuth2}
meta="providers/oauth2/index.md"
></ak-markdown>
</div>
</div>

4
web/src/admin/providers/proxy/ProxyProviderViewPage.ts
View File

@ -196,8 +196,8 @@ export class ProxyProviderViewPage extends AKElement {
class="pf-c-page__main-section pf-m-no-padding-mobile ak-markdown-section"
>
<ak-markdown
.content=${server.md}
.replacers=${replacers}
.md=${server.md}
meta=${server.meta}
></ak-markdown>
</section>`;
@ -266,7 +266,7 @@ export class ProxyProviderViewPage extends AKElement {
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__body">
<ak-markdown
.md=${MDHeaderAuthentication}
.content=${MDHeaderAuthentication}
meta="proxy/header_authentication.md"
></ak-markdown>
</div>

2
web/src/admin/providers/scim/SCIMProviderViewPage.ts
View File

@ -244,7 +244,7 @@ export class SCIMProviderViewPage extends AKElement {
<div class="pf-c-card pf-l-grid__item pf-m-5-col">
<div class="pf-c-card__body">
<ak-markdown
.md=${MDSCIMProvider}
.content=${MDSCIMProvider}
meta="providers/scim/index.md"
></ak-markdown>
</div>

5
web/src/admin/providers/ssf/SSFProviderViewPage.ts
View File

@ -137,10 +137,13 @@ export class SSFProviderViewPage extends AKElement {
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
<input
class="pf-c-form-control"
class="pf-c-form-control pf-m-monospace"
readonly
type="text"
value=${this.provider.ssfUrl || ""}
placeholder=${this.provider.ssfUrl
? msg("SSF URL")
: msg("No assigned application")}
/>
</div>
</dd>

2
web/src/admin/sources/kerberos/KerberosSourceViewPage.ts
View File

@ -187,7 +187,7 @@ export class KerberosSourceViewPage extends AKElement {
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__body">
<ak-markdown
.md=${MDSourceKerberosBrowser}
.content=${MDSourceKerberosBrowser}
meta="users-sources/protocols/kerberos/browser.md"
;
></ak-markdown>

107
web/src/common/styles/authentik.css
View File

@ -1,3 +1,5 @@
/* #region Global */
:root {
--ak-accent: #fd4b2d;
@ -45,7 +47,44 @@ html > form > input {
left: -2000px;
}
/*#region Icons*/
/* #endregion */
/* #region Anchors */
a {
--pf-global--link--Color: var(--pf-global--link--Color--light);
--pf-global--link--Color--hover: var(--pf-global--link--Color--light--hover);
--pf-global--link--Color--visited: var(--pf-global--link--Color);
}
/*
Note that order of anchor pseudo-selectors must follow:
1. link
2. visited
3. hover
4. active
*/
a:link {
color: var(--pf-global--link--Color);
}
a:visited {
color: var(--pf-global--link--Color--visited);
}
a:hover {
color: var(--pf-global--link--Color--hover);
}
a:active {
color: var(--pf-global--link--Color);
}
/* #endregion */
/* #region Icons */
.pf-icon {
display: inline-block;
@ -66,7 +105,7 @@ html > form > input {
);
}
/*#endregion*/
/* #endregion */
.pf-c-page__header {
z-index: 0;
@ -74,15 +113,15 @@ html > form > input {
box-shadow: var(--pf-global--BoxShadow--lg-bottom);
}
/*****************************
* Login adjustments
*****************************/
/* #region Login adjustments */
/* Ensure card is displayed on small screens */
.pf-c-login__main {
display: block;
position: relative;
width: 100%;
}
.ak-login-container {
height: calc(100vh - var(--pf-global--spacer--lg) - var(--pf-global--spacer--lg));
width: 35rem;
@ -90,30 +129,34 @@ html > form > input {
flex-direction: column;
justify-content: space-between;
}
.pf-c-login__header {
flex-grow: 1;
}
.pf-c-login__footer {
flex-grow: 2;
display: flex;
justify-content: end;
flex-direction: column;
}
.pf-c-login__footer ul.pf-c-list.pf-m-inline {
justify-content: center;
padding: 2rem 0;
}
/*****************************
* End Login adjustments
*****************************/
/* #endregion */
.pf-c-content h1 {
display: flex;
align-items: flex-start;
}
.pf-c-content h1 i {
font-style: normal;
}
.pf-c-content h1 :first-child {
margin-right: var(--pf-global--spacer--sm);
}
@ -127,9 +170,11 @@ html > form > input {
.pf-m-success {
color: var(--pf-global--success-color--100) !important;
}
.pf-m-warning {
color: var(--pf-global--warning-color--100);
}
.pf-m-danger {
color: var(--pf-global--danger-color--100);
}
@ -167,6 +212,7 @@ html > form > input {
justify-content: center;
width: 100%;
}
.ak-brand img {
padding: 0 2rem;
max-height: inherit;
@ -181,3 +227,48 @@ html > form > input {
.pf-c-data-list {
padding-inline-start: 0;
}
/* #region Mermaid */
svg[id^="mermaid-svg-"] {
.rect {
fill: var(
--ak-mermaid-box-background-color,
var(--pf-global--BackgroundColor--light-300)
) !important;
}
.messageText {
stroke-width: 4;
fill: var(--ak-mermaid-message-text) !important;
paint-order: stroke;
}
}
/* #endregion */
/* #region Tables */
table thead,
table tr:nth-child(2n) {
background-color: var(
--ak-table-stripe-background,
var(--pf-global--BackgroundColor--light-200)
);
}
table td,
table th {
border: var(--pf-table-border-width) solid var(--ifm-table-border-color);
padding: var(--pf-global--spacer--md);
}
/* #endregion */
/* #region Code blocks */
pre:has(.hljs) {
padding: var(--pf-global--spacer--md);
}
/* #endregion */

98
web/src/common/styles/one-dark.css Normal file
View File

@ -0,0 +1,98 @@
/*
Atom One Dark by Daniel Gamage
Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
base: #282c34
mono-1: #abb2bf
mono-2: #818896
mono-3: #5c6370
hue-1: #56b6c2
hue-2: #61aeee
hue-3: #c678dd
hue-4: #98c379
hue-5: #e06c75
hue-5-2: #be5046
hue-6: #d19a66
hue-6-2: #e6c07b
*/
.hljs {
color: #abb2bf;
background: #282c34;
}
pre:has(.hljs) {
background: #282c34;
}
.hljs-comment,
.hljs-quote {
color: #5c6370;
font-style: italic;
}
.hljs-doctag,
.hljs-keyword,
.hljs-formula {
color: #c678dd;
}
.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst {
color: #e06c75;
}
.hljs-literal {
color: #56b6c2;
}
.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta .hljs-string {
color: #98c379;
}
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number {
color: #d19a66;
}
.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title {
color: #61aeee;
}
.hljs-built_in,
.hljs-title.class_,
.hljs-class .hljs-title {
color: #e6c07b;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
.hljs-link {
text-decoration: underline;
}

167
web/src/common/styles/theme-dark.css
View File

@ -1,59 +1,84 @@
/* #region Global */
:root {
--pf-global--Color--100: var(--ak-dark-foreground) !important;
--ak-global--Color--100: var(--ak-dark-foreground) !important;
--pf-c-page__main-section--m-light--BackgroundColor: var(--ak-dark-background-darker);
--pf-global--link--Color: var(--ak-dark-foreground-link) !important;
--pf-global--BorderColor--100: var(--ak-dark-background-lighter) !important;
--ak-mermaid-message-text: var(--ak-dark-foreground) !important;
--ak-mermaid-box-background-color: var(--ak-dark-background-lighter) !important;
--ak-table-stripe-background: var(--pf-global--BackgroundColor--dark-200);
}
body {
background-color: var(--ak-dark-background) !important;
}
.pf-c-radio {
--pf-c-radio__label--Color: var(--ak-dark-foreground);
}
/* Global page background colour */
.pf-c-page {
--pf-c-page--BackgroundColor: var(--ak-dark-background);
}
.pf-c-drawer__content {
--pf-c-drawer__content--BackgroundColor: var(--ak-dark-background);
}
.pf-c-title {
color: var(--ak-dark-foreground);
}
.pf-u-mb-xl {
color: var(--ak-dark-foreground);
}
/* #endregion */
/* Header sections */
.pf-c-page__main-section {
--pf-c-page__main-section--BackgroundColor: var(--ak-dark-background);
}
.sidebar-trigger,
.notification-trigger {
background-color: transparent !important;
}
.pf-c-content {
color: var(--ak-dark-foreground);
}
/* Card */
/* #region Card */
.pf-c-card {
--pf-c-card--BackgroundColor: var(--ak-dark-background-light);
color: var(--ak-dark-foreground);
}
.pf-c-card.pf-m-non-selectable-raised {
--pf-c-card--BackgroundColor: var(--ak-dark-background-lighter);
}
.pf-c-card__title,
.pf-c-card__body {
color: var(--ak-dark-foreground);
}
/* #endregion */
.pf-c-toolbar {
--pf-c-toolbar--BackgroundColor: var(--ak-dark-background-light);
}
.pf-c-pagination.pf-m-bottom {
background-color: var(--ak-dark-background-light);
}
/* table */
/* #region Tables */
.pf-c-table {
--pf-c-table--BackgroundColor: var(--ak-dark-background-light);
--pf-c-table--BorderColor: var(--ak-dark-background-lighter);
@ -61,41 +86,58 @@ body {
--pf-c-table--tr--m-hoverable--hover--BackgroundColor: var(--ak-dark-background-light-ish);
--pf-c-table--tr--m-hoverable--active--BackgroundColor: var(--ak-dark-background-lighter);
}
.pf-c-table__text {
color: var(--ak-dark-foreground);
}
.pf-c-table__sort:not(.pf-m-selected) .pf-c-table__button .pf-c-table__text {
color: var(--ak-dark-foreground) !important;
}
.pf-c-table__sort-indicator i {
color: var(--ak-dark-foreground) !important;
}
.pf-c-table__expandable-row.pf-m-expanded {
--pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--ak-dark-background-lighter);
}
/* tabs */
/* #endregion */
/* #region Tabs */
.pf-c-tabs {
background-color: transparent;
}
.pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__list::before {
border-color: transparent;
}
.pf-c-tabs.pf-m-box .pf-c-tabs__item.pf-m-current:first-child .pf-c-tabs__link::before {
border-color: transparent;
}
.pf-c-tabs__link::before {
border-color: transparent;
}
.pf-c-tabs__item.pf-m-current {
--pf-c-tabs__link--after--BorderColor: var(--ak-accent);
}
.pf-c-tabs__link {
--pf-c-tabs__link--Color: var(--ak-dark-foreground);
}
.pf-c-tabs.pf-m-vertical .pf-c-tabs__link {
background-color: transparent;
}
/* table, on mobile */
/* #endregion */
/* #Region Mobile Tables */
@media screen and (max-width: 1200px) {
.pf-m-grid-xl.pf-c-table tbody:first-of-type {
border-top-color: var(--ak-dark-background);
@ -104,32 +146,42 @@ body {
border-bottom-color: var(--ak-dark-background);
}
}
/* #endregion */
/* class for pagination text */
.pf-c-options-menu__toggle {
color: var(--ak-dark-foreground);
}
/* table icon used for expanding rows */
.pf-c-table__toggle-icon {
color: var(--ak-dark-foreground);
}
/* expandable elements */
.pf-c-expandable-section__toggle-text {
color: var(--ak-dark-foreground);
}
.pf-c-expandable-section__toggle-icon {
color: var(--ak-dark-foreground);
}
.pf-c-expandable-section.pf-m-display-lg {
background-color: var(--ak-dark-background-light-ish);
}
/* header for form group */
.pf-c-form__field-group-header-title-text {
color: var(--ak-dark-foreground);
}
.pf-c-form__field-group {
border-bottom: 0;
}
/* inputs */
/* #region Inputs */
optgroup,
option {
color: var(--ak-dark-foreground);
@ -138,9 +190,11 @@ select[multiple] optgroup:checked,
select[multiple] option:checked {
color: var(--ak-dark-background);
}
.pf-c-input-group {
--pf-c-input-group--BackgroundColor: transparent;
}
.pf-c-form-control {
--pf-c-form-control--BorderTopColor: transparent !important;
--pf-c-form-control--BorderRightColor: transparent !important;
@ -149,12 +203,15 @@ select[multiple] option:checked {
--pf-c-form-control--BackgroundColor: var(--ak-dark-background-light);
--pf-c-form-control--Color: var(--ak-dark-foreground) !important;
}
.pf-c-form-control:disabled {
background-color: var(--ak-dark-background-light);
}
.pf-c-form-control[readonly] {
background-color: var(--ak-dark-background-light) !important;
}
.pf-c-switch__input:checked ~ .pf-c-switch__label {
--pf-c-switch__input--checked__label--Color: var(--ak-dark-foreground);
}
@ -162,38 +219,47 @@ input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(1);
}
/* select toggle */
.pf-c-select__toggle::before {
--pf-c-select__toggle--before--BorderTopColor: var(--ak-dark-background-lighter);
--pf-c-select__toggle--before--BorderRightColor: var(--ak-dark-background-lighter);
--pf-c-select__toggle--before--BorderLeftColor: var(--ak-dark-background-lighter);
}
.pf-c-select__toggle.pf-m-typeahead {
--pf-c-select__toggle--BackgroundColor: var(--ak-dark-background-light);
}
.pf-c-select__menu {
--pf-c-select__menu--BackgroundColor: var(--ak-dark-background-light-ish);
color: var(--ak-dark-foreground);
}
.pf-c-select__menu-item {
color: var(--ak-dark-foreground);
}
.pf-c-select__menu-wrapper:hover,
.pf-c-select__menu-item:hover {
--pf-c-select__menu-item--hover--BackgroundColor: var(--ak-dark-background-lighter);
}
.pf-c-select__menu-wrapper:focus-within,
.pf-c-select__menu-wrapper.pf-m-focus,
.pf-c-select__menu-item:focus,
.pf-c-select__menu-item.pf-m-focus {
--pf-c-select__menu-item--focus--BackgroundColor: var(--ak-dark-background-light-ish);
}
.pf-c-button:disabled {
color: var(--ak-dark-background-lighter);
}
.pf-c-button.pf-m-plain:hover {
color: var(--ak-dark-foreground);
}
.pf-c-button.pf-m-control {
--pf-c-button--after--BorderColor: var(--ak-dark-background-lighter)
var(--ak-dark-background-lighter) var(--pf-c-button--m-control--after--BorderBottomColor)
@ -201,92 +267,127 @@ input[type="date"]::-webkit-calendar-picker-indicator {
background-color: var(--ak-dark-background-light);
color: var(--ak-dark-foreground);
}
.pf-m-tertiary,
.pf-c-button.pf-m-tertiary {
--pf-c-button--after--BorderColor: var(--ak-dark-foreground-darker);
color: var(--ak-dark-foreground-darker);
}
.pf-m-tertiary:hover,
.pf-c-button.pf-m-tertiary:hover {
--pf-c-button--after--BorderColor: var(--ak-dark-background-lighter);
}
.pf-c-form__label-text {
color: var(--ak-dark-foreground);
}
.pf-c-check__label {
color: var(--ak-dark-foreground);
}
.pf-c-dropdown__toggle::before {
border-color: transparent;
}
.pf-c-dropdown__menu {
--pf-c-dropdown__menu--BackgroundColor: var(--ak-dark-background);
}
.pf-c-dropdown__menu-item {
--pf-c-dropdown__menu-item--BackgroundColor: var(--ak-dark-background);
--pf-c-dropdown__menu-item--Color: var(--ak-dark-foreground);
}
.pf-c-dropdown__menu-item:hover,
.pf-c-dropdown__menu-item:focus {
--pf-c-dropdown__menu-item--BackgroundColor: var(--ak-dark-background-light-ish);
--pf-c-dropdown__menu-item--Color: var(--ak-dark-foreground);
}
.pf-c-toggle-group__button {
color: var(--ak-dark-foreground) !important;
}
.pf-c-toggle-group__button:not(.pf-m-selected) {
background-color: var(--ak-dark-background-light) !important;
}
.pf-c-toggle-group__button.pf-m-selected {
color: var(--ak-dark-foreground) !important;
background-color: var(--pf-global--primary-color--100) !important;
}
/* inputs help text */
.pf-c-form__helper-text:not(.pf-m-error) {
color: var(--ak-dark-foreground);
}
/* modal */
/* #endregion */
/* #region Modal */
.pf-c-modal-box,
.pf-c-modal-box__header,
.pf-c-modal-box__footer,
.pf-c-modal-box__body {
background-color: var(--ak-dark-background);
}
/* sidebar */
/* #endregion */
/* #region Sidebar */
.pf-c-nav {
background-color: var(--ak-dark-background-light);
}
/* flows */
/* #endregion */
/* #region Flows */
.pf-c-login__main {
--pf-c-login__main--BackgroundColor: var(--ak-dark-background);
}
.pf-c-login__main-body,
.pf-c-login__main-header,
.pf-c-login__main-header-desc {
color: var(--ak-dark-foreground);
}
.pf-c-login__main-footer-links-item img,
.pf-c-login__main-footer-links-item .fas {
filter: invert(1);
}
.pf-c-login__main-footer-band {
--pf-c-login__main-footer-band--BackgroundColor: var(--ak-dark-background-lighter);
color: var(--ak-dark-foreground);
}
.form-control-static {
color: var(--ak-dark-foreground);
}
/* notifications */
/* #endregion */
/* #region Notifications */
.pf-c-drawer__panel {
background-color: var(--ak-dark-background);
}
.pf-c-notification-drawer {
--pf-c-notification-drawer--BackgroundColor: var(--ak-dark-background);
}
.pf-c-notification-drawer__header {
background-color: var(--ak-dark-background-lighter);
color: var(--ak-dark-foreground);
}
.pf-c-notification-drawer__list-item {
background-color: var(--ak-dark-background-light-ish);
color: var(--ak-dark-foreground);
@ -294,46 +395,84 @@ input[type="date"]::-webkit-calendar-picker-indicator {
--ak-dark-background-lighter
) !important;
}
/* data list */
/* #endregion */
/* #region Data List */
.pf-c-data-list {
padding-inline-start: 0;
border-top-color: var(--ak-dark-background-lighter);
}
.pf-c-data-list__item {
--pf-c-data-list__item--BackgroundColor: transparent;
--pf-c-data-list__item--BorderBottomColor: var(--ak-dark-background-lighter);
color: var(--ak-dark-foreground);
}
/* wizards */
/* #endregion */
/* #region Wizards */
.pf-c-wizard__nav {
--pf-c-wizard__nav--BackgroundColor: var(--ak-dark-background-lighter);
--pf-c-wizard__nav--lg--BorderRightColor: transparent;
}
.pf-c-wizard__main {
background-color: var(--ak-dark-background-light-ish);
}
.pf-c-wizard__footer {
--pf-c-wizard__footer--BackgroundColor: var(--ak-dark-background-light-ish);
}
.pf-c-wizard__toggle-num,
.pf-c-wizard__nav-link::before {
--pf-c-wizard__nav-link--before--BackgroundColor: transparent;
}
/* tree view */
/* #endregion */
/* #region Tree view */
.pf-c-tree-view__node {
--pf-c-tree-view__node--Color: var(--ak-dark-foreground);
}
.pf-c-tree-view__node-toggle {
--pf-c-tree-view__node-toggle--Color: var(--ak-dark-foreground);
}
.pf-c-tree-view__node:focus {
--pf-c-tree-view__node--focus--BackgroundColor: var(--ak-dark-background-light-ish);
}
.pf-c-tree-view__content:hover,
.pf-c-tree-view__content:focus-within {
--pf-c-tree-view__node--hover--BackgroundColor: var(--ak-dark-background-light-ish);
}
/* stepper */
/* #endregion */
/* #region Stepper */
.pf-c-progress-stepper__step-title {
--pf-c-progress-stepper__step-title--Color: var(--ak-dark-foreground);
}
/* #endregion */
/* #region Mermaid */
svg[id^="mermaid-svg-"] {
line[class^="messageLine"] {
/*
Mermaid's support for dynamic palette changes leaves a lot to be desired.
This is a workaround to keep content readable while not breaking the rest of the theme.
*/
filter: invert(1) !important;
}
}
/* #endregion */

2
web/src/elements/Base.ts
View File

@ -8,6 +8,7 @@ import { localized } from "@lit/localize";
import { LitElement, ReactiveElement } from "lit";
import AKGlobal from "@goauthentik/common/styles/authentik.css";
import OneDark from "@goauthentik/common/styles/one-dark.css";
import ThemeDark from "@goauthentik/common/styles/theme-dark.css";
import { Config, CurrentBrand, UiThemeEnum } from "@goauthentik/api";
@ -70,6 +71,7 @@ export class AKElement extends LitElement {
styleRoot.adoptedStyleSheets = adaptCSS([
...styleRoot.adoptedStyleSheets,
ensureCSSStyleSheet(AKGlobal),
ensureCSSStyleSheet(OneDark),
]);
this._initTheme(styleRoot);
this._initCustomCSS(styleRoot);

92
web/src/elements/Markdown.ts
View File

@ -1,30 +1,19 @@
import { docLink } from "@goauthentik/common/global";
import "@goauthentik/elements/Alert";
import { Level } from "@goauthentik/elements/Alert";
import { AKElement } from "@goauthentik/elements/Base";
import { matter } from "md-front-matter";
import * as showdown from "showdown";
import { CSSResult, PropertyValues, css, html, nothing } from "lit";
import { CSSResult, PropertyValues, css, nothing } from "lit";
import { customElement, property } from "lit/decorators.js";
import { unsafeHTML } from "lit/directives/unsafe-html.js";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFList from "@patternfly/patternfly/components/List/list.css";
export interface MarkdownDocument {
path: string;
}
export type Replacer = (input: string, md: MarkdownDocument) => string;
const isRelativeLink = /href="(\.[^"]*)"/gm;
const isFile = /[^/]+\.md/;
export type Replacer = (input: string) => string;
@customElement("ak-markdown")
export class Markdown extends AKElement {
@property()
md: string = "";
content: string = "";
@property()
meta: string = "";
@ -32,14 +21,7 @@ export class Markdown extends AKElement {
@property({ attribute: false })
replacers: Replacer[] = [];
docHtml = "";
docTitle = "";
defaultReplacers: Replacer[] = [
this.replaceAdmonitions,
this.replaceList,
this.replaceRelativeLinks,
];
resolvedHTML = "";
static get styles(): CSSResult[] {
return [
@ -53,55 +35,47 @@ export class Markdown extends AKElement {
];
}
converter = new showdown.Converter({ metadata: true, tables: true });
protected firstUpdated(changedProperties: PropertyValues): void {
super.updated(changedProperties);
replaceAdmonitions(input: string): string {
const admonitionStart = /:::(\w+)(<br\s*\/>|\s*$)/gm;
const admonitionEnd = /:::/gm;
return (
input
.replaceAll(admonitionStart, "<ak-alert level='pf-m-$1'>")
.replaceAll(admonitionEnd, "</ak-alert>")
// Workaround for admonitions using caution instead of warning
.replaceAll("pf-m-caution", Level.Warning)
);
}
const headingLinks =
this.shadowRoot?.querySelectorAll<HTMLAnchorElement>("a.markdown-heading") ?? [];
replaceList(input: string): string {
return input.replace("<ul>", "<ul class='pf-c-list'>");
}
for (const headingLink of headingLinks) {
headingLink.addEventListener("click", (ev) => {
ev.preventDefault();
replaceRelativeLinks(input: string, md: MarkdownDocument): string {
const baseName = md.path.replace(isFile, "");
const baseUrl = docLink("");
return input.replace(isRelativeLink, (_match, path) => {
const pathName = path.replace(".md", "");
const link = `docs/${baseName}${pathName}`;
const url = new URL(link, baseUrl).toString();
return `href="${url}" _target="blank" rel="noopener noreferrer"`;
});
const url = new URL(headingLink.href);
const elementID = url.hash.slice(1);
const target = this.shadowRoot?.getElementById(elementID);
if (!target) {
console.warn(`Element with ID ${elementID} not found`);
return;
}
target.scrollIntoView({
behavior: "smooth",
block: "center",
});
});
}
}
willUpdate(properties: PropertyValues<this>) {
if (properties.has("md") || properties.has("meta")) {
const parsedContent = matter(this.md);
const parsedHTML = this.converter.makeHtml(parsedContent.content);
const replacers = [...this.defaultReplacers, ...this.replacers];
this.docTitle = parsedContent?.data?.title ?? "";
this.docHtml = replacers.reduce(
(html, replacer) => replacer(html, { path: this.meta }),
parsedHTML,
if (properties.has("content")) {
this.resolvedHTML = this.replacers.reduce(
(html, replacer) => replacer(html),
this.content,
);
}
}
render() {
if (!this.md) {
return nothing;
}
if (!this.content) return nothing;
return html`${this.docTitle ? html`<h2>${this.docTitle}</h2>` : nothing}
${unsafeHTML(this.docHtml)}`;
return unsafeHTML(this.resolvedHTML);
}
}

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

@ -1,15 +1,19 @@
declare module "*.css";
declare module "*.md" {
/**
* The HTML content of the markdown file.
*/
const html: string;
const metadata: { [key: string]: string };
const filename: string;
export default html;
}
declare module "*.mdx" {
/**
* The HTML content of the markdown file.
*/
const html: string;
const metadata: { [key: string]: string };
const filename: string;
export default html;
}
declare namespace Intl {