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());

7
src/layouts/blogpost.njk
View file

@ -3,7 +3,12 @@ layout: base.njk
---
<article>
<header style="background-image: url({{ image.src }})" class="relative mb-8 grid h-96 grid-flow-row grid-rows-article-header place-items-center space-y-6 bg-cover bg-center pb-8 pt-20 px-safe-offset-4 *:z-10 before:absolute before:inset-0 before:bg-slate-300 before:bg-opacity-65 sm:h-128 sm:pt-28 md:pt-32 md:px-safe-offset-6 lg:mb-12 lg:h-160 lg:pb-12 2xl:h-192 before:dark:bg-slate-900 before:dark:bg-opacity-65">
<header
{% if image and image.src != '' %}
style="background-image: image-set({% bgimgset image.src %})"
{% endif %}
class="relative mb-8 grid h-96 grid-flow-row grid-rows-article-header place-items-center space-y-6 bg-cover bg-center pb-8 pt-20 px-safe-offset-4 *:z-10 before:absolute before:inset-0 before:bg-slate-300 before:bg-opacity-65 sm:h-128 sm:pt-28 md:pt-32 md:px-safe-offset-6 lg:mb-12 lg:h-160 lg:pb-12 2xl:h-192 before:dark:bg-slate-900 before:dark:bg-opacity-65"
>
<div class="prose prose-slate mx-auto md:prose-lg lg:prose-xl xl:prose-2xl dark:prose-invert prose-headings:font-normal">
<h1 class="text-balance text-center">{{ title }}</h1>
</div>

2
src/posts.njk
View file

@ -20,7 +20,7 @@ pagination:
</div>
{% if post.data.image and post.data.image.src != '' %}
<img src="{{ post.data.image.src }}" alt="{{ post.data.image.alt }}">
<img src="{{ post.data.image.src }}" alt="{{ post.data.image.alt }}" sizes="(min-width: 1280px) 960px, (min-width: 1024px) 768px, (min-width: 640px) 640px, 480px">
{% endif %}
<p>{{ post.data.description }}</p>