web: Fix inline documentation rendering (#13379)

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.

web/src/admin/applications/ApplicationListPage.ts

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

web/src/admin/providers/oauth2/OAuth2ProviderViewPage.ts

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

web/src/admin/providers/proxy/ProxyProviderViewPage.ts

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

web/src/admin/providers/scim/SCIMProviderViewPage.ts

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

web/src/admin/providers/ssf/SSFProviderViewPage.ts

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

web/src/admin/sources/kerberos/KerberosSourceViewPage.ts

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