perf improvements

package.json

@@ -75,6 +75,8 @@
     "playwright": "^1.57.0",
     "prettier": "^3.7.4",
     "prettier-plugin-tailwindcss": "^0.7.2",
-    "trpc-panel": "^1.3.4"
+    "rollup-plugin-visualizer": "^6.0.5",
+    "trpc-panel": "^1.3.4",
+    "vite-bundle-visualizer": "^1.2.1"
   }
 }

src/components/Bars.tsx

@@ -265,47 +265,60 @@ export function LeftBar() {
     const glitchChars = "!@#$%^&*()_+-=[]{}|;':\",./<>?~`";
     const originalText = "What's this?";
     let glitchInterval: NodeJS.Timeout;
+    let animationFrame: number;
 
     setTimeout(() => {
       setGetLostVisible(true);
 
       let currentIndex = 0;
-      const typeInterval = setInterval(() => {
-        if (currentIndex <= originalText.length) {
-          let displayText = originalText.substring(0, currentIndex);
-          if (currentIndex < originalText.length) {
-            const remaining = originalText.length - currentIndex;
-            for (let i = 0; i < remaining; i++) {
-              displayText +=
-                glitchChars[Math.floor(Math.random() * glitchChars.length)];
-            }
-          }
-          setGetLostText(displayText);
-          currentIndex++;
-        } else {
-          clearInterval(typeInterval);
-          setGetLostText(originalText);
+      let lastUpdate = 0;
+      const updateInterval = 80; // ms between updates
 
-          glitchInterval = setInterval(() => {
-            if (Math.random() > 0.9) {
-              let glitched = "";
-              for (let i = 0; i < originalText.length; i++) {
-                if (Math.random() > 0.7) {
-                  glitched +=
-                    glitchChars[Math.floor(Math.random() * glitchChars.length)];
-                } else {
-                  glitched += originalText[i];
-                }
+      const revealAnimation = (timestamp: number) => {
+        if (timestamp - lastUpdate >= updateInterval) {
+          if (currentIndex <= originalText.length) {
+            let displayText = originalText.substring(0, currentIndex);
+            if (currentIndex < originalText.length) {
+              const remaining = originalText.length - currentIndex;
+              for (let i = 0; i < remaining; i++) {
+                displayText +=
+                  glitchChars[Math.floor(Math.random() * glitchChars.length)];
               }
-              setGetLostText(glitched);
-
-              setTimeout(() => {
-                setGetLostText(originalText);
-              }, 100);
             }
-          }, 150);
+            setGetLostText(displayText);
+            currentIndex++;
+            lastUpdate = timestamp;
+          } else {
+            setGetLostText(originalText);
+
+            // Occasional glitch effect after reveal
+            glitchInterval = setInterval(() => {
+              if (Math.random() > 0.92) {
+                let glitched = "";
+                for (let i = 0; i < originalText.length; i++) {
+                  if (Math.random() > 0.75) {
+                    glitched +=
+                      glitchChars[
+                        Math.floor(Math.random() * glitchChars.length)
+                      ];
+                  } else {
+                    glitched += originalText[i];
+                  }
+                }
+                setGetLostText(glitched);
+
+                setTimeout(() => {
+                  setGetLostText(originalText);
+                }, 80);
+              }
+            }, 200);
+            return;
+          }
         }
-      }, 140);
+        animationFrame = requestAnimationFrame(revealAnimation);
+      };
+
+      animationFrame = requestAnimationFrame(revealAnimation);
     }, 500);
 
     if (ref) {
@@ -345,11 +358,13 @@ export function LeftBar() {
       onCleanup(() => {
         ref?.removeEventListener("keydown", handleKeyDown);
         clearInterval(glitchInterval);
+        if (animationFrame) cancelAnimationFrame(animationFrame);
         window.removeEventListener("resize", handleResize);
       });
     } else {
       onCleanup(() => {
         clearInterval(glitchInterval);
+        if (animationFrame) cancelAnimationFrame(animationFrame);
         window.removeEventListener("resize", handleResize);
       });
     }
@@ -586,7 +601,8 @@ export function LeftBar() {
                     navigate(randomUrl);
                     handleLinkClick();
                   }}
-                  class="text-left font-mono"
+                  class="text-left font-mono transition-opacity duration-75"
+                  style={{ "will-change": "contents" }}
                 >
                   {getLostText()}
                 </button>

src/components/blog/Card.tsx

@@ -1,12 +1,14 @@
-import { Show } from "solid-js";
+import { Show, lazy } from "solid-js";
 import CardLinks from "./CardLinks";
-import DeletePostButton from "./DeletePostButton";
 import { Fire } from "~/components/icons/Fire";
-import { Post } from "~/db/types";
+import { PostCardData } from "~/db/types";
+
+const DeletePostButton = lazy(() => import("./DeletePostButton"));
 
 export interface CardProps {
-  post: Post;
+  post: PostCardData;
   privilegeLevel: "anonymous" | "admin" | "user";
+  index?: number;
 }
 
 export default function Card(props: CardProps) {
@@ -27,6 +29,12 @@ export default function Card(props: CardProps) {
       <img
         src={props.post.banner_photo ?? ""}
         alt={props.post.title.replaceAll("_", " ") + " banner"}
+        loading={
+          props.index !== undefined && props.index < 3 ? "eager" : "lazy"
+        }
+        fetchpriority={props.index === 0 ? "high" : "auto"}
+        width={1200}
+        height={630}
         class="h-full w-full object-cover"
       />
       <div class="border-opacity-20 bg-opacity-40 bg-crust border-text absolute bottom-0 w-full border-t px-2 py-4 backdrop-blur-md md:px-6">

src/components/blog/PostSorting.tsx

@@ -1,6 +1,6 @@
 import { For, Show, createMemo } from "solid-js";
 import Card from "./Card";
-import { Post } from "~/db/types";
+import { PostCardData } from "~/db/types";
 
 export interface Tag {
   value: string;
@@ -8,7 +8,7 @@ export interface Tag {
 }
 
 export interface PostSortingProps {
-  posts: Post[];
+  posts: PostCardData[];
   tags: Tag[];
   privilegeLevel: "anonymous" | "admin" | "user";
   filters?: string;
@@ -133,9 +133,13 @@ export default function PostSorting(props: PostSortingProps) {
       }
     >
       <For each={sortedPosts()}>
-        {(post) => (
+        {(post, index) => (
           <div class="my-4">
-            <Card post={post} privilegeLevel={props.privilegeLevel} />
+            <Card
+              post={post}
+              privilegeLevel={props.privilegeLevel}
+              index={index()}
+            />
           </div>
         )}
       </For>

src/db/create.ts

@@ -63,6 +63,9 @@ export const model: { [key: string]: string } = {
       last_edited_date TEXT
     );
     CREATE INDEX IF NOT EXISTS idx_posts_category ON Post (category);
+    CREATE INDEX IF NOT EXISTS idx_posts_published ON Post (published);
+    CREATE INDEX IF NOT EXISTS idx_posts_date ON Post (date);
+    CREATE INDEX IF NOT EXISTS idx_posts_published_date ON Post (published, date);
   `,
   PostLike: `
     CREATE TABLE PostLike 
@@ -72,6 +75,7 @@ export const model: { [key: string]: string } = {
       post_id INTEGER NOT NULL
     );
     CREATE UNIQUE INDEX IF NOT EXISTS idx_likes_user_post ON PostLike (user_id, post_id);
+    CREATE INDEX IF NOT EXISTS idx_likes_post_id ON PostLike (post_id);
   `,
   Comment: `
     CREATE TABLE Comment 

src/db/types.ts

@@ -105,6 +105,21 @@ export interface PostWithCommentsAndLikes {
   total_comments: number;
   last_edited_date?: string | null;
 }
+
+export interface PostCardData {
+  id: number;
+  category: "blog" | "project";
+  title: string;
+  subtitle: string;
+  banner_photo: string;
+  date?: string | null;
+  published: number;
+  author_id: string;
+  reads: number;
+  attachments: string;
+  total_likes: number;
+  total_comments: number;
+}
 export interface PostWithTags {
   id: number;
   category: "blog" | "project"; // this is no longer used

src/routes/blog/index.tsx

@@ -1,4 +1,4 @@
-import { Show } from "solid-js";
+import { Show, createSignal, onMount, lazy } from "solid-js";
 import { useSearchParams, A, query } from "@solidjs/router";
 import { Title } from "@solidjs/meta";
 import { createAsync } from "@solidjs/router";
@@ -6,11 +6,15 @@ import { getRequestEvent } from "solid-js/web";
 import PostSortingSelect from "~/components/blog/PostSortingSelect";
 import TagSelector from "~/components/blog/TagSelector";
 import PostSorting from "~/components/blog/PostSorting";
-import PublishStatusToggle from "~/components/blog/PublishStatusToggle";
 import { TerminalSplash } from "~/components/TerminalSplash";
 import { CACHE_CONFIG } from "~/config";
 
-const getPosts = query(async () => {
+const PublishStatusToggle = lazy(() => import("~/components/blog/PublishStatusToggle"));
+
+const POSTS_PER_PAGE = 12;
+
+// Separate query for all tags (needed for TagSelector)
+const getAllTags = query(async () => {
   "use server";
   const { ConnectionFactory, getPrivilegeLevel } =
     await import("~/server/utils");
@@ -19,17 +23,61 @@ const getPosts = query(async () => {
   const privilegeLevel = await getPrivilegeLevel(event.nativeEvent);
 
   return withCache(
-    `posts-${privilegeLevel}`,
+    `all-tags-${privilegeLevel}`,
     CACHE_CONFIG.BLOG_POSTS_LIST_CACHE_TTL_MS,
     async () => {
       const conn = ConnectionFactory();
 
+      const tagsQuery = `
+        SELECT t.value, t.post_id
+        FROM Tag t
+        JOIN Post p ON t.post_id = p.id
+        ${privilegeLevel !== "admin" ? "WHERE p.published = TRUE" : ""}
+        ORDER BY t.value ASC
+      `;
+
+      const tagsResult = await conn.execute(tagsQuery);
+      const tags = tagsResult.rows;
+
+      const tagMap: Record<string, number> = {};
+      tags.forEach((tag: any) => {
+        const key = `${tag.value}`;
+        tagMap[key] = (tagMap[key] || 0) + 1;
+      });
+
+      return { tagMap, privilegeLevel };
+    }
+  );
+}, "all-tags");
+
+const getPosts = query(async (page: number = 1) => {
+  "use server";
+  const { ConnectionFactory, getPrivilegeLevel } =
+    await import("~/server/utils");
+  const { withCache } = await import("~/server/cache");
+  const event = getRequestEvent()!;
+  const privilegeLevel = await getPrivilegeLevel(event.nativeEvent);
+
+  return withCache(
+    `posts-${privilegeLevel}-page-${page}`,
+    CACHE_CONFIG.BLOG_POSTS_LIST_CACHE_TTL_MS,
+    async () => {
+      const conn = ConnectionFactory();
+      const offset = (page - 1) * POSTS_PER_PAGE;
+
+      // Get total count first
+      let countQuery = `SELECT COUNT(*) as total FROM Post p`;
+      if (privilegeLevel !== "admin") {
+        countQuery += ` WHERE p.published = TRUE`;
+      }
+      const countResult = await conn.execute(countQuery);
+      const totalPosts = (countResult.rows[0] as any).total;
+
       let postsQuery = `
       SELECT 
         p.id,
         p.title,
         p.subtitle,
-        p.body,
         p.banner_photo,
         p.date,
         p.published,
@@ -48,96 +96,185 @@ const getPosts = query(async () => {
         postsQuery += ` WHERE p.published = TRUE`;
       }
 
-      postsQuery += ` 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`;
-      postsQuery += ` ORDER BY p.date ASC;`;
+      postsQuery += ` GROUP BY p.id, p.title, p.subtitle, p.banner_photo, p.date, p.published, p.category, p.author_id, p.reads, p.attachments`;
+      postsQuery += ` ORDER BY p.date ASC`;
+      postsQuery += ` LIMIT ${POSTS_PER_PAGE} OFFSET ${offset};`;
 
       const postsResult = await conn.execute(postsQuery);
       const posts = postsResult.rows;
 
-      const tagsQuery = `
+      // Only fetch tags for the posts we're returning
+      const postIds = posts.map((p: any) => p.id).join(",");
+      const tagsQuery = postIds
+        ? `
       SELECT t.value, t.post_id
       FROM Tag t
-      JOIN Post p ON t.post_id = p.id
-      ${privilegeLevel !== "admin" ? "WHERE p.published = TRUE" : ""}
+      WHERE t.post_id IN (${postIds})
       ORDER BY t.value ASC
-    `;
+    `
+        : `SELECT t.value, t.post_id FROM Tag t WHERE 1=0`;
 
       const tagsResult = await conn.execute(tagsQuery);
       const tags = tagsResult.rows;
 
-      const tagMap: Record<string, number> = {};
-      tags.forEach((tag: any) => {
-        const key = `${tag.value}`;
-        tagMap[key] = (tagMap[key] || 0) + 1;
-      });
-
-      return { posts, tags, tagMap, privilegeLevel };
+      return {
+        posts,
+        tags,
+        hasMore: offset + posts.length < totalPosts,
+        totalPosts
+      };
     }
   );
 }, "posts");
 
 export default function BlogIndex() {
   const [searchParams] = useSearchParams();
+  const [currentPage, setCurrentPage] = createSignal(1);
+  const [allPosts, setAllPosts] = createSignal<any[]>([]);
+  const [allTags, setAllTags] = createSignal<any[]>([]);
+  const [hasMore, setHasMore] = createSignal(true);
+  const [isLoading, setIsLoading] = createSignal(false);
+  let sentinelRef: HTMLDivElement | undefined;
 
-  const sort = () => searchParams.sort || "newest";
-  const filters = () =>
-    "filter" in searchParams ? searchParams.filter : undefined;
-  const include = () =>
-    "include" in searchParams ? searchParams.include : undefined;
-  const status = () =>
-    "status" in searchParams ? searchParams.status : undefined;
+  const sort = () => {
+    const sortParam = searchParams.sort;
+    return Array.isArray(sortParam) ? sortParam[0] : sortParam || "newest";
+  };
+  const filters = () => {
+    const filterParam = searchParams.filter;
+    return filterParam
+      ? Array.isArray(filterParam)
+        ? filterParam[0]
+        : filterParam
+      : undefined;
+  };
+  const include = () => {
+    const includeParam = searchParams.include;
+    return includeParam
+      ? Array.isArray(includeParam)
+        ? includeParam[0]
+        : includeParam
+      : undefined;
+  };
+  const status = () => {
+    const statusParam = searchParams.status;
+    return statusParam
+      ? Array.isArray(statusParam)
+        ? statusParam[0]
+        : statusParam
+      : undefined;
+  };
 
-  const data = createAsync(() => getPosts(), { deferStream: true });
+  // Load initial page and tag data
+  const initialData = createAsync(() => getPosts(1), { deferStream: true });
+  const tagsData = createAsync(() => getAllTags(), { deferStream: true });
+
+  // Initialize with first page data
+  const initializeData = () => {
+    const firstPage = initialData();
+    if (firstPage) {
+      setAllPosts(firstPage.posts);
+      setAllTags(firstPage.tags);
+      setHasMore(firstPage.hasMore);
+    }
+  };
+
+  // Load more posts
+  const loadMorePosts = async () => {
+    if (isLoading() || !hasMore()) return;
+
+    setIsLoading(true);
+    const nextPage = currentPage() + 1;
+
+    try {
+      const newData = await getPosts(nextPage);
+      setAllPosts((prev) => [...prev, ...newData.posts]);
+      setAllTags((prev) => [...prev, ...newData.tags]);
+      setHasMore(newData.hasMore);
+      setCurrentPage(nextPage);
+    } catch (error) {
+      console.error("Error loading more posts:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Set up IntersectionObserver for infinite scroll
+  onMount(() => {
+    initializeData();
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) {
+          loadMorePosts();
+        }
+      },
+      { rootMargin: "200px" }
+    );
+
+    if (sentinelRef) {
+      observer.observe(sentinelRef);
+    }
+
+    return () => observer.disconnect();
+  });
 
   return (
     <>
       <Title>Blog | Michael Freno</Title>
 
       <div class="mx-auto py-16 pb-24">
-        <Show when={data()} fallback={<TerminalSplash />}>
-          {(loadedData) => (
-            <>
-              <div class="flex flex-col items-center gap-4 px-4 md:flex-row md:justify-around">
-                <PostSortingSelect />
+        <Show when={initialData() && tagsData()} fallback={<TerminalSplash />}>
+          <div class="flex flex-col items-center gap-4 px-4 md:flex-row md:justify-around">
+            <PostSortingSelect />
 
-                <Show when={Object.keys(loadedData().tagMap).length > 0}>
-                  <TagSelector tagMap={loadedData().tagMap} />
-                </Show>
+            <Show
+              when={tagsData() && Object.keys(tagsData()!.tagMap).length > 0}
+            >
+              <TagSelector tagMap={tagsData()!.tagMap} />
+            </Show>
 
-                <Show when={loadedData().privilegeLevel === "admin"}>
-                  <PublishStatusToggle />
-                </Show>
+            <Show when={tagsData()?.privilegeLevel === "admin"}>
+              <PublishStatusToggle />
+            </Show>
 
-                <Show when={loadedData().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 text-center transition-all duration-300 ease-out hover:brightness-125 active:scale-90 md:mr-4"
-                    >
-                      Create Post
-                    </A>
-                  </div>
-                </Show>
+            <Show when={tagsData()?.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 text-center transition-all duration-300 ease-out hover:brightness-125 active:scale-90 md:mr-4"
+                >
+                  Create Post
+                </A>
               </div>
+            </Show>
+          </div>
 
-              <Show
-                when={loadedData().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={loadedData().posts}
-                    tags={loadedData().tags}
-                    privilegeLevel={loadedData().privilegeLevel}
-                    filters={filters()}
-                    sort={sort()}
-                    include={include()}
-                    status={status()}
-                  />
+          <Show
+            when={allPosts().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={allPosts()}
+                tags={allTags()}
+                privilegeLevel={tagsData()!.privilegeLevel}
+                filters={filters()}
+                sort={sort()}
+                include={include()}
+                status={status()}
+              />
+
+              {/* Sentinel element for infinite scroll */}
+              <Show when={hasMore()}>
+                <div ref={sentinelRef} class="py-8 text-center">
+                  <Show when={isLoading()}>
+                    <div class="text-lg">Loading more posts...</div>
+                  </Show>
                 </div>
               </Show>
-            </>
-          )}
+            </div>
+          </Show>
         </Show>
       </div>
     </>

src/routes/index.tsx

@@ -65,6 +65,8 @@ export default function Home() {
                   <div class="aspect-auto w-full overflow-hidden rounded-lg">
                     <video
                       src="/flexlove-scrollable.mp4"
+                      width={1280}
+                      height={1290}
                       class="h-full w-full object-cover"
                       autoplay
                       loop
@@ -75,6 +77,8 @@ export default function Home() {
                   <div class="aspect-auto w-full overflow-hidden rounded-lg">
                     <video
                       src="/flexlove-input.mp4"
+                      width={1148}
+                      height={140}
                       class="h-full w-full object-cover"
                       autoplay
                       loop
@@ -85,6 +89,8 @@ export default function Home() {
                   <div class="aspect-auto w-full overflow-hidden rounded-lg">
                     <video
                       src="/flexlove-slider.mp4"
+                      width={1256}
+                      height={134}
                       class="h-full w-full object-cover"
                       autoplay
                       loop
@@ -118,6 +124,8 @@ export default function Home() {
                   <div class="aspect-auto w-full overflow-hidden rounded-lg sm:col-span-1">
                     <video
                       src="/lineage-preview.mp4"
+                      width={886}
+                      height={1920}
                       class="h-full w-full object-cover"
                       autoplay
                       loop
@@ -130,6 +138,8 @@ export default function Home() {
                       <img
                         src="/lineage-home.png"
                         alt="Life and Lineage Home"
+                        width={1320}
+                        height={2868}
                         class="h-full w-full object-cover"
                       />
                     </div>
@@ -137,6 +147,8 @@ export default function Home() {
                       <img
                         src="/lineage-shops.png"
                         alt="Life and Lineage Shops"
+                        width={608}
+                        height={1322}
                         class="h-full w-full object-cover"
                       />
                     </div>