Preview directive requires a "file" attribute.
\n`; + return; + } + + const { file, id, tall } = attrs; + + let htmlContent; + let title; + try { + // Read the HTML file from the examples directory + const __dirname = dirname(fileURLToPath(import.meta.url)); + const examplePath = join(__dirname, "../site/examples", file); + const raw = readFileSync(examplePath, "utf-8"); + const parsed = matter(raw); + htmlContent = parsed.content.trim(); + title = parsed.data.title; + } catch (error) { + console.error(`Error reading preview file: ${file}`, error); + const token = state.push("html_block", "", 0); + token.map = [directiveStartLine, directiveEndLine]; + token.content = `Could not load preview: ${file}
\n`; + return; + } + + try { + const previewId = id || `preview_${directiveStartLine}`; + const pathPrefix = ""; // use pathPrefix if the content is served from a subdirectory + const isTall = tall === "true"; + + const token = state.push("html_block", "", 0); + token.map = [directiveStartLine, directiveEndLine]; + token.content = generatePreviewHtml( + previewId, + title || "Preview", + file, + htmlContent, + pathPrefix, + isTall, + ); + } catch (error) { + console.error("Error rendering preview", error); + const token = state.push("html_block", "", 0); + token.map = [directiveStartLine, directiveEndLine]; + token.content = `Could not render preview: ${file}
\n`; + } + }; +} + +function generatePreviewHtml(id, title, file, htmlContent, pathPrefix, isTall) { + const ID = { + TAB: { + PREVIEW: `tab-preview-${id}`, + CODE: `tab-code-${id}`, + }, + PANEL: { + PREVIEW: `tabpanel-preview-${id}`, + CODE: `tabpanel-code-${id}`, + }, + }; + return ` +