Themes

.github/workflows/test.yaml

@@ -16,12 +16,14 @@ 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
           pnpm --filter @courselit/state-management build
           pnpm --filter @courselit/components-library build
-          pnpm --filter @courselit/common-widgets build
+          pnpm --filter @courselit/page-primitives build
+          pnpm --filter @courselit/page-blocks build
     - name: Running tests
       run: |
         pnpm test

.gitignore

@@ -14,6 +14,7 @@ coverage
 # Text editors configurations
 .vscode
 .rgignore
+.cursor
 
 # Env file
 .env*.local

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>
     );