Merge pull request 'pinning' (#2) from pinning into main

Reviewed-on: http://10.0.0.13:3002/rattatwinko/markdownblog/pulls/2

Fuck this is a large PR ; if this flys then i will ejaculate to gay porn today.

.gitignore

@@ -1,3 +1,5 @@
 node_modules
 .next
 electron/dist
+posts/admin.json
+posts/admin.json.tmp

README.md

@@ -153,6 +153,19 @@ markdownblog/
 
 ---
 
+## 🔒 Admin Password Security
+
+- The admin password is stored securely using the bcrypt hashing algorithm (work factor 12, as recommended by [OWASP](https://cheatsheetseries.owasp.org/cheatsheets/Password_Storage_Cheat_Sheet.html)).
+- The hash is saved in `posts/admin.json`, which is excluded from git via `.gitignore`.
+- Password changes are written atomically to prevent file corruption.
+- If the password file is missing or corrupted, the default login is `admin`/`admin` (with a bcrypt hash generated at runtime).
+- Passwords longer than 72 bytes are rejected (bcrypt's safe max).
+- You can change the admin password from the admin dashboard after logging in.
+
+**Never share or commit your `posts/admin.json` file!**
+
+---
+
 ## 🌐 Favicon
 
 Place your favicon files (e.g., `favicon.ico`, `favicon-32x32.png`, `favicon-16x16.png`) in the `public` directory at the project root.  

hihihaha.TXT

@@ -0,0 +1,23 @@
+⠀⠀⠀⠀⡠⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⢄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⢀⠎⠀⠈⠢⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡠⠔⠁⠀⢣⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⡎⠀⠀⠀⠀⠑⡄⠀⠀⢠⠀⣤⡄⠀⠀⠀⠀⠀⠀⠀⢠⠊⠀⠀⠀⠀⠈⡄⠀⠀⠀⠀⠀⣠⣤⣤⣤⢄⠀⠀
+⠀⢰⠁⠀⠀⠀⠀⠀⠈⠢⡀⠈⡄⠀⠀⠉⠒⠄⡀⠀⠀⡠⠃⠀⠀⠀⠀⠀⠀⢃⠀⠀⠀⣴⣯⠟⠛⠻⡝⡗⡀⠀
+⠀⡌⠀⠀⠀⠀⠀⠀⠀⠀⠘⢄⡸⠦⠄⠀⠀⠀⠈⠢⡎⠀⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⠘⠿⠃⠀⠀⠀⠀⣿⣷
+⠀⡇⠀⠀⠀⠀⠀⠀⠀⢴⣊⣁⣀⣀⠤⠀⠀⠀⠀⠀⠈⠀⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⠀⠀⠀⠀⠀⢀⣤⣿⡿
+⠀⢰⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠇⠀⠀⠀⠀⠀⠀⠀⠀⣞⣿⢟⠁
+⠀⠈⢆⠀⠀⠀⠀⠀⡀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⣠⡤⠤⢤⠤⠄⠀⠀⠀⡜⠀⠀⠀⠀⠀⠀⠀⣼⣿⠀⠀⠀⠀
+⡀⠀⠈⢆⠀⠈⡟⠁⠈⣿⣿⣿⠁⠀⠀⠀⠀⢸⣿⣿⣷⠀⠀⡇⠀⠀⢀⠜⠀⠀⠀⠀⠀⠀⠀⣿⡇⠀⠀⠀⠀⠀
+⠻⡐⠒⠚⠓⠠⡅⠀⠀⣿⣿⣿⠀⠀⠀⠀⠀⠸⣿⣿⡏⠀⠀⣜⠀⠀⠉⠁⡼⠀⠀⠀⠀⠀⠀⠉⠁⠀⠀⠀⠀⠀
+⠀⠣⣀⡀⠀⠀⢧⠀⠀⠹⣿⠟⠀⣤⣀⠀⠀⠀⠻⠛⠁⠀⠀⠛⡀⠀⣠⠔⠁⠀⠀⠀⠀⠀⠀⣿⡟⠀⠀⠀⠀⠀
+⠀⠀⢠⠃⠘⠹⠔⠓⠀⠀⠀⢀⠀⠀⢀⠀⠀⣠⠀⠀⠀⠚⠭⠚⠁⠀⠈⢆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⢠⣃⣀⣀⣄⠀⠀⠀⠀⠀⠈⠑⠊⠁⠉⠉⠀⠀⠀⠀⠀⢀⡠⠤⠀⠤⠤⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠉⠒⡦⠤⢀⣀⠀⠀⠀⠀⠀⠀⠀⠐⢒⠊⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠈⠢⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⢀⣎⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⡆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠎⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢰⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠸⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⢰⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⡸⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+
+            Why are you gay?

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@tailwindcss/typography": "^0.5.16",
         "autoprefixer": "^10.4.17",
+        "bcrypt": "^6.0.0",
         "chokidar": "^4.0.3",
         "date-fns": "^3.3.1",
         "gray-matter": "^4.0.3",
@@ -22,6 +23,7 @@
         "tailwindcss": "^3.4.1"
       },
       "devDependencies": {
+        "@types/bcrypt": "^5.0.2",
         "@types/chokidar": "^1.7.5",
         "@types/node": "^20.11.19",
         "@types/react": "^18.2.57",
@@ -1100,6 +1102,16 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/bcrypt": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@types/bcrypt/-/bcrypt-5.0.2.tgz",
+      "integrity": "sha512-6atioO8Y75fNcbmj0G7UjI9lXN2pQ/IGJ2FWT4a/btd0Lk9lQalHLKhkgKVZ3r+spnmWUKfbMi1GEe9wyHQfNQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/cacheable-request": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/@types/cacheable-request/-/cacheable-request-6.0.3.tgz",
@@ -2382,6 +2394,29 @@
       ],
       "license": "MIT"
     },
+    "node_modules/bcrypt": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/bcrypt/-/bcrypt-6.0.0.tgz",
+      "integrity": "sha512-cU8v/EGSrnH+HnxV2z0J7/blxH8gq7Xh2JFT6Aroax7UohdmiJJlxApMxtKfuI7z68NvvVcmR78k2LbT6efhRg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "node-addon-api": "^8.3.0",
+        "node-gyp-build": "^4.8.4"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/bcrypt/node_modules/node-addon-api": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-8.4.0.tgz",
+      "integrity": "sha512-D9DI/gXHvVmjHS08SVch0Em8G5S1P+QWtU31appcKT/8wFSPRcdHadIFSAntdMMVM5zz+/DL+bL/gz3UDppqtg==",
+      "license": "MIT",
+      "engines": {
+        "node": "^18 || ^20 || >= 21"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -7378,6 +7413,17 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/node-gyp-build": {
+      "version": "4.8.4",
+      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.4.tgz",
+      "integrity": "sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==",
+      "license": "MIT",
+      "bin": {
+        "node-gyp-build": "bin.js",
+        "node-gyp-build-optional": "optional.js",
+        "node-gyp-build-test": "build-test.js"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.19",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@tailwindcss/typography": "^0.5.16",
     "autoprefixer": "^10.4.17",
+    "bcrypt": "^6.0.0",
     "chokidar": "^4.0.3",
     "date-fns": "^3.3.1",
     "gray-matter": "^4.0.3",
@@ -25,6 +26,7 @@
     "tailwindcss": "^3.4.1"
   },
   "devDependencies": {
+    "@types/bcrypt": "^5.0.2",
     "@types/chokidar": "^1.7.5",
     "@types/node": "^20.11.19",
     "@types/react": "^18.2.57",

posts/pinned.json

@@ -0,0 +1,3 @@
+[
+  "welcome"
+]

src/app/AboutButton.tsx

@@ -0,0 +1,20 @@
+'use client';
+import BadgeButton from './BadgeButton';
+
+const InfoIcon = (
+  <svg width="16" height="16" fill="white" viewBox="0 0 16 16" aria-hidden="true">
+    <circle cx="8" cy="8" r="8" fill="#2563eb"/>
+    <text x="8" y="12" textAnchor="middle" fontSize="9" fill="white" fontWeight="bold" alignmentBaseline="middle">i</text>
+  </svg>
+);
+
+export default function AboutButton() {
+  return (
+    <BadgeButton
+      label="ABOUT ME"
+      color="#2563eb"
+      icon={InfoIcon}
+      onClick={() => window.open('http://' + window.location.hostname + ':80', '_blank')}
+    />
+  );
+}

src/app/BadgeButton.tsx

@@ -0,0 +1,31 @@
+"use client";
+import React from 'react';
+
+export default function BadgeButton({
+  label,
+  color = '#2563eb',
+  icon,
+  onClick,
+}: {
+  label: string;
+  color?: string;
+  icon: React.ReactNode;
+  onClick?: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className="flex items-center gap-2 h-8 px-5 font-bold tracking-wider uppercase text-white"
+      style={{
+        background: color,
+        borderRadius: '4px',
+        fontFamily: 'Verdana, Geneva, DejaVu Sans, sans-serif',
+        fontSize: '0.95rem',
+        letterSpacing: '0.08em',
+      }}
+    >
+      <span className="flex items-center">{icon}</span>
+      <span>{label}</span>
+    </button>
+  );
+} 

src/app/HeaderButtons.tsx

@@ -0,0 +1,37 @@
+'use client';
+import BadgeButton from './BadgeButton';
+import AboutButton from './AboutButton';
+
+const PersonIcon = (
+  <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
+    <circle cx="10" cy="6" r="4" fill="white" stroke="white" strokeWidth="1.5" />
+    <rect x="3" y="13" width="14" height="5" rx="2.5" fill="white" stroke="white" strokeWidth="1.5" />
+  </svg>
+);
+
+const InfoIcon = (
+  <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
+    <circle cx="10" cy="10" r="9" stroke="white" strokeWidth="2" />
+    <rect x="9" y="8" width="2" height="6" rx="1" fill="white" />
+    <rect x="9" y="5" width="2" height="2" rx="1" fill="white" />
+  </svg>
+);
+
+export default function HeaderButtons() {
+  return (
+    <div className="flex gap-2 justify-center w-full md:w-auto mt-2 md:mt-0">
+      <BadgeButton
+        label="Admin Login"
+        color="#dc2626"
+        icon={PersonIcon}
+        onClick={() => window.location.href = '/admin'}
+      />
+      <BadgeButton
+        label="About Me"
+        color="#2563eb"
+        icon={InfoIcon}
+        onClick={() => window.open('http://' + window.location.hostname + ':80', '_blank')}
+      />
+    </div>
+  );
+}

src/app/admin/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 
@@ -61,7 +61,15 @@ export default function AdminPage() {
     }
     return [];
   });
+  const [pinFeedback, setPinFeedback] = useState<string | null>(null);
+  const [showChangePassword, setShowChangePassword] = useState(false);
+  const [changePwOld, setChangePwOld] = useState('');
+  const [changePwNew, setChangePwNew] = useState('');
+  const [changePwConfirm, setChangePwConfirm] = useState('');
+  const [changePwFeedback, setChangePwFeedback] = useState<string | null>(null);
   const router = useRouter();
+  const usernameRef = useRef<HTMLInputElement>(null);
+  const passwordRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     // Check if already authenticated
@@ -69,6 +77,8 @@ export default function AdminPage() {
     if (auth === 'true') {
       setIsAuthenticated(true);
       loadContent();
+      const interval = setInterval(loadContent, 500);
+      return () => clearInterval(interval);
     }
   }, []);
 
@@ -86,20 +96,36 @@ export default function AdminPage() {
     }
   };
 
