@stacksjs/defaults 0.70.207 → 0.70.208

package/views/dashboard/content/authors/index.stx

@@ -0,0 +1,171 @@
+@extends('layouts/default')
+
+@section('content')
+<div class="p-6 min-h-screen text-neutral-950 dark:text-neutral-100 bg-neutral-50 dark:bg-neutral-950">
+  <div class="flex flex-col gap-6 mx-auto max-w-6xl">
+    <header class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between pb-5 border-b border-neutral-200 dark:border-neutral-800">
+      <div>
+        <p class="font-semibold text-blue-600 text-xs tracking-wide uppercase dark:text-blue-400">CMS</p>
+        <h1 class="mt-1 font-semibold text-2xl tracking-tight">Authors</h1>
+        <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">Manage the authors available to posts and pages.</p>
+      </div>
+      <button id="new-author-button" type="button" class="inline-flex gap-2 items-center px-3 py-2 font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md shadow-sm">
+        <span class="h-4 w-4 i-hugeicons-plus-sign"></span>
+        New Author
+      </button>
+    </header>
+
+    <section class="grid gap-4 md:grid-cols-3">
+      <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-lg dark:border-neutral-800 shadow-sm">
+        <p class="text-neutral-500 text-sm dark:text-neutral-400">Total Authors</p>
+        <p id="author-total" class="mt-2 font-semibold text-3xl">0</p>
+      </div>
+      <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-lg dark:border-neutral-800 shadow-sm">
+        <p class="text-neutral-500 text-sm dark:text-neutral-400">Assigned Posts</p>
+        <p id="author-posts" class="mt-2 font-semibold text-3xl text-green-600 dark:text-green-400">0</p>
+      </div>
+      <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-lg dark:border-neutral-800 shadow-sm">
+        <p class="text-neutral-500 text-sm dark:text-neutral-400">Newest</p>
+        <p id="author-newest" class="mt-2 font-semibold text-2xl truncate">-</p>
+      </div>
+    </section>
+
+    <section class="bg-white dark:bg-neutral-900 border border-neutral-200 rounded-lg dark:border-neutral-800 shadow-sm">
+      <div class="p-4 border-b border-neutral-200 dark:border-neutral-800">
+        <input id="author-search" type="search" placeholder="Search authors..." class="px-3 py-2 max-w-md w-full text-sm bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20" />
+      </div>
+      <div class="overflow-x-auto">
+        <table class="min-w-full text-sm divide-neutral-200 divide-y dark:divide-neutral-800">
+          <thead class="font-semibold text-left text-neutral-500 text-xs uppercase dark:text-neutral-400 bg-neutral-50 dark:bg-neutral-900">
+            <tr>
+              <th class="px-4 py-3">Name</th>
+              <th class="px-4 py-3">Email</th>
+              <th class="px-4 py-3">Posts</th>
+              <th class="px-4 py-3">Created</th>
+              <th class="px-4 py-3 text-right">Actions</th>
+            </tr>
+          </thead>
+          <tbody id="authors-table" class="divide-neutral-200 divide-y dark:divide-neutral-800"></tbody>
+        </table>
+      </div>
+      <div id="authors-empty" class="hidden p-10 text-center text-neutral-500 text-sm dark:text-neutral-400">No authors found.</div>
+    </section>
+  </div>
+</div>
+
+<dialog id="author-dialog" class="p-0 max-w-lg w-full text-neutral-950 dark:text-neutral-100 bg-white backdrop:bg-black/40 dark:bg-neutral-900 border border-neutral-200 rounded-lg dark:border-neutral-800 shadow-xl">
+  <form id="author-form" method="dialog">
+    <div class="px-5 py-4 border-b border-neutral-200 dark:border-neutral-800">
+      <h2 class="font-semibold text-lg">New Author</h2>
+    </div>
+    <div class="grid gap-4 p-5">
+      <label class="grid gap-1 font-medium text-sm">Name <input id="author-name" required class="px-3 py-2 text-sm bg-white dark:bg-neutral-950 border border-neutral-300 rounded-md dark:border-neutral-700" /></label>
+      <label class="grid gap-1 font-medium text-sm">Email <input id="author-email" type="email" required class="px-3 py-2 text-sm bg-white dark:bg-neutral-950 border border-neutral-300 rounded-md dark:border-neutral-700" /></label>
+    </div>
+    <div class="flex gap-2 justify-end px-5 py-4 border-neutral-200 border-t dark:border-neutral-800">
+      <button id="author-cancel" type="button" class="px-3 py-2 font-medium text-sm border border-neutral-300 rounded-md dark:border-neutral-700">Cancel</button>
+      <button type="submit" class="px-3 py-2 font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md">Create Author</button>
+    </div>
+  </form>
+</dialog>
+
+<script>
+;(function () {
+  var api = '/api/dashboard/authors'
+  var authors = []
+  var assignedPostCount = 0
+  var table = document.getElementById('authors-table')
+  var empty = document.getElementById('authors-empty')
+  var dialog = document.getElementById('author-dialog')
+  var search = document.getElementById('author-search')
+
+  function $(id) { return document.getElementById(id) }
+  // CSRF is default-on for POST/PATCH/DELETE via a stateless double-submit
+  // cookie: the server seeds a non-HttpOnly X-CSRF-Token cookie on safe
+  // responses and the client echoes it back in the header. The list request on
+  // page load seeds it, so the token is present by the time a save can happen.
+  // See defaults/app/Middleware/Csrf.ts.
+  function writeHeaders() {
+    var headers = { 'content-type': 'application/json' }
+    var match = document.cookie.match(/(?:^|;\s*)X-CSRF-Token=([^;]*)/)
+    if (match) headers['X-CSRF-Token'] = decodeURIComponent(match[1])
+    return headers
+  }
+  function escapeHtml(value) {
+    return String(value || '').replace(/[&<>"']/g, function (ch) {
+      return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[ch]
+    })
+  }
+  function formatDate(value) {
+    if (!value) return '-'
+    return new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).format(new Date(value))
+  }
+  function render() {
+    var q = search.value.toLowerCase()
+    var rows = authors.filter(function (author) {
+      return !q || [author.name, author.email].join(' ').toLowerCase().indexOf(q) !== -1
+    })
+    $('author-total').textContent = String(authors.length)
+    $('author-posts').textContent = String(assignedPostCount)
+    $('author-newest').textContent = authors[0] ? authors[0].name : '-'
+    empty.classList.toggle('hidden', rows.length > 0)
+    table.innerHTML = rows.map(function (author) {
+      return '<tr class="hover:bg-neutral-50 dark:hover:bg-neutral-950/70">' +
+        '<td class="px-4 py-3 font-medium">' + escapeHtml(author.name) + '</td>' +
+        '<td class="px-4 py-3 text-neutral-600 dark:text-neutral-300">' + escapeHtml(author.email) + '</td>' +
+        '<td class="px-4 py-3 text-neutral-600 dark:text-neutral-300">' + Number(author.postCount || 0) + '</td>' +
+        '<td class="px-4 py-3 text-neutral-600 dark:text-neutral-300">' + formatDate(author.created_at) + '</td>' +
+        '<td class="px-4 py-3 text-right"><button type="button" data-id="' + author.id + '" class="p-2 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/40 rounded"><span class="block h-4 w-4 i-hugeicons-waste"></span></button></td>' +
+      '</tr>'
+    }).join('')
+  }
+  async function load() {
+    var res = await fetch(api)
+    if (!res.ok) throw new Error('Unable to load CMS authors (' + res.status + ').')
+    var json = await res.json()
+    authors = Array.isArray(json.authors) ? json.authors : []
+    assignedPostCount = Number(json.assignedPostCount || 0)
+    render()
+  }
+  document.getElementById('new-author-button').addEventListener('click', function () {
+    $('author-name').value = ''
+    $('author-email').value = ''
+    dialog.showModal()
+  })
+  $('author-cancel').addEventListener('click', function () { dialog.close() })
+  document.getElementById('author-form').addEventListener('submit', async function (event) {
+    event.preventDefault()
+    var res = await fetch(api, {
+      method: 'POST',
+      headers: writeHeaders(),
+      body: JSON.stringify({ name: $('author-name').value, email: $('author-email').value }),
+    })
+    if (!res.ok) {
+      var err = await res.json().catch(function () { return {} })
+      alert(err.message || err.error || 'Could not create author')
+      return
+    }
+    dialog.close()
+    await load()
+  })
+  table.addEventListener('click', async function (event) {
+    var button = event.target.closest('button[data-id]')
+    if (!button || !confirm('Delete this author? Their posts are kept but left without an author.')) return
+    var res = await fetch(api + '/' + button.dataset.id, { method: 'DELETE', headers: writeHeaders() })
+    if (!res.ok) {
+      var err = await res.json().catch(function () { return {} })
+      alert(err.message || err.error || 'Could not delete author')
+      return
+    }
+    await load()
+  })
+  search.addEventListener('input', render)
+
+  load().catch(function (error) {
+    empty.classList.remove('hidden')
+    empty.textContent = error.message || 'Unable to load CMS authors.'
+  })
+})()
+</script>
+
+@endsection

