fixed backend errors, added delete and more configuration

backend/src/main.rs

@@ -2,7 +2,7 @@ use axum::{
     extract::{DefaultBodyLimit, Multipart, Path, State},
     http::{HeaderMap, StatusCode},
     response::{IntoResponse, Json},
-    routing::{get, post},
+    routing::{get, post, delete},
     Router,
 };
 use serde::{Deserialize, Serialize};
@@ -22,16 +22,22 @@ struct AppState {
 #[derive(Serialize, Deserialize, Clone)]
 struct SiteConfig {
     title: String,
+    subtitle: String,
+    footer: String,
     favicon: String,
     theme: String,
+    custom_css: String,
 }
 
 impl Default for SiteConfig {
     fn default() -> Self {
         Self {
             title: "Narlblog".to_string(),
+            subtitle: "A clean, modern blog".to_string(),
+            footer: "Built with Rust & Astro".to_string(),
             favicon: "/favicon.svg".to_string(),
-            theme: "catppuccin-mocha".to_string(),
+            theme: "mocha".to_string(),
+            custom_css: "".to_string(),
         }
     }
 }
@@ -63,6 +69,12 @@ struct UploadResponse {
     url: String,
 }
 
+#[derive(Serialize)]
+struct FileInfo {
+    name: String,
+    url: String,
+}
+
 #[tokio::main]
 async fn main() {
     tracing_subscriber::fmt::init();
@@ -92,10 +104,11 @@ async fn main() {
     let app = Router::new()
         .route("/api/config", get(get_config).post(update_config))
         .route("/api/posts", get(list_posts).post(create_post))
-        .route("/api/posts/{slug}", get(get_post))
+        .route("/api/posts/{slug}", get(get_post).delete(delete_post))
+        .route("/api/uploads", get(list_uploads))
         .route("/api/upload", post(upload_file))
         .nest_service("/uploads", ServeDir::new(uploads_dir))
-        .layer(DefaultBodyLimit::max(10 * 1024 * 1024)) // 10MB limit
+        .layer(DefaultBodyLimit::max(50 * 1024 * 1024)) // 50MB limit
         .layer(cors)
         .with_state(state);
 
@@ -172,6 +185,62 @@ async fn create_post(
     }))
 }
 
