@lincyaw/web 0.0.0-stage → 1.0.0-rc.0

package/src/domain/pages.ts

@@ -0,0 +1,108 @@
+import { blockText, chapters } from '@lincyaw/kernel'
+import type { IRDocument } from '@lincyaw/kernel'
+
+export interface WebPage {
+  path: string
+  title: string
+  sections: string[]
+}
+
+function slug(text: string): string {
+  return text.normalize('NFKC').toLowerCase().replace(/[^\p{L}\p{N}]+/gu, '-').replace(/^-+|-+$/g, '') || 'page'
+}
+
+function baseName(file: string): string {
+  return file.split(/[\\/]/).pop()!.replace(/\.[^.]+$/, '')
+}
+
+export function toPages(doc: IRDocument): WebPage[] {
+  const paths = new Set<string>()
+  let file: string | undefined
+  return chapters(doc).map((chapter, i) => {
+    const first = chapter.sections[0]!
+    const name = i === 0 ? 'index' : slug(first.source.file === file ? first.id : baseName(first.source.file))
+    let path = name
+    for (let n = 2; paths.has(path); n++) path = `${name}-${n}`
+    paths.add(path)
+    file = first.source.file
+    return { path, title: chapter.title, sections: chapter.sections.map(section => section.id) }
+  })
+}
+
+export function translationPages(doc: IRDocument, original: readonly WebPage[]): WebPage[] {
+  const pages = toPages(doc)
+  const matched = pages.map(page => original.find(o => o.sections[0] === page.sections[0])?.path)
+  const paths = new Set(matched.filter(path => path !== undefined))
+  return pages.map((page, i) => {
+    let path = matched[i]
+    if (path === undefined) {
+      path = page.path
+      for (let n = 2; paths.has(path); n++) path = `${page.path}-${n}`
+      paths.add(path)
+    }
+    return { ...page, path }
+  })
+}
+
+export function pageLink(page: WebPage, prefix = ''): string {
+  return page.path === 'index' ? `${prefix}/` : `${prefix}/${page.path}.html`
+}
+
+export function sectionLinks(pages: readonly WebPage[], prefix = ''): Record<string, string> {
+  return Object.fromEntries(pages.flatMap(page => page.sections.map((id, i) =>
+    [id, i === 0 ? pageLink(page, prefix) : `${pageLink(page, prefix)}#${encodeURIComponent(id)}`])))
+}
+
+export interface SidebarItem {
+  text?: string
+  link?: string
+  items?: SidebarItem[]
+}
+
+export function sidebar(doc: IRDocument, pages: readonly WebPage[], prefix = ''): SidebarItem[] {
+  const links = sectionLinks(pages, prefix)
+  const titles = new Map(doc.sections.map(section => [section.id, section.title]))
+  const chapters = pages.map((page): SidebarItem => {
+    const items = page.sections.slice(1).map(id => ({ text: titles.get(id) ?? id, link: links[id]! }))
+    return { text: page.title, link: pageLink(page, prefix), ...items.length ? { items } : {} }
+  })
+  return [{ items: chapters }]
+}
+
+export function pageOf(pages: readonly WebPage[], relativePath: string): WebPage | undefined {
+  const path = relativePath.replace(/\.md$/, '')
+  return pages.find(page => page.path === path)
+}
+
+export interface Neighbour {
+  text: string
+  link: string
+}
+
+export function neighbour(page: WebPage | undefined, prefix = ''): Neighbour | undefined {
+  return page && { text: page.title, link: pageLink(page, prefix) }
+}
+
+export function pageMarkdown(page: WebPage, prev?: Neighbour, next?: Neighbour): string {
+  const link = (other?: Neighbour) => (other ? JSON.stringify(other) : 'false')
+  return ['---', `title: ${JSON.stringify(page.title)}`, 'outline: [2, 3]', `prev: ${link(prev)}`, `next: ${link(next)}`, '---', '', '<PresmiumPage />', ''].join('\n')
+}
+
+export interface SearchDocument {
+  id: string
+  title: string
+  titles: string[]
+  text: string
+}
+
+export function searchDocuments(doc: IRDocument, base: string, pages: readonly WebPage[] = toPages(doc), titles: string[] = []): SearchDocument[] {
+  return pages.flatMap((page) => {
+    const path = page.path === 'index' ? '' : `${page.path}.html`
+    return page.sections.flatMap(id => doc.sections.filter(s => s.id === id)).map((section, i) => ({
+      id: `${base}${path}#${section.id}`,
+      title: section.title,
+      titles: [...titles, ...i === 0 ? [] : [page.title]],
+      text: section.blocks.map(blockText).filter(Boolean).join('\n'),
+    }))
+  })
+}

