From 13c841adb805fc91625bbcc7a78d9a57d665d8a7 Mon Sep 17 00:00:00 2001
From: rattatwinko <seppmutterman@gmail.com>
Date: Wed, 18 Jun 2025 23:04:09 +0200
Subject: [PATCH] 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.

---
 src/app/page.tsx | 92 ++++++++++++++++++++++++++++--------------------
 1 file changed, 53 insertions(+), 39 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 68dc616..5fb6a2c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -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>