yes

2025-06-16 19:43:23 +02:00
parent 1922125adb
commit b82f48ef4f
6 changed files with 674 additions and 180 deletions
--- a/posts/created-using-admingui.md
+++ b/posts/created-using-admingui.md
@@ -1,8 +0,0 @@
---
-title: created using adminGUI
-date: '2025-06-16'
-tags:
-  - admin
-summary: yeaa
---
-**this was created using the admin page**
--- a/posts/uploadtest.md
+++ b/posts/uploadtest.md
@@ -0,0 +1,12 @@
+---
+title: "Upload Test"
+date: "2025-05-16"
+tags: ["test", "feature"]
+summary: "A test post to demonstrate uploads"
+---
+
+# Upload Tests
+
+testing the uploading features
+
+![Markdown](https://img.shields.io/badge/markdown-%23000000.svg?style=for-the-badge&logo=markdown&logoColor=white)
--- a/src/app/admin/manage/page.tsx
+++ b/src/app/admin/manage/page.tsx
@@ -0,0 +1,268 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+
+interface Post {
+  type: 'post';
+  slug: string;
+  title: string;
+  date: string;
+  tags: string[];
+  summary: string;
+  content: string;
+}
+
+interface Folder {
+  type: 'folder';
+  name: string;
+  path: string;
+  children: (Post | Folder)[];
+}
+
+type Node = Post | Folder;
+
+export default function ManagePage() {
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [nodes, setNodes] = useState<Node[]>([]);
+  const [currentPath, setCurrentPath] = useState<string[]>([]);
+  const [deleteConfirm, setDeleteConfirm] = useState<{ show: boolean; item: Node | null }>({
+    show: false,
+    item: null,
+  });
+  const router = useRouter();
+
+  useEffect(() => {
+    // Check if already authenticated
+    const auth = localStorage.getItem('adminAuth');
+    if (auth === 'true') {
+      setIsAuthenticated(true);
+      loadContent();
+    } else {
+      router.push('/admin');
+    }
+  }, []);
+
+  const loadContent = async () => {
+    try {
+      const response = await fetch('/api/posts');
+      const data = await response.json();
+      setNodes(data);
+    } catch (error) {
+      console.error('Error loading content:', error);
+    }
+  };
+
+  const handleLogout = () => {
+    setIsAuthenticated(false);
+    localStorage.removeItem('adminAuth');
+    router.push('/admin');
+  };
+
+  // Get current directory contents
+  const getCurrentNodes = (): Node[] => {
+    let currentNodes: Node[] = nodes;
+    for (const segment of currentPath) {
+      const folder = currentNodes.find(
+        (n) => n.type === 'folder' && n.name === segment
+      ) as Folder | undefined;
+      if (folder) {
+        currentNodes = folder.children;
+      } else {
+        break;
+      }
+    }
+    return currentNodes;
+  };
+
+  const currentNodes = getCurrentNodes();
+
+  // Breadcrumbs
+  const breadcrumbs = [
+    { name: 'Root', path: [] },
+    ...currentPath.map((name, idx) => ({
+      name,
+      path: currentPath.slice(0, idx + 1),
+    })),
+  ];
+
+  const handleDelete = async (node: Node) => {
+    setDeleteConfirm({ show: true, item: node });
+  };
+
+  const confirmDelete = async () => {
+    if (!deleteConfirm.item) return;
+
+    try {
+      const itemPath = currentPath.join('/');
+      const itemName = deleteConfirm.item.type === 'folder' ? deleteConfirm.item.name : deleteConfirm.item.slug;
+      
+      console.log('Deleting item:', {
+        path: itemPath,
+        name: itemName,
+        type: deleteConfirm.item.type
+      });
+
+      const response = await fetch('/api/admin/delete', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          path: itemPath,
+          name: itemName,
+          type: deleteConfirm.item.type,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Failed to delete item');
+      }
+
+      console.log('Delete successful:', data);
+      await loadContent();
+      setDeleteConfirm({ show: false, item: null });
+    } catch (error) {
+      console.error('Error deleting item:', error);
+      alert(error instanceof Error ? error.message : 'Error deleting item');
+    }
+  };
+
+  if (!isAuthenticated) {
+    return null; // Will redirect in useEffect
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-100 p-8">
+      <div className="max-w-6xl mx-auto">
+        <div className="flex justify-between items-center mb-8">
+          <div className="flex items-center gap-4">
+            <h1 className="text-3xl font-bold">Manage Content</h1>
+            <Link
+              href="/admin"
+              className="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300 transition-colors"
+            >
+              Back to Admin
+            </Link>
+          </div>
+          <button
+            onClick={handleLogout}
+            className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
+          >
+            Logout
+          </button>
+        </div>
+
+        {/* Breadcrumbs with back button */}
+        <div className="flex items-center gap-4 mb-6">
+          {currentPath.length > 0 && (
+            <button
+              onClick={() => setCurrentPath(currentPath.slice(0, -1))}
+              className="flex items-center gap-2 px-4 py-2 bg-gray-200 rounded hover:bg-gray-300 transition-colors"
+              title="Go back one level"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-5 w-5"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
+                  clipRule="evenodd"
+                />
+              </svg>
+              Back
+            </button>
+          )}
+          <div className="flex items-center gap-2">
+            {breadcrumbs.map((crumb, index) => (
+              <div key={crumb.path.join('/')} className="flex items-center">
+                {index > 0 && <span className="mx-2 text-gray-500">/</span>}
+                <button
+                  onClick={() => setCurrentPath(crumb.path)}
+                  className={`px-2 py-1 rounded ${
+                    index === breadcrumbs.length - 1
+                      ? 'bg-blue-100 text-blue-800'
+                      : 'hover:bg-gray-200'
+                  }`}
+                >
+                  {crumb.name}
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Content List */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {currentNodes.map((node) => (
+            <div
+              key={node.type === 'folder' ? node.name : node.slug}
+              className="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow"
+            >
+              <div className="flex justify-between items-start">
+                <div>
+                  <h3 className="font-bold">
+                    {node.type === 'folder' ? node.name : node.title}
+                  </h3>
+                  {node.type === 'post' && (
+                    <p className="text-sm text-gray-600">{node.date}</p>
+                  )}
+                </div>
+                <button
+                  onClick={() => handleDelete(node)}
+                  className="text-red-600 hover:text-red-800 p-2"
+                  title="Delete"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-5 w-5"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Delete Confirmation Modal */}
+        {deleteConfirm.show && (
+          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
+            <div className="bg-white p-6 rounded-lg shadow-xl">
+              <h3 className="text-lg font-bold mb-4">Confirm Delete</h3>
+              <p className="mb-4">
+                Are you sure you want to delete {deleteConfirm.item?.type === 'folder' ? 'folder' : 'post'} "{deleteConfirm.item?.type === 'folder' ? deleteConfirm.item.name : deleteConfirm.item?.title}"?
+              </p>
+              <div className="flex justify-end gap-4">
+                <button
+                  onClick={() => setDeleteConfirm({ show: false, item: null })}
+                  className="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={confirmDelete}
+                  className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
+                >
+                  Delete
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+} 
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -2,6 +2,7 @@

 import { useState, useEffect, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
+import Link from 'next/link';

 interface Post {
  slug: string;
@@ -46,6 +47,11 @@ export default function AdminPage() {
  });
  const [newFolderName, setNewFolderName] = useState('');
  const [isDragging, setIsDragging] = useState(false);
+  const [deleteConfirm, setDeleteConfirm] = useState<{ show: boolean; item: Node | null }>({
+    show: false,
+    item: null,
+  });
+  const [showManageContent, setShowManageContent] = useState(false);
  const router = useRouter();

  useEffect(() => {
@@ -220,12 +226,56 @@ export default function AdminPage() {
    loadContent();
  }, [currentPath]);

-  if (!isAuthenticated) {
+  const handleDelete = async (node: Node) => {
+    setDeleteConfirm({ show: true, item: node });
+  };
+
+  const confirmDelete = async () => {
+    if (!deleteConfirm.item) return;
+
+    try {
+      const itemPath = currentPath.join('/');
+      const itemName = deleteConfirm.item.type === 'folder' ? deleteConfirm.item.name : deleteConfirm.item.slug;
+      
+      console.log('Deleting item:', {
+        path: itemPath,
+        name: itemName,
+        type: deleteConfirm.item.type
+      });
+
+      const response = await fetch('/api/admin/delete', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          path: itemPath,
+          name: itemName,
+          type: deleteConfirm.item.type,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Failed to delete item');
+      }
+
+      console.log('Delete successful:', data);
+      await loadContent();
+      setDeleteConfirm({ show: false, item: null });
+    } catch (error) {
+      console.error('Error deleting item:', error);
+      alert(error instanceof Error ? error.message : 'Error deleting item');
+    }
+  };
+
  return (
-      <div className="min-h-screen flex items-center justify-center bg-gray-50">
-        <div className="max-w-md w-full space-y-8 p-8 bg-white rounded-lg shadow">
-          <h2 className="text-3xl font-bold text-center">Admin Login</h2>
-          <form onSubmit={handleLogin} className="space-y-6">
+    <div className="min-h-screen bg-gray-100 p-8">
+      {!isAuthenticated ? (
+        <div className="max-w-md mx-auto bg-white p-8 rounded-lg shadow-md">
+          <h1 className="text-2xl font-bold mb-6">Admin Login</h1>
+          <form onSubmit={handleLogin} className="space-y-4">
            <div>
              <label htmlFor="username" className="block text-sm font-medium text-gray-700">
                Username
@@ -235,7 +285,7 @@ export default function AdminPage() {
                id="username"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
-                className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2"
+                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                required
              />
            </div>
@@ -248,25 +298,20 @@ export default function AdminPage() {
                id="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
-                className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2"
+                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                required
              />
            </div>
            <button
              type="submit"
-              className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700"
+              className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
            >
              Login
            </button>
          </form>
        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen p-8 bg-gray-50">
-      <div className="max-w-4xl mx-auto">
+      ) : (
+        <div className="max-w-6xl mx-auto">
          <div className="flex justify-between items-center mb-8">
            <h1 className="text-3xl font-bold">Admin Dashboard</h1>
            <button
@@ -277,21 +322,47 @@ export default function AdminPage() {
            </button>
          </div>

-        {/* Breadcrumb Navigation */}
-        <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>}
+          {/* Breadcrumbs with back button */}
+          <div className="flex items-center gap-4 mb-6">
+            {currentPath.length > 0 && (
              <button
-                className="hover:underline"
-                onClick={() => setCurrentPath(bc.path)}
-                disabled={idx === breadcrumbs.length - 1}
+                onClick={() => setCurrentPath(currentPath.slice(0, -1))}
+                className="flex items-center gap-2 px-4 py-2 bg-gray-200 rounded hover:bg-gray-300 transition-colors"
+                title="Go back one level"
              >
-                {bc.name}
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-5 w-5"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+                Back
              </button>
-            </span>
+            )}
+            <div className="flex items-center gap-2">
+              {breadcrumbs.map((crumb, index) => (
+                <div key={crumb.path.join('/')} className="flex items-center">
+                  {index > 0 && <span className="mx-2 text-gray-500">/</span>}
+                  <button
+                    onClick={() => setCurrentPath(crumb.path)}
+                    className={`px-2 py-1 rounded ${
+                      index === breadcrumbs.length - 1
+                        ? 'bg-blue-100 text-blue-800'
+                        : 'hover:bg-gray-200'
+                    }`}
+                  >
+                    {crumb.name}
+                  </button>
+                </div>
              ))}
-        </nav>
+            </div>
+          </div>

          {/* Create Folder Form */}
          <div className="bg-white rounded-lg shadow p-6 mb-8">
@@ -431,7 +502,26 @@ export default function AdminPage() {
                ))}
            </div>
          </div>
+
+          <div className="w-full mt-12">
+            <button
+              className="w-full flex justify-center items-center bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow cursor-pointer text-3xl focus:outline-none"
+              onClick={() => setShowManageContent((v) => !v)}
+              aria-label={showManageContent ? 'Hide Manage Content' : 'Show Manage Content'}
+            >
+              <span>{showManageContent ? '▲' : '▼'}</span>
+            </button>
+            {showManageContent && (
+              <div className="mt-4 bg-white p-6 rounded-lg shadow text-center">
+                <p className="text-gray-600 mb-2">
+                  Delete posts and folders, manage your content structure
+                </p>
+                <a href="/admin/manage" className="text-blue-600 hover:underline">Go to Content Manager</a>
              </div>
+            )}
+          </div>
+        </div>
+      )}
    </div>
  );
 } 
--- a/src/app/api/admin/delete/route.ts
+++ b/src/app/api/admin/delete/route.ts
@@ -0,0 +1,116 @@
+import { NextRequest, NextResponse } from 'next/server';
+import fs from 'fs/promises';
+import path from 'path';
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { path: itemPath, name, type } = body;
+    
+    if (!name || !type) {
+      return NextResponse.json(
+        { error: 'Missing required parameters' },
+        { status: 400 }
+      );
+    }
+
+    // Construct the full path to the item
+    const basePath = process.cwd();
+    const postsDir = path.join(basePath, 'posts');
+    
+    // Ensure the posts directory exists
+    try {
+      await fs.access(postsDir);
+    } catch {
+      return NextResponse.json({ error: 'Posts directory not found' }, { status: 404 });
+    }
+
+    // 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`);
+      }
+    } 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:', {
+      basePath,
+      postsDir,
+      fullPath,
+      itemPath,
+      name,
+      type
+    });
+
+    // Check if the item exists
+    try {
+      await fs.access(fullPath);
+    } catch (error) {
+      console.error('Item not found:', fullPath);
+      return NextResponse.json({ 
+        error: 'Item not found',
+        details: {
+          path: fullPath,
+          itemPath,
+          name,
+          type
+        }
+      }, { status: 404 });
+    }
+
+    // For folders, check if it's empty
+    if (type === 'folder') {
+      try {
+        const files = await fs.readdir(fullPath);
+        if (files.length > 0) {
+          return NextResponse.json(
+            { error: 'Cannot delete non-empty folder' },
+            { status: 400 }
+          );
+        }
+      } catch (error) {
+        console.error('Error checking folder contents:', error);
+        return NextResponse.json(
+          { error: 'Error checking folder contents' },
+          { status: 500 }
+        );
+      }
+    }
+
+    // Delete the item
+    try {
+      await fs.rm(fullPath, { recursive: true, force: true });
+      return NextResponse.json({ 
+        success: true,
+        deleted: {
+          path: fullPath,
+          itemPath,
+          name,
+          type
+        }
+      });
+    } catch (error) {
+      console.error('Error deleting item:', error);
+      return NextResponse.json(
+        { error: 'Error deleting item' },
+        { status: 500 }
+      );
+    }
+  } catch (error) {
+    console.error('Error processing delete request:', error);
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+} 
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import './globals.css';
+import Link from 'next/link';

 const inter = Inter({ subsets: ['latin'] });

@@ -16,7 +17,22 @@ export default function RootLayout({
 }) {
  return (
    <html lang="de">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <header className="bg-gray-100 p-4">
+          <div className="container mx-auto flex justify-between items-center">
+            <div className="flex gap-2">
+              <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>
+            <Link href="/admin" className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full">
+              Admin Login
+            </Link>
+          </div>
+        </header>
+        {children}
+      </body>
    </html>
  );
 }