site: use gordon for ask ai

assets/css/style.css

@@ -41,5 +41,6 @@
 @import "syntax-dark.css";
 @import "syntax-light.css";
 @import "components.css";
+@import "highlight-github-dark.css";
 
 @variant dark (&:where(.dark, .dark *));

assets/js/src/alpine.js

@@ -2,12 +2,106 @@ import Alpine from 'alpinejs'
 import collapse from '@alpinejs/collapse'
 import persist from '@alpinejs/persist'
 import focus from '@alpinejs/focus'
-
+import { marked } from 'marked'
+import hljs from 'highlight.js/lib/core'
+// Import languages relevant to Docker docs
+import bash from 'highlight.js/lib/languages/bash'
+import dockerfile from 'highlight.js/lib/languages/dockerfile'
+import yaml from 'highlight.js/lib/languages/yaml'
+import json from 'highlight.js/lib/languages/json'
+import javascript from 'highlight.js/lib/languages/javascript'
+import python from 'highlight.js/lib/languages/python'
+import go from 'highlight.js/lib/languages/go'
+
 window.Alpine = Alpine
 
 Alpine.plugin(collapse)
 Alpine.plugin(persist)
 Alpine.plugin(focus)
+
+// Register highlight.js languages
+hljs.registerLanguage('bash', bash)
+hljs.registerLanguage('sh', bash)
+hljs.registerLanguage('shell', bash)
+hljs.registerLanguage('console', bash)
+hljs.registerLanguage('dockerfile', dockerfile)
+hljs.registerLanguage('yaml', yaml)
+hljs.registerLanguage('yml', yaml)
+hljs.registerLanguage('json', json)
+hljs.registerLanguage('javascript', javascript)
+hljs.registerLanguage('js', javascript)
+hljs.registerLanguage('python', python)
+hljs.registerLanguage('py', python)
+hljs.registerLanguage('go', go)
+hljs.registerLanguage('golang', go)
+
+// Configure marked to escape HTML in text tokens only (not code blocks)
+marked.use({
+  walkTokens(token) {
+    // Escape HTML in text and HTML tokens, preserve code blocks
+    if (token.type === 'text' || token.type === 'html') {
+      const text = token.text || token.raw
+      const escaped = text
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+      if (token.text) token.text = escaped
+      if (token.raw) token.raw = escaped
+    }
+  }
+})
+
+// Add $markdown magic for rendering markdown with syntax highlighting
+Alpine.magic('markdown', () => {
+  return (content) => {
+    if (!content) return ''
+    const html = marked(content)
+
+    // Parse and highlight code blocks
+    const div = document.createElement('div')
+    div.innerHTML = html
+
+    // Handle code blocks (pre > code)
+    div.querySelectorAll('pre').forEach((pre) => {
+      // Add not-prose to prevent Tailwind Typography styling
+      pre.classList.add('not-prose')
+      const code = pre.querySelector('code')
+      if (code) {
+        // Preserve the original text with newlines
+        const codeText = code.textContent
+
+        // Clear and set as plain text first to preserve structure
+        code.textContent = codeText
+
+        // Now apply highlight.js which will work with the text nodes
+        hljs.highlightElement(code)
+      }
+    })
+
+    // Handle inline code elements (not in pre blocks)
+    div.querySelectorAll('code:not(pre code)').forEach((code) => {
+      code.classList.add('not-prose')
+    })
+
+    return div.innerHTML
+  }
+})
+
+// Stores
 Alpine.store("showSidebar", false)
+Alpine.store('gordon', {
+  isOpen: false,
+  query: '',
+  toggle() {
+    this.isOpen = !this.isOpen
+  },
+  open(query) {
+    this.isOpen = true
+    if (query) this.query = query
+  },
+  close() {
+    this.isOpen = false
+  }
+})
 
 Alpine.start()

hugo.yaml

@@ -271,6 +271,9 @@ module:
     # Mount the icon files to assets so we can access them with resources.Get
     - source: node_modules/@material-symbols/svg-400/rounded
       target: assets/icons
+    # Mount highlight.js theme for Gordon chat syntax highlighting
+    - source: node_modules/highlight.js/styles/github-dark.css
+      target: assets/css/highlight-github-dark.css
 
   imports:
 

layouts/_default/baseof.html

@@ -8,6 +8,7 @@
     class="dark:bg-navbar-bg-dark bg-navbar-bg flex flex-col items-center text-base text-black dark:text-white"
   >
     {{ partial "header.html" . }}
+    {{ partial "gordon-chat.html" . }}
     <main class="relative flex w-full max-w-[1920px]">
       <!-- Sidebar -->
       <div

layouts/index.html

@@ -15,6 +15,7 @@
 		</svg>
 	</div>
 	{{ partial "header.html" . }}
+	{{ partial "gordon-chat.html" . }}
 	<main class="flex w-full flex-col items-stretch gap-20 self-center pt-20">
 		<div class="grid w-full grid-cols-1 items-center gap-20 px-4 lg:grid-cols-2 xl:w-[1200px] self-center">
 			<div class="bg-pattern-blue relative rounded-sm drop-shadow z-10"