SebinNyshkim/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: ✨ add responsiveness to article header images

Browse source
This commit is contained in:
Sebin Nyshkim 2024-10-20 23:32:30 +02:00
parent 4a18fadb67
commit 20e3d71b2a
3 changed files with 23 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

17
eleventy.config.js
View file

@ -2,6 +2,7 @@ import fs from 'node:fs';
import { env } from 'node:process';
import { eleventyImageTransformPlugin } from '@11ty/eleventy-img';
import { feedPlugin } from '@11ty/eleventy-plugin-rss';
import Image from '@11ty/eleventy-img';
import eleventyPluginCiu from '@alexcarpenter/eleventy-plugin-caniuse';
import eleventyPluginEmbedEverything from 'eleventy-plugin-embed-everything';
import eleventyPluginIcons from 'eleventy-plugin-icons';
@ -67,7 +68,9 @@ export default async function (eleventyConfig) {
eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
extensions: 'html',
formats: ['avif', 'webp', 'auto'],
sizes: ['1280', '720', '480', 'auto'],
widths: [640, 800, 1280, 1920, 2560, 3840, 'auto'],
urlPath: '/img/',
outputDir: './public/img/',
defaultAttributes: {
loading: 'lazy',
decoding: 'async'
@ -104,6 +107,18 @@ export default async function (eleventyConfig) {
);
eleventyConfig.addShortcode('year', () => `${new Date().getFullYear()}`);
eleventyConfig.addShortcode('bgimgset', async (src) => {
const imgset = await Image(src, {
widths: [1920, 2560, 3840],
formats: ['avif', 'webp', 'auto'],
urlPath: '/img/',
outputDir: './public/img/'
});
const getSets = ({ url, sourceType }, i) => `url(${url}) type('${sourceType}') ${i + 1}x`;
return Object.values(imgset).flat().map(getSets);
});
eleventyConfig.addFilter('toDateObj', (dateString) => new Date(dateString));
eleventyConfig.addFilter('isoDate', (dateObj) => dateObj.toISOString());