Update build.mjs

Author: paulstevendev

packages/tel-frontend-review/build.mjs

@@ -1,41 +1,64 @@
 import { promises as fs } from "node:fs";
 import { join, dirname, parse } from "node:path";
 import { fileURLToPath } from "node:url";
+import nunjucks from "nunjucks";
 import fse from "fs-extra";
 import * as sass from "sass";
+import { execSync } from "node:child_process";
 
 // Replace __dirname in ES modules
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
-const repoRoot = join(__dirname, "../../"); // back to repo root
+// Paths
+const repoRoot = join(__dirname, "../../"); // root of repo
 const reviewSrc = join(__dirname, "src");
 const reviewDist = join(__dirname, "dist");
+const nhsukDist = join(repoRoot, "node_modules/nhsuk-frontend/dist");
 
-// TEL frontend package paths
+// TEL frontend package
 const telFrontendDir = join(repoRoot, "packages/tel-frontend");
 const telFrontendDist = join(telFrontendDir, "dist");
-const telFrontendSrcScss = join(telFrontendDir, "src/styles.scss");
 
 // -------- Helpers --------
 
-// Copy built TEL frontend files + NHS frontend assets + review-specific assets
+// Build TEL Frontend (CSS + JS) via Gulp
+async function buildTelFrontend() {
+  console.log("Building TEL Frontend CSS + JS via Gulp...");
+
+  await fse.emptyDir(telFrontendDist);
+  await fse.ensureDir(telFrontendDist);
+
+  try {
+    execSync("npx gulp build", {
+      cwd: telFrontendDir,
+      stdio: "inherit",
+    });
+  } catch (err) {
+    console.error("Gulp build failed:", err);
+    process.exit(1);
+  }
+
+  console.log("TEL Frontend CSS/JS built successfully");
+}
+
+// Copy assets: TEL + NHS + review site
 async function buildReviewAssets() {
   console.log("Copying review site assets...");
 
   await fse.ensureDir(join(reviewDist, "stylesheets"));
   await fse.ensureDir(join(reviewDist, "javascripts"));
 
-  // Copy precompiled NHS.UK frontend CSS + JS
+  // Copy NHS.UK frontend v10 precompiled CSS/JS
   await fse.copy(
-    join(repoRoot, "node_modules/nhsuk-frontend/dist/nhsuk.min.css"),
+    join(nhsukDist, "nhsuk/nhsuk-frontend.min.css"),
     join(reviewDist, "stylesheets/nhsuk.min.css")
   );
   await fse.copy(
-    join(repoRoot, "node_modules/nhsuk-frontend/dist/nhsuk.min.js"),
+    join(nhsukDist, "nhsuk/nhsuk-frontend.min.js"),
     join(reviewDist, "javascripts/nhsuk.min.js")
   );
 
-  // Copy TEL frontend built CSS + JS
+  // Copy TEL frontend built files
   await fse.copy(
     join(telFrontendDist, "tel-frontend.css"),
     join(reviewDist, "stylesheets/tel-frontend.css")
@@ -45,7 +68,7 @@ async function buildReviewAssets() {
     join(reviewDist, "javascripts/tel-frontend.min.js")
   );
 
-  // Copy static assets for review site (images, etc.)
+  // Copy review site static assets
   const reviewAssetsSrc = join(reviewSrc, "assets");
   if (await fse.pathExists(reviewAssetsSrc)) {
     await fse.copy(reviewAssetsSrc, join(reviewDist, "assets"));
@@ -54,13 +77,13 @@ async function buildReviewAssets() {
   console.log("Review site assets copied");
 }
 
-// Compile review site SCSS (only your custom styles)
+// Build review site CSS (optional additional styles)
 async function buildReviewCSS() {
   console.log("Building review site CSS...");
 
   const css = sass.compile(join(reviewSrc, "scss/main.scss"), {
     style: "expanded",
-    loadPaths: ["node_modules"], // allows @use of TEL frontend SCSS
+    loadPaths: ["node_modules"], // needed for nhsuk-frontend
   });
 
   const outDir = join(reviewDist, "stylesheets");
@@ -70,26 +93,72 @@ async function buildReviewCSS() {
   console.log("Review site CSS built at:", join(outDir, "review.css"));
 }
 
+// Render review site Nunjucks HTML
+async function buildReviewHtml() {
+  console.log("Rendering review site HTML...");
+
+  const telComponents = join(repoRoot, "packages/tel-frontend/src/tel/components");
+
+  const env = nunjucks.configure(
+    [
+      reviewSrc,                      // review site source
+      join(repoRoot, "node_modules/nhsuk-frontend"), // NHS macros
+      telComponents                   // TEL frontend macros
+    ],
+    { autoescape: true }
+  );
+
+  // Render root-level .njk files
+  const files = await fse.readdir(reviewSrc);
+  for (const file of files) {
+    if (file.endsWith(".njk")) {
+      const name = parse(file).name;
+      const html = env.render(file, { title: "TEL Frontend Review" });
+
+      const outDir = join(reviewDist, name === "index" ? "" : name);
+      await fse.ensureDir(outDir);
+      await fs.writeFile(join(outDir, "index.html"), html);
+      console.log(`Rendered ${file} -> ${outDir}/index.html`);
+    }
+  }
+
+  // Render example pages
+  const examplesSrc = join(reviewSrc, "examples");
+  const examplesDist = join(reviewDist, "examples");
+  await fse.ensureDir(examplesDist);
+
+  if (await fse.pathExists(examplesSrc)) {
+    const exampleFiles = await fse.readdir(examplesSrc);
+    for (const file of exampleFiles) {
+      if (file.endsWith(".njk")) {
+        const name = file.replace(/\.njk$/, ".html");
+        const rendered = env.render(join("examples", file));
+        await fs.writeFile(join(examplesDist, name), rendered, "utf8");
+        console.log(`Rendered ${file} -> ${join(examplesDist, name)}`);
+      }
+    }
+  }
+
+  console.log("Review HTML rendered");
+}
+
 // -------- Main build --------
 async function build() {
   try {
     await fse.emptyDir(reviewDist);
 
-    // Step 1: Build TEL frontend (CSS + JS) via Gulp
-    console.log("Building TEL Frontend CSS + JS via Gulp...");
-    const { execSync } = await import("node:child_process");
-    execSync("npx gulp build", {
-      cwd: telFrontendDir,
-      stdio: "inherit",
-    });
-    console.log("TEL Frontend CSS/JS built successfully");
+    // Step 1: Build TEL frontend
+    await buildTelFrontend();
 
     // Step 2: Copy assets (TEL + NHS + review site)
     await buildReviewAssets();
 
     // Step 3: Compile review site SCSS
     await buildReviewCSS();
 
+    // Step 4: Render HTML pages
+    await buildReviewHtml();
+
     console.log("Review site build finished successfully");
   } catch (err) {
     console.error("Build failed:", err);