package/src/node/addons.ts

@@ -0,0 +1,76 @@
+import { existsSync, readdirSync, readFileSync } from 'node:fs'
+import { join, resolve } from 'node:path'
+import { pathToFileURL } from 'node:url'
+import { isRecord } from '@lincyaw/kernel'
+import type { PresmiumNodePlugin, RenderContext } from '@lincyaw/kernel'
+
+const CLIENT_PLUGIN = 'src/client/plugin.ts'
+const VIEWER_PLUGIN = 'src/client/viewer.ts'
+const VITE_CONFIG = 'vite.config.ts'
+const COMPONENT = /^[^.]+\.(vue|[jt]sx?)$/
+
+export interface VitePluginsEntry {
+  file: string
+  config: Record<string, unknown>
+}
+
+export interface ClientModules {
+  components: Map<string, string>
+  plugins: string[]
+  viewers: { name: string, file: string }[]
+  vite: string[]
+  nodeVite: VitePluginsEntry[]
+}
+
+function collect(dir: string, name: string, modules: ClientModules, plugin: boolean): void {
+  const components = join(dir, 'components')
+  if (existsSync(components)) {
+    for (const file of readdirSync(components).filter(f => COMPONENT.test(f)).sort()) {
+      modules.components.set(file.replace(/\.[^.]+$/, ''), join(components, file))
+    }
+  }
+  if (existsSync(join(dir, CLIENT_PLUGIN))) modules.plugins.push(join(dir, CLIENT_PLUGIN))
+  if (existsSync(join(dir, VIEWER_PLUGIN))) modules.viewers.push({ name, file: join(dir, VIEWER_PLUGIN) })
+  if (plugin && existsSync(join(dir, VITE_CONFIG))) modules.vite.push(join(dir, VITE_CONFIG))
+}
+
+function manifest(dir: string): Record<string, unknown> {
+  try {
+    const pkg: unknown = JSON.parse(readFileSync(join(dir, 'package.json'), 'utf8'))
+    return isRecord(pkg) ? pkg : {}
+  } catch {
+    return {}
+  }
+}
+
+function nodeEntry(dir: string): string | undefined {
+  const { exports } = manifest(dir)
+  const entry = isRecord(exports) ? exports['./presmium'] : undefined
+  return typeof entry === 'string' ? resolve(dir, entry) : undefined
+}
+
+export async function nodeVitePlugins(ctx: RenderContext, presmium: Record<string, unknown>, always = false): Promise<VitePluginsEntry[]> {
+  if (ctx.vitePlugins.length === 0 && !always) return []
+  const entries: VitePluginsEntry[] = []
+  for (const name of ctx.plugins) {
+    const dir = ctx.pluginDirs[name]
+    const file = dir && nodeEntry(dir)
+    if (!file) continue
+    const plugin = (await import(pathToFileURL(file).href).catch(() => ({}))).default as PresmiumNodePlugin | undefined
+    if (typeof plugin?.vitePlugins !== 'function') continue
+    const config = presmium[plugin.id]
+    entries.push({ file, config: isRecord(config) ? config : {} })
+  }
+  return entries
+}
+
+export function clientModules(ctx: RenderContext, nodeVite: VitePluginsEntry[]): ClientModules {
+  const modules: ClientModules = { components: new Map(), plugins: [], viewers: [], vite: [], nodeVite }
+  for (const name of ctx.plugins) {
+    const dir = ctx.pluginDirs[name]
+    const { name: pkg } = dir ? manifest(dir) : {}
+    if (dir) collect(dir, typeof pkg === 'string' ? pkg : name, modules, true)
+  }
+  collect(ctx.deckDir, 'deck', modules, false)
+  return modules
+}

package/src/node/offline.ts

