From 3146e5a50fc2d309302d01180e108d3c0fe2274b Mon Sep 17 00:00:00 2001
From: Ken Sternberg <ken@goauthentik.io>
Date: Fri, 8 Mar 2024 14:15:55 -0800
Subject: [PATCH 1/2] web: fix esbuild issue with style sheets

Getting ESBuild, Lit, and Storybook to all agree on how to read and parse stylesheets is a serious
pain. This fix better identifies the value types (instances) being passed from various sources in
the repo to the three *different* kinds of style processors we're using (the native one, the
polyfill one, and whatever the heck Storybook does internally).

Falling back to using older CSS instantiating techniques one era at a time seems to do the trick.
It's ugly, but in the face of the aggressive styling we use to avoid Flashes of Unstyled Content
(FLoUC), it's the logic with which we're left.

In standard mode, the following warning appears on the console when running a Flow:

```
Autofocus processing was blocked because a document already has a focused element.
```

In compatibility mode, the following **error** appears on the console when running a Flow:

```
crawler-inject.js:1106 Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
    at initDomMutationObservers (crawler-inject.js:1106:18)
    at crawler-inject.js:1114:24
    at Array.forEach (<anonymous>)
    at initDomMutationObservers (crawler-inject.js:1114:10)
    at crawler-inject.js:1549:1
initDomMutationObservers @ crawler-inject.js:1106
(anonymous) @ crawler-inject.js:1114
initDomMutationObservers @ crawler-inject.js:1114
(anonymous) @ crawler-inject.js:1549
```

Despite this error, nothing seems to be broken and flows work as anticipated.
---
 web/package-lock.json                         |  2 ++
 web/src/elements/utils/ensureCSSStyleSheet.ts | 35 ++++++++++++++++---
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/web/package-lock.json b/web/package-lock.json
index b3682bf3fa28..4f058a66398c 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -17059,6 +17059,7 @@
         },
         "node_modules/tree-sitter-json": {
             "version": "0.20.2",
+            "hasInstallScript": true,
             "license": "MIT",
             "optional": true,
             "dependencies": {
@@ -17067,6 +17068,7 @@
         },
         "node_modules/tree-sitter-yaml": {
             "version": "0.5.0",
+            "hasInstallScript": true,
             "license": "MIT",
             "optional": true,
             "dependencies": {
diff --git a/web/src/elements/utils/ensureCSSStyleSheet.ts b/web/src/elements/utils/ensureCSSStyleSheet.ts
index 950a74170c36..d809ca69b600 100644
--- a/web/src/elements/utils/ensureCSSStyleSheet.ts
+++ b/web/src/elements/utils/ensureCSSStyleSheet.ts
@@ -1,8 +1,35 @@
 import { CSSResult, unsafeCSS } from "lit";
 
+const supportsAdoptingStyleSheets: boolean =
+    window.ShadowRoot &&
+    (window.ShadyCSS === undefined || window.ShadyCSS.nativeShadow) &&
+    "adoptedStyleSheets" in Document.prototype &&
+    "replace" in CSSStyleSheet.prototype;
+
+function stringToStylesheet(css: string) {
+    if (supportsAdoptingStyleSheets) {
+        const sheet = unsafeCSS(css).styleSheet;
+        if (sheet === undefined) {
+            throw new Error(
+                `CSS processing error: undefined stylesheet from string.  Source: ${css}`,
+            );
+        }
+        return sheet;
+    }
+
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(css);
+    return sheet;
+}
+
+function cssResultToStylesheet(css: CSSResult) {
+    const sheet = css.styleSheet;
+    return sheet ? sheet : stringToStylesheet(css.toString());
+}
+
 export const ensureCSSStyleSheet = (css: string | CSSStyleSheet | CSSResult): CSSStyleSheet =>
-    typeof css === "string"
-        ? (unsafeCSS(css).styleSheet as CSSStyleSheet)
-        : css instanceof CSSResult
-          ? (css.styleSheet as CSSStyleSheet)
+    css instanceof CSSResult
+        ? cssResultToStylesheet(css)
+        : typeof css === "string"
+          ? stringToStylesheet(css)
           : css;

From 93b5d4e2b006cfdeb97f10967221e54043f0bdc8 Mon Sep 17 00:00:00 2001
From: Ken Sternberg <ken@goauthentik.io>
Date: Wed, 24 Apr 2024 13:27:34 -0700
Subject: [PATCH 2/2] web: markdown: display markdown even when frontmatter is
 missing

Make the check for the document title comprehensive across the
entire demeter.  If there is no front matter, `data` will be missing,
not just `data.title`.
---
 web/src/elements/Markdown.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/elements/Markdown.ts b/web/src/elements/Markdown.ts
index 4b0204026270..896acfa861d6 100644
--- a/web/src/elements/Markdown.ts
+++ b/web/src/elements/Markdown.ts
@@ -87,7 +87,7 @@ export class Markdown extends AKElement {
             const parsedContent = matter(this.md);
             const parsedHTML = this.converter.makeHtml(parsedContent.content);
             const replacers = [...this.defaultReplacers, ...this.replacers];
-            this.docTitle = parsedContent.data["title"] ?? "";
+            this.docTitle = parsedContent?.data?.title ?? "";
             this.docHtml = replacers.reduce(
                 (html, replacer) => replacer(html, { path: this.meta }),
                 parsedHTML,