Skip to content

Commit 1979d96

Browse files
codercatdevcodercatdev
committed
feat(site): align detail page header/cover/prose widths to max-w-4xl and move diagram/related video cards to bottom
1 parent 656d9e6 commit 1979d96

6 files changed

Lines changed: 60 additions & 52 deletions

File tree

‎apps/site/src/components/CoverMedia.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const {
2424
youtube,
2525
width,
2626
height,
27-
sizes = "(max-width: 1280px) 100vw, 1280px",
27+
sizes = "(max-width: 896px) 100vw, 896px",
2828
class: className,
2929
} = Astro.props;
3030

‎apps/site/src/components/portable-text/PortableTextContent.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ const components = {
7070

7171
{
7272
value && value.length > 0 && (
73-
<div class:list={["prose dark:prose-invert max-w-4xl", className]}>
73+
<div class:list={["prose dark:prose-invert w-full max-w-4xl lg:max-w-4xl", className]}>
7474
<PortableText value={value} components={components} />
7575
</div>
7676
)

‎apps/site/src/pages/course/[slug].astro‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -75,14 +75,16 @@ const sanitizedContent = (course.content ?? []).filter((block) => {
7575
}}
7676
canonical={`/course/${slug}`}
7777
>
78-
<Breadcrumbs
79-
links={[
80-
{ title: "Courses", href: "/courses" },
81-
{ title: course.title },
82-
]}
83-
/>
78+
<div class="mx-auto max-w-4xl">
79+
<Breadcrumbs
80+
links={[
81+
{ title: "Courses", href: "/courses" },
82+
{ title: course.title },
83+
]}
84+
/>
85+
</div>
8486

85-
<article class="min-w-0 max-w-full py-6">
87+
<article class="mx-auto min-w-0 max-w-4xl py-6">
8688
<div class="mb-6 flex flex-wrap items-center justify-between gap-4">
8789
<div class="flex flex-wrap items-center gap-3">
8890
<div class="inline-flex items-center gap-2 rounded-full border-2 border-[#2A1155] bg-[#EDE9FE] px-4 py-1 font-mono text-xs font-extrabold uppercase tracking-wider text-[#7C3AED] dark:border-purple-400/40 dark:bg-purple-950/60 dark:text-purple-200 hand-border shadow-sketch-sm">
@@ -134,18 +136,12 @@ const sanitizedContent = (course.content ?? []).filter((block) => {
134136
/>
135137
</div>
136138

137-
<ExcalidrawBlueprintCard
138-
title={course.title}
139-
kind="course"
140-
tags={sections.map((s) => s?.title)}
141-
/>
142-
143139
{
144140
sanitizedContent.length > 0 && (
145141
<div class="my-8">
146142
<PortableTextContent
147143
value={sanitizedContent}
148-
class="mx-auto prose-violet lg:prose-xl"
144+
class="mx-auto prose-violet lg:prose-xl lg:max-w-4xl"
149145
/>
150146
</div>
151147
)
@@ -229,5 +225,11 @@ const sanitizedContent = (course.content ?? []).filter((block) => {
229225
</section>
230226
)
231227
}
228+
229+
<ExcalidrawBlueprintCard
230+
title={course.title}
231+
kind="course"
232+
tags={sections.map((s) => s?.title)}
233+
/>
232234
</article>
233235
</BaseLayout>

‎apps/site/src/pages/course/[slug]/lesson/[lessonSlug].astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -189,7 +189,7 @@ const lessonDescription = currentLesson.excerpt || course.excerpt || "";
189189
<div class="my-8">
190190
<PortableTextContent
191191
value={sanitizedLessonContent}
192-
class="mx-auto prose-violet lg:prose-xl"
192+
class="mx-auto max-w-none prose-violet lg:prose-xl lg:max-w-none"
193193
/>
194194
</div>
195195
) : (

‎apps/site/src/pages/podcast/[slug].astro‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -126,11 +126,13 @@ const faqNode = faqSchema(extractFaqsFromPortableText(podcast.content));
126126
...(faqNode ? [faqNode] : []),
127127
]}
128128
>
129-
<Breadcrumbs
130-
links={[{ title: "Podcasts", href: "/podcasts" }, { title: podcast.title }]}
131-
/>
129+
<div class="mx-auto max-w-4xl">
130+
<Breadcrumbs
131+
links={[{ title: "Podcasts", href: "/podcasts" }, { title: podcast.title }]}
132+
/>
133+
</div>
132134

133-
<article class="min-w-0 max-w-full py-4">
135+
<article class="mx-auto min-w-0 max-w-4xl py-4">
134136
{/* Episode Badge & Matched Vendor / Topic Pills */}
135137
<div class="mb-4 flex flex-wrap items-center gap-2">
136138
<span class="inline-flex items-center gap-2 rounded-full border-2 border-[#2A1155] bg-[#EDE9FE] px-4 py-1 font-mono text-xs font-extrabold uppercase tracking-wider text-[#7C3AED] dark:border-purple-400/40 dark:bg-purple-950/60 dark:text-purple-200 hand-border shadow-sketch-sm">
@@ -239,22 +241,16 @@ const faqNode = faqSchema(extractFaqsFromPortableText(podcast.content));
239241
)
240242
}
241243

242-
<ExcalidrawBlueprintCard
243-
title={podcast.title}
244-
kind="podcast"
245-
tags={guests.map((g) => g.title)}
246-
/>
247-
248244
<div class="my-4 md:my-8">
249245
<PortableTextContent
250246
value={podcast.content}
251-
class="mx-auto prose-violet lg:prose-xl"
247+
class="mx-auto prose-violet lg:prose-xl lg:max-w-4xl"
252248
/>
253249
</div>
254250

255251
{
256252
podcast.transcript?.summary && (
257-
<section class="duo-card hand-border mx-auto my-8 max-w-4xl p-6">
253+
<section class="duo-card hand-border my-8 p-6">
258254
<h2 class="mb-3 font-display text-xl font-black text-[#2A1155] dark:text-white">
259255
✏️ Episode Summary
260256
</h2>
@@ -264,9 +260,17 @@ const faqNode = faqSchema(extractFaqsFromPortableText(podcast.content));
264260
</section>
265261
)
266262
}
263+
264+
<ExcalidrawBlueprintCard
265+
title={podcast.title}
266+
kind="podcast"
267+
tags={guests.map((g) => g.title)}
268+
/>
267269
</article>
268270

269-
<PodcastPicks picks={podcast.pick} />
271+
<div class="mx-auto max-w-4xl">
272+
<PodcastPicks picks={podcast.pick} />
273+
</div>
270274

271275
{
272276
more.length > 0 && (

‎apps/site/src/pages/post/[slug].astro‎

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -121,9 +121,11 @@ const faqNode = faqSchema(extractFaqsFromPortableText(post.content));
121121
...(faqNode ? [faqNode] : []),
122122
]}
123123
>
124-
<Breadcrumbs links={[{ title: "Blog", href: "/blog" }, { title: post.title }]} />
124+
<div class="mx-auto max-w-4xl">
125+
<Breadcrumbs links={[{ title: "Blog", href: "/blog" }, { title: post.title }]} />
126+
</div>
125127

126-
<article class="min-w-0 max-w-full py-4">
128+
<article class="mx-auto min-w-0 max-w-4xl py-4">
127129
{/* Post Badge & Matched Official Vendor / Topic Logo Pills */}
128130
<div class="mb-4 flex flex-wrap items-center gap-2">
129131
<span class="inline-flex items-center gap-2 rounded-full border-2 border-[#2A1155] bg-[#EDE9FE] px-4 py-1 font-mono text-xs font-extrabold uppercase tracking-wider text-[#7C3AED] dark:border-purple-400/40 dark:bg-purple-950/60 dark:text-purple-200 hand-border shadow-sketch-sm">
@@ -210,6 +212,26 @@ const faqNode = faqSchema(extractFaqsFromPortableText(post.content));
210212
)
211213
}
212214

