add more improvements to blog

src/app/blog/[[...tag]]/PostSummary.tsx

@@ -26,169 +26,201 @@ export default function PostSummary({
   };
 
   return (
-    <div
+    <>
-      key={metadata.slug}
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        borderColor: elementColor,
-        transition: "border-color 0.3s linear",
-        borderStyle: "solid",
-        marginTop: "1rem",
-      }}
-    >
-      <div
-        style={{
-          width: "100%",
-          backgroundColor: elementColor,
-          color: "#111",
-          display: "flex",
-          alignItems: "center",
-          padding: "0.5rem",
-          boxSizing: "border-box",
-          fontSize: "1rem",
-          cursor: "pointer",
-          transition: "background-color 0.3s linear",
-        }}
-        onMouseEnter={hoverStart}
-        onMouseLeave={hoverEnd}
-        onClick={navigateToPost}
-      >
-        <span>{metadata.title}</span>
-      </div>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "row",
-          justifyContent: "space-between",
-          fontSize: "0.9rem",
-          maxWidth: "100%",
-          flexWrap: "wrap",
-        }}
-      >
-        <div
-          style={{
-            display: "flex",
-            justifyContent: "flex-start",
-            padding: "0.5rem",
-            gap: 4,
-          }}
-        >
-          tags: {metadata.tags.join(", ")}
-        </div>
-        <div
-          style={{
-            display: "flex",
-            justifyContent: "flex-end",
-            padding: "0.5rem",
-            gap: 4,
-          }}
-        >
-          {metadata.is_draft && (
-            <>
-              <span>draft - </span>
-              <div
-                style={{
-                  cursor: "pointer",
-                  color: "#999",
-                  transition: "color 0.3s linear",
-                }}
-                onMouseOver={(e) => {
-                  e.currentTarget.style.color = "#eee";
-                }}
-                onMouseLeave={(e) => {
-                  e.currentTarget.style.color = "#999";
-                }}
-                onClick={async () => {
-                  await publishArticle(metadata.slug);
-                  router.refresh();
-                }}
-              >
-                move to published
-              </div>
-            </>
-          )}
-          {!metadata.is_draft && (
-            <>
-              <div>
-                <div>
-                  <span>published: </span>
-                  <span>{metadata.publishedDate.toLocaleDateString()}</span>
-                </div>
-                {loggedIn && (
-                  <div
-                    style={{
-                      cursor: "pointer",
-                      color: "#999",
-                      transition: "color 0.3s linear",
-                    }}
-                    onMouseOver={(e) => {
-                      e.currentTarget.style.color = "#eee";
-                    }}
-                    onMouseLeave={(e) => {
-                      e.currentTarget.style.color = "#999";
-                    }}
-                    onClick={async () => {
-                      await unpublishArticle(metadata.slug);
-                      router.refresh();
-                    }}
-                  >
-                    move to drafts
-                  </div>
-                )}
-              </div>
-            </>
-          )}
-        </div>
-      </div>
-      <div
-        style={{
-          width: "100%",
-          height: "2px",
-          backgroundColor: elementColor,
-          transition: "background-color 0.3s linear",
-        }}
-      ></div>
       <div
+        key={metadata.slug}
         style={{
           display: "flex",
           flexDirection: "column",
-          padding: "1rem 0.5rem 0 0.5rem",
+          borderColor: elementColor,
+          transition: "border-color 0.3s linear",
+          borderStyle: "solid",
+          marginTop: "1rem",
         }}
       >
-        <div style={{ fontSize: "0.9rem" }}>
+        <div
-          {metadata.blurb}
-          <span style={{ color: "#999" }}>&hellip;</span>
-        </div>
-      </div>
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "flex-end",
-          marginTop: "0.5rem",
-        }}
-      >
-        <span
           style={{
-            textDecoration: "none",
+            width: "100%",
-            color: "#222",
-            transition: "background-color 0.3s linear",
-            padding: "0.5rem 1rem",
-            fontSize: "0.9rem",
-            fontWeight: "500",
-            display: "inline-flex",
-            alignItems: "center",
-            gap: "0.25rem",
-            cursor: "pointer",
             backgroundColor: elementColor,
+            color: "#111",
+            display: "flex",
+            alignItems: "center",
+            padding: "0.5rem",
+            boxSizing: "border-box",
+            fontSize: "1rem",
+            cursor: "pointer",
+            transition: "background-color 0.3s linear",
           }}
           onMouseEnter={hoverStart}
           onMouseLeave={hoverEnd}
           onClick={navigateToPost}
         >
