diff --git a/src/components/blog/PostSorting.tsx b/src/components/blog/PostSorting.tsx
index ff744d5..68f07b4 100644
--- a/src/components/blog/PostSorting.tsx
+++ b/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) {
}
>
- {(post) => (
+ {(post, index) => (
-
+
)}
diff --git a/src/db/create.ts b/src/db/create.ts
index 9d56c74..29dba25 100644
--- a/src/db/create.ts
+++ b/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
diff --git a/src/db/types.ts b/src/db/types.ts
index 5e909cf..b76ff76 100644
--- a/src/db/types.ts
+++ b/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
diff --git a/src/routes/blog/index.tsx b/src/routes/blog/index.tsx
index d054556..c04eedd 100644
--- a/src/routes/blog/index.tsx
+++ b/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
= {};
+ 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 = {};
- 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([]);
+ const [allTags, setAllTags] = createSignal([]);
+ 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 (
<>
Blog | Michael Freno
-
}>
- {(loadedData) => (
- <>
-
-
+
}>
+
+
-
0}>
-
-
+
0}
+ >
+
+
-
-
-
+
+
+
-
-
-
+
+
+
+
-
0}
- fallback={No posts yet!
}
- >
-
-
+
0}
+ fallback={No posts yet!
}
+ >
+
+
+
+ {/* Sentinel element for infinite scroll */}
+
+
+
+ Loading more posts...
+
-
- )}
+
