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

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.

Browse Source
This commit is contained in:
rattatwinko
2025-06-18 23:04:09 +02:00
parent e7f20fe0e6
commit 13c841adb8
1 changed files with 53 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/app/page.tsx
View File

@@ -3,6 +3,7 @@
import { useEffect, useState } from 'react';
import Link from 'next/link';
import { format } from 'date-fns';
import React from 'react';
interface Post {
type: 'post';
@@ -30,6 +31,9 @@ export default function Home() {
const [currentPath, setCurrentPath] = useState<string[]>([]);
const [search, setSearch] = useState('');
// Get blog owner from env
const blogOwner = process.env.NEXT_PUBLIC_BLOG_OWNER || 'Anonymous';
useEffect(() => {
loadTree();
const interval = setInterval(loadTree, 500);
@@ -100,7 +104,7 @@ export default function Home() {
return (
<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">
<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
type="text"
value={search}
@@ -119,45 +123,55 @@ export default function Home() {
if (posts.length === 0) {
return <div className="text-gray-500">Keine Beiträge gefunden.</div>;
}
return posts.map((post: any) => (
<article key={post.slug} className="border rounded-lg p-6 hover:shadow-lg transition-shadow relative">
{post.pinned && (
<span className="absolute top-4 right-4 text-2xl" title="Pinned">📌</span>
)}
<Link href={`/posts/${post.slug}`}>
<h2 className="text-2xl font-semibold mb-2">{post.title}</h2>
<div className="text-gray-600 mb-4">
{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>
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">
{post.pinned && (
<span className="absolute top-4 right-4 text-2xl" title="Pinned">📌</span>
)}
<Link href={`/posts/${post.slug}`}>
<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>Erstellt: {format(new Date(post.createdAt), 'd. MMMM yyyy HH:mm')}</div>
</div>
<p className="text-gray-700 mb-4">{post.summary}</p>
<div className="flex gap-2">
{post.tags.map((tag: string) => {
const q = search.trim().toLowerCase();
const isMatch = q && tag.toLowerCase().includes(q);
return (
<span
key={tag}
className={`bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm ${isMatch ? 'bg-yellow-200 font-bold' : ''}`}
>
{tag}
</span>
);
})}
</div>
</Link>
</article>
));
<div className="text-gray-600 mb-4">
{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>
<p className="text-gray-700 mb-4">{post.summary}</p>
<div className="flex gap-2">
{post.tags.map((tag: string) => {
const q = search.trim().toLowerCase();
const isMatch = q && tag.toLowerCase().includes(q);
return (
<span
key={tag}
className={`bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm ${isMatch ? 'bg-yellow-200 font-bold' : ''}`}
>
{tag}
</span>
);
})}
</div>
</Link>
</article>
);
});
})()}
</div>
</div>