import { readFileSync } from 'node:fs'
import { fileURLToPath } from 'node:url'

// Injects a static, crawlable SEO snapshot into a <noscript> block in the
// served index.html. Browsers with JS enabled ignore <noscript>, so the live
// app and its UX are completely unaffected. Non-rendering crawlers and `curl`
// receive a real <h1>, descriptive content and <a href> links instead of an
// empty SPA shell.
export default function seoSnapshot() {
  const snapshotPath = fileURLToPath(new URL('./src/seo-snapshot.html', import.meta.url))
  return {
    name: 'seo-snapshot',
    transformIndexHtml(html) {
      const snapshot = readFileSync(snapshotPath, 'utf8')
        .replace(/<!--[\s\S]*?-->/g, '') // strip authoring comments from served HTML
        .trim()
      const block = `<noscript>\n${snapshot}\n</noscript>`
      // Place it immediately after the app mount point.
      return html.replace(
        '<div id="app"></div>',
        `<div id="app"></div>\n${block}`,
      )
    },
  }
}