mmintel/mintel.me
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 1 Wiki Activity

feat(blog): implement dynamic SVG thumbnails and specialized OG images for blog posts
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 15s
Details
Build & Deploy / 🧪 QA (push) Failing after 1m54s
Details
Build & Deploy / 🏗️ Build (push) Failing after 3m23s
Details
Build & Deploy / 🚀 Deploy (push) Has been skipped
Details
Build & Deploy / 🩺 Health Check (push) Has been skipped
Details
Build & Deploy / 🔔 Notify (push) Successful in 3s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-02-17 11:49:38 +01:00
parent 3de163276c
commit e2c9ec507f
6 changed files with 1461 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
apps/web/src/components/MediumCard.tsx
View File

@@ -2,6 +2,7 @@ import * as React from "react";
import Link from "next/link";
import { Card } from "./Layout";
import { ArrowRight } from "lucide-react";
import { BlogThumbnailSVG } from "./blog/BlogThumbnailSVG";
interface Post {
title: string;
@@ -31,35 +32,46 @@ export const MediumCard: React.FC<MediumCardProps> = ({ post }) => {
techBorder={false}
className="relative overflow-hidden transition-all duration-300 border-slate-100 hover:border-slate-300 bg-white/30 backdrop-blur-sm p-5 md:p-6"
>
<div className="space-y-3 md:space-y-4">
<div className="flex items-center justify-between">
<time className="text-[9px] md:text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400">
{formattedDate}
</time>
<div className="flex gap-1.5 md:gap-2">
{tags?.slice(0, 2).map((tag) => (
<span
key={tag}
className="text-[8px] md:text-[9px] font-mono text-slate-300 uppercase"
>
#{tag}
</span>
))}
<div className="flex gap-4 md:gap-5 items-center">
{/* Thumbnail */}
<div className="flex-shrink-0 w-[56px] h-[56px] md:w-[80px] md:h-[80px] rounded-lg overflow-hidden border border-slate-100 group-hover:border-slate-200 transition-colors">
<BlogThumbnailSVG
slug={slug}
variant="square"
className="w-full h-full"
/>
</div>
<div className="flex-1 space-y-3 md:space-y-4 min-w-0">
<div className="flex items-center justify-between">
<time className="text-[9px] md:text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400">
{formattedDate}
</time>
<div className="flex gap-1.5 md:gap-2">
{tags?.slice(0, 2).map((tag) => (
<span
key={tag}
className="text-[8px] md:text-[9px] font-mono text-slate-300 uppercase"
>
#{tag}
</span>
))}
</div>
</div>
</div>
<div className="space-y-1.5 md:space-y-2">
<h3 className="text-xl md:text-2xl font-bold text-slate-900 tracking-tight leading-tight group-hover:text-black transition-colors">
{title}
</h3>
<p className="text-sm md:text-base text-slate-500 font-serif italic leading-relaxed line-clamp-2">
{description}
</p>
</div>
<div className="space-y-1.5 md:space-y-2">
<h3 className="text-xl md:text-2xl font-bold text-slate-900 tracking-tight leading-tight group-hover:text-black transition-colors">
{title}
</h3>
<p className="text-sm md:text-base text-slate-500 font-serif italic leading-relaxed line-clamp-2">
{description}
</p>
</div>
<div className="pt-1 md:pt-2 flex items-center gap-2 text-[9px] md:text-[10px] font-bold uppercase tracking-widest text-slate-400 group-hover:text-slate-900 transition-all">
<span>Beitrag öffnen</span>
<ArrowRight className="w-3 h-3 translate-x-0 group-hover:translate-x-1 transition-transform" />
<div className="pt-1 md:pt-2 flex items-center gap-2 text-[9px] md:text-[10px] font-bold uppercase tracking-widest text-slate-400 group-hover:text-slate-900 transition-all">
<span>Beitrag öffnen</span>
<ArrowRight className="w-3 h-3 translate-x-0 group-hover:translate-x-1 transition-transform" />
</div>
</div>
</div>
</Card>