pt0/peatsite/renderGalleryIndexAI.mts

1// @ts-expect-error no types for react-dom/server
2import { renderToString } from 'react-dom/server'
3import React from 'react'
4import esbuild from 'esbuild'
5import fs from 'fs'
6import path from 'path'
7import { marked } from 'marked'
8
9marked.use({breaks: true})
10
11export const preserveLeadingSpaces = (md: string) => {
12  const parts = md.split(/(```[\s\S]*?```)/g)
13  return parts.map(part => part.startsWith('```') ? part : part.replace(/^( +)/gm, (_: string, spaces: string) => '&nbsp;'.repeat(spaces.length))).join('')
14}
15import { ptTmpDir } from '../serverF/libFs/ensurePtTmpDirF.mts'
16import { viewportMetaHtml } from './viewportMetaF.mjs'
17import { transcriptEmbedStyles } from './octranscripts/ocTranscriptStylesF.mjs'
18
19import { generateTranscriptHtml } from './octranscripts/epOcToHtmlAI.mjs'
20
21const jsxCache = new Map()
22
23export const loadJsxComponent = async (jsxPath: string, exportName = 'default') => {
24  const cacheKey = `${jsxPath}:${exportName}`
25  const cached = jsxCache.get(cacheKey)
26  if (cached && cached.inputs.every((p: string) => fs.existsSync(p))) {
27    const maxMtime = Math.max(...cached.inputs.map((p: string) => fs.statSync(p).mtimeMs))
28    if (cached.mtime === maxMtime) return cached.component
29  }
30
31  const result = await esbuild.build({
32    entryPoints: [jsxPath],
33    jsx: 'automatic',
34    bundle: true,
35    write: false,
36    format: 'esm',
37    platform: 'node',
38    external: ['react', 'react-dom', 'react/jsx-runtime'],
39    metafile: true,
40  })
41  const inputs = Object.keys(result.metafile.inputs).map(p => path.resolve(p))
42  const mtime = Math.max(...inputs.map(p => fs.statSync(p).mtimeMs))
43  const tmpPath = path.join(ptTmpDir, `jsx-${Date.now()}.mjs`)
44  fs.writeFileSync(tmpPath, result.outputFiles[0].text)
45  const mod = await import(tmpPath)
46  fs.unlinkSync(tmpPath)
47  const component = mod[exportName]
48  jsxCache.set(cacheKey, {mtime, inputs, component})
49  return component
50}
51
52export const renderJsxToHtml = async (jsxPath: string, exportName: string, props: Record<string, unknown>) => {
53  const Component = await loadJsxComponent(jsxPath, exportName)
54  return '<!DOCTYPE html>' + renderToString(React.createElement(Component, props))
55}
56
57const extractTranscriptContent = (html: string) => {
58  const startMarker = '<!--TRANSCRIPT_START-->', endMarker = '<!--TRANSCRIPT_END-->'
59  const startIdx = html.indexOf(startMarker), endIdx = html.indexOf(endMarker)
60  if (startIdx === -1 || endIdx === -1 || endIdx <= startIdx) return null
61  return html.slice(startIdx + startMarker.length, endIdx)
62}
63
64const injectTranscripts = async (html: string) => {
65  const transcriptRegex = /<p>\{\{transcript:(ses_[a-zA-Z0-9]+)(?::startAtStr=(.+?))?\}\}<\/p>/g
66  const matches = [...html.matchAll(transcriptRegex)]
67  for (const match of matches) {
68    const [fullMatch, sessionId, startAtStr] = match
69    try {
70      const transcriptHtml = await generateTranscriptHtml(sessionId, { startAtStr })
71      const content = extractTranscriptContent(transcriptHtml)
72      if (!content) { html = html.replace(fullMatch, `<p>Could not parse transcript: ${sessionId}</p>`); continue }
73      html = html.replace(fullMatch, `<style>${transcriptEmbedStyles}</style>${content}`)
74    } catch (e: any) {
75      html = html.replace(fullMatch, `<p>Transcript error: ${e.message}</p>`)
76    }
77  }
78  return html
79}
80
81export const renderMarkdownPage = async ({markdownPath, markdownStr, title, styles, homeHref, bodyClasses, rawHtmlSuffix}: {markdownPath?: string, markdownStr?: string, title?: string, styles?: string, homeHref?: string, bodyClasses?: string, rawHtmlSuffix?: string}) => {
82  const rawMd = markdownStr || (markdownPath && fs.existsSync(markdownPath) ? fs.readFileSync(markdownPath, 'utf8') : '')
83  let markdownHtml = marked(preserveLeadingSpaces(rawMd))
84  markdownHtml = await injectTranscripts(markdownHtml)
85  return `<!DOCTYPE html>
86<html>
87<head>
88  <meta charset="UTF-8">
89  ${viewportMetaHtml}
90  <title>${title || 'Page'}</title>
91  <style>${styles || ''}</style>
92</head>
93<body class="blogpost-page${bodyClasses ? ' ' + bodyClasses : ''}">
94  ${homeHref ? `<a href="${homeHref}" class="home-link">🌳</a>` : ''}
95  <div class="markdown-content">${markdownHtml || ''}</div>
96  ${rawHtmlSuffix || ''}
97</body>
98</html>`
99}
100