itsfinniii/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change the last blogs component

Browse Source
This commit is contained in:
itsfinniii
2026-04-12 18:20:40 +02:00
parent ee949aa76f
commit 3485c4583d
2 changed files with 27 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
astro/package-lock.json generated
View File

@@ -4066,9 +4066,9 @@
"license": "MIT"
},
"node_modules/baseline-browser-mapping": {
"version": "2.10.14",
"resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.14.tgz",
"integrity": "sha512-fOVLPAsFTsQfuCkvahZkzq6nf8KvGWanlYoTh0SVA0A/PIUxQGU2AOZAoD95n2gFLVDW/jP6sbGLny95nmEuHA==",
"version": "2.10.15",
"resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.15.tgz",
"integrity": "sha512-1nfKCq9wuAZFTkA2ey/3OXXx7GzFjLdkTiFVNwlJ9WqdI706CZRIhEqjuwanjMIja+84jDLa9rcyZDPDiVkASQ==",
"license": "Apache-2.0",
"bin": {
"baseline-browser-mapping": "dist/cli.cjs"
@@ -4151,9 +4151,9 @@
}
},
"node_modules/caniuse-lite": {
"version": "1.0.30001784",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001784.tgz",
"integrity": "sha512-WU346nBTklUV9YfUl60fqRbU5ZqyXlqvo1SgigE1OAXK5bFL8LL9q1K7aap3N739l4BvNqnkm3YrGHiY9sfUQw==",
"version": "1.0.30001785",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001785.tgz",
"integrity": "sha512-blhOL/WNR+Km1RI/LCVAvA73xplXA7ZbjzI4YkMK9pa6T/P3F2GxjNpEkyw5repTw9IvkyrjyHpwjnhZ5FOvYQ==",
"funding": [
{
"type": "opencollective",

38
astro/src/components/web/LastBlogs.astro
View File

@@ -2,7 +2,7 @@
import { getLastBlogs } from '@/content/blogs/blogs';
import { getSettings } from '@/content/settings/settings';
import CalendarIcon from '@/icons/CalendarIcon.astro';
import { getImageUrl } from '@/lib/images';
import { getImageSize, getImageUrl } from '@/lib/images';
import { getBlogRoute } from '@/lib/routing';
import { Image } from 'astro:assets';
@@ -43,22 +43,26 @@ const size = calculateSizeClasses(blogs.amount, lastBlogs.length);
</div>
<div class="flex flex-col lg:flex-row lg:justify-between gap-y-6">
{ lastBlogs.map((blog) => (
<a href={getBlogRoute(settings.blog, blog)} class={`${size} flex flex-col gap-2`}>
<Image
src={getImageUrl(blog.searchEngine.thumbnail.url)}
alt={blog.title}
class="flex rounded-2xl shadow-md w-full"
width={600}
height={315}
/>
<h4 class="font-semibold text-[28px]">{blog.title}</h4>
<div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
<CalendarIcon width={20} height={20} />
<div>{blog.date}</div>
</div>
</a>
)) }
{ lastBlogs.map((blog) => {
const imageSize = getImageSize(blog.searchEngine.thumbnail.width, blog.searchEngine.thumbnail.height, 0.5);
return (
<a href={getBlogRoute(settings.blog, blog)} class={`${size} flex flex-col gap-2`}>
<Image
src={getImageUrl(blog.searchEngine.thumbnail.url)}
alt={blog.title}
class="flex rounded-2xl shadow-md w-full"
width={imageSize.width}
height={imageSize.height}
/>
<h4 class="font-semibold text-[28px]">{blog.title}</h4>
<div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
<CalendarIcon width={20} height={20} />
<div>{blog.date}</div>
</div>
</a>
)
}) }
</div>
</div>
) }