215+
<PortableTextContent
216+
value={post.content}
217+
class="mx-auto prose-violet lg:prose-xl lg:max-w-4xl"
218+
/>
219+
220+
{
221+
post.transcript?.summary && (
222+
<section class="duo-card hand-border my-8 p-6">
223+
<h2 class="mb-3 font-display text-xl font-black text-[#2A1155] dark:text-white">
224+
✏️ Video Summary
225+
</h2>
226+
<p class="leading-relaxed text-[#2A1155]/80 dark:text-slate-300">
227+
{post.transcript.summary}
228+
</p>
229+
</section>
230+
)
231+
}
232+
233+
<ExcalidrawBlueprintCard title={post.title} kind="post" />
234+
213235
{
214236
!post.youtube && (
215237
<section class="my-10 rounded-3xl border-2 border-[#2A1155] bg-[#FAF9FC] p-6 shadow-sketch dark:border-white/25 dark:bg-[#131B2E]">
@@ -234,26 +256,6 @@ const faqNode = faqSchema(extractFaqsFromPortableText(post.content));
234256
</section>
235257
)
236258
}
237-
238-
<ExcalidrawBlueprintCard title={post.title} kind="post" />
239-
240-
<PortableTextContent
241-
value={post.content}
242-
class="mx-auto prose-violet lg:prose-xl"
243-
/>
244-
245-
{
246-
post.transcript?.summary && (
247-
<section class="duo-card hand-border mx-auto my-8 max-w-4xl p-6">
248-
<h2 class="mb-3 font-display text-xl font-black text-[#2A1155] dark:text-white">
249-
✏️ Video Summary
250-
</h2>
251-
<p class="leading-relaxed text-[#2A1155]/80 dark:text-slate-300">
252-
{post.transcript.summary}
253-
</p>
254-
</section>
255-
)
256-
}
257259
</article>
258260

259261
{

0 commit comments

Comments
 (0)