fix post link, use <Link> instead of <a>, add bun instruction for setup complete, load categories from api for post create, fix margin on post title

app/admin/page.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import Link from 'next/link';
 import { useEffect, useState } from "react"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
@@ -52,7 +53,7 @@ export default function Home() {
             setPostCardLoading(false);
             throw new Error(strings.errorsUnknownError);
           }
-        } else if (data.count) {
+        } else if (data.count || data.count === 0) {
           console.log(strings.logsTotalPosts, data.count);
           setTotalPosts(data.count);
           setPostCardLoading(false);
@@ -166,10 +167,10 @@ export default function Home() {
           </CardHeader>
           <CardContent className="grid gap-4">
             <Button className="w-full justify-start" variant="outline" asChild>
-              <a href="/admin/posts/new">
+              <Link href="/admin/posts/new">
                 <PlusCircle className="mr-2 h-4 w-4" />
                 {strings.createPostButtonText}
-              </a>
+              </Link>
             </Button>
             <Button className="w-full justify-start" variant="outline" asChild>
               <a href="/admin/users/new">

app/admin/posts/new/page.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import dynamic from "next/dynamic"
 import strings from "@/strings.json"
 import { Input } from "@/components/ui/input"
@@ -17,14 +17,13 @@ const MDEditor = dynamic(() => import("@uiw/react-md-editor"), {
 import "@uiw/react-md-editor/markdown-editor.css"
 import "@uiw/react-markdown-preview/markdown.css"
 
-const categories = ["Example Category 1", "Example Category 2"]
-
 export default function CreatePost() {
   const [title, setTitle] = useState("")
   const [description, setDescription] = useState("")
   const [category, setCategory] = useState("")
   const [slug, setSlug] = useState("")
   const [content, setContent] = useState("")
+  const [categories, setCategories] = useState<{ id: string; slug: string; name: string }[]>([])
 
   const handleEditorChange = (value: string | undefined) => {
     setContent(value || "")
@@ -54,6 +53,22 @@ export default function CreatePost() {
     console.log({ title, description, category, slug, content, date })
   }
 
+  useEffect(() => {
+    console.log(strings.logsFetchCategoryList);
+    fetch('http://localhost:3001/api/categories/fetchList')
+      .then(response => response.json())
+      .then(data => {
+        if (!data.categories) {
+          throw new Error(strings.errorsFetchCategoryListFail);
+        }
+        console.log(strings.logsOnFetchedCategory);
+        setCategories(data.categories);
+      })
+      .catch(error => {
+        console.error(error);
+      });
+  }, []);
+
   return (
     <div className="space-y-8">
       <h1 className="text-4xl font-bold text-primary">{strings.adminNewPostHeader}</h1>
@@ -89,8 +104,8 @@ export default function CreatePost() {
                 </SelectTrigger>
                 <SelectContent>
                   {categories.map((cat) => (
-                    <SelectItem key={cat} value={cat}>
+                    <SelectItem key={cat.id} value={cat.name}>
-                      {cat}
+                      {cat.name}
                     </SelectItem>
                   ))}
                 </SelectContent>
@@ -99,10 +114,13 @@ export default function CreatePost() {
             <div className="space-y-2">
               <Label htmlFor="slug">{strings.newPostSlugFieldLabel}</Label>
               <Input
-                id="slug"
+              id="slug"
-                value={slug}
+              value={slug}
-                onChange={(e) => setSlug(e.target.value)}
+              onChange={(e) => {
-                placeholder={strings.newPostSlugFieldPlaceholder}
+                const value = e.target.value.replace(/[^a-zA-Z0-9-]/g, "");
+                setSlug(value);
+              }}
+              placeholder={strings.newPostSlugFieldPlaceholder}
               />
             </div>
             <div className="space-y-2">

app/admin/posts/page.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import Link from 'next/link';
 import { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
@@ -31,7 +32,7 @@ export default function Posts() {
         });
 
         if (!res.ok) {
-          alert(strings.errorsFetchTotalPostCtErr);
+          console.log(strings.errorsFetchTotalPostCtErr);
           setPostCardError(true);
           throw new Error(`${strings.errorsFetchTotalPostCtErr}: ${res.status}`);
         }
@@ -49,7 +50,7 @@ export default function Posts() {
             setPostCardLoading(false);
             throw new Error(strings.errorsUnknownError);
           }
-        } else if (data.count) {
+        } else if (data.count || data.count === 0) {
           console.log(strings.logsTotalPosts, data.count);
           setTotalPosts(data.count);
           setPostCardLoading(false);
@@ -73,10 +74,10 @@ export default function Posts() {
           </CardHeader>
           <CardContent className="grid gap-4">
             <Button className="w-full justify-start" variant="outline" asChild>
-              <a href="/admin/post">
+              <Link href="/admin/posts/new">
                 <PlusCircle className="mr-2 h-4 w-4" />
                 {strings.createPostButtonText}
-              </a>
+              </Link>
             </Button>
           </CardContent>
         </Card>

app/posts/[slug]/page.tsx

@@ -109,7 +109,7 @@ export default function PostPage() {
 
   return (
     <div>
-      <h1 className="text-4xl font-bold my-4">{postTitle}</h1>
+      <h1 className="text-4xl font-bold mb-4">{postTitle}</h1>
       <p className="italic text-muted-foreground">{strings.postPublishedOnLabel} {postDate}</p>
       <div className="flex flex-wrap gap-2 my-4">
         <span className="border border-white text-bold px-3 py-1 rounded-md">

server/setup.js

@@ -109,9 +109,10 @@ figlet('BlogPop', (err, data) => {
 
         console.log("┌────────────────────────────────────────────────────┐");
         console.log("│                  ✓ SETUP COMPLETE                  │");
-        console.log("├──────────────┬─────────────────────────────────────┤");
+        console.log("├─────────────────────┬──────────────────────────────┤");
-        console.log("│ START SERVER │ $ node index.js                     │");
+        console.log("│ START SERVER (NODE) │ $ node index.js              │");
-        console.log("└──────────────┴─────────────────────────────────────┘")
+        console.log("│ START SERVER (BUN)  │ $ bun index.js               │")
+        console.log("└─────────────────────┴──────────────────────────────┘")
 
         db.close();
         rl.close();

strings.json

@@ -36,7 +36,7 @@
     "newPostTitleFieldPlaceholder": "Enter post title",
     "newPostDescriptionFieldPlaceholder": "Enter post description",
     "newPostCategoryFieldPlaceholder": "Select a category",
-    "newPostSlugFieldPlaceholder": "Enter post slug (i.e. /example-slug)",
+    "newPostSlugFieldPlaceholder": "Enter post slug (ex: inputting example will create a post at example.com/posts/example)",
 
     "newUserNameFieldLabel": "Name",
     "newUserEmailFieldLabel": "Email",