[PCC-1176] Starter kit design update finalization fixes

starters/nextjs-starter-approuter-ts/README.md

@@ -1,4 +1,4 @@
-# Pantheon Decoupled Kit Next Pantheon Content Cloud Starter
+# Pantheon Content Cloud Next.js Starter
 
 ## Getting Started
 

starters/nextjs-starter-approuter-ts/__tests__/hasConfiguredPantheonClient.test.ts

@@ -2,7 +2,7 @@ import { pantheonAPIOptions } from "../app/api/pantheoncloud/[...command]/api-op
 
 describe("hasConfiguredPantheonClient", () => {
   it("Pantheon API options have been filled out", () => {
-    expect(pantheonAPIOptions.smartComponentMap.LEAD_CAPTURE).toBeDefined();
+    expect(pantheonAPIOptions.smartComponentMap.MEDIA_PREVIEW).toBeDefined();
   });
 
   it("Resolve document by article id", () => {

starters/nextjs-starter-approuter-ts/app/articles/page.tsx

@@ -38,7 +38,7 @@ export default async function ArticlesListTemplate() {
   );
 }
 
-export async function generateMetadata() {
+export function generateMetadata() {
   return {
     title: "Decoupled Next PCC Demo",
     description: "Generated by create-pantheon-decoupled-kit.",

starters/nextjs-starter-approuter-ts/app/examples/page.tsx

@@ -7,12 +7,14 @@ export default function ExamplesPageTemplate() {
     <Layout>
       <section className="max-w-screen-3xl mx-auto px-4 pt-16 sm:w-4/5 md:w-3/4 lg:w-4/5 2xl:w-3/4">
         <PageHeader title="Examples" />
-        <section className="prose lg:prose-xl mx-auto mt-10 flex flex-col">
+        <section className="prose lg:prose-xl my-10 flex flex-col">
           <p>
-            This page outlines a growing list of common use cases that can be
-            used as a reference when building using this starter kit. If you
-            don&apos;t need them for your site, feel free to delete the
-            `pages/examples` directory in your codebase.
+            <em>
+              This page outlines a growing list of common use cases that can be
+              used as a reference when building using this starter kit. If you
+              don&apos;t need them for your site, feel free to delete the
+              `pages/examples` directory in your codebase.
+            </em>
           </p>
           <ul>
             <li>
@@ -37,7 +39,7 @@ export default function ExamplesPageTemplate() {
   );
 }
 
-export async function generateMetadata({}) {
+export function generateMetadata() {
   return {
     title: "Examples",
     description: "Examples",

starters/nextjs-starter-approuter-ts/app/examples/ssg-isr/[uri]/page.tsx

@@ -1,9 +1,7 @@
 import { PCCConvenienceFunctions } from "@pantheon-systems/pcc-react-sdk/server";
 import { Metadata } from "next";
-import { unstable_cache } from "next/cache";
 import { notFound } from "next/navigation";
 import { StaticArticleView } from "../../../../components/article-view";
-import { ArticleGrid } from "../../../../components/grid";
 import Layout from "../../../../components/layout";
 import { getSeoMetadata } from "../../../../lib/utils";
 

starters/nextjs-starter-approuter-ts/app/examples/ssg-isr/page.tsx

@@ -16,6 +16,7 @@ async function fetchNextPages(cursor: string) {
       pageSize: PAGE_SIZE,
       cursor,
     });
+
   return {
     data,
     newCursor,
@@ -40,7 +41,7 @@ export default async function SSGISRExampleTemplate() {
         cursor={cursor}
         fetcher={fetchNextPages}
         additionalHeader={
-          <div className="prose lg:prose-xl mx-auto mb-8 mt-8 max-w-lg lg:max-w-screen-lg">
+          <div className="prose lg:prose-xl my-10 flex flex-col">
             <p>
               <em>
                 By default, this starter kit is optimized for SSR and Edge
@@ -56,7 +57,7 @@ export default async function SSGISRExampleTemplate() {
   );
 }
 
-export async function generateStaticParams() {
+export function generateStaticParams() {
   // This function is empty because we're not generating any dynamic routes
   // It's included to demonstrate where you would put the logic for generating
   // static params if needed in the future

starters/nextjs-starter-approuter-ts/app/global-error.tsx

@@ -1,24 +1,26 @@
-'use client'
+"use client";
 
 import Image from "next/image";
 import Link from "next/link";
 import Layout from "../components/layout";
 import { Button } from "../components/ui/button";
 
-
 export default function GlobalError() {
   return (
     <Layout>
-      <div className="flex flex-col xl:flex-row xl:gap-[139px] xl:items-center max-w-screen-3xl mx-auto py-0 3xl:px-12">
-        <div className="mx-auto md:mx-0 px-6 mt-24 mb-32 xl:mt-0 xl:mb-0 sm:max-w-[600px] md:ml-24 xl:ml-32 xl:pl-0 xl:py-0 xl:max-w-max">
+      <div className="max-w-screen-3xl 3xl:px-12 mx-auto flex flex-col py-0 xl:flex-row xl:items-center xl:gap-[139px]">
+        <div className="mx-auto mb-32 mt-24 px-6 sm:max-w-[600px] md:mx-0 md:ml-24 xl:mb-0 xl:ml-32 xl:mt-0 xl:max-w-max xl:py-0 xl:pl-0">
           <div>
-            <h1 className="text-5xl leading-[3.39rem] font-bold">500</h1>
-            <h2 className="text-5xl leading-[3.39rem] font-bold mt-3">Internal server error</h2>
-            <p className="text-xl leading-[1.875rem] mt-3">
-              An error occurred while processing your request. Try again or return to homepage.
+            <h1 className="text-5xl font-bold leading-[3.39rem]">500</h1>
+            <h2 className="mt-3 text-5xl font-bold leading-[3.39rem]">
+              Internal server error
+            </h2>
+            <p className="mt-3 text-xl leading-[1.875rem]">
+              An error occurred while processing your request. Try again or
+              return to homepage.
             </p>
           </div>
-          <div className="flex gap-4 mt-8 flex-wrap">
+          <div className="mt-8 flex flex-wrap gap-4">
             <Link href="https://pcc.pantheon.io/docs">
               <Button size="large">Go to Documentation</Button>
             </Link>
@@ -29,22 +31,23 @@ export default function GlobalError() {
             </Link>
           </div>
         </div>
-        <div className="relative w-full h-[490px] sm:h-[640px] xl:max-w-[900px]">
+        <div className="relative h-[490px] w-full sm:h-[640px] xl:max-w-[900px]">
           <Image
             src="/images/error.png"
             alt="Pantheon Logo"
             fill
-            className="grayscale object-contain"
+            className="object-contain grayscale"
           />
         </div>
       </div>
     </Layout>
   );
 }
 
-export async function generateMetadata() {
+export function generateMetadata() {
   return {
     title: "Internal server error",
-    description: "An error occurred while processing your request. Try again or return to homepage.",
+    description:
+      "An error occurred while processing your request. Try again or return to homepage.",
   };
 }

starters/nextjs-starter-approuter-ts/app/not-found.tsx

@@ -6,17 +6,19 @@ import { Button } from "../components/ui/button";
 export default function NotFound() {
   return (
     <Layout>
-      <div className="flex flex-col xl:flex-row xl:gap-[139px] xl:items-center max-w-screen-3xl mx-auto py-0 3xl:px-12">
-        <div className="mx-auto md:mx-0 px-6 mt-24 mb-32 xl:mt-0 xl:mb-0 sm:max-w-[600px] md:ml-24 xl:ml-32 xl:pl-0 xl:py-0 xl:max-w-max">
+      <div className="max-w-screen-3xl 3xl:px-12 mx-auto flex flex-col py-0 xl:flex-row xl:items-center xl:gap-[139px]">
+        <div className="mx-auto mb-32 mt-24 px-6 sm:max-w-[600px] md:mx-0 md:ml-24 xl:mb-0 xl:ml-32 xl:mt-0 xl:max-w-max xl:py-0 xl:pl-0">
           <div>
-            <h1 className="text-5xl leading-[3.39rem] font-bold">404</h1>
-            <h2 className="text-5xl leading-[3.39rem] font-bold mt-3">Page not found</h2>
-            <p className="text-xl leading-[1.875rem] mt-3">
+            <h1 className="text-5xl font-bold leading-[3.39rem]">404</h1>
+            <h2 className="mt-3 text-5xl font-bold leading-[3.39rem]">
+              Page not found
+            </h2>
+            <p className="mt-3 text-xl leading-[1.875rem]">
               The page might not exist or is temporarily unavailable. Check the
               URL or return to homepage.
             </p>
           </div>
-          <div className="flex gap-4 mt-8 flex-wrap">
+          <div className="mt-8 flex flex-wrap gap-4">
             <Link href="https://pcc.pantheon.io/docs">
               <Button size="large">Go to Documentation</Button>
             </Link>
@@ -27,22 +29,23 @@ export default function NotFound() {
             </Link>
           </div>
         </div>
-        <div className="relative w-full h-[490px] sm:h-[640px] xl:max-w-[900px]">
+        <div className="relative h-[490px] w-full sm:h-[640px] xl:max-w-[900px]">
           <Image
             src="/images/error.png"
             alt="Pantheon Logo"
             fill
-            className="grayscale object-contain"
+            className="object-contain grayscale"
           />
         </div>
       </div>
     </Layout>
   );
 }
 
-export async function generateMetadata() {
+export function generateMetadata() {
   return {
     title: "Page not found",
-    description: "The page might not exist or is temporarily unavailable. Check the URL or return to homepage.",
+    description:
+      "The page might not exist or is temporarily unavailable. Check the URL or return to homepage.",
   };
 }

starters/nextjs-starter-approuter-ts/app/page.tsx

@@ -57,7 +57,7 @@ export default async function Home() {
   );
 }
 
-export async function generateMetadata({}) {
+export function generateMetadata() {
   return {
     title: "Decoupled Next PCC Demo",
     description: "Generated by create-pantheon-decoupled-kit.",