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 { 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,45 +123,55 @@ 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) => {
<article key={post.slug} className="border rounded-lg p-6 hover:shadow-lg transition-shadow relative"> // Determine folder path from slug
{post.pinned && ( let folderPath = '';
<span className="absolute top-4 right-4 text-2xl" title="Pinned">📌</span> if (post.slug.includes('/')) {
)} folderPath = post.slug.split('/').slice(0, -1).join('/');
<Link href={`/posts/${post.slug}`}> }
<h2 className="text-2xl font-semibold mb-2">{post.title}</h2> return (
<div className="text-gray-600 mb-4"> <article key={post.slug} className="border rounded-lg p-6 hover:shadow-lg transition-shadow relative">
{post.date ? ( {post.pinned && (
<div>Veröffentlicht: {format(new Date(post.date), 'd. MMMM yyyy')}</div> <span className="absolute top-4 right-4 text-2xl" title="Pinned">📌</span>
) : ( )}
<div className="flex flex-col items-center"> <Link href={`/posts/${post.slug}`}>
<div className="flex"> <h2 className="text-2xl font-semibold mb-2">{post.title}</h2>
<span className="text-2xl animate-spin mr-2">⚙️</span> {folderPath && (
<span className="text-2xl animate-spin-reverse">⚙️</span> <div className="text-xs text-gray-400 mb-1">in <span className="font-mono">{folderPath}</span></div>
</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 className="text-gray-600 mb-4">
</div> {post.date ? (
<p className="text-gray-700 mb-4">{post.summary}</p> <div>Veröffentlicht: {format(new Date(post.date), 'd. MMMM yyyy')}</div>
<div className="flex gap-2"> ) : (
{post.tags.map((tag: string) => { <div className="flex flex-col items-center">
const q = search.trim().toLowerCase(); <div className="flex">
const isMatch = q && tag.toLowerCase().includes(q); <span className="text-2xl animate-spin mr-2">⚙️</span>
return ( <span className="text-2xl animate-spin-reverse">⚙️</span>
<span </div>
key={tag} <div className="text-xl font-bold mt-2">In Bearbeitung</div>
className={`bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm ${isMatch ? 'bg-yellow-200 font-bold' : ''}`} </div>
> )}
{tag} <div>Erstellt: {format(new Date(post.createdAt), 'd. MMMM yyyy HH:mm')}</div>
</span> </div>
); <p className="text-gray-700 mb-4">{post.summary}</p>
})} <div className="flex gap-2">
</div> {post.tags.map((tag: string) => {
</Link> const q = search.trim().toLowerCase();
</article> 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>
</div> </div>