@@ -0,0 +1,130 @@
+import { createHash } from 'node:crypto'
+import { readdirSync, readFileSync, statSync, writeFileSync } from 'node:fs'
+import { join, sep } from 'node:path'
+import { SERVICE_WORKER, urlPath } from '../domain/index.ts'
+import { MEDIA } from './publish.ts'
+
+const MESSAGES = { runtimes: 'presmium:offline-runtimes', save: 'presmium:save-offline' }
+
+function source(cache: string, urls: string[], runtimeCache: string, runtimes: string[], runtimeBytes: number, base: string): string {
+  return `// Generated by @lincyaw/web.
+const CACHE = ${JSON.stringify(cache)}
+const RUNTIME_CACHE = ${JSON.stringify(runtimeCache)}
+const BASE = ${JSON.stringify(base)}
+const URLS = ${JSON.stringify(urls)}
+const RUNTIMES = ${JSON.stringify(runtimes)}
+const RUNTIME_BYTES = ${runtimeBytes}
+const RUNTIME_PATHS = new Set(RUNTIMES)
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(caches.open(CACHE).then(cache => cache.addAll(URLS)).then(() => self.skipWaiting()))
+})
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(caches.keys()
+    .then(keys => Promise.all(keys.filter(key => key.startsWith('presmium-web-') && key !== CACHE && key !== RUNTIME_CACHE).map(key => caches.delete(key))))
+    .then(() => self.clients.claim()))
+})
+
+async function cached(request) {
+  const url = new URL(request.url)
+  url.search = ''
+  url.hash = ''
+  const path = url.pathname
+  const candidates = [url.href]
+  if (path.endsWith('/')) candidates.push(url.href + 'index.html')
+  else if (!/\\.[^/]+$/.test(path)) candidates.push(url.href + '.html')
+  for (const candidate of candidates) {
+    const hit = await caches.match(candidate, { cacheName: CACHE })
+    if (hit) return hit
+  }
+  return undefined
+}
+
+/** A runtime file from its cache, else from the network, kept for next time. */
+async function runtime(href) {
+  const cache = await caches.open(RUNTIME_CACHE)
+  const hit = await cache.match(href)
+  if (hit) return hit
+  const response = await fetch(href)
+  if (response.status === 200) await cache.put(href, response.clone())
+  return response
+}
+
+const runtimeUrls = () => RUNTIMES.map(path => new URL(path, self.location.origin).href)
+
+async function saved() {
+  const cache = await caches.open(RUNTIME_CACHE)
+  const kept = new Set((await cache.keys()).map(request => request.url))
+  return runtimeUrls().every(href => kept.has(href))
+}
+
+async function save() {
+  for (const href of runtimeUrls()) {
+    const response = await runtime(href)
+    if (response.status !== 200) throw new Error(href + ': ' + response.status)
+  }
+}
+
+self.addEventListener('message', (event) => {
+  const port = event.ports[0]
+  const type = event.data && event.data.type
+  if (!port) return
+  if (type === ${JSON.stringify(MESSAGES.runtimes)}) {
+    event.waitUntil(saved().then(done => port.postMessage({ bytes: RUNTIME_BYTES, saved: done })))
+  } else if (type === ${JSON.stringify(MESSAGES.save)}) {
+    event.waitUntil(save().then(() => port.postMessage({ ok: true }), () => port.postMessage({ ok: false })))
+  }
+})
+
+self.addEventListener('fetch', (event) => {
+  const { request } = event
+  const url = new URL(request.url)
+  if (request.method !== 'GET' || url.origin !== self.location.origin || !url.pathname.startsWith(BASE)) return
+  if (RUNTIME_PATHS.has(url.pathname)) {
+    url.search = ''
+    url.hash = ''
+    event.respondWith(runtime(url.href))
+  } else if (url.pathname.startsWith(BASE + 'assets/')) {
+    event.respondWith(cached(request).then(hit => hit || fetch(request)))
+  } else {
+    event.respondWith(fetch(request).catch(() => cached(request).then(hit => hit || Response.error())))
+  }
+})
+`
+}
+
+function fallbackFonts(dir: string, all: string[]): Set<string> {
+  const unused = new Set<string>()
+  for (const file of all.filter(f => f.endsWith('.css'))) {
+    for (const [, face] of readFileSync(join(dir, file), 'utf8').matchAll(/@font-face\s*\{([^}]*)\}/g)) {
+      if (!/woff2/.test(face!)) continue
+      for (const [, url] of face!.matchAll(/url\(\s*["']?([^"')]+\.(?:woff|ttf))["']?\s*\)/g)) unused.add(url!.split('/').pop()!)
+    }
+  }
+  return unused
+}
+
+function files(dir: string): string[] {
+  const all = readdirSync(dir, { recursive: true, encoding: 'utf8' })
+    .filter(file => statSync(join(dir, file)).isFile() && file !== SERVICE_WORKER)
+    .sort()
+  const unused = fallbackFonts(dir, all)
+  return all.filter(file => !unused.has(file.split(sep).pop()!))
+}
+
+const isRuntime = (file: string) => /^(?:pyodide|wasi|presmium\/jax-js)\//.test(file) && !/(?:^|\/)LICENSES?$/.test(file)
+
+export function writeServiceWorker(outDir: string, base: string): void {
+  const list = files(outDir).map(file => file.split(sep).join('/'))
+  const shell = list.filter(file => !isRuntime(file))
+  const runtimes = list.filter(isRuntime)
+  const hash = (names: string[]) => {
+    const digest = createHash('sha256')
+    for (const file of names) digest.update(file).update(readFileSync(join(outDir, file)))
+    return digest.digest('hex').slice(0, 12)
+  }
+  const urls = (names: string[]) => names.map(file => file.split('/')).map(parts => base + (parts[0] === MEDIA ? parts.map(encodeURIComponent).join('/') : urlPath(parts.join('/'))))
+  const bytes = runtimes.reduce((sum, file) => sum + statSync(join(outDir, file)).size, 0)
+  writeFileSync(join(outDir, SERVICE_WORKER), source(`presmium-web-${hash(shell)}`, urls(shell), `presmium-web-runtimes-${hash(runtimes)}`, urls(runtimes), bytes, base))
+}

