Doc aesthetics wishlist change (#613)

- [x] Font change
- [x] Light dark toggle switch (removed auto)
- [x] SQL to cypher
- [x] different highlight code colour
- [x] syntax highlights for cypher
- [x] tab synchronization 
- [x] vite-like sidebar
- [x] wide content panel

## Nits (comments below)
- [x] Improve green shade for callout boxes (red, yellow, purple all
look nice in light and dark mode)
- [x] Table borders
- [x] Space between bullet points: increase it slightly (see the wasm
page for an example of how crowded it looks right now)
- [x] $ not selected when copying or selecting

# Contributor agreement

- [x] I have read and agree to the [Contributor
Agreement](https://github.com/kuzudb/kuzu-docs/blob/main/CLA.md).

Author: s-illly

astro.config.mjs

@@ -3,6 +3,11 @@ import sitemap from "@astrojs/sitemap";
 import starlight from "@astrojs/starlight";
 import starlightLinksValidator from "starlight-links-validator";
 import fs from "fs";
+import path from 'path'
+
+const cypherGrammar = JSON.parse(
+    fs.readFileSync(path.resolve('./src/styles/cypher.tmLanguage.json'), 'utf8')
+  )
 
 const site = "https://docs.kuzudb.com";
 
@@ -32,7 +37,13 @@ export default defineConfig({
                 baseUrl: 'https://github.com/kuzudb/kuzu-docs/edit/main',
             },
             customCss: ['./src/styles/custom.css'],
-            expressiveCode: true,
+            expressiveCode: {
+                shiki: {
+                  langs: [
+                    { name: 'cypher', ...cypherGrammar }
+                  ],
+                }
+              },
             head: [
                 // Basic OG tags
                 {
@@ -81,11 +92,23 @@ export default defineConfig({
                     tag: 'meta',
                     attrs: { name: 'twitter:image', content: site + '/img/og.png' },
                 },
+                // Script
+                {
+                    tag: "script",
+                    attrs: { src: "/reb2b.js", type: "text/javascript", async: true }
+                },
+                {
+                    tag: "script",
+                    attrs: { src: "/remove-prompt.js", type: "text/javascript" }
+                },
+
             ],
             components: {
                 Header: './src/components/overrides/Header.astro',
                 Banner: './src/components/overrides/Banner.astro',
                 ThemeSelect: './src/components/overrides/ThemeSelect.astro',
+                PageFrame: './src/components/overrides/PageFrame.astro',
+                TwoColumnContent: './src/components/overrides/TwoColumnContent.astro',
             },
             sidebar: [
                 {

public/remove-prompt.js

@@ -0,0 +1,95 @@
+// Strip leading "$ " prompts when copying from terminal code blocks
+(function () {
+  function isTerminalLang(lang) {
+    if (!lang) return false;
+    const l = String(lang).toLowerCase();
+    return [
+      'bash',
+      'sh',
+      'zsh',
+      'shell',
+      'shellsession',
+      'console',
+    ].includes(l);
+  }
+
+  function detectLangFromPre(pre) {
+    if (!pre) return null;
+    const dataLang = pre.getAttribute('data-lang') || pre.dataset?.lang;
+    if (dataLang) return dataLang;
+    const wrapperWithData = pre.closest?.('[data-language]');
+    if (wrapperWithData) return wrapperWithData.getAttribute('data-language');
+    const code = pre.querySelector('code');
+    const m = code?.className?.match(/language-([a-z0-9]+)/i);
+    return m?.[1] || null;
+  }
+
+  function stripPrompts(text) {
+    if (!text) return text;
+    // Remove "$ " at the start of each line (optionally preceded by whitespace)
+    return text.replace(/^(?:\s*\$\s+)/gm, '');
+  }
+
+  function isTerminalFigure(element) {
+    const fig = element?.closest?.('figure');
+    return !!fig && fig.classList.contains('is-terminal');
+  }
+
+  // Intercept user-initiated copy events (manual selection)
+  document.addEventListener('copy', function (e) {
+    const selection = window.getSelection?.();
+    if (!selection || selection.isCollapsed) return;
+    const anchorNode = selection.anchorNode;
+    const node = anchorNode && (anchorNode.nodeType === 1 ? anchorNode : anchorNode.parentElement);
+    const pre = node?.closest?.('pre');
+    if (!pre) return;
+    const lang = detectLangFromPre(pre);
+    const terminalContext = isTerminalLang(lang) || isTerminalFigure(pre);
+    if (!terminalContext) return;
+    const original = selection.toString();
+    const cleaned = stripPrompts(original);
+    if (cleaned !== original) {
+      e.preventDefault();
+      e.clipboardData.setData('text/plain', cleaned);
+    }
+  });
+
+  // Clean the data-code attribute before Expressive Code reads it (capture phase)
+  document.addEventListener('click', function (e) {
+    const target = e.target;
+    const button = target && (target.closest ? target.closest('button[data-code]') : null);
+    if (!button) return;
+    if (!isTerminalFigure(button)) return;
+    const current = button.getAttribute('data-code') || '';
+    const cleaned = stripPrompts(current);
+    if (cleaned !== current) {
+      button.setAttribute('data-code', cleaned);
+    }
+  }, true);
+
+  // Also wrap navigator.clipboard.writeText to catch copy button behavior
+  if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
+    const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
+    navigator.clipboard.writeText = async function (text) {
+      try {
+        // Try to infer if the active element is a copy button near a terminal block
+        const active = document.activeElement;
+        let pre = active?.closest?.('pre');
+        if (!pre) {
+          // Look for a sibling/ancestor that contains the pre (Expressive Code wraps code)
+          const container = active?.closest?.('figure, div, section, article');
+          pre = container?.querySelector?.('pre') || null;
+        }
+        const lang = detectLangFromPre(pre);
+        const terminalContext = isTerminalLang(lang) || isTerminalFigure(active);
+        const cleaned = terminalContext ? stripPrompts(text) : text;
+        return originalWriteText(cleaned);
+      } catch (_) {
+        // Fallback to original behavior on any error
+        return originalWriteText(text);
+      }
+    };
+  }
+})();
+
+

src/components/overrides/Header.astro

@@ -6,12 +6,16 @@ import SocialIcons from "@astrojs/starlight/components/SocialIcons.astro";
 import ThemeSelect from "./ThemeSelect.astro";
 import { Icon } from "@astrojs/starlight/components";
 import Banner from './Banner.astro';
+import ThemeSelect from './ThemeSelect.astro';
 ---
 <div class="header sl-flex">
- 
-  <div class="sl-flex">
-    <SiteTitle {...Astro.props} />
+  <!-- Site Title - shows when sidebars collapse -->
+  <div class="header-site-title">
+    <a href="/" class="site-title">
+      <img src="/src/assets/logo/kuzu-logo-inverse.png" alt="Kuzu" class="site-logo" />
+    </a>
   </div>
+ 
   <div class="sl-flex">
     <Search {...Astro.props} />
   </div>
@@ -30,9 +34,7 @@ import Banner from './Banner.astro';
     <div class="sl-flex social-icons">
       <SocialIcons {...Astro.props} />
     </div>
-    <div class="sl-flex toggle-wrapper">
-    <ThemeSelect {...Astro.props} />
-    </div>
+    <ThemeSelect />
   </div>
 </div>
 
@@ -43,11 +45,47 @@ import Banner from './Banner.astro';
     align-items: center;
     height: 100%;
   }
+
+  /* Header Site Title Styles */
+  .header-site-title {
+    display: none; /* Hidden by default */
+  }
+
+  .site-title {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    text-decoration: none;
+    color: var(--sl-color-white);
+    font-weight: 600;
+    font-size: 1.25rem;
+    transition: opacity 0.2s ease;
+  }
+
+  .site-title:hover {
+    opacity: 0.8;
+  }
+
+  .site-logo {
+    height: 2rem;
+    width: auto;
+  }
+
+  .site-name {
+    font-size: 1.5rem;
+    font-weight: 700;
+  }
+
   .external-link-header {
     font-weight: 400;
     font-size: 0.875rem;
   }
-  .right-group,
+  .right-group {
+    gap: 1rem;
+    align-items: center;
+    justify-content: flex-end;
+    margin-left: auto;
+  }
   .social-icons {
     gap: 1rem;
     align-items: center;
@@ -80,7 +118,7 @@ import Banner from './Banner.astro';
       );
       display: grid;
       grid-template-columns:
-        /* 1 (site title): runs up until the main content column’s left edge or the width of the title, whichever is the largest  */
+        /* 1 (site title): runs up until the main content column's left edge or the width of the title, whichever is the largest  */
         minmax(
           calc(
             var(--__sidebar-width) +
@@ -96,6 +134,31 @@ import Banner from './Banner.astro';
     }
   }
 
+  /* Show header site title when sidebars are collapsed */
+  @media (max-width: 71.99rem) {
+    .header-site-title {
+      display: block;
+    }
+  }
+
+  /* Show header site title when only one sidebar is present */
+  @media (min-width: 72rem) {
+    /* Show when no left sidebar */
+    :global(:root:not([data-has-sidebar])) .header-site-title {
+      display: block;
+    }
+    
+    /* Show when no right sidebar (TOC) */
+    :global(:root:not([data-has-toc])) .header-site-title {
+      display: block;
+    }
+    
+    /* Hide when both sidebars are present */
+    :global(:root[data-has-sidebar][data-has-toc]) .header-site-title {
+      display: none;
+    }
+  }
+
   .action {
     gap: 0.5em;
     align-items: center;