feat: show author name instead of user x

frontend/src/utils/BlogViewer.tsx

@@ -26,21 +26,43 @@ export function BlogViewer() {
 
   const isAuthor = me === String(blog.author_id);
 
+  const handleDelete = async () => {
+    if (!window.confirm(`Are you sure you want to delete ${blog.title}`))
+      return;
+
+    try {
+      const res = await fetch(`${API_URL}/blogs/${slug}`, {
+        method: "DELETE",
+        headers: { Accept: "application/json" },
+      });
+      if (!res.ok) throw new Error(await res.text());
+      navigate("/");
+    } catch (err) {
+      console.error("Delete failed:", err);
+      alert("Could not delete post. See console for details.");
+    }
+  };
+
   return (
     <div className="max-w-2xl mx-auto py-10 space-y-6">
       {isAuthor && (
-        <button
-          onClick={() => navigate(`/blog/${slug}/edit`)}
-          className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
-        >
-          Edit this post
-        </button>
+        <div className="flex space-x-4">
+          <button
+            onClick={() => navigate(`/blog/${slug}/edit`)}
+            className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+          >
+            Edit
+          </button>
+          <button
+            onClick={handleDelete}
+            className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
+          >
+            Delete
+          </button>
+        </div>
       )}
       <h1 className="text-3xl font-bold">{blog.title.toUpperCase()}</h1>
-      <p className="text-sm text-gray-500">By User {blog.author_id}</p>
-      <p className="italic text-gray-600 dark:text-gray-400">
-        {blog.description}
-      </p>
+      <p className="text-sm text-gray-500">By {blog.author_name}</p>
       <div className="markdown-body mx-auto p-4">
         <Markdown
           remarkPlugins={[remarkGfm, remarkRehype]}

frontend/src/utils/EditBlog.tsx

@@ -7,10 +7,11 @@ import { countWords } from "./countWords";
 
 export function EditBlog() {
   const { slug } = useParams<{ slug: string }>();
-  const [blog, setBlog] = useState<Blog | undefined>(undefined);
+  const [blog, setBlog] = useState<Blog | null>(null);
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
   const [body, setBody] = useState("");
+  const [authorName, setAuthorName] = useState("");
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -22,6 +23,7 @@ export function EditBlog() {
         setTitle(data.title);
         setDescription(data.description);
         setBody(data.body);
+        setAuthorName(data.author_name);
       })
       .catch(console.error);
   }, [slug]);
@@ -30,14 +32,14 @@ export function EditBlog() {
 
   async function handleSubmit(e: FormEvent) {
     e.preventDefault();
-
     const updatedBlog = {
       title,
       description,
       body,
+      author_name: authorName, // from the form field
       updated_at: new Date().toISOString(),
       word_count: countWords(body),
-      version: blog ? blog.version : 1,
+      version: blog ? blog.version + 1 : 1,
     };
 
     const res = await fetch(`${API_URL}/blogs/${slug}`, {
@@ -45,9 +47,8 @@ export function EditBlog() {
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify(updatedBlog),
     });
-
     if (res.ok) {
-      navigate(`/blog/${slug}`); // go back to the viewer
+      navigate(`/blogs/${slug}`); // go back to the viewer
     } else {
       console.error("Update failed:", await res.text());
       alert("Could not update the post. See console for details.");
@@ -74,6 +75,16 @@ export function EditBlog() {
             className="w-full border px-2 py-1 rounded"
           />
         </div>
+        <div>
+          <label className="block font-medium">Author Name</label>
+          <input
+            type="text"
+            value={authorName}
+            onChange={(e) => setAuthorName(e.target.value)}
+            className="w-full border px-2 py-1 rounded"
+            required
+          />
+        </div>
         <div>
           <label className="block font-medium">Body (Markdown)</label>
           <textarea

frontend/src/utils/types.ts

@@ -1,8 +1,16 @@
 export interface Blog {
   id: number;
   title: string;
-  author_id: string;
   description: string;
   body: string;
+  author_id: number;
+  author_name: string;
+  created_at: string;
+  updated_at: string;
+  published_at: string;
+  word_count: number;
   version: number;
+  read_time: number;
+  language: string;
+  tags: string[];
 }