mobile ; heading scroll broken
This commit is contained in:
116
src/app/page.tsx
116
src/app/page.tsx
@@ -102,26 +102,30 @@ 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">{blogOwner}'s Blog</h1>
|
||||
<input
|
||||
type="text"
|
||||
value={search}
|
||||
onChange={e => setSearch(e.target.value)}
|
||||
placeholder="Suche nach Titel, Tag oder Text..."
|
||||
className="border rounded px-4 py-2 w-full md:w-80"
|
||||
/>
|
||||
<main className="container mx-auto px-3 sm:px-4 py-4 sm:py-8">
|
||||
{/* Mobile-first header section */}
|
||||
<div className="mb-6 sm:mb-8 space-y-4 sm:space-y-0 sm:flex sm:flex-row sm:gap-4 sm:items-center sm:justify-between">
|
||||
<h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-center sm:text-left">{blogOwner}'s Blog</h1>
|
||||
<div className="w-full sm:w-auto">
|
||||
<input
|
||||
type="text"
|
||||
value={search}
|
||||
onChange={e => setSearch(e.target.value)}
|
||||
placeholder="Suche nach Titel, Tag oder Text..."
|
||||
className="w-full sm:w-80 border border-gray-300 rounded-lg px-4 py-3 text-base focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search Results Section */}
|
||||
{search.trim() && (
|
||||
<div className="mb-10">
|
||||
<h2 className="text-2xl font-bold mb-4">Suchergebnisse</h2>
|
||||
<div className="grid gap-8">
|
||||
<div className="mb-8 sm:mb-10">
|
||||
<h2 className="text-xl sm:text-2xl font-bold mb-4">Suchergebnisse</h2>
|
||||
<div className="grid gap-4 sm:gap-8">
|
||||
{(() => {
|
||||
const posts = filterPosts(collectPosts(tree));
|
||||
if (posts.length === 0) {
|
||||
return <div className="text-gray-500">Keine Beiträge gefunden.</div>;
|
||||
return <div className="text-gray-500 text-center py-8">Keine Beiträge gefunden.</div>;
|
||||
}
|
||||
return posts.map((post: any) => {
|
||||
// Determine folder path from slug
|
||||
@@ -130,38 +134,38 @@ export default function Home() {
|
||||
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="sm:border sm:border-gray-200 sm:rounded-lg p-4 sm:p-6 hover:shadow-lg transition-shadow relative sm:bg-white">
|
||||
{post.pinned && (
|
||||
<span className="absolute top-4 right-4 text-2xl" title="Pinned">📌</span>
|
||||
<span className="absolute top-3 right-3 sm:top-4 sm:right-4 text-xl sm:text-2xl" title="Pinned">📌</span>
|
||||
)}
|
||||
<Link href={`/posts/${post.slug}`}>
|
||||
<h2 className="text-2xl font-semibold mb-2">{post.title}</h2>
|
||||
<Link href={`/posts/${post.slug}`} className="block">
|
||||
<h2 className="text-lg sm:text-xl md:text-2xl font-semibold mb-2 pr-8 sm:pr-12">{post.title}</h2>
|
||||
{folderPath && (
|
||||
<div className="text-xs text-gray-400 mb-1">in <span className="font-mono">{folderPath}</span></div>
|
||||
<div className="text-xs text-gray-400 mb-2">in <span className="font-mono">{folderPath}</span></div>
|
||||
)}
|
||||
<div className="text-gray-600 mb-4">
|
||||
<div className="text-sm sm:text-base text-gray-600 mb-3 sm: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>
|
||||
<span className="text-xl sm:text-2xl animate-spin mr-2">⚙️</span>
|
||||
<span className="text-xl sm:text-2xl animate-spin-reverse">⚙️</span>
|
||||
</div>
|
||||
<div className="text-xl font-bold mt-2">In Bearbeitung</div>
|
||||
<div className="text-lg sm: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">
|
||||
<p className="text-gray-700 mb-3 sm:mb-4 text-sm sm:text-base">{post.summary}</p>
|
||||
<div className="flex flex-wrap gap-1 sm: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' : ''}`}
|
||||
className={`bg-gray-100 text-gray-800 px-2 sm:px-3 py-1 rounded-full text-xs sm:text-sm ${isMatch ? 'bg-yellow-200 font-bold' : ''}`}
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
@@ -176,66 +180,72 @@ export default function Home() {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Normal Content (folders and posts) only if not searching */}
|
||||
{!search.trim() && (
|
||||
<>
|
||||
<nav className="mb-6 text-sm text-gray-600 flex gap-2 items-center">
|
||||
{breadcrumbs.map((bc, idx) => (
|
||||
<span key={bc.name} className="flex items-center">
|
||||
{idx > 0 && <span className="mx-1">/</span>}
|
||||
<button
|
||||
className="hover:underline"
|
||||
onClick={() => setCurrentPath(bc.path)}
|
||||
disabled={idx === breadcrumbs.length - 1}
|
||||
>
|
||||
{bc.name}
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
{/* Mobile-friendly breadcrumbs */}
|
||||
<nav className="mb-4 sm:mb-6 text-sm text-gray-600">
|
||||
<div className="flex flex-wrap gap-1 sm:gap-2 items-center">
|
||||
{breadcrumbs.map((bc, idx) => (
|
||||
<span key={bc.name} className="flex items-center">
|
||||
{idx > 0 && <span className="mx-1 text-gray-400">/</span>}
|
||||
<button
|
||||
className="hover:underline px-1 py-1 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
onClick={() => setCurrentPath(bc.path)}
|
||||
disabled={idx === breadcrumbs.length - 1}
|
||||
>
|
||||
{bc.name}
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</nav>
|
||||
<div className="grid gap-8">
|
||||
|
||||
<div className="grid gap-4 sm:gap-8">
|
||||
{/* Folders */}
|
||||
{nodes.filter((n) => n.type === 'folder').map((folder: any) => (
|
||||
<div
|
||||
key={folder.path}
|
||||
className="border rounded-lg p-6 bg-gray-50 cursor-pointer hover:bg-gray-100 transition"
|
||||
className="sm:border sm:border-gray-200 sm:rounded-lg p-4 sm:p-6 bg-gray-50 cursor-pointer hover:bg-gray-100 transition-colors"
|
||||
onClick={() => setCurrentPath([...currentPath, folder.name])}
|
||||
>
|
||||
<span className="font-semibold text-lg">📁 {folder.name}</span>
|
||||
<span className="font-semibold text-base sm:text-lg">📁 {folder.name}</span>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Posts */}
|
||||
{(() => {
|
||||
const posts = nodes.filter((n) => n.type === 'post');
|
||||
const pinnedPosts = posts.filter((post: any) => post.pinned);
|
||||
const unpinnedPosts = posts.filter((post: any) => !post.pinned);
|
||||
return [...pinnedPosts, ...unpinnedPosts].map((post: any) => (
|
||||
<article key={post.slug} className="border rounded-lg p-6 hover:shadow-lg transition-shadow relative">
|
||||
<article key={post.slug} className="sm:border sm:border-gray-200 sm:rounded-lg p-4 sm:p-6 hover:shadow-lg transition-shadow relative sm:bg-white">
|
||||
{post.pinned && (
|
||||
<span className="absolute top-4 right-4 text-2xl" title="Pinned">📌</span>
|
||||
<span className="absolute top-3 right-3 sm:top-4 sm:right-4 text-xl sm: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">
|
||||
<Link href={`/posts/${post.slug}`} className="block">
|
||||
<h2 className="text-lg sm:text-xl md:text-2xl font-semibold mb-2 pr-8 sm:pr-12">{post.title}</h2>
|
||||
<div className="text-sm sm:text-base text-gray-600 mb-3 sm: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>
|
||||
<span className="text-xl sm:text-2xl animate-spin mr-2">⚙️</span>
|
||||
<span className="text-xl sm:text-2xl animate-spin-reverse">⚙️</span>
|
||||
</div>
|
||||
<div className="text-xl font-bold mt-2">In Bearbeitung</div>
|
||||
<div className="text-lg sm: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">
|
||||
<p className="text-gray-700 mb-3 sm:mb-4 text-sm sm:text-base">{post.summary}</p>
|
||||
<div className="flex flex-wrap gap-1 sm:gap-2">
|
||||
{post.tags.map((tag: string) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm"
|
||||
className="bg-gray-100 text-gray-800 px-2 sm:px-3 py-1 rounded-full text-xs sm:text-sm"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user