HangerThem/blog.hangerthem.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Post meta line fix on mobile

Browse source
This commit is contained in:
HangerThem 2026-08-03 20:49:41 +02:00
parent 6968646702
commit fa6c205838
1 changed files with 14 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
app/posts/[slug]/page.tsx
View file

@ -4,6 +4,7 @@ import { ShareLinks } from '@/components/post/ShareLinks'
import { TableOfContents } from '@/components/post/TableOfContents' import { TableOfContents } from '@/components/post/TableOfContents'
import { getAllPostSlugs, getNextAndPreviousPosts, getPostBySlug } from '@/lib/posts' import { getAllPostSlugs, getNextAndPreviousPosts, getPostBySlug } from '@/lib/posts'
import { slugify } from '@/utils/slug' import { slugify } from '@/utils/slug'
import { Pencil, SendHorizonal } from 'lucide-react'
import type { Metadata } from 'next' import type { Metadata } from 'next'
import Link from 'next/link' import Link from 'next/link'
@ -53,9 +54,12 @@ export default async function Post({ params }: { params: Promise<{ slug: string
</Link> </Link>
)} )}
<h1 className="text-4xl font-bold mb-4">{meta.title}</h1> <h1 className="text-4xl font-bold mb-4">{meta.title}</h1>
<div className="flex items-center gap-2 text-fg-dim mb-4 border-y border-border py-2 px-4 text-sm"> <div className="flex justify-between md:justify-normal items-center gap-2 text-fg-dim mb-4 border-y border-border py-2 px-2 md:px-4 text-sm">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span>Posted</span> <span className="hidden md:inline">Posted</span>
<span className="md:hidden">
<SendHorizonal className="w-3 h-3" />
</span>
<time <time
dateTime={meta.date} dateTime={meta.date}
title={new Date(meta.date).toLocaleString()} title={new Date(meta.date).toLocaleString()}
@ -63,16 +67,19 @@ export default async function Post({ params }: { params: Promise<{ slug: string
> >
{new Date(meta.date).toLocaleDateString(undefined, { {new Date(meta.date).toLocaleDateString(undefined, {
day: 'numeric', day: 'numeric',
month: 'long', month: 'short',
year: 'numeric', year: 'numeric',
})} })}
</time> </time>
</div> </div>
<span>&middot;</span> <span className="hidden md:inline">&middot;</span>
{meta.updated && ( {meta.updated && (
<> <>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span>Updated</span> <span className="hidden md:inline">Updated</span>
<span className="md:hidden">
<Pencil className="w-3 h-3" />
</span>
<time <time
dateTime={meta.updated} dateTime={meta.updated}
title={new Date(meta.updated).toLocaleString()} title={new Date(meta.updated).toLocaleString()}
@ -80,12 +87,12 @@ export default async function Post({ params }: { params: Promise<{ slug: string
> >
{new Date(meta.updated).toLocaleDateString(undefined, { {new Date(meta.updated).toLocaleDateString(undefined, {
day: 'numeric', day: 'numeric',
month: 'long', month: 'short',
year: 'numeric', year: 'numeric',
})} })}
</time> </time>
</div> </div>
<span>&middot;</span> <span className="hidden md:inline">&middot;</span>
</> </>
)} )}
<span>{meta.readingTimeText}</span> <span>{meta.readingTimeText}</span>