Step 7: Show the posts on your website

import { createServerFn } from '@tanstack/react-start'
import { content } from '../generated/content/areca'

/** Every post, newest first. Runs on the server only. */
export const getPosts = createServerFn({ method: 'GET' }).handler(async () => {
  return content.posts.all().map((post) => ({
    slug: post.slug,
    title: post.data.title,
    excerpt: post.data.excerpt ?? '',
    coverImage: post.data.coverImage || null,
  }))
})

/** One post by its slug, or null when there is no such post. */
export const getPost = createServerFn({ method: 'GET' })
  .validator((slug: string) => slug)
  .handler(async ({ data: slug }) => {
    const post = content.posts.get(slug)
    if (!post) return null
    return {
      title: post.data.title,
      excerpt: post.data.excerpt ?? '',
      coverImage: post.data.coverImage || null,
      body: post.data.body,
    }
  })

import { Markdown } from '@tanstack/markdown/react'
import type { MarkdownComponents } from '@tanstack/markdown/react'
import { richTextDocument } from '@areca-cms/site-sdk'
import type { RichTextValue } from '@areca-cms/site-sdk'
import { richTextComponents } from '@areca-cms/site-sdk/rich-text-react'

/** How each formatted part looks on your site. Change the classes to restyle. */
const components = {
  h2(props) {
    return <h2 {...props} className="mt-12 text-2xl font-semibold" />
  },
  p(props) {
    return <p {...props} className="mt-5 text-lg leading-8" />
  },
  a(props) {
    return <a {...props} className="underline" />
  },
  img(props) {
    return <img {...props} loading="lazy" className="mt-8 h-auto w-full rounded-xl" />
  },
} satisfies MarkdownComponents

export function ArticleBody({ body }: { body: RichTextValue }) {
  return (
    <div>
      <Markdown components={richTextComponents(components)}>
        {richTextDocument(body)}
      </Markdown>
    </div>
  )
}

import { createFileRoute, Link } from '@tanstack/react-router'
import { getPosts } from '../../lib/blog'

export const Route = createFileRoute('/blog/')({
  loader: () => getPosts(),
  component: BlogIndex,
})

function BlogIndex() {
  const posts = Route.useLoaderData()
  return (
    <main className="mx-auto max-w-3xl px-6 py-16">
      <h1 className="text-4xl font-semibold">Harbor & Pine news</h1>
      <ul className="mt-10 space-y-10">
        {posts.map((post) => (
          <li key={post.slug}>
            <Link
              to="/blog/$slug"
              params={{ slug: post.slug }}
              className="text-2xl font-semibold underline"
            >
              {post.title}
            </Link>
            <p className="mt-2 text-neutral-600">{post.excerpt}</p>
          </li>
        ))}
      </ul>
    </main>
  )
}

import { createFileRoute, Link, notFound } from '@tanstack/react-router'
import { ArticleBody } from '../../components/article-body'
import { getPost } from '../../lib/blog'

export const Route = createFileRoute('/blog/$slug')({
  loader: async ({ params }) => {
    const post = await getPost({ data: params.slug })
    if (!post) throw notFound()
    return post
  },
  component: PostPage,
})

function PostPage() {
  const post = Route.useLoaderData()
  const cover = post.coverImage
  return (
    <main className="mx-auto max-w-2xl px-6 py-16">
      <Link to="/blog" className="text-sm underline">
        Back to all posts
      </Link>
      <h1 className="mt-6 text-4xl font-semibold">{post.title}</h1>
      {cover ? (
        <img
          src={cover.url}
          alt={cover.alt}
          width={cover.width ?? undefined}
          height={cover.height ?? undefined}
          className="mt-8 h-auto w-full rounded-xl"
        />
      ) : null}
      <ArticleBody body={post.body} />
    </main>
  )
}

pnpm dev