Catalyst ae71f24

apps/core/app/(default)/(faceted)/brand/[slug]/page.tsx

@@ -1,4 +1,5 @@
 import { ChevronLeft, ChevronRight } from 'lucide-react';
+import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 
 import { getBrand } from '~/client/queries/getBrand';
@@ -17,6 +18,20 @@ interface Props {
   searchParams: { [key: string]: string | string[] | undefined };
 }
 
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const brandId = Number(params.slug);
+
+  const brand = await getBrand({
+    brandId,
+  });
+
+  const title = brand?.name;
+
+  return {
+    title,
+  };
+}
+
 export default async function Brand({ params, searchParams }: Props) {
   const brandId = Number(params.slug);
 

apps/core/app/(default)/(faceted)/category/[slug]/page.tsx

@@ -1,4 +1,5 @@
 import { ChevronLeft, ChevronRight } from 'lucide-react';
+import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 
 import { getCategory } from '~/client/queries/getCategory';
@@ -19,6 +20,20 @@ interface Props {
   searchParams: { [key: string]: string | string[] | undefined };
 }
 
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const categoryId = Number(params.slug);
+
+  const category = await getCategory({
+    categoryId,
+  });
+
+  const title = category?.name;
+
+  return {
+    title,
+  };
+}
+
 export default async function Category({ params, searchParams }: Props) {
   const categoryId = Number(params.slug);
   const search = await fetchFacetedSearch({ ...searchParams, category: [params.slug] });

apps/core/app/(default)/(faceted)/search/page.tsx

@@ -13,6 +13,10 @@ interface Props {
   searchParams: { [key: string]: string | string[] | undefined };
 }
 
+export const metadata = {
+  title: 'Search Results',
+};
+
 export default async function Search({ searchParams }: Props) {
   const searchTerm = typeof searchParams.term === 'string' ? searchParams.term : undefined;
 

apps/core/app/(default)/(webpages)/[page]/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 
+import { getReCaptchaSettings } from '~/client/queries/getReCaptchaSettings';
 import { getWebPage } from '~/client/queries/getWebPage';
 import { ContactUs } from '~/components/Forms';
 
@@ -35,16 +36,23 @@ export default async function WebPage({ params }: Props) {
     notFound();
   }
 
-  const { name, htmlBody, __typename: pageType } = webpage;
+  const { name, htmlBody, __typename: pageType, entityId } = webpage;
 
   switch (pageType) {
-    case 'ContactPage':
+    case 'ContactPage': {
+      const reCaptchaSettings = await getReCaptchaSettings();
+
       return (
         <>
           <PageContent content={htmlBody} title={name} />
-          <ContactUs fields={webpage.contactFields} />
+          <ContactUs
+            fields={webpage.contactFields}
+            pageEntityId={entityId}
+            reCaptchaSettings={reCaptchaSettings}
+          />
         </>
       );
+    }
 
     case 'NormalPage':
     default:

apps/core/app/(default)/blog/[blogId]/page.tsx

@@ -6,6 +6,7 @@ import {
   BlogPostTitle,
 } from '@bigcommerce/reactant/BlogPostCard';
 import { Tag, TagContent } from '@bigcommerce/reactant/Tag';
+import type { Metadata } from 'next';
 import Image from 'next/image';
 import { notFound } from 'next/navigation';
 
@@ -19,6 +20,16 @@ interface Props {
   };
 }
 
+export async function generateMetadata({ params: { blogId } }: Props): Promise<Metadata> {
+  const blogPost = await getBlogPost(+blogId);
+
+  const title = blogPost?.seo.pageTitle ?? 'Blog';
+
+  return {
+    title,
+  };
+}
+
 export default async function BlogPostPage({ params: { blogId } }: Props) {
   const blogPost = await getBlogPost(+blogId);
 
@@ -63,11 +74,7 @@ export default async function BlogPostPage({ params: { blogId } }: Props) {
       <div className="mb-10 text-base" dangerouslySetInnerHTML={{ __html: blogPost.htmlBody }} />
       <div className="mb-10 flex">
         {blogPost.tags.map((tag) => (
-          <Link
-            className="me-3 block cursor-pointer focus:outline-none focus:ring-4 focus:ring-blue-primary/20"
-            href={`/blog/tag/${tag}`}
-            key={tag}
-          >
+          <Link className="me-3 block cursor-pointer" href={`/blog/tag/${tag}`} key={tag}>
             <Tag>
               <TagContent>{tag}</TagContent>
             </Tag>

apps/core/app/(default)/blog/page.tsx

@@ -1,4 +1,5 @@
 import { ChevronLeft, ChevronRight } from 'lucide-react';
+import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 
 import { getBlogPosts } from '~/client/queries/getBlogPosts';
@@ -9,6 +10,16 @@ interface Props {
   searchParams: { [key: string]: string | string[] | undefined };
 }
 
+export async function generateMetadata({ searchParams }: Props): Promise<Metadata> {
+  const blogPosts = await getBlogPosts(searchParams);
+
+  const title = blogPosts?.name ?? 'Blog';
+
+  return {
+    title,
+  };
+}
+
 export default async function BlogPostPage({ searchParams }: Props) {
   const blogPosts = await getBlogPosts(searchParams);
 

apps/core/app/(default)/cart/page.tsx

@@ -10,6 +10,10 @@ import { getCart } from '~/client/queries/getCart';
 import { removeProduct } from './_actions/removeProduct';
 import { CartItemCounter } from './CartItemCounter';
 
+export const metadata = {
+  title: 'Cart',
+};
+
 const EmptyCart = () => (
   <div className="flex h-full flex-col">
     <h1 className="pb-6 text-h2 lg:pb-10">Your cart</h1>

apps/core/app/(default)/compare/page.tsx

@@ -13,6 +13,10 @@ import { AddToCartForm } from './AddToCartForm';
 
 const MAX_COMPARE_LIMIT = 10;
 
+export const metadata = {
+  title: 'Compare',
+};
+
 const CompareParamsSchema = z.object({
   ids: z
     .union([z.string(), z.array(z.string()), z.undefined()])

apps/core/app/(default)/login/page.tsx

@@ -4,6 +4,10 @@ import { Link } from '~/components/Link';
 
 import { LoginForm } from './LoginForm';
 
+export const metadata = {
+  title: 'Login',
+};
+
 export default function Login() {
   return (
     <div className="mx-auto my-6 max-w-4xl">

apps/core/app/error.tsx

@@ -1,5 +1,9 @@
 'use client';
 
+export const metadata = {
+  title: 'Error',
+};
+
 export default function Error() {
   return (
     <div className="h-full px-10 py-12 lg:py-24">

apps/core/app/layout.tsx

@@ -1,10 +1,13 @@
 import { Analytics } from '@vercel/analytics/react';
 import { SpeedInsights } from '@vercel/speed-insights/next';
+import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import { PropsWithChildren } from 'react';
 
 import './globals.css';
 
+import { getStoreSettings } from '~/client/queries/getStoreSettings';
+
 import { Notifications } from './notifications';
 import { Providers } from './providers';
 
@@ -14,14 +17,22 @@ const inter = Inter({
   variable: '--font-inter',
 });
 
-export const metadata = {
-  title: 'Catalyst Store',
-  description: 'Example store built with Catalyst',
-  other: {
-    platform: 'bigcommerce.catalyst',
-    build_sha: process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA,
-  },
-};
+export async function generateMetadata(): Promise<Metadata> {
+  const storeSettings = await getStoreSettings();
+  const title = storeSettings?.storeName ?? 'Catalyst Store';
+
+  return {
+    title: {
+      template: `${title} - %s`,
+      default: `${title}`,
+    },
+    description: 'Example store built with Catalyst',
+    other: {
+      platform: 'bigcommerce.catalyst',
+      build_sha: process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA ?? '',
+    },
+  };
+}
 
 export const fetchCache = 'default-cache';
 

apps/core/app/maintenance/page.tsx

@@ -8,6 +8,10 @@ const Container = ({ children }: { children: ReactNode }) => (
   <main className="mx-auto mt-[64px] px-6 md:px-10 lg:mt-[128px]">{children}</main>
 );
 
+export const metadata = {
+  title: 'Maintenance',
+};
+
 export default async function MaintenancePage() {
   const storeSettings = await getStoreSettings();
 
@@ -35,7 +39,10 @@ export default async function MaintenancePage() {
 
           <p className="flex items-center gap-2">
             <Phone aria-hidden="true" />
-            <a className="text-blue-primary" href={`tel:${contact.phone}`}>
+            <a
+              className="text-blue-primary hover:text-blue-secondary focus:outline-none focus:ring-4 focus:ring-blue-primary/20"
+              href={`tel:${contact.phone}`}
+            >
               {contact.phone}
             </a>
           </p>

apps/core/app/not-found.tsx

@@ -8,6 +8,10 @@ import { Header } from '~/components/Header';
 import { CartLink } from '~/components/Header/cart';
 import { ProductCard } from '~/components/ProductCard';
 
+export const metadata = {
+  title: 'Not Found',
+};
+
 export default async function NotFound() {
   const featuredProducts = await getFeaturedProducts({ imageHeight: 500, imageWidth: 500 });
 

apps/core/components/BlogPostCard/index.tsx

@@ -21,10 +21,7 @@ export const BlogPostCard = ({ blogPost }: BlogPostCardProps) => (
   <ReactantBlogPostCard>
     {blogPost.thumbnailImage ? (
       <BlogPostImage>
-        <Link
-          className="block w-full focus:outline-none focus:ring-4 focus:ring-blue-primary/20"
-          href={`/blog/${blogPost.entityId}`}
-        >
+        <Link className="block w-full" href={`/blog/${blogPost.entityId}`}>
           <Image
             alt={blogPost.thumbnailImage.altText}
             className="h-full w-full object-cover object-center"
@@ -48,12 +45,7 @@ export const BlogPostCard = ({ blogPost }: BlogPostCardProps) => (
     )}
 
     <BlogPostTitle>
-      <Link
-        className="focus:outline-none focus:ring-4 focus:ring-blue-primary/20"
-        href={`/blog/${blogPost.entityId}`}
-      >
-        {blogPost.name}
-      </Link>
+      <Link href={`/blog/${blogPost.entityId}`}>{blogPost.name}</Link>
     </BlogPostTitle>
     <BlogPostContent>{blogPost.plainTextSummary}</BlogPostContent>
     <BlogPostDate>