feat(components): improve blog presentation and content structure and connect blog components with collections (#642)

Author: SebastianSchuetze

.codex/environments/environment.toml

@@ -0,0 +1,29 @@
+# THIS IS AUTOGENERATED. DO NOT EDIT MANUALLY
+version = 1
+name = "website"
+
+[setup]
+script = ""
+
+[[actions]]
+name = "Run"
+icon = "run"
+command = '''
+pnpm install
+pnpm dev
+'''
+
+[[actions]]
+name = "run unit tests"
+icon = "test"
+command = "pnpm tests --project=unit"
+
+[[actions]]
+name = "run integration tests"
+icon = "test"
+command = "pnpm tests --project=integration"
+
+[[actions]]
+name = "run storybook tests"
+icon = "test"
+command = "pnpm tests --project=storybook"

.vscode/extensions.json

@@ -7,7 +7,6 @@
     "ms-vscode.vscode-typescript-next",
     "ms-vsliveshare.vsliveshare",
     "bradlc.vscode-tailwindcss",
-    "GitHub.copilot",
     "GitHub.copilot-chat",
     "GitHub.vscode-pull-request-github",
     "github.vscode-github-actions",

docs/datamodel/er-mvp.md

@@ -8,6 +8,7 @@ erDiagram
 
     BasicUsers {
         text id PK "UUID, auto by Payload"
+        text stableId "Stable seed identifier, unique"
         text supabaseUserId "Supabase user id, unique, set by auth hook"
         text firstName "Given name, required"
         text lastName "Family name, required"
@@ -324,9 +325,10 @@ erDiagram
 
     PlatformContentMedia {
         text id PK "UUID, auto by Payload"
+        text stableId "Stable seed identifier, unique"
         text alt "Screen-reader alt text, required"
         richText caption "Optional caption"
-        relationship createdBy FK "Uploader (BasicUsers), auto-set"
+        relationship createdBy FK "Uploader (BasicUsers), auto-set, required"
         text storagePath "Resolved storage path, readOnly"
         text prefix "S3 prefix, readOnly"
         upload file "Platform-managed media asset"
@@ -339,7 +341,7 @@ erDiagram
         text title "Post title, required"
         text slug "System: generated, unique"
         relationship tags FK "Relationship to Tags, hasMany"
-        upload heroImage FK "Relationship to PlatformContentMedia"
+        upload heroImage FK "Relationship to PlatformContentMedia, required"
         richText content "Article rich text, required"
         text excerpt "SEO/meta summary, required"
         relationship relatedPosts FK "Self-relationship, hasMany"

public/images/avatar-placeholder.svg

@@ -160,8 +160,7 @@
   --text-size-72: 4.5rem; /* 72px */
   --text-size-72--line-height: 1.1389; /* 82px */
 
-  /* Next.js `next/font` injects `--font-dm-sans` via `src/app/(frontend)/layout.tsx` (dmSans.variable). */
-  --font-sans: var(--font-dm-sans);
+  --font-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
   /* Radius scale with semantic naming (--radius = medium/base) */
   --radius-xs: calc(var(--radius) * 0.25); /* 0.125rem = 2px */

public/images/blog-placeholder-1600-900.svg

@@ -1,8 +1,7 @@
 import type { Metadata } from 'next'
 
-import { cn } from '@/utilities/ui'
-import { DM_Sans } from 'next/font/google'
 import React from 'react'
+import '@fontsource/dm-sans'
 
 import { AdminBar } from '@/components/organisms/AdminBar'
 import { Footer } from '@/components/templates/Footer/Component'
@@ -17,12 +16,6 @@ import { getCachedGlobal } from '@/utilities/getGlobals'
 import { normalizeNavItems } from '@/utilities/normalizeNavItems'
 import type { Footer as FooterType, Header as HeaderType } from '@/payload-types'
 
-const dmSans = DM_Sans({
-  subsets: ['latin'],
-  variable: '--font-dm-sans',
-  display: 'swap',
-})
-
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
   const { isEnabled } = await draftMode()
   const footerData: FooterType = await getCachedGlobal('footer', 1)()
@@ -32,7 +25,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
   const headerNavItems = normalizeNavItems(headerData)
 
   return (
-    <html className={cn(dmSans.variable)} lang="en" suppressHydrationWarning>
+    <html lang="en" suppressHydrationWarning>
       <head>
         <link href="/favicon.ico" rel="icon" sizes="32x32" />
         <link href="/favicon.svg" rel="icon" type="image/svg+xml" />

src/app/(frontend)/globals.css

@@ -11,15 +11,16 @@ import { LandingContact } from '@/components/organisms/Landing/LandingContact'
 import { BlogCardCollection } from '@/components/organisms/Blog/BlogCardCollection'
 import { FAQSection } from '@/components/organisms/FAQ'
 import { landingProcessPlaceholderStepImages } from '@/utilities/placeholders/landingProcess'
+import { normalizePost } from '@/utilities/blog/normalizePost'
+import { getPayload } from 'payload'
+import configPromise from '@payload-config'
 
 // TODO(homepage): Replace hardcoded copy and Storybook placeholder assets with Payload-driven content.
 // This route is currently a visual scaffold for layout work.
 
 import clinicHospitalExterior from '@/stories/assets/clinic-hospital-exterior.jpg'
-import blogBackground from '@/stories/assets/blog-background.jpg'
 import featureBackground from '@/stories/assets/feature-background.jpg'
 import ph80x80 from '@/stories/assets/placeholder-80-80.svg'
-import ph270x292 from '@/stories/assets/placeholder-270-292.svg'
 // TODO: Temporary fixtures for layout; replace with Payload data.
 import {
   clinicCategoriesData,
@@ -29,6 +30,32 @@ import {
 } from '@/stories/fixtures/listings'
 
 export default async function Home() {
+  // Fetch latest 3 blog posts for homepage
+  const payload = await getPayload({ config: configPromise })
+  const posts = await payload.find({
+    collection: 'posts',
+    depth: 1,
+    limit: 3,
+    overrideAccess: false,
+    select: {
+      title: true,
+      slug: true,
+      excerpt: true,
+      content: true,
+      categories: true,
+      populatedAuthors: true,
+      publishedAt: true,
+      heroImage: true,
+      meta: {
+        image: true,
+        description: true,
+      },
+    },
+    sort: '-publishedAt',
+  })
+
+  const normalizedPosts = posts.docs.map(normalizePost)
+
   return (
     <main>
       <LandingHero
@@ -140,43 +167,13 @@ export default async function Home() {
         defaultOpenItemId={homepageFaqSection.defaultOpenItemId}
       />
 
-      <BlogCardCollection
-        variant="blue"
-        intro="Stay informed with the latest healthcare insights, medical trends, and expert advice from our team of professionals."
-        background={{
-          media: {
-            src: blogBackground,
-            alt: '',
-            imgClassName: 'opacity-20',
-            priority: false,
-          },
-          overlay: {
-            kind: 'none',
-          },
-        }}
-        posts={[
-          {
-            title: 'Top 5 Medical Trends in 2024',
-            dateLabel: '15 Jan 2024',
-            excerpt: 'Discover the latest innovations shaping the future of healthcare and patient support systems.',
-            image: { src: ph270x292, alt: 'Medical Trends' },
-          },
-          {
-            title: 'How to Choose the Right Specialist',
-            dateLabel: '02 Feb 2024',
-            excerpt:
-              'A comprehensive guide on what to look for when selecting a medical professional for your specific needs.',
-            image: { src: ph270x292, alt: 'Choosing a Specialist' },
-          },
-          {
-            title: 'The Importance of Regular Checkups',
-            dateLabel: '10 Mar 2024',
-            excerpt:
-              'Why preventative care is crucial for long-term health and how often you should really be seeing your doctor.',
-            image: { src: ph270x292, alt: 'Regular Checkups' },
-          },
-        ]}
-      />
+      {normalizedPosts.length > 0 && (
+        <BlogCardCollection
+          title="From our blog"
+          intro="Explore practical insights, expert perspectives, and the latest topics across health and medicine."
+          posts={normalizedPosts}
+        />
+      )}
 
       <LandingContact
         title="Contact"

src/app/(frontend)/layout.tsx

@@ -108,8 +108,10 @@ export default function ClinicLandingPage() {
       <BlogCardCollection
         posts={clinicBlogData.map((p) => ({
           title: p.title,
+          href: `/posts/${p.title.toLowerCase().replace(/\s+/g, '-')}`,
           excerpt: p.excerpt,
           dateLabel: p.date,
+          readTime: '5 Min. Lesezeit',
           image: p.image ? { src: p.image, alt: p.title } : undefined,
         }))}
       />

src/app/(frontend)/page.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import React from 'react'
+
+import { PostActionBar, type PostActionBarProps } from '@/components/molecules/PostActionBar'
+import { sharePostUrl } from '@/utilities/blog/sharePostUrl'
+
+type PostShareActionBarProps = {
+  shareUrl?: string
+  shareTitle?: string
+  shareDescription?: string
+  backLink?: PostActionBarProps['backLink']
+  shareLabel?: string
+}
+
+export const PostShareActionBar: React.FC<PostShareActionBarProps> = ({
+  shareUrl,
+  shareTitle,
+  shareDescription,
+  backLink,
+  shareLabel = 'Share',
+}) => {
+  const handleShare = React.useCallback(async () => {
+    await sharePostUrl({
+      url: shareUrl,
+      title: shareTitle,
+      description: shareDescription,
+    })
+  }, [shareDescription, shareTitle, shareUrl])
+
+  return <PostActionBar backLink={backLink} shareButton={{ label: shareLabel, onClick: handleShare }} />
+}