18 lines
2.2 KiB
JavaScript
18 lines
2.2 KiB
JavaScript
import {createRequire} from 'node:module';
|
|
import {readFile} from 'node:fs/promises';
|
|
import {fileURLToPath} from 'node:url';
|
|
import path from 'node:path';
|
|
const root=path.resolve(path.dirname(fileURLToPath(import.meta.url)),'..');
|
|
const require=createRequire(path.join(root,'apps/waterfall-wiki/package.json')),sharp=require('sharp');
|
|
const layouts=JSON.parse(await readFile(path.join(root,'content/layout-reference/manifest.json'),'utf8'));
|
|
const layers=[];let shapes='';
|
|
for(const[i,l]of layouts.entries()){
|
|
const x=52+i%6*166,y=200+Math.floor(i/6)*232;
|
|
shapes+=`<rect x="${x}" y="${y}" width="146" height="222" fill="#faf9f3" stroke="#cbd1ca"/><text x="${x+73}" y="${y+214}" text-anchor="middle" font-size="16" letter-spacing="2">${l.id.toUpperCase()}</text>`;
|
|
const bytes=await sharp(path.join(root,'content/layout-reference/assets',l.id,'source.png')).resize({width:130,height:190,fit:'inside'}).png().toBuffer();
|
|
const meta=await sharp(bytes).metadata();layers.push({input:bytes,left:Math.round(x+(146-meta.width)/2),top:y+7});
|
|
}
|
|
const svg=`<svg xmlns="http://www.w3.org/2000/svg" width="1080" height="1440"><rect width="1080" height="1440" fill="#eeeee8"/><g fill="#263734" font-family="Arial,PingFang SC,sans-serif"><text x="52" y="150" font-family="Georgia,serif" font-size="136">27</text><text x="230" y="100" font-size="49">原图对应排版</text><text x="232" y="145" font-size="23" letter-spacing="3">一张设计 · 一份构件清单</text><path d="M52 175H1028" stroke="#9ca9a2"/>${shapes}<text x="570" y="1190" font-size="28">构件分层</text><text x="572" y="1237" font-size="23" fill="#2c64d8">T 文字 113</text><text x="780" y="1237" font-size="23" fill="#c8672f">I 图位 51</text><text x="572" y="1276" font-size="23" fill="#08875d">D 装饰 53</text><text x="780" y="1276" font-size="23">共 217 组</text><text x="570" y="1320" font-size="18">原裁片 / 坐标 / 代码 / 验收</text><text x="52" y="1404" font-size="20" letter-spacing="2">WIKI · TEXT + IMAGE</text><text x="1028" y="1404" text-anchor="end" font-size="20">REF-01 — REF-27</text></g></svg>`;
|
|
await sharp(Buffer.from(svg)).composite(layers).png().toFile(path.join(root,'content/layout-reference/assets/router-cover.png'));
|
|
console.log('Created Router cover from all 27 actual source crops.');
|