package/src/node/presmium.ts

@@ -0,0 +1,10 @@
+import { createRequire } from 'node:module'
+import type { PresmiumNodePlugin } from '@lincyaw/kernel'
+import { WEB_ID } from '../domain/index.ts'
+import { renderer } from './renderer.ts'
+
+const { version } = createRequire(import.meta.url)('../../package.json') as { version: string }
+
+const plugin: PresmiumNodePlugin = { id: WEB_ID, version, kernel: '^1.0.0', renderer }
+
+export default plugin

package/src/node/publish.ts

@@ -0,0 +1,101 @@
+import { statSync } from 'node:fs'
+import { join } from 'node:path'
+import { irBlocks, mapHtmlUrls, publishedUrl, withProp } from '@lincyaw/kernel'
+import type { DocumentLink, IRBlock, IRDocument, LocalAsset, MdastNode, RenderContext, SourcePos } from '@lincyaw/kernel'
+import { copyPublished } from '@lincyaw/kernel/node'
+import katex from 'katex'
+
+export const MEDIA = 'media'
+
+const LINKED = new Set(['image', 'link', 'definition', 'card'])
+
+interface Asset extends LocalAsset {
+  size: number
+  mtimeMs: number
+}
+
+const assets = new Map<string, Asset>()
+
+function localAsset(ctx: RenderContext, source: SourcePos, url: string): Asset | undefined {
+  const key = `${source.file}\0${url}`
+  const known = assets.get(key)
+  const now = known && statSync(known.file, { throwIfNoEntry: false })
+  if (known && now && now.size === known.size && now.mtimeMs === known.mtimeMs) return known
+  const found = ctx.localAsset(source, url)
+  const stat = found && statSync(found.file, { throwIfNoEntry: false })
+  if (!found || !stat) {
+    assets.delete(key)
+    return undefined
+  }
+  const asset = { ...found, size: stat.size, mtimeMs: stat.mtimeMs, directory: found.directory ?? stat.isDirectory() }
+  if (asset.directory) assets.delete(key)
+  else assets.set(key, asset)
+  return asset
+}
+
+const rendered = new Map<string, string>()
+
+function renderMath(tex: string, display: boolean): string {
+  const key = `${display ? 'D' : 'I'}${tex}`
+  let html = rendered.get(key)
+  if (html === undefined) {
+    html = katex.renderToString(tex, { displayMode: display, throwOnError: false })
+    rendered.set(key, html)
+  }
+  return html
+}
+
+export type DocumentPage = (link: DocumentLink) => string | undefined
+
+export function publishedDocument(doc: IRDocument, ctx: RenderContext, publicDir: string, base: string, documentPage?: DocumentPage): IRDocument {
+  const { deckDir } = ctx
+  const copy = structuredClone(doc)
+  const media = join(publicDir, MEDIA)
+  const relative = (pos: { file: string }) => {
+    pos.file = ctx.portable(pos.file, deckDir) as string
+  }
+  const publish = (url: string, source: SourcePos): string | undefined => {
+    const linked = documentPage && ctx.documentLink?.(source, url)
+    if (linked) return documentPage(linked)
+    const asset = localAsset(ctx, source, url)
+    if (!asset) return undefined
+    copyPublished(asset, media)
+    return publishedUrl(asset, url, { prefix: `${base}${MEDIA}/` })
+  }
+  const mdast = (node: MdastNode, source: SourcePos) => {
+    if (LINKED.has(node.type) && typeof node.url === 'string') node.url = publish(node.url, source) ?? node.url
+    if (node.type === 'html' && typeof node.value === 'string') node.value = mapHtmlUrls(node.value, url => publish(url, source))
+    if ((node.type === 'math' || node.type === 'inlineMath') && typeof node.value === 'string') node.html = renderMath(node.value, node.type === 'math')
+    node.children?.forEach(child => mdast(child, source))
+  }
+  const block = (b: IRBlock) => {
+    const { node, source } = b
+    if (node.type === 'markdown') mdast(node.mdast, source)
+    if (node.type === 'component') {
+      if (node.fallback) mdast(node.fallback, source)
+      for (const [path, url] of Object.entries(node.assets ?? {})) {
+        const published = publish(url, source)
+        if (published) node.props = withProp(node.props, path, published)
+      }
+    }
+  }
+  copy.meta.entry = ctx.portable(copy.meta.entry, deckDir) as string
+  copy.config.presmium = ctx.portable(copy.config.presmium, deckDir) as IRDocument['config']['presmium']
+  for (const section of copy.sections) {
+    relative(section.source)
+    if (section.config) section.config = ctx.portable(section.config, deckDir) as typeof section.config
+    for (const b of irBlocks(section.blocks)) block(b)
+    for (const b of irBlocks(section.blocks)) relative(b.source)
+  }
+  for (const finding of copy.diagnostics) {
+    if (finding.source) relative(finding.source)
+  }
+  return copy
+}
+
+export function publishedFile(ctx: RenderContext, publicDir: string, base: string, source: SourcePos, url: string): string | undefined {
+  const asset = localAsset(ctx, source, url)
+  if (!asset || asset.directory) return undefined
+  copyPublished(asset, join(publicDir, MEDIA))
+  return publishedUrl(asset, url, { prefix: `${base}${MEDIA}/` })
+}

