From 30ee34d3ea5fc6cb25a96c5e30cdb952253ec697 Mon Sep 17 00:00:00 2001 From: Markus Heiser Date: Sat, 1 Feb 2025 17:36:16 +0100 Subject: [web-client] simple theme: vite plugins plg_svg2png & plg_svg2svg Signed-off-by: Markus Heiser --- client/simple/tools/img.js | 78 ++++++++++++++++++++++++++++++++++++++++++++++ client/simple/tools/plg.js | 41 ++++++++++++++++++++++++ 2 files changed, 119 insertions(+) create mode 100644 client/simple/tools/img.js create mode 100644 client/simple/tools/plg.js (limited to 'client/simple/tools') diff --git a/client/simple/tools/img.js b/client/simple/tools/img.js new file mode 100644 index 000000000..8f815970a --- /dev/null +++ b/client/simple/tools/img.js @@ -0,0 +1,78 @@ +import fs from "fs"; +import path from "path"; +import sharp from "sharp"; +import { optimize as svgo } from "svgo"; + +/** + * @typedef {object} Src2Dest - Mapping of src to dest + * @property {string} src - Name of the source file. + * @property {string} dest - Name of the destination file. + */ + + +/** + * Convert a list of SVG files to PNG. + * + * @param {Src2Dest[]} items - Array of SVG files (src: SVG, dest:PNG) to convert. + */ + +async function svg2png (items) { + items.forEach( + async (item) => { + try { + fs.mkdir(path.dirname(item.dest), { recursive: true }, (err) => { + if (err) + throw err; + }); + + const info = await sharp(item.src).png({ + force: true, + compressionLevel: 9, + palette: true, + }).toFile(item.dest); + + console.log( + `[svg2png] created ${item.dest} -- bytes: ${info.size}, w:${info.width}px, h:${info.height}px` + ); + } catch (err) { + console.error(`ERROR: ${item.dest} -- ${err}`); + throw(err); + } + } + ); +} + + +/** + * Optimize SVG images for WEB. + * + * @param {import('svgo').Config} svgo_opts - Options passed to svgo. + * @param {Src2Dest[]} items - Array of SVG files (src:SVG, dest:SVG) to optimize. + */ + +async function svg2svg(svgo_opts, items) { + items.forEach( + async (item) => { + try { + fs.mkdir(path.dirname(item.dest), { recursive: true }, (err) => { + if (err) + throw err; + }); + + const raw = fs.readFileSync(item.src, "utf8"); + const opt = svgo(raw, svgo_opts); + fs.writeFileSync(item.dest, opt.data); + console.log( + `[svg2svg] optimized: ${item.dest} -- src: ${item.src}` + ); + + } catch (err) { + console.error(`ERROR: optimize src: ${item.src} -- ${err}`); + throw(err); + } + } + ); +} + + +export { svg2png, svg2svg }; diff --git a/client/simple/tools/plg.js b/client/simple/tools/plg.js new file mode 100644 index 000000000..16ec268b6 --- /dev/null +++ b/client/simple/tools/plg.js @@ -0,0 +1,41 @@ +/** + * Custom vite plugins to build the web-client components of the simple theme. + * + * HINT: + * + * This is an inital implementation for the migration of the build process + * from grunt to vite. For fully support (vite: build & serve) more work is + * needed. + */ + +import { svg2png } from "./img.js"; +import { svg2svg } from "./img.js"; + +/** + * Vite plugin to convert a list of SVG files to PNG. + * + * @param {import('./img.js').Src2Dest} items - Array of SVG files (src: SVG, dest:PNG) to convert. + */ +function plg_svg2png(items) { + return { + name: 'searxng-simple-svg2png', + apply: 'build', // or 'serve' + async writeBundle() { svg2png(items); }, + }; +} + +/** + * Vite plugin to optimize SVG images for WEB. + * + * @param {import('svgo').Config} svgo_opts - Options passed to svgo. + * @param {import('./img.js').Src2Dest} items - Array of SVG files (src:SVG, dest:SVG) to optimize. + */ +function plg_svg2svg(svgo_opts, items) { + return { + name: 'searxng-simple-svg2png', + apply: 'build', // or 'serve' + async writeBundle() { svg2svg(items, svgo_opts); }, + }; +} + +export { plg_svg2png, plg_svg2svg }; -- cgit v1.2.3