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

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

Browse Source 
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.
This commit is contained in:
rattatwinko
2025-06-17 11:16:25 +00:00
parent 63a052e718 4ef0fc8a85
commit 3a131baa62
15 changed files with 544 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

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

0
LICENSE → LICENSE
View File

13
README.md
View File

@@ -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.

23
hihihaha.TXT Normal file
View File

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

46
package-lock.json generated
View File

@@ -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",

2
package.json
View File

@@ -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",

3
posts/pinned.json Normal file
View File

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

20
src/app/AboutButton.tsx Normal file
View File

@@ -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')}
/>
);
}

31
src/app/BadgeButton.tsx Normal file
View File

@@ -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>
);
}

37
src/app/HeaderButtons.tsx Normal file
View File

@@ -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>
);
}

223
src/app/admin/page.tsx
View File

@@ -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) => {
setPinned((prev) =>
prev.includes(slug) ? prev.filter((s) => s !== slug) : [slug, ...prev]
);
const handlePin = async (slug: string) => {
setPinned((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,14 +454,82 @@ 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>
<button
onClick={handleLogout}
className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
>
Logout
</button>
<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">
{currentPath.length > 0 && (
@@ -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="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 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>

67
src/app/api/admin/password/route.ts Normal file
View File

@@ -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 });
}
}
}

19
src/app/api/admin/posts/route.ts
View File

@@ -36,4 +36,23 @@ export async function POST(request: Request) {
{ status: 500 }
);
}
}
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 }
);
}
}

24
src/app/layout.tsx
View File

@@ -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">
Admin Login
</Link>
<div className="flex gap-2 justify-center w-full md:w-auto mt-2 md:mt-0">
<HeaderButtons />
</div>
</div>
</header>
{children}

61
src/app/page.tsx
View File

@@ -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) => (