From 34d7b421803658aebfc988a162063af4016ed4fa Mon Sep 17 00:00:00 2001
From: Nils Pukropp <nils@narl.io>
Date: Wed, 25 Mar 2026 16:02:35 +0100
Subject: [PATCH] VIM!!!

---
 backend/src/main.rs                   |  10 +++
 frontend/src/pages/admin/editor.astro | 112 ++++++++++++++++++--------
 frontend/src/pages/index.astro        |  16 ++--
 frontend/src/pages/posts/[slug].astro |  16 ++--
 frontend/src/styles/global.css        |  20 ++---
 5 files changed, 114 insertions(+), 60 deletions(-)

diff --git a/backend/src/main.rs b/backend/src/main.rs
index d5d272b..be59e9f 100644
--- a/backend/src/main.rs
+++ b/backend/src/main.rs
@@ -258,8 +258,18 @@ async fn list_posts(State(state): State<Arc<AppState>>) -> impl IntoResponse {
             let path = entry.path();
             if path.extension().and_then(|e| e.to_str()) == Some("md") {
                 if let Some(slug) = path.file_stem().and_then(|s| s.to_str()) {
+                    let mut excerpt = String::new();
+                    if let Ok(content) = fs::read_to_string(&path) {
+                        // Strip basic markdown hashes and get first ~200 chars
+                        let clean_content = content.replace("#", "").replace("\n", " ");
+                        excerpt = clean_content.chars().take(200).collect::<String>();
+                        if clean_content.len() > 200 {
+                            excerpt.push_str("...");
+                        }
+                    }
                     posts.push(PostInfo {
                         slug: slug.to_string(),
+                        excerpt: excerpt.trim().to_string(),
                     });
                 }
             }
diff --git a/frontend/src/pages/admin/editor.astro b/frontend/src/pages/admin/editor.astro
index ea2a6dc..b989e2c 100644
--- a/frontend/src/pages/admin/editor.astro
+++ b/frontend/src/pages/admin/editor.astro
@@ -3,6 +3,40 @@ import Layout from '../../layouts/Layout.astro';
 ---
 
 <Layout title="Post Editor">
+    <!-- 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>
+    
+    <style is:global>
+        .CodeMirror {
+            height: auto;
+            min-height: 400px;
+            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+            border-radius: 0.5rem;
+            background: var(--crust);
+            color: var(--text);
+            border: 1px solid var(--surface1);
+            padding: 1rem;
+        }
+        .CodeMirror-focused {
+            border-color: var(--mauve);
+        }
+        .CodeMirror-scroll {
+            min-height: 400px;
+        }
+        .cm-s-default .cm-header { color: var(--mauve); font-weight: bold; }
+        .cm-s-default .cm-string { color: var(--green); }
+        .cm-s-default .cm-link { color: var(--blue); text-decoration: underline; }
+        .cm-s-default .cm-url { color: var(--sky); }
+        .cm-s-default .cm-comment { color: var(--subtext0); font-style: italic; }
+        .cm-s-default .cm-quote { color: var(--peach); }
+        .cm-fat-cursor .CodeMirror-cursor { background: var(--text); }
+        .cm-animate-fat-cursor { background-color: var(--text); }
+    </style>
+
     <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>
@@ -130,6 +164,16 @@ import Layout from '../../layouts/Layout.astro';
         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() {
@@ -204,26 +248,17 @@ import Layout from '../../layouts/Layout.astro';
             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);
+            const doc = editor.getDoc();
+            const cursor = doc.getCursor();
+            doc.replaceRange(markdown, cursor);
+            editor.focus();
         }
 
-        // Autocomplete on '/' or '!'
-        contentInput?.addEventListener('input', (e) => {
-            const cursor = contentInput.selectionStart;
-            const textBefore = contentInput.value.substring(0, cursor);
-            const match = textBefore.match(/[\/!]$/); 
-
-            if (match) {
+        // 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 {
+            } else if (change.text && change.text[0] === ' ') {
                 hideAutocomplete();
             }
         });
