first-commit

skills/open-design-landing/scripts/placeholder.ts

@@ -0,0 +1,174 @@
+#!/usr/bin/env -S npx -y tsx
+/**
+ * open-design-landing — SVG framework placeholder generator.
+ *
+ * When `imagery.strategy === 'placeholder'`, this script writes one
+ * paper-textured SVG file per slot in `assets/image-manifest.json`.
+ * The generated files live alongside the schema-named PNGs that the
+ * composer references (`hero.png`, `about.png`, `lab-1.png`, …) so
+ * the layout renders fully without any image budget.
+ *
+ * Each placeholder shows: slot id · ratio · pixel dimensions · the
+ * `prompt_section` hint copied from the manifest. Drop the real PNG
+ * with the same filename to swap in production imagery; no markup
+ * change required.
+ *
+ * Usage:
+ *   npx tsx scripts/placeholder.ts <out-dir>
+ *
+ * Default out-dir is `./assets/`.
+ */
+
+import { readFile, writeFile, mkdir } from 'node:fs/promises';
+import { resolve, dirname, isAbsolute, basename } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const SKILL_ROOT = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+
+interface ManifestSlot {
+  id: string;
+  file: string;
+  width: number;
+  height: number;
+  ratio: string;
+  prompt_section: string;
+  required: boolean;
+  rekey_on_brand_change: boolean;
+}
+
+interface Manifest {
+  skill: string;
+  design_system: string;
+  slots: ManifestSlot[];
+}
+
+const PAPER = '#efe7d2';
+const INK_FAINT = '#8b8676';
+const CORAL = '#ed6f5c';
+const LINE = 'rgba(21, 20, 15, 0.16)';
+
+/** Compose a single paper-textured SVG for one slot. */
+export function placeholderSvg(slot: ManifestSlot): string {
+  const w = slot.width;
+  const h = slot.height;
+  const cx = w / 2;
+  const cy = h / 2;
+  const isPortrait = h > w;
+  const titleSize = Math.round(Math.min(w, h) * (isPortrait ? 0.075 : 0.07));
+  const metaSize = Math.round(Math.min(w, h) * 0.028);
+  const dimsSize = Math.round(Math.min(w, h) * 0.024);
+
+  // Inner frame inset.
+  const inset = Math.round(Math.min(w, h) * 0.04);
+  const frame = {
+    x: inset,
+    y: inset,
+    w: w - inset * 2,
+    h: h - inset * 2,
+  };
+
+  // Diagonal strokes for the classic "image goes here" cross.
+  const cross = `
+    <line x1='${frame.x}' y1='${frame.y}' x2='${frame.x + frame.w}' y2='${frame.y + frame.h}' stroke='${INK_FAINT}' stroke-opacity='0.22' stroke-width='1' />
+    <line x1='${frame.x + frame.w}' y1='${frame.y}' x2='${frame.x}' y2='${frame.y + frame.h}' stroke='${INK_FAINT}' stroke-opacity='0.22' stroke-width='1' />
+  `;
+
+  const cornerLen = Math.round(Math.min(w, h) * 0.05);
+  const corners = `
+    <path d='M${frame.x} ${frame.y + cornerLen} L${frame.x} ${frame.y} L${frame.x + cornerLen} ${frame.y}' stroke='${INK_FAINT}' fill='none' stroke-width='1.5' />
+    <path d='M${frame.x + frame.w - cornerLen} ${frame.y} L${frame.x + frame.w} ${frame.y} L${frame.x + frame.w} ${frame.y + cornerLen}' stroke='${INK_FAINT}' fill='none' stroke-width='1.5' />
+    <path d='M${frame.x} ${frame.y + frame.h - cornerLen} L${frame.x} ${frame.y + frame.h} L${frame.x + cornerLen} ${frame.y + frame.h}' stroke='${INK_FAINT}' fill='none' stroke-width='1.5' />
+    <path d='M${frame.x + frame.w - cornerLen} ${frame.y + frame.h} L${frame.x + frame.w} ${frame.y + frame.h} L${frame.x + frame.w} ${frame.y + frame.h - cornerLen}' stroke='${INK_FAINT}' fill='none' stroke-width='1.5' />
+  `;
+
+  return `<?xml version='1.0' encoding='UTF-8'?>
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${w} ${h}' width='${w}' height='${h}'>
+  <defs>
+    <filter id='paper'>
+      <feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/>
+      <feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.16  0 0 0 0 0.12  0 0 0 0.07 0'/>
+    </filter>
+  </defs>
+  <!-- paper base -->
+  <rect width='${w}' height='${h}' fill='${PAPER}' />
+  <rect width='${w}' height='${h}' filter='url(#paper)' />
+  <!-- frame -->
+  <rect x='${frame.x}' y='${frame.y}' width='${frame.w}' height='${frame.h}' fill='none' stroke='${LINE}' stroke-dasharray='6 6' />
+  ${cross}
+  ${corners}
+  <!-- coral plate index, top-left -->
+  <text x='${inset + 14}' y='${inset + 26}' font-family='Inter Tight, system-ui, sans-serif' font-size='${dimsSize}' font-weight='600' letter-spacing='2' fill='${CORAL}'>PLATE · ${slot.id.toUpperCase()}</text>
+  <!-- coordinates, top-right -->
+  <text x='${w - inset - 14}' y='${inset + 26}' text-anchor='end' font-family='JetBrains Mono, monospace' font-size='${dimsSize}' fill='${INK_FAINT}'>${w} × ${h} · ${slot.ratio}</text>
+  <!-- centered title block -->
+  <text x='${cx}' y='${cy - titleSize * 0.2}' text-anchor='middle' font-family='Playfair Display, serif' font-style='italic' font-weight='500' font-size='${titleSize}' fill='#15140f'>${escapeXml(slot.id)}</text>
+  <text x='${cx}' y='${cy + metaSize * 1.6}' text-anchor='middle' font-family='Inter Tight, system-ui, sans-serif' font-size='${metaSize}' letter-spacing='3' fill='${INK_FAINT}'>${escapeXml(slot.prompt_section.toUpperCase())}</text>
+  <!-- bottom slug -->
+  <text x='${inset + 14}' y='${h - inset - 14}' font-family='Inter Tight, system-ui, sans-serif' font-size='${dimsSize}' letter-spacing='2' fill='${INK_FAINT}'>${slot.required ? 'REQUIRED' : 'OPTIONAL'} · ${slot.rekey_on_brand_change ? 'REKEY ON BRAND' : 'STABLE'}</text>
+  <text x='${w - inset - 14}' y='${h - inset - 14}' text-anchor='end' font-family='Inter Tight, system-ui, sans-serif' font-size='${dimsSize}' letter-spacing='2' fill='${INK_FAINT}'>OPEN DESIGN · ATELIER ZERO</text>
+</svg>`;
+}
+
+function escapeXml(s: string): string {
+  return s
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&apos;');
+}
+
+async function loadManifest(): Promise<Manifest> {
+  const path = resolve(SKILL_ROOT, 'assets', 'image-manifest.json');
+  return JSON.parse(await readFile(path, 'utf8')) as Manifest;
+}
+
+/**
+ * Write `<out>/<slot.file>` for every slot. The composer references
+ * slots by .png filename; we honor that by writing `<basename>.svg`
+ * AND a `<basename>.png.svg` symlink-style fallback. Most static
+ * hosts serve SVG to <img> just fine, so the practical convention
+ * is: if you want placeholders, point your `imagery.assets_path` at
+ * a directory of `.svg` files OR rename the SVGs to `.png` (some
+ * browsers honor extensionless content-sniffing).
+ *
+ * For the most reliable result, write BOTH:
+ *   - `<id>.svg`   — clean, editable
+ *   - `<file>`     — same SVG content under the .png filename so the
+ *                    composer's `<img src='./assets/<id>.png'>` works
+ *                    without changing markup.
+ */
+export async function writePlaceholders(outDir: string): Promise<string[]> {
+  const manifest = await loadManifest();
+  await mkdir(outDir, { recursive: true });
+  const written: string[] = [];
+  for (const slot of manifest.slots) {
+    const svg = placeholderSvg(slot);
+    const svgPath = resolve(outDir, `${slot.id}.svg`);
+    const pngPath = resolve(outDir, slot.file);
+    await writeFile(svgPath, svg, 'utf8');
+    await writeFile(pngPath, svg, 'utf8');
+    written.push(svgPath, pngPath);
+  }
+  return written;
+}
+
+async function main(): Promise<void> {
+  const [, , outArg] = process.argv;
+  const out = isAbsolute(outArg ?? '')
+    ? outArg!
+    : resolve(process.cwd(), outArg ?? './assets/');
+  const written = await writePlaceholders(out);
+  const pngs = written.filter((p) => p.endsWith('.png')).length;
+  const svgs = written.filter((p) => p.endsWith('.svg')).length;
+  console.log(`✓ wrote ${pngs} png-named placeholders + ${svgs} svg files into ${out}`);
+  console.log(`  (${written.map((p) => basename(p)).join(', ')})`);
+}
+
+const isMain = import.meta.url === `file://${process.argv[1]}`;
+if (isMain) {
+  main().catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });
+}