Website deployment

Author: zentala

.github/workflows/deploy-website.yml

@@ -27,8 +27,9 @@ jobs:
 
       - name: Install dependencies
         run: |
-          npm install -g marked
-          npm install -g html-minifier-terser
+          cd website
+          npm install
+          cd ..
 
       - name: Build website
         run: |

.gitignore

@@ -15,3 +15,10 @@
 # Misc
 .DS_Store
 Thumbs.db
+
+# Node
+node_modules
+build
+npm-debug.log
+.env
+.DS_Store

website/build.js

@@ -1,52 +1,56 @@
 // website-src/build.js
 const fs = require("fs");
 const path = require("path");
-const { marked } = require("marked");
-
-// Read README.md
-const readmeContent = fs.readFileSync("README.md", "utf8");
-
-// Read HTML template
-const template = fs.readFileSync("website/index.html", "utf8");
-
-// Configure marked for GitHub-style rendering
-marked.setOptions({
-  gfm: true,
-  breaks: true,
-  headerIds: true,
-  mangle: false,
-});
-
-// Convert markdown to HTML
-const htmlContent = marked(readmeContent);
-
-// Read specs files
-const specsDir = "docs/specs";
-const specsFiles = fs
-  .readdirSync(specsDir)
-  .filter((file) => file.endsWith(".md"));
-const specs = {};
-
-specsFiles.forEach((file) => {
-  const filePath = path.join(specsDir, file);
-  const content = fs.readFileSync(filePath, "utf8");
-  const htmlContent = marked(content);
-  const fileName = path.basename(file, ".md");
-  specs[fileName] = {
-    title:
-      fileName.charAt(0).toUpperCase() + fileName.slice(1).replace(/-/g, " "),
-    content: htmlContent,
-  };
-});
-
-// Generate specs data for frontend
-const specsData = `const specsData = ${JSON.stringify(specs)};`;
-fs.writeFileSync("build/specs-data.js", specsData);
-
-// Replace placeholder in template
-const finalHtml = template.replace("{{CONTENT}}", htmlContent);
-
-// Write to build directory
-fs.writeFileSync("build/index.html", finalHtml);
-
-console.log("✅ Website built successfully!");
+
+(async () => {
+  // Dynamically import ESM-only marked
+  const { marked } = await import("marked");
+
+  // Read README.md
+  const readmeContent = fs.readFileSync("README.md", "utf8");
+
+  // Read HTML template
+  const template = fs.readFileSync("website/index.html", "utf8");
+
+  // Configure marked for GitHub-style rendering
+  marked.setOptions({
+    gfm: true,
+    breaks: true,
+    headerIds: true,
+    mangle: false,
+  });
+
+  // Convert markdown to HTML
+  const htmlContent = marked(readmeContent);
+
+  // Read specs files
+  const specsDir = "docs/specs";
+  const specsFiles = fs
+    .readdirSync(specsDir)
+    .filter((file) => file.endsWith(".md"));
+  const specs = {};
+
+  specsFiles.forEach((file) => {
+    const filePath = path.join(specsDir, file);
+    const content = fs.readFileSync(filePath, "utf8");
+    const htmlSpec = marked(content);
+    const fileName = path.basename(file, ".md");
+    specs[fileName] = {
+      title:
+        fileName.charAt(0).toUpperCase() + fileName.slice(1).replace(/-/g, " "),
+      content: htmlSpec,
+    };
+  });
+
+  // Generate specs data for frontend
+  const specsData = `const specsData = ${JSON.stringify(specs)};`;
+  fs.writeFileSync("build/specs-data.js", specsData);
+
+  // Replace placeholder in template
+  const finalHtml = template.replace("{{CONTENT}}", htmlContent);
+
+  // Write to build directory
+  fs.writeFileSync("build/index.html", finalHtml);
+
+  console.log("✅ Website built successfully!");
+})();

website/package-lock.json

@@ -0,0 +1,12 @@
+{
+  "name": "wfh-indicator-website",
+  "version": "1.0.0",
+  "description": "Build dependencies for WFH Indicator website",
+  "main": "build.js",
+  "scripts": {
+    "build": "node build.js"
+  },
+  "dependencies": {
+    "marked": "^16.0.0"
+  }
+}