migrated to react
This commit is contained in:
@@ -1,10 +1,9 @@
|
||||
---
|
||||
import AdminLayout from '../../layouts/AdminLayout.astro';
|
||||
import AssetManager from '../../components/AssetManager.astro';
|
||||
import AssetManager from '../../components/react/admin/AssetManager';
|
||||
---
|
||||
|
||||
<AdminLayout title="Asset Library">
|
||||
<p slot="header-subtitle" class="mt-2 text-sm md:text-base" style="color: var(--text) !important;">Manage your uploaded images and files.</p>
|
||||
|
||||
<AssetManager mode="manage" />
|
||||
<AssetManager client:load mode="manage" />
|
||||
</AdminLayout>
|
||||
|
||||
@@ -1,291 +1,11 @@
|
||||
---
|
||||
import AdminLayout from '../../layouts/AdminLayout.astro';
|
||||
import AssetManager from '../../components/AssetManager.astro';
|
||||
import Editor from '../../components/react/admin/Editor';
|
||||
|
||||
const editSlug = Astro.url.searchParams.get('edit') || undefined;
|
||||
---
|
||||
|
||||
<AdminLayout title="Write Post">
|
||||
<p slot="header-subtitle" id="post-status" class="mt-2 text-sm md:text-base" style="color: var(--text) !important;">Create/Edit post.</p>
|
||||
|
||||
<div slot="header-actions" class="flex gap-4 w-full">
|
||||
<button id="delete-btn" class="hidden text-red hover:bg-red/10 px-6 py-3 rounded-lg transition-colors font-bold border border-red/20 w-full md:w-auto">
|
||||
Delete
|
||||
</button>
|
||||
<button
|
||||
id="save-btn"
|
||||
class="bg-mauve text-crust font-bold py-3 px-8 rounded-lg hover:bg-pink transition-all transform hover:scale-105 w-full md:w-auto whitespace-nowrap"
|
||||
>
|
||||
Save Post
|
||||
</button>
|
||||
<a
|
||||
id="view-post-btn"
|
||||
href="#"
|
||||
target="_blank"
|
||||
class="hidden bg-blue text-crust font-bold py-3 px-8 rounded-lg hover:bg-sky transition-all transform hover:scale-105 w-full md:w-auto whitespace-nowrap items-center justify-center gap-2"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
|
||||
View Post
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="alert" class="hidden p-4 rounded-lg mb-6"></div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<label for="slug" class="block text-sm font-medium text-subtext1 mb-2">Post Title (URL identifier)</label>
|
||||
<input
|
||||
type="text"
|
||||
id="slug"
|
||||
required
|
||||
placeholder="my-awesome-post"
|
||||
class="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors font-mono"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="summary" class="block text-sm font-medium text-subtext1 mb-2">Custom Summary (Optional)</label>
|
||||
<textarea
|
||||
id="summary"
|
||||
rows="2"
|
||||
placeholder="A brief description of this post for the frontpage..."
|
||||
class="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors resize-none"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="flex flex-col md:flex-row justify-between items-start md:items-end mb-2 gap-2">
|
||||
<label for="content" class="block text-sm font-medium text-subtext1 italic">Tip: Type '/' to browse your assets</label>
|
||||
|
||||
<button
|
||||
id="open-library-btn"
|
||||
class="text-sm bg-surface0 hover:bg-surface1 text-lavender px-4 py-2 rounded border border-surface1 transition-colors inline-flex items-center gap-2"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>
|
||||
Asset Library
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
id="content"
|
||||
required
|
||||
rows="25"
|
||||
placeholder="# Hello World Write your markdown here..."
|
||||
class="w-full bg-crust border border-surface1 rounded-lg px-4 py-4 text-text focus:outline-none focus:border-mauve transition-colors font-mono resize-y leading-relaxed"
|
||||
></textarea>
|
||||
|
||||
<!-- Autocomplete Dropdown -->
|
||||
<div id="autocomplete" class="hidden absolute z-50 bg-mantle border border-surface1 rounded-lg shadow-2xl max-h-64 overflow-y-auto w-80">
|
||||
<div class="p-2 text-[10px] text-subtext0 uppercase border-b border-white/5 bg-crust/50">Assets Library</div>
|
||||
<ul id="autocomplete-list" class="py-1">
|
||||
<!-- Items injected here -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Assets Modal -->
|
||||
<div id="assets-modal" class="hidden fixed inset-0 z-[100] bg-crust/80 backdrop-blur-sm flex items-center justify-center p-4 md:p-6">
|
||||
<div class="glass w-full max-w-5xl max-h-[90vh] flex flex-col overflow-hidden">
|
||||
<header class="p-4 md:p-6 border-b border-white/5 flex justify-between items-center bg-surface0/20">
|
||||
<div>
|
||||
<h2 class="text-xl md:text-2xl font-bold text-mauve">Asset Library</h2>
|
||||
<p class="text-xs text-subtext0">Click 'Insert' to add an asset to your post.</p>
|
||||
</div>
|
||||
<button id="close-modal" class="p-2 text-subtext0 hover:text-red transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
|
||||
</button>
|
||||
</header>
|
||||
<div class="p-4 md:p-6 overflow-y-auto flex-1 bg-base/50">
|
||||
<AssetManager mode="select" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
import { showAlert } from '../../components/ui/Alert';
|
||||
|
||||
document.addEventListener('admin-auth-ready', (e: any) => {
|
||||
const token = e.detail.token;
|
||||
|
||||
const slugInput = document.getElementById('slug') as HTMLInputElement;
|
||||
const summaryInput = document.getElementById('summary') as HTMLTextAreaElement;
|
||||
const contentInput = document.getElementById('content') as HTMLTextAreaElement;
|
||||
const saveBtn = document.getElementById('save-btn');
|
||||
const delBtn = document.getElementById('delete-btn');
|
||||
const viewPostBtn = document.getElementById('view-post-btn') as HTMLAnchorElement;
|
||||
const openLibraryBtn = document.getElementById('open-library-btn');
|
||||
const assetsModal = document.getElementById('assets-modal');
|
||||
const closeModal = document.getElementById('close-modal');
|
||||
const autocomplete = document.getElementById('autocomplete');
|
||||
const autocompleteList = document.getElementById('autocomplete-list');
|
||||
|
||||
let originalSlug = "";
|
||||
|
||||
// @ts-ignore
|
||||
const editor = CodeMirror.fromTextArea(contentInput, {
|
||||
mode: 'markdown',
|
||||
theme: 'narlblog',
|
||||
lineWrapping: true,
|
||||
keyMap: window.innerWidth > 768 ? 'vim' : 'default',
|
||||
extraKeys: {"Enter": "newlineAndIndentContinueMarkdownList"}
|
||||
});
|
||||
|
||||
openLibraryBtn?.addEventListener('click', () => {
|
||||
assetsModal?.classList.remove('hidden');
|
||||
});
|
||||
|
||||
closeModal?.addEventListener('click', () => {
|
||||
assetsModal?.classList.add('hidden');
|
||||
});
|
||||
|
||||
// Listen for asset selection from the component
|
||||
document.addEventListener('asset-selected', (ev: any) => {
|
||||
const asset = ev.detail;
|
||||
insertMarkdown(asset.name, asset.url);
|
||||
assetsModal?.classList.add('hidden');
|
||||
});
|
||||
|
||||
function insertMarkdown(name: string, url: string) {
|
||||
const isImage = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(name);
|
||||
const markdown = isImage ? `` : `[${name}](${url})`;
|
||||
|
||||
const doc = editor.getDoc();
|
||||
const cursor = doc.getCursor();
|
||||
doc.replaceRange(markdown, cursor);
|
||||
editor.focus();
|
||||
}
|
||||
|
||||
// Autocomplete Logic
|
||||
editor.on('inputRead', async (cm: any, change: any) => {
|
||||
if (change.text && change.text.length === 1 && (change.text[0] === '/' || change.text[0] === '!')) {
|
||||
const res = await fetch('/api/uploads', {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
if (res.ok) {
|
||||
const allAssets = await res.json();
|
||||
showAutocomplete(allAssets);
|
||||
}
|
||||
} else if (change.text && change.text[0] === ' ') {
|
||||
hideAutocomplete();
|
||||
}
|
||||
});
|
||||
|
||||
function showAutocomplete(assets: any[]) {
|
||||
if (!autocomplete || !autocompleteList) return;
|
||||
const cursor = editor.cursorCoords(true, 'local');
|
||||
autocomplete.classList.remove('hidden');
|
||||
autocomplete.style.top = `${cursor.bottom + 10}px`;
|
||||
autocomplete.style.left = `${cursor.left}px`;
|
||||
|
||||
autocompleteList.innerHTML = '';
|
||||
assets.slice(0, 8).forEach(asset => {
|
||||
const li = document.createElement('li');
|
||||
li.className = "px-4 py-2 hover:bg-mauve/20 cursor-pointer text-sm truncate text-subtext1 hover:text-mauve flex items-center gap-3 transition-colors";
|
||||
const isImage = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(asset.name);
|
||||
li.innerHTML = `
|
||||
<div class="w-6 h-6 flex-shrink-0 bg-surface0 rounded flex items-center justify-center overflow-hidden">
|
||||
${isImage ? `<img src="${asset.url}" class="w-full h-full object-cover">` : `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/></svg>`}
|
||||
</div>
|
||||
<span class="truncate">${asset.name}</span>
|
||||
`;
|
||||
li.addEventListener('click', () => {
|
||||
const doc = editor.getDoc();
|
||||
const cursor = doc.getCursor();
|
||||
const line = doc.getLine(cursor.line);
|
||||
const triggerIndex = Math.max(line.lastIndexOf('/'), line.lastIndexOf('!'));
|
||||
if (triggerIndex !== -1) {
|
||||
doc.replaceRange('', {line: cursor.line, ch: triggerIndex}, cursor);
|
||||
}
|
||||
insertMarkdown(asset.name, asset.url);
|
||||
hideAutocomplete();
|
||||
});
|
||||
autocompleteList.appendChild(li);
|
||||
});
|
||||
}
|
||||
|
||||
function hideAutocomplete() {
|
||||
autocomplete?.classList.add('hidden');
|
||||
}
|
||||
|
||||
window.addEventListener('click', (ev) => {
|
||||
if (!autocomplete?.contains(ev.target as Node)) {
|
||||
hideAutocomplete();
|
||||
}
|
||||
});
|
||||
|
||||
saveBtn?.addEventListener('click', async () => {
|
||||
const payload = {
|
||||
slug: slugInput.value,
|
||||
old_slug: originalSlug || null,
|
||||
summary: summaryInput.value || null,
|
||||
content: editor.getValue()
|
||||
};
|
||||
if (!payload.slug || !payload.content) {
|
||||
showAlert('Title and content are required.', 'error');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const res = await fetch('/api/posts', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
if (res.ok) {
|
||||
showAlert('Post saved!', 'success');
|
||||
originalSlug = payload.slug;
|
||||
if (viewPostBtn) {
|
||||
viewPostBtn.href = `/posts/${payload.slug}`;
|
||||
viewPostBtn.classList.remove('hidden');
|
||||
viewPostBtn.classList.add('inline-flex');
|
||||
}
|
||||
} else {
|
||||
const err = await res.json();
|
||||
showAlert(`Error: ${err.error}`, 'error');
|
||||
}
|
||||
} catch (err) {
|
||||
showAlert('Failed to connect to server.', 'error');
|
||||
}
|
||||
});
|
||||
|
||||
delBtn?.addEventListener('click', async () => {
|
||||
const slugToDelete = originalSlug || slugInput.value;
|
||||
if (confirm(`Delete post "${slugToDelete}" permanently?`)) {
|
||||
try {
|
||||
const res = await fetch(`/api/posts/${encodeURIComponent(slugToDelete)}`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
if (res.ok) window.location.href = '/admin';
|
||||
else showAlert('Error deleting post.', 'error');
|
||||
} catch (e) {
|
||||
showAlert('Connection error.', 'error');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const editSlug = urlParams.get('edit');
|
||||
if (editSlug) {
|
||||
slugInput.value = editSlug;
|
||||
originalSlug = editSlug;
|
||||
delBtn?.classList.remove('hidden');
|
||||
|
||||
if (viewPostBtn) {
|
||||
viewPostBtn.href = `/posts/${editSlug}`;
|
||||
viewPostBtn.classList.remove('hidden');
|
||||
viewPostBtn.classList.add('inline-flex');
|
||||
}
|
||||
|
||||
fetch(`/api/posts/${encodeURIComponent(editSlug)}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if (data.summary) summaryInput.value = data.summary;
|
||||
if (data.content) editor.setValue(data.content);
|
||||
})
|
||||
.catch(() => showAlert('Failed to load post.', 'error'));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<p slot="header-subtitle" class="mt-2 text-sm md:text-base" style="color: var(--text) !important;">Create/Edit post.</p>
|
||||
<Editor client:load editSlug={editSlug} />
|
||||
</AdminLayout>
|
||||
|
||||
@@ -1,136 +1,8 @@
|
||||
---
|
||||
import AdminLayout from '../../layouts/AdminLayout.astro';
|
||||
import Dashboard from '../../components/react/admin/Dashboard';
|
||||
---
|
||||
|
||||
<AdminLayout title="Admin Dashboard">
|
||||
<button slot="header-actions" id="logout-btn" class="text-red hover:text-maroon transition-colors font-medium">
|
||||
Logout
|
||||
</button>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8 mb-12">
|
||||
<a href="/admin/editor" class="group">
|
||||
<div class="bg-surface0/50 p-8 rounded-xl border border-white/5 transition-all hover:bg-surface0 hover:scale-[1.02] h-full flex flex-col items-center text-center gap-4">
|
||||
<div class="bg-mauve/20 p-4 rounded-full text-mauve">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-xl font-bold text-lavender group-hover:text-mauve transition-colors">Write Post</h2>
|
||||
<p class="text-xs text-subtext0 mt-1">Create or edit markdown posts.</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/admin/assets" class="group">
|
||||
<div class="bg-surface0/50 p-8 rounded-xl border border-white/5 transition-all hover:bg-surface0 hover:scale-[1.02] h-full flex flex-col items-center text-center gap-4">
|
||||
<div class="bg-teal/20 p-4 rounded-full text-teal">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-xl font-bold text-teal group-hover:text-green transition-colors">Asset Library</h2>
|
||||
<p class="text-xs text-subtext0 mt-1">Manage images and uploads.</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/admin/settings" class="group">
|
||||
<div class="bg-surface0/50 p-8 rounded-xl border border-white/5 transition-all hover:bg-surface0 hover:scale-[1.02] h-full flex flex-col items-center text-center gap-4">
|
||||
<div class="bg-blue/20 p-4 rounded-full text-blue">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-xl font-bold text-blue group-hover:text-sky transition-colors">Settings</h2>
|
||||
<p class="text-xs text-subtext0 mt-1">Site title and themes.</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<h2 class="text-2xl font-bold text-mauve mb-6 flex items-center gap-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
|
||||
Manage Posts
|
||||
</h2>
|
||||
<div id="posts-list" class="space-y-4">
|
||||
<!-- Posts will be loaded here -->
|
||||
<div class="animate-pulse flex space-x-4 p-8 glass">
|
||||
<div class="flex-1 space-y-4 py-1">
|
||||
<div class="h-4 bg-surface1 rounded w-3/4"></div>
|
||||
<div class="h-4 bg-surface1 rounded w-1/2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
import { showAlert } from '../../components/ui/Alert';
|
||||
|
||||
document.addEventListener('admin-auth-ready', (e: any) => {
|
||||
const token = e.detail.token;
|
||||
loadPosts();
|
||||
|
||||
async function loadPosts() {
|
||||
const postsList = document.getElementById('posts-list');
|
||||
if (!postsList) return;
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/posts');
|
||||
if (res.ok) {
|
||||
const posts = await res.json();
|
||||
if (posts.length === 0) {
|
||||
postsList.innerHTML = '<div class="glass p-8 text-center text-subtext0">No posts yet.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
postsList.innerHTML = '';
|
||||
posts.forEach((post: {slug: string}) => {
|
||||
const div = document.createElement('div');
|
||||
div.className = "glass p-6 flex justify-between items-center group hover:bg-surface0/50 transition-colors";
|
||||
div.innerHTML = `
|
||||
<div>
|
||||
<h3 class="font-bold text-lavender text-lg">${post.slug}</h3>
|
||||
<p class="text-xs text-subtext0" style="color: var(--subtext0) !important;">/posts/${post.slug}</p>
|
||||
</div> <div class="flex gap-3">
|
||||
<a href="/admin/editor?edit=${post.slug}" class="p-2 text-blue hover:bg-blue/10 rounded transition-colors" title="Edit">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
|
||||
</a>
|
||||
<button class="p-2 text-red hover:bg-red/10 rounded transition-colors delete-btn" data-slug="${post.slug}" title="Delete">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
postsList.appendChild(div);
|
||||
});
|
||||
|
||||
document.querySelectorAll('.delete-btn').forEach(btn => {
|
||||
btn.addEventListener('click', async (ev) => {
|
||||
const slug = (ev.currentTarget as HTMLElement).dataset.slug;
|
||||
if (confirm(`Are you sure you want to delete "${slug}"?`)) {
|
||||
try {
|
||||
const delRes = await fetch(`/api/posts/${encodeURIComponent(slug as string)}`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
if (delRes.ok) {
|
||||
loadPosts();
|
||||
} else {
|
||||
showAlert('Failed to delete post.', 'error');
|
||||
}
|
||||
} catch (err) {
|
||||
showAlert('Error connecting to server.', 'error');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
postsList.innerHTML = '<div class="glass p-8 text-center text-red">Failed to load posts.</div>';
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('logout-btn')?.addEventListener('click', () => {
|
||||
localStorage.removeItem('admin_token');
|
||||
window.location.href = '/';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<Dashboard client:load />
|
||||
</AdminLayout>
|
||||
|
||||
@@ -1,44 +1,8 @@
|
||||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
import Login from '../../components/react/admin/Login';
|
||||
---
|
||||
|
||||
<Layout title="Admin Login">
|
||||
<div class="max-w-md mx-auto mt-20">
|
||||
<div class="glass p-12">
|
||||
<h1 class="text-3xl font-bold mb-6 text-mauve">Admin Login</h1>
|
||||
<p class="text-subtext0 mb-8">Enter your admin token to access the dashboard.</p>
|
||||
|
||||
<form id="login-form" class="space-y-6">
|
||||
<div>
|
||||
<label for="token" class="block text-sm font-medium text-subtext1 mb-2">Admin Token</label>
|
||||
<input
|
||||
type="password"
|
||||
id="token"
|
||||
name="token"
|
||||
required
|
||||
class="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors"
|
||||
placeholder="••••••••••••"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full bg-mauve text-crust font-bold py-3 rounded-lg hover:bg-pink transition-colors"
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const form = document.getElementById('login-form');
|
||||
form?.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
const token = (document.getElementById('token') as HTMLInputElement).value;
|
||||
if (token) {
|
||||
localStorage.setItem('admin_token', token);
|
||||
window.location.href = '/admin';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<Login client:load />
|
||||
</Layout>
|
||||
|
||||
@@ -1,132 +1,9 @@
|
||||
---
|
||||
import AdminLayout from '../../layouts/AdminLayout.astro';
|
||||
import Settings from '../../components/react/admin/Settings';
|
||||
---
|
||||
|
||||
<AdminLayout title="Site Settings">
|
||||
<p slot="header-subtitle" class="mt-2 text-sm md:text-base" style="color: var(--text) !important;">Configure how your blog looks and feels globally.</p>
|
||||
|
||||
<form id="settings-form" class="space-y-8">
|
||||
<div id="alert" class="hidden p-4 rounded-lg mb-6"></div>
|
||||
|
||||
<section class="space-y-6">
|
||||
<h2 class="text-xl font-bold text-lavender border-l-4 border-lavender pl-4">General Identity</h2>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label for="title" class="block text-sm font-medium text-subtext1 mb-2">Blog Title (Nav)</label>
|
||||
<input type="text" id="title" required class="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="subtitle" class="block text-sm font-medium text-subtext1 mb-2">Nav Subtitle</label>
|
||||
<input type="text" id="subtitle" required class="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="welcome_title" class="block text-sm font-medium text-subtext1 mb-2">Welcome Title (Frontpage)</label>
|
||||
<input type="text" id="welcome_title" required class="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="welcome_subtitle" class="block text-sm font-medium text-subtext1 mb-2">Welcome Subtitle</label>
|
||||
<input type="text" id="welcome_subtitle" required class="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="favicon" class="block text-sm font-medium text-subtext1 mb-2">Favicon URL</label>
|
||||
<input type="text" id="favicon" required class="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors" />
|
||||
<p class="text-[10px] text-subtext0 mt-1">URL to the icon shown in browser tabs.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="space-y-6">
|
||||
<h2 class="text-xl font-bold text-blue border-l-4 border-blue pl-4">Appearance</h2>
|
||||
<div>
|
||||
<label for="theme" class="block text-sm font-medium text-subtext1 mb-2">Color Theme (Catppuccin)</label>
|
||||
<select id="theme" class="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors">
|
||||
<option value="mocha">Mocha (Dark, High Contrast)</option>
|
||||
<option value="macchiato">Macchiato (Dark, Medium Contrast)</option>
|
||||
<option value="frappe">Frappe (Dark, Low Contrast)</option>
|
||||
<option value="latte">Latte (Light Mode)</option>
|
||||
<option value="scaled-and-icy">Scaled and Icy (Vibrant Light)</option>
|
||||
</select>
|
||||
<p class="text-[10px] text-subtext0 mt-1">Select a predefined Catppuccin color palette.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label for="custom_css" class="block text-sm font-medium text-subtext1 mb-2">Custom CSS</label>
|
||||
<textarea id="custom_css" rows="4" class="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors font-mono text-xs" placeholder="body { ... }"></textarea>
|
||||
<p class="text-[10px] text-subtext0 mt-1">Inject custom CSS styles globally.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="space-y-6">
|
||||
<h2 class="text-xl font-bold text-teal border-l-4 border-teal pl-4">Footer</h2>
|
||||
<div>
|
||||
<label for="footer" class="block text-sm font-medium text-subtext1 mb-2">Footer Text</label>
|
||||
<input type="text" id="footer" required class="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<button type="submit" class="w-full md:w-auto bg-mauve text-crust font-bold py-4 px-12 rounded-lg hover:bg-pink transition-all transform hover:scale-[1.02] active:scale-[0.98]">
|
||||
Save Site Configuration
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
import { showAlert } from '../../components/ui/Alert';
|
||||
|
||||
document.addEventListener('admin-auth-ready', (e: any) => {
|
||||
const token = e.detail.token;
|
||||
loadSettings();
|
||||
|
||||
async function loadSettings() {
|
||||
try {
|
||||
const res = await fetch('/api/config');
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
(document.getElementById('title') as HTMLInputElement).value = data.title || '';
|
||||
(document.getElementById('subtitle') as HTMLInputElement).value = data.subtitle || '';
|
||||
(document.getElementById('welcome_title') as HTMLInputElement).value = data.welcome_title || '';
|
||||
(document.getElementById('welcome_subtitle') as HTMLInputElement).value = data.welcome_subtitle || '';
|
||||
(document.getElementById('footer') as HTMLInputElement).value = data.footer || '';
|
||||
(document.getElementById('favicon') as HTMLInputElement).value = data.favicon || '';
|
||||
(document.getElementById('theme') as HTMLSelectElement).value = data.theme || 'mocha';
|
||||
(document.getElementById('custom_css') as HTMLTextAreaElement).value = data.custom_css || '';
|
||||
}
|
||||
} catch (err) {
|
||||
showAlert('Failed to load settings from server.', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('settings-form')?.addEventListener('submit', async (ev) => {
|
||||
ev.preventDefault();
|
||||
const payload = {
|
||||
title: (document.getElementById('title') as HTMLInputElement).value,
|
||||
subtitle: (document.getElementById('subtitle') as HTMLInputElement).value,
|
||||
welcome_title: (document.getElementById('welcome_title') as HTMLInputElement).value,
|
||||
welcome_subtitle: (document.getElementById('welcome_subtitle') as HTMLInputElement).value,
|
||||
footer: (document.getElementById('footer') as HTMLInputElement).value,
|
||||
favicon: (document.getElementById('favicon') as HTMLInputElement).value,
|
||||
theme: (document.getElementById('theme') as HTMLSelectElement).value,
|
||||
custom_css: (document.getElementById('custom_css') as HTMLTextAreaElement).value,
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/config', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
showAlert('Settings saved successfully! Refresh to see changes.', 'success');
|
||||
} else {
|
||||
const err = await res.json();
|
||||
showAlert(`Error: ${err.error}`, 'error');
|
||||
}
|
||||
} catch (err) {
|
||||
showAlert('Failed to save settings. Please check your connection.', 'error');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<Settings client:load />
|
||||
</AdminLayout>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
import { marked } from 'marked';
|
||||
import PostContent from '../../components/react/PostContent';
|
||||
|
||||
const { slug } = Astro.params;
|
||||
const API_URL = (typeof process !== 'undefined' ? process.env.PUBLIC_API_URL : import.meta.env.PUBLIC_API_URL) || 'http://localhost:3000';
|
||||
@@ -11,16 +11,12 @@ interface PostDetail {
|
||||
}
|
||||
|
||||
let post: PostDetail | null = null;
|
||||
let html = '';
|
||||
let error = '';
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_URL}/api/posts/${slug}`);
|
||||
if (response.ok) {
|
||||
post = await response.json();
|
||||
if (post) {
|
||||
html = await marked.parse(post.content);
|
||||
}
|
||||
} else {
|
||||
error = 'Post not found';
|
||||
}
|
||||
@@ -41,29 +37,6 @@ function formatSlug(slug: string) {
|
||||
|
||||
<Layout title={post ? formatSlug(post.slug) : 'Post'}>
|
||||
<article class="glass p-6 md:p-12 mb-8 md:mb-12 animate-in fade-in slide-in-from-bottom-4 duration-700">
|
||||
<header class="mb-8 md:mb-12 border-b border-white/5 pb-8 md:pb-12">
|
||||
<a href="/" class="text-blue hover:text-sky transition-colors mb-6 md:mb-8 inline-flex items-center gap-2 group text-sm md:text-base" style="color: var(--blue) !important;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="md:w-5 md:h-5 transition-transform group-hover:-translate-x-1"><path d="m15 18-6-6 6-6"/></svg>
|
||||
Back to list
|
||||
</a>
|
||||
{post && (
|
||||
<div class="flex flex-col md:flex-row md:justify-between md:items-start mt-2 md:mt-4 gap-4">
|
||||
<h1 class="text-3xl md:text-5xl font-extrabold text-mauve">
|
||||
{formatSlug(post.slug)}
|
||||
</h1>
|
||||
<a
|
||||
href={`/admin/editor?edit=${post.slug}`}
|
||||
id="edit-btn"
|
||||
class="hidden bg-surface0 hover:bg-surface1 text-blue px-3 py-1.5 md:px-4 md:py-2 rounded border border-surface1 transition-colors items-center gap-2 text-sm md:text-base self-start"
|
||||
style="color: var(--blue) !important;"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="md:w-4 md:h-4"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
|
||||
Edit
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
|
||||
{error && (
|
||||
<div class="text-red text-center py-12">
|
||||
<h2 class="text-2xl font-bold mb-4">{error}</h2>
|
||||
@@ -72,44 +45,7 @@ function formatSlug(slug: string) {
|
||||
)}
|
||||
|
||||
{post && (
|
||||
<div class="prose max-w-none" id="post-content" set:html={html} />
|
||||
<PostContent client:load content={post.content} slug={post.slug} />
|
||||
)}
|
||||
</article>
|
||||
|
||||
<!-- KaTeX for LaTeX Math Rendering -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css" crossorigin="anonymous">
|
||||
<script is:inline src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js" crossorigin="anonymous"></script>
|
||||
<script is:inline src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- Highlight.js for Code Blocks -->
|
||||
<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
||||
|
||||
<script>
|
||||
if (localStorage.getItem('admin_token')) {
|
||||
const editBtn = document.getElementById('edit-btn');
|
||||
if (editBtn) {
|
||||
editBtn.style.display = 'inline-flex';
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize KaTeX and Highlight.js
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const content = document.getElementById('post-content');
|
||||
if (content) {
|
||||
// @ts-ignore
|
||||
renderMathInElement(content, {
|
||||
delimiters: [
|
||||
{left: '$$', right: '$$', display: true},
|
||||
{left: '$', right: '$', display: false},
|
||||
{left: '\\(', right: '\\)', display: false},
|
||||
{left: '\\[', right: '\\]', display: true}
|
||||
],
|
||||
throwOnError: false
|
||||
});
|
||||
|
||||
// @ts-ignore
|
||||
hljs.highlightAll();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</Layout>
|
||||
|
||||
Reference in New Issue
Block a user