Update post to show breadcrumbs and date (#9)

* Show post title in page title

* Add date and breadcrumbs to post

* Increase post line height

* Show date for post on home

* Format date in DD MMM YYYY format

Author: shaunmolloy

cms/content/post/website-launch.md

@@ -1,5 +1,6 @@
 ---
 title: Website launch
+date: 2026-01-19
 ---
 
 In the past week I've launched this website. It's structured as a monorepo with cms and web projects. Not only does this separate concerns, it will allow me to add or replace a project if needed.

web/src/App.css

@@ -18,7 +18,7 @@
 }
 
 h1 {
-  font-size: clamp(2rem, 4vw, 3rem);
+  font-size: clamp(1.5rem, 4vw, 2rem);
   margin: 0;
   letter-spacing: -0.02em;
 }
@@ -99,6 +99,7 @@ h1 {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
+  gap: 16px;
 }
 
 .section-header h2 {

web/src/Home.tsx

@@ -1,6 +1,7 @@
+import { Link } from 'react-router-dom'
 import { ArrowTopRightIcon } from '@radix-ui/react-icons'
 import * as Separator from '@radix-ui/react-separator'
-import { Link } from 'react-router-dom'
+import { formatPostDate } from './utils'
 import { links, posts, projects } from './data'
 
 function Hero() {
@@ -36,18 +37,23 @@ function Posts() {
         */}
       </div>
       <div className="list">
-        {posts.map((post) => (
-          <article key={post.slug} className="list-item">
-            <div>
-              <h3>
-                <Link to={`/posts/${post.slug}`}>
-                  {post.title} <ArrowTopRightIcon aria-hidden="true" />
-                </Link>
-              </h3>
-              <p>{post.description}</p>
-            </div>
-          </article>
-        ))}
+        {posts.map((post) => {
+          const postDate = formatPostDate(post.date)
+
+          return (
+            <article key={post.slug} className="list-item">
+              <div>
+                <h3>
+                  <Link to={`/posts/${post.slug}`}>
+                    {post.title} <ArrowTopRightIcon aria-hidden="true" />
+                  </Link>
+                </h3>
+                <p>{post.description}</p>
+              </div>
+              {postDate ? <span className="meta">{postDate}</span> : null}
+            </article>
+          )
+        })}
       </div>
     </section>
   )

web/src/Post.css

@@ -0,0 +1,43 @@
+.breadcrumbs {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 0.85rem;
+  letter-spacing: 0.04em;
+  color: #7f8693;
+}
+
+.breadcrumbs-separator {
+  color: #343a44;
+}
+
+.post-header {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin-bottom: 24px;
+}
+
+.post-header .breadcrumbs {
+  margin-bottom: 24px;
+}
+
+.post-title {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.post-body {
+  font-size: 1rem;
+  line-height: 2;
+  color: #c7cbd3;
+}
+
+.post-body p {
+  margin: 0 0 20px;
+}
+
+.post-body p:last-child {
+  margin-bottom: 0;
+}

web/src/Post.tsx

@@ -1,9 +1,18 @@
+import { useEffect } from 'react'
 import { Link, useParams } from 'react-router-dom'
 import { posts } from './data'
+import { formatPostDate } from './utils'
+import './Post.css'
 
 function Post() {
   const { slug } = useParams()
   const post = posts.find((entry) => entry.slug === slug)
+  const postDate = formatPostDate(post?.date)
+
+  useEffect(() => {
+    if (!post) return
+    document.title = `${post.title} - Shaun Molloy`
+  }, [post])
 
   if (!post) {
     return (
@@ -19,11 +28,20 @@ function Post() {
 
   return (
     <section className="section section--thin">
-      <div className="section-header">
-        <h1>{post.title}</h1>
-        <Link className="muted-link" to="/">
-          Back to home
-        </Link>
+      <div className="post-header">
+        <nav className="breadcrumbs" aria-label="Breadcrumb">
+          <Link className="muted-link" to="/">
+            Home
+          </Link>
+          <span className="breadcrumbs-separator" aria-hidden="true">
+            /
+          </span>
+          <span className="breadcrumbs-current">Posts</span>
+        </nav>
+        <div className="post-title">
+          <h1>{post.title}</h1>
+          {postDate ? <p className="meta">{postDate}</p> : null}
+        </div>
       </div>
       <div className="post-body">
         {post.content.split(/\n\s*\n/).map((paragraph, index) => (

web/src/data.ts

@@ -24,8 +24,10 @@ const parseFrontmatter = (content: string): PostFrontmatter => {
   }
 
   const titleMatch = frontmatterMatch[1].match(/title:\s*['"]?(.+?)['"]?\s*$/m)
+  const dateMatch = frontmatterMatch[1].match(/date:\s*['"]?(.+?)['"]?\s*$/m)
   return {
     title: titleMatch?.[1]?.trim() ?? 'Untitled',
+    date: dateMatch?.[1]?.trim(),
   }
 }
 
@@ -39,6 +41,7 @@ export const posts: PostEntry[] = Object.entries(postModules).map(([path, conten
   return {
     slug,
     title: frontmatter.title,
+    date: frontmatter.date,
     description: '',
     content: stripFrontmatter(content).trim(),
   }

web/src/types.ts

@@ -1,10 +1,12 @@
 export type PostFrontmatter = {
   title: string
+  date?: string
 }
 
 export type PostEntry = {
   slug: string
   title: string
+  date?: string
   description: string
   content: string
 }

web/src/utils.ts

@@ -0,0 +1,18 @@
+export const formatPostDate = (value?: string) => {
+  if (!value) return null
+
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return null
+
+  const parts = new Intl.DateTimeFormat('en-GB', {
+    day: '2-digit',
+    month: 'short',
+    year: 'numeric',
+  }).formatToParts(date)
+
+  const day = parts.find((part) => part.type === 'day')?.value
+  const month = parts.find((part) => part.type === 'month')?.value
+  const year = parts.find((part) => part.type === 'year')?.value
+
+  return day && month && year ? `${day} ${month} ${year}` : null
+}