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

Enhance blog layout and functionality; add social links configuration in .env.local, implement search functionality in Home component, and improve post page styling.

Browse Source
This commit is contained in:
rattatwinko
2025-06-18 19:27:05 +02:00
parent fcec794f13
commit c4af151d6c
5 changed files with 175 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
.env.local
View File

@@ -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 PORT=8080

14
src/app/api/admin/delete/route.ts
View File

@@ -28,19 +28,9 @@ export async function POST(request: NextRequest) {
// Construct the full path to the item // Construct the full path to the item
let fullPath: string; let fullPath: string;
if (type === 'post') { if (type === 'post') {
// For posts, we need to handle the .md extension fullPath = path.join(postsDir, itemPath || '', `${name}.md`);
if (itemPath) {
fullPath = path.join(postsDir, itemPath, `${name}.md`);
} else { } else {
fullPath = path.join(postsDir, `${name}.md`); fullPath = path.join(postsDir, itemPath || '', name);
}
} else {
// For folders, we don't add the .md extension
if (itemPath) {
fullPath = path.join(postsDir, itemPath, name);
} else {
fullPath = path.join(postsDir, name);
}
} }
console.log('Attempting to delete:', { console.log('Attempting to delete:', {

38
src/app/layout.tsx
View File

@@ -37,7 +37,7 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}) { }) {
return ( return (
<html lang="de"> <html lang="de" className="h-full">
<Head> <Head>
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
@@ -45,7 +45,8 @@ export default function RootLayout({
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" /> <link rel="manifest" href="/site.webmanifest" />
</Head> </Head>
<body className={inter.className}> <body className="h-full min-h-screen flex flex-col">
<div className="flex-1 flex flex-col">
<header className="bg-gray-100 p-4"> <header className="bg-gray-100 p-4">
<div className="container mx-auto flex flex-col md:flex-row justify-between items-center"> <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"> <div className="flex gap-2 justify-center md:justify-start w-full md:w-auto mb-2 md:mb-0">
@@ -54,27 +55,38 @@ export default function RootLayout({
<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/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" /> <img src="https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript" />
</div> </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"> <div className="flex gap-2 justify-center w-full md:w-auto mt-2 md:mt-0">
<HeaderButtons /> <HeaderButtons />
</div> </div>
</div> </div>
</header> </header>
{children} {children}
<footer className="bg-gray-100 p-2"> </div>
<div className="container mx-auto flex flex-col md:flex-row justify-between items-center"> <footer className="bg-gray-100 p-2 mt-auto">
<div className="text-center"> <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' }}> <span className="text-gray-500" style={{ fontSize: '12px' }}>
&copy; {new Date().getFullYear()} {blogOwner} &copy; {new Date().getFullYear()} {blogOwner}
</span> </span>
</div> </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> </div>
</footer> </footer>
</body> </body>

98
src/app/page.tsx
View File

@@ -28,6 +28,7 @@ type Node = Folder | Post;
export default function Home() { export default function Home() {
const [tree, setTree] = useState<Node[]>([]); const [tree, setTree] = useState<Node[]>([]);
const [currentPath, setCurrentPath] = useState<string[]>([]); const [currentPath, setCurrentPath] = useState<string[]>([]);
const [search, setSearch] = useState('');
useEffect(() => { useEffect(() => {
loadTree(); loadTree();
@@ -85,35 +86,44 @@ export default function Home() {
return posts; 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 ( return (
<main className="min-h-screen p-8 max-w-4xl mx-auto"> <main className="container mx-auto px-4 py-8">
<h1 className="text-4xl font-bold mb-8">{process.env.NEXT_PUBLIC_BLOG_OWNER + "'s" || 'Anonymous'} - Blog</h1> <div className="mb-8 flex flex-col md:flex-row gap-4 items-center justify-between">
<nav className="mb-6 text-sm text-gray-600 flex gap-2 items-center"> <h1 className="text-4xl font-bold mb-2 md:mb-0">Willkommen auf dem Blog!</h1>
{breadcrumbs.map((bc, idx) => ( <input
<span key={bc.path.join('/') + idx}> type="text"
{idx > 0 && <span className="mx-1">/</span>} value={search}
<button onChange={e => setSearch(e.target.value)}
className="hover:underline" placeholder="Suche nach Titel, Tag oder Text..."
onClick={() => setCurrentPath(bc.path)} className="border rounded px-4 py-2 w-full md:w-80"
disabled={idx === breadcrumbs.length - 1} />
> </div>
{bc.name} {/* Search Results Section */}
</button> {search.trim() && (
</span> <div className="mb-10">
))} <h2 className="text-2xl font-bold mb-4">Suchergebnisse</h2>
</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"> <div className="grid gap-8">
{pinnedPosts.map((post) => ( {(() => {
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"> <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> <span className="absolute top-4 right-4 text-2xl" title="Pinned">📌</span>
)}
<Link href={`/posts/${post.slug}`}> <Link href={`/posts/${post.slug}`}>
<h2 className="text-2xl font-semibold mb-2">{post.title}</h2> <h2 className="text-2xl font-semibold mb-2">{post.title}</h2>
<div className="text-gray-600 mb-4"> <div className="text-gray-600 mb-4">
@@ -132,23 +142,43 @@ export default function Home() {
</div> </div>
<p className="text-gray-700 mb-4">{post.summary}</p> <p className="text-gray-700 mb-4">{post.summary}</p>
<div className="flex gap-2"> <div className="flex gap-2">
{post.tags.map((tag: string) => ( {post.tags.map((tag: string) => {
const q = search.trim().toLowerCase();
const isMatch = q && tag.toLowerCase().includes(q);
return (
<span <span
key={tag} 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-3 py-1 rounded-full text-sm ${isMatch ? 'bg-yellow-200 font-bold' : ''}`}
> >
{tag} {tag}
</span> </span>
))} );
})}
</div> </div>
</Link> </Link>
</article> </article>
))} ));
</div>
</div>
);
})()} })()}
<hr className="border-t border-gray-200 my-8" /> </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"> <div className="grid gap-8">
{/* Folders */} {/* Folders */}
{nodes.filter((n) => n.type === 'folder').map((folder: any) => ( {nodes.filter((n) => n.type === 'folder').map((folder: any) => (
@@ -202,6 +232,8 @@ export default function Home() {
)); ));
})()} })()}
</div> </div>
</>
)}
</main> </main>
); );
} }

13
src/app/posts/[...slug]/page.tsx
View File

@@ -111,17 +111,16 @@ export default function PostPage({ params }: { params: { slug: string[] } }) {
} }
return ( 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"> <Link href="/" className="text-blue-600 hover:underline mb-8 inline-block">
← Zurück zu den Beiträgen ← Zurück zu den Beiträgen
</Link> </Link>
<h1 className="text-4xl font-bold mb-4 text-left">{post.title}</h1>
<h1 className="text-4xl font-bold mb-4">{post.title}</h1> <div className="text-gray-600 mb-8 text-left">
<div className="text-gray-600 mb-8">
{post.date ? ( {post.date ? (
<div>Veröffentlicht: {format(new Date(post.date), 'd. MMMM yyyy')}</div> <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"> <div className="flex">
<span className="text-2xl animate-spin mr-2">⚙️</span> <span className="text-2xl animate-spin mr-2">⚙️</span>
<span className="text-2xl animate-spin-reverse">⚙️</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>Erstellt: {format(new Date(post.createdAt), 'd. MMMM yyyy HH:mm')}</div>
</div> </div>
<div className="flex gap-2 mb-8"> <div className="flex gap-2 mb-8">
{post.tags.map((tag) => ( {post.tags.map((tag) => (
<span <span
@@ -142,9 +140,8 @@ export default function PostPage({ params }: { params: { slug: string[] } }) {
</span> </span>
))} ))}
</div> </div>
<div <div
className="prose prose-lg max-w-none" className="prose prose-lg max-w-full text-left"
dangerouslySetInnerHTML={{ __html: post.content }} dangerouslySetInnerHTML={{ __html: post.content }}
/> />
</article> </article>