huge blog refactor

tidying up data structures; improvements to blog admin UI/UX, etc.

admin/static/blog.css

@@ -1,4 +1,5 @@
 .blog-collection {
+    margin-bottom: 1em;
     display: flex;
     flex-direction: column;
     gap: .5em;

admin/static/edit-blog.css

@@ -5,7 +5,7 @@ input[type="text"] {
     border: none;
     border-radius: 4px;
     outline: none;
-    color: inherit;
+    color: var(--fg-3);
     background-color: var(--bg-1);
     box-shadow: var(--shadow-sm);
 }
@@ -67,6 +67,17 @@ input[type="text"] {
     background-color: var(--bg-3);
 }
 
+#blogpost #publish-date {
+    padding: .4em .5em;
+    font-family: inherit;
+    font-size: inherit;
+    border-radius: 4px;
+    border: none;
+    background-color: var(--bg-1);
+    color: var(--fg-3);
+    box-shadow: var(--shadow-sm);
+}
+
 #blogpost textarea {
     width: calc(100% - 2em);
     margin: 0;
@@ -95,6 +106,12 @@ input[type="text"] {
     box-shadow: var(--shadow-sm);
 }
 
+#blogpost .social-post-details {
+    margin: 1em 0 1em 0;
+    display: flex;
+    gap: 1em;
+}
+
 #blogpost .blog-actions {
     margin-top: 1em;
 }

admin/static/edit-blog.js

@@ -1,9 +1,12 @@
 const blogID = document.getElementById("blogpost").dataset.id;
 const titleInput = document.getElementById("title");
+const publishDateInput = document.getElementById("publish-date");
 const descInput = document.getElementById("description");
 const mdInput = document.getElementById("markdown");
 const blueskyActorInput = document.getElementById("bluesky-actor");
-const blueskyPostInput = document.getElementById("bluesky-post");
+const blueskyRecordInput = document.getElementById("bluesky-record");
+const fediverseAccountInput = document.getElementById("fediverse-account");
+const fediverseStatusInput = document.getElementById("fediverse-status");
 const visInput = document.getElementById("visibility");
 const saveBtn = document.getElementById("save");
 const deleteBtn = document.getElementById("delete");
@@ -12,11 +15,18 @@ saveBtn.addEventListener("click", () => {
     fetch("/api/v1/blog/" + blogID, {
         method: "PUT",
         body: JSON.stringify({
-            title: titleInput.value,
+            title: titleInput.innerText,
+            publish_date: publishDateInput.value + ":00Z",
             description: descInput.value,
             markdown: mdInput.value,
-            bluesky_actor: blueskyActorInput.value,
-            bluesky_post: blueskyPostInput.value,
+            bluesky: {
+                actor: blueskyActorInput.value,
+                record: blueskyRecordInput.value,
+            },
+            fediverse: {
+                account: fediverseAccountInput.value,
+                status: fediverseStatusInput.value,
+            },
             visible: visInput.value === "true",
         }),
         headers: { "Content-Type": "application/json" }
@@ -53,11 +63,13 @@ deleteBtn.addEventListener("click", () => {
     });
 });
 
-[titleInput, descInput, mdInput, blueskyActorInput, blueskyPostInput, visInput].forEach(input => {
-    input.addEventListener("change", () => {
-        saveBtn.disabled = false;
+[titleInput, publishDateInput, descInput, mdInput, visInput,
+    blueskyActorInput, blueskyRecordInput,
+    fediverseAccountInput, fediverseStatusInput].forEach(input => {
+        input.addEventListener("change", () => {
+            saveBtn.disabled = false;
+        });
+        input.addEventListener("keypress", () => {
+            saveBtn.disabled = false;
+        });
     });
-    input.addEventListener("keypress", () => {
-        saveBtn.disabled = false;
-    });
-});