From 1a9c6ddcd0027c01b4f05c8f8ada517f401cd578 Mon Sep 17 00:00:00 2001
From: "Tommy D. Rossi" <beats.by.morse@gmail.com>
Date: Tue, 24 Feb 2026 14:44:08 +0100
Subject: [PATCH] website: add diagram Prism language, CodeBlock
 showLineNumbers prop, brighter dark mode links

- Custom 'diagram' Prism language: box-drawing chars get neutral color,
  text labels get a saturated blue so they pop against the structure
- CodeBlock gains showLineNumbers prop (default true) and skips Prism
  highlighting when lang is empty
- Diagram block in index page uses lang='diagram' with line numbers off
- Dark mode --link-accent bumped from #58a6ff to #79bbff for better
  visibility against dark backgrounds
---
 website/src/components/markdown.tsx    | 56 ++++++++++++++++----------
 website/src/routes/_index.tsx          |  2 +-
 website/src/styles/editorial-prism.css | 29 +++++++++++++
 website/src/styles/globals.css         |  2 +-
 4 files changed, 65 insertions(+), 24 deletions(-)

diff --git a/website/src/components/markdown.tsx b/website/src/components/markdown.tsx
index 6d54a0f..6006ff8 100644
--- a/website/src/components/markdown.tsx
+++ b/website/src/components/markdown.tsx
@@ -12,6 +12,14 @@ import 'prismjs/components/prism-jsx'
 import 'prismjs/components/prism-tsx'
 import 'prismjs/components/prism-bash'
 
+/* Custom "diagram" language for ASCII/Unicode box-drawing diagrams.
+   Tokenizes box-drawing chars as neutral structure, text as highlighted labels. */
+Prism.languages.diagram = {
+  'box-drawing': /[┌┐└┘├┤┬┴┼─│═║╔╗╚╝╠╣╦╩╬╭╮╯╰┊┈╌┄╶╴╵╷]+/,
+  'line-char': /[-_|<>]+/,
+  'label': /[^\s┌┐└┘├┤┬┴┼─│═║╔╗╚╝╠╣╦╩╬╭╮╯╰┊┈╌┄╶╴╵╷\-_|<>]+/,
+}
+
 /* =========================================================================
    TOC sidebar (fixed left)
    ========================================================================= */
@@ -342,19 +350,21 @@ export function CodeBlock({
   children,
   lang = 'jsx',
   lineHeight = '1.85',
+  showLineNumbers = true,
 }: {
   children: string
   lang?: string
   lineHeight?: string
+  showLineNumbers?: boolean
 }) {
   const codeRef = useRef<HTMLElement>(null)
   const lines = children.split('\n')
 
   useEffect(() => {
-    if (codeRef.current) {
+    if (codeRef.current && lang) {
       Prism.highlightElement(codeRef.current)
     }
-  }, [children])
+  }, [children, lang])
 
   return (
     <figure className='m-0 bleed'>
@@ -381,28 +391,30 @@ export function CodeBlock({
               tabSize: 2,
             }}
           >
-            <span
-              className='select-none shrink-0'
-              aria-hidden='true'
-              style={{
-                color: 'var(--code-line-nr)',
-                textAlign: 'right',
-                paddingRight: '20px',
-                width: '36px',
-                userSelect: 'none',
-              }}
-            >
-              {lines.map((_, i) => {
-                return (
-                  <span key={i} className='block'>
-                    {i + 1}
-                  </span>
-                )
-              })}
-            </span>
+            {showLineNumbers && (
+              <span
+                className='select-none shrink-0'
+                aria-hidden='true'
+                style={{
+                  color: 'var(--code-line-nr)',
+                  textAlign: 'right',
+                  paddingRight: '20px',
+                  width: '36px',
+                  userSelect: 'none',
+                }}
+              >
+                {lines.map((_, i) => {
+                  return (
+                    <span key={i} className='block'>
+                      {i + 1}
+                    </span>
+                  )
+                })}
+              </span>
+            )}
             <code
               ref={codeRef}
-              className={`language-${lang}`}
+              className={lang ? `language-${lang}` : undefined}
               style={{ whiteSpace: 'pre', background: 'none', padding: 0, lineHeight }}
             >
               {children}
diff --git a/website/src/routes/_index.tsx b/website/src/routes/_index.tsx
index 3ad1b96..001fad9 100644
--- a/website/src/routes/_index.tsx
+++ b/website/src/routes/_index.tsx
@@ -146,7 +146,7 @@ export default function IndexPage() {
           Chrome restart, no flags, no special setup.
         </P>
 
-        <CodeBlock lang='bash' lineHeight='1.3'>{dedent`
+        <CodeBlock lang='diagram' lineHeight='1.3' showLineNumbers={false}>{dedent`
         ┌─────────────────────┐     ┌──────────────────────┐     ┌─────────────────┐
         │   BROWSER           │     │   LOCALHOST          │     │   CLIENT        │
         │                     │     │                      │     │                 │
diff --git a/website/src/styles/editorial-prism.css b/website/src/styles/editorial-prism.css
index c57186e..5820068 100644
--- a/website/src/styles/editorial-prism.css
+++ b/website/src/styles/editorial-prism.css
@@ -130,6 +130,20 @@ pre[class*='language-'] {
   color: #2563eb;
 }
 
+/* Diagram language: neutral box-drawing, colored text labels */
+.language-diagram .token.box-drawing {
+  color: #c0c0c0;
+}
+
+.language-diagram .token.line-char {
+  color: #c0c0c0;
+}
+
+.language-diagram .token.label {
+  color: #0550ae;
+  font-weight: 600;
+}
+
 /* No text shadow on any token */
 .token {
   text-shadow: none;
@@ -159,6 +173,8 @@ pre[class*='language-'] {
     --prism-spread: #ff7b72;
     --prism-regex: #a5d6ff;
     --prism-bash-fn: #79c0ff;
+    --prism-diagram-structure: #555;
+    --prism-diagram-label: #79bbff;
   }
 }
 
@@ -284,3 +300,16 @@ pre[class*='language-'] {
     color: var(--prism-bash-fn);
   }
 }
+
+.language-diagram .token.box-drawing,
+.language-diagram .token.line-char {
+  @variant dark {
+    color: var(--prism-diagram-structure);
+  }
+}
+
+.language-diagram .token.label {
+  @variant dark {
+    color: var(--prism-diagram-label);
+  }
+}
diff --git a/website/src/styles/globals.css b/website/src/styles/globals.css
index a852ccf..8faf1d4 100644
--- a/website/src/styles/globals.css
+++ b/website/src/styles/globals.css
@@ -174,7 +174,7 @@
       rgba(255, 255, 255, 0.05) 0px 2px 8px, rgba(255, 255, 255, 0.02) 0px 4px 16px,
       rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset;
 
-    --link-accent: #58a6ff;
+    --link-accent: #79bbff;
     --brand-primary: #60a5fa;
     --brand-secondary: #f5a623;