Refactor Home component to display blog owner's name dynamically; add folder path display for posts and improve post rendering logic for better clarity and organization.

This commit is contained in:
2025-06-18 23:04:09 +02:00
parent e7f20fe0e6
commit 13c841adb8

View File

@@ -3,6 +3,7 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import Link from 'next/link'; import Link from 'next/link';
import { format } from 'date-fns'; import { format } from 'date-fns';
import React from 'react';
interface Post { interface Post {
type: 'post'; type: 'post';
@@ -30,6 +31,9 @@ export default function Home() {
const [currentPath, setCurrentPath] = useState<string[]>([]); const [currentPath, setCurrentPath] = useState<string[]>([]);
const [search, setSearch] = useState(''); const [search, setSearch] = useState('');
// Get blog owner from env
const blogOwner = process.env.NEXT_PUBLIC_BLOG_OWNER || 'Anonymous';
useEffect(() => { useEffect(() => {
loadTree(); loadTree();
const interval = setInterval(loadTree, 500); const interval = setInterval(loadTree, 500);
@@ -100,7 +104,7 @@ export default function Home() {
return ( return (
<main className="container mx-auto px-4 py-8"> <main className="container mx-auto px-4 py-8">
<div className="mb-8 flex flex-col md:flex-row gap-4 items-center justify-between"> <div className="mb-8 flex flex-col md:flex-row gap-4 items-center justify-between">
<h1 className="text-4xl font-bold mb-2 md:mb-0">Willkommen auf dem Blog!</h1> <h1 className="text-4xl font-bold mb-2 md:mb-0">{blogOwner}&apos;s Blog</h1>
<input <input
type="text" type="text"
value={search} value={search}
@@ -119,13 +123,22 @@ export default function Home() {
if (posts.length === 0) { if (posts.length === 0) {
return <div className="text-gray-500">Keine Beiträge gefunden.</div>; return <div className="text-gray-500">Keine Beiträge gefunden.</div>;
} }
return posts.map((post: any) => ( return posts.map((post: any) => {
// Determine folder path from slug
let folderPath = '';
if (post.slug.includes('/')) {
folderPath = post.slug.split('/').slice(0, -1).join('/');
}
return (
<article key={post.slug} className="border rounded-lg p-6 hover:shadow-lg transition-shadow relative"> <article key={post.slug} className="border rounded-lg p-6 hover:shadow-lg transition-shadow relative">
{post.pinned && ( {post.pinned && (
<span className="absolute top-4 right-4 text-2xl" title="Pinned">📌</span> <span className="absolute top-4 right-4 text-2xl" title="Pinned">📌</span>
)} )}
<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>
{folderPath && (
<div className="text-xs text-gray-400 mb-1">in <span className="font-mono">{folderPath}</span></div>
)}
<div className="text-gray-600 mb-4"> <div className="text-gray-600 mb-4">
{post.date ? ( {post.date ? (
<div>Veröffentlicht: {format(new Date(post.date), 'd. MMMM yyyy')}</div> <div>Veröffentlicht: {format(new Date(post.date), 'd. MMMM yyyy')}</div>
@@ -157,7 +170,8 @@ export default function Home() {
</div> </div>
</Link> </Link>
</article> </article>
)); );
});
})()} })()}
</div> </div>
</div> </div>