this is nice ngl

src/components/Bars.tsx

@@ -1,6 +1,7 @@
 import { Typewriter } from "./Typewriter";
 import { useBars } from "~/context/bars";
-import { onMount, createEffect } from "solid-js";
+import { onMount, createEffect, createSignal, Show, For } from "solid-js";
+import { api } from "~/lib/api";
 
 export function LeftBar() {
   const { setLeftBarSize, leftBarVisible, setLeftBarVisible } = useBars();
@@ -9,7 +10,20 @@ export function LeftBar() {
   let touchStartX = 0;
   let touchStartY = 0;
 
-  onMount(() => {
+  const [recentPosts, setRecentPosts] = createSignal<any[] | undefined>(
+    undefined
+  );
+
+  onMount(async () => {
+    // Fetch recent posts only on client side to avoid hydration mismatch
+    try {
+      const posts = await api.blog.getRecentPosts.query();
+      setRecentPosts(posts as any[]);
+    } catch (error) {
+      console.error("Failed to fetch recent posts:", error);
+      setRecentPosts([]);
+    }
+
     if (ref) {
       const updateSize = () => {
         actualWidth = ref?.offsetWidth || 0;
@@ -57,7 +71,7 @@ export function LeftBar() {
 
         if (!isMobile || !leftBarVisible()) return;
 
-        if (e.key === 'Tab') {
+        if (e.key === "Tab") {
           const focusableElements = ref?.querySelectorAll(
             'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
           );
@@ -65,7 +79,9 @@ export function LeftBar() {
           if (!focusableElements || focusableElements.length === 0) return;
 
           const firstElement = focusableElements[0] as HTMLElement;
-          const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;
+          const lastElement = focusableElements[
+            focusableElements.length - 1
+          ] as HTMLElement;
 
           if (e.shiftKey) {
             // Shift+Tab - going backwards
@@ -83,15 +99,15 @@ export function LeftBar() {
         }
       };
 
-      ref.addEventListener('touchstart', handleTouchStart, { passive: true });
+      ref.addEventListener("touchstart", handleTouchStart, { passive: true });
-      ref.addEventListener('touchend', handleTouchEnd, { passive: true });
+      ref.addEventListener("touchend", handleTouchEnd, { passive: true });
-      ref.addEventListener('keydown', handleKeyDown);
+      ref.addEventListener("keydown", handleKeyDown);
 
       return () => {
         resizeObserver.disconnect();
-        ref?.removeEventListener('touchstart', handleTouchStart);
+        ref?.removeEventListener("touchstart", handleTouchStart);
-        ref?.removeEventListener('touchend', handleTouchEnd);
+        ref?.removeEventListener("touchend", handleTouchEnd);
-        ref?.removeEventListener('keydown', handleKeyDown);
+        ref?.removeEventListener("keydown", handleKeyDown);
       };
     }
   });
@@ -107,7 +123,7 @@ export function LeftBar() {
 
     if (leftBarVisible() && isMobile && ref) {
       const firstFocusable = ref.querySelector(
-        'a[href], button:not([disabled]), input:not([disabled])'
+        "a[href], button:not([disabled]), input:not([disabled])"
       ) as HTMLElement;
 
       if (firstFocusable) {
@@ -120,7 +136,7 @@ export function LeftBar() {
   return (
     <nav
       ref={ref}
-      class="border-r-overlay2 fixed h-full min-h-screen w-fit max-w-[25%] border-r-2 transition-transform duration-500 ease-out z-50"
+      class="border-r-overlay2 fixed z-50 h-full w-fit max-w-[25%] border-r-2 transition-transform duration-500 ease-out"
       classList={{
         "-translate-x-full": !leftBarVisible(),
         "translate-x-0": leftBarVisible()
@@ -137,35 +153,67 @@ export function LeftBar() {
         </h3>
       </Typewriter>
       <Typewriter keepAlive={false} class="z-50 h-full">
-        <div class="text-text flex h-full flex-col justify-between px-4 text-xl font-bold">
+        <div class="text-text flex flex-col px-4 text-xl font-bold">
           <ul class="gap-4">
-            {/*TODO:Grab and render 5 most recent blog posts here */}
+            {/* Recent blog posts */}
-            <li></li>
+            <li class="mt-2 mb-6">
+              <div class="flex flex-col gap-2">
+                <span class="text-lg font-semibold">Recent Posts</span>
+                <div class="flex flex-col gap-3">
+                  <Show
+                    when={recentPosts()}
+                    fallback={<div class="text-sm">Loading...</div>}
+                  >
+                    <For each={recentPosts()}>
+                      {(post) => (
+                        <a
+                          href={`/blog/${post.title}`}
+                          class="hover:text-subtext0 transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105 hover:font-bold"
+                        >
+                          <div class="flex flex-col">
+                            <span>{post.title.replace(/_/g, " ")}</span>
+                            <span class="text-subtext0 text-sm">
+                              {new Date(post.date).toLocaleDateString("en-US", {
+                                month: "short",
+                                day: "numeric",
+                                year: "numeric"
+                              })}
+                            </span>
+                          </div>
+                        </a>
+                      )}
+                    </For>
+                  </Show>
+                </div>
+              </div>
+            </li>
           </ul>
-          <div class="flex flex-col gap-4">
+          <div class="absolute bottom-12">
-            <ul class="gap-4">
+            <div class="flex flex-col gap-4">
-              <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
+              <ul class="gap-4">
-                <a href="/">Home</a>
+                <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
-              </li>
+                  <a href="/">Home</a>
-              <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
+                </li>
-                <a href="/blog">Blog</a>
+                <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
-              </li>
+                  <a href="/blog">Blog</a>
-              <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
+                </li>
-                <a href="#services">Services</a>
+                <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
-              </li>
+                  <a href="#services">Services</a>
-            </ul>
+                </li>
-            {/* Right bar navigation merged for mobile */}
+              </ul>
-            <ul class="gap-4 md:hidden border-t border-overlay0 pt-4">
+              {/* Right bar navigation merged for mobile */}
-              <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
+              <ul class="border-overlay0 gap-4 border-t pt-4 md:hidden">
-                <a href="#home">Home</a>
+                <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
-              </li>
+                  <a href="#home">Home</a>
-              <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
+                </li>
-                <a href="#about">About</a>
+                <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
-              </li>
+                  <a href="#about">About</a>
-              <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
+                </li>
-                <a href="#services">Services</a>
+                <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
-              </li>
+                  <a href="#services">Services</a>
-            </ul>
+                </li>
+              </ul>
+            </div>
           </div>
         </div>
       </Typewriter>
@@ -210,7 +258,7 @@ export function RightBar() {
   return (
     <nav
       ref={ref}
-      class="border-l-overlay2 fixed right-0 h-full min-h-screen w-fit max-w-[25%] border-l-2 transition-transform duration-500 ease-out md:block hidden z-50"
+      class="border-l-overlay2 fixed right-0 z-50 hidden h-full min-h-screen w-fit max-w-[25%] border-l-2 transition-transform duration-500 ease-out md:block"
       classList={{
         "translate-x-full": !rightBarVisible(),
         "translate-x-0": rightBarVisible()

src/components/blog/PostSorting.tsx

@@ -1,15 +1,8 @@
 import { For, Show } from "solid-js";
 import Card, { Post } from "./Card";
 
-export interface Tag {
-  id: number;
-  value: string;
-  post_id: number;
-}
-
 export interface PostSortingProps {
   posts: Post[];
-  tags: Tag[];
   privilegeLevel: "anonymous" | "admin" | "user";
   filters?: string;
   sort?: string;
@@ -18,11 +11,23 @@ export interface PostSortingProps {
 export default function PostSorting(props: PostSortingProps) {
   const postsToFilter = () => {
     const filterSet = new Set<number>();
-    props.tags.forEach((tag) => {
+
-      if (props.filters?.split("|").includes(tag.value.slice(1))) {
+    if (!props.filters) return filterSet;
-        filterSet.add(tag.post_id);
+
+    const filterTags = props.filters.split("|");
+
+    props.posts.forEach((post) => {
+      if (post.tags) {
+        const postTags = post.tags.split(",");
+        const hasMatchingTag = postTags.some((tag) =>
+          filterTags.includes(tag.slice(1))
+        );
+        if (hasMatchingTag) {
+          filterSet.add(post.id);
+        }
       }
     });
+
     return filterSet;
   };
 

src/routes/blog/index.tsx

@@ -1,90 +1,19 @@
 import { Show, Suspense } from "solid-js";
-import { useSearchParams, A, query } from "@solidjs/router";
+import { useSearchParams, A } from "@solidjs/router";
 import { Title } from "@solidjs/meta";
 import { createAsync } from "@solidjs/router";
-import { getRequestEvent } from "solid-js/web";
+import { api } from "~/lib/api";
-import { ConnectionFactory, getPrivilegeLevel } from "~/server/utils";
 import PostSortingSelect from "~/components/blog/PostSortingSelect";
 import TagSelector from "~/components/blog/TagSelector";
 import PostSorting from "~/components/blog/PostSorting";
 
-// Simple in-memory cache for blog posts to reduce DB load
-let cachedPosts: {
-  posts: any[];
-  tagMap: Record<string, number>;
-  privilegeLevel: string;
-} | null = null;
-let cacheTimestamp: number = 0;
-
-// Server function to fetch posts
-const getPosts = query(async () => {
-  "use server";
-
-  const event = getRequestEvent()!;
-  const privilegeLevel = await getPrivilegeLevel(event.nativeEvent);
-
-  // Check if we have fresh cached data (cache duration: 30 seconds)
-  const now = Date.now();
-  if (cachedPosts && now - cacheTimestamp < 30000) {
-    return cachedPosts;
-  }
-
-  // Single optimized query using JOINs instead of subqueries and separate queries
-  let query = `
-    SELECT 
-      p.id,
-      p.title,
-      p.subtitle,
-      p.body,
-      p.banner_photo,
-      p.date,
-      p.published,
-      p.category,
-      p.author_id,
-      p.reads,
-      p.attachments,
-      COUNT(DISTINCT pl.user_id) as total_likes,
-      COUNT(DISTINCT c.id) as total_comments,
-      GROUP_CONCAT(t.value) as tags
-    FROM Post p
-    LEFT JOIN PostLike pl ON p.id = pl.post_id
-    LEFT JOIN Comment c ON p.id = c.post_id
-    LEFT JOIN Tag t ON p.id = t.post_id`;
-
-  if (privilegeLevel !== "admin") {
-    query += ` WHERE p.published = TRUE`;
-  }
-  query += ` GROUP BY p.id, p.title, p.subtitle, p.body, p.banner_photo, p.date, p.published, p.category, p.author_id, p.reads, p.attachments ORDER BY p.date DESC;`;
-
-  const conn = ConnectionFactory();
-  const results = await conn.execute(query);
-  const posts = results.rows;
-
-  // Process tags into a map for the UI
-  let tagMap: Record<string, number> = {};
-  posts.forEach((post: any) => {
-    if (post.tags) {
-      const postTags = post.tags.split(",");
-      postTags.forEach((tag: string) => {
-        tagMap[tag] = (tagMap[tag] || 0) + 1;
-      });
-    }
-  });
-
-  // Cache the results
-  cachedPosts = { posts, tagMap, privilegeLevel };
-  cacheTimestamp = now;
-
-  return cachedPosts;
-}, "blog-posts");
-
 export default function BlogIndex() {
   const [searchParams] = useSearchParams();
 
   const sort = () => searchParams.sort || "newest";
   const filters = () => searchParams.filter || "";
 
-  const data = createAsync(() => getPosts());
+  const data = createAsync(() => api.blog.getPosts.query());
 
   return (
     <>
@@ -132,7 +61,6 @@ export default function BlogIndex() {
             <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()}

src/server/api/root.ts

@@ -4,6 +4,7 @@ import { databaseRouter } from "./routers/database";
 import { lineageRouter } from "./routers/lineage";
 import { miscRouter } from "./routers/misc";
 import { userRouter } from "./routers/user";
+import { blogRouter } from "./routers/blog";
 import { createTRPCRouter } from "./utils";
 
 export const appRouter = createTRPCRouter({
@@ -12,7 +13,8 @@ export const appRouter = createTRPCRouter({
   database: databaseRouter,
   lineage: lineageRouter,
   misc: miscRouter,
-  user: userRouter
+  user: userRouter,
+  blog: blogRouter
 });
 
 export type AppRouter = typeof appRouter;

src/server/api/routers/blog.ts

@@ -0,0 +1,100 @@
+import { createTRPCRouter, publicProcedure } from "../utils";
+import { ConnectionFactory } from "~/server/utils";
+
+// Simple in-memory cache for blog posts to reduce DB load
+let cachedPosts: {
+  posts: any[];
+  tagMap: Record<string, number>;
+  privilegeLevel: string;
+} | null = null;
+let cacheTimestamp: number = 0;
+
+export const blogRouter = createTRPCRouter({
+  getRecentPosts: publicProcedure.query(async () => {
+    // Get database connection
+    const conn = ConnectionFactory();
+
+    // Query for the 3 most recent published posts
+    const query = `
+      SELECT 
+        p.id,
+        p.title,
+        p.subtitle,
+        p.date,
+        p.published,
+        p.category,
+        p.author_id,
+        p.reads,
+        COUNT(DISTINCT pl.user_id) as total_likes,
+        COUNT(DISTINCT c.id) as total_comments
+      FROM Post p
+      LEFT JOIN PostLike pl ON p.id = pl.post_id
+      LEFT JOIN Comment c ON p.id = c.post_id
+      WHERE p.published = TRUE
+      GROUP BY p.id, p.title, p.subtitle, p.date, p.published, p.category, p.author_id, p.reads
+      ORDER BY p.date DESC
+      LIMIT 3;
+    `;
+
+    const results = await conn.execute(query);
+    return results.rows;
+  }),
+
+  getPosts: publicProcedure.query(async ({ ctx }) => {
+    const privilegeLevel = ctx.privilegeLevel;
+
+    // Check if we have fresh cached data (cache duration: 30 seconds)
+    const now = Date.now();
+    if (cachedPosts && now - cacheTimestamp < 30000) {
+      return cachedPosts;
+    }
+
+    // Single optimized query using JOINs instead of subqueries and separate queries
+    let query = `
+      SELECT 
+        p.id,
+        p.title,
+        p.subtitle,
+        p.body,
+        p.banner_photo,
+        p.date,
+        p.published,
+        p.category,
+        p.author_id,
+        p.reads,
+        p.attachments,
+        COUNT(DISTINCT pl.user_id) as total_likes,
+        COUNT(DISTINCT c.id) as total_comments,
+        GROUP_CONCAT(t.value) as tags
+      FROM Post p
+      LEFT JOIN PostLike pl ON p.id = pl.post_id
+      LEFT JOIN Comment c ON p.id = c.post_id
+      LEFT JOIN Tag t ON p.id = t.post_id`;
+
+    if (privilegeLevel !== "admin") {
+      query += ` WHERE p.published = TRUE`;
+    }
+    query += ` GROUP BY p.id, p.title, p.subtitle, p.body, p.banner_photo, p.date, p.published, p.category, p.author_id, p.reads, p.attachments ORDER BY p.date DESC;`;
+
+    const conn = ConnectionFactory();
+    const results = await conn.execute(query);
+    const posts = results.rows;
+
+    // Process tags into a map for the UI
+    let tagMap: Record<string, number> = {};
+    posts.forEach((post: any) => {
+      if (post.tags) {
+        const postTags = post.tags.split(",");
+        postTags.forEach((tag: string) => {
+          tagMap[tag] = (tagMap[tag] || 0) + 1;
+        });
+      }
+    });
+
+    // Cache the results
+    cachedPosts = { posts, tagMap, privilegeLevel };
+    cacheTimestamp = now;
+
+    return cachedPosts;
+  })
+});