Themes almost work (with a few bugs); New system themes; Cleaned up code;

Author: rajat1saxena

.github/workflows/test.yaml

@@ -16,6 +16,7 @@ jobs:
     - name: Build packages
       run: |
           pnpm --filter @courselit/icons build
+          pnpm --filter @courselit/page-models build
           pnpm --filter @courselit/common-models build
           pnpm --filter @courselit/utils build
           pnpm --filter @courselit/text-editor build

apps/web/app/(with-contexts)/(with-layout)/blog/[slug]/[id]/layout.tsx

@@ -0,0 +1,52 @@
+import type { Metadata, ResolvingMetadata } from "next";
+import { ReactNode } from "react";
+import { FetchBuilder } from "@courselit/utils";
+import { headers } from "next/headers";
+import { getAddressFromHeaders } from "@ui-lib/utils";
+import { Course } from "@courselit/common-models";
+
+export async function generateMetadata(
+    { params }: { params: { id: string } },
+    parent: ResolvingMetadata,
+): Promise<Metadata> {
+    const address = getAddressFromHeaders(headers);
+    const product = await getProduct(params.id, address);
+
+    return {
+        title: `${product ? product.title : "Post not found"} | ${(await parent)?.title?.absolute}`,
+    };
+}
+
+async function getProduct(id: string, address: string): Promise<Course | null> {
+    const query = `
+            query ($id: String!) {
+                product: getCourse(id: $id) {
+                    courseId
+                    title
+                    description
+                    slug
+                    featuredImage {
+                        thumbnail
+                        file
+                    }
+                    creatorName
+                    updatedAt
+                }
+            }
+        `;
+    const fetch = new FetchBuilder()
+        .setUrl(`${address}/api/graph`)
+        .setPayload({ query, variables: { id } })
+        .setIsGraphQLEndpoint(true)
+        .build();
+    try {
+        const response = await fetch.exec();
+        return response.product;
+    } catch (err: any) {
+        return null;
+    }
+}
+
+export default function Layout({ children }: { children: ReactNode }) {
+    return children;
+}

apps/web/app/(with-contexts)/(with-layout)/blog/[slug]/[id]/page.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { useContext } from "react";
+import { Course } from "@courselit/common-models";
+import { Section } from "@courselit/page-primitives";
+import Post from "./post";
+import { ThemeContext } from "@components/contexts";
+
+export default function BlogPost({
+    params,
+}: {
+    params: { slug: string; id: string };
+    course: Course;
+}) {
+    const { theme } = useContext(ThemeContext);
+
+    return (
+        <Section theme={theme.theme}>
+            <div className="flex flex-col gap-4 min-h-[80vh]">
+                <Post courseId={params.id} />
+            </div>
+        </Section>
+    );
+}

apps/web/app/(with-contexts)/(with-layout)/blog/[slug]/[id]/post.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { Breadcrumbs, TextRenderer } from "@courselit/components-library";
+import {
+    Header1,
+    Subheader2,
+    Caption,
+    Text1,
+    Text2,
+} from "@courselit/page-primitives";
+import Image from "next/image";
+import { BLOG_UPDATED_PREFIX } from "@ui-config/strings";
+import { formattedLocaleDate, truncate } from "@ui-lib/utils";
+import useProduct from "@/hooks/use-product";
+import { AddressContext, ThemeContext } from "@components/contexts";
+import { useContext } from "react";
+import Link from "next/link";
+
+export default function Post({ courseId }: { courseId: string }) {
+    const address = useContext(AddressContext);
+    const { theme } = useContext(ThemeContext);
+    const { product: post, loaded } = useProduct(courseId, address);
+
+    if (!post) {
+        return null;
+    }
+
+    if (loaded && !post) {
+        return <Text1>Post not found</Text1>;
+    }
+
+    return (
+        <>
+            <Breadcrumbs aria-label="back to blog" className="mb-4">
+                <Text2 className="cursor-pointer" theme={theme.theme}>
+                    <Link href="/blog">Blog</Link>
+                </Text2>
+                <Text2 theme={theme.theme}>{truncate(post.title, 20)}</Text2>
+            </Breadcrumbs>
+            <Header1 theme={theme.theme}>{post.title}</Header1>
+            <div className="flex items-center gap-4">
+                <Image
+                    src={
+                        post.featuredImage?.file ||
+                        "/courselit_backdrop_square.webp"
+                    }
+                    alt={post.featuredImage?.caption || ""}
+                    width={32}
+                    height={32}
+                    className="rounded-full"
+                />
+                <div className="flex flex-col gap-1">
+                    <Subheader2 theme={theme.theme}>
+                        {post.creatorName}
+                    </Subheader2>
+                    <Caption theme={theme.theme}>
+                        <span className="font-semibold">
+                            {BLOG_UPDATED_PREFIX}:
+                        </span>{" "}
+                        {formattedLocaleDate(post.updatedAt, "long")}
+                    </Caption>
+                </div>
+            </div>
+            {post.description && (
+                <Text1 theme={theme.theme}>
+                    <TextRenderer json={JSON.parse(post.description)} />
+                </Text1>
+            )}
+        </>
+    );
+}

