import { mkdir, writeFile } from "node:fs/promises";
import path from "node:path";
import { fileURLToPath } from "node:url";
import { renderToString, tags } from "../../dist/ztools.ssr.full.js";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const outputPath = path.join(__dirname, "index.html");

const { html, head, body, meta, title, style, h1, h2, p, section, table, thead, tbody, tr, th, td, form, label, input, button, ul, li } = tags;

const tableRows = [
  {
    feature: "Static hosting compatible",
    status: "yes",
    notes: "HTML is generated before deploy",
  },
  {
    feature: "Deterministic output",
    status: "yes",
    notes: "No timestamps or random values",
  },
  {
    feature: "ztools.ssr.js rendering",
    status: "yes",
    notes: "Page is built through renderToString",
  },
];

const listItems = [
  "Render the page structure with ztools.ssr.js",
  "Generate demo/ssr/index.html on the server in CI",
  "Publish static artifacts to GitHub Pages",
];

function renderPage() {
  const page = html(
    { lang: "en" },
    head(
      meta({ charset: "UTF-8" }),
      meta({ name: "viewport", content: "width=device-width, initial-scale=1.0" }),
      meta({ name: "generator", content: "demo/ssr/generate-ssr-page.mjs (ztools.ssr.js)" }),
      title("SSR Demo"),
      style(`
body { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Arial, sans-serif; max-width: 900px; margin: 40px auto; padding: 0 16px; line-height: 1.5; }
table { border-collapse: collapse; width: 100%; margin-top: 8px; }
th, td { border: 1px solid #c6cbd1; padding: 8px 10px; text-align: left; }
th { background: #f4f6f8; }
form { margin-top: 8px; display: grid; gap: 8px; max-width: 420px; }
input, button { padding: 8px; }
pre { background: #f6f8fa; border-radius: 6px; padding: 12px; overflow-x: auto; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
`.trim())
    ),
    body(
      h1("SSR Demo (Server-Generated)"),
      p(
        "This page is generated by server-side logic in CI/CD using ztools.ssr.js and deployed as static HTML on GitHub Pages."
      ),
      section(
        h2("Simple HTML Table"),
        table(
          thead(tr(th("feature"), th("status"), th("notes"))),
          tbody(
            ...tableRows.map((row) => tr(td(row.feature), td(row.status), td(row.notes)))
          )
        )
      ),
      section(
        h2("Simple Form"),
        form(
          { action: "#", method: "post" },
          label({ for: "demo-name" }, "Name"),
          input({ id: "demo-name", name: "name", type: "text", placeholder: "Ada Lovelace" }),
          label({ for: "demo-message" }, "Message"),
          input({
            id: "demo-message",
            name: "message",
            type: "text",
            placeholder: "SSR generated this page",
          }),
          button({ type: "submit" }, "Submit")
        )
      ),
      section(h2("Marked List"), ul(...listItems.map((item) => li(item))))
    )
  );

  return `<!doctype html>\n${renderToString(page)}\n`;
}

await mkdir(__dirname, { recursive: true });
await writeFile(outputPath, renderPage(), "utf8");
console.log(`Generated ${path.relative(process.cwd(), outputPath)} with ztools.ssr.js`);
ssr

Source
