create-nextblock 0.16.2 → 0.16.4

package/templates/nextblock-template/app/cms/components/SeoScoreBadge.tsx

@@ -0,0 +1,3 @@
+import { SeoScoreBadge } from "@nextblock-cms/ui";
+export { SeoScoreBadge, type SeoScoreBadgeProps } from "@nextblock-cms/ui";
+export default SeoScoreBadge;

package/templates/nextblock-template/app/cms/components/TablePagination.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import {
+  Button,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@nextblock-cms/ui";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+interface TablePaginationProps {
+  currentPage: number;
+  pageSize: number;
+  totalCount: number;
+  basePath: string;
+  itemLabel?: string;
+  pageSizeOptions?: number[];
+}
+
+export default function TablePagination({
+  currentPage,
+  pageSize,
+  totalCount,
+  basePath,
+  itemLabel = "items",
+  pageSizeOptions = [10, 25, 50, 100],
+}: TablePaginationProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
+  const from = totalCount === 0 ? 0 : (currentPage - 1) * pageSize + 1;
+  const to = Math.min(totalCount, currentPage * pageSize);
+
+  const navigateTo = (newPage: number, newPageSize?: number) => {
+    const current = new URLSearchParams(Array.from(searchParams.entries()));
+
+    if (newPage > 1) {
+      current.set("page", newPage.toString());
+    } else {
+      current.delete("page");
+    }
+
+    const effectivePageSize = newPageSize ?? pageSize;
+    if (effectivePageSize !== 25) {
+      current.set("pageSize", effectivePageSize.toString());
+    } else {
+      current.delete("pageSize");
+    }
+
+    const query = current.toString();
+    router.push(`${basePath}${query ? `?${query}` : ""}`);
+  };
+
+  const handlePageSizeChange = (val: string) => {
+    const nextSize = parseInt(val, 10);
+    if (!Number.isNaN(nextSize) && nextSize > 0) {
+      // Reset to page 1 when changing page size
+      navigateTo(1, nextSize);
+    }
+  };
+
+  return (
+    <div className="flex flex-col sm:flex-row items-center justify-between gap-4 px-4 py-3 bg-muted/20 border-t border-slate-200 dark:border-slate-700 text-xs sm:text-sm text-muted-foreground">
+      {/* Item summary */}
+      <div className="flex items-center gap-1">
+        <span>Showing</span>
+        <span className="font-medium text-foreground">{from}</span>
+        <span>to</span>
+        <span className="font-medium text-foreground">{to}</span>
+        <span>of</span>
+        <span className="font-medium text-foreground">{totalCount}</span>
+        <span>{itemLabel}</span>
+      </div>
+
+      {/* Controls: Page size + Pagination buttons */}
+      <div className="flex items-center gap-4 sm:gap-6 flex-wrap">
+        {/* Rows per page selector */}
+        <div className="flex items-center gap-2">
+          <span className="text-xs">Rows per page:</span>
+          <Select
+            value={pageSize.toString()}
+            onValueChange={handlePageSizeChange}
+          >
+            <SelectTrigger className="h-8 w-[72px] text-xs">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {pageSizeOptions.map((opt) => (
+                <SelectItem key={opt} value={opt.toString()} className="text-xs">
+                  {opt}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Page counter */}
+        <div className="flex items-center gap-1 text-xs">
+          <span>Page</span>
+          <span className="font-medium text-foreground">{currentPage}</span>
+          <span>of</span>
+          <span className="font-medium text-foreground">{totalPages}</span>
+        </div>
+
+        {/* Prev / Next buttons */}
+        <div className="flex items-center gap-1">
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-8 w-8 p-0"
+            disabled={currentPage <= 1}
+            onClick={() => navigateTo(currentPage - 1)}
+            aria-label="Previous page"
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-8 w-8 p-0"
+            disabled={currentPage >= totalPages}
+            onClick={() => navigateTo(currentPage + 1)}
+            aria-label="Next page"
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/pages/page.tsx

@@ -1,227 +1,273 @@
-// app/cms/pages/page.tsx
-import React from "react";
-import { createClient } from "@nextblock-cms/db/server";
-import Link from "next/link";
-import { Button } from "@nextblock-cms/ui";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@nextblock-cms/ui";
-import { Badge } from "@nextblock-cms/ui";
-import { Alert, AlertDescription } from "@nextblock-cms/ui";
-import {
-  MoreHorizontal,
-  PlusCircle,
-  Edit3,
-  FileText,
-} from "lucide-react"; // Trash2 removed from here
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuButtonTrigger,
-  DropdownMenuSeparator,
-} from "@nextblock-cms/ui";
-// Server action `deletePage` is used by DeletePageButtonClient
-import type { Database } from "@nextblock-cms/db";
-import { getActiveLanguagesServerSide } from "@nextblock-cms/db/server";
-
-type Page = Database["public"]["Tables"]["pages"]["Row"];
-import LanguageFilterSelect from "../components/LanguageFilterSelect";
-import DeletePageButtonClient from "./components/DeletePageButtonClient"; // Import the client component
-import { ContentTransferControls } from "../import-export/ContentTransferControls";
-import VisibilityBadge from "../components/VisibilityBadge";
-
-async function getPagesWithDetails(
-  filterLanguageId?: number
-): Promise<{ page: Page; languageCode: string }[]> {
-  const supabase = createClient();
-  const languages = await getActiveLanguagesServerSide();
-  const langMap = new Map(languages.map((l) => [l.id, l.code]));
-
-  let query = supabase
-    .from("pages")
-    .select("*, languages!inner(code)")
-    .order("created_at", { ascending: false });
-
-  if (filterLanguageId) {
-    query = query.eq("language_id", filterLanguageId);
-  }
-
-  const { data: pagesData, error } = await query;
-
-  if (error) {
-    console.error("Error fetching pages:", error);
-    return [];
-  }
-  if (!pagesData) return [];
-
-  return pagesData.map((p) => {
-    const langInfo = p.languages as unknown as { code: string } | null;
-    return {
-      page: p as Page,
-      languageCode:
-        langInfo?.code?.toUpperCase() ||
-        langMap.get(p.language_id)?.toUpperCase() ||
-        "N/A",
-    };
-  });
-}
-
-interface CmsPagesListPageProps {
-  searchParams?: Promise<{
-    lang?: string;
-    success?: string;
-  }>;
-}
-
-export default async function CmsPagesListPage(props: CmsPagesListPageProps) {
-  const searchParams = await props.searchParams;
-  const allLanguages = await getActiveLanguagesServerSide();
-  const selectedLangId = searchParams?.lang
-    ? parseInt(searchParams.lang, 10)
-    : undefined;
-
-  const isValidLangId = selectedLangId
-    ? allLanguages.some((l) => l.id === selectedLangId)
-    : true;
-  const filterLangId = isValidLangId ? selectedLangId : undefined;
-
-  const pagesWithDetails = await getPagesWithDetails(filterLangId);
-  const successMessage = searchParams?.success;
-
-  return (
-    <div className="w-full">
-      <div className="flex justify-between items-center mb-6 flex-wrap gap-4">
-        <h1 className="text-2xl font-semibold">Manage Pages</h1>
-        <div className="flex items-center gap-3">
-          <ContentTransferControls
-            contentType="pages"
-            label="Pages"
-            languageId={filterLangId}
-            hasContent={pagesWithDetails.length > 0}
-          />
-          <LanguageFilterSelect
-            allLanguages={allLanguages}
-            currentFilterLangId={filterLangId}
-            basePath="/cms/pages"
-          />
-          <Button variant="default" asChild>
-            <Link href="/cms/pages/new">
-              <PlusCircle className="mr-2 h-4 w-4" /> Create New Page
-            </Link>
-          </Button>
-        </div>
-      </div>
-
-      {successMessage && (
-        <Alert variant="success" className="mb-4">
-          <AlertDescription>
-            {decodeURIComponent(successMessage)}
-          </AlertDescription>
-        </Alert>
-      )}
-
-      {pagesWithDetails.length === 0 ? (
-        <div className="text-center py-10 border rounded-lg dark:border-slate-700">
-          <FileText className="mx-auto h-12 w-12 text-muted-foreground" />
-          <h3 className="mt-2 text-sm font-medium text-foreground">
-            {filterLangId
-              ? "No pages found for the selected language."
-              : "No pages found."}
-          </h3>
-          <p className="mt-1 text-sm text-muted-foreground">
-            Get started by creating a new page.
-          </p>
-          <div className="mt-6">
-            <Button asChild>
-              <Link href="/cms/pages/new">
-                <PlusCircle className="mr-2 h-4 w-4" /> Create Page
-              </Link>
-            </Button>
-          </div>
-        </div>
-      ) : (
-        <div className="rounded-lg border overflow-hidden dark:border-slate-700">
-          <Table>
-            <TableHeader>
-              <TableRow className="dark:border-slate-700">
-                <TableHead className="w-[300px] sm:w-[400px]">Title</TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead>Language</TableHead>
-                <TableHead className="hidden md:table-cell">Slug</TableHead>
-                <TableHead className="hidden lg:table-cell">
-                  Last Updated
-                </TableHead>
-                <TableHead className="text-right w-[80px]">Actions</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {pagesWithDetails.map(({ page, languageCode }) => (
-                <TableRow key={page.id} className="dark:border-slate-700">
-                  <TableCell className="font-medium">
-                    <Link
-                      href={`/cms/pages/${page.id}/edit`}
-                      className="flex items-center cursor-pointer"
-                    >
-                      <Edit3 className="mr-2 h-4 w-4" />
-                      {page.title}
-                    </Link>
-                  </TableCell>
-                  <TableCell>
-                    <VisibilityBadge
-                      type="page"
-                      status={page.status}
-                      publishedAt={page.published_at}
-                    />
-                  </TableCell>
-                  <TableCell>
-                    <Badge variant="outline" className="dark:border-slate-600">
-                      {languageCode}
-                    </Badge>
-                  </TableCell>
-                  <TableCell className="text-muted-foreground text-xs hidden md:table-cell">
-                    /{page.slug}
-                  </TableCell>
-                  <TableCell className="hidden lg:table-cell text-xs text-muted-foreground">
-                    {new Date(page.updated_at).toLocaleDateString()}
-                  </TableCell>
-                  <TableCell className="text-right">
-                    <DropdownMenu>
-                      <DropdownMenuButtonTrigger id={`page-trigger-${page.id}`}>
-                        <MoreHorizontal className="h-4 w-4" />
-                        <span className="sr-only">
-                          Page actions for {page.title}
-                        </span>
-                      </DropdownMenuButtonTrigger>
-                      <DropdownMenuContent align="end">
-                        <DropdownMenuItem asChild>
-                          <Link
-                            href={`/cms/pages/${page.id}/edit`}
-                            className="flex items-center cursor-pointer"
-                          >
-                            <Edit3 className="mr-2 h-4 w-4" /> Edit
-                          </Link>
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        {/* Use the Client Component for the delete button */}
-                        <DeletePageButtonClient
-                          pageId={page.id}
-                          pageTitle={page.title}
-                        />
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
-      )}
-    </div>
-  );
-}
+// app/cms/pages/page.tsx
+import React from "react";
+import { createClient } from "@nextblock-cms/db/server";
+import Link from "next/link";
+import { Button } from "@nextblock-cms/ui";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@nextblock-cms/ui";
+import { Badge } from "@nextblock-cms/ui";
+import { Alert, AlertDescription } from "@nextblock-cms/ui";
+import {
+  MoreHorizontal,
+  PlusCircle,
+  Edit3,
+  FileText,
+} from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuButtonTrigger,
+  DropdownMenuSeparator,
+} from "@nextblock-cms/ui";
+import type { Database } from "@nextblock-cms/db";
+import { getActiveLanguagesServerSide } from "@nextblock-cms/db/server";
+import { auditSeo } from "@nextblock-cms/utils/seo";
+import { buildPageSeoDocument } from "../../../lib/seo/page-document";
+
+type Page = Database["public"]["Tables"]["pages"]["Row"];
+import LanguageFilterSelect from "../components/LanguageFilterSelect";
+import DeletePageButtonClient from "./components/DeletePageButtonClient";
+import { ContentTransferControls } from "../import-export/ContentTransferControls";
+import VisibilityBadge from "../components/VisibilityBadge";
+import SeoScoreBadge from "../components/SeoScoreBadge";
+import TablePagination from "../components/TablePagination";
+
+async function getPagesWithDetails(
+  filterLanguageId?: number,
+  pageNumber: number = 1,
+  pageSize: number = 25
+): Promise<{
+  items: { page: Page; languageCode: string; seoScore: number }[];
+  totalCount: number;
+}> {
+  const supabase = createClient();
+  const languages = await getActiveLanguagesServerSide();
+  const langMap = new Map(languages.map((l) => [l.id, l.code]));
+
+  let query = supabase
+    .from("pages")
+    .select("*, languages!inner(code), blocks(id, block_type, content, order)", { count: "exact" })
+    .order("created_at", { ascending: false });
+
+  if (filterLanguageId) {
+    query = query.eq("language_id", filterLanguageId);
+  }
+
+  const from = (pageNumber - 1) * pageSize;
+  const to = from + pageSize - 1;
+
+  const { data: pagesData, count, error } = await query.range(from, to);
+
+  if (error) {
+    console.error("Error fetching pages:", error);
+    return { items: [], totalCount: 0 };
+  }
+  if (!pagesData) return { items: [], totalCount: 0 };
+
+  const items = pagesData.map((p) => {
+    const langInfo = p.languages as unknown as { code: string } | null;
+    const rawBlocks = (p.blocks || []) as unknown as Parameters<typeof buildPageSeoDocument>[0];
+    const doc = buildPageSeoDocument(rawBlocks);
+    const auditResult = auditSeo({
+      document: doc,
+      metaTitle: p.meta_title ?? undefined,
+      metaDescription: p.meta_description ?? undefined,
+      scope: "page",
+    });
+
+    const langCode = langInfo?.code || langMap.get(p.language_id) || "N/A";
+
+    return {
+      page: p as unknown as Page,
+      languageCode: String(langCode).toUpperCase(),
+      seoScore: auditResult.score,
+    };
+  });
+
+  return { items, totalCount: count ?? items.length };
+}
+
+interface CmsPagesListPageProps {
+  searchParams?: Promise<{
+    lang?: string;
+    success?: string;
+    page?: string;
+    pageSize?: string;
+  }>;
+}
+
+export default async function CmsPagesListPage(props: CmsPagesListPageProps) {
+  const searchParams = await props.searchParams;
+  const allLanguages = await getActiveLanguagesServerSide();
+  const selectedLangId = searchParams?.lang
+    ? parseInt(searchParams.lang, 10)
+    : undefined;
+
+  const isValidLangId = selectedLangId
+    ? allLanguages.some((l) => l.id === selectedLangId)
+    : true;
+  const filterLangId = isValidLangId ? selectedLangId : undefined;
+
+  const pageNumber = searchParams?.page
+    ? Math.max(1, parseInt(searchParams.page, 10) || 1)
+    : 1;
+  const pageSize = searchParams?.pageSize
+    ? Math.max(1, parseInt(searchParams.pageSize, 10) || 25)
+    : 25;
+
+  const { items: pagesWithDetails, totalCount } = await getPagesWithDetails(
+    filterLangId,
+    pageNumber,
+    pageSize
+  );
+  const successMessage = searchParams?.success;
+
+  return (
+    <div className="w-full">
+      <div className="flex justify-between items-center mb-6 flex-wrap gap-4">
+        <h1 className="text-2xl font-semibold">Manage Pages</h1>
+        <div className="flex items-center gap-3">
+          <ContentTransferControls
+            contentType="pages"
+            label="Pages"
+            languageId={filterLangId}
+            hasContent={pagesWithDetails.length > 0}
+          />
+          <LanguageFilterSelect
+            allLanguages={allLanguages}
+            currentFilterLangId={filterLangId}
+            basePath="/cms/pages"
+          />
+          <Button variant="default" asChild>
+            <Link href="/cms/pages/new">
+              <PlusCircle className="mr-2 h-4 w-4" /> Create New Page
+            </Link>
+          </Button>
+        </div>
+      </div>
+
+      {successMessage && (
+        <Alert variant="success" className="mb-4">
+          <AlertDescription>
+            {decodeURIComponent(successMessage)}
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {totalCount === 0 ? (
+        <div className="text-center py-10 border rounded-lg dark:border-slate-700">
+          <FileText className="mx-auto h-12 w-12 text-muted-foreground" />
+          <h3 className="mt-2 text-sm font-medium text-foreground">
+            {filterLangId
+              ? "No pages found for the selected language."
+              : "No pages found."}
+          </h3>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Get started by creating a new page.
+          </p>
+          <div className="mt-6">
+            <Button asChild>
+              <Link href="/cms/pages/new">
+                <PlusCircle className="mr-2 h-4 w-4" /> Create Page
+              </Link>
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <div className="rounded-lg border overflow-hidden dark:border-slate-700">
+          <Table>
+            <TableHeader>
+              <TableRow className="dark:border-slate-700">
+                <TableHead className="w-[280px] sm:w-[350px]">Title</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>Language</TableHead>
+                <TableHead className="hidden md:table-cell">Slug</TableHead>
+                <TableHead>SEO</TableHead>
+                <TableHead className="hidden lg:table-cell">
+                  Last Updated
+                </TableHead>
+                <TableHead className="text-right w-[80px]">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {pagesWithDetails.map(({ page, languageCode, seoScore }) => (
+                <TableRow key={page.id} className="dark:border-slate-700">
+                  <TableCell className="font-medium">
+                    <Link
+                      href={`/cms/pages/${page.id}/edit`}
+                      className="flex items-center cursor-pointer"
+                    >
+                      <Edit3 className="mr-2 h-4 w-4" />
+                      {page.title}
+                    </Link>
+                  </TableCell>
+                  <TableCell>
+                    <VisibilityBadge
+                      type="page"
+                      status={page.status}
+                      publishedAt={page.published_at}
+                    />
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant="outline" className="dark:border-slate-600">
+                      {languageCode}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="text-muted-foreground text-xs hidden md:table-cell">
+                    /{page.slug}
+                  </TableCell>
+                  <TableCell>
+                    <SeoScoreBadge score={seoScore} />
+                  </TableCell>
+                  <TableCell className="hidden lg:table-cell text-xs text-muted-foreground">
+                    {new Date(page.updated_at).toLocaleDateString()}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <DropdownMenu>
+                      <DropdownMenuButtonTrigger id={`page-trigger-${page.id}`}>
+                        <MoreHorizontal className="h-4 w-4" />
+                        <span className="sr-only">
+                          Page actions for {page.title}
+                        </span>
+                      </DropdownMenuButtonTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem asChild>
+                          <Link
+                            href={`/cms/pages/${page.id}/edit`}
+                            className="flex items-center cursor-pointer"
+                          >
+                            <Edit3 className="mr-2 h-4 w-4" /> Edit
+                          </Link>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DeletePageButtonClient
+                          pageId={page.id}
+                          pageTitle={page.title}
+                        />
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+
+          <TablePagination
+            currentPage={pageNumber}
+            pageSize={pageSize}
+            totalCount={totalCount}
+            basePath="/cms/pages"
+            itemLabel="pages"
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/posts/[id]/edit/page.tsx

@@ -189,6 +189,8 @@ export default async function EditPostPage(props: { params: Promise<{ id: string
         paint instead of an empty document.
       */}
       <PageSeoProvider
+        documentTitle={postWithBlocks.title}
+        documentType="post"
         initialBlocks={postWithBlocks.blocks}
         initialMetaDescription={postWithBlocks.meta_description}
         initialMetaTitle={postWithBlocks.meta_title}