package/src/node/renderer.ts

@@ -0,0 +1,147 @@
+import { rmSync } from 'node:fs'
+import { join, resolve } from 'node:path'
+import { irBlocks } from '@lincyaw/kernel'
+import type { IRDocument, RenderContext, Renderer } from '@lincyaw/kernel'
+import { diffDocuments } from '@lincyaw/viewer/domain'
+import launchEditor from 'launch-editor'
+import { offlineEnabled, rendererConfig } from '../domain/index.ts'
+import type { WebRendererConfig } from '../domain/index.ts'
+import { clientModules, nodeVitePlugins } from './addons.ts'
+import type { ClientModules } from './addons.ts'
+import { writeServiceWorker } from './offline.ts'
+import { publishedDocument, publishedFile } from './publish.ts'
+import type { DocumentPage } from './publish.ts'
+import { siteFiles, write, writeSite } from './site.ts'
+import type { WorkspaceOptions } from './site.ts'
+import { buildSite, devSite } from './sites.ts'
+import { revisionOf } from './vite.ts'
+import { vitepressBuild, vitepressDev } from './vitepress.ts'
+
+const BUILD_DIR = '.presmium/web/build'
+
+function sourceFiles(doc: IRDocument): Set<string> {
+  const files = new Set<string>()
+  for (const section of doc.sections) {
+    files.add(section.source.file)
+    for (const block of irBlocks(section.blocks)) files.add(block.source.file)
+  }
+  return files
+}
+
+export interface DocumentSite {
+  workspace?: WorkspaceOptions
+  extra?: ClientModules
+  documentPage?: DocumentPage
+  config?: string
+}
+
+function merge(modules: ClientModules, extra?: ClientModules): ClientModules {
+  if (!extra) return modules
+  return {
+    components: new Map([...extra.components, ...modules.components]),
+    plugins: [...extra.plugins, ...modules.plugins],
+    viewers: [...extra.viewers, ...modules.viewers],
+    vite: [...extra.vite, ...modules.vite],
+    nodeVite: [...extra.nodeVite, ...modules.nodeVite],
+  }
+}
+
+const REMOTE = /^(?:[a-z][a-z\d+.-]*:|\/\/)/i
+
+function headImage(doc: IRDocument, ctx: RenderContext, options: WebRendererConfig, publicDir: string, document: DocumentSite): string | undefined {
+  const image = options.shell.head?.image
+  if (!image || REMOTE.test(image)) return image
+  const published = publishedFile(ctx, publicDir, options.base, { file: document.config ?? resolve(ctx.deckDir, doc.meta.entry), line: 1 }, image)
+  return published && options.shell.sitemap ? `${options.shell.sitemap.hostname}${published}` : published
+}
+
+async function prepare(doc: IRDocument, ctx: RenderContext, workDir: string, document: DocumentSite = {}) {
+  const options = rendererConfig(ctx)
+  const files = siteFiles(workDir)
+  rmSync(files.publicDir, { recursive: true, force: true })
+  const deck = { deckDir: ctx.deckDir, workspaceRoot: ctx.workspaceRoot }
+  const nodeVite = await nodeVitePlugins(ctx, doc.config.presmium, Boolean(document.workspace))
+  const publish = (d: IRDocument) => publishedDocument(d, ctx, files.publicDir, options.base, document.documentPage)
+  const image = headImage(doc, ctx, options, files.publicDir, document)
+  const site = (published: IRDocument) => writeSite(workDir, {
+    doc: published,
+    deck,
+    modules: merge(clientModules(ctx, nodeVite), document.extra),
+    options,
+    workspace: document.workspace,
+    translations: (ctx.translations ?? []).map(({ lang, doc: translated }) => ({ lang, doc: publish(translated) })),
+    image,
+    ...ctx.preview ? { preview: ctx.preview } : {},
+  })
+  return { options, files, publish, site }
+}
+
+export async function buildDocument(doc: IRDocument, ctx: RenderContext, workDir: string, document: DocumentSite = {}): Promise<void> {
+  const { options, files, publish, site } = await prepare(doc, ctx, workDir, document)
+  const published = publish(doc)
+  site(published)
+  write(join(files.publicDir, 'ir.json'), JSON.stringify(published))
+  const code = await vitepressBuild(files.root, ctx.outDir)
+  if (code !== 0) throw new Error(`vitepress build exited with code ${code}`)
+  if (offlineEnabled(doc.config.presmium)) writeServiceWorker(ctx.outDir, options.base)
+}
+
+export interface DocumentDevServer {
+  port: number
+  update(doc: IRDocument): Promise<void>
+  close(): Promise<void>
+}
+
+export async function devDocument(doc: IRDocument, ctx: RenderContext, document: DocumentSite = {}, port?: number, listen: { host?: string, signal?: AbortSignal } = {}): Promise<DocumentDevServer> {
+  const { options, files, publish, site } = await prepare(doc, ctx, ctx.outDir, document)
+  let current = publish(doc)
+  let revision = revisionOf(JSON.stringify(current))
+  site(current)
+  const server = await vitepressDev(files.root, port ?? options.port, (message) => {
+    if (message.type !== 'presmium:source' || document.workspace || !sourceFiles(current).has(message.file)) return
+    launchEditor(`${resolve(ctx.deckDir, message.file)}:${message.line}`, (file, error) => {
+      console.error(`[presmium] could not open ${file} in an editor${error ? `: ${error}` : ''}; set $EDITOR or $LAUNCH_EDITOR`)
+    })
+  }, listen)
+  return {
+    port: server.port,
+    async update(next: IRDocument) {
+      const published = publish(next)
+      const update = diffDocuments(current, published)
+      site(published)
+      if (!update) {
+        if (ctx.translations?.length) server.send({ type: 'presmium:translations' })
+        return
+      }
+      const base = revision
+      current = published
+      revision = revisionOf(JSON.stringify(published))
+      server.send({ type: 'presmium:update', update, base, revision })
+    },
+    close: () => server.close(),
+  }
+}
+
+export const renderer: Renderer = {
+  id: 'web',
+  site: true,
+  support: () => 'full',
+
+  async build(doc: IRDocument, ctx: RenderContext) {
+    await buildDocument(doc, ctx, join(ctx.deckDir, BUILD_DIR))
+    return { outDir: ctx.outDir, skipped: [] }
+  },
+
+  async dev(doc: IRDocument, ctx: RenderContext) {
+    const server = await devDocument(doc, ctx)
+    const { base } = rendererConfig(ctx)
+    return {
+      url: `http://localhost:${server.port}${base}`,
+      update: next => server.update(next),
+      close: () => server.close(),
+    }
+  },
+
+  buildSite,
+  devSite,
+}