looking decent

package.json

@@ -21,6 +21,7 @@
     "@typeschema/valibot": "^0.13.4",
     "bcrypt": "^6.0.0",
     "google-auth-library": "^10.5.0",
+    "highlight.js": "^11.11.1",
     "jose": "^6.1.3",
     "motion": "^12.23.26",
     "solid-js": "^1.9.5",

src/app.css

@@ -381,9 +381,32 @@ input[type="checkbox"]::before {
 input[type="checkbox"]:checked::before {
   transform: scale(1);
 }
+.shaker:hover {
+  animation: shaker 0.5s ease;
+}
 .tooltip {
   position: relative;
 }
+.tooltip .tooltip-text {
+  visibility: hidden;
+  min-width: fit-content;
+  background-color: var(--color-mantle);
+  color: #fff;
+  text-align: center;
+  padding: 5px 0;
+  border-radius: 6px;
+  position: absolute;
+  z-index: 1;
+  top: 100%;
+  left: 50%;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.tooltip:hover .tooltip-text {
+  visibility: visible;
+  opacity: 1;
+}
 .rule-around {
   display: flex;
   align-items: center;

src/components/blog/Card.tsx

@@ -21,7 +21,6 @@ export interface Post {
 export interface CardProps {
   post: Post;
   privilegeLevel: "anonymous" | "admin" | "user";
-  linkTarget: "blog" | "project";
 }
 
 export default function Card(props: CardProps) {
@@ -36,7 +35,7 @@ export default function Card(props: CardProps) {
               </div>
             </Show>
             <DeletePostButton
-              type={props.linkTarget === "blog" ? "Blog" : "Project"}
+              type="Blog"
               postID={props.post.id}
             />
           </div>
@@ -46,9 +45,7 @@ export default function Card(props: CardProps) {
         src={
           props.post.banner_photo
             ? props.post.banner_photo
-            : props.linkTarget === "blog"
+            : "/bitcoin.jpg"
-            ? "/bitcoin.jpg"
-            : "/blueprint.jpg"
         }
         alt={props.post.title.replaceAll("_", " ") + " banner"}
         class="h-full w-full object-cover"
@@ -74,7 +71,6 @@ export default function Card(props: CardProps) {
             </div>
             <CardLinks
               postTitle={props.post.title}
-              linkTarget={props.linkTarget}
               privilegeLevel={props.privilegeLevel}
               postID={props.post.id}
             />

src/components/blog/CardLinks.tsx

@@ -5,7 +5,6 @@ import LoadingSpinner from "~/components/LoadingSpinner";
 export interface CardLinksProps {
   postTitle: string;
   postID: number;
-  linkTarget: string;
   privilegeLevel: string;
 }
 
@@ -19,12 +18,8 @@ export default function CardLinks(props: CardLinksProps) {
         href={`/blog/${props.postTitle}`}
         onClick={() => setReadLoading(true)}
         class={`${
-          readLoading()
+          readLoading() ? "bg-zinc-400" : "bg-lavender hover:brightness-125"
-            ? "bg-zinc-400"
+        } mb-1 ml-2 flex rounded px-4 py-2 text-base font-light shadow transition-all duration-300 ease-out active:scale-90`}
-            : props.linkTarget === "project"
-            ? "bg-blue-400 hover:bg-blue-500 dark:bg-blue-600 dark:hover:bg-blue-700"
-            : "bg-orange-400 hover:bg-orange-500"
-        } mb-1 ml-2 flex rounded px-4 py-2 font-light text-white shadow transition-all duration-300 ease-out active:scale-90`}
       >
         <Show when={readLoading()} fallback="Read">
           <LoadingSpinner height={24} width={24} />

src/components/blog/CommentBlock.tsx

@@ -159,8 +159,7 @@ export default function CommentBlock(props: CommentBlockProps) {
 
   const isAnonymous = () => props.privilegeLevel === "anonymous";
 
-  const replyIconColor = () =>
+  const replyIconColor = () => "#fb923c";
-    location.pathname.split("/")[1] === "blog" ? "#fb923c" : "#60a5fa";
 
   return (
     <>
@@ -344,7 +343,6 @@ export default function CommentBlock(props: CommentBlockProps) {
                 isReply={true}
                 privilegeLevel={props.privilegeLevel}
                 parent_id={props.comment.id}
-                type={props.category}
                 post_id={props.projectID}
                 currentUserID={props.currentUserID}
                 socket={props.socket}
@@ -360,7 +358,6 @@ export default function CommentBlock(props: CommentBlockProps) {
               {(childComment) => (
                 <CommentBlock
                   comment={childComment}
-                  category={props.category}
                   projectID={props.projectID}
                   recursionCount={1}
                   allComments={props.allComments}

src/components/blog/CommentInputBlock.tsx

@@ -23,9 +23,7 @@ export default function CommentInputBlock(props: CommentInputBlockProps) {
       <div class="flex w-full justify-center select-none">
         <div class="h-fit w-3/4 md:w-1/2">
           <form onSubmit={newCommentWrapper}>
-            <div
+            <div class="textarea-group blog">
-              class={`textarea-group ${props.type === "blog" ? "blog" : ""}`}
-            >
               <textarea
                 ref={bodyRef}
                 required
@@ -46,9 +44,7 @@ export default function CommentInputBlock(props: CommentInputBlockProps) {
                 class={`${
                   props.commentSubmitLoading
                     ? "bg-zinc-400"
-                    : props.type === "project"
+                    : "border-orange-500 bg-orange-400 hover:bg-orange-500"
-                      ? "border-blue-500 bg-blue-400 hover:bg-blue-500 dark:border-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800"
-                      : "border-orange-500 bg-orange-400 hover:bg-orange-500"
                 } rounded border px-4 py-2 font-light text-white shadow-md transition-all duration-300 ease-in-out active:scale-90`}
               >
                 Submit
@@ -61,7 +57,7 @@ export default function CommentInputBlock(props: CommentInputBlockProps) {
   } else {
     return (
       <div class="flex w-full justify-center">
-        <div class={`textarea-group ${props.type === "blog" ? "blog" : ""}`}>
+        <div class="textarea-group blog">
           <textarea
             required
             disabled

src/components/blog/CommentSection.tsx

@@ -5,7 +5,6 @@ import type {
   UserPublicData,
   ReactionType,
   ModificationType,
-  PostType,
   PrivilegeLevel,
   SortingMode
 } from "~/types/comment";
@@ -24,7 +23,6 @@ interface CommentSectionProps {
   privilegeLevel: PrivilegeLevel;
   allComments: Comment[];
   topLevelComments: Comment[];
-  type: PostType;
   postID: number;
   reactionMap: Map<number, CommentReaction[]>;
   currentUserID: string;
@@ -66,7 +64,6 @@ export default function CommentSection(props: CommentSectionProps) {
         <CommentInputBlock
           isReply={false}
           privilegeLevel={props.privilegeLevel}
-          type={props.type}
           post_id={props.postID}
           socket={undefined}
           currentUserID={props.currentUserID}
@@ -91,7 +88,6 @@ export default function CommentSection(props: CommentSectionProps) {
           <CommentSorting
             topLevelComments={props.topLevelComments}
             privilegeLevel={props.privilegeLevel}
-            type={props.type}
             postID={props.postID}
             allComments={props.allComments}
             reactionMap={props.reactionMap}

src/components/blog/CommentSectionWrapper.tsx

@@ -134,7 +134,7 @@ export default function CommentSectionWrapper(
       socket.send(
         JSON.stringify({
           action: "channelUpdate",
-          postType: props.type,
+          postType: "blog",
           postID: props.id,
           invoker_id: props.currentUserID
         })
@@ -150,7 +150,7 @@ export default function CommentSectionWrapper(
         JSON.stringify({
           action: "commentCreation",
           commentBody: commentBody,
-          postType: props.type,
+          postType: "blog",
           postID: props.id,
           parentCommentID: parentCommentID,
           invokerID: props.currentUserID
@@ -160,7 +160,7 @@ export default function CommentSectionWrapper(
       // Fallback to HTTP API if WebSocket unavailable
       const domain = import.meta.env.VITE_DOMAIN;
       const res = await fetch(
-        `${domain}/api/database/comments/create/${props.type}/${props.id}`,
+        `${domain}/api/database/comments/create/blog/${props.id}`,
         {
           method: "POST",
           body: JSON.stringify({
@@ -242,7 +242,7 @@ export default function CommentSectionWrapper(
         JSON.stringify({
           action: "commentUpdate",
           commentBody: body,
-          postType: props.type,
+          postType: "blog",
           postID: props.id,
           commentID: comment_id,
           invokerID: props.currentUserID
@@ -297,7 +297,7 @@ export default function CommentSectionWrapper(
           deleteType: deletionType,
           commentID: commentID,
           invokerID: props.currentUserID,
-          postType: props.type,
+          postType: "blog",
           postID: props.id
         })
       );
@@ -397,7 +397,7 @@ export default function CommentSectionWrapper(
       socket.send(
         JSON.stringify({
           action: "commentReaction",
-          postType: props.type,
+          postType: "blog",
           postID: props.id,
           commentID: commentID,
           invokerID: props.currentUserID,
@@ -511,7 +511,6 @@ export default function CommentSectionWrapper(
         privilegeLevel={props.privilegeLevel}
         allComments={allComments()}
         topLevelComments={topLevelComments()}
-        type={props.type}
         postID={props.id}
         reactionMap={currentReactionMap()}
         currentUserID={props.currentUserID}

src/components/blog/CommentSorting.tsx

@@ -57,7 +57,6 @@ export default function CommentSorting(props: CommentSortingProps) {
           >
             <CommentBlock
               comment={topLevelComment}
-              category={props.type}
               projectID={props.postID}
               recursionCount={1}
               allComments={props.allComments}

src/components/blog/PostBodyClient.tsx

@@ -0,0 +1,32 @@
+import { createEffect, onMount } from "solid-js";
+import hljs from "highlight.js";
+import "highlight.js/styles/github-dark.css";
+
+export interface PostBodyClientProps {
+  body: string;
+  hasCodeBlock: boolean;
+}
+
+export default function PostBodyClient(props: PostBodyClientProps) {
+  let contentRef: HTMLDivElement | undefined;
+
+  // Apply syntax highlighting when component mounts and when body changes
+  createEffect(() => {
+    if (props.hasCodeBlock && contentRef) {
+      // Small delay to ensure DOM is ready
+      setTimeout(() => {
+        hljs.highlightAll();
+      }, 100);
+    }
+  });
+
+  return (
+    <div class="mx-auto max-w-4xl px-4 pt-32 md:pt-40">
+      <div
+        ref={contentRef}
+        class="prose dark:prose-invert max-w-none"
+        innerHTML={props.body}
+      />
+    </div>
+  );
+}

src/components/blog/PostSorting.tsx

@@ -11,7 +11,6 @@ export interface PostSortingProps {
   posts: Post[];
   tags: Tag[];
   privilegeLevel: "anonymous" | "admin" | "user";
-  type: "blog" | "project";
   filters?: string;
   sort?: string;
 }
@@ -38,9 +37,9 @@ export default function PostSorting(props: PostSortingProps) {
 
     switch (props.sort) {
       case "newest":
-        return [...posts].reverse();
-      case "oldest":
         return [...posts];
+      case "oldest":
+        return [...posts].reverse();
       case "most liked":
         return [...posts].sort((a, b) => b.total_likes - a.total_likes);
       case "most read":
@@ -56,7 +55,7 @@ export default function PostSorting(props: PostSortingProps) {
     <Show
       when={!(props.posts.length > 0 && filteredPosts().length === 0)}
       fallback={
-        <div class="pt-12 text-center text-2xl italic tracking-wide">
+        <div class="pt-12 text-center text-2xl tracking-wide italic">
           All posts filtered out!
         </div>
       }
@@ -64,11 +63,7 @@ export default function PostSorting(props: PostSortingProps) {
       <For each={sortedPosts()}>
         {(post) => (
           <div class="my-4">
-            <Card
+            <Card post={post} privilegeLevel={props.privilegeLevel} />
-              post={post}
-              privilegeLevel={props.privilegeLevel}
-              linkTarget={props.type}
-            />
           </div>
         )}
       </For>

src/components/blog/PostSortingSelect.tsx

@@ -11,9 +11,7 @@ const sorting = [
   { val: "Most Comments" }
 ];
 
-export interface PostSortingSelectProps {
+export interface PostSortingSelectProps {}
-  type: "blog" | "project";
-}
 
 export default function PostSortingSelect(props: PostSortingSelectProps) {
   const [selected, setSelected] = createSignal(sorting[0]);
@@ -42,11 +40,7 @@ export default function PostSortingSelect(props: PostSortingSelectProps) {
       <button
         type="button"
         onClick={() => setIsOpen(!isOpen())}
-        class={`${
+        class="focus-visible:border-peach focus-visible:ring-offset-peach bg-surface0 focus-visible:ring-opacity-75 relative w-full cursor-default rounded-lg py-2 pr-10 pl-3 text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 sm:text-sm"
-          props.type === "project"
-            ? "focus-visible:border-blue focus-visible:ring-offset-blue"
-            : "focus-visible:border-peach focus-visible:ring-offset-peach"
-        } bg-surface0 focus-visible:ring-opacity-75 relative w-full cursor-default rounded-lg py-2 pr-10 pl-3 text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 sm:text-sm`}
       >
         <span class="block truncate">{selected().val}</span>
         <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
@@ -68,9 +62,7 @@ export default function PostSortingSelect(props: PostSortingSelectProps) {
                 onClick={() => handleSelect(sort)}
                 class={`relative w-full cursor-default py-2 pr-4 pl-10 text-left select-none ${
                   selected().val === sort.val
-                    ? props.type === "project"
+                    ? "bg-peach text-base brightness-75"
-                      ? "bg-blue text-base brightness-75"
-                      : "bg-peach text-base brightness-75"
                     : "text-text hover:brightness-125"
                 }`}
               >
@@ -82,11 +74,7 @@ export default function PostSortingSelect(props: PostSortingSelectProps) {
                   {sort.val}
                 </span>
                 <Show when={selected().val === sort.val}>
-                  <span
+                  <span class="text-peach absolute inset-y-0 left-0 flex items-center pl-3">
-                    class={`${
-                      props.type === "project" ? "text-blue" : "text-peach"
-                    } absolute inset-y-0 left-0 flex items-center pl-3`}
-                  >
                     <Check
                       strokeWidth={1}
                       height={24}

src/components/blog/SessionDependantLike.tsx

@@ -12,7 +12,6 @@ export interface SessionDependantLikeProps {
   currentUserID: string | undefined | null;
   privilegeLevel: "admin" | "user" | "anonymous";
   likes: PostLike[];
-  type: "blog" | "project";
   projectID: number;
 }
 
@@ -59,13 +58,11 @@ export default function SessionDependantLike(props: SessionDependantLikeProps) {
   
   const getLikeIconColor = () => {
     if (hasLiked()) {
-      return props.type === "project" ? "fill-blue-400" : "fill-orange-400";
+      return "fill-orange-400";
     }
     
     if (hovering()) {
-      return props.type === "project"
+      return "fill-orange-400 dark:fill-orange-500";
-        ? "fill-blue-400 dark:fill-blue-600"
-        : "fill-orange-400 dark:fill-orange-500";
     }
     
     return "fill-black dark:fill-white";
@@ -96,13 +93,7 @@ export default function SessionDependantLike(props: SessionDependantLikeProps) {
         onMouseOver={() => setHovering(true)}
         onMouseLeave={() => setHovering(false)}
       >
-        <div
+        <div class="hover:text-orange-400 tooltip flex flex-col text-black dark:text-white">
-          class={`${
-            props.type === "project"
-              ? "hover:text-blue-400"
-              : "hover:text-orange-400"
-          } tooltip flex flex-col text-black dark:text-white`}
-        >
           <div class="mx-auto">
             <LikeIcon
               strokeWidth={1}
@@ -113,11 +104,7 @@ export default function SessionDependantLike(props: SessionDependantLikeProps) {
           </div>
           <div
             class={`${
-              hasLiked()
+              hasLiked() ? "text-orange-400" : ""
-                ? props.type === "project"
-                  ? "text-blue-400"
-                  : "text-orange-400"
-                : ""
             } mx-auto flex pl-2 transition-colors duration-200 ease-in`}
           >
             {likeCount()} {likeCount() === 1 ? "Like" : "Likes"}

src/components/blog/TagSelector.tsx

@@ -3,7 +3,6 @@ import { useNavigate, useLocation, useSearchParams } from "@solidjs/router";
 
 export interface TagSelectorProps {
   tagMap: Record<string, number>;
-  category: "blog" | "project";
 }
 
 export default function TagSelector(props: TagSelectorProps) {
@@ -72,11 +71,7 @@ export default function TagSelector(props: TagSelectorProps) {
         ref={buttonRef}
         type="button"
         onClick={toggleMenu}
-        class={`${
+        class="border-blue bg-lavender mt-2 rounded border px-4 py-2 text-base font-light shadow-md transition-all duration-300 ease-in-out hover:brightness-125 active:scale-90 md:mt-0"
-          props.category === "project"
-            ? "border-blue bg-blue hover:brightness-125"
-            : "border-peach bg-peach hover:brightness-125"
-        } mt-2 rounded border px-4 py-2 text-base font-light shadow-md transition-all duration-300 ease-in-out active:scale-90 md:mt-0`}
       >
         Filters
       </button>

src/routes/blog/[title]/index.tsx

@@ -13,6 +13,7 @@ import { HttpStatusCode } from "@solidjs/start";
 import SessionDependantLike from "~/components/blog/SessionDependantLike";
 import CommentIcon from "~/components/icons/CommentIcon";
 import CommentSectionWrapper from "~/components/blog/CommentSectionWrapper";
+import PostBodyClient from "~/components/blog/PostBodyClient";
 import type { Comment, CommentReaction, UserPublicData } from "~/types/comment";
 
 // Server function to fetch post by title
@@ -260,9 +261,6 @@ export default function PostPage() {
                             currentUserID={postData.userID}
                             privilegeLevel={postData.privilegeLevel}
                             likes={postData.likes as any[]}
-                            type={
-                              p().category === "project" ? "project" : "blog"
-                            }
                             projectID={p().id}
                           />
                         </div>
@@ -270,9 +268,10 @@ export default function PostPage() {
                     </div>
 
                     {/* Post body */}
-                    <div class="mx-auto max-w-4xl px-4 pt-32 md:pt-40">
+                    <PostBodyClient
-                      <div class="prose max-w-none" innerHTML={p().body} />
+                      body={p().body}
-                    </div>
+                      hasCodeBlock={hasCodeBlock(p().body)}
+                    />
 
                     <Show when={postData.privilegeLevel === "admin"}>
                       <div class="flex justify-center">
@@ -297,7 +296,6 @@ export default function PostPage() {
                           postData.topLevelComments as Comment[]
                         }
                         id={p().id}
-                        type="blog"
                         reactionMap={reactionMap}
                         currentUserID={postData.userID || ""}
                         userCommentMap={userCommentMap}

src/routes/blog/create/index.tsx

@@ -1,18 +1,27 @@
 import { Show, createSignal } from "solid-js";
 import { useSearchParams, useNavigate } from "@solidjs/router";
 import { Title } from "@solidjs/meta";
+import { cache, createAsync } from "@solidjs/router";
+import { getRequestEvent } from "solid-js/web";
+import { getPrivilegeLevel, getUserID } from "~/server/utils";
 import { api } from "~/lib/api";
 
+// Server function to get auth state
+const getAuthState = cache(async () => {
+  "use server";
+  
+  const event = getRequestEvent()!;
+  const privilegeLevel = await getPrivilegeLevel(event.nativeEvent);
+  const userID = await getUserID(event.nativeEvent);
+  
+  return { privilegeLevel, userID };
+}, "auth-state");
+
 export default function CreatePost() {
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
 
-  // TODO: Get actual privilege level from session/auth
+  const authState = createAsync(() => getAuthState());
-  const privilegeLevel = "anonymous";
-  const userID = null;
-
-  const category = () =>
-    searchParams.category === "project" ? "project" : "blog";
 
   const [title, setTitle] = createSignal("");
   const [subtitle, setSubtitle] = createSignal("");
@@ -26,7 +35,7 @@ export default function CreatePost() {
   const handleSubmit = async (e: Event) => {
     e.preventDefault();
 
-    if (!userID) {
+    if (!authState()?.userID) {
       setError("You must be logged in to create a post");
       return;
     }
@@ -36,14 +45,14 @@ export default function CreatePost() {
 
     try {
       const result = await api.database.createPost.mutate({
-        category: category(),
+        category: "blog",
         title: title(),
         subtitle: subtitle() || null,
         body: body() || null,
         banner_photo: bannerPhoto() || null,
         published: published(),
         tags: tags().length > 0 ? tags() : null,
-        author_id: userID
+        author_id: authState()!.userID
       });
 
       if (result.data) {
@@ -60,13 +69,10 @@ export default function CreatePost() {
 
   return (
     <>
-      <Title>
+      <Title>Create Blog Post | Michael Freno</Title>
-        Create {category() === "project" ? "Project" : "Blog Post"} | Michael
-        Freno
-      </Title>
 
       <Show
-        when={privilegeLevel === "admin"}
+        when={authState()?.privilegeLevel === "admin"}
         fallback={
           <div class="w-full pt-[30vh] text-center">
             <div class="text-text text-2xl">Unauthorized</div>
@@ -79,7 +85,7 @@ export default function CreatePost() {
         <div class="bg-base min-h-screen px-4 py-12">
           <div class="mx-auto max-w-4xl">
             <h1 class="mb-8 text-center text-4xl font-bold">
-              Create {category() === "project" ? "Project" : "Blog Post"}
+              Create Blog Post
             </h1>
 
             <form onSubmit={handleSubmit} class="space-y-6">

src/routes/blog/edit/[id]/index.tsx

@@ -3,6 +3,8 @@ import { useParams, useNavigate } from "@solidjs/router";
 import { Title } from "@solidjs/meta";
 import { createAsync } from "@solidjs/router";
 import { cache } from "@solidjs/router";
+import { getRequestEvent } from "solid-js/web";
+import { getPrivilegeLevel, getUserID } from "~/server/utils";
 import { api } from "~/lib/api";
 import { ConnectionFactory } from "~/server/utils";
 
@@ -10,6 +12,10 @@ import { ConnectionFactory } from "~/server/utils";
 const getPostForEdit = cache(async (id: string) => {
   "use server";
 
+  const event = getRequestEvent()!;
+  const privilegeLevel = await getPrivilegeLevel(event.nativeEvent);
+  const userID = await getUserID(event.nativeEvent);
+
   const conn = ConnectionFactory();
   const query = `SELECT * FROM Post WHERE id = ?`;
   const results = await conn.execute({
@@ -26,17 +32,13 @@ const getPostForEdit = cache(async (id: string) => {
   const post = results.rows[0];
   const tags = tagRes.rows;
 
-  return { post, tags };
+  return { post, tags, privilegeLevel, userID };
 }, "post-for-edit");
 
 export default function EditPost() {
   const params = useParams();
   const navigate = useNavigate();
 
-  // TODO: Get actual privilege level from session/auth
-  const privilegeLevel = "anonymous";
-  const userID = null;
-
   const data = createAsync(() => getPostForEdit(params.id));
 
   const [title, setTitle] = createSignal("");
@@ -69,7 +71,7 @@ export default function EditPost() {
   const handleSubmit = async (e: Event) => {
     e.preventDefault();
 
-    if (!userID) {
+    if (!data()?.userID) {
       setError("You must be logged in to edit posts");
       return;
     }
@@ -86,7 +88,7 @@ export default function EditPost() {
         banner_photo: bannerPhoto() || null,
         published: published(),
         tags: tags().length > 0 ? tags() : null,
-        author_id: userID
+        author_id: data()!.userID
       });
 
       // Redirect to the post
@@ -104,7 +106,7 @@ export default function EditPost() {
       <Title>Edit Post | Michael Freno</Title>
 
       <Show
-        when={privilegeLevel === "admin"}
+        when={data()?.privilegeLevel === "admin"}
         fallback={
           <div class="w-full pt-[30vh] text-center">
             <div class="text-2xl">Unauthorized</div>

src/routes/blog/index.tsx

@@ -3,15 +3,19 @@ import { useSearchParams, A } from "@solidjs/router";
 import { Title } from "@solidjs/meta";
 import { createAsync } from "@solidjs/router";
 import { cache } from "@solidjs/router";
-import { ConnectionFactory } from "~/server/utils";
+import { getRequestEvent } from "solid-js/web";
+import { ConnectionFactory, getPrivilegeLevel } from "~/server/utils";
 import PostSortingSelect from "~/components/blog/PostSortingSelect";
 import TagSelector from "~/components/blog/TagSelector";
 import PostSorting from "~/components/blog/PostSorting";
 
 // Server function to fetch posts
-const getPosts = cache(async (category: string, privilegeLevel: string) => {
+const getPosts = cache(async () => {
   "use server";
 
+  const event = getRequestEvent()!;
+  const privilegeLevel = await getPrivilegeLevel(event.nativeEvent);
+
   let query = `
     SELECT
         Post.id,
@@ -36,13 +40,6 @@ const getPosts = cache(async (category: string, privilegeLevel: string) => {
 
   if (privilegeLevel !== "admin") {
     query += ` WHERE Post.published = TRUE`;
-    if (category !== "all") {
-      query += ` AND Post.category = '${category}'`;
-    }
-  } else {
-    if (category !== "all") {
-      query += ` WHERE Post.category = '${category}'`;
-    }
   }
   query += ` GROUP BY Post.id, Post.title, Post.subtitle, Post.body, Post.banner_photo, Post.date, Post.published, Post.category, Post.author_id, Post.reads, Post.attachments ORDER BY Post.date DESC;`;
 
@@ -63,147 +60,71 @@ const getPosts = cache(async (category: string, privilegeLevel: string) => {
     tagMap[tag.value] = (tagMap[tag.value] || 0) + 1;
   });
 
-  return { posts, tags, tagMap };
+  return { posts, tags, tagMap, privilegeLevel };
 }, "blog-posts");
 
 export default function BlogIndex() {
   const [searchParams] = useSearchParams();
 
-  // TODO: Get actual privilege level from session/auth
-  const privilegeLevel = "anonymous";
-
-  const category = () => searchParams.category || "all";
   const sort = () => searchParams.sort || "newest";
   const filters = () => searchParams.filter || "";
 
-  const data = createAsync(() => getPosts(category(), privilegeLevel));
+  const data = createAsync(() => getPosts());
-
-  const bannerImage = () =>
-    category() === "project"
-      ? "/blueprint.jpg"
-      : "/manhattan-night-skyline.jpg";
-  const pageTitle = () =>
-    category() === "all"
-      ? "Posts"
-      : category() === "project"
-        ? "Projects"
-        : "Blog";
 
   return (
     <>
-      <Title>{pageTitle()} | Michael Freno</Title>
+      <Title>Blog | Michael Freno</Title>
 
-      <div class="bg-base min-h-screen overflow-x-hidden">
+      <div class="relative mx-auto min-h-screen rounded-t-lg pt-8 pb-24 shadow-2xl">
-        <div class="z-30">
+        <Suspense
-          <div class="page-fade-in z-20 mx-auto h-80 sm:h-96 md:h-[30vh]">
+          fallback={
-            <div class="image-overlay fixed h-80 w-full brightness-75 sm:h-96 md:h-[50vh]">
+            <div class="mx-auto pt-48">
-              <img
+              <div class="text-center">Loading...</div>
-                src={bannerImage()}
-                alt="post-cover"
-                class="h-80 w-full object-cover sm:h-96 md:h-[50vh]"
-              />
             </div>
-            <div
+          }
-              class="text-shadow fixed top-36 z-10 w-full text-center tracking-widest text-white brightness-150 select-text sm:top-44 md:top-[20vh]"
+        >
-              style={{ "pointer-events": "none" }}
+          <div class="flex flex-col justify-center gap-4 md:flex-row md:justify-around">
-            >
+            <PostSortingSelect />
-              <div class="z-10 text-5xl font-light tracking-widest">
-                {pageTitle()}
-              </div>
-            </div>
-          </div>
-        </div>
 
-        <div class="bg-surface0 relative z-40 mx-auto -mt-16 min-h-screen w-11/12 rounded-t-lg pt-8 pb-24 shadow-2xl sm:-mt-20 md:mt-0 md:w-5/6 lg:w-3/4">
+            <Show when={data() && Object.keys(data()!.tagMap).length > 0}>
-          <Suspense
+              <TagSelector tagMap={data()!.tagMap} />
-            fallback={
+            </Show>
-              <div class="mx-auto pt-48">
+
-                <div class="text-center">Loading...</div>
+            <Show when={data()?.privilegeLevel === "admin"}>
-              </div>
+              <div class="mt-2 flex justify-center md:mt-0 md:justify-end">
-            }
-          >
-            <div class="flex flex-col justify-center gap-4 md:flex-row md:justify-around">
-              <div class="flex justify-center gap-2 md:justify-start">
                 <A
-                  href="/blog?category=all"
+                  href="/blog/create"
-                  class={`rounded border px-4 py-2 transition-all duration-300 ease-out active:scale-90 ${
+                  class="border-text rounded border px-4 py-2 transition-all duration-300 ease-out hover:brightness-125 active:scale-90 md:mr-4"
-                    category() === "all"
-                      ? "border-peach bg-peach text-base"
-                      : "border-text hover:brightness-125"
-                  }`}
                 >
-                  All
+                  Create Post
                 </A>
-                <A
-                  href="/blog?category=blog"
-                  class={`rounded border px-4 py-2 transition-all duration-300 ease-out active:scale-90 ${
-                    category() === "blog"
-                      ? "border-peach bg-peach text-base"
-                      : "border-text hover:brightness-125"
-                  }`}
-                >
-                  Blog
-                </A>
-                <A
-                  href="/blog?category=project"
-                  class={`rounded border px-4 py-2 transition-all duration-300 ease-out active:scale-90 ${
-                    category() === "project"
-                      ? "border-blue bg-blue text-base"
-                      : "border-text hover:brightness-125"
-                  }`}
-                >
-                  Projects
-                </A>
-              </div>
-
-              <PostSortingSelect
-                type={category() === "project" ? "project" : "blog"}
-              />
-
-              <Show when={data() && Object.keys(data()!.tagMap).length > 0}>
-                <TagSelector
-                  tagMap={data()!.tagMap}
-                  category={category() === "project" ? "project" : "blog"}
-                />
-              </Show>
-
-              <Show when={privilegeLevel === "admin"}>
-                <div class="mt-2 flex justify-center md:mt-0 md:justify-end">
-                  <A
-                    href="/blog/create"
-                    class="border-text rounded border px-4 py-2 transition-all duration-300 ease-out hover:brightness-125 active:scale-90 md:mr-4"
-                  >
-                    Create Post
-                  </A>
-                </div>
-              </Show>
-            </div>
-          </Suspense>
-
-          <Suspense
-            fallback={
-              <div class="mx-auto pt-48">
-                <div class="text-center">Loading posts...</div>
-              </div>
-            }
-          >
-            <Show
-              when={data() && data()!.posts.length > 0}
-              fallback={<div class="pt-12 text-center">No posts yet!</div>}
-            >
-              <div class="mx-auto flex w-11/12 flex-col pt-8">
-                <PostSorting
-                  posts={data()!.posts}
-                  tags={data()!.tags}
-                  privilegeLevel={privilegeLevel}
-                  type={category() === "project" ? "project" : "blog"}
-                  filters={filters()}
-                  sort={sort()}
-                />
               </div>
             </Show>
-          </Suspense>
+          </div>
-        </div>
+        </Suspense>
+
+        <Suspense
+          fallback={
+            <div class="mx-auto pt-48">
+              <div class="text-center">Loading posts...</div>
+            </div>
+          }
+        >
+          <Show
+            when={data() && data()!.posts.length > 0}
+            fallback={<div class="pt-12 text-center">No posts yet!</div>}
+          >
+            <div class="mx-auto flex w-11/12 flex-col pt-8">
+              <PostSorting
+                posts={data()!.posts}
+                tags={data()!.tags}
+                privilegeLevel={data()!.privilegeLevel}
+                filters={filters()}
+                sort={sort()}
+              />
+            </div>
+          </Show>
+        </Suspense>
       </div>
     </>
   );

src/routes/sitemap.xml.ts

@@ -9,12 +9,6 @@ export async function GET(event: APIEvent) {
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
   </url>
-  <url>
-    <loc>https://www.freno.me/projects</loc>
-    <lastmod>${new Date().toISOString()}</lastmod>
-    <changefreq>weekly</changefreq>
-    <priority>0.8</priority>
-  </url>
   <url>
     <loc>https://www.freno.me/blog</loc>
     <lastmod>${new Date().toISOString()}</lastmod>

src/routes/test.tsx

@@ -242,7 +242,7 @@ const routerSections: RouterSection[] = [
   },
   {
     name: "Database - Posts",
-    description: "CRUD operations for blog/project posts",
+    description: "CRUD operations for blog posts",
     endpoints: [
       {
         name: "Get Post by ID",
@@ -258,14 +258,14 @@ const routerSections: RouterSection[] = [
         procedure: "getPostByTitle",
         method: "query",
         description: "Fetch post with comments, likes, and tags",
-        sampleInput: { category: "project", title: "My Project" }
+        sampleInput: { category: "blog", title: "My Blog Post" }
       },
       {
         name: "Create Post",
         router: "database",
         procedure: "createPost",
         method: "mutation",
-        description: "Create a new blog/project post",
+        description: "Create a new blog post",
         sampleInput: {
           category: "blog",
           title: "Test Post",

src/server/api/routers/database.ts

@@ -138,7 +138,7 @@ export const databaseRouter = createTRPCRouter({
 
   getPostById: publicProcedure
     .input(z.object({
-      category: z.enum(["blog", "project"]),
+      category: z.literal("blog"),
       id: z.number(),
     }))
     .query(async ({ input }) => {
@@ -174,7 +174,7 @@ export const databaseRouter = createTRPCRouter({
 
   getPostByTitle: publicProcedure
     .input(z.object({
-      category: z.enum(["blog", "project"]),
+      category: z.literal("blog"),
       title: z.string(),
     }))
     .query(async ({ input, ctx }) => {
@@ -216,7 +216,7 @@ export const databaseRouter = createTRPCRouter({
         });
 
         return {
-          project: postResults.rows[0],
+          post: postResults.rows[0],
           comments: commentResults.rows,
           likes: likeResults.rows,
           tagResults: tagResults.rows,
@@ -231,7 +231,7 @@ export const databaseRouter = createTRPCRouter({
 
   createPost: publicProcedure
     .input(z.object({
-      category: z.enum(["blog", "project"]),
+      category: z.literal("blog"),
       title: z.string(),
       subtitle: z.string().nullable(),
       body: z.string().nullable(),

src/types/comment.ts

@@ -79,8 +79,6 @@ export interface BackupResponse {
 
 export type PrivilegeLevel = "admin" | "user" | "anonymous";
 
-export type PostType = "blog" | "project";
-
 export type SortingMode = "newest" | "oldest" | "highest_rated" | "hot";
 
 export type DeletionType = "user" | "admin" | "database";
@@ -96,7 +94,6 @@ export interface CommentSectionWrapperProps {
   allComments: Comment[];
   topLevelComments: Comment[];
   id: number;
-  type: PostType;
   reactionMap: Map<number, CommentReaction[]>;
   currentUserID: string;
   userCommentMap: Map<UserPublicData, number[]>;
@@ -104,7 +101,6 @@ export interface CommentSectionWrapperProps {
 
 export interface CommentSectionProps {
   privilegeLevel: PrivilegeLevel;
-  type: PostType;
   postID: number;
   allComments: Comment[];
   topLevelComments: Comment[];
@@ -127,7 +123,6 @@ export interface CommentSectionProps {
 
 export interface CommentBlockProps {
   comment: Comment;
-  category: PostType;
   projectID: number;
   recursionCount: number;
   allComments: Comment[] | undefined;
@@ -156,7 +151,6 @@ export interface CommentInputBlockProps {
   isReply: boolean;
   parent_id?: number;
   privilegeLevel: PrivilegeLevel;
-  type: PostType;
   post_id: number;
   socket: WebSocket | undefined;
   currentUserID: string;
@@ -167,7 +161,6 @@ export interface CommentInputBlockProps {
 export interface CommentSortingProps {
   topLevelComments: Comment[];
   privilegeLevel: PrivilegeLevel;
-  type: PostType;
   postID: number;
   allComments: Comment[];
   reactionMap: Map<number, CommentReaction[]>;