Merge branch 'main' of https://github.com/pantheon-systems/pantheon-c…

…ontent-cloud-sdk into PCC-1729-update-the-article-page-to-match-the-new-designs-including-author-and-tags

local_testing/testpages/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@pantheon-systems/pcc-react-sample-library": "workspace:*",
-    "next": "^14.2.10",
+    "next": "^14.2.15",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },

packages/cli/package.json

@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@pantheon-systems/pcc-sdk-core": "workspace:*",
-    "axios": "^1.7.5",
+    "axios": "^1.7.6",
     "bluebird": "^3.7.2",
     "boxen": "^7.1.1",
     "chalk": "^5.3.0",

packages/react-sdk/package.json

@@ -78,7 +78,7 @@
     "eslint": "^8.57.0",
     "eslint-config-pcc-custom": "workspace:*",
     "jest": "29.5.0",
-    "next": "^14.2.10",
+    "next": "^14.2.15",
     "octokit": "^3.2.1",
     "ora": "^6.3.1",
     "react": "18.3.1",

packages/vue-sdk/package.json

@@ -62,7 +62,7 @@
     "tsup": "^8.2.4",
     "typescript": "^5.5.4",
     "unplugin-vue": "^4.5.2",
-    "vite": "^5.1.8",
+    "vite": "^5.2.14",
     "vue": "3.4.27",
     "vue-3": "npm:vue@^3.4.27"
   },

starters/nextjs-starter-approuter-ts/app/api/pantheoncloud/[...command]/api-options.ts

