[Pages] Add live scaffold status and HTML plan to create-site

plugins/power-pages/scripts/render-createsite-plan.js

@@ -0,0 +1,68 @@
+#!/usr/bin/env node
+/**
+ * render-createsite-plan.js — Renders the create-site implementation plan HTML.
+ *
+ * Usage (inline JSON):
+ *   node render-createsite-plan.js --output <path> --data-inline '<json>'
+ *
+ * Usage (file-based):
+ *   node render-createsite-plan.js --output <path> --data <json-file>
+ *
+ * Required keys in the data:
+ *   SITE_NAME, PLAN_TITLE, FRAMEWORK, AESTHETIC, MOOD, SUMMARY,
+ *   TYPOGRAPHY_DATA, PALETTE_DATA, MOTION_DATA, BACKGROUNDS_DATA,
+ *   PAGES_DATA, COMPONENTS_DATA, ROUTES_DATA, REVIEW_DATA, DEPLOYMENT_DATA
+ */
+
+const path = require('path');
+const { renderTemplate, parseArgs } = require('./lib/render-template');
+
+const args = parseArgs(process.argv);
+
+if (!args.output || (!args['data-inline'] && !args.data)) {
+  console.error(
+    'Usage: node render-createsite-plan.js --output <path> --data-inline \'<json>\'\n' +
+    '       node render-createsite-plan.js --output <path> --data <json-file>'
+  );
+  process.exit(1);
+}
+
+const templatePath = path.join(
+  __dirname,
+  '..',
+  'skills',
+  'create-site',
+  'assets',
+  'create-site-plan.html'
+);
+
+const requiredKeys = [
+  'SITE_NAME',
+  'PLAN_TITLE',
+  'FRAMEWORK',
+  'AESTHETIC',
+  'MOOD',
+  'SUMMARY',
+  'TYPOGRAPHY_DATA',
+  'PALETTE_DATA',
+  'MOTION_DATA',
+  'BACKGROUNDS_DATA',
+  'PAGES_DATA',
+  'COMPONENTS_DATA',
+  'ROUTES_DATA',
+  'REVIEW_DATA',
+  'DEPLOYMENT_DATA',
+];
+
+if (args['data-inline']) {
+  let dataObject;
+  try {
+    dataObject = JSON.parse(args['data-inline']);
+  } catch {
+    console.error('Error: --data-inline value is not valid JSON');
+    process.exit(1);
+  }
+  renderTemplate({ templatePath, outputPath: path.resolve(args.output), dataObject, requiredKeys });
+} else {
+  renderTemplate({ templatePath, outputPath: path.resolve(args.output), dataPath: path.resolve(args.data), requiredKeys });
+}

plugins/power-pages/scripts/tests/render-createsite-plan.test.js