apps/web/app/(with-contexts)/(with-layout)/blog/blogs-list.tsx

@@ -1,37 +1,58 @@
 "use client";
 
-import { useMemo, useState } from "react";
-import { SkeletonCard } from "./skeleton-card";
+import { useContext, useMemo } from "react";
 import { BlogContentCard } from "./content-card";
 import { PaginationControls } from "@components/public/pagination";
 import { Constants, Course } from "@courselit/common-models";
 import { useProducts } from "@/hooks/use-products";
+import { ProductCardSkeleton } from "@courselit/page-blocks";
+import { ThemeContext } from "@components/contexts";
+import { BookOpen } from "lucide-react";
+import { Button, Subheader1 } from "@courselit/page-primitives";
 
 const ITEMS_PER_PAGE = 9;
 
 export function BlogsList({
+    page,
     itemsPerPage = ITEMS_PER_PAGE,
+    onPageChange,
 }: {
+    page: number;
     itemsPerPage?: number;
+    onPageChange: (page: number) => void;
 }) {
-    const [currentPage, setCurrentPage] = useState(1);
+    const { theme: uiTheme } = useContext(ThemeContext);
+    const { theme } = uiTheme;
+
     const filters = useMemo(
         () => [Constants.CourseType.BLOG.toUpperCase()],
         [],
     );
     const { products, loading, totalPages } = useProducts(
-        currentPage,
+        page,
         itemsPerPage,
         filters,
         true,
     );
 
+    if (!loading && totalPages && products.length === 0) {
+        return (
+            <div className="flex flex-col gap-4 items-center justify-center py-12 text-center">
+                <BookOpen className="w-12 h-12 text-muted-foreground" />
+                <Subheader1 theme={theme}>This page is empty.</Subheader1>
+                <Button size="sm" theme={theme} onClick={() => onPageChange(1)}>
+                    Go to first page
+                </Button>
+            </div>
+        );
+    }
+
     return (
         <div className="space-y-8">
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                 {loading
                     ? Array.from({ length: ITEMS_PER_PAGE }).map((_, index) => (
-                          <SkeletonCard key={index} />
+                          <ProductCardSkeleton key={index} theme={theme} />
                       ))
                     : products.map((product: Course) => (
                           <BlogContentCard
@@ -41,9 +62,9 @@ export function BlogsList({
                       ))}
             </div>
             <PaginationControls
-                currentPage={currentPage}
+                currentPage={page}
                 totalPages={Math.ceil(totalPages / itemsPerPage)}
-                onPageChange={setCurrentPage}
+                onPageChange={onPageChange}
             />
         </div>
     );

apps/web/app/(with-contexts)/(with-layout)/blog/content-card.tsx

@@ -1,40 +1,70 @@
+import { ThemeContext } from "@components/contexts";
 import { Course } from "@courselit/common-models";
-import {
-    ContentCard,
-    ContentCardContent,
-    ContentCardHeader,
-    ContentCardImage,
-    Image,
-} from "@courselit/components-library";
+import { Image } from "@courselit/components-library";
+import { useContext } from "react";
 import { truncate } from "@ui-lib/utils";
+import {
+    PageCard,
+    PageCardContent,
+    PageCardHeader,
+    PageCardImage,
+    Subheader1,
+} from "@courselit/page-primitives";
+import Link from "next/link";
 
 export function BlogContentCard({ product }: { product: Course }) {
+    const { theme: uiTheme } = useContext(ThemeContext);
+    const { theme } = uiTheme;
+
     return (
-        <ContentCard href={`/blog/${product.slug}/${product.courseId}`}>
-            <ContentCardImage
-                src={product.featuredImage?.file || ""}
-                alt={product.title}
-            />
-            <ContentCardContent>
-                <ContentCardHeader>
-                    {truncate(product.title, 32)}
-                </ContentCardHeader>
-                <div className="flex items-center justify-between text-sm text-muted-foreground">
-                    <div className="flex items-center gap-1 ascp">
-                        <Image
-                            src={product.user?.avatar?.thumbnail}
-                            alt={product.user?.name || "User Avatar"}
-                            loading="lazy"
-                            className="!aspect-square rounded-full"
-                            width="w-6"
-                            height="h-6"
-                        />
-                        <span>
-                            {truncate(product.user?.name || "Unnamed", 30)}
-                        </span>
+        <PageCard
+            isLink={true}
+            className="overflow-hidden"
+            style={{
+                backgroundColor: theme?.colors?.background,
+                color: theme?.colors?.text,
+                borderColor: theme?.colors?.border,
+            }}
+            theme={theme}
+        >
+            <Link
+                href={`/blog/${product.slug}/${product.courseId}`}
+                style={{
+                    height: "100%",
+                    display: "block",
+                }}
+            >
+                <PageCardImage
+                    src={
+                        product.featuredImage?.file ||
+                        "/courselit_backdrop_square.webp"
+                    }
+                    alt={product.title}
+                    className="aspect-video object-cover"
+                    theme={theme}
+                />
+                <PageCardContent theme={theme}>
+                    <PageCardHeader theme={theme}>
+                        {product.title}
+                    </PageCardHeader>
+                    <div className="flex items-center justify-between text-sm text-muted-foreground">
+                        <div className="flex items-center gap-2 ascp">
+                            <Image
+                                src={product.user?.avatar?.thumbnail}
+                                alt={product.user?.name || "User Avatar"}
+                                loading="lazy"
+                                className="rounded-full"
+                                objectFit="cover"
+                                width="w-8"
+                                height="h-8"
+                            />
+                            <Subheader1 theme={theme}>
+                                {truncate(product.user?.name || "Unnamed", 20)}
+                            </Subheader1>
+                        </div>
                     </div>
-                </div>
-            </ContentCardContent>
-        </ContentCard>
+                </PageCardContent>
+            </Link>
+        </PageCard>
     );
 }

apps/web/app/(with-contexts)/(with-layout)/blog/page.tsx

@@ -1,14 +1,33 @@
-import { Suspense } from "react";
+"use client";
+
+import { Suspense, useCallback, useContext } from "react";
 import { BlogsList } from "./blogs-list";
 import { PAGE_HEADER_ALL_POSTS } from "@ui-config/strings";
+import { ThemeContext } from "@components/contexts";
+import { Header1, Section } from "@courselit/page-primitives";
+import { useRouter, useSearchParams } from "next/navigation";
 
 export default function BlogsPage() {
+    const searchParams = useSearchParams();
+    const page = parseInt(searchParams?.get("page") || "1");
+    const router = useRouter();
+    const { theme } = useContext(ThemeContext);
+
+    const handlePageChange = useCallback(
+        (value: number) => {
+            router.push(`/blog?page=${value}`);
+        },
+        [router],
+    );
+
     return (
-        <div className="container mx-auto px-4 py-8">
-            <h1 className="text-3xl font-bold mb-8">{PAGE_HEADER_ALL_POSTS}</h1>
-            <Suspense fallback={<div>Loading...</div>}>
-                <BlogsList />
-            </Suspense>
-        </div>
+        <Section theme={theme.theme}>
+            <div className="flex flex-col gap-4 min-h-[80vh]">
+                <Header1 theme={theme.theme}>{PAGE_HEADER_ALL_POSTS}</Header1>
+                <Suspense fallback={<div>Loading...</div>}>
+                    <BlogsList page={page} onPageChange={handlePageChange} />
+                </Suspense>
+            </div>
+        </Section>
     );
 }