The full-page captures (up to 1.3 MB each) are now cut into strips by scripts/ganzseiten-kacheln.mjs. The first strip is ~60 KB and is fetched as soon as a device scrolls into view; further strips load just before they are scrolled to. Strip sizes are in the file names, so the dialog has its full height immediately without layout jumps. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
43 lines
1.9 KiB
JavaScript
43 lines
1.9 KiB
JavaScript
// Schneidet die Ganzseitenaufnahmen der Mappe in Streifen, damit die
|
|
// Großansicht sofort etwas zeigt und der Rest beim Scrollen nachlädt.
|
|
// Aufruf: node scripts/ganzseiten-kacheln.mjs <Ordner mit den PNGs>
|
|
// Erwartet <name>.png (Computer, 1440 px breit) und <name>-mobil.png (Handy, 780 px).
|
|
// Ergebnis: public/mappe/ganz/<name>[-mobil]/NNN-BREITExHOEHE.webp
|
|
// Die Maße stehen im Dateinamen, so braucht der Build kein Bildwerkzeug.
|
|
import sharp from 'sharp';
|
|
import { mkdirSync, readdirSync, rmSync } from 'node:fs';
|
|
import { join } from 'node:path';
|
|
import { fileURLToPath } from 'node:url';
|
|
|
|
const quelle = process.argv[2];
|
|
if (!quelle) throw new Error('Ordner mit den PNGs angeben');
|
|
const ziel = new URL('../public/mappe/ganz/', import.meta.url);
|
|
|
|
// Erster Streifen klein (schnell sichtbar), danach größere
|
|
const STREIFEN = { desktop: [900, 1800], mobil: [1700, 3200] };
|
|
|
|
for (const datei of readdirSync(quelle).filter((f) => f.endsWith('.png') && !f.startsWith('v-'))) {
|
|
const name = datei.replace(/\.png$/, '');
|
|
const art = name.endsWith('-mobil') ? 'mobil' : 'desktop';
|
|
const pfad = join(quelle, datei);
|
|
const { width, height } = await sharp(pfad, { limitInputPixels: false }).metadata();
|
|
const ordner = new URL(`${name}/`, ziel);
|
|
rmSync(ordner, { recursive: true, force: true });
|
|
mkdirSync(ordner, { recursive: true });
|
|
|
|
let top = 0;
|
|
let i = 0;
|
|
let summe = 0;
|
|
while (top < height) {
|
|
const h = Math.min(i === 0 ? STREIFEN[art][0] : STREIFEN[art][1], height - top);
|
|
const out = new URL(`${String(i).padStart(3, '0')}-${width}x${h}.webp`, ordner);
|
|
const info = await sharp(pfad, { limitInputPixels: false })
|
|
.extract({ left: 0, top, width, height: h })
|
|
.webp({ quality: 80 })
|
|
.toFile(fileURLToPath(out));
|
|
summe += info.size;
|
|
top += h;
|
|
i++;
|
|
}
|
|
console.log(`${name}: ${i} Streifen, ${Math.round(summe / 1024)} KB`);
|
|
}
|