UI tw fixes

Author: abrulic

docs/app/components/code-block/code-block-syntax-highlighter.ts

@@ -6,29 +6,32 @@
 type TokenType = "keyword" | "string" | "number" | "comment" | "operator" | "punctuation" | "function" | "text"
 
 const MASTER_REGEX = new RegExp(
-	[
-		// whitespace
-		"\\s+",
-		// single-line comment
-		"//.*?(?=\\n|$)",
-		// multi-line comment
-		"/\\*[\\s\\S]*?\\*/",
-		// hash comment at start of line
-		"^\\s*#.*$",
-		// strings
-		"(['\"])(?:(?!\\1)[^\\\\]|\\\\.)*\\1",
-		// numbers
-		"\\d+\\.?\\d*",
-		// identifiers
-		"[a-zA-Z_$][a-zA-Z0-9_$]*",
-		// operators and punctuation
-		"===|!==|<=|>=|==|!=|&&|\\|\\||\\+\\+|--|[+\\-*/%=<>!?:(){}\\[\\];,.]|[+\\-*/%]=",
-		// arrow function
-		"=>",
-	].join("|"),
-	"g"
+  [
+    // whitespace
+    "\\s+",
+    // single-line comment
+    "\\/\\/[^\\n\\r]*",
+    // multi-line comment
+    "\\/\\*[\\s\\S]*?\\*\\/",
+    // hash comment at start of line
+    "^\\s*#.*$",
+    // strings
+    "(['\"])(?:(?!\\1)[^\\\\]|\\\\.)*\\1",
+    // numbers
+    "\\d+\\.?\\d*",
+    // identifiers
+    "[a-zA-Z_$][a-zA-Z0-9_$]*",
+    // arrow function
+    "=>",
+    // operators & punctuation:
+    // - multi-char first
+    // - single '/' only if NOT starting a comment
+    "===|!==|<=|>=|==|!=|&&|\\|\\||\\+\\+|--|[+\\-*%=<>!?:(){}\\[\\];,.]|\\/(?![/*])|[+\\-*/%]=",
+  ].join("|"),
+  "gm"
 )
 
+
 const KEYWORDS = [
 	"import",
 	"export",

docs/app/tailwind.css

@@ -290,168 +290,3 @@
 		cursor: default;
 	}
 }
-
-@layer components {
-  .prose {
-    max-width: none;
-    color: theme(--color-slate-700);
-
-    hr {
-      border-color: theme(--color-slate-100);
-      margin-top: 3em;
-      margin-bottom: 3em;
-    }
-
-    h1, h2, h3 {
-      letter-spacing: -0.025em;
-    }
-
-    h2 {
-      margin-bottom: 0.6666666667em; /* 16/24 */
-    }
-
-    h3 {
-      margin-top: 2.4em;
-      line-height: 1.4;
-    }
-
-    h4 {
-      margin-top: 2em;
-      font-size: 1.125em;
-    }
-
-    h2 small, h3 small, h4 small {
-      font-family: theme(--font-mono);
-      color: theme(--color-slate-500);
-      font-weight: 500;
-    }
-
-			h2 small {
-				font-size: theme(--text-lg);
-				line-height: theme(--text-xl--line-height);
-			}
-
-			h3 small {
-				font-size: theme(--text-base);
-				line-height: theme(--text-base--line-height);
-			}
-
-			h4 small {
-				font-size: theme(--text-sm);
-				line-height: theme(--text-sm--line-height);
-			}
-
-    h2, h3, h4 {
-      scroll-margin-top: var(--scroll-mt);
-    }
-
-    h2 code, h3 code {
-      font: inherit;
-    }
-
-    ul {
-      list-style-type: none;
-      padding-left: 0;
-    }
-
-    ul > li {
-      position: relative;
-      padding-left: 1.75em;
-    }
-
-    ul > li::before {
-      content: "";
-      width: 0.75em;
-      height: 0.125em;
-      position: absolute;
-      top: calc(0.875em - 0.0625em);
-      left: 0;
-      border-radius: 9999px;
-      background-color: theme(--color-slate-300);
-    }
-
-    a {
-      font-weight: --font-semibold;
-      text-decoration: none;
-      border-bottom: 1px solid theme(--color-sky-300);
-    }
-
-    a:hover {
-      border-bottom-width: 2px;
-    }
-
-    a code {
-      color: inherit;
-      font-weight: inherit;
-    }
-
-    strong {
-      color: theme(--color-slate-900);
-      font-weight: --font-semibold
-    }
-
-    a strong {
-      color: inherit;
-      font-weight: inherit;
-    }
-
-    kbd {
-      background: theme(--color-slate-100);
-      border-width: 1px;
-      border-color: theme(--color-slate-200);
-      padding: 0.125em 0.25em;
-      color: theme(--color-slate-700);
-      font-weight: 500;
-      font-size: 0.875em;
-      font-variant-ligatures: none;
-      border-radius: 4px;
-      margin: 0 1px;
-    }
-
-    code {
-      font-weight: --font-medium;
-      font-variant-ligatures: none;
-    }
-
-    pre {
-      color: theme(--color-slate-50);
-      border-radius: theme(--radius-xl);
-      padding: theme(--spacing);
-      box-shadow: theme(--shadow-md);
-      display: flex;
-      margin-top: 1.4285714286em; /* 20/14 */
-      margin-bottom: 2.2857142857em; /* 32/14 */
-    }
-
-    p + pre {
-      margin-top: -0.2857142857em; /* -4/14 */
-    }
-
-    pre + pre {
-      margin-top: -1.1428571429em; /* -16/14 */
-    }
-
-    pre code {
-      flex: none;
-      min-width: 100%;
-    }
-
-
-
-    tbody tr:last-child {
-      border-bottom-width: 1px;
-    }
-
-
-
-    figure figcaption {
-      text-align: center;
-      font-style: italic;
-    }
-
-    figure > figcaption {
-      margin-top: 0.8571428571em; /* 12/14 */
-    }
-  }
-
-}