Skip to content

Commit 5305bdf

Browse files
danielmarvdanielmarv
authored
Merge pull request #290 from OpenElements/blog-and-post-v4
Blog and blog post page completed
2 parents ba79e9f + 7fe3dda commit 5305bdf

6 files changed

Lines changed: 40 additions & 33 deletions

File tree

‎src/app/[locale]/posts/[slug]/page.tsx‎

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -106,10 +106,10 @@ export default async function PostPage({ params }: PostPageProps) {
106106

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

124124
<div className="lg:pb-48 sm:pb-32 pb-28">
125-
<div className="container mt-12 w-full max-w-screen-2xl">
126-
<div className="flex flex-col xl:flex-row gap-12 xl:gap-8">
127-
<div className="flex-1 w-full space-y-8">
125+
<div className="container mt-12 w-full">
126+
<div className="flex flex-col-reverse xl:flex-row gap-12 xl:gap-8">
127+
<div className="space-y-8">
128128
<div className="space-y-6 sm:space-y-5">
129129
<div className="flex flex-wrap items-center gap-6 sm:gap-8">
130130
<div className="flex items-center gap-2 text-purple">
@@ -135,9 +135,9 @@ export default async function PostPage({ params }: PostPageProps) {
135135
clipRule="evenodd"
136136
/>
137137
</svg>
138-
<time className="text-lg font-medium">{formattedDate}</time>
138+
<time className="text-base font-medium">{formattedDate}</time>
139139
</div>
140-
<div className="flex items-center gap-2 text-purple">
140+
<div className="flex items-center gap-2 text-purple hover:text-purple-700 group">
141141
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
142142
<path
143143
fillRule="evenodd"
@@ -146,15 +146,15 @@ export default async function PostPage({ params }: PostPageProps) {
146146
/>
147147
</svg>
148148
{author?.link ? (
149-
<Link href={author.link} className="text-lg font-medium text-blue hover:text-purple transition-colors">
149+
<Link href={author.link} className="text-lg font-medium text-purple group-hover:text-purple-700 transition-colors">
150150
{authorName}
151151
</Link>
152152
) : (
153-
<span className="text-lg font-medium">{authorName}</span>
153+
<span className="text-base font-medium">{authorName}</span>
154154
)}
155155
</div>
156156
</div>
157-
<div className="flex flex-wrap items-center gap-4 mt-4 text-sm sm:text-base sm:mt-3 text-purple">
157+
<div className="flex flex-wrap items-center gap-4 mt-4 text-sm sm:text-sm sm:mt-3 text-purple">
158158
{post.frontmatter.categories?.map((category, index) => (
159159
<p key={index}>#{category}</p>
160160
))}
@@ -176,8 +176,7 @@ export default async function PostPage({ params }: PostPageProps) {
176176
)}
177177

178178
<div
179-
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"
180-
style={{ maxWidth: '100%' }}
179+
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"
181180
dangerouslySetInnerHTML={{ __html: post.contentHtml || '' }}
182181
/>
183182
</div>
@@ -186,18 +185,17 @@ export default async function PostPage({ params }: PostPageProps) {
186185
<aside className="w-full xl:max-w-sm shrink-0">
187186
<div className="rounded-[30px] w-full shadow-4 bg-white xl:p-5 p-4 xl:block md:flex lg:items-center">
188187
{author.picture && (
189-
<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">
188+
<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">
190189
<Image
191190
src={author.picture}
192191
alt={authorName}
193192
fill
194-
sizes="(max-width: 640px) 112px, (max-width: 1024px) 160px, 192px"
195-
className="object-cover"
193+
className="object-cover sm:size-28 xl:size-40 md:size-56"
196194
/>
197195
</div>
198196
)}
199197
<div>
200-
<h4 className="mb-2 text-xl font-bold">
198+
<h4 className="mb-2 text-lg font-bold">
201199
{author.link ? (
202200
<Link href={author.link} className="hover:text-purple transition-colors">
203201
{authorName}
@@ -207,7 +205,7 @@ export default async function PostPage({ params }: PostPageProps) {
207205
)}
208206
</h4>
209207
{author.bio && (
210-
<p className="text-base leading-7">
208+
<p className="text-sm leading-6 text-blue">
211209
{author.bio}
212210
</p>
213211
)}

‎src/app/[locale]/posts/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export default async function BlogPage({ params, searchParams }: BlogPageProps)
5050
<Image
5151
src="/illustrations/blog-arrow.svg"
5252
alt=""
53-
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"
53+
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"
5454
width={384}
5555
height={100}
5656
/>

‎src/app/globals.css‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,9 +93,14 @@
9393
background-color: var(--color-white);
9494
} */
9595

96-
p {
96+
/* p {
9797
padding-top: 0.8em;
98+
} */
99+
100+
.prose > iframe{
101+
@apply w-full xl:min-h-103.5 lg:min-h-130 md:min-h-96 sm:min-h-81 h-46
98102
}
103+
99104
}
100105

101106
@layer utilities {

‎src/components/blog/BlogCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export default function BlogCard({ post, locale = 'en' }: BlogCardProps) {
6767
<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">
6868
{post.title}
6969
</h2>
70-
<p className="text-sm leading-[22px] text-blue line-clamp-3">
70+
<p className="text-sm leading-5.5 text-blue line-clamp-3">
7171
{post.excerpt}
7272
</p>
7373
</div>

‎src/components/blog/BlogPagination.tsx‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -25,18 +25,20 @@ export default function BlogPagination({ currentPage, totalPages, locale }: Blog
2525
const visiblePages = getVisiblePages();
2626

2727
return (
28-
<div className="flex items-center justify-center gap-2 mt-12">
28+
<div className="flex items-center justify-center gap-7 mt-12">
2929
{/* Previous Button */}
3030
{currentPage > 1 ? (
3131
<Link
3232
href={`${localePath}/posts?page=${currentPage - 1}`}
33-
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"
33+
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"
3434
>
35-
{locale === 'de' ? 'Zurück' : 'Previous'}
35+
<span className="sr-only">{locale === 'de' ? 'Zurück' : 'Previous'}</span>
36+
<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>
3637
</Link>
3738
) : (
38-
<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">
39-
{locale === 'de' ? 'Zurück' : 'Previous'}
39+
<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">
40+
<span className="sr-only">{locale === 'de' ? 'Zurück' : 'Previous'}</span>
41+
<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>
4042
</span>
4143
)}
4244

@@ -60,15 +62,15 @@ export default function BlogPagination({ currentPage, totalPages, locale }: Blog
6062
page === currentPage ? (
6163
<span
6264
key={page}
63-
className="px-4 py-2 text-sm font-medium bg-purple text-white rounded-lg shadow-md"
65+
className="inline-flex items-center justify-center size-11 text-white rounded-full bg-green font-medium text-sm page-link"
6466
>
6567
{page}
6668
</span>
6769
) : (
6870
<Link
6971
key={page}
7072
href={`${localePath}/posts?page=${page}`}
71-
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"
73+
className="inline-flex items-center justify-center w-5 h-11 text-blue rounded-full font-medium text-[14px] page-link"
7274
>
7375
{page}
7476
</Link>
@@ -79,7 +81,7 @@ export default function BlogPagination({ currentPage, totalPages, locale }: Blog
7981
{visiblePages[visiblePages.length - 1] < totalPages && (
8082
<>
8183
{visiblePages[visiblePages.length - 1] < totalPages - 1 && (
82-
<span className="px-2 text-gray-400">...</span>
84+
<span className="inline-flex items-center justify-center w-5 h-11 text-blue rounded-full font-medium text-[14px] page-link">...</span>
8385
)}
8486
<Link
8587
href={`${localePath}/posts?page=${totalPages}`}
@@ -94,13 +96,15 @@ export default function BlogPagination({ currentPage, totalPages, locale }: Blog
9496
{currentPage < totalPages ? (
9597
<Link
9698
href={`${localePath}/posts?page=${currentPage + 1}`}
97-
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"
99+
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"
98100
>
99-
{locale === 'de' ? 'Weiter' : 'Next'}
101+
<span className="sr-only">{locale === 'de' ? 'Weiter' : 'Next'}</span>
102+
<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>
100103
</Link>
101104
) : (
102-
<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">
103-
{locale === 'de' ? 'Weiter' : 'Next'}
105+
<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">
106+
<span className="sr-only">{locale === 'de' ? 'Weiter' : 'Next'}</span>
107+
<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>
104108
</span>
105109
)}
106110
</div>

‎src/components/contact/CalendlyButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default function CalendlyButton() {
1212
}
1313

1414
return (
15-
<div className="max-w-[1080px] w-full pt-3 mx-auto">
15+
<div className="max-w-270 w-full pt-3 mx-auto">
1616
<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">
1717
<p>
1818
{t('description')}

0 commit comments

Comments
 (0)