pdehaan
commented
6 years ago @lesleyjanenorton How are you handling logos for new breaches currently? What tool(s) were you using to convert from GIF/JPG/SVG into PNG?
Closed groovecoder closed 4 years ago
pdehaan
commented
6 years ago @lesleyjanenorton How are you handling logos for new breaches currently? What tool(s) were you using to convert from GIF/JPG/SVG into PNG?
lesleyjanenorton
commented
6 years ago Currently, I'm grabbing them from HIBP as needed. Tools and processes for converting have been many and varied and inefficient. The last batch was combination of Inkscape, Photoshop, Illustrator, and TinyPNG.
pdehaan
commented
6 years ago 
lesleyjanenorton
commented
6 years ago exactly
groovecoder
commented
6 years ago Filed https://github.com/mozilla/blurts-server/issues/402 for a default breach site icon to use.
pdehaan
commented
5 years ago Here was my CLI script for downloading all the logos from HIBP.
Verified w/ the new LogoPath API and @lesleyjanenorton's fancy RegExp for extracting filenames from the full path.
const fs = require("fs");
const path = require("path");
const stream = require("stream");
const promisify = require("util").promisify;
const fastimage = require("fastimage");
const got = require("got");
const finished = promisify(stream.finished);
const LOGO_DIR = "./public/img/logos"
// downloadLogos(LOGO_DIR);
localLogos(LOGO_DIR);
async function localLogos(inputDir="logos") {
const logos = fs.readdirSync(inputDir);
console.log("| LOGO | WIDTH | HEIGHT | SIZE (KB) | PANIC |\n|:-----|------:|-------:|----------:|:------|");
for (let logo of logos) {
const filename = path.join(inputDir, logo);
const info = await fastimage.info(filename);
console.log(`| ${logo} | ${info.width} | ${info.height} | ${Math.ceil(info.size/1024)} | ${":exclamation:".repeat(info.size / 1024 / 10)}`);
}
}
async function downloadLogos(outputDir="logos") {
const breaches = await downloadBreaches();
const logos = breaches.reduce((set, breach) => set.add(breach.LogoPath), new Set());
const newLogos = [];
for (const logo of logos) {
const filename = /[^/]*$/.exec(logo)[0];
const outputFile = path.join(outputDir, filename);
if (!fs.existsSync(outputFile)) {
const info = await downloadLogo(logo, outputFile);
newLogos.push(info);
}
}
if (newLogos.length) {
console.log(JSON.stringify(newLogos, null, 2));
} else {
// console.log([]);
}
}
async function downloadBreaches(server="https://haveibeenpwned.com/api/v2/breaches") {
const res = await got.get(server, {json: true});
return res.body;
}
async function downloadLogo(logoUrl, outputFile) {
const stream = got.stream(logoUrl)
.pipe(fs.createWriteStream(outputFile));
await finished(stream);
return fastimage.info(outputFile);
}UPDATE: I was playing w/ fastimage to get a rough sense of dimensions and file sizes, and here's the results:
lesleyjanenorton
commented
4 years ago closing in favor of #1469
Many email clients do not display SVGs.
In https://github.com/mozilla/blurts-server/pull/381 we add PNGs for existing breach logos so that the Report emails will display them.
But we need a process for uploading PNG logos for new breaches so the breach notification emails will render them nicely.
Some options: