Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cleanup filters/Speed up local build #499

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Cleanup filters/Speed up local build #499

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1bf4b4d
Move filters to filters.js file
anneke Dec 31, 2024
e64f8ae
Don’t convert svg to jpg if using `npm run start:quick`
anneke Dec 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
163 changes: 55 additions & 108 deletions .eleventy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,13 +53,6 @@ module.exports = function (eleventyConfig) {
eleventyConfig.ignores.add("src/nl/vereniging/bestuur/notulen");
}

// Custom date filter
eleventyConfig.addFilter("localizedDate", function (dateObj, locale = "en") {
return DateTime.fromJSDate(dateObj)
.setLocale(locale)
.toFormat("d LLLL yyyy");
});

/* Add id to heading elements */
eleventyConfig.addPlugin(pluginAddIdToHeadings);

Expand Down Expand Up @@ -185,111 +178,65 @@ module.exports = function (eleventyConfig) {
})
);


eleventyConfig.addFilter("readablePostDate", (dateObj) => {
return DateTime.fromJSDate(dateObj, {
zone: "Europe/Amsterdam",
}).setLocale('en').toLocaleString(DateTime.DATE_FULL);
});

eleventyConfig.addFilter("postDate", (dateObj) => {
return DateTime.fromJSDate(dateObj, {
zone: "Europe/Amsterdam",
}).setLocale('en').toISODate();
});

eleventyConfig.addFilter('splitlines', function (input) {
const parts = input.split(' ');
const lines = parts.reduce(function (prev, current) {

if (!prev.length) {
return [current];
}

let lastOne = prev[prev.length - 1];

if (lastOne.length + current.length > 23) {
return [...prev, current];
}

prev[prev.length - 1] = lastOne + ' ' + current;

return prev;
}, []);

return lines;
});

eleventyConfig.on('afterBuild', async () => {
async function convertSvgToJpeg(inputDir, outputDir) {
const browser = await puppeteer.launch();
const page = await browser.newPage();

// Read all files in the input directory
const files = fs.readdirSync(inputDir);

for (const filename of files) {
if (filename.endsWith(".svg")) {
const inputPath = path.join(inputDir, filename);
const outputPath = path.join(outputDir, filename.replace('.svg', '.jpg'));

// Read the SVG content
const svgContent = fs.readFileSync(inputPath, 'utf8');

// Extract width and height from SVG (Optional: If SVG has explicit size)
const matchWidth = svgContent.match(/width="([0-9]+)"/);
const matchHeight = svgContent.match(/height="([0-9]+)"/);

const width = matchWidth ? parseInt(matchWidth[1], 10) : 1200; // Default to 1200px
const height = matchHeight ? parseInt(matchHeight[1], 10) : 675; // Default to 630px

// Set the viewport size to match SVG size
await page.setViewport({ width, height });

// Set SVG content inside an HTML wrapper
await page.setContent(`
<html>
<body style="margin:0;padding:0;overflow:hidden;">
<div style="width:${width}px; height:${height}px;">
${svgContent}
</div>
</body>
</html>
`);

// Take a screenshot and save as JPEG
await page.screenshot({
path: outputPath,
type: 'jpeg',
quality: 100,
clip: { x: 0, y: 0, width, height } // Ensure clipping matches viewport
});

console.log(`Converted: ${filename} -> ${outputPath}`);
if (!quick) {
eleventyConfig.on('afterBuild', async () => {
async function convertSvgToJpeg(inputDir, outputDir) {
const browser = await puppeteer.launch();
const page = await browser.newPage();

// Read all files in the input directory
const files = fs.readdirSync(inputDir);

for (const filename of files) {
if (filename.endsWith(".svg")) {
const inputPath = path.join(inputDir, filename);
const outputPath = path.join(outputDir, filename.replace('.svg', '.jpg'));

// Read the SVG content
const svgContent = fs.readFileSync(inputPath, 'utf8');

// Extract width and height from SVG (Optional: If SVG has explicit size)
const matchWidth = svgContent.match(/width="([0-9]+)"/);
const matchHeight = svgContent.match(/height="([0-9]+)"/);

const width = matchWidth ? parseInt(matchWidth[1], 10) : 1200; // Default to 1200px
const height = matchHeight ? parseInt(matchHeight[1], 10) : 675; // Default to 630px

// Set the viewport size to match SVG size
await page.setViewport({ width, height });

// Set SVG content inside an HTML wrapper
await page.setContent(`
<html>
<body style="margin:0;padding:0;overflow:hidden;">
<div style="width:${width}px; height:${height}px;">
${svgContent}
</div>
</body>
</html>
`);

// Take a screenshot and save as JPEG
await page.screenshot({
path: outputPath,
type: 'jpeg',
quality: 100,
clip: { x: 0, y: 0, width, height } // Ensure clipping matches viewport
});

console.log(`Converted: ${filename} -> ${outputPath}`);
}
}
}

await browser.close();
}

// Execute conversion
const inputDir = 'dist/assets/images/social-preview-images/';
const outputDir = 'dist/assets/images/social-preview-images/';
await convertSvgToJpeg(inputDir, outputDir);
});

// Allows you to debug a json object in eleventy templates data | stringify
eleventyConfig.addFilter("stringify", (data) => {
return JSON.stringify(data, null, "\t");
});
await browser.close();
}

eleventyConfig.addFilter("customSlug", function (value) {
if (!value) return "fallback-title"; // Fallback for empty titles
return slugify(value, {
lower: true, // Convert to lowercase
remove: /[^\w\s-]/g // Remove all non-word characters except spaces and dashes
}).replace(/\s+/g, '-'); // Replace spaces with dashes (extra safety)
// Execute conversion
const inputDir = 'dist/assets/images/social-preview-images/';
const outputDir = 'dist/assets/images/social-preview-images/';
Comment on lines +235 to +236
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is using fs, so this needs to use path.join('...', '...', '...');.

You may want to update the path and fs import to node: to prevent any package from providing those features down the line (security).

await convertSvgToJpeg(inputDir, outputDir);
});
}

// https://www.11ty.dev/docs/permalinks/#remove-trailing-slashes
// Dropping these normalizes the URls between sitemap.xml and canonical, which is important for indexing.
Expand Down
48 changes: 47 additions & 1 deletion utils/filters.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,4 +48,50 @@ module.exports = {
});
},

};
readablePostDate(dateObj) {
return DateTime.fromJSDate(dateObj, {
zone: "Europe/Amsterdam",
}).setLocale('en').toLocaleString(DateTime.DATE_FULL);
},

postDate(dateObj) {
return DateTime.fromJSDate(dateObj, {
zone: "Europe/Amsterdam",
}).setLocale('en').toISODate();
},

splitlines(input) {
const parts = input.split(' ');
const lines = parts.reduce(function (prev, current) {
if (!prev.length) {
return [current];
}

let lastOne = prev[prev.length - 1];

if (lastOne.length + current.length > 23) {
return [...prev, current];
}

prev[prev.length - 1] = lastOne + ' ' + current;
return prev;
}, []);

return lines;
},

stringify(data) {
return JSON.stringify(data, null, "\t");
},

customSlug(value) {
if (!value) return "fallback-title"; // Fallback for empty titles
return strToSlug(value).replace(/\s+/g, '-'); // Replace spaces with dashes
},

localizedDate(dateObj, locale = "en") {
return DateTime.fromJSDate(dateObj)
.setLocale(locale)
.toFormat("d LLLL yyyy");
}
};
Loading