SSR fixes

docs/.vitepress/config.mts

@@ -8,16 +8,12 @@ function codeBlockRunPlugin(md) {
     const info = token.info.trim()
     const content = token.content
 
-    // Check if the code block has a 'run' attribute
     if (info.includes('run')) {
-      // Remove 'run' from info for standard rendering
       const cleanInfo = info.replace(/\s*run\s*/, '').trim()
       token.info = cleanInfo
 
-      // Render the standard code block
       const codeHtml = defaultFence(tokens, idx, options, env, self)
 
-      // Wrap with run button - no language badge since we hide it anyway
       return `
         <div class="code-block-with-run">
           <div class="code-header">

docs/.vitepress/theme/components/BasaltDemo.vue

@@ -10,13 +10,18 @@ let isDragging = false
 
 const slots = useSlots()
 let luaCode = ''
+
 onMounted(() => {
+  if (typeof window === 'undefined') return
+  
   luaCode = (slots.default?.() || [])
     .map(vnode => typeof vnode.children === 'string' ? vnode.children : '')
     .join('\n')
 })
 
 async function startDemo() {
+  if (typeof window === 'undefined' || typeof document === 'undefined') return
+  
   showDemo.value = true
 
   const basalt = await fetch(
@@ -47,6 +52,8 @@ function closeDemo() {
 }
 
 function startDrag(e) {
+  if (typeof document === 'undefined') return
+  
   isDragging = true
   offset.x = e.clientX - position.x
   offset.y = e.clientY - position.y
@@ -55,21 +62,18 @@ function startDrag(e) {
 }
 
 function onDrag(e) {
-  if (isDragging) {
+  if (!isDragging || typeof window === 'undefined') return
-    // Containergröße ermitteln
+  
   const containerEl = container.value?.parentElement
   const contW = containerEl?.offsetWidth || 0
   const contH = containerEl?.offsetHeight || 0
 
-    // Maximal erlaubte Positionen
   const maxX = window.innerWidth - contW
   const maxY = window.innerHeight - contH
 
-    // Neue Position berechnen
   let newX = e.clientX - offset.x
   let newY = e.clientY - offset.y
 
-    // Begrenzen (clampen)
   if (newX < 0) newX = 0
   if (newY < 0) newY = 0
   if (newX > maxX) newX = maxX
@@ -77,10 +81,11 @@ function onDrag(e) {
 
   position.x = newX
   position.y = newY
-  }
 }
 
 function stopDrag() {
+  if (typeof document === 'undefined') return
+  
   isDragging = false
   document.removeEventListener('mousemove', onDrag)
   document.removeEventListener('mouseup', stopDrag)

docs/.vitepress/theme/components/BasaltDemoWithCode.vue

@@ -40,7 +40,6 @@ function extractText(nodes) {
 
 const luaCode = computed(() => extractText(slots.default?.() ?? []))
 
-
 const highlightedCode = computed(() => {
   let code = luaCode.value
   
@@ -61,6 +60,7 @@ const highlightedCode = computed(() => {
 })
 
 async function startDemo() {
+  if (typeof window === 'undefined') return
   if (isLoading.value || showDemo.value) return
   
   isLoading.value = true
@@ -133,6 +133,8 @@ function closeDemo() {
 }
 
 function centerWindow() {
+  if (typeof window === 'undefined') return
+  
   const windowWidth = window.innerWidth
   const windowHeight = window.innerHeight
   position.x = Math.max(0, (windowWidth - 650) / 2)
@@ -140,6 +142,8 @@ function centerWindow() {
 }
 
 function startDrag(e) {
+  if (typeof document === 'undefined') return
+  
   if (e.target.closest('button')) return
   isDragging = true
   offset.x = e.clientX - position.x
@@ -150,7 +154,8 @@ function startDrag(e) {
 }
 
 function onDrag(e) {
-  if (!isDragging) return
+  if (!isDragging || typeof window === 'undefined') return
+  
   const maxX = window.innerWidth - 650
   const maxY = window.innerHeight - 480
   
@@ -159,6 +164,8 @@ function onDrag(e) {
 }
 
 function stopDrag() {
+  if (typeof document === 'undefined') return
+  
   isDragging = false
   document.removeEventListener('mousemove', onDrag)
   document.removeEventListener('mouseup', stopDrag)
@@ -171,11 +178,17 @@ function handleKeydown(e) {
 }
 
 onMounted(() => {
+  // SSR Guard - nur im Browser Event Listener hinzufügen
+  if (typeof document !== 'undefined') {
     document.addEventListener('keydown', handleKeydown)
+  }
 })
 
 onUnmounted(() => {
+  // SSR Guard
+  if (typeof document !== 'undefined') {
     document.removeEventListener('keydown', handleKeydown)
+  }
   closeDemo()
 })
 </script>
@@ -197,13 +210,12 @@ onUnmounted(() => {
         </button>
       </div>
       
-      <!-- Code Block with Syntax Highlighting -->
       <div class="code-block">
         <pre><code v-html="highlightedCode"></code></pre>
       </div>
     </div>
 
-    <Teleport to="body">
+    <Teleport v-if="typeof document !== 'undefined'" to="body">
       <div
         v-if="showDemo"
         ref="wrapperRef"

docs/.vitepress/theme/emulator.js

@@ -1,8 +1,11 @@
 // .vitepress/theme/emulator.js
-let globalComputerInstance = null
+export function initEmulator() {
-let isGlobalLoading = false
+  if (typeof window === 'undefined') return
 
-async function loadDependencies() {
+  let globalComputerInstance = null
+  let isGlobalLoading = false
+
+  async function loadDependencies() {
     const basalt = await fetch(
       'https://raw.githubusercontent.com/Pyroxenium/Basalt2/refs/heads/main/release/basalt.lua'
     ).then(res => res.text())
@@ -18,9 +21,9 @@ async function loadDependencies() {
     }
 
     return basalt
-}
+  }
 
-async function runCodeInEmulator(code, title = 'Code Demo') {
+  async function runCodeInEmulator(code, title = 'Code Demo') {
     console.log('runCodeInEmulator called with:', { code, title })
 
     if (isGlobalLoading || globalComputerInstance) {
@@ -46,13 +49,9 @@ async function runCodeInEmulator(code, title = 'Code Demo') {
       tempContainer.style.margin = '0'
       tempContainer.style.border = 'none'
       document.body.appendChild(tempContainer)
-    console.log('Temporary container created')
-
-    console.log('Setting up CopyCat...')
       window.require.config({ paths: { copycat: 'https://copy-cat.squiddev.cc/' } })
 
       window.require(['copycat/embed'], (setup) => {
-      console.log('CopyCat setup function received:', setup)
 
         const setupPromise = setup(tempContainer, {
           hdFont: 'https://copy-cat.squiddev.cc/term_font_hd-0506b6efe5f7feae.png',
@@ -110,9 +109,9 @@ async function runCodeInEmulator(code, title = 'Code Demo') {
       console.error('Error starting emulator:', error)
       isGlobalLoading = false
     }
-}
+  }
 
-function showTerminalWindow(container, title) {
+  function showTerminalWindow(container, title) {
     console.log('showTerminalWindow called with:', { container, title })
 
     const windowDiv = document.createElement('div')
@@ -165,8 +164,8 @@ function showTerminalWindow(container, title) {
       background: #000;
       border-radius: 0 0 8px 8px;
       overflow: hidden;
-    padding: 0;  /* <-- REDUCED FROM DEFAULT */
+      padding: 0;
-    margin: 0;   /* <-- NO MARGIN */
+      margin: 0;
     `
     body.appendChild(container)
     container.style.position = 'static'
@@ -214,9 +213,9 @@ function showTerminalWindow(container, title) {
     document.addEventListener('mouseup', () => {
       isDragging = false
     })
-}
+  }
 
-function closeGlobalEmulator() {
+  function closeGlobalEmulator() {
     if (globalComputerInstance) {
       try {
         globalComputerInstance.shutdown()
@@ -230,29 +229,17 @@ function closeGlobalEmulator() {
     if (windowDiv) {
       document.body.removeChild(windowDiv)
     }
-}
+  }
-
-window.runCodeBlock = function(button) {
-  console.log('Run button clicked!', button)
 
+  window.runCodeBlock = function(button) {
     const container = button.closest('.code-block-with-run')    
-  console.log('Container found:', container)
-  
     const codeContent = container.querySelector('.code-content')    
-  console.log('Code content found:', codeContent)
-  
     const dataCode = codeContent.getAttribute('data-code')    
-  console.log('Data code:', dataCode)
-  
     const code = atob(dataCode)    
-  console.log('Decoded code:', code)
-  
     const languageBadge = container.querySelector('.language-badge')
     const language = languageBadge && languageBadge.textContent ? languageBadge.textContent : 'lua'
-  console.log('Language:', language)
-
-  console.log('Calling runCodeInEmulator...')
     runCodeInEmulator(code, `Code Demo (${language})`)
-}
+  }
 
-window.closeGlobalEmulator = closeGlobalEmulator
+  window.closeGlobalEmulator = closeGlobalEmulator
+}

docs/.vitepress/theme/index.js

@@ -1,17 +1,50 @@
 import CopyButton from 'vitepress-copy-helper';
 import 'vitepress-copy-helper/style.css'
 import DefaultTheme from 'vitepress/theme'
-import BasaltDemo from './components/BasaltDemo.vue'
-import BasaltDemoWithCode from './components/BasaltDemoWithCode.vue'
-import './emulator.js'
 import './styles.css'
 
 /** @type {import('vitepress').Theme} */
 export default {
   extends: DefaultTheme,
-  enhanceApp({ app }) {
+  enhanceApp({ app, router, siteData }) {
     app.component('C', CopyButton)
-    app.component('BasaltDemo', BasaltDemo)
+    
-    app.component('BasaltDemoWithCode', BasaltDemoWithCode)
+    if (typeof window !== 'undefined') {
+      import('./components/BasaltDemo.vue').then((module) => {
+        app.component('BasaltDemo', module.default)
+      })
+      import('./components/BasaltDemoWithCode.vue').then((module) => {
+        app.component('BasaltDemoWithCode', module.default)
+      })
+    }
+  },
+  setup() {
+    if (typeof window !== 'undefined') {
+      window.runCodeBlock = function(button) {
+        const container = button.closest('.code-block-with-run')    
+        const codeContent = container.querySelector('.code-content')    
+        const dataCode = codeContent.getAttribute('data-code')    
+        const code = atob(dataCode)    
+        const languageBadge = container.querySelector('.language-badge')
+        const language = languageBadge && languageBadge.textContent ? languageBadge.textContent : 'lua'
+        
+        if (!window.runCodeInEmulator) {
+          import('./emulator.js').then(({ initEmulator }) => {
+            initEmulator()
+            setTimeout(() => window.runCodeBlock(button), 100)
+          })
+        } else {
+          window.runCodeInEmulator(code, `Code Demo (${language})`)
+        }
+      }
+
+      import('vue').then(({ onMounted }) => {
+        onMounted(() => {
+          import('./emulator.js').then(({ initEmulator }) => {
+            initEmulator()
+          })
+        })
+      })
+    }
   }
 }