change how og images are handled

This commit is contained in:
madrilene 2024-01-31 11:26:13 +01:00
parent 8d19260845
commit caf8c910d3
2 changed files with 29 additions and 24 deletions

View file

@ -1,30 +1,35 @@
// https://bnijenhuis.nl/notes/automatically-generate-open-graph-images-in-eleventy/ // https://bnijenhuis.nl/notes/automatically-generate-open-graph-images-in-eleventy/
// concerts SVG to JPEG for open graph images // https://github.com/sophiekoonin/localghost/blob/main/src/plugins/og-to-png.js
// converts SVG to JPEG for open graph images
const fsPromises = require('fs/promises');
const fs = require('fs'); const fs = require('fs');
const path = require('path');
const Image = require('@11ty/eleventy-img'); const Image = require('@11ty/eleventy-img');
const ogImagesDir = './src/assets/og-images';
const svgToJpeg = function () { const svgToJpeg = async function () {
const ogImagesDir = 'dist/assets/og-images/'; const socialPreviewImagesDir = 'dist/assets/og-images/';
fs.readdir(ogImagesDir, (err, files) => { const files = await fsPromises.readdir(socialPreviewImagesDir);
if (!!files && files.length > 0) { if (files.length > 0) {
files.forEach(fileName => { files.forEach(function (filename) {
if (fileName.endsWith('.svg')) { const outputFilename = filename.substring(0, filename.length - 4);
let imageUrl = ogImagesDir + fileName; if (
Image(imageUrl, { filename.endsWith('.svg') & !fs.existsSync(path.join(ogImagesDir, outputFilename))
formats: ['jpeg'], ) {
outputDir: './' + ogImagesDir, const imageUrl = socialPreviewImagesDir + filename;
filenameFormat: function (id, src, width, format, options) { Image(imageUrl, {
let outputFileName = fileName.substring(0, fileName.length - 4); formats: ['jpeg'],
return `${outputFileName}.${format}`; outputDir: ogImagesDir,
} filenameFormat: function (id, src, width, format, options) {
}); return `${outputFilename}.${format}`;
} }
}); });
} else { }
console.log('⚠ No social images found'); });
} } else {
}); console.log('⚠ No social images found');
}
}; };
module.exports = { module.exports = {

View file

@ -114,8 +114,8 @@ module.exports = eleventyConfig => {
// --------------------- Passthrough File Copy ----------------------- // --------------------- Passthrough File Copy -----------------------
// same path // same path
['src/assets/fonts/', 'src/assets/images/template'].forEach(path => ['src/assets/fonts/', 'src/assets/images/template', 'src/assets/og-images'].forEach(
eleventyConfig.addPassthroughCopy(path) path => eleventyConfig.addPassthroughCopy(path)
); );
// to root // to root