Skip to content

Blog and blog post page completed #290

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
danielmarv merged 1 commit into from
Feb 25, 2026
Merged

Blog and blog post page completed #290

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 15 additions & 17 deletions src/app/[locale]/posts/[slug]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,10 +106,10 @@ export default async function PostPage({ params }: PostPageProps) {

return (
<div className="">
<div className="container w-full max-w-screen-2xl">
<div className="container w-full max-w-7xl">
<div className="flex items-center justify-center pt-16 pb-4 sm:pt-36 sm:pb-12">
<div className="relative flex flex-col items-center justify-center w-full">
<h1 className="text-center h1 text-4xl sm:text-5xl lg:text-6xl">{post.frontmatter.title}</h1>
<h1 className="text-center h1">{post.frontmatter.title}</h1>
<Image
src="/illustrations/underline.svg"
alt={locale === 'de' ? 'Unterstrich' : 'Underline'}
Expand All @@ -122,9 +122,9 @@ export default async function PostPage({ params }: PostPageProps) {
</div>

<div className="lg:pb-48 sm:pb-32 pb-28">
<div className="container mt-12 w-full max-w-screen-2xl">
<div className="flex flex-col xl:flex-row gap-12 xl:gap-8">
<div className="flex-1 w-full space-y-8">
<div className="container mt-12 w-full">
<div className="flex flex-col-reverse xl:flex-row gap-12 xl:gap-8">
<div className="space-y-8">
<div className="space-y-6 sm:space-y-5">
<div className="flex flex-wrap items-center gap-6 sm:gap-8">
<div className="flex items-center gap-2 text-purple">
Expand All @@ -135,9 +135,9 @@ export default async function PostPage({ params }: PostPageProps) {
clipRule="evenodd"
/>
</svg>
<time className="text-lg font-medium">{formattedDate}</time>
<time className="text-base font-medium">{formattedDate}</time>
</div>
<div className="flex items-center gap-2 text-purple">
<div className="flex items-center gap-2 text-purple hover:text-purple-700 group">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
<path
fillRule="evenodd"
Expand All @@ -146,15 +146,15 @@ export default async function PostPage({ params }: PostPageProps) {
/>
</svg>
{author?.link ? (
<Link href={author.link} className="text-lg font-medium text-blue hover:text-purple transition-colors">
<Link href={author.link} className="text-lg font-medium text-purple group-hover:text-purple-700 transition-colors">
{authorName}
</Link>
) : (
<span className="text-lg font-medium">{authorName}</span>
<span className="text-base font-medium">{authorName}</span>
)}
</div>
</div>
<div className="flex flex-wrap items-center gap-4 mt-4 text-sm sm:text-base sm:mt-3 text-purple">
<div className="flex flex-wrap items-center gap-4 mt-4 text-sm sm:text-sm sm:mt-3 text-purple">
{post.frontmatter.categories?.map((category, index) => (
<p key={index}>#{category}</p>
))}
Expand All @@ -176,8 +176,7 @@ export default async function PostPage({ params }: PostPageProps) {
)}

<div
className="text-blue prose prose-lg prose-a:text-purple-700 prose-code:bg-yellow prose-p:text-lg prose-p:leading-8 prose-blockquote:border-l-0 prose-blockquote:bg-green-100 prose-blockquote:not-italic prose-blockquote:px-8 prose-blockquote:py-3 prose-blockquote:rounded-3xl relative"
style={{ maxWidth: '100%' }}
className="text-blue sm:prose-base prose prose-sm prose-pre:prose-code:text-sm prose-ul:marker:text-blue prose-a:text-purple-700 prose-pre:prose-code:bg-transparent prose-code:bg-yellow prose-p:sm:leading-7 prose-blockquote:border-l-0 prose-blockquote:bg-green-100 prose-blockquote:not-italic prose-blockquote:px-8 prose-blockquote:py-3 prose-blockquote:rounded-3xl relative"
dangerouslySetInnerHTML={{ __html: post.contentHtml || '' }}
/>
</div>
Expand All @@ -186,18 +185,17 @@ export default async function PostPage({ params }: PostPageProps) {
<aside className="w-full xl:max-w-sm shrink-0">
<div className="rounded-[30px] w-full shadow-4 bg-white xl:p-5 p-4 xl:block md:flex lg:items-center">
{author.picture && (
<div className="relative lg:w-40 md:w-48 sm:w-40 w-28 h-28 md:h-auto lg:h-40 shrink-0 overflow-hidden rounded-3xl bg-gray-100 xl:float-left md:float-none float-left xl:mr-6 mr-4">
<div className="relative lg:size-40 md:size-44 sm:size-36 size-28 shrink-0 overflow-hidden rounded-3xl bg-gray-100 xl:float-left md:float-none float-left xl:mr-6 mr-4">
<Image
src={author.picture}
alt={authorName}
fill
sizes="(max-width: 640px) 112px, (max-width: 1024px) 160px, 192px"
className="object-cover"
className="object-cover sm:size-28 xl:size-40 md:size-56"
/>
</div>
)}
<div>
<h4 className="mb-2 text-xl font-bold">
<h4 className="mb-2 text-lg font-bold">
{author.link ? (
<Link href={author.link} className="hover:text-purple transition-colors">
{authorName}
Expand All @@ -207,7 +205,7 @@ export default async function PostPage({ params }: PostPageProps) {
)}
</h4>
{author.bio && (
<p className="text-base leading-7">
<p className="text-sm leading-6 text-blue">
{author.bio}
</p>
)}
Expand Down
2 changes: 1 addition & 1 deletion src/app/[locale]/posts/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export default async function BlogPage({ params, searchParams }: BlogPageProps)
<Image
src="/illustrations/blog-arrow.svg"
alt=""
className="absolute w-32 sm:w-64 2xl:w-96 lg:w-80 2xl:left-32 xl:left-9 lg:top-36 sm:top-28 top-12 shrink-0"
className="absolute w-32 sm:w-64 2xl:w-96 lg:w-80 xl:left-9 lg:top-36 sm:top-28 top-12 shrink-0"
width={384}
height={100}
/>
Expand Down
7 changes: 6 additions & 1 deletion src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,9 +93,14 @@
background-color: var(--color-white);
} */

p {
/* p {
padding-top: 0.8em;
} */

.prose > iframe{
@apply w-full xl:min-h-103.5 lg:min-h-130 md:min-h-96 sm:min-h-81 h-46
}

}

@layer utilities {
Expand Down
2 changes: 1 addition & 1 deletion src/components/blog/BlogCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export default function BlogCard({ post, locale = 'en' }: BlogCardProps) {
<h2 className="text-lg font-bold text-center transition-colors duration-150 ease-in-out text-blue sm:text-left sm:line-clamp-none line-clamp-2 group-hover:text-purple-700">
{post.title}
</h2>
<p className="text-sm leading-[22px] text-blue line-clamp-3">
<p className="text-sm leading-5.5 text-blue line-clamp-3">
{post.excerpt}
</p>
</div>
Expand Down
28 changes: 16 additions & 12 deletions src/components/blog/BlogPagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,18 +25,20 @@ export default function BlogPagination({ currentPage, totalPages, locale }: Blog
const visiblePages = getVisiblePages();

return (
<div className="flex items-center justify-center gap-2 mt-12">
<div className="flex items-center justify-center gap-7 mt-12">
{/* Previous Button */}
{currentPage > 1 ? (
<Link
href={`${localePath}/posts?page=${currentPage - 1}`}
className="px-4 py-2 text-sm font-medium text-blue bg-white border border-gray-300 rounded-lg hover:bg-gray-50 hover:border-purple transition-colors"
className="inline-flex items-center justify-center text-white bg-purple-700 rounded-full sm:w-16 sm:h-16 w-11 h-11 text-whit shrink-0 page-link"
>
{locale === 'de' ? 'Zurück' : 'Previous'}
<span className="sr-only">{locale === 'de' ? 'Zurück' : 'Previous'}</span>
<svg className="size-5 -ml-0.5 sm:size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"></path></svg>
</Link>
) : (
<span className="px-4 py-2 text-sm font-medium text-gray-400 bg-gray-100 border border-gray-200 rounded-lg cursor-not-allowed">
{locale === 'de' ? 'Zurück' : 'Previous'}
<span className="inline-flex items-center justify-center text-white bg-purple-100 rounded-full sm:w-16 sm:h-16 w-11 h-11 text-whit shrink-0 page-link cursor-not-allowed">
<span className="sr-only">{locale === 'de' ? 'Zurück' : 'Previous'}</span>
<svg className="size-5 -ml-0.5 sm:size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"></path></svg>
</span>
)}

Expand All @@ -60,15 +62,15 @@ export default function BlogPagination({ currentPage, totalPages, locale }: Blog
page === currentPage ? (
<span
key={page}
className="px-4 py-2 text-sm font-medium bg-purple text-white rounded-lg shadow-md"
className="inline-flex items-center justify-center size-11 text-white rounded-full bg-green font-medium text-sm page-link"
>
{page}
</span>
) : (
<Link
key={page}
href={`${localePath}/posts?page=${page}`}
className="px-4 py-2 text-sm font-medium text-blue bg-white border border-gray-300 rounded-lg hover:bg-gray-50 hover:border-purple transition-colors"
className="inline-flex items-center justify-center w-5 h-11 text-blue rounded-full font-medium text-[14px] page-link"
>
{page}
</Link>
Expand All @@ -79,7 +81,7 @@ export default function BlogPagination({ currentPage, totalPages, locale }: Blog
{visiblePages[visiblePages.length - 1] < totalPages && (
<>
{visiblePages[visiblePages.length - 1] < totalPages - 1 && (
<span className="px-2 text-gray-400">...</span>
<span className="inline-flex items-center justify-center w-5 h-11 text-blue rounded-full font-medium text-[14px] page-link">...</span>
)}
<Link
href={`${localePath}/posts?page=${totalPages}`}
Expand All @@ -94,13 +96,15 @@ export default function BlogPagination({ currentPage, totalPages, locale }: Blog
{currentPage < totalPages ? (
<Link
href={`${localePath}/posts?page=${currentPage + 1}`}
className="px-4 py-2 text-sm font-medium text-blue bg-white border border-gray-300 rounded-lg hover:bg-gray-50 hover:border-purple transition-colors"
className="inline-flex items-center justify-center text-white bg-purple-700 rounded-full sm:w-16 sm:h-16 w-11 h-11 text-whit shrink-0 page-link"
>
{locale === 'de' ? 'Weiter' : 'Next'}
<span className="sr-only">{locale === 'de' ? 'Weiter' : 'Next'}</span>
<svg className="size-5 sm:size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"></path></svg>
</Link>
) : (
<span className="px-4 py-2 text-sm font-medium text-gray-400 bg-gray-100 border border-gray-200 rounded-lg cursor-not-allowed">
{locale === 'de' ? 'Weiter' : 'Next'}
<span className="inline-flex items-center justify-center text-white bg-purple-100 rounded-full sm:w-16 sm:h-16 w-11 h-11 text-whit shrink-0 page-link cursor-not-allowed">
<span className="sr-only">{locale === 'de' ? 'Weiter' : 'Next'}</span>
<svg className="size-5 sm:size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"></path></svg>
</span>
)}
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/contact/CalendlyButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function CalendlyButton() {
}

return (
<div className="max-w-[1080px] w-full pt-3 mx-auto">
<div className="max-w-270 w-full pt-3 mx-auto">
<div className="bg-sky-100 rounded-[28px] border-2 border-dashed border-sky p-6 w-full flex flex-col items-center justify-center text-center">
<p>
{t('description')}
Expand Down
Loading