package/views/dashboard/content/blog/index.stx

@@ -0,0 +1,493 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Blog')
+<div class="p-6 min-h-screen text-neutral-950 dark:text-neutral-100 bg-neutral-50 dark:bg-neutral-950">
+  <div class="flex flex-col gap-6 mx-auto max-w-7xl">
+
+    <header class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between pb-5 border-b border-neutral-200 dark:border-neutral-800">
+      <div>
+        <h1 class="font-semibold text-2xl tracking-tight">Blog</h1>
+        <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">
+          Posts are markdown files in <code class="px-1 py-0.5 text-xs bg-neutral-200 dark:bg-neutral-800 rounded">content/blog</code>. Saving writes the file. Commit and push to publish.
+        </p>
+      </div>
+      <div class="flex flex-wrap gap-2">
+        <a href="/blog" target="_blank" rel="noopener" class="inline-flex gap-2 items-center px-3 py-2 font-medium text-neutral-800 text-sm dark:text-neutral-100 hover:bg-white dark:hover:bg-neutral-900 border border-neutral-300 rounded-md dark:border-neutral-700">
+          <span class="h-4 w-4 i-hugeicons-view"></span>
+          View blog
+        </a>
+        <button type="button" @click="openEditor(null)" class="inline-flex gap-2 items-center px-3 py-2 font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md shadow-sm">
+          <span class="h-4 w-4 i-hugeicons-plus-sign"></span>
+          New post
+        </button>
+      </div>
+    </header>
+
+    <section class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-md dark:border-neutral-800">
+        <p class="text-neutral-500 text-sm dark:text-neutral-400">Total</p>
+        <p class="mt-2 font-semibold text-3xl">{{ posts().length }}</p>
+      </div>
+      <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-md dark:border-neutral-800">
+        <p class="text-neutral-500 text-sm dark:text-neutral-400">Published</p>
+        <p class="mt-2 font-semibold text-3xl text-green-600 dark:text-green-400">{{ publishedCount() }}</p>
+      </div>
+      <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-md dark:border-neutral-800">
+        <p class="text-neutral-500 text-sm dark:text-neutral-400">Drafts</p>
+        <p class="mt-2 font-semibold text-3xl text-amber-600 dark:text-amber-400">{{ draftCount() }}</p>
+      </div>
+      <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-md dark:border-neutral-800">
+        <p class="text-neutral-500 text-sm dark:text-neutral-400">Featured</p>
+        <p class="mt-2 font-semibold text-3xl">{{ featuredCount() }}</p>
+      </div>
+    </section>
+
+    <section class="bg-white dark:bg-neutral-900 border border-neutral-200 rounded-md dark:border-neutral-800">
+      <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between p-4 border-b border-neutral-200 dark:border-neutral-800">
+        <div class="relative flex-1 max-w-md">
+          <span class="absolute left-3 top-1/2 h-4 w-4 text-neutral-500 pointer-events-none -translate-y-1/2 i-hugeicons-search-01"></span>
+          <label for="blog-search" class="sr-only">Search posts</label>
+          <input
+            id="blog-search"
+            type="search"
+            x-model="searchQuery"
+            placeholder="Search posts"
+            class="placeholder-neutral-500 pl-9 pr-3 py-2 w-full text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30"
+          />
+        </div>
+        <div>
+          <label for="blog-status" class="sr-only">Filter by status</label>
+          <select
+            id="blog-status"
+            x-model="statusFilter"
+            class="px-3 py-2 text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 rounded-md dark:border-neutral-700"
+          >
+            <option value="all">All statuses</option>
+            <option value="published">Published</option>
+            <option value="draft">Draft</option>
+          </select>
+        </div>
+      </div>
+
+      <!-- Error: the list request failed. Offers a retry rather than a dead end. -->
+      <div x-show="loadError()" class="flex flex-col gap-3 items-center px-6 py-12 text-center">
+        <span class="h-8 w-8 text-red-500 i-hugeicons-alert-02"></span>
+        <p class="font-medium">Couldn't load posts</p>
+        <p class="max-w-md text-neutral-500 text-sm dark:text-neutral-400">{{ loadError() }}</p>
+        <button type="button" @click="load()" class="mt-1 px-3 py-2 font-medium text-neutral-800 text-sm dark:text-neutral-100 border border-neutral-300 rounded-md dark:border-neutral-700">
+          Try again
+        </button>
+      </div>
+
+      <!-- Loading: skeleton rows matching the table's shape. -->
+      <div x-show="isLoading()" class="p-4 space-y-3">
+        @foreach(skeletonRows as row)
+          <div class="flex gap-4 items-center animate-pulse">
+            <div class="flex-1 space-y-2">
+              <div class="h-3.5 w-1/3 bg-neutral-200 dark:bg-neutral-800 rounded"></div>
+              <div class="h-3 w-2/3 bg-neutral-200 dark:bg-neutral-800 rounded"></div>
+            </div>
+            <div class="h-5 w-16 bg-neutral-200 dark:bg-neutral-800 rounded-full"></div>
+            <div class="h-3 w-20 bg-neutral-200 dark:bg-neutral-800 rounded"></div>
+          </div>
+        @endforeach
+      </div>
+
+      <div x-show="!isLoading() && !loadError() && filteredPosts().length > 0" class="overflow-x-auto">
+        <table class="min-w-full text-sm divide-neutral-200 divide-y dark:divide-neutral-800">
+          <thead class="font-semibold text-left text-neutral-600 text-xs uppercase dark:text-neutral-300 bg-neutral-50 dark:bg-neutral-950/60">
+            <tr>
+              <th scope="col" class="px-4 py-3">Post</th>
+              <th scope="col" class="px-4 py-3">Status</th>
+              <th scope="col" class="px-4 py-3">Date</th>
+              <th scope="col" class="px-4 py-3">Length</th>
+              <th scope="col" class="px-4 py-3"><span class="sr-only">Actions</span></th>
+            </tr>
+          </thead>
+          <tbody class="divide-neutral-200 divide-y dark:divide-neutral-800">
+            <template :for="post in filteredPosts">
+              <tr class="hover:bg-neutral-50 dark:hover:bg-neutral-950/60">
+                <td class="px-4 py-3">
+                  <div class="flex gap-2 items-center">
+                    <span class="font-medium">{{ post.title }}</span>
+                    <span x-show="post.featured" class="inline-flex px-1.5 py-0.5 font-medium text-[11px] text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-900/40 rounded">Featured</span>
+                  </div>
+                  <div class="mt-1 max-w-xl text-neutral-500 text-xs truncate dark:text-neutral-400">{{ post.description || post.slug }}</div>
+                </td>
+                <td class="px-4 py-3">
+                  <span :class="statusClass(post.draft)" class="inline-flex px-2 py-0.5 font-medium text-xs rounded-full">
+                    {{ post.draft ? 'Draft' : 'Published' }}
+                  </span>
+                </td>
+                <td class="px-4 py-3 text-neutral-600 dark:text-neutral-300">{{ formatDate(post.date) }}</td>
+                <td class="px-4 py-3 text-neutral-600 dark:text-neutral-300">{{ post.readingTime }} min read</td>
+                <td class="px-4 py-3">
+                  <div class="flex gap-1 justify-end">
+                    <a
+                      x-show="!post.draft"
+                      :href="'/blog/' + post.slug"
+                      target="_blank"
+                      rel="noopener"
+                      :title="'View ' + post.title"
+                      class="p-2 text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded"
+                    >
+                      <span class="block h-4 w-4 i-hugeicons-view"></span>
+                    </a>
+                    <button type="button" @click="openEditor(post)" :title="'Edit ' + post.title" class="p-2 text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded">
+                      <span class="block h-4 w-4 i-hugeicons-edit-01"></span>
+                    </button>
+                    <button type="button" @click="askDelete(post)" :title="'Delete ' + post.title" class="p-2 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/40 rounded">
+                      <span class="block h-4 w-4 i-hugeicons-waste"></span>
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Empty: distinguishes "no posts yet" from "nothing matched the filter". -->
+      <div x-show="!isLoading() && !loadError() && filteredPosts().length === 0" class="flex flex-col gap-3 items-center px-6 py-16 text-center">
+        <span class="h-8 w-8 text-neutral-400 i-hugeicons-quill-write-02"></span>
+        <p class="font-medium">{{ posts().length === 0 ? 'No posts yet' : 'No posts match your filters' }}</p>
+        <p class="max-w-sm text-neutral-500 text-sm dark:text-neutral-400">
+          {{ posts().length === 0 ? 'Your first post becomes a markdown file in content/blog.' : 'Try a different search term or status.' }}
+        </p>
+        <button x-show="posts().length === 0" type="button" @click="openEditor(null)" class="mt-1 px-3 py-2 font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md">
+          Write your first post
+        </button>
+        <button x-show="posts().length > 0" type="button" @click="clearFilters()" class="mt-1 px-3 py-2 font-medium text-neutral-800 text-sm dark:text-neutral-100 border border-neutral-300 rounded-md dark:border-neutral-700">
+          Clear filters
+        </button>
+      </div>
+    </section>
+  </div>
+
+  <!-- Editor -->
+  <div x-show="isEditorOpen()" class="flex fixed inset-0 overflow-y-auto z-40 items-start justify-center p-4 sm:p-6">
+    <div class="fixed inset-0 bg-neutral-950/60" @click="closeEditor()"></div>
+
+    <div role="dialog" aria-modal="true" aria-labelledby="editor-title" class="relative z-10 my-8 max-w-3xl w-full bg-white dark:bg-neutral-900 border border-neutral-200 rounded-lg dark:border-neutral-800 shadow-xl">
+      <div class="flex items-center justify-between px-5 py-4 border-b border-neutral-200 dark:border-neutral-800">
+        <h2 id="editor-title" class="font-semibold text-lg">{{ editingSlug() ? 'Edit post' : 'New post' }}</h2>
+        <button type="button" @click="closeEditor()" aria-label="Close editor" class="p-2 text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded">
+          <span class="block h-4 w-4 i-hugeicons-cancel-01"></span>
+        </button>
+      </div>
+
+      <div class="overflow-y-auto p-5 space-y-4 max-h-[70vh]">
+        <div x-show="formError()" class="flex gap-2 items-start px-3 py-2 text-red-800 text-sm dark:text-red-200 bg-red-50 dark:bg-red-950/40 border border-red-200 rounded-md dark:border-red-900">
+          <span class="shrink-0 mt-0.5 h-4 w-4 i-hugeicons-alert-02"></span>
+          <span>{{ formError() }}</span>
+        </div>
+
+        <div class="grid gap-4 sm:grid-cols-2">
+          <div class="flex flex-col gap-2 sm:col-span-2">
+            <label for="post-title" class="font-medium text-sm">Title</label>
+            <input id="post-title" type="text" x-model="formTitle" class="px-3 py-2 text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30" />
+          </div>
+
+          <div class="flex flex-col gap-2 sm:col-span-2">
+            <label for="post-slug" class="font-medium text-sm">Slug</label>
+            <input id="post-slug" type="text" x-model="formSlug" :placeholder="suggestedSlug()" class="placeholder-neutral-500 px-3 py-2 font-mono text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30" />
+            <p class="text-neutral-500 text-xs dark:text-neutral-400">The file name and public URL: /blog/{{ formSlug() || suggestedSlug() || 'your-post' }}</p>
+          </div>
+
+          <div class="flex flex-col gap-2 sm:col-span-2">
+            <label for="post-description" class="font-medium text-sm">Description</label>
+            <input id="post-description" type="text" x-model="formDescription" class="px-3 py-2 text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30" />
+            <p class="text-neutral-500 text-xs dark:text-neutral-400">Used as the excerpt, the meta description, and the RSS summary.</p>
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <label for="post-date" class="font-medium text-sm">Date</label>
+            <input id="post-date" type="date" x-model="formDate" class="px-3 py-2 text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30" />
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <label for="post-author" class="font-medium text-sm">Author</label>
+            <input id="post-author" type="text" x-model="formAuthor" class="px-3 py-2 text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30" />
+          </div>
+
+          <div class="flex flex-col gap-2 sm:col-span-2">
+            <label for="post-poster" class="font-medium text-sm">Poster image</label>
+            <input id="post-poster" type="text" x-model="formPoster" placeholder="/assets/images/example.svg" class="placeholder-neutral-500 px-3 py-2 text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30" />
+          </div>
+
+          <div class="flex flex-col gap-2 sm:col-span-2">
+            <label for="post-body" class="font-medium text-sm">Content</label>
+            <textarea id="post-body" x-model="formBody" rows="14" class="px-3 py-2 font-mono text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 resize-y"></textarea>
+            <p class="text-neutral-500 text-xs dark:text-neutral-400">Markdown. {{ bodyWordCount() }} words, about {{ bodyReadingTime() }} min read.</p>
+          </div>
+        </div>
+
+        <div class="flex flex-col gap-3 sm:flex-row sm:gap-6 pt-2 border-neutral-200 border-t dark:border-neutral-800">
+          <label class="flex gap-2 items-center text-sm">
+            <input type="checkbox" x-model="formDraft" class="h-4 w-4 text-blue-600 border-neutral-300 rounded dark:border-neutral-600" />
+            <span>Draft, keep off the public blog</span>
+          </label>
+          <label class="flex gap-2 items-center text-sm">
+            <input type="checkbox" x-model="formFeatured" class="h-4 w-4 text-blue-600 border-neutral-300 rounded dark:border-neutral-600" />
+            <span>Feature at the top of the listing</span>
+          </label>
+        </div>
+      </div>
+
+      <div class="flex gap-2 justify-end px-5 py-4 border-neutral-200 border-t dark:border-neutral-800">
+        <button type="button" @click="closeEditor()" class="px-3 py-2 font-medium text-neutral-800 text-sm dark:text-neutral-100 border border-neutral-300 rounded-md dark:border-neutral-700">Cancel</button>
+        <button type="button" @click="submit()" :disabled="isSaving()" class="inline-flex gap-2 items-center px-3 py-2 font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md disabled:opacity-60">
+          <span x-show="isSaving()" class="h-4 w-4 animate-spin i-hugeicons-loading-03"></span>
+          {{ isSaving() ? 'Saving' : 'Save post' }}
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Delete confirmation -->
+  <div x-show="postToDelete()" class="flex fixed inset-0 z-50 items-center justify-center p-4">
+    <div class="fixed inset-0 bg-neutral-950/60" @click="cancelDelete()"></div>
+
+    <div role="dialog" aria-modal="true" aria-labelledby="delete-title" class="relative z-10 p-5 max-w-md w-full bg-white dark:bg-neutral-900 border border-neutral-200 rounded-lg dark:border-neutral-800 shadow-xl">
+      <h2 id="delete-title" class="font-semibold text-lg">Delete this post?</h2>
+      <p class="mt-2 text-neutral-600 text-sm dark:text-neutral-300">
+        This deletes the file <code class="px-1 py-0.5 text-xs bg-neutral-100 dark:bg-neutral-800 rounded">content/blog/{{ deleteTargetSlug() }}.md</code>. It stays in git history until you commit the deletion.
+      </p>
+      <div class="flex gap-2 justify-end mt-5">
+        <button type="button" @click="cancelDelete()" class="px-3 py-2 font-medium text-neutral-800 text-sm dark:text-neutral-100 border border-neutral-300 rounded-md dark:border-neutral-700">Cancel</button>
+        <button type="button" @click="confirmDelete()" class="px-3 py-2 font-semibold text-sm text-white bg-red-600 hover:bg-red-500 rounded-md">Delete post</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script client>
+// Plain async transport for /api/dashboard/blog, which reads and writes the
+// markdown files in content/blog. It owns no state; the signals below do.
+import { deleteBlogPost, fetchBlogPost, fetchBlogPosts, saveBlogPost } from '~/storage/framework/defaults/functions/blog'
+
+// Fixed-length list purely to render the loading skeleton rows.
+const skeletonRows = [1, 2, 3, 4]
+
+const posts = state([])
+const isLoading = state(true)
+const isSaving = state(false)
+const loadError = state('')
+const searchQuery = state('')
+const statusFilter = state('all')
+
+// Editor state. `editingSlug` doubles as the mode flag: empty means "new post",
+// and it holds the ORIGINAL slug so a slug edit is sent as a rename.
+const isEditorOpen = state(false)
+const editingSlug = state('')
+const formError = state('')
+const formTitle = state('')
+const formSlug = state('')
+const formDescription = state('')
+const formDate = state('')
+const formAuthor = state('')
+const formPoster = state('')
+const formBody = state('')
+const formDraft = state(false)
+const formFeatured = state(false)
+
+const postToDelete = state(null)
+
+// Read by the delete dialog's copy; kept as a derived signal so the template
+// never has to reach through a possibly-null post.
+const deleteTargetSlug = derived(() => {
+  const post = postToDelete()
+
+  return post ? post.slug : ''
+})
+
+const publishedCount = derived(() => posts().filter(p => !p.draft).length)
+const draftCount = derived(() => posts().filter(p => p.draft).length)
+const featuredCount = derived(() => posts().filter(p => p.featured).length)
+
+const filteredPosts = derived(() => {
+  const q = searchQuery().trim().toLowerCase()
+  const status = statusFilter()
+
+  return posts().filter((post) => {
+    if (status === 'draft' && !post.draft)
+      return false
+    if (status === 'published' && post.draft)
+      return false
+    if (!q)
+      return true
+
+    return `${post.title} ${post.description} ${post.slug}`.toLowerCase().includes(q)
+  })
+})
+
+// Mirrors slugify() in blog-admin.ts so the placeholder matches what the server
+// will actually write when the slug field is left empty.
+function slugify(input) {
+  return String(input)
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .slice(0, 80)
+}
+
+const suggestedSlug = derived(() => slugify(formTitle()))
+const bodyWordCount = derived(() => formBody().split(/\s+/).filter(Boolean).length)
+const bodyReadingTime = derived(() => Math.max(1, Math.round(bodyWordCount() / 200)))
+
+function statusClass(draft) {
+  return draft
+    ? 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-200'
+    : 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-200'
+}
+
+function formatDate(value) {
+  if (!value)
+    return 'No date'
+
+  const date = new Date(value)
+
+  return Number.isNaN(date.getTime())
+    ? value
+    : date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
+}
+
+function clearFilters() {
+  searchQuery.set('')
+  statusFilter.set('all')
+}
+
+async function openEditor(post) {
+  formError.set('')
+  editingSlug.set(post ? post.slug : '')
+  isEditorOpen.set(true)
+
+  if (!post) {
+    formTitle.set('')
+    formSlug.set('')
+    formDescription.set('')
+    formDate.set(new Date().toISOString().slice(0, 10))
+    formAuthor.set('')
+    formPoster.set('')
+    formBody.set('')
+    formDraft.set(true)
+    formFeatured.set(false)
+    return
+  }
+
+  // The list omits the markdown body, so fetch the full post. Seed the fields
+  // from the list row first so the editor is never blank while that request
+  // is in flight.
+  formTitle.set(post.title)
+  formSlug.set(post.slug)
+  formDescription.set(post.description)
+  formDate.set(post.date)
+  formAuthor.set(post.author)
+  formPoster.set(post.poster)
+  formDraft.set(post.draft)
+  formFeatured.set(post.featured)
+  formBody.set('')
+
+  try {
+    const full = await fetchBlogPost(post.slug)
+
+    // Ignore a late response if the user already closed or switched posts.
+    if (isEditorOpen() && editingSlug() === post.slug)
+      formBody.set(full.body)
+  }
+  catch (error) {
+    formError.set(`Couldn't load this post's content: ${error.message}`)
+  }
+}
+
+function closeEditor() {
+  isEditorOpen.set(false)
+  editingSlug.set('')
+  formError.set('')
+}
+
+async function submit() {
+  if (!formTitle().trim()) {
+    formError.set('A title is required.')
+    return
+  }
+
+  isSaving.set(true)
+  formError.set('')
+
+  try {
+    const saved = await saveBlogPost({
+      slug: formSlug().trim() || suggestedSlug(),
+      title: formTitle().trim(),
+      description: formDescription().trim(),
+      date: formDate(),
+      author: formAuthor().trim(),
+      authorBio: '',
+      poster: formPoster().trim(),
+      featured: formFeatured(),
+      draft: formDraft(),
+      body: formBody(),
+    }, editingSlug())
+
+    const original = editingSlug()
+
+    posts.update(list => (original
+      ? list.map(p => (p.slug === original ? saved : p))
+      : [saved, ...list]))
+
+    closeEditor()
+  }
+  catch (error) {
+    // Keep the editor open on failure so the author's work is not thrown away.
+    formError.set(error.message)
+  }
+  finally {
+    isSaving.set(false)
+  }
+}
+
+function askDelete(post) {
+  postToDelete.set(post)
+}
+
+function cancelDelete() {
+  postToDelete.set(null)
+}
+
+async function confirmDelete() {
+  const post = postToDelete()
+  if (!post)
+    return
+
+  postToDelete.set(null)
+
+  try {
+    await deleteBlogPost(post.slug)
+    posts.update(list => list.filter(p => p.slug !== post.slug))
+  }
+  catch (error) {
+    loadError.set(`Couldn't delete "${post.title}": ${error.message}`)
+  }
+}
+
+async function load() {
+  loadError.set('')
+
+  try {
+    const { posts: list } = await fetchBlogPosts()
+    posts.set(list)
+  }
+  catch (error) {
+    loadError.set(error.message)
+  }
+  finally {
+    isLoading.set(false)
+  }
+}
+
+// onMount, not effect: load() writes the same `posts` signal the derived signals
+// read, so an effect would re-trigger itself on every load.
+onMount(load)
+</script>
+@endsection