+async fn delete_post(
+    State(state): State<Arc<AppState>>,
+    headers: HeaderMap,
+    Path(slug): Path<String>,
+) -> Result<StatusCode, (StatusCode, Json<ErrorResponse>)> {
+    check_auth(&headers, &state.admin_token)?;
+
+    let file_path = state.data_dir.join("posts").join(format!("{}.md", slug));
+    
+    // Security check to prevent directory traversal
+    if file_path.parent() != Some(&state.data_dir.join("posts")) {
+        return Err((
+            StatusCode::BAD_REQUEST,
+            Json(ErrorResponse { error: "Invalid slug".to_string() }),
+        ));
+    }
+
+    if file_path.exists() {
+        fs::remove_file(file_path).map_err(|_| {
+            (StatusCode::INTERNAL_SERVER_ERROR, Json(ErrorResponse { error: "Delete error".to_string() }))
+        })?;
+        Ok(StatusCode::NO_CONTENT)
+    } else {
+        Err((
+            StatusCode::NOT_FOUND,
+            Json(ErrorResponse { error: "Post not found".to_string() }),
+        ))
+    }
+}
+
+async fn list_uploads(
+    State(state): State<Arc<AppState>>,
+    headers: HeaderMap,
+) -> Result<Json<Vec<FileInfo>>, (StatusCode, Json<ErrorResponse>)> {
+    check_auth(&headers, &state.admin_token)?;
+
+    let uploads_dir = state.data_dir.join("uploads");
+    let mut files = Vec::new();
+
+    if let Ok(entries) = fs::read_dir(uploads_dir) {
+        for entry in entries.flatten() {
+            let path = entry.path();
+            if path.is_file() {
+                if let Some(name) = path.file_name().and_then(|n| n.to_str()) {
+                    files.push(FileInfo {
+                        name: name.to_string(),
+                        url: format!("/uploads/{}", name),
+                    });
+                }
+            }
+        }
+    }
+
+    Ok(Json(files))
+}
+
 async fn list_posts(State(state): State<Arc<AppState>>) -> impl IntoResponse {
     let posts_dir = state.data_dir.join("posts");
     let mut posts = Vec::new();
@@ -222,9 +291,7 @@ async fn upload_file(
 ) -> Result<Json<UploadResponse>, (StatusCode, Json<ErrorResponse>)> {
     check_auth(&headers, &state.admin_token)?;
 
-    while let Some(field) = multipart.next_field().await.map_err(|_| {
+    while let Ok(Some(field)) = multipart.next_field().await {
-        (StatusCode::BAD_REQUEST, Json(ErrorResponse { error: "Multipart error".to_string() }))
-    })? {
         if let Some(file_name) = field.file_name() {
             let file_name = slug::slugify(file_name);
             let uploads_dir = state.data_dir.join("uploads");

frontend/src/layouts/Layout.astro

@@ -7,12 +7,15 @@ interface Props {
 
 const { title } = Astro.props;
 
-const API_URL = (typeof process !== 'undefined' ? process.env.PUBLIC_API_URL : import.meta.env.PUBLIC_API_URL) || 'http://localhost:3000';
+const API_URL = process.env.PUBLIC_API_URL || 'http://backend:3000';
 
 let siteConfig = {
     title: "Narlblog",
+    subtitle: "A clean, modern blog",
+    footer: "Built with Rust & Astro",
     favicon: "/favicon.svg",
-    theme: "catppuccin-mocha"
+    theme: "mocha",
+    custom_css: ""
 };
 
 try {
@@ -34,18 +37,21 @@ try {
 		<link rel="icon" href={siteConfig.favicon} />
 		<meta name="generator" content={Astro.generator} />
 		<title>{title} | {siteConfig.title}</title>
+        {siteConfig.custom_css && <style set:html={siteConfig.custom_css} />}
 	</head>
-	<body class="bg-base text-text selection:bg-surface2 selection:text-text">
+	<body class={`bg-base text-text selection:bg-surface2 selection:text-text ${siteConfig.theme}`}>
         <div class="fixed inset-0 z-[-1] bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-surface0 via-base to-base"></div>
 		
         <nav class="max-w-4xl mx-auto px-6 py-8">
             <header class="glass px-6 py-4 flex items-center justify-between">
-                <a href="/" class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-mauve to-blue">
+                <div>
+                    <a href="/" class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-mauve to-blue block">
                         {siteConfig.title}
                     </a>
-                <div class="flex gap-4">
+                    <p class="text-[10px] text-subtext0 uppercase tracking-widest">{siteConfig.subtitle}</p>
+                </div>
+                <div class="flex gap-4 items-center">
                     <a href="/" class="text-subtext0 hover:text-text transition-colors">Home</a>
-                    <a href="https://github.com/narl" target="_blank" class="text-subtext0 hover:text-text transition-colors">About</a>
                     <a href="/admin" class="text-subtext0 hover:text-mauve transition-colors">Admin</a>
                 </div>
             </header>
@@ -55,8 +61,11 @@ try {
 		    <slot />
         </main>
 
-        <footer class="max-w-4xl mx-auto px-6 py-8 text-center text-sm text-subtext0">
+        <footer class="max-w-4xl mx-auto px-6 py-12 text-center text-sm text-subtext1 border-t border-white/5 mt-12">
-            &copy; {new Date().getFullYear()} {siteConfig.title}. Built with Rust & Astro.
+            <p class="mb-2">{siteConfig.footer}</p>
+            <div class="text-subtext0 opacity-50">
+                &copy; {new Date().getFullYear()} {siteConfig.title}
+            </div>
         </footer>
 	</body>
 </html>

frontend/src/pages/admin/editor.astro

@@ -15,19 +15,24 @@ import Layout from '../../layouts/Layout.astro';
                 </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-colors"
+                    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 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 (e.g., my-first-post)</label>
+                <label for="slug" class="block text-sm font-medium text-subtext1 mb-2">Slug (URL endpoint)</label>
                 <input 
                     type="text" 
                     id="slug" 
@@ -37,18 +42,26 @@ import Layout from '../../layouts/Layout.astro';
                 />
             </div>
 
-            <div>
+            <div class="relative">
                 <div class="flex justify-between items-end mb-2">
-                    <label for="content" class="block text-sm font-medium text-subtext1">Markdown Content</label>
+                    <label for="content" class="block text-sm font-medium text-subtext1 italic">Tip: Type '/' to browse your assets</label>
                     
-                    <div>
+                    <div class="flex gap-2">
-                        <input type="file" id="file-upload" class="hidden" accept="image/*" />
+                        <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>
+
+                        <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 Image
+                            Upload File
                         </label>
                     </div>
                 </div>
@@ -56,10 +69,42 @@ import Layout from '../../layouts/Layout.astro';
                 <textarea 
                     id="content" 
                     required
-                    rows="20"
+                    rows="25"
                     placeholder="# Hello World&#10;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>
+    </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>
+                    <h2 class="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 id="assets-grid" class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
+                    <!-- Assets injected here -->
+                </div>
+                <div id="assets-empty" class="hidden text-center py-20 text-subtext0">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="mx-auto mb-4 opacity-20"><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>
+                    No assets uploaded yet.
+                </div>
             </div>
         </div>
     </div>
@@ -76,23 +121,159 @@ import Layout from '../../layouts/Layout.astro';
         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');
 
-        // Allow pre-filling if editing an existing post
+        let allAssets: {name: string, url: string}[] = [];
-        const urlParams = new URLSearchParams(window.location.search);
+
-        const editSlug = urlParams.get('edit');
+        async function fetchAssets() {
-        if (editSlug) {
+            try {
-            slugInput.value = editSlug;
+                const res = await fetch('/api/uploads', {
-            fetch(`/api/posts/${editSlug}`)
+                    headers: { 'Authorization': `Bearer ${token}` }
-                .then(res => res.json())
+                });
-                .then(data => {
+                if (res.ok) {
-                    if (data.content) {
+                    allAssets = await res.json();
-                        contentInput.value = data.content;
+                }
+            } catch (e) {
+                console.error("Failed to fetch assets", e);
             }
-                })
-                .catch(() => showAlert('Failed to load post for editing.', 'error'));
         }
 
-        // Handle File Upload
+        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})` : `[${name}](${url})`;
+            
+            const startPos = contentInput.selectionStart;
+            const endPos = contentInput.selectionEnd;
+            const text = contentInput.value;
+            
+            contentInput.value = text.substring(0, startPos) + markdown + text.substring(endPos);
+            
+            const newCursor = startPos + markdown.length;
+            contentInput.focus();
+            contentInput.setSelectionRange(newCursor, newCursor);
+        }
+
+        // Autocomplete on '/' or '!'
+        contentInput?.addEventListener('input', (e) => {
+            const cursor = contentInput.selectionStart;
+            const textBefore = contentInput.value.substring(0, cursor);
+            const match = textBefore.match(/[\/!]$/); 
+
+            if (match) {
+                showAutocomplete();
+            } else {
+                hideAutocomplete();
+            }
+        });
+
+        async function showAutocomplete() {
+            if (allAssets.length === 0) await fetchAssets();
+            if (allAssets.length === 0) return;
+
+            if (!autocomplete || !autocompleteList) return;
+
+            const cursor = contentInput.selectionStart;
+            const lines = contentInput.value.substring(0, cursor).split('\n');
+            const currentLine = lines.length;
+            const currentCol = lines[lines.length - 1].length;
+
+            // Approximate position
+            const top = Math.min(contentInput.offsetHeight - 200, currentLine * 24);
+            const left = Math.min(contentInput.offsetWidth - 320, currentCol * 8);
+
+            autocomplete.classList.remove('hidden');
+            autocomplete.style.top = `${top + 60}px`;
+            autocomplete.style.left = `${left + 20}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 start = contentInput.selectionStart - 1;
+                    const end = contentInput.selectionStart;
+                    contentInput.value = contentInput.value.substring(0, start) + contentInput.value.substring(end);
+                    contentInput.setSelectionRange(start, start);
+                    insertMarkdown(asset.name, asset.url);
+                    hideAutocomplete();
+                });
+                autocompleteList.appendChild(li);
+            });
+        }
+
+        function hideAutocomplete() {
+            autocomplete?.classList.add('hidden');
+        }
+
         fileInput?.addEventListener('change', async (e) => {
             const file = (e.target as HTMLInputElement).files?.[0];
             if (!file) return;
@@ -103,48 +284,30 @@ import Layout from '../../layouts/Layout.astro';
             try {
                 const res = await fetch('/api/upload', {
                     method: 'POST',
-                    headers: {
+                    headers: { 'Authorization': `Bearer ${token}` },
-                        'Authorization': `Bearer ${token}`
-                    },
                     body: formData
                 });
 
                 if (res.ok) {
                     const data = await res.json();
-                    const markdownImage = `\n![${file.name}](${data.url})\n`;
+                    insertMarkdown(file.name, data.url);
-                    
+                    showAlert('File uploaded and linked!', 'success');
-                    // Insert at cursor position
-                    const startPos = contentInput.selectionStart;
-                    const endPos = contentInput.selectionEnd;
-                    contentInput.value = contentInput.value.substring(0, startPos)
-                        + markdownImage
-                        + contentInput.value.substring(endPos, contentInput.value.length);
-                    
-                    showAlert('Image uploaded and inserted!', 'success');
                 } else {
                     const err = await res.json();
                     showAlert(`Upload failed: ${err.error}`, 'error');
                 }
             } catch (e) {
-                showAlert('Failed to upload file.', 'error');
+                showAlert('Network error during upload.', 'error');
             }
-            
-            // Reset input so the same file can be selected again
             fileInput.value = '';
         });
 
-        // Handle Save
         saveBtn?.addEventListener('click', async () => {
-            const payload = {
+            const payload = { slug: slugInput.value, content: contentInput.value };
-                slug: slugInput.value,
-                content: contentInput.value
-            };
-
             if (!payload.slug || !payload.content) {
                 showAlert('Slug and content are required.', 'error');
                 return;
             }
-
             try {
                 const res = await fetch('/api/posts', {
                     method: 'POST',
@@ -154,28 +317,47 @@ import Layout from '../../layouts/Layout.astro';
                     },
                     body: JSON.stringify(payload)
                 });
-
+                if (res.ok) showAlert('Post saved!', 'success');
-                if (res.ok) {
+                else showAlert('Error saving post.', 'error');
-                    showAlert('Post saved successfully!', 'success');
-                } else {
-                    const err = await res.json();
-                    showAlert(`Error: ${err.error}`, 'error');
-                }
             } catch (e) {
-                showAlert('Failed to save post.', 'error');
+                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/${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/${editSlug}`)
+                .then(res => res.json())
+                .then(data => { if (data.content) contentInput.value = 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);
-                setTimeout(() => {
-                    alertEl.classList.add('hidden');
-                }, 5000);
             }
         }
     </script>

frontend/src/pages/admin/index.astro

@@ -13,21 +13,47 @@ import Layout from '../../layouts/Layout.astro';
             </button>
         </header>
 
-        <div class="grid md:grid-cols-2 gap-8">
+        <div class="grid md:grid-cols-2 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">
+                <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 items-center gap-6">
-                    <h2 class="text-2xl font-bold text-lavender mb-2 group-hover:text-mauve transition-colors">Write a Post</h2>
+                    <div class="bg-mauve/20 p-4 rounded-lg text-mauve">
-                    <p class="text-subtext0">Create or edit markdown posts and upload images.</p>
+                        <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-2xl font-bold text-lavender group-hover:text-mauve transition-colors">Write a Post</h2>
+                        <p class="text-subtext0">Create or edit markdown posts and upload any file.</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">
+                <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 items-center gap-6">
+                    <div class="bg-blue/20 p-4 rounded-lg 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-2xl font-bold text-blue mb-2 group-hover:text-sky transition-colors">Site Settings</h2>
-                    <p class="text-subtext0">Update the blog title, favicon, and theme configuration.</p>
+                        <p class="text-subtext0">Update title, favicon, and global theme.</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>
     </div>
 
     <script>
@@ -37,6 +63,68 @@ import Layout from '../../layouts/Layout.astro';
         } else {
             const content = document.getElementById('admin-content');
             if (content) content.style.display = 'block';
+            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">/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);
+                    });
+
+                    // Handle delete
+                    document.querySelectorAll('.delete-btn').forEach(btn => {
+                        btn.addEventListener('click', async (e) => {
+                            const slug = (e.currentTarget as HTMLElement).dataset.slug;
+                            if (confirm(`Are you sure you want to delete "${slug}"?`)) {
+                                try {
+                                    const delRes = await fetch(`/api/posts/${slug}`, {
+                                        method: 'DELETE',
+                                        headers: { 'Authorization': `Bearer ${token}` }
+                                    });
+                                    if (delRes.ok) {
+                                        loadPosts();
+                                    } else {
+                                        alert('Failed to delete post.');
+                                    }
+                                } catch (err) {
+                                    alert('Error connecting to server.');
+                                }
+                            }
+                        });
+                    });
+                }
+            } catch (e) {
+                postsList.innerHTML = '<div class="glass p-8 text-center text-red">Failed to load posts.</div>';
+            }
         }
 
         document.getElementById('logout-btn')?.addEventListener('click', () => {

frontend/src/pages/admin/settings.astro

@@ -12,46 +12,62 @@ import Layout from '../../layouts/Layout.astro';
             <h1 class="text-4xl font-extrabold text-mauve mt-4">
                 Site Settings
             </h1>
+            <p class="text-subtext1 mt-2">Configure how your blog looks and feels globally.</p>
         </header>
 
-        <form id="settings-form" class="space-y-6">
+        <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</label>
-                <input 
+                        <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" />
-                    type="text" 
+                        <p class="text-[10px] text-subtext0 mt-1">Main name of your blog.</p>
-                    id="title" 
+                    </div>
-                    required
+                    <div>
-                    class="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors"
+                        <label for="subtitle" class="block text-sm font-medium text-subtext1 mb-2">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" />
+                        <p class="text-[10px] text-subtext0 mt-1">Short description shown under the title.</p>
+                    </div>
                 </div>
-
                 <div>
                     <label for="favicon" class="block text-sm font-medium text-subtext1 mb-2">Favicon URL</label>
-                <input 
+                    <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" />
-                    type="text" 
+                    <p class="text-[10px] text-subtext0 mt-1">URL to the icon shown in browser tabs.</p>
-                    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"
-                />
                 </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">Theme</label>
+                    <label for="theme" class="block text-sm font-medium text-subtext1 mb-2">Color Theme (Catppuccin)</label>
-                <input 
+                    <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">
-                    type="text" 
+                        <option value="mocha">Mocha (Dark, High Contrast)</option>
-                    id="theme" 
+                        <option value="macchiato">Macchiato (Dark, Medium Contrast)</option>
-                    required
+                        <option value="frappe">Frappe (Dark, Low Contrast)</option>
-                    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="latte">Latte (Light Mode)</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>
 
-            <button 
+            <section class="space-y-6">
-                type="submit"
+                <h2 class="text-xl font-bold text-teal border-l-4 border-teal pl-4">Footer</h2>
-                class="bg-blue text-crust font-bold py-3 px-8 rounded-lg hover:bg-sky transition-colors"
+                <div>
-            >
+                    <label for="footer" class="block text-sm font-medium text-subtext1 mb-2">Footer Text</label>
-                Save Settings
+                    <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>
     </div>
@@ -71,11 +87,14 @@ import Layout from '../../layouts/Layout.astro';
                 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('footer') as HTMLInputElement).value = data.footer || '';
                     (document.getElementById('favicon') as HTMLInputElement).value = data.favicon || '';
-                    (document.getElementById('theme') as HTMLInputElement).value = data.theme || '';
+                    (document.getElementById('theme') as HTMLSelectElement).value = data.theme || 'mocha';
+                    (document.getElementById('custom_css') as HTMLTextAreaElement).value = data.custom_css || '';
                 }
             } catch (e) {
-                showAlert('Failed to load settings.', 'error');
+                showAlert('Failed to load settings from server.', 'error');
             }
         }
 
@@ -83,11 +102,15 @@ import Layout from '../../layouts/Layout.astro';
             e.preventDefault();
             const payload = {
                 title: (document.getElementById('title') as HTMLInputElement).value,
+                subtitle: (document.getElementById('subtitle') as HTMLInputElement).value,
+                footer: (document.getElementById('footer') as HTMLInputElement).value,
                 favicon: (document.getElementById('favicon') as HTMLInputElement).value,
-                theme: (document.getElementById('theme') as HTMLInputElement).value,
+                theme: (document.getElementById('theme') as HTMLSelectElement).value,
+                custom_css: (document.getElementById('custom_css') as HTMLTextAreaElement).value,
             };
 
             try {
+                // Now using relative path which will be proxied
                 const res = await fetch('/api/config', {
                     method: 'POST',
                     headers: {
@@ -98,13 +121,13 @@ import Layout from '../../layouts/Layout.astro';
                 });
 
                 if (res.ok) {
-                    showAlert('Settings saved successfully!', 'success');
+                    showAlert('Settings saved successfully! Refresh to see changes.', 'success');
                 } else {
                     const err = await res.json();
                     showAlert(`Error: ${err.error}`, 'error');
                 }
             } catch (e) {
-                showAlert('Failed to save settings.', 'error');
+                showAlert('Failed to save settings. Please check your connection.', 'error');
             }
         });
 
@@ -114,6 +137,7 @@ import Layout from '../../layouts/Layout.astro';
                 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');
+                window.scrollTo({ top: 0, behavior: 'smooth' });
             }
         }
     </script>

frontend/src/pages/api/[...path].ts

@@ -0,0 +1,33 @@
+import type { APIRoute } from 'astro';
+
+export const ALL: APIRoute = async ({ request, params }) => {
+  const API_URL = process.env.PUBLIC_API_URL || 'http://backend:3000';
+  const path = params.path;
+  
+  const url = new URL(`${API_URL}/api/${path}`);
+  
+  // Forward search parameters
+  const requestUrl = new URL(request.url);
+  url.search = requestUrl.search;
+
+  try {
+    const response = await fetch(url.toString(), {
+      method: request.method,
+      headers: request.headers,
+      body: request.method !== 'GET' && request.method !== 'HEAD' ? await request.arrayBuffer() : undefined,
+      // @ts-ignore
+      duplex: 'half'
+    });
+
+    return new Response(response.body, {
+      status: response.status,
+      headers: response.headers
+    });
+  } catch (e) {
+    console.error(`Proxy error for ${url}:`, e);
+    return new Response(JSON.stringify({ error: 'Proxy error' }), {
+      status: 500,
+      headers: { 'Content-Type': 'application/json' }
+    });
+  }
+};

frontend/src/styles/global.css

@@ -1,38 +1,87 @@
 @import "tailwindcss";
 
 @theme {
-  --color-crust: #11111b;
+  --color-crust: var(--crust);
-  --color-mantle: #181825;
+  --color-mantle: var(--mantle);
-  --color-base: #1e1e2e;
+  --color-base: var(--base);
-  --color-surface0: #313244;
+  --color-surface0: var(--surface0);
-  --color-surface1: #45475a;
+  --color-surface1: var(--surface1);
-  --color-surface2: #585b70;
+  --color-surface2: var(--surface2);
-  --color-overlay0: #6c7086;
+  --color-overlay0: var(--overlay0);
-  --color-overlay1: #7f849c;
+  --color-overlay1: var(--overlay1);
-  --color-overlay2: #9399b2;
+  --color-overlay2: var(--overlay2);
-  --color-text: #cdd6f4;
+  --color-text: var(--text);
-  --color-subtext0: #a6adc8;
+  --color-subtext0: var(--subtext0);
-  --color-subtext1: #bac2de;
+  --color-subtext1: var(--subtext1);
-  --color-blue: #8caaee;
+  --color-blue: var(--blue);
-  --color-lavender: #b4befe;
+  --color-lavender: var(--lavender);
-  --color-sapphire: #85c1dc;
+  --color-sapphire: var(--sapphire);
-  --color-sky: #99d1db;
+  --color-sky: var(--sky);
-  --color-teal: #81c8be;
+  --color-teal: var(--teal);
-  --color-green: #a6d189;
+  --color-green: var(--green);
-  --color-yellow: #e5c890;
+  --color-yellow: var(--yellow);
-  --color-peach: #ef9f76;
+  --color-peach: var(--peach);
-  --color-maroon: #ea999c;
+  --color-maroon: var(--maroon);
-  --color-red: #e78284;
+  --color-red: var(--red);
-  --color-mauve: #ca9ee6;
+  --color-mauve: var(--mauve);
-  --color-pink: #f4b8e4;
+  --color-pink: var(--pink);
-  --color-flamingo: #eebebe;
+  --color-flamingo: var(--flamingo);
-  --color-rosewater: #f2d5cf;
+  --color-rosewater: var(--rosewater);
+}
+
+:root, .mocha {
+  --crust: #11111b; --mantle: #181825; --base: #1e1e2e;
+  --surface0: #313244; --surface1: #45475a; --surface2: #585b70;
+  --overlay0: #6c7086; --overlay1: #7f849c; --overlay2: #9399b2;
+  --text: #cdd6f4; --subtext0: #a6adc8; --subtext1: #bac2de;
+  --blue: #89b4fa; --lavender: #b4befe; --sapphire: #74c7ec;
+  --sky: #89dceb; --teal: #94e2d5; --green: #a6e3a1;
+  --yellow: #f9e2af; --peach: #fab387; --maroon: #eba0ac;
+  --red: #f38ba8; --mauve: #cba6f7; --pink: #f5c2e7;
+  --flamingo: #f2cdcd; --rosewater: #f5e0dc;
+}
+
+.macchiato {
+  --crust: #181926; --mantle: #1e2030; --base: #24273a;
+  --surface0: #363a4f; --surface1: #494d64; --surface2: #5b6078;
+  --overlay0: #6e738d; --overlay1: #8087a2; --overlay2: #939ab7;
+  --text: #cad3f5; --subtext0: #a5adcb; --subtext1: #b8c0e0;
+  --blue: #8aadf4; --lavender: #b7bdf8; --sapphire: #7dc4e4;
+  --sky: #91d7e3; --teal: #8bd5ca; --green: #a6da95;
+  --yellow: #eed49f; --peach: #f5a97f; --maroon: #ee99a0;
+  --red: #ed8796; --mauve: #c6a0f6; --pink: #f5bde6;
+  --flamingo: #f0c1c1; --rosewater: #f4dbd6;
+}
+
+.frappe {
+  --crust: #232634; --mantle: #292c3c; --base: #303446;
+  --surface0: #414559; --surface1: #51576d; --surface2: #626880;
+  --overlay0: #737994; --overlay1: #838ba7; --overlay2: #949cbb;
+  --text: #c6d0f5; --subtext0: #a5adce; --subtext1: #b5bfe3;
+  --blue: #8caaee; --lavender: #babbf1; --sapphire: #85c1dc;
+  --sky: #99d1db; --teal: #81c8be; --green: #a6d189;
+  --yellow: #e5c890; --peach: #ef9f76; --maroon: #ea999c;
+  --red: #e78284; --mauve: #ca9ee6; --pink: #f4b8e4;
+  --flamingo: #eebebe; --rosewater: #f2d5cf;
+}
+
+.latte {
+  --crust: #dce0e8; --mantle: #e6e9ef; --base: #eff1f5;
+  --surface0: #ccd0da; --surface1: #bcc0cc; --surface2: #acb0be;
+  --overlay0: #9ca0b0; --overlay1: #8c8fa1; --overlay2: #7c7f93;
+  --text: #4c4f69; --subtext0: #5c5f77; --subtext1: #6c6f85;
+  --blue: #1e66f5; --lavender: #7287fd; --sapphire: #209fb5;
+  --sky: #04a5e5; --teal: #179299; --green: #40a02b;
+  --yellow: #df8e1d; --peach: #fe640b; --maroon: #e64553;
+  --red: #d20f39; --mauve: #8839ef; --pink: #ea76cb;
+  --flamingo: #dd7878; --rosewater: #dc8a78;
 }
 
 body {
-  background-color: var(--color-base);
+  background-color: var(--base);
-  color: var(--color-text);
+  color: var(--text);
   min-height: 100vh;
+  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 /* Typography styles for Markdown */
@@ -49,7 +98,7 @@ body {
 .prose img { @apply max-w-full h-auto rounded-xl shadow-lg border border-white/5 my-8; }
 
 .glass {
-  background-color: color-mix(in srgb, var(--color-surface0) 60%, transparent);
+  background-color: color-mix(in srgb, var(--surface0) 60%, transparent);
   backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.05);
   box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);