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

fix(blog): optimize component share logic, typography, and modal layouts
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 5s
Details
Build & Deploy / 🏗️ Build (push) Failing after 14s
Details
Build & Deploy / 🧪 QA (push) Failing after 1m48s
Details
Build & Deploy / 🚀 Deploy (push) Has been skipped
Details
Build & Deploy / 🩺 Health Check (push) Has been skipped
Details
Build & Deploy / 🔔 Notify (push) Successful in 2s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-02-22 11:41:28 +01:00
parent 75c61f1436
commit b15c8408ff
103 changed files with 4366 additions and 2293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
apps/web/src/components/ArticleBlockquote.tsx
View File

@@ -1,5 +1,7 @@
import React from 'react';
import Prism from 'prismjs';
import { ComponentShareButton } from './ComponentShareButton';
import { Reveal } from './Reveal';
import 'prismjs/components/prism-python';
import 'prismjs/components/prism-typescript';
import 'prismjs/components/prism-javascript';
@@ -19,18 +21,50 @@ interface BlockquoteProps {
className?: string;
}
export const ArticleBlockquote: React.FC<BlockquoteProps> = ({ children, className = '' }) => (
<div className={`not-prose my-16 py-8 border-y-2 border-slate-900 grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-8 ${className}`}>
<div className="md:col-span-1 flex md:items-start md:justify-end pt-2">
<svg className="w-8 h-8 md:w-10 md:h-10 text-emerald-500" viewBox="0 0 24 24" fill="currentColor"><path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" /></svg>
</div>
<blockquote className="md:col-span-11 relative flex items-center">
<div className="text-2xl md:text-3xl font-serif text-slate-900 italic leading-[1.4] md:leading-snug tracking-tight m-0">
{children}
</div>
</blockquote>
</div>
);
export const ArticleBlockquote: React.FC<BlockquoteProps> = ({ children, className = '' }) => {
// Generate a quick stable hash based on content length/chars for ID
const shareId = `blockquote-${Math.random().toString(36).substring(7).toUpperCase()}`;
return (
<Reveal direction="up" delay={0.1}>
<figure
id={shareId}
className={`not-prose my-16 group relative transition-all duration-500 ease-out z-10 ${className}`}
>
<div className="absolute -inset-1 bg-gradient-to-r from-emerald-100/50 to-emerald-50/50 rounded-[2rem] blur opacity-20 group-hover:opacity-40 transition duration-1000 -z-10" />
<div className="glass bg-white/80 backdrop-blur-xl border border-slate-100 rounded-2xl shadow-sm group-hover:shadow-md group-hover:border-slate-200 transition-all duration-500 overflow-hidden relative p-8 md:p-12">
{/* Subtle top shine */}
<div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white to-transparent opacity-80" />
{/* Share Button top right */}
<div className="absolute top-4 right-4 md:opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<ComponentShareButton targetId={shareId} title="Zitat" />
</div>
<div className="flex flex-col md:flex-row gap-6 md:gap-8 items-start relative z-10">
<div className="shrink-0">
<div className="w-12 h-12 md:w-16 md:h-16 bg-slate-50 border border-slate-100 rounded-xl flex items-center justify-center group-hover:scale-110 group-hover:bg-white group-hover:border-emerald-200 transition-all duration-500 shadow-sm relative overflow-hidden">
{/* Small emerald glow effect inside the icon box on hover */}
<div className="absolute inset-0 bg-emerald-500/0 group-hover:bg-emerald-500/5 transition-colors duration-500" />
<svg className="w-6 h-6 md:w-8 md:h-8 text-slate-300 group-hover:text-emerald-500 transition-colors duration-500 relative z-10" viewBox="0 0 24 24" fill="currentColor">
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
</svg>
</div>
</div>
<blockquote className="flex-1 relative">
<div className="text-xl md:text-2xl lg:text-3xl font-serif text-slate-800 italic leading-relaxed md:leading-[1.4] tracking-tight m-0">
{children}
</div>
</blockquote>
</div>
</div>
</figure>
</Reveal>
);
};
interface CodeBlockProps {
code?: string;