Loading chapter: ${chapter.title}...
${escapedCode}${codeText}'); return `
${htmlContent}`; }; dom.chapterContent.innerHTML = marked.parse(markdown, { renderer }); // Re-run lucide icons rendering lucide.createIcons(); // Syntax-highlight the static Flash example blocks (no-op until Monaco // is ready; initMonaco re-runs this for the first-loaded chapter). highlightFlashBlocks(dom.chapterContent); // Bind load events to the dynamically generated "Try in Editor" buttons dom.chapterContent.querySelectorAll('.load-example-btn').forEach(btn => { btn.addEventListener('click', (e) => { const code = btn.getAttribute('data-code') .replace(/&/g, '&') .replace(/</g, '<') .replace(/>/g, '>') .replace(/"/g, '"') .replace(/'/g, "'"); loadCodeIntoEditor(code); }); }); // Scroll reader panel back to top dom.contentPanel.querySelector('.content-body').scrollTop = 0; } catch (err) { console.error("Failed to load chapter file:", err); dom.chapterContent.innerHTML = `
Could not load the markdown documentation for this chapter. Make sure the file exists under public/${chapter.file}.
Details: ${err.message}
blocks in
// the reader, so reader and editor highlight identically — no extra grammar
// or wasm in the browser. Re-run on theme switch so colours track the theme.
async function highlightFlashBlocks(root) {
if (!(state.editorLoaded && window.monaco)) return;
const scope = root || document;
const blocks = scope.querySelectorAll('pre code.language-flash, pre code.language-go');
for (const code of blocks) {
// Stash the original source the first time so re-highlights start from
// plain text, not already-colourised markup.
if (code.dataset.raw === undefined) code.dataset.raw = code.textContent;
try {
code.innerHTML = await monaco.editor.colorize(code.dataset.raw, 'flash', { tabSize: 4 });
} catch (err) {
console.warn('Flash highlight failed:', err);
}
}
}
// ==========================================================================
// Transpiler API Pipeline Integration
// ==========================================================================
// One-line notice shown whenever the transpile backend is absent (static build).
function logStaticNotice() {
logTerminal(
"Static build — reading chapters and loading examples into the editor work, " +
"but live transpilation needs the local dev server.\n" +
"Clone https://github.com/ajhahnde/Flash and run `npm start` in tutorial/.",
"warning"
);
}
async function runTranspilation() {
if (!state.flashEditor) return;
if (!state.backend) {
updateTerminalStatus('idle', 'Static');
logStaticNotice();
return;
}
const code = state.flashEditor.getValue();
updateTerminalStatus('transpiling', 'Transpiling...');
logTerminal("Invoking compiler backend...", "info");
try {
const response = await fetch('/api/transpile', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ code })
});
const result = await response.json();
if (result.success) {
// Update output editor
if (state.zigEditor) {
state.zigEditor.setValue(result.output || '// Empty output.');
}
// Switch view to output
switchTab('output');
// Log status
updateTerminalStatus('success', 'Success');
let logMsg = "Transpilation succeeded.\n";
if (result.error) {
logMsg += `\nCompiler Warnings:\n${result.error}`;
logTerminal(logMsg, "warning");
} else {
logTerminal(logMsg + "No compiler errors or warnings.", "success");
}
} else {
// Transpilation failed (compiler returned non-zero code)
updateTerminalStatus('error', 'Compiler Error');
logTerminal(`Compiler Execution Failed:\n\n${result.error}`, "error");
// Focus on terminal drawer if hidden/small
console.warn("Compilation failed. Visual logs added to terminal drawer.");
}
} catch (err) {
console.error("Transpilation API call failed:", err);
updateTerminalStatus('error', 'Network Error');
logTerminal(`HTTP network error while communicating with backend: ${err.message}\nEnsure the local server is running on http://localhost:3000.`, "error");
}
}
// ==========================================================================
// Terminal Drawer Logger Utilities
// ==========================================================================
function logTerminal(message, type = 'info') {
dom.terminalBody.classList.remove('log-error', 'log-success', 'log-warning');
const timestamp = new Date().toLocaleTimeString();
const prefix = `[${timestamp}] `;
dom.terminalBody.innerText = prefix + message;
if (type === 'error') {
dom.terminalBody.classList.add('log-error');
} else if (type === 'success') {
dom.terminalBody.classList.add('log-success');
} else if (type === 'warning') {
dom.terminalBody.classList.add('log-warning');
}
// Errors and warnings must be readable — pop the drawer open if collapsed.
if ((type === 'error' || type === 'warning') && dom.terminalDrawer.classList.contains('collapsed')) {
setTerminalCollapsed(false);
}
}
function updateTerminalStatus(statusClass, label) {
dom.terminalStatus.className = `status-indicator ${statusClass}`;
dom.terminalStatus.textContent = label;
}
// ==========================================================================
// Initialization
// ==========================================================================
document.addEventListener('DOMContentLoaded', () => {
// 0. Probe the transpile backend once; static hosting (GitHub Pages) has none.
fetch('/api/chapters')
.then(r => { state.backend = r.ok; })
.catch(() => { state.backend = false; })
.finally(() => {
if (!state.backend) {
updateTerminalStatus('idle', 'Static');
logStaticNotice();
}
});
// 1. Initialize icons
lucide.createIcons();
// 2. Initialize UI configuration (Themes & layout)
initThemeAndLayout();
initSidebarDrawer();
initTerminalDrawer();
// 3. Load Monaco Code Editors
initMonaco();
// 4. Fetch chapters navigation list
loadChapters();
// 5. Bind action buttons
dom.transpileBtn.addEventListener('click', runTranspilation);
dom.clearTerminal.addEventListener('click', () => {
dom.terminalBody.innerHTML = 'Terminal cleared.';
updateTerminalStatus('idle', 'Idle');
});
dom.prevBtn.addEventListener('click', () => {
if (state.currentChapterIndex > 0) {
selectChapter(state.currentChapterIndex - 1);
}
});
dom.nextBtn.addEventListener('click', () => {
if (state.currentChapterIndex < state.chapters.length - 1) {
selectChapter(state.currentChapterIndex + 1);
}
});
// Handle back/forward history navigation via hash change
window.addEventListener('hashchange', () => {
const hash = window.location.hash.substring(1);
const activeChapterIndex = state.chapters.findIndex(c => c.id === hash);
if (activeChapterIndex !== -1 && activeChapterIndex !== state.currentChapterIndex) {
selectChapter(activeChapterIndex);
}
});
});