GitHub/Basalt2
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

SSR fixes

Browse Source
This commit is contained in:
Robert Jelic
2025-09-14 11:41:26 +02:00
parent 741a53aa04
commit 9c7186011b
5 changed files with 303 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/.vitepress/config.mts
View File

@@ -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">

17
docs/.vitepress/theme/components/BasaltDemo.vue
View File

@@ -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) {
// Containergröße ermitteln
if (!isDragging || typeof window === 'undefined') return
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)

20
docs/.vitepress/theme/components/BasaltDemoWithCode.vue
View File

@@ -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"

51
docs/.vitepress/theme/emulator.js
View File

@@ -1,8 +1,11 @@
// .vitepress/theme/emulator.js
let globalComputerInstance = null
let isGlobalLoading = false
export function initEmulator() {
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 */
margin: 0; /* <-- NO MARGIN */
padding: 0;
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
}

45
docs/.vitepress/theme/index.js
View File

@@ -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()
})
})
})
}
}
}