refactor
This commit is contained in:
@@ -1,110 +1,95 @@
|
||||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
import AdminLayout from '../../layouts/AdminLayout.astro';
|
||||
---
|
||||
|
||||
<Layout title="Post Editor">
|
||||
<AdminLayout title="Write Post">
|
||||
<!-- CodeMirror Assets -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/catppuccin.min.css">
|
||||
<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
|
||||
<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/markdown/markdown.min.js"></script>
|
||||
<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/keymap/vim.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css" slot="header-subtitle">
|
||||
<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js" slot="header-subtitle"></script>
|
||||
<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/markdown/markdown.min.js" slot="header-subtitle"></script>
|
||||
<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/keymap/vim.min.js" slot="header-subtitle"></script>
|
||||
|
||||
<div class="glass p-12 mb-12" id="editor-content" style="display: none;">
|
||||
<header class="mb-12 border-b border-white/5 pb-12 flex justify-between items-center">
|
||||
<div>
|
||||
<a href="/admin" class="text-blue hover:text-sky transition-colors mb-8 inline-flex items-center gap-2 group">
|
||||
<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" class="transition-transform group-hover:-translate-x-1"><path d="m15 18-6-6 6-6"/></svg>
|
||||
Back to Dashboard
|
||||
</a>
|
||||
<h1 class="text-4xl font-extrabold text-mauve mt-4">
|
||||
Write Post
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4">
|
||||
<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">
|
||||
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"
|
||||
>
|
||||
Save Post
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div id="alert" class="hidden p-4 rounded-lg mb-6"></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">Slug (URL endpoint)</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 class="space-y-6">
|
||||
<div>
|
||||
<label for="slug" class="block text-sm font-medium text-subtext1 mb-2">Slug (URL endpoint)</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 class="relative">
|
||||
<div class="flex justify-between items-end mb-2">
|
||||
<label for="content" class="block text-sm font-medium text-subtext1 italic">Tip: Type '/' to browse your assets</label>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
id="browse-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>
|
||||
Library
|
||||
</button>
|
||||
<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>
|
||||
|
||||
<div class="flex gap-2 w-full md:w-auto">
|
||||
<button
|
||||
id="browse-btn"
|
||||
class="flex-1 md:flex-none text-sm bg-surface0 hover:bg-surface1 text-lavender px-4 py-2 rounded border border-surface1 transition-colors inline-flex justify-center 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>
|
||||
Library
|
||||
</button>
|
||||
|
||||
<input type="file" id="file-upload" class="hidden" />
|
||||
<label
|
||||
for="file-upload"
|
||||
class="cursor-pointer text-sm bg-surface0 hover:bg-surface1 text-blue 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"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
|
||||
Upload File
|
||||
</label>
|
||||
</div>
|
||||
<input type="file" id="file-upload" class="hidden" />
|
||||
<label
|
||||
for="file-upload"
|
||||
class="flex-1 md:flex-none cursor-pointer text-sm bg-surface0 hover:bg-surface1 text-blue px-4 py-2 rounded border border-surface1 transition-colors inline-flex justify-center 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"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
|
||||
Upload
|
||||
</label>
|
||||
</div>
|
||||
</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>
|
||||
<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>
|
||||
<!-- 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-6">
|
||||
<div class="glass w-full max-w-4xl max-h-[80vh] flex flex-col overflow-hidden">
|
||||
<header class="p-6 border-b border-white/5 flex justify-between items-center bg-surface0/20">
|
||||
<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-4xl 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-2xl font-bold text-mauve">Asset Library</h2>
|
||||
<h2 class="text-xl md:text-2xl font-bold text-mauve">Asset Library</h2>
|
||||
<p class="text-xs text-subtext0">Click an asset to insert its markdown link.</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-6 overflow-y-auto flex-1 bg-base/50">
|
||||
<div class="p-4 md:p-6 overflow-y-auto flex-1 bg-base/50">
|
||||
<div id="assets-grid" class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
||||
<!-- Assets injected here -->
|
||||
</div>
|
||||
@@ -117,293 +102,251 @@ import Layout from '../../layouts/Layout.astro';
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const token = localStorage.getItem('admin_token');
|
||||
if (!token) {
|
||||
window.location.href = '/admin/login';
|
||||
} else {
|
||||
document.getElementById('editor-content')!.style.display = 'block';
|
||||
}
|
||||
import { showAlert } from '../../components/ui/Alert';
|
||||
|
||||
const slugInput = document.getElementById('slug') as HTMLInputElement;
|
||||
const contentInput = document.getElementById('content') as HTMLTextAreaElement;
|
||||
const fileInput = document.getElementById('file-upload') as HTMLInputElement;
|
||||
const saveBtn = document.getElementById('save-btn');
|
||||
const delBtn = document.getElementById('delete-btn');
|
||||
const browseBtn = document.getElementById('browse-btn');
|
||||
const assetsModal = document.getElementById('assets-modal');
|
||||
const closeModal = document.getElementById('close-modal');
|
||||
const assetsGrid = document.getElementById('assets-grid');
|
||||
const assetsEmpty = document.getElementById('assets-empty');
|
||||
const autocomplete = document.getElementById('autocomplete');
|
||||
const autocompleteList = document.getElementById('autocomplete-list');
|
||||
|
||||
// Initialize CodeMirror
|
||||
// @ts-ignore
|
||||
const editor = CodeMirror.fromTextArea(contentInput, {
|
||||
mode: 'markdown',
|
||||
theme: 'default',
|
||||
lineWrapping: true,
|
||||
keyMap: window.innerWidth > 768 ? 'vim' : 'default',
|
||||
extraKeys: {"Enter": "newlineAndIndentContinueMarkdownList"}
|
||||
});
|
||||
|
||||
let allAssets: {name: string, url: string}[] = [];
|
||||
|
||||
async function fetchAssets() {
|
||||
try {
|
||||
const res = await fetch('/api/uploads', {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
if (res.ok) {
|
||||
allAssets = await res.json();
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Failed to fetch assets", e);
|
||||
}
|
||||
}
|
||||
|
||||
browseBtn?.addEventListener('click', async () => {
|
||||
await fetchAssets();
|
||||
renderAssets();
|
||||
assetsModal?.classList.remove('hidden');
|
||||
});
|
||||
|
||||
closeModal?.addEventListener('click', () => {
|
||||
assetsModal?.classList.add('hidden');
|
||||
});
|
||||
|
||||
function renderAssets() {
|
||||
if (!assetsGrid || !assetsEmpty) return;
|
||||
assetsGrid.innerHTML = '';
|
||||
document.addEventListener('admin-auth-ready', (e: any) => {
|
||||
const token = e.detail.token;
|
||||
|
||||
if (allAssets.length === 0) {
|
||||
assetsEmpty.classList.remove('hidden');
|
||||
return;
|
||||
}
|
||||
assetsEmpty.classList.add('hidden');
|
||||
const slugInput = document.getElementById('slug') as HTMLInputElement;
|
||||
const contentInput = document.getElementById('content') as HTMLTextAreaElement;
|
||||
const fileInput = document.getElementById('file-upload') as HTMLInputElement;
|
||||
const saveBtn = document.getElementById('save-btn');
|
||||
const delBtn = document.getElementById('delete-btn');
|
||||
const browseBtn = document.getElementById('browse-btn');
|
||||
const assetsModal = document.getElementById('assets-modal');
|
||||
const closeModal = document.getElementById('close-modal');
|
||||
const assetsGrid = document.getElementById('assets-grid');
|
||||
const assetsEmpty = document.getElementById('assets-empty');
|
||||
const autocomplete = document.getElementById('autocomplete');
|
||||
const autocompleteList = document.getElementById('autocomplete-list');
|
||||
|
||||
allAssets.forEach(asset => {
|
||||
const div = document.createElement('div');
|
||||
div.className = "group relative aspect-square bg-crust rounded-xl overflow-hidden border border-white/5 cursor-pointer hover:border-mauve transition-all hover:scale-105 shadow-lg";
|
||||
|
||||
const isImage = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(asset.name);
|
||||
|
||||
if (isImage) {
|
||||
const img = document.createElement('img');
|
||||
img.src = asset.url;
|
||||
img.className = "w-full h-full object-cover opacity-70 group-hover:opacity-100 transition-opacity";
|
||||
div.appendChild(img);
|
||||
} else {
|
||||
const icon = document.createElement('div');
|
||||
icon.className = "w-full h-full flex flex-col items-center justify-center text-subtext0 bg-surface0/30";
|
||||
icon.innerHTML = `
|
||||
<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" class="mb-2"><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"/><polyline points="14 2 14 8 20 8"/></svg>
|
||||
<span class="text-[8px] font-mono px-2 truncate w-full text-center">${asset.name.split('.').pop()?.toUpperCase() || 'FILE'}</span>
|
||||
`;
|
||||
div.appendChild(icon);
|
||||
}
|
||||
|
||||
const label = document.createElement('div');
|
||||
label.className = "absolute bottom-0 left-0 right-0 p-2 bg-crust/95 text-[9px] truncate text-center opacity-0 group-hover:opacity-100 transition-opacity border-t border-white/5";
|
||||
label.textContent = asset.name;
|
||||
div.appendChild(label);
|
||||
|
||||
div.addEventListener('click', () => {
|
||||
insertMarkdown(asset.name, asset.url);
|
||||
assetsModal?.classList.add('hidden');
|
||||
});
|
||||
|
||||
assetsGrid.appendChild(div);
|
||||
// @ts-ignore
|
||||
const editor = CodeMirror.fromTextArea(contentInput, {
|
||||
mode: 'markdown',
|
||||
theme: 'narlblog',
|
||||
lineWrapping: true,
|
||||
keyMap: window.innerWidth > 768 ? 'vim' : 'default',
|
||||
extraKeys: {"Enter": "newlineAndIndentContinueMarkdownList"}
|
||||
});
|
||||
}
|
||||
|
||||
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();
|
||||
}
|
||||
let allAssets: {name: string, url: string}[] = [];
|
||||
|
||||
// Autocomplete on '/' or '!' inside CodeMirror
|
||||
editor.on('inputRead', (cm: any, change: any) => {
|
||||
if (change.text && change.text.length === 1 && (change.text[0] === '/' || change.text[0] === '!')) {
|
||||
showAutocomplete();
|
||||
} else if (change.text && change.text[0] === ' ') {
|
||||
hideAutocomplete();
|
||||
}
|
||||
});
|
||||
|
||||
async function showAutocomplete() {
|
||||
if (allAssets.length === 0) await fetchAssets();
|
||||
if (allAssets.length === 0) return;
|
||||
|
||||
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 = '';
|
||||
allAssets.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');
|
||||
}
|
||||
|
||||
// Close autocomplete on click outside
|
||||
window.addEventListener('click', (e) => {
|
||||
if (!autocomplete?.contains(e.target as Node)) {
|
||||
hideAutocomplete();
|
||||
}
|
||||
});
|
||||
|
||||
fileInput?.addEventListener('change', async (e) => {
|
||||
const file = (e.target as HTMLInputElement).files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/upload', {
|
||||
method: 'POST',
|
||||
headers: { 'Authorization': `Bearer ${token}` },
|
||||
body: formData
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
insertMarkdown(file.name, data.url);
|
||||
showAlert('File uploaded and linked!', 'success');
|
||||
} else {
|
||||
const err = await res.json();
|
||||
showAlert(`Upload failed: ${err.error}`, 'error');
|
||||
}
|
||||
} catch (e) {
|
||||
showAlert('Network error during upload.', 'error');
|
||||
}
|
||||
fileInput.value = '';
|
||||
});
|
||||
|
||||
saveBtn?.addEventListener('click', async () => {
|
||||
const payload = { slug: slugInput.value, content: editor.getValue() };
|
||||
if (!payload.slug || !payload.content) {
|
||||
showAlert('Slug 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');
|
||||
else showAlert('Error saving post.', 'error');
|
||||
} catch (e) {
|
||||
showAlert('Failed to connect to server.', 'error');
|
||||
}
|
||||
});
|
||||
|
||||
delBtn?.addEventListener('click', async () => {
|
||||
if (confirm(`Delete post "${slugInput.value}" permanently?`)) {
|
||||
async function fetchAssets() {
|
||||
try {
|
||||
const res = await fetch(`/api/posts/${encodeURIComponent(slugInput.value)}`, {
|
||||
method: 'DELETE',
|
||||
const res = await fetch('/api/uploads', {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
if (res.ok) window.location.href = '/admin';
|
||||
else showAlert('Error deleting post.', 'error');
|
||||
if (res.ok) {
|
||||
allAssets = await res.json();
|
||||
}
|
||||
} catch (e) {
|
||||
showAlert('Connection error.', 'error');
|
||||
console.error("Failed to fetch assets", e);
|
||||
}
|
||||
}
|
||||
|
||||
browseBtn?.addEventListener('click', async () => {
|
||||
await fetchAssets();
|
||||
renderAssets();
|
||||
assetsModal?.classList.remove('hidden');
|
||||
});
|
||||
|
||||
closeModal?.addEventListener('click', () => {
|
||||
assetsModal?.classList.add('hidden');
|
||||
});
|
||||
|
||||
function renderAssets() {
|
||||
if (!assetsGrid || !assetsEmpty) return;
|
||||
assetsGrid.innerHTML = '';
|
||||
|
||||
if (allAssets.length === 0) {
|
||||
assetsEmpty.classList.remove('hidden');
|
||||
return;
|
||||
}
|
||||
assetsEmpty.classList.add('hidden');
|
||||
|
||||
allAssets.forEach(asset => {
|
||||
const div = document.createElement('div');
|
||||
div.className = "group relative aspect-square bg-crust rounded-xl overflow-hidden border border-white/5 cursor-pointer hover:border-mauve transition-all hover:scale-105 shadow-lg";
|
||||
|
||||
const isImage = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(asset.name);
|
||||
|
||||
if (isImage) {
|
||||
const img = document.createElement('img');
|
||||
img.src = asset.url;
|
||||
img.className = "w-full h-full object-cover opacity-70 group-hover:opacity-100 transition-opacity";
|
||||
div.appendChild(img);
|
||||
} else {
|
||||
const icon = document.createElement('div');
|
||||
icon.className = "w-full h-full flex flex-col items-center justify-center text-subtext0 bg-surface0/30";
|
||||
icon.innerHTML = `
|
||||
<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" class="mb-2"><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"/><polyline points="14 2 14 8 20 8"/></svg>
|
||||
<span class="text-[8px] font-mono px-2 truncate w-full text-center">${asset.name.split('.').pop()?.toUpperCase() || 'FILE'}</span>
|
||||
`;
|
||||
div.appendChild(icon);
|
||||
}
|
||||
|
||||
const label = document.createElement('div');
|
||||
label.className = "absolute bottom-0 left-0 right-0 p-2 bg-crust/95 text-[9px] truncate text-center opacity-0 group-hover:opacity-100 transition-opacity border-t border-white/5";
|
||||
label.textContent = asset.name;
|
||||
div.appendChild(label);
|
||||
|
||||
div.addEventListener('click', () => {
|
||||
insertMarkdown(asset.name, asset.url);
|
||||
assetsModal?.classList.add('hidden');
|
||||
});
|
||||
|
||||
assetsGrid.appendChild(div);
|
||||
});
|
||||
}
|
||||
|
||||
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();
|
||||
}
|
||||
|
||||
editor.on('inputRead', (cm: any, change: any) => {
|
||||
if (change.text && change.text.length === 1 && (change.text[0] === '/' || change.text[0] === '!')) {
|
||||
showAutocomplete();
|
||||
} else if (change.text && change.text[0] === ' ') {
|
||||
hideAutocomplete();
|
||||
}
|
||||
});
|
||||
|
||||
async function showAutocomplete() {
|
||||
if (allAssets.length === 0) await fetchAssets();
|
||||
if (allAssets.length === 0) return;
|
||||
|
||||
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 = '';
|
||||
allAssets.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', (e) => {
|
||||
if (!autocomplete?.contains(e.target as Node)) {
|
||||
hideAutocomplete();
|
||||
}
|
||||
});
|
||||
|
||||
fileInput?.addEventListener('change', async (e) => {
|
||||
const file = (e.target as HTMLInputElement).files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/upload', {
|
||||
method: 'POST',
|
||||
headers: { 'Authorization': `Bearer ${token}` },
|
||||
body: formData
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
insertMarkdown(file.name, data.url);
|
||||
showAlert('File uploaded and linked!', 'success');
|
||||
} else {
|
||||
const err = await res.json();
|
||||
showAlert(`Upload failed: ${err.error}`, 'error');
|
||||
}
|
||||
} catch (e) {
|
||||
showAlert('Network error during upload.', 'error');
|
||||
}
|
||||
fileInput.value = '';
|
||||
});
|
||||
|
||||
saveBtn?.addEventListener('click', async () => {
|
||||
const payload = { slug: slugInput.value, content: editor.getValue() };
|
||||
if (!payload.slug || !payload.content) {
|
||||
showAlert('Slug 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');
|
||||
else showAlert('Error saving post.', 'error');
|
||||
} catch (e) {
|
||||
showAlert('Failed to connect to server.', 'error');
|
||||
}
|
||||
});
|
||||
|
||||
delBtn?.addEventListener('click', async () => {
|
||||
if (confirm(`Delete post "${slugInput.value}" permanently?`)) {
|
||||
try {
|
||||
const res = await fetch(`/api/posts/${encodeURIComponent(slugInput.value)}`, {
|
||||
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;
|
||||
slugInput.disabled = true; // Protect slug on edit
|
||||
delBtn?.classList.remove('hidden');
|
||||
fetch(`/api/posts/${encodeURIComponent(editSlug)}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if (data.content) {
|
||||
editor.setValue(data.content);
|
||||
}
|
||||
})
|
||||
.catch(() => showAlert('Failed to load post.', 'error'));
|
||||
}
|
||||
});
|
||||
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const editSlug = urlParams.get('edit');
|
||||
if (editSlug) {
|
||||
slugInput.value = editSlug;
|
||||
slugInput.disabled = true; // Protect slug on edit
|
||||
delBtn?.classList.remove('hidden');
|
||||
fetch(`/api/posts/${encodeURIComponent(editSlug)}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if (data.content) {
|
||||
editor.setValue(data.content);
|
||||
}
|
||||
})
|
||||
.catch(() => showAlert('Failed to load post.', 'error'));
|
||||
}
|
||||
|
||||
function showAlert(msg: string, type: 'success' | 'error') {
|
||||
const alertEl = document.getElementById('alert');
|
||||
if (alertEl) {
|
||||
alertEl.textContent = msg;
|
||||
alertEl.className = `p-4 rounded-lg mb-6 ${type === 'success' ? 'bg-green/20 text-green border border-green/30' : 'bg-red/20 text-red border border-red/30'}`;
|
||||
alertEl.classList.remove('hidden');
|
||||
setTimeout(() => { alertEl.classList.add('hidden'); }, 4000);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</Layout>
|
||||
ect slug on edit
|
||||
delBtn?.classList.remove('hidden');
|
||||
fetch(`/api/posts/${encodeURIComponent(editSlug)}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if (data.content) {
|
||||
editor.setValue(data.content);
|
||||
}
|
||||
})
|
||||
.catch(() => showAlert('Failed to load post.', 'error'));
|
||||
}
|
||||
|
||||
function showAlert(msg: string, type: 'success' | 'error') {
|
||||
const alertEl = document.getElementById('alert');
|
||||
if (alertEl) {
|
||||
alertEl.textContent = msg;
|
||||
alertEl.className = `p-4 rounded-lg mb-6 ${type === 'success' ? 'bg-green/20 text-green border border-green/30' : 'bg-red/20 text-red border border-red/30'}`;
|
||||
alertEl.classList.remove('hidden');
|
||||
setTimeout(() => { alertEl.classList.add('hidden'); }, 4000);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</Layout>
|
||||
setTimeout(() => { alertEl.classList.add('hidden'); }, 4000);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</Layout>
|
||||
</AdminLayout>
|
||||
|
||||
Reference in New Issue
Block a user