@@ -3,7 +3,7 @@ import { serverSmartComponentMap } from "../../../../components/smart-components
 
 export const pantheonAPIOptions: PantheonAPIOptions = {
   resolvePath: (article) => `/articles/${article.slug || article.id}`,
-  getSiteId: () => process.env.PCC_SITE_ID,
+  getSiteId: () => process.env.PCC_SITE_ID as string,
   smartComponentMap: serverSmartComponentMap,
   componentPreviewPath: (componentName) =>
     `/component-preview/${componentName}`,

starters/nextjs-starter-approuter-ts/app/articles/[...uri]/article-view.tsx

@@ -5,13 +5,30 @@ import queryString from "query-string";
 import { pantheonAPIOptions } from "../../api/pantheoncloud/[...command]/api-options";
 import { ClientsideArticleView } from "./clientside-articleview";
 
-export const ArticleView = async ({ params, searchParams }) => {
-  const { article, grant } = await getServersideArticle(params, searchParams);
+export interface ArticleViewProps {
+  params: { uri: string };
+  searchParams: {
+    publishingLevel: "PRODUCTION" | "REALTIME";
+    pccGrant: string | undefined;
+  };
+}
+
+export const ArticleView = async ({
+  params,
+  searchParams,
+}: ArticleViewProps) => {
+  const { article, grant } = await getServersideArticle({
+    params,
+    searchParams,
+  });
 
-  return <ClientsideArticleView article={article} grant={grant} />;
+  return <ClientsideArticleView article={article} grant={grant || undefined} />;
 };
 
-export async function getServersideArticle(params, searchParams) {
+export async function getServersideArticle({
+  params,
+  searchParams,
+}: ArticleViewProps) {
   const { uri } = params;
   const { publishingLevel, pccGrant, ...query } = searchParams;
 
@@ -20,7 +37,8 @@ export async function getServersideArticle(params, searchParams) {
 
   const article = await PCCConvenienceFunctions.getArticleBySlugOrId(
     slugOrId,
-    publishingLevel?.toString().toUpperCase() || "PRODUCTION",
+    (publishingLevel?.toString().toUpperCase() as "PRODUCTION" | "REALTIME") ||
+      "PRODUCTION",
   );
 
   if (!article) {
@@ -29,7 +47,8 @@ export async function getServersideArticle(params, searchParams) {
 
   if (
     article.slug?.trim().length &&
-    article.slug.toLowerCase() !== slugOrId?.trim().toLowerCase()
+    article.slug.toLowerCase() !== slugOrId?.trim().toLowerCase() &&
+    pantheonAPIOptions.resolvePath != null
   ) {
     // If the article was accessed by the id rather than the slug - then redirect to the canonical
     // link (mostly for SEO purposes than anything else).

starters/nextjs-starter-approuter-ts/app/articles/[...uri]/clientside-articleview.tsx

@@ -15,11 +15,11 @@ updateConfig({
 });
 
 export const ClientsideArticleView = ({
-  grant,
   article,
+  grant,
 }: {
-  grant: string;
   article: Article;
+  grant?: string | undefined;
 }) => {
   return (
     <PantheonProvider

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

@@ -2,9 +2,16 @@ import { Suspense } from "react";
 import Layout from "../../../components/layout";
 import { SkeletonArticleView } from "../../../components/skeleton-article-view";
 import { getSeoMetadata } from "../../../lib/utils";
-import { ArticleView, getServersideArticle } from "./article-view";
+import {
+  ArticleView,
+  ArticleViewProps,
+  getServersideArticle,
+} from "./article-view";
 
-export default async function ArticlePage({ params, searchParams }) {
+export default async function ArticlePage({
+  params,
+  searchParams,
+}: ArticleViewProps) {
   return (
     <Layout>
       <div className="prose mx-4 mt-16 text-black sm:mx-6 md:mx-auto">
@@ -16,8 +23,11 @@ export default async function ArticlePage({ params, searchParams }) {
   );
 }
 
-export async function generateMetadata({ params, searchParams }) {
-  const { article } = await getServersideArticle(params, searchParams);
+export async function generateMetadata({
+  params,
+  searchParams,
+}: ArticleViewProps) {
+  const { article } = await getServersideArticle({ params, searchParams });
 
   return getSeoMetadata(article);
 }

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

@@ -3,12 +3,12 @@ import ArticleList from "../../components/article-list";
 import Layout from "../../components/layout";
 import { PAGE_SIZE } from "../../constants";
 
-async function fetchNextPages(cursor: string) {
+async function fetchNextPages(cursor?: string | null | undefined) {
   "use server";
   const { data, cursor: newCursor } =
     await PCCConvenienceFunctions.getPaginatedArticles({
       pageSize: PAGE_SIZE,
-      cursor,
+      cursor: cursor || undefined,
     });
   return {
     data,

starters/nextjs-starter-approuter-ts/app/authors/[author]/page.tsx

@@ -12,8 +12,8 @@ import ArticleList from "../../../components/article-list";
 import Layout from "../../../components/layout";
 import { PAGE_SIZE } from "../../../constants";
 
-function fetchNextPages(author?: string) {
-  return async (cursor: string) => {
+function fetchNextPages(author?: string | null | undefined) {
+  return async (cursor?: string | null | undefined) => {
     "use server";
     const { data, cursor: newCursor } =
       await PCCConvenienceFunctions.getPaginatedArticles({
@@ -24,7 +24,7 @@ function fetchNextPages(author?: string) {
             : {
                 author,
               },
-        cursor,
+        cursor: cursor || undefined,
       });
 
     return {
@@ -34,7 +34,11 @@ function fetchNextPages(author?: string) {
   };
 }
 
-export default async function ArticlesListTemplate({ params }) {
+export default async function ArticlesListTemplate({
+  params,
+}: {
+  params: { author: string };
+}) {
   const author = params.author ? decodeURIComponent(params.author) : undefined;
 
   const {
@@ -66,7 +70,10 @@ export default async function ArticlesListTemplate({ params }) {
         totalCount={totalCount}
         fetcher={fetchNextPages(author)}
         additionalHeader={
-          <div className="border-base-300 mb-14 border-b-[1px] pb-7" data-testid="author-header">
+          <div
+            className="border-base-300 mb-14 border-b-[1px] pb-7"
+            data-testid="author-header"
+          >
             <div className="flex flex-row gap-x-6">
               <div>
                 <Image

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

@@ -53,7 +53,7 @@ export async function generateStaticParams() {
 
   return publishedArticles.flatMap((article) => {
     const params = [{ uri: article.id }];
-    if (article.metadata.slug) {
+    if (article.metadata?.slug) {
       params.push({ uri: String(article.metadata.slug) });
     }
     return params;

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

@@ -9,12 +9,12 @@ export const metadata: Metadata = {
   description: "Example of using SSG and ISR",
 };
 
-async function fetchNextPages(cursor: string) {
+async function fetchNextPages(cursor?: string | null | undefined) {
   "use server";
   const { data, cursor: newCursor } =
     await PCCConvenienceFunctions.getPaginatedArticles({
       pageSize: PAGE_SIZE,
-      cursor,
+      cursor: cursor || undefined,
     });
 
   return {

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

@@ -2,13 +2,14 @@ import { Poppins } from "next/font/google";
 // import Script from "next/script";
 
 import "../styles/globals.css";
+import { PropsWithChildren } from "react";
 
 const poppins = Poppins({
   subsets: ["latin"],
   weight: ["400", "500", "700"],
 });
 
-function MyApp({ children }) {
+function MyApp({ children }: PropsWithChildren) {
   return (
     <html>
       <head>

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

@@ -2,14 +2,20 @@ import { PCCConvenienceFunctions } from "@pantheon-systems/pcc-react-sdk/server"
 import Layout from "../../components/layout";
 import SearchResults from "./search-results";
 
-export default async function SearchPage({ searchParams }) {
+interface Props {
+  searchParams: { q?: string | null | undefined };
+}
+
+export default async function SearchPage({ searchParams }: Props) {
   const searchResults = await PCCConvenienceFunctions.getAllArticlesWithSummary(
     {
       publishingLevel: "PRODUCTION",
     },
-    {
-      bodyContains: searchParams.q,
-    },
+    searchParams.q
+      ? {
+          bodyContains: searchParams.q,
+        }
+      : undefined,
     true,
   );
 
@@ -23,7 +29,7 @@ export default async function SearchPage({ searchParams }) {
   );
 }
 
-export function generateMetadata({ searchParams }) {
+export function generateMetadata({ searchParams }: Props) {
   return {
     title: `Search results for "${searchParams.q}"`,
     description: `Search results for "${searchParams.q}"`,

starters/nextjs-starter-approuter-ts/app/search/search-results.tsx

@@ -33,15 +33,15 @@ export default function SearchResults({
           <div className="w-full whitespace-pre-wrap break-words py-4">
             {isLoading ? (
               <Skeleton count={5} />
-            ) : (
+            ) : summary ? (
               <Markdown>{summary}</Markdown>
-            )}
+            ) : null}
           </div>
         </section>
       ) : null}
 
       <div className="my-16 max-w-[707px]">
-        {isLoading || searchResults?.length > 0 ? (
+        {isLoading || (searchResults && searchResults.length > 0) ? (
           (searchResults ?? Array.from({ length: 5 })).map((result, index) => (
             <Fragment key={result?.id || index}>
               <div>
@@ -59,11 +59,11 @@ export default function SearchResults({
                 <p className="my-2 line-clamp-4 whitespace-pre-wrap">
                   {isLoading ? (
                     <Skeleton count={4} />
-                  ) : (
+                  ) : result.snippet ? (
                     markdownToTxt(
                       result.snippet.replaceAll(/{#h\..*}\n/g, "\n"),
                     )
-                  )}
+                  ) : null}
                 </p>
               </div>
 

starters/nextjs-starter-approuter-ts/components/article-list.tsx

@@ -16,7 +16,7 @@ interface Props {
   articles: PaginatedArticle[] | ArticleWithoutContent[];
   totalCount: number;
   cursor: string;
-  fetcher: (cursor: string) => Promise<{
+  fetcher: (cursor?: string | null | undefined) => Promise<{
     data: PaginatedArticle[] | ArticleWithoutContent[];
     newCursor: string;
   }>;

starters/nextjs-starter-approuter-ts/components/article-view.tsx

@@ -67,30 +67,32 @@ const ArticleHeader = ({
   articleTitle: string;
   seoMetadata: Metadata;
 }) => {
+  const author = Array.isArray(seoMetadata.authors)
+    ? seoMetadata.authors[0]
+    : seoMetadata.authors;
+
   return (
     <div>
       <div className="text-5xl font-bold">{articleTitle}</div>
       <div className="border-y-base-300 text-neutral-content mb-14 mt-6 flex w-full flex-row gap-x-4 border-y-[1px] py-4">
-        {seoMetadata.authors?.[0]?.name ? (
+        {author?.name ? (
           <>
             <div>
               <Link
                 data-testid="author"
                 className="flex flex-row items-center gap-x-2 font-thin uppercase text-black no-underline"
-                href={`/authors/${seoMetadata.authors?.[0]?.name}`}
+                href={`/authors/${author?.name}`}
               >
                 <div>
                   <Image
                     className="m-0 rounded-full"
                     src="/images/no-avatar.png"
                     width={24}
                     height={24}
-                    alt={`Avatar of ${seoMetadata.authors?.[0]?.name}`}
+                    alt={`Avatar of ${author?.name}`}
                   />
                 </div>
-                <div className="underline">
-                  {seoMetadata.authors?.[0]?.name}
-                </div>
+                <div className="underline">{author?.name}</div>
               </Link>
             </div>
             <div className="h-full w-[1px] bg-[#e5e7eb]">&nbsp;</div>
@@ -118,7 +120,7 @@ export function StaticArticleView({ article, onlyContent }: ArticleViewProps) {
     <>
       <ArticleHeader
         article={article}
-        articleTitle={articleTitle}
+        articleTitle={articleTitle || ""}
         seoMetadata={seoMetadata}
       />
       <ArticleRenderer