create-nextblock 0.16.2 → 0.16.4

package/templates/nextblock-template/app/cms/posts/components/PostForm.tsx

@@ -336,11 +336,17 @@ export default function PostForm({
    * also bails when the values are unchanged, so nothing here can loop back into a render of
    * this form.
    */
-  const setPageSeoMeta = usePageSeo()?.setMeta;
+  const pageSeo = usePageSeo();
+  const setPageSeoMeta = pageSeo?.setMeta;
+  const setPageSeoDocumentTitle = pageSeo?.setDocumentTitle;
   useEffect(() => {
     setPageSeoMeta?.({ metaDescription, metaTitle });
   }, [metaDescription, metaTitle, setPageSeoMeta]);
 
+  useEffect(() => {
+    setPageSeoDocumentTitle?.(title);
+  }, [title, setPageSeoDocumentTitle]);
+
   // Remove languagesLoading from this condition
   if (authLoading) {
     return <div>Loading form...</div>;

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

@@ -1,194 +1,251 @@
-// app/cms/posts/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, PenTool } from "lucide-react"; // Removed Trash2 as it's in the client component
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuButtonTrigger,
-  DropdownMenuSeparator,
-} from "@nextblock-cms/ui";
-// deletePost server action is now used by DeletePostButtonClient
-import type { Database } from "@nextblock-cms/db";
-import { getActiveLanguagesServerSide } from "@nextblock-cms/db/server";
-import { resolveMediaUrl } from "../../../lib/media/resolveMediaUrl";
-
-type Post = Database['public']['Tables']['posts']['Row'] & { feature_image_url?: string | null };
-import LanguageFilterSelect from "../components/LanguageFilterSelect";
-import DeletePostButtonClient from "./components/DeletePostButtonClient"; // Import the new client component
-import { ContentTransferControls } from "../import-export/ContentTransferControls";
-import VisibilityBadge from "../components/VisibilityBadge";
-
-async function getPostsWithDetails(filterLanguageId?: number): Promise<{ post: Post; languageCode: string }[]> {
-  const supabase = createClient();
-  const languages = await getActiveLanguagesServerSide();
-  const langMap = new Map(languages.map(l => [l.id, l.code]));
-
-  let query = supabase
-    .from("posts")
-    .select("*, languages!inner(code), media ( object_key )")
-    .order("created_at", { ascending: false });
-
-  if (filterLanguageId) {
-    query = query.eq("language_id", filterLanguageId);
-  }
-
-  const { data: postsData, error } = await query;
-
-  if (error) {
-    console.error("Error fetching posts:", error);
-    return [];
-  }
-  if (!postsData) return [];
-
-  return postsData.map(p => {
-    const langInfo = p.languages as unknown as { code: string } | null;
-    return {
-      post: { ...p, feature_image_url: resolveMediaUrl(p.media?.object_key) } as Post,
-      languageCode: langInfo?.code?.toUpperCase() || langMap.get(p.language_id)?.toUpperCase() || 'N/A',
-    };
-  });
-}
-
-interface CmsPostsListPageProps {
-  searchParams?: Promise<{
-    lang?: string;
-    success?: string;
-  }>;
-}
-
-export default async function CmsPostsListPage(props: CmsPostsListPageProps) {
-  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 postsWithDetails = await getPostsWithDetails(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 Posts</h1>
-        <div className="flex items-center gap-3">
-          <ContentTransferControls
-            contentType="posts"
-            label="Posts"
-            languageId={filterLangId}
-            hasContent={postsWithDetails.length > 0}
-          />
-          <LanguageFilterSelect
-            allLanguages={allLanguages}
-            currentFilterLangId={filterLangId}
-            basePath="/cms/posts"
-          />
-          <Button variant="default" asChild>
-            <Link href="/cms/posts/new">
-              <PlusCircle className="mr-2 h-4 w-4" /> Create New Post
-            </Link>
-          </Button>
-        </div>
-      </div>
-
-      {successMessage && (
-        <Alert variant="success" className="mb-4">
-          <AlertDescription>
-            {decodeURIComponent(successMessage)}
-          </AlertDescription>
-        </Alert>
-      )}
-
-      {postsWithDetails.length === 0 ? (
-        <div className="text-center py-10 border rounded-lg dark:border-slate-700">
-          <PenTool className="mx-auto h-12 w-12 text-muted-foreground" />
-          <h3 className="mt-2 text-sm font-medium text-foreground">
-            {filterLangId ? "No posts found for the selected language." : "No posts found."}
-          </h3>
-          <p className="mt-1 text-sm text-muted-foreground">
-            Get started by creating a new post.
-          </p>
-          <div className="mt-6">
-            <Button asChild>
-              <Link href="/cms/posts/new">
-                <PlusCircle className="mr-2 h-4 w-4" /> Create Post
-              </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">Published At</TableHead>
-                <TableHead className="text-right w-[80px]">Actions</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {postsWithDetails.map(({ post, languageCode }) => (
-                <TableRow key={post.id} className="dark:border-slate-700">
-                  <TableCell className="font-medium">
-                    <Link
-                      href={`/cms/posts/${post.id}/edit`}
-                      className="flex items-center cursor-pointer"
-                    >
-                      <Edit3 className="mr-2 h-4 w-4" />
-                      {post.title}
-                    </Link>
-                  </TableCell>
-                  <TableCell>
-                    <VisibilityBadge
-                      type="post"
-                      status={post.status}
-                      publishedAt={post.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">/article/{post.slug}</TableCell>
-                  <TableCell className="hidden lg:table-cell text-xs text-muted-foreground">
-                    {post.published_at ? new Date(post.published_at).toLocaleDateString() : "Not yet"}
-                  </TableCell>
-                  <TableCell className="text-right">
-                    <DropdownMenu>
-                      <DropdownMenuButtonTrigger id={`post-trigger-${post.id}`}>
-                        <MoreHorizontal className="h-4 w-4" />
-                        <span className="sr-only">Post actions for {post.title}</span>
-                      </DropdownMenuButtonTrigger>
-                      <DropdownMenuContent align="end">
-                        <DropdownMenuItem asChild>
-                          <Link href={`/cms/posts/${post.id}/edit`} className="flex items-center cursor-pointer">
-                            <Edit3 className="mr-2 h-4 w-4" /> Edit
-                          </Link>
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DeletePostButtonClient postId={post.id} />
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
-      )}
-    </div>
-  );
-}
+// app/cms/posts/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, PenTool } 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 { resolveMediaUrl } from "../../../lib/media/resolveMediaUrl";
+import { auditSeo } from "@nextblock-cms/utils/seo";
+import { buildPageSeoDocument } from "../../../lib/seo/page-document";
+
+type Post = Database['public']['Tables']['posts']['Row'] & { feature_image_url?: string | null };
+import LanguageFilterSelect from "../components/LanguageFilterSelect";
+import DeletePostButtonClient from "./components/DeletePostButtonClient";
+import { ContentTransferControls } from "../import-export/ContentTransferControls";
+import VisibilityBadge from "../components/VisibilityBadge";
+import SeoScoreBadge from "../components/SeoScoreBadge";
+import TablePagination from "../components/TablePagination";
+
+async function getPostsWithDetails(
+  filterLanguageId?: number,
+  pageNumber: number = 1,
+  pageSize: number = 25
+): Promise<{
+  items: { post: Post; 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("posts")
+    .select("*, languages!inner(code), media ( object_key ), 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: postsData, count, error } = await query.range(from, to);
+
+  if (error) {
+    console.error("Error fetching posts:", error);
+    return { items: [], totalCount: 0 };
+  }
+  if (!postsData) return { items: [], totalCount: 0 };
+
+  const items = postsData.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, {
+      documentTitle: p.title,
+      documentType: "post",
+    });
+    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 {
+      post: { ...p, feature_image_url: resolveMediaUrl(p.media?.object_key) } as Post,
+      languageCode: String(langCode).toUpperCase(),
+      seoScore: auditResult.score,
+    };
+  });
+
+  return { items, totalCount: count ?? items.length };
+}
+
+interface CmsPostsListPageProps {
+  searchParams?: Promise<{
+    lang?: string;
+    success?: string;
+    page?: string;
+    pageSize?: string;
+  }>;
+}
+
+export default async function CmsPostsListPage(props: CmsPostsListPageProps) {
+  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: postsWithDetails, totalCount } = await getPostsWithDetails(
+    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 Posts</h1>
+        <div className="flex items-center gap-3">
+          <ContentTransferControls
+            contentType="posts"
+            label="Posts"
+            languageId={filterLangId}
+            hasContent={postsWithDetails.length > 0}
+          />
+          <LanguageFilterSelect
+            allLanguages={allLanguages}
+            currentFilterLangId={filterLangId}
+            basePath="/cms/posts"
+          />
+          <Button variant="default" asChild>
+            <Link href="/cms/posts/new">
+              <PlusCircle className="mr-2 h-4 w-4" /> Create New Post
+            </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">
+          <PenTool className="mx-auto h-12 w-12 text-muted-foreground" />
+          <h3 className="mt-2 text-sm font-medium text-foreground">
+            {filterLangId
+              ? "No posts found for the selected language."
+              : "No posts found."}
+          </h3>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Get started by creating a new post.
+          </p>
+          <div className="mt-6">
+            <Button asChild>
+              <Link href="/cms/posts/new">
+                <PlusCircle className="mr-2 h-4 w-4" /> Create Post
+              </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">Published At</TableHead>
+                <TableHead className="text-right w-[80px]">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {postsWithDetails.map(({ post, languageCode, seoScore }) => (
+                <TableRow key={post.id} className="dark:border-slate-700">
+                  <TableCell className="font-medium">
+                    <Link
+                      href={`/cms/posts/${post.id}/edit`}
+                      className="flex items-center cursor-pointer"
+                    >
+                      <Edit3 className="mr-2 h-4 w-4" />
+                      {post.title}
+                    </Link>
+                  </TableCell>
+                  <TableCell>
+                    <VisibilityBadge
+                      type="post"
+                      status={post.status}
+                      publishedAt={post.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">/article/{post.slug}</TableCell>
+                  <TableCell>
+                    <SeoScoreBadge score={seoScore} />
+                  </TableCell>
+                  <TableCell className="hidden lg:table-cell text-xs text-muted-foreground">
+                    {post.published_at ? new Date(post.published_at).toLocaleDateString() : "Not yet"}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <DropdownMenu>
+                      <DropdownMenuButtonTrigger id={`post-trigger-${post.id}`}>
+                        <MoreHorizontal className="h-4 w-4" />
+                        <span className="sr-only">Post actions for {post.title}</span>
+                      </DropdownMenuButtonTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem asChild>
+                          <Link href={`/cms/posts/${post.id}/edit`} className="flex items-center cursor-pointer">
+                            <Edit3 className="mr-2 h-4 w-4" /> Edit
+                          </Link>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DeletePostButtonClient postId={post.id} />
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+
+          <TablePagination
+            currentPage={pageNumber}
+            pageSize={pageSize}
+            totalCount={totalCount}
+            basePath="/cms/posts"
+            itemLabel="posts"
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/products/ProductFormClientShell.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { ProductForm } from '@nextblock-cms/ecommerce';
 import MediaPickerDialog from '../media/components/MediaPickerDialog';
 import DraftStatusActions from '../components/DraftStatusActions';
+import { usePageSeo } from '../../../lib/seo/page-audit-context';
 
 type ProductFormProps = React.ComponentProps<typeof ProductForm>;
 type ProductUpdateAction = NonNullable<ProductFormProps['updateAction']>;
@@ -24,6 +25,23 @@ export default function ProductFormClientShell({
   ...props
 }: ProductFormClientShellProps) {
   const [isMounted, setIsMounted] = React.useState(false);
+  const pageSeo = usePageSeo();
+
+  const handleSeoChange = React.useCallback(
+    (values: { title?: string | null; meta_title?: string | null; meta_description?: string | null }) => {
+      if (pageSeo) {
+        if (values.title !== undefined) {
+          pageSeo.setDocumentTitle(values.title || null);
+        }
+        pageSeo.setMeta({
+          metaTitle: values.meta_title || null,
+          metaDescription: values.meta_description || null,
+        });
+      }
+    },
+    [pageSeo]
+  );
+
   // The draft toolbar is gated on the server-computed `hasDraft`, but the form
   // autosave writes a draft WITHOUT revalidating the route (revalidating would
   // re-init the form and loop the autosave — see updateProductAction). Track
@@ -64,6 +82,7 @@ export default function ProductFormClientShell({
         <ProductForm
           {...props}
           hasOpenDraft={hasDraft}
+          onSeoChange={handleSeoChange}
           updateAction={updateAction ? wrappedUpdateAction : undefined}
           mediaPickerNode={
             <MediaPickerDialog

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

@@ -35,6 +35,8 @@ import BlockEditorArea from '../../../blocks/components/BlockEditorArea';
 import VisibilityControl from '../../../components/VisibilityControl';
 import RevisionHistoryButton from '../../../revisions/RevisionHistoryButton';
 import { buildViewUrl } from '../../../../../lib/publishing/viewUrl';
+import { PageSeoProvider } from '../../../../../lib/seo/page-audit-context';
+import { PageSeoAuditSection } from '../../../../../components/seo/PageSeoAuditSection';
 
 export default async function EditProductPage({
   params,
@@ -211,8 +213,15 @@ export default async function EditProductPage({
   }
 
   return (
-    <div className="space-y-8 w-full max-w-[1400px] mx-auto px-6 py-8">
-      <CortexAiPageContextRegistrar
+    <PageSeoProvider
+      documentTitle={product.title}
+      documentType="product"
+      initialBlocks={descriptionBlocks}
+      initialMetaDescription={product.meta_description}
+      initialMetaTitle={product.meta_title}
+    >
+      <div className="space-y-8 w-full max-w-[1400px] mx-auto px-6 py-8">
+        <CortexAiPageContextRegistrar
         context={{
           contentType: 'product',
           entityId: product.id,
@@ -356,6 +365,8 @@ export default async function EditProductPage({
         availableCategoriesProp={allCategories}
       />
 
+      <PageSeoAuditSection className="my-6" />
+
       <div className="border-t pt-8">
         <h2 className="text-xl font-bold mb-4">Product Description Blocks</h2>
         <BlockEditorArea
@@ -366,5 +377,6 @@ export default async function EditProductPage({
         />
       </div>
     </div>
+    </PageSeoProvider>
   );
 }

package/templates/nextblock-template/components/seo/PageSeoAuditSection.tsx

@@ -152,7 +152,14 @@ export function PageSeoAuditSection({ className }: PageSeoAuditSectionProps) {
   // Memoised because the document's identity is one of the panel's debounce
   // dependencies: a fresh object on every render would reset the panel's timer
   // forever and no score would ever appear.
-  const pageDocument = React.useMemo(() => buildPageSeoDocument(settledBlocks), [settledBlocks]);
+  const pageDocument = React.useMemo(
+    () =>
+      buildPageSeoDocument(settledBlocks, {
+        documentTitle: pageSeo?.snapshot.documentTitle,
+        documentType: pageSeo?.snapshot.documentType,
+      }),
+    [settledBlocks, pageSeo?.snapshot.documentTitle, pageSeo?.snapshot.documentType],
+  );
 
   const handleAuditChange = React.useCallback((next: SeoAuditResult | null) => {
     setAudit(next);

package/templates/nextblock-template/lib/seo/page-audit-context.tsx

@@ -52,6 +52,10 @@ export interface PageSeoSnapshot {
    * content is `Json` and a custom block can carry anything.
    */
   blocks: unknown[];
+  /** Document title for articles / posts where the template renders an H1. */
+  documentTitle: string | null;
+  /** Whether this is a standalone 'page', an editorial 'post', or a store 'product'. */
+  documentType: 'page' | 'post' | 'product';
   metaDescription: string | null;
   metaTitle: string | null;
 }
@@ -60,6 +64,7 @@ export interface PageSeoContextValue {
   /** The focus keyphrase, held here so it survives switching between blocks. */
   keyword: string;
   setBlocks: (blocks: unknown[]) => void;
+  setDocumentTitle: (title: string | null) => void;
   setKeyword: (keyword: string) => void;
   setMeta: (meta: { metaDescription: string | null; metaTitle: string | null }) => void;
   snapshot: PageSeoSnapshot;
@@ -69,6 +74,8 @@ const PageSeoContext = createContext<PageSeoContextValue | null>(null);
 
 export interface PageSeoProviderProps {
   children: ReactNode;
+  documentTitle?: string | null;
+  documentType?: 'page' | 'post' | 'product';
   initialBlocks?: unknown[];
   initialMetaDescription?: string | null;
   initialMetaTitle?: string | null;
@@ -76,17 +83,24 @@ export interface PageSeoProviderProps {
 
 export function PageSeoProvider({
   children,
+  documentTitle: initialDocumentTitle = null,
+  documentType = 'page',
   initialBlocks = [],
   initialMetaDescription = null,
   initialMetaTitle = null,
 }: PageSeoProviderProps) {
   const [blocks, setBlocksState] = useState<unknown[]>(initialBlocks);
+  const [documentTitle, setDocumentTitleState] = useState<string | null>(initialDocumentTitle);
   const [keyword, setKeyword] = useState('');
   const [meta, setMetaState] = useState<{
     metaDescription: string | null;
     metaTitle: string | null;
   }>({ metaDescription: initialMetaDescription, metaTitle: initialMetaTitle });
 
+  const setDocumentTitle = useCallback((next: string | null) => {
+    setDocumentTitleState((previous) => (previous === next ? previous : next));
+  }, []);
+
   // Both setters bail when nothing actually changed. The blocks array is rebuilt on
   // every keystroke in a block editor, so without the length-and-identity check
   // below every character typed would re-render the provider and every consumer of
@@ -114,15 +128,18 @@ export function PageSeoProvider({
     () => ({
       keyword,
       setBlocks,
+      setDocumentTitle,
       setKeyword,
       setMeta,
       snapshot: {
         blocks,
+        documentTitle,
+        documentType,
         metaDescription: meta.metaDescription,
         metaTitle: meta.metaTitle,
       },
     }),
-    [blocks, keyword, meta.metaDescription, meta.metaTitle, setBlocks, setMeta],
+    [blocks, documentTitle, documentType, keyword, meta.metaDescription, meta.metaTitle, setBlocks, setDocumentTitle, setMeta],
   );
 
   return <PageSeoContext.Provider value={value}>{children}</PageSeoContext.Provider>;