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

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

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