Publish premium layout recipes with React and Next.js guidance

apps/wiki/scripts/generate-layout-recipes.ts

@@ -0,0 +1,21 @@
+/** Rebuild standalone demos and schematic covers; no browser or external assets. */
+import {mkdir,writeFile} from 'node:fs/promises';
+import path from 'node:path';
+import sharp from 'sharp';
+import {recipes,recipeHtml} from '../src/content/layouts/documents';
+async function main(){
+const target=path.resolve(import.meta.dirname,'../public/layout-recipes');
+await mkdir(target,{recursive:true});
+const esc=(s:string)=>s.replaceAll('&','&amp;').replaceAll('<','&lt;').replaceAll('>','&gt;');
+const outer=(inside:string)=>`<svg xmlns="http://www.w3.org/2000/svg" width="1080" height="1440" viewBox="0 0 1080 1440"><defs><clipPath id="canvas"><rect width="1080" height="1440"/></clipPath></defs><rect width="1080" height="1440" fill="#f5f3ec"/><g clip-path="url(#canvas)" fill="#243230" font-family="Arial,PingFang SC,sans-serif">${inside}</g></svg>`;
+for(const [i,r] of recipes.entries()){
+ const graphic=outer(`${r.shapes}<text x="76" y="100" font-size="21" letter-spacing="5">FORM STUDIES / ${String(i+1).padStart(2,'0')}</text><rect x="64" y="122" width="920" height="74" fill="#f5f3ec"/><text x="76" y="178" font-size="50">${esc(r.name)}</text><rect x="64" y="1310" width="952" height="100" fill="#f5f3ec"/><path d="M76 1325H1004" stroke="#243230"/><text x="76" y="1364" font-size="22">结构示意 · 非代码截图</text><text x="1004" y="1364" text-anchor="end" font-size="22">HTML / REACT / NEXT.JS</text>`);
+ await writeFile(path.join(target,r.slug+'.html'),recipeHtml(r)+'\n');
+ await sharp(Buffer.from(graphic)).png().toFile(path.join(target,r.slug+'.png'));
+}
+const cards=recipes.map((r,i)=>{const col=i%3,row=Math.floor(i/3);return `<g transform="translate(${76+col*320},${280+row*255})"><rect width="288" height="210" fill="#e7e9e2"/><svg x="0" y="0" width="140" height="185" viewBox="0 0 1080 1440">${r.shapes}</svg><text x="154" y="50" font-size="34">${String(i+1).padStart(2,'0')}</text><text x="154" y="85" font-size="16">${esc(r.name.slice(0,4))}</text><text x="154" y="111" font-size="16">${esc(r.name.slice(4))}</text></g>`}).join('');
+await sharp(Buffer.from(outer(`<text x="76" y="108" font-size="22" letter-spacing="5">FORM STUDIES / DESIGN ROUTER</text><text x="76" y="206" font-size="72">高级感排版</text>${cards}<text x="76" y="1380" font-size="22">12 套构图 / 选择 → 实现 → 验收 · 结构索引</text>`))).png().toFile(path.join(target,'router.png'));
+console.log(`Generated ${recipes.length} standalone HTML demos and ${recipes.length+1} schematic PNGs.`);
+
+}
+main().catch(error=>{console.error(error);process.exitCode=1});