`build-html.mjs`

37 lines
import fs from 'node:fs';
const data=JSON.parse(fs.readFileSync(new URL('./designers.json',import.meta.url)));
const cdn=JSON.parse(fs.readFileSync(new URL('./portrait-cdn-map.json',import.meta.url)));
const slug=(n)=>n.toLowerCase().replace(/[^a-z0-9]+/g,'-').replace(/^-|-$/g,'');
const esc=(s)=>(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
const cards=data.designers.map(d=>{
  const img=cdn[slug(d.name)]; const loc=d.location?` &middot; ${esc(d.location)}`:'';
  const cta=d.in_dw_store?`<div class="kd-cta"><a href="/collections/sarah-rowland-wallpaper-collection">Shop the Collection</a></div>`:'';
  return `<div class="kd-card">
<img class="kd-photo" src="${img}?width=560" alt="${esc(d.name)}" loading="lazy">
<div class="kd-body"><h3 class="kd-name">${esc(d.name)}</h3>
<p class="kd-role">${esc(d.role)}${loc}</p>
<p class="kd-bio">${esc(d.bio)}</p>${cta}</div></div>`;
}).join('\n');
const body=`<div class="kd-wrap"><style>
.kd-wrap{max-width:1120px;margin:0 auto}
.kd-intro{max-width:760px;margin:0 auto 34px;text-align:center;color:#4a463f;line-height:1.6}
.kd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}
.kd-card{border:1px solid #e7e3dc;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;background:#fff}
.kd-photo{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 28%;background:#f4f1ec;display:block}
.kd-body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.kd-name{margin:0 0 3px;font-size:1.18rem;letter-spacing:.02em}
.kd-role{margin:0 0 10px;font-style:italic;color:#8a8378;font-size:.88rem}
.kd-bio{margin:0;font-size:.92rem;line-height:1.55;color:#4a463f}
.kd-cta{margin-top:16px}
.kd-cta a{display:inline-block;border:1px solid #1a1a1a;padding:9px 20px;text-decoration:none;color:#1a1a1a;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase}
.kd-cta a:hover{background:#1a1a1a;color:#fff}
</style>
<div class="kd-intro"><p>Meet the artists, photographers, and studios behind the Koroseal wallcovering collection &mdash; original work, translated into contract-grade wallcovering.</p></div>
<div class="kd-grid">
${cards}
</div></div>`;
fs.writeFileSync(new URL('./koroseal-designers-page.html',import.meta.url), body);
const pv=`<!doctype html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>Meet the Koroseal Designers — PREVIEW</title><style>body{font-family:Georgia,serif;color:#1a1a1a;margin:0;padding:40px 20px;background:#faf8f4}h1.pv{text-align:center;font-weight:400;letter-spacing:.04em;margin:0 0 6px}.pvsub{text-align:center;color:#8a8378;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 34px}</style></head><body><h1 class=pv>Meet the Koroseal Designers</h1><p class=pvsub>Local preview &middot; not yet published</p>${body}</body></html>`;
fs.writeFileSync(new URL('./preview.html',import.meta.url), pv);
console.log('wrote koroseal-designers-page.html ('+body.length+' bytes) + preview.html');