@@ -0,0 +1,170 @@
+const test = require('node:test');
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const os = require('node:os');
+const path = require('node:path');
+const { spawnSync } = require('node:child_process');
+
+const scriptPath = path.join(__dirname, '..', 'render-createsite-plan.js');
+
+const SAMPLE_DATA = {
+  SITE_NAME: 'Contoso Portal',
+  PLAN_TITLE: 'Implementation Plan',
+  FRAMEWORK: 'React',
+  AESTHETIC: 'Minimal & Clean',
+  MOOD: 'Professional & Trustworthy',
+  SUMMARY: 'An internal portal for Contoso consultants with directory, announcements, and docs.',
+  TYPOGRAPHY_DATA: {
+    primary: { name: 'DM Sans', sample: 'Aa Bb Cc', reason: 'Neutral sans for body and UI' },
+    secondary: { name: 'Space Grotesk', sample: 'Headings', reason: 'Geometric display for headings' },
+  },
+  PALETTE_DATA: [
+    { var: '--color-primary', hex: '#1E3A5F', description: 'Primary brand' },
+    { var: '--color-secondary', hex: '#4A90A4', description: 'Accent' },
+    { var: '--color-bg', hex: '#F7F8FA', description: 'Background' },
+  ],
+  MOTION_DATA: [
+    { label: 'Page transitions', description: 'Fade-in 300ms on route change' },
+  ],
+  BACKGROUNDS_DATA: [
+    { label: 'Hero section', description: 'Gradient overlay on Unsplash photo' },
+  ],
+  PAGES_DATA: [
+    {
+      name: 'Home',
+      route: '/',
+      description: 'Landing page for the portal',
+      content: ['Hero section', 'Quick links', 'Recent announcements'],
+      components: ['Navbar', 'Hero', 'QuickLinks'],
+    },
+    {
+      name: 'Directory',
+      route: '/directory',
+      description: 'Searchable consultant directory',
+      content: ['Search bar', 'Consultant cards'],
+      components: ['Navbar', 'ConsultantCard'],
+    },
+  ],
+  COMPONENTS_DATA: [
+    { name: 'Navbar', purpose: 'Top navigation', usedBy: ['Home', 'Directory'] },
+    { name: 'Hero', purpose: 'Landing hero section', usedBy: ['Home'] },
+  ],
+  ROUTES_DATA: [
+    { path: '/', page: 'Home' },
+    { path: '/directory', page: 'Directory' },
+  ],
+  REVIEW_DATA: [
+    'All pages load without console errors',
+    'Navigation links work and highlight the active page',
+  ],
+  DEPLOYMENT_DATA: [
+    { title: 'Deploy now to Power Pages', description: 'Runs /deploy-site to publish.', recommended: true },
+    { title: 'Skip for now', description: 'Continue locally, deploy later.' },
+  ],
+};
+
+test('render-createsite-plan renders HTML from --data file', () => {
+  const tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'createsite-plan-'));
+  const dataPath = path.join(tempDir, 'data.json');
+  const outputPath = path.join(tempDir, 'plan.html');
+
+  fs.writeFileSync(dataPath, JSON.stringify(SAMPLE_DATA, null, 2), 'utf8');
+
+  const result = spawnSync(process.execPath, [scriptPath, '--output', outputPath, '--data', dataPath], {
+    encoding: 'utf8',
+  });
+
+  assert.equal(result.status, 0, result.stderr || result.stdout);
+  assert.ok(fs.existsSync(outputPath));
+
+  const html = fs.readFileSync(outputPath, 'utf8');
+  assert.match(html, /Contoso Portal/);
+  assert.match(html, /Implementation Plan/);
+  assert.match(html, /React/);
+  assert.match(html, /Minimal & Clean|Minimal & Clean/);
+  assert.match(html, /DM Sans/);
+  assert.match(html, /#1E3A5F/);
+  assert.match(html, /Directory/);
+  assert.match(html, /Navbar/);
+  assert.match(html, /Deploy now to Power Pages/);
+});
+
+test('render-createsite-plan renders HTML from --data-inline JSON', () => {
+  const tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'createsite-plan-'));
+  const outputPath = path.join(tempDir, 'plan-inline.html');
+
+  const result = spawnSync(
+    process.execPath,
+    [scriptPath, '--output', outputPath, '--data-inline', JSON.stringify(SAMPLE_DATA)],
+    { encoding: 'utf8' }
+  );
+
+  assert.equal(result.status, 0, result.stderr || result.stdout);
+  assert.ok(fs.existsSync(outputPath));
+
+  const html = fs.readFileSync(outputPath, 'utf8');
+  assert.match(html, /Contoso Portal/);
+  assert.match(html, /Space Grotesk/);
+});
+
+test('render-createsite-plan fails with no arguments', () => {
+  const result = spawnSync(process.execPath, [scriptPath], { encoding: 'utf8' });
+  assert.notEqual(result.status, 0);
+  assert.match(result.stderr, /Usage:/);
+});
+
+test('render-createsite-plan fails with invalid --data-inline JSON', () => {
+  const tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'createsite-plan-'));
+  const outputPath = path.join(tempDir, 'plan.html');
+
+  const result = spawnSync(
+    process.execPath,
+    [scriptPath, '--output', outputPath, '--data-inline', '{bad json}'],
+    { encoding: 'utf8' }
+  );
+
+  assert.equal(result.status, 1);
+  assert.match(result.stderr, /not valid JSON/);
+});
+
+test('render-createsite-plan fails when required keys are missing', () => {
+  const tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'createsite-plan-'));
+  const outputPath = path.join(tempDir, 'plan.html');
+
+  const incomplete = { ...SAMPLE_DATA };
+  delete incomplete.PAGES_DATA;
+  delete incomplete.ROUTES_DATA;
+
+  const result = spawnSync(
+    process.execPath,
+    [scriptPath, '--output', outputPath, '--data-inline', JSON.stringify(incomplete)],
+    { encoding: 'utf8' }
+  );
+
+  assert.equal(result.status, 1);
+  assert.match(result.stderr, /Missing required keys/);
+  assert.match(result.stderr, /PAGES_DATA/);
+  assert.match(result.stderr, /ROUTES_DATA/);
+});
+
+test('render-createsite-plan refuses to overwrite existing file', () => {
+  const tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'createsite-plan-'));
+  const dataPath = path.join(tempDir, 'data.json');
+  const outputPath = path.join(tempDir, 'plan.html');
+
+  fs.writeFileSync(dataPath, JSON.stringify(SAMPLE_DATA, null, 2), 'utf8');
+
+  const result1 = spawnSync(process.execPath, [scriptPath, '--output', outputPath, '--data', dataPath], {
+    encoding: 'utf8',
+  });
+  assert.equal(result1.status, 0, result1.stderr || result1.stdout);
+
+  const original = fs.readFileSync(outputPath, 'utf8');
+
+  const result2 = spawnSync(process.execPath, [scriptPath, '--output', outputPath, '--data', dataPath], {
+    encoding: 'utf8',
+  });
+  assert.equal(result2.status, 1);
+  assert.match(result2.stderr, /Output file already exists/);
+  assert.equal(fs.readFileSync(outputPath, 'utf8'), original);
+});