-  const handleLogin = (e: React.FormEvent) => {
+  const handleLogin = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    if (username === 'admin' && password === 'admin') {
+    const form = e.target as HTMLFormElement;
+    const formData = new FormData(form);
+    const user = (formData.get('username') as string) || usernameRef.current?.value || '';
+    const pass = (formData.get('password') as string) || passwordRef.current?.value || '';
+    if (user !== 'admin') {
+      alert('Ungültiger Benutzername');
+      return;
+    }
+    // Check password via API
+    const res = await fetch('/api/admin/password', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ password: pass, mode: 'login' }),
+    });
+    const data = await res.json();
+    if (res.ok && data.success) {
       setIsAuthenticated(true);
       localStorage.setItem('adminAuth', 'true');
       loadContent();
     } else {
-      alert('Invalid credentials');
+      alert(data.error || 'Ungültiges Passwort');
     }
   };
 
   const handleLogout = () => {
     setIsAuthenticated(false);
     localStorage.removeItem('adminAuth');
+    router.push('/');
   };
 
   const handleCreatePost = async (e: React.FormEvent) => {
@@ -300,42 +326,120 @@ export default function AdminPage() {
     }
   };
 
-  const handlePin = (slug: string) => {
+  const handlePin = async (slug: string) => {
-    setPinned((prev) =>
+    setPinned((prev) => {
-      prev.includes(slug) ? prev.filter((s) => s !== slug) : [slug, ...prev]
+      const newPinned = prev.includes(slug)
+        ? prev.filter((s) => s !== slug)
+        : [slug, ...prev];
+      // Update pinned.json on the server
+      fetch('/api/admin/posts', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ pinned: newPinned }),
+      })
+        .then((res) => {
+          if (!res.ok) {
+            res.json().then((data) => {
+              setPinFeedback(data.error || 'Fehler beim Aktualisieren der angehefteten Beiträge');
+            });
+          } else {
+            setPinFeedback(
+              newPinned.includes(slug)
+                ? 'Beitrag angeheftet!'
+                : 'Beitrag gelöst!'
             );
+            setTimeout(() => setPinFeedback(null), 2000);
+          }
+        })
+        .catch((err) => {
+          setPinFeedback('Fehler beim Aktualisieren der angehefteten Beiträge');
+        });
+      return newPinned;
+    });
+  };
+
+  // Password change handler
+  const handleChangePassword = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setChangePwFeedback(null);
+    if (!changePwOld || !changePwNew || !changePwConfirm) {
+      setChangePwFeedback('Bitte alle Felder ausfüllen.');
+      return;
+    }
+    if (changePwNew !== changePwConfirm) {
+      setChangePwFeedback('Die neuen Passwörter stimmen nicht überein.');
+      return;
+    }
+    // Check old password
+    const res = await fetch('/api/admin/password', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ password: changePwOld, mode: 'login' }),
+    });
+    const data = await res.json();
+    if (!res.ok || !data.success) {
+      setChangePwFeedback('Altes Passwort ist falsch.');
+      return;
+    }
+    // Set new password
+    const res2 = await fetch('/api/admin/password', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ password: changePwNew }),
+    });
+    const data2 = await res2.json();
+    if (res2.ok && data2.success) {
+      setChangePwFeedback('Passwort erfolgreich geändert!');
+      setChangePwOld('');
+      setChangePwNew('');
+      setChangePwConfirm('');
+      setTimeout(() => setShowChangePassword(false), 1500);
+    } else {
+      setChangePwFeedback(data2.error || 'Fehler beim Ändern des Passworts.');
+    }
   };
 
   return (
     <div className="min-h-screen bg-gray-100 p-8">
+      {pinFeedback && (
+        <div className="fixed top-4 left-1/2 transform -translate-x-1/2 bg-blue-600 text-white px-6 py-2 rounded shadow-lg z-50">
+          {pinFeedback}
+        </div>
+      )}
       {!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">
+          <form onSubmit={handleLogin} className="space-y-4" autoComplete="on">
             <div>
               <label htmlFor="username" className="block text-sm font-medium text-gray-700">
-                Username
+                Benutzername
               </label>
               <input
                 type="text"
                 id="username"
+                name="username"
+                ref={usernameRef}
                 value={username}
                 onChange={(e) => setUsername(e.target.value)}
                 className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                 required
+                autoComplete="username"
               />
             </div>
             <div>
               <label htmlFor="password" className="block text-sm font-medium text-gray-700">
-                Password
+                Passwort
               </label>
               <input
                 type="password"
                 id="password"
+                name="password"
+                ref={passwordRef}
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                 required
+                autoComplete="current-password"
               />
             </div>
             <button
@@ -350,13 +454,81 @@ export default function AdminPage() {
         <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>
+            <div className="flex gap-2">
               <button
                 onClick={handleLogout}
                 className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
               >
                 Logout
               </button>
+              <button
+                onClick={() => setShowChangePassword(true)}
+                className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+              >
+                Passwort ändern
+              </button>
             </div>
+          </div>
+
+          {/* Password Change Modal */}
+          {showChangePassword && (
+            <div className="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center z-50">
+              <div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full relative">
+                <button
+                  className="absolute top-2 right-2 text-gray-400 hover:text-gray-700 text-2xl"
+                  onClick={() => setShowChangePassword(false)}
+                  title="Schließen"
+                >
+                  ×
+                </button>
+                <h2 className="text-xl font-bold mb-4">Passwort ändern</h2>
+                <form onSubmit={handleChangePassword} className="space-y-4">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700">Altes Passwort</label>
+                    <input
+                      type="password"
+                      value={changePwOld}
+                      onChange={e => setChangePwOld(e.target.value)}
+                      className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2"
+                      required
+                      autoComplete="current-password"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700">Neues Passwort</label>
+                    <input
+                      type="password"
+                      value={changePwNew}
+                      onChange={e => setChangePwNew(e.target.value)}
+                      className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2"
+                      required
+                      autoComplete="new-password"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700">Neues Passwort bestätigen</label>
+                    <input
+                      type="password"
+                      value={changePwConfirm}
+                      onChange={e => setChangePwConfirm(e.target.value)}
+                      className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2"
+                      required
+                      autoComplete="new-password"
+                    />
+                  </div>
+                  {changePwFeedback && (
+                    <div className="text-center text-sm text-red-600">{changePwFeedback}</div>
+                  )}
+                  <button
+                    type="submit"
+                    className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700"
+                  >
+                    Passwort speichern
+                  </button>
+                </form>
+              </div>
+            </div>
+          )}
 
           {/* Breadcrumbs with back button */}
           <div className="flex items-center gap-4 mb-6">
@@ -527,7 +699,7 @@ export default function AdminPage() {
                 return [...pinnedPosts, ...unpinnedPosts].map((post) => (
                   <div key={post.slug} className="border rounded-lg p-4 relative">
                     {post.pinned && (
-                      <span title="Pinned" className="absolute top-2 right-2 text-2xl">📌</span>
+                      <span title="Angeheftet" className="absolute top-2 right-2 text-2xl">📌</span>
                     )}
                     <h3 className="text-xl font-semibold">{post.title}</h3>
                     <p className="text-gray-600">{post.date}</p>
@@ -598,15 +770,20 @@ export default function AdminPage() {
                       key={post.slug}
                       className={`border rounded-lg p-3 flex items-center gap-3 justify-between ${pinned.includes(post.slug) ? 'bg-yellow-100 border-yellow-400' : ''}`}
                     >
-                      <div className="flex-1 text-left">
+                      <div className="flex-1 text-left flex items-center gap-2">
+                        {pinned.includes(post.slug) && (
+                          <span title="Angeheftet" className="text-xl">📌</span>
+                        )}
+                        <div>
                           <div className="font-semibold">{post.title}</div>
                           <div className="text-xs text-gray-500">{post.date}</div>
                           <div className="text-xs text-gray-400">{post.summary}</div>
                         </div>
+                      </div>
                       <button
                         onClick={() => handlePin(post.slug)}
                         className={`text-2xl focus:outline-none ${pinned.includes(post.slug) ? 'text-yellow-500' : 'text-gray-400 hover:text-yellow-500'}`}
-                        title={pinned.includes(post.slug) ? 'Unpin' : 'Pin'}
+                        title={pinned.includes(post.slug) ? 'Lösen' : 'Anheften'}
                       >
                         {pinned.includes(post.slug) ? '★' : '☆'}
                       </button>

src/app/api/admin/password/route.ts

@@ -0,0 +1,67 @@
+import { NextResponse } from 'next/server';
+import fs from 'fs';
+import path from 'path';
+import bcrypt from 'bcrypt';
+
+const adminPath = path.join(process.cwd(), 'posts', 'admin.json');
+const tempPath = path.join(process.cwd(), 'posts', 'admin.json.tmp');
+const BCRYPT_SALT_ROUNDS = 12; // Stronger than minimum recommended
+
+// Generate a bcrypt hash for 'admin' at runtime if needed
+async function getDefaultHash() {
+  return await bcrypt.hash('admin', BCRYPT_SALT_ROUNDS);
+}
+
+async function getAdminData() {
+  try {
+    if (fs.existsSync(adminPath)) {
+      const data = JSON.parse(fs.readFileSync(adminPath, 'utf8'));
+      if (typeof data.hash === 'string') return data;
+    }
+  } catch (e) {
+    // Log error and continue to fallback
+  }
+  // Fallback: default admin/admin
+  return { hash: await getDefaultHash() };
+}
+
+function setAdminDataAtomic(hash: string) {
+  // Write to a temp file first, then rename
+  fs.writeFileSync(tempPath, JSON.stringify({ hash }, null, 2), 'utf8');
+  fs.renameSync(tempPath, adminPath);
+}
+
+export async function GET() {
+  // Check if a password is set (if admin.json exists)
+  const exists = fs.existsSync(adminPath);
+  return NextResponse.json({ passwordSet: exists });
+}
+
+export async function POST(request: Request) {
+  const body = await request.json();
+  const { password, mode } = body;
+  if (!password || typeof password !== 'string') {
+    return NextResponse.json({ error: 'Kein Passwort angegeben.' }, { status: 400 });
+  }
+  if (Buffer.byteLength(password, 'utf8') > 72) {
+    return NextResponse.json({ error: 'Passwort zu lang (max. 72 Zeichen).' }, { status: 400 });
+  }
+  const { hash } = await getAdminData();
+  if (mode === 'login') {
+    const match = await bcrypt.compare(password, hash);
+    if (match) {
+      return NextResponse.json({ success: true });
+    } else {
+      return NextResponse.json({ error: 'Falsches Passwort.' }, { status: 401 });
+    }
+  } else {
+    // Set/change password atomically
+    const newHash = await bcrypt.hash(password, BCRYPT_SALT_ROUNDS);
+    try {
+      setAdminDataAtomic(newHash);
+      return NextResponse.json({ success: true });
+    } catch (e) {
+      return NextResponse.json({ error: 'Fehler beim Speichern des Passworts.' }, { status: 500 });
+    }
+  }
+} 

src/app/api/admin/posts/route.ts

@@ -37,3 +37,22 @@ export async function POST(request: Request) {
     );
   }
 }
+
+export async function PATCH(request: Request) {
+  try {
+    const body = await request.json();
+    const { pinned } = body; // expects an array of slugs
+    if (!Array.isArray(pinned)) {
+      return NextResponse.json({ error: 'Invalid pinned data' }, { status: 400 });
+    }
+    const pinnedPath = path.join(postsDirectory, 'pinned.json');
+    fs.writeFileSync(pinnedPath, JSON.stringify(pinned, null, 2), 'utf8');
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error('Error updating pinned.json:', error);
+    return NextResponse.json(
+      { error: 'Error updating pinned.json' },
+      { status: 500 }
+    );
+  }
+} 

src/app/layout.tsx

@@ -3,6 +3,9 @@ import { Inter } from 'next/font/google';
 import './globals.css';
 import Link from 'next/link';
 import Head from 'next/head';
+import AboutButton from './AboutButton';
+import BadgeButton from './BadgeButton';
+import HeaderButtons from './HeaderButtons';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -11,6 +14,21 @@ export const metadata: Metadata = {
   description: 'Ein Blog von Sebastian Zinkl, gebaut mit Next.js und Markdown',
 };
 
+const PersonIcon = (
+  <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
+    <circle cx="10" cy="6" r="4" stroke="white" strokeWidth="2" />
+    <rect x="3" y="13" width="14" height="5" rx="2.5" stroke="white" strokeWidth="2" />
+  </svg>
+);
+
+const InfoIcon = (
+  <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
+    <circle cx="10" cy="10" r="9" stroke="white" strokeWidth="2" />
+    <rect x="9" y="8" width="2" height="6" rx="1" fill="white" />
+    <rect x="9" y="5" width="2" height="2" rx="1" fill="white" />
+  </svg>
+);
+
 export default function RootLayout({
   children,
 }: {
@@ -42,9 +60,9 @@ export default function RootLayout({
                 <img src="https://img.shields.io/badge/GitHub-%23121011.svg?style=for-the-badge&logo=GitHub&logoColor=white" alt="GitHub" />
               </a>
             </div>
-            <Link href="/admin" className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full">
+            <div className="flex gap-2 justify-center w-full md:w-auto mt-2 md:mt-0">
-              Admin Login
+              <HeaderButtons />
-            </Link>
+            </div>
           </div>
         </header>
         {children}

src/app/page.tsx

@@ -31,7 +31,7 @@ export default function Home() {
 
   useEffect(() => {
     loadTree();
-    const interval = setInterval(loadTree, 2000);
+    const interval = setInterval(loadTree, 500);
     return () => clearInterval(interval);
   }, []);
 
@@ -72,6 +72,19 @@ export default function Home() {
     })),
   ];
 
+  // Helper to recursively collect all posts from the tree
+  function collectPosts(nodes: Node[]): Post[] {
+    let posts: Post[] = [];
+    for (const node of nodes) {
+      if (node.type === 'post') {
+        posts.push(node);
+      } else if (node.type === 'folder') {
+        posts = posts.concat(collectPosts(node.children));
+      }
+    }
+    return posts;
+  }
+
   return (
     <main className="min-h-screen p-8 max-w-4xl mx-auto">
       <h1 className="text-4xl font-bold mb-8">Sebastian Zinkls - Blog</h1>
@@ -89,6 +102,52 @@ export default function Home() {
           </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) => (
+                <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>
+                  <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>
+          </div>
+        );
+      })()}
       <div className="grid gap-8">
         {/* Folders */}
         {nodes.filter((n) => n.type === 'folder').map((folder: any) => (