Add editable pages

slices/admin/templates/index.html.slim

@@ -3,6 +3,8 @@ div class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:
 
 div class="max-w-prose mx-auto prose dark:prose-invert"
   ul
+    li
+      a href="/admin/pages" Pages
     li
       a href="/admin/posts" Posts
     li

slices/admin/templates/pages/edit.html.slim

@@ -0,0 +1,18 @@
+
+article class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200 prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline prose-img:rounded"
+  form action="/admin/pages/#{page.slug}" method="POST"
+    div class="mb-4"
+      label for="name" Name
+      input type="text" id="name" name="page[name]" class="text-gray-800 w-full border-blue-200 border-2 rounded p-2" value=page.name
+    div class="mb-4"
+      label for="slug" slug
+      input type="text" id="slug" name="page[slug]" class="text-gray-800 w-full border-blue-200 border-2 rounded p-2" value=page.slug
+    div class="mb-4"
+      label for="body" Body
+      textarea name="page[content]" id="body" class="text-gray-800 w-full border-blue-200 border-2 rounded p-2" x-data="{ resize: () => { $el.style.height = '5px'; $el.style.height = $el.scrollHeight + 'px' } }" x-init="resize()" @input="resize()"
+        == markdown_content
+    div class="mb-4"
+      label for="published_at" Publish date
+      input type="date" id="published_at" name="page[published_at]" class="text-gray-800 w-full border-blue-200 border-2 rounded p-2" value=page.published_at
+    button class="rounded bg-blue-100 hover:bg-blue-200 text-blue-600 px-2 hover:cursor-pointer" type="submit"
+      = "Update"

slices/admin/templates/pages/index.html.slim

@@ -0,0 +1,51 @@
+div class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200"
+  h1 Admin // Pages
+
+div class="max-w-prose mx-auto" x-data="{ activeTab:  0 }"
+  div class="mb-4"
+    a href="/admin/pages/new" class="text-gray-200 cursor-pointer p-2 border-2 mr-2 rounded border-blue-400 bg-blue-400 text-blue-900" New page
+  div class="flex"
+    a href="#" class="text-gray-200 cursor-pointer p-2 border-2 mr-2 rounded border-blue-400" :class="{ 'bg-blue-400 text-blue-900': activeTab === 0 }" @click="activeTab = 0" class="tab-control" Published
+    a href="#" class="text-gray-200 cursor-pointer p-2 border-2 rounded border-blue-400" :class="{ 'bg-blue-400 text-blue-900': activeTab === 1 }" @click="activeTab = 1" class="tab-control" Un published
+  table class="prose dark:prose-invert table-auto prose-a:text-blue-600 prose-a:no-underline"
+    thead
+      th Details
+      th Date
+      th colspan="2" Actions
+    tbody class="{ 'active': activeTab === 0 }" x-show.transition.in.opacity.duration.600="activeTab === 0"
+      - published_pages.each do |page|
+        tr id="post-#{page.slug}"
+          td
+            div
+              = page.name
+            a class="no-underline" href="/#{page.slug}"
+              small class="text-gray-400 dark:text-gray-600" = page.slug
+          td
+            = page.published_at&.strftime("%d %b %Y")
+          td
+            a href="/admin/pages/#{page.slug}/edit" edit
+          td
+            button class="text-red-600" hx-delete="/admin/pages/#{page.slug}" hx-target="#post-#{page.slug}" delete
+          td
+            button hx-post="/admin/pages/#{page.slug}/archive" unpublish
+    tbody class="{ 'active': activeTab === 1 }" x-show.transition.in.opacity.duration.600="activeTab === 1"
+      - unpublished_pages.each do |page|
+        tr id="post-#{page.slug}"
+          td
+            div
+              = page.name
+            a class="no-underline" href="/#{page.slug}"
+              small class="text-gray-400 dark:text-gray-600" = page.slug
+          td
+            = page.published_at&.strftime("%d %b %Y")
+          td
+            a href="/admin/pages/#{page.slug}/edit" edit
+          td
+            button class="text-red-600" hx-delete="/admin/pages/#{page.slug}" hx-target="#post-#{page.slug}" delete
+          td
+            button hx-post="/admin/pages/#{page.slug}/publish" publish
+
+div class="max-w-screen-md mx-auto border-t border-solid border-gray-200 dark:border-gray-600"
+
+
+

slices/admin/templates/pages/new.html.slim

@@ -0,0 +1,17 @@
+
+article class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200 prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline prose-img:rounded"
+  form action="/admin/pages/create" method="POST"
+    div class="mb-4"
+      label for="name" Name
+      input type="text" id="name" name="page[name]" class="text-gray-800 w-full border-blue-200 border-2 rounded p-2"
+    div class="mb-4"
+      label for="slug" slug
+      input type="text" id="slug" name="page[slug]" class="text-gray-800 w-full border-blue-200 border-2 rounded p-2"
+    div class="mb-4"
+      label for="body" Body
+      textarea name="page[content]" id="body" class="text-gray-800 w-full border-blue-200 border-2 rounded p-2" x-data="{ resize: () => { $el.style.height = '5px'; $el.style.height = $el.scrollHeight + 'px' } }" x-init="resize()" @input="resize()"
+    div class="mb-4"
+      label for="published_at" Publish date
+      input type="date" id="published_at" name="page[published_at]" class="text-gray-800 w-full border-blue-200 border-2 rounded p-2"
+    button class="rounded bg-blue-100 hover:bg-blue-200 text-blue-600 px-2 hover:cursor-pointer" type="submit"
+      = "Create"