refactor

2026-03-26 00:50:11 +01:00
parent 798552d16f
commit c61a5ff3c5
15 changed files with 1005 additions and 995 deletions
@@ -0,0 +1,25 @@
+---
+interface Props {
+    slug: string;
+    excerpt?: string;
+    formatSlug: (slug: string) => string;
+}
+
+const { slug, excerpt, formatSlug } = Astro.props;
+---
+
+<a href={`/posts/${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] 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(slug)}
+            </h2>
+            <p class="text-text text-sm md:text-base leading-relaxed line-clamp-3">
+                {excerpt || `Read more about ${formatSlug(slug)}...`}
+            </p>
+        </div>
+        <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>
@@ -0,0 +1,18 @@
+export function showAlert(msg: string, type: 'success' | 'error', elementId: string = 'alert') {
+    const alertEl = document.getElementById(elementId);
+    if (alertEl) {
+        alertEl.textContent = msg;
+        alertEl.className = `p-4 rounded-lg mb-6 text-sm md:text-base ${
+            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' });
+        
+        setTimeout(() => { 
+            alertEl.classList.add('hidden'); 
+        }, 5000);
+    }
+}