Enhance blog layout and functionality; add social links configuration in .env.local, implement search functionality in Home component, and improve post page styling.
This commit is contained in:
10
.env.local
10
.env.local
@@ -1,2 +1,10 @@
|
||||
NEXT_PUBLIC_BLOG_OWNER=Rattatwinko
|
||||
#---------------------------------------------------------------------#
|
||||
# In here you have to set your socials / links #
|
||||
#---------------------------------------------------------------------#
|
||||
NEXT_PUBLIC_BLOG_OWNER=Rattatwinko # Your Name goes here
|
||||
NEXT_ABOUT_ME_LINK="http://localhost:80" # Your WebPage goes here
|
||||
NEXT_SOCIAL_INSTAGRAM="http://instagram.com/rattatwinko" # Your Instagram Link goes here
|
||||
NEXT_SOCIAL_TWITTER="https://twitter.com/user" # I dont have Twitter , if you have put your user there.
|
||||
NEXT_SOCIAL_GITHUB_STATE="true" # I Have GitHub so this is True (if you dont then set this to false)
|
||||
NEXT_SOCIAL_GITHUB_LINK_IF_TRUE="http://github.com/ZockerKatze" #If you have GitHub then paste your link here
|
||||
PORT=8080
|
||||
@@ -28,19 +28,9 @@ export async function POST(request: NextRequest) {
|
||||
// Construct the full path to the item
|
||||
let fullPath: string;
|
||||
if (type === 'post') {
|
||||
// For posts, we need to handle the .md extension
|
||||
if (itemPath) {
|
||||
fullPath = path.join(postsDir, itemPath, `${name}.md`);
|
||||
} else {
|
||||
fullPath = path.join(postsDir, `${name}.md`);
|
||||
}
|
||||
fullPath = path.join(postsDir, itemPath || '', `${name}.md`);
|
||||
} else {
|
||||
// For folders, we don't add the .md extension
|
||||
if (itemPath) {
|
||||
fullPath = path.join(postsDir, itemPath, name);
|
||||
} else {
|
||||
fullPath = path.join(postsDir, name);
|
||||
}
|
||||
fullPath = path.join(postsDir, itemPath || '', name);
|
||||
}
|
||||
|
||||
console.log('Attempting to delete:', {
|
||||
|
||||
@@ -37,7 +37,7 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="de">
|
||||
<html lang="de" className="h-full">
|
||||
<Head>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
||||
@@ -45,36 +45,48 @@ export default function RootLayout({
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
</Head>
|
||||
<body className={inter.className}>
|
||||
<header className="bg-gray-100 p-4">
|
||||
<div className="container mx-auto flex flex-col md:flex-row justify-between items-center">
|
||||
<div className="flex gap-2 justify-center md:justify-start w-full md:w-auto mb-2 md:mb-0">
|
||||
<img src="https://img.shields.io/badge/markdown-%23000000.svg?style=for-the-badge&logo=markdown&logoColor=white" alt="Markdown" />
|
||||
<img src="https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white" alt="Next.js" />
|
||||
<img src="https://img.shields.io/badge/tailwindcss-%2338BDF8.svg?style=for-the-badge&logo=tailwind-css&logoColor=white" alt="Tailwind CSS" />
|
||||
<img src="https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript" />
|
||||
</div>
|
||||
<div className="flex gap-2 justify-center w-full md:w-auto mt-2 md:mt-0">
|
||||
<a href="https://instagram.com/rattatwinko" target="_blank" rel="noopener noreferrer">
|
||||
<img src="https://img.shields.io/badge/Instagram-%23E4405F.svg?style=for-the-badge&logo=Instagram&logoColor=white" alt="Instagram" />
|
||||
</a>
|
||||
<a href="https://github.com/ZockerKatze" target="_blank" rel="noopener noreferrer">
|
||||
<img src="https://img.shields.io/badge/GitHub-%23121011.svg?style=for-the-badge&logo=GitHub&logoColor=white" alt="GitHub" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex gap-2 justify-center w-full md:w-auto mt-2 md:mt-0">
|
||||
<HeaderButtons />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{children}
|
||||
<footer className="bg-gray-100 p-2">
|
||||
<div className="container mx-auto flex flex-col md:flex-row justify-between items-center">
|
||||
<div className="text-center">
|
||||
<span className="text-gray-500" style={{ fontSize: '12px' }}>
|
||||
© {new Date().getFullYear()} {blogOwner}
|
||||
</span>
|
||||
<body className="h-full min-h-screen flex flex-col">
|
||||
<div className="flex-1 flex flex-col">
|
||||
<header className="bg-gray-100 p-4">
|
||||
<div className="container mx-auto flex flex-col md:flex-row justify-between items-center">
|
||||
<div className="flex gap-2 justify-center md:justify-start w-full md:w-auto mb-2 md:mb-0">
|
||||
<img src="https://img.shields.io/badge/markdown-%23000000.svg?style=for-the-badge&logo=markdown&logoColor=white" alt="Markdown" />
|
||||
<img src="https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white" alt="Next.js" />
|
||||
<img src="https://img.shields.io/badge/tailwindcss-%2338BDF8.svg?style=for-the-badge&logo=tailwind-css&logoColor=white" alt="Tailwind CSS" />
|
||||
<img src="https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript" />
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 justify-center w-full md:w-auto mt-2 md:mt-0">
|
||||
<HeaderButtons />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{children}
|
||||
</div>
|
||||
<footer className="bg-gray-100 p-2 mt-auto">
|
||||
<div className="container mx-auto flex flex-col items-center md:flex-row md:justify-between gap-2">
|
||||
<div className="text-center w-full md:w-auto">
|
||||
<span className="text-gray-500" style={{ fontSize: '12px' }}>
|
||||
© {new Date().getFullYear()} {blogOwner}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex gap-2 justify-center w-full md:w-auto mt-2 md:mt-0">
|
||||
{process.env.NEXT_SOCIAL_GITHUB_STATE === "true" && process.env.NEXT_SOCIAL_GITHUB_LINK_IF_TRUE && (
|
||||
<a href={process.env.NEXT_SOCIAL_GITHUB_LINK_IF_TRUE.replace(/(^\"|\"$)/g, '')} target="_blank" rel="noopener noreferrer">
|
||||
<img src="https://img.shields.io/badge/GitHub-%23121011.svg?style=for-the-badge&logo=GitHub&logoColor=white" alt="GitHub" />
|
||||
</a>
|
||||
)}
|
||||
{process.env.NEXT_SOCIAL_INSTAGRAM && (
|
||||
<a href={process.env.NEXT_SOCIAL_INSTAGRAM.replace(/(^\"|\"$)/g, '')} target="_blank" rel="noopener noreferrer">
|
||||
<img src="https://img.shields.io/badge/Instagram-%23E4405F.svg?style=for-the-badge&logo=Instagram&logoColor=white" alt="Instagram" />
|
||||
</a>
|
||||
)}
|
||||
{process.env.NEXT_SOCIAL_TWITTER === "true" && process.env.NEXT_SOCIAL_TWITTER_LINK && (
|
||||
<a href={process.env.NEXT_SOCIAL_TWITTER_LINK.replace(/(^\"|\"$)/g, '')} target="_blank" rel="noopener noreferrer">
|
||||
<img src="https://img.shields.io/badge/Twitter-%231DA1F2.svg?style=for-the-badge&logo=Twitter&logoColor=white" alt="Twitter" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
202
src/app/page.tsx
202
src/app/page.tsx
@@ -28,6 +28,7 @@ type Node = Folder | Post;
|
||||
export default function Home() {
|
||||
const [tree, setTree] = useState<Node[]>([]);
|
||||
const [currentPath, setCurrentPath] = useState<string[]>([]);
|
||||
const [search, setSearch] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
loadTree();
|
||||
@@ -85,35 +86,120 @@ export default function Home() {
|
||||
return posts;
|
||||
}
|
||||
|
||||
// Filter posts by search
|
||||
function filterPosts(posts: Post[]): Post[] {
|
||||
if (!search.trim()) return posts;
|
||||
const q = search.trim().toLowerCase();
|
||||
return posts.filter(post =>
|
||||
post.title.toLowerCase().includes(q) ||
|
||||
post.summary.toLowerCase().includes(q) ||
|
||||
post.tags.some(tag => tag.toLowerCase().includes(q))
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="min-h-screen p-8 max-w-4xl mx-auto">
|
||||
<h1 className="text-4xl font-bold mb-8">{process.env.NEXT_PUBLIC_BLOG_OWNER + "'s" || 'Anonymous'} - Blog</h1>
|
||||
<nav className="mb-6 text-sm text-gray-600 flex gap-2 items-center">
|
||||
{breadcrumbs.map((bc, idx) => (
|
||||
<span key={bc.path.join('/') + idx}>
|
||||
{idx > 0 && <span className="mx-1">/</span>}
|
||||
<button
|
||||
className="hover:underline"
|
||||
onClick={() => setCurrentPath(bc.path)}
|
||||
disabled={idx === breadcrumbs.length - 1}
|
||||
>
|
||||
{bc.name}
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</nav>
|
||||
{/* Pinned posts at the top (only on root) */}
|
||||
{currentPath.length === 0 && (() => {
|
||||
const allPosts = collectPosts(tree);
|
||||
const pinnedPosts = allPosts.filter((post) => post.pinned);
|
||||
if (pinnedPosts.length === 0) return null;
|
||||
return (
|
||||
<div className="mb-8">
|
||||
<h2 className="text-2xl font-bold mb-4 flex items-center gap-2">📌 Pinned Posts</h2>
|
||||
<div className="grid gap-8">
|
||||
{pinnedPosts.map((post) => (
|
||||
<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>
|
||||
<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"
|
||||
/>
|
||||
</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">
|
||||
{(() => {
|
||||
const posts = filterPosts(collectPosts(tree));
|
||||
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">
|
||||
<span className="absolute top-4 right-4 text-2xl" title="Pinned">📌</span>
|
||||
{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>
|
||||
)}
|
||||
<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>
|
||||
)}
|
||||
{/* 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>
|
||||
))}
|
||||
</nav>
|
||||
<div className="grid 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"
|
||||
onClick={() => setCurrentPath([...currentPath, folder.name])}
|
||||
>
|
||||
<span className="font-semibold 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">
|
||||
{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">
|
||||
@@ -143,65 +229,11 @@ export default function Home() {
|
||||
</div>
|
||||
</Link>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
));
|
||||
})()}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
<hr className="border-t border-gray-200 my-8" />
|
||||
<div className="grid 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"
|
||||
onClick={() => setCurrentPath([...currentPath, folder.name])}
|
||||
>
|
||||
<span className="font-semibold 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">
|
||||
{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>
|
||||
)}
|
||||
<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) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</Link>
|
||||
</article>
|
||||
));
|
||||
})()}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -111,17 +111,16 @@ export default function PostPage({ params }: { params: { slug: string[] } }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<article className="min-h-screen p-8 max-w-4xl mx-auto">
|
||||
<article className="min-h-screen px-4 py-10 mx-auto md:mx-16 rounded-2xl shadow-lg">
|
||||
<Link href="/" className="text-blue-600 hover:underline mb-8 inline-block">
|
||||
← Zurück zu den Beiträgen
|
||||
</Link>
|
||||
|
||||
<h1 className="text-4xl font-bold mb-4">{post.title}</h1>
|
||||
<div className="text-gray-600 mb-8">
|
||||
<h1 className="text-4xl font-bold mb-4 text-left">{post.title}</h1>
|
||||
<div className="text-gray-600 mb-8 text-left">
|
||||
{post.date ? (
|
||||
<div>Veröffentlicht: {format(new Date(post.date), 'd. MMMM yyyy')}</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="flex flex-col items-start">
|
||||
<div className="flex">
|
||||
<span className="text-2xl animate-spin mr-2">⚙️</span>
|
||||
<span className="text-2xl animate-spin-reverse">⚙️</span>
|
||||
@@ -131,7 +130,6 @@ export default function PostPage({ params }: { params: { slug: string[] } }) {
|
||||
)}
|
||||
<div>Erstellt: {format(new Date(post.createdAt), 'd. MMMM yyyy HH:mm')}</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 mb-8">
|
||||
{post.tags.map((tag) => (
|
||||
<span
|
||||
@@ -142,9 +140,8 @@ export default function PostPage({ params }: { params: { slug: string[] } }) {
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="prose prose-lg max-w-none"
|
||||
className="prose prose-lg max-w-full text-left"
|
||||
dangerouslySetInnerHTML={{ __html: post.content }}
|
||||
/>
|
||||
</article>
|
||||
|
||||
Reference in New Issue
Block a user