rattatwinko/markdownblog
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance post date display with loading state for unpublished posts

Browse Source
This commit is contained in:
rattatwinko
2025-06-16 17:15:26 +02:00
parent 92fb64733b
commit da8822ec0e
3 changed files with 22 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
posts/folder/folder2.md Normal file
View File

12
src/app/page.tsx
View File

@@ -105,7 +105,17 @@ export default function Home() {
<Link href={`/posts/${post.slug}`}> <Link href={`/posts/${post.slug}`}>
<h2 className="text-2xl font-semibold mb-2">{post.title}</h2> <h2 className="text-2xl font-semibold mb-2">{post.title}</h2>
<div className="text-gray-600 mb-4"> <div className="text-gray-600 mb-4">
<div>Veröffentlicht: {format(new Date(post.date), 'd. MMMM yyyy')}</div> {post.date ? (
<div>Veröffentlicht: {format(new Date(post.date), 'd. MMMM yyyy')}</div>
) : (
<div className="flex flex-col items-center">
<div className="flex">
<span className="text-2xl animate-spin mr-2">⚙️</span>
<span className="text-2xl animate-spin-reverse">⚙️</span>
</div>
<div className="text-xl font-bold mt-2">In Bearbeitung</div>
</div>
)}
<div>Erstellt: {format(new Date(post.createdAt), 'd. MMMM yyyy HH:mm')}</div> <div>Erstellt: {format(new Date(post.createdAt), 'd. MMMM yyyy HH:mm')}</div>
</div> </div>
<p className="text-gray-700 mb-4">{post.summary}</p> <p className="text-gray-700 mb-4">{post.summary}</p>

12
src/app/posts/[...slug]/page.tsx
View File

@@ -53,7 +53,17 @@ export default function PostPage({ params }: { params: { slug: string[] } }) {
<h1 className="text-4xl font-bold mb-4">{post.title}</h1> <h1 className="text-4xl font-bold mb-4">{post.title}</h1>
<div className="text-gray-600 mb-8"> <div className="text-gray-600 mb-8">
<div>Veröffentlicht: {format(new Date(post.date), 'd. MMMM yyyy')}</div> {post.date ? (
<div>Veröffentlicht: {format(new Date(post.date), 'd. MMMM yyyy')}</div>
) : (
<div className="flex flex-col items-center">
<div className="flex">
<span className="text-2xl animate-spin mr-2">⚙️</span>
<span className="text-2xl animate-spin-reverse">⚙️</span>
</div>
<div className="text-xl font-bold mt-2">In Bearbeitung</div>
</div>
)}
<div>Erstellt: {format(new Date(post.createdAt), 'd. MMMM yyyy HH:mm')}</div> <div>Erstellt: {format(new Date(post.createdAt), 'd. MMMM yyyy HH:mm')}</div>
</div> </div>