@@ -234,18 +269,11 @@ import Layout from '../../layouts/Layout.astro';
 
             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);
+            const cursor = editor.cursorCoords(true, 'local');
 
             autocomplete.classList.remove('hidden');
-            autocomplete.style.top = `${top + 60}px`;
-            autocomplete.style.left = `${left + 20}px`;
+            autocomplete.style.top = `${cursor.bottom + 10}px`;
+            autocomplete.style.left = `${cursor.left}px`;
 
             autocompleteList.innerHTML = '';
             allAssets.slice(0, 8).forEach(asset => {
@@ -259,10 +287,15 @@ import Layout from '../../layouts/Layout.astro';
                     <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);
+                    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();
                 });
@@ -274,6 +307,13 @@ import Layout from '../../layouts/Layout.astro';
             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;
@@ -303,7 +343,7 @@ import Layout from '../../layouts/Layout.astro';
         });
 
         saveBtn?.addEventListener('click', async () => {
-            const payload = { slug: slugInput.value, content: contentInput.value };
+            const payload = { slug: slugInput.value, content: editor.getValue() };
             if (!payload.slug || !payload.content) {
                 showAlert('Slug and content are required.', 'error');
                 return;
@@ -345,9 +385,13 @@ import Layout from '../../layouts/Layout.astro';
             slugInput.value = editSlug;
             slugInput.disabled = true; // Protect slug on edit
             delBtn?.classList.remove('hidden');
-            fetch(`/api/posts/${editSlug}`)
+            fetch(`/api/posts/${encodeURIComponent(editSlug)}`)
                 .then(res => res.json())
-                .then(data => { if (data.content) contentInput.value = data.content; })
+                .then(data => { 
+                    if (data.content) {
+                        editor.setValue(data.content);
+                    }
+                })
                 .catch(() => showAlert('Failed to load post.', 'error'));
         }
 
diff --git a/frontend/src/pages/index.astro b/frontend/src/pages/index.astro
index 9df1af5..2f0957e 100644
--- a/frontend/src/pages/index.astro
+++ b/frontend/src/pages/index.astro
@@ -43,7 +43,7 @@ function formatSlug(slug: string) {
 			</p>
 		</section>
 
-		<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
+		<div class="flex flex-col space-y-6">
 			{error && (
 				<div class="glass p-4 md:p-6 text-red text-center border-red/20 text-sm md:text-base">
 					{error}
@@ -58,17 +58,17 @@ function formatSlug(slug: string) {
 
 			{posts.map((post) => (
 				<a href={`/posts/${post.slug}`} class="group block">
-					<article class="glass p-5 md:p-8 transition-all hover:scale-[1.01] hover:bg-surface0/80 active:scale-[0.99] h-full flex flex-col justify-between">
-						<div>
-							<h2 class="text-xl md:text-2xl font-bold text-lavender group-hover:text-mauve transition-colors mb-1 md:mb-2 line-clamp-2">
+					<article class="glass p-5 md:p-8 transition-all hover:scale-[1.01] hover:bg-surface0/80 active:scale-[0.99] flex flex-col md:flex-row justify-between md:items-center gap-4 md:gap-6">
+						<div class="flex-1">
+							<h2 class="text-xl md:text-3xl font-bold text-lavender group-hover:text-mauve transition-colors mb-2 md:mb-3">
 								{formatSlug(post.slug)}
 							</h2>
-							<p class="text-subtext0 text-sm md:text-base line-clamp-3">
-								Read more about {formatSlug(post.slug)}...
+							<p class="text-subtext1 text-sm md:text-base leading-relaxed line-clamp-3">
+								{post.excerpt || `Read more about ${formatSlug(post.slug)}...`}
 							</p>
 						</div>
-						<div class="text-mauve opacity-0 group-hover:opacity-100 transition-opacity self-end mt-4">
-							<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="md:w-6 md:h-6"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+						<div class="text-mauve opacity-0 group-hover:opacity-100 transition-opacity self-end md:self-auto shrink-0 hidden md:block">
+							<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" class="md:w-8 md:h-8"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
 						</div>
 					</article>
 				</a>
diff --git a/frontend/src/pages/posts/[slug].astro b/frontend/src/pages/posts/[slug].astro
index 63ccf3c..06fdd3a 100644
--- a/frontend/src/pages/posts/[slug].astro
+++ b/frontend/src/pages/posts/[slug].astro
@@ -40,23 +40,23 @@ function formatSlug(slug: string) {
 ---
 
 <Layout title={post ? formatSlug(post.slug) : 'Post'}>
-  <article class="glass p-12 mb-12 animate-in fade-in slide-in-from-bottom-4 duration-700">
-    <header class="mb-12 border-b border-white/5 pb-12">
-      <a href="/" 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>
+  <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">
+        <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 justify-between items-start mt-4">
-          <h1 class="text-5xl font-extrabold text-mauve">
+        <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-4 py-2 rounded border border-surface1 transition-colors items-center gap-2"
+            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"
           >
-            <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="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>
+            <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>
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index cf03023..066658f 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -85,17 +85,17 @@ body {
 }
 
 /* Typography styles for Markdown */
-.prose h1 { @apply text-4xl font-bold mb-6 text-mauve; }
-.prose h2 { @apply text-3xl font-semibold mb-4 mt-8 text-lavender; }
-.prose h3 { @apply text-2xl font-medium mb-3 mt-6 text-blue; }
-.prose p { @apply mb-4 leading-relaxed; }
+.prose h1 { @apply text-3xl md:text-4xl font-bold mb-4 md:mb-6 text-mauve; }
+.prose h2 { @apply text-2xl md:text-3xl font-semibold mb-3 md:mb-4 mt-6 md:mt-8 text-lavender; }
+.prose h3 { @apply text-xl md:text-2xl font-medium mb-2 md:mb-3 mt-4 md:mt-6 text-blue; }
+.prose p { @apply mb-3 md:mb-4 leading-relaxed text-sm md:text-base; }
 .prose a { @apply text-blue hover:text-sky underline underline-offset-4 decoration-2 decoration-blue/30 hover:decoration-sky transition-colors; }
-.prose ul { @apply list-disc list-inside mb-4; }
-.prose ol { @apply list-decimal list-inside mb-4; }
-.prose blockquote { @apply border-l-4 border-surface2 pl-4 italic text-subtext0 my-6; }
-.prose pre { @apply bg-crust p-4 rounded-xl overflow-x-auto border border-white/5 my-6; }
-.prose code { @apply bg-surface0 px-1.5 py-0.5 rounded text-sm font-mono text-peach; }
-.prose img { @apply max-w-full h-auto rounded-xl shadow-lg border border-white/5 my-8; }
+.prose ul { @apply list-disc list-inside mb-3 md:mb-4 text-sm md:text-base; }
+.prose ol { @apply list-decimal list-inside mb-3 md:mb-4 text-sm md:text-base; }
+.prose blockquote { @apply border-l-4 border-surface2 pl-4 italic text-subtext0 my-4 md:my-6 text-sm md:text-base; }
+.prose pre { @apply bg-crust p-3 md:p-4 rounded-xl overflow-x-auto border border-white/5 my-4 md:my-6 text-xs md:text-sm; }
+.prose code { @apply bg-surface0 px-1.5 py-0.5 rounded text-xs md:text-sm font-mono text-peach; }
+.prose img { @apply max-w-full h-auto rounded-xl shadow-lg border border-white/5 my-6 md:my-8; }
 
 .glass {
   background-color: color-mix(in srgb, var(--surface0) 60%, transparent);