-          Read more <span style={{ fontSize: "1rem" }}>→</span>
+          <span>{metadata.title}</span>
-        </span>
+        </div>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "space-between",
+            fontSize: "0.9rem",
+            maxWidth: "100%",
+            flexWrap: "wrap",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "flex-start",
+              padding: "0.5rem",
+              gap: 4,
+            }}
+          >
+            tags: {metadata.tags.join(", ")}
+          </div>
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "flex-end",
+              padding: "0.5rem",
+              gap: 4,
+            }}
+          >
+            {metadata.is_draft && (
+              <>
+                <span>draft - </span>
+                <div
+                  style={{
+                    cursor: "pointer",
+                    color: "#999",
+                    transition: "color 0.3s linear",
+                  }}
+                  onMouseOver={(e) => {
+                    e.currentTarget.style.color = "#eee";
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.color = "#999";
+                  }}
+                  onClick={async () => {
+                    await publishArticle(metadata.slug);
+                    router.refresh();
+                  }}
+                >
+                  move to published
+                </div>
+              </>
+            )}
+            {!metadata.is_draft && (
+              <>
+                <div>
+                  <div>
+                    <span>published: </span>
+                    <span>{metadata.publishedDate.toLocaleDateString()}</span>
+                  </div>
+                  {loggedIn && (
+                    <div
+                      style={{
+                        cursor: "pointer",
+                        color: "#999",
+                        transition: "color 0.3s linear",
+                      }}
+                      onMouseOver={(e) => {
+                        e.currentTarget.style.color = "#eee";
+                      }}
+                      onMouseLeave={(e) => {
+                        e.currentTarget.style.color = "#999";
+                      }}
+                      onClick={async () => {
+                        await unpublishArticle(metadata.slug);
+                        router.refresh();
+                      }}
+                    >
+                      move to drafts
+                    </div>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+        <div
+          style={{
+            width: "100%",
+            height: "2px",
+            backgroundColor: elementColor,
+            transition: "background-color 0.3s linear",
+          }}
+        ></div>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            padding: "1rem 0.5rem 0 0.5rem",
+          }}
+        >
+          <div style={{ fontSize: "0.9rem" }}>
+            {metadata.blurb}
+            <span style={{ color: "#999" }}>&hellip;</span>
+          </div>
+        </div>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "flex-end",
+            marginTop: "0.5rem",
+          }}
+        >
+          <span
+            style={{
+              textDecoration: "none",
+              color: "#222",
+              transition: "background-color 0.3s linear",
+              padding: "0.5rem 1rem",
+              fontSize: "0.9rem",
+              fontWeight: "500",
+              display: "inline-flex",
+              alignItems: "center",
+              gap: "0.25rem",
+              cursor: "pointer",
+              backgroundColor: elementColor,
+            }}
+            onMouseEnter={hoverStart}
+            onMouseLeave={hoverEnd}
+            onClick={navigateToPost}
+          >
+            Read more <span style={{ fontSize: "1rem" }}>→</span>
+          </span>
+        </div>
       </div>
-    </div>
+      {loggedIn ? (
+        <div
+          style={{
+            marginTop: "2rem",
+            padding: "0.5rem 1rem",
+            backgroundColor: "#333",
+            width: "fit-content",
+            userSelect: "none",
+            cursor: "pointer",
+          }}
+          onClick={() => router.push("/blog/write")}
+        >
+          write a post
+        </div>
+      ) : (
+        <div
+          style={{
+            marginTop: "2rem",
+            padding: "0.3rem 0.5rem",
+            backgroundColor: "#333",
+            width: "fit-content",
+            userSelect: "none",
+            cursor: "pointer",
+            fontSize: "0.8rem",
+          }}
+          onClick={() => router.push("/blog/login")}
+        >
+          login
+        </div>
+      )}
+    </>
   );
 }

src/app/blog/action.ts

@@ -57,7 +57,7 @@ export async function getSummaries(
       ...filter,
       omit: { contentMarkdown: true, contentRendered: true },
       include: { tags: { select: { name: true } } },
-      orderBy: { publishedDate: "asc" },
+      orderBy: { publishedDate: "desc" },
       skip: PAGE_SIZE * (pageNumber - 1),
       take: PAGE_SIZE,
     })
@@ -79,3 +79,19 @@ export async function unpublishArticle(slug: string) {
   const prisma = new PrismaClient();
   await prisma.post.update({ where: { slug }, data: { is_draft: true } });
 }
+
+export async function deleteArticle(slug: string) {
+  const prisma = new PrismaClient();
+  const post = await prisma.post.delete({
+    where: { slug },
+    include: { tags: true },
+  });
+  for (const tag of post.tags) {
+    const postsWithTag = await prisma.post.count({
+      where: { tags: { some: { id: tag.id } } },
+    });
+    if (postsWithTag == 0) {
+      await prisma.tag.delete({ where: { id: tag.id } });
+    }
+  }
+}

src/app/blog/post/[slug]/PostDisplay.tsx

@@ -3,7 +3,8 @@
 import { useRouter } from "next/navigation";
 import * as Types from "../../types";
 import "highlight.js/styles/github-dark.css";
-import { publishArticle, unpublishArticle } from "../../action";
+import { deleteArticle, publishArticle, unpublishArticle } from "../../action";
+import { useState } from "react";
 
 export default function PostDisplay({
   post,
@@ -13,6 +14,9 @@ export default function PostDisplay({
   loggedIn: boolean;
 }) {
   const router = useRouter();
+
+  const [confirmDelete, setConfirmDelete] = useState(false);
+
   return (
     <>
       <div
@@ -151,25 +155,55 @@ export default function PostDisplay({
         }}
       >
         {loggedIn ? (
-          <div
+          <div style={{ display: "flex", gap: "1rem" }}>
-            style={{
+            <div
-              backgroundColor: "#a66",
+              style={{
-              color: "#111",
+                backgroundColor: "#6a6",
-              fontSize: "0.8rem",
+                color: "#111",
-              padding: "0.5rem",
+                fontSize: "0.8rem",
-              transition: "background-color 0.3s linear",
+                padding: "0.5rem",
-              userSelect: "none",
+                transition: "background-color 0.3s linear",
-              cursor: "pointer",
+                userSelect: "none",
-            }}
+                cursor: "pointer",
-            onMouseOver={(e) => {
+              }}
-              e.currentTarget.style.backgroundColor = "#c88";
+              onMouseOver={(e) => {
-            }}
+                e.currentTarget.style.backgroundColor = "#8c8";
-            onMouseOut={(e) => {
+              }}
-              e.currentTarget.style.backgroundColor = "#a66";
+              onMouseOut={(e) => {
-            }}
+                e.currentTarget.style.backgroundColor = "#6a6";
-            onClick={() => router.push(`/blog/write/${post.slug}`)}
+              }}
-          >
+              onClick={() => router.push(`/blog/write/${post.slug}`)}
-            edit
+            >
+              edit
+            </div>
+            <div
+              style={{
+                backgroundColor: "#a66",
+                color: "#111",
+                fontSize: "0.8rem",
+                padding: "0.5rem",
+                transition: "background-color 0.3s linear",
+                userSelect: "none",
+                cursor: "pointer",
+              }}
+              onMouseOver={(e) => {
+                e.currentTarget.style.backgroundColor = "#c88";
+              }}
+              onMouseOut={(e) => {
+                e.currentTarget.style.backgroundColor = "#a66";
+              }}
+              onClick={() => setConfirmDelete(true)}
+            >
+              delete
+            </div>
+            <DeleteModal
+              open={confirmDelete}
+              onCancel={() => setConfirmDelete(false)}
+              onConfirm={async () => {
+                await deleteArticle(post.slug);
+                router.push("/blog");
+              }}
+            />
           </div>
         ) : (
           <div></div>
@@ -198,3 +232,96 @@ export default function PostDisplay({
     </>
   );
 }
+
+function DeleteModal({
+  open,
+  onCancel,
+  onConfirm,
+}: {
+  open: boolean;
+  onCancel: () => void;
+  onConfirm: () => void;
+}) {
+  return (
+    <div
+      id="deleteModal"
+      style={{
+        display: open
+          ? "flex"
+          : "none" /* Will be changed to "flex" when opened */,
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        backgroundColor: "rgba(0, 0, 0, 0.7)",
+        zIndex: 1000,
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+      onClick={(e) => {
+        if (e.target == e.currentTarget) {
+          onCancel();
+        }
+      }}
+    >
+      <div
+        style={{
+          backgroundColor: "#222",
+          padding: "1.5rem",
+          borderRadius: "4px",
+          maxWidth: "400px",
+          width: "90%",
+          boxShadow: "0 0 10px rgba(0, 0, 0, 0.5)",
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <h3 style={{ margin: "0 0 1rem 0", color: "#eee" }}>
+          Confirm Deletion
+        </h3>
+        <p style={{ marginBottom: "1.5rem", color: "#ccc" }}>
+          Are you sure you want to delete this post? This action cannot be
+          undone.
+        </p>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "flex-end",
+            gap: "0.75rem",
+          }}
+        >
+          <button
+            style={{
+              backgroundColor: "#a66",
+              color: "#fff",
+              border: "none",
+              padding: "0.5rem 1rem",
+              cursor: "pointer",
+              borderRadius: "2px",
+            }}
+            onClick={() => {
+              onConfirm();
+            }}
+          >
+            Yes, delete it
+          </button>
+          <button
+            style={{
+              backgroundColor: "#555",
+              color: "#fff",
+              border: "none",
+              padding: "0.5rem 1rem",
+              cursor: "pointer",
+              borderRadius: "2px",
+            }}
+            onClick={() => {
+              onCancel();
+            }}
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}