From a7f91fec603968c4f540b481ed243c1a8602ec7e Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Thu, 5 Dec 2024 11:01:35 -0700
Subject: [PATCH] Don't assign an `undefined` document title

- That unexpectedly overrides the parent title
- Instead, either provide an explicit fallback or conditionally spread the property (implicit undefined works as expected)
- Also, not all addons have a `displayName`; fallback to `name`
    - Do same for tags and recipes, protectively
---
 apps/addon-catalog/app/(home)/tag/[...name]/page.tsx |  9 +++++++--
 apps/addon-catalog/app/[...addonName]/page.tsx       | 10 +++++++---
 apps/frontpage/app/docs/[...slug]/page.tsx           |  2 +-
 apps/frontpage/app/docs/page.tsx                     |  2 +-
 apps/frontpage/app/recipes/[...name]/page.tsx        | 10 ++++------
 5 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/apps/addon-catalog/app/(home)/tag/[...name]/page.tsx b/apps/addon-catalog/app/(home)/tag/[...name]/page.tsx
index 1a73581d..664d2fc9 100644
--- a/apps/addon-catalog/app/(home)/tag/[...name]/page.tsx
+++ b/apps/addon-catalog/app/(home)/tag/[...name]/page.tsx
@@ -31,10 +31,15 @@ export const generateMetadata: GenerateMetaData = async ({ params }) => {
   const data = (await fetchTagDetailsData(tagName)) || {};
 
   if ('error' in data) return {};
-  const { displayName } = data;
+
+  const title = data.displayName ?? data.name;
 
   return {
-    title: displayName ? `${displayName} tag | Storybook integrations` : undefined,
+    ...(title
+      ? {
+          title: `${title} tag | Storybook integrations`,
+        }
+      : undefined),
   };
 };
 
diff --git a/apps/addon-catalog/app/[...addonName]/page.tsx b/apps/addon-catalog/app/[...addonName]/page.tsx
index ebf22fab..5ba14c72 100644
--- a/apps/addon-catalog/app/[...addonName]/page.tsx
+++ b/apps/addon-catalog/app/[...addonName]/page.tsx
@@ -35,10 +35,14 @@ export const generateMetadata: GenerateMetaData = async ({ params }) => {
   const name = (await params).addonName;
   const addon = await getAddonFromName(name);
 
+  const title = addon?.displayName ?? addon?.name;
+
   return {
-    title: addon?.displayName
-      ? `${addon.displayName} | Storybook integrations`
-      : undefined,
+    ...(title
+      ? {
+          title: `${title} | Storybook integrations`,
+        }
+      : undefined),
   };
 };
 
diff --git a/apps/frontpage/app/docs/[...slug]/page.tsx b/apps/frontpage/app/docs/[...slug]/page.tsx
index daff163e..a4cf52ef 100644
--- a/apps/frontpage/app/docs/[...slug]/page.tsx
+++ b/apps/frontpage/app/docs/[...slug]/page.tsx
@@ -50,7 +50,7 @@ export const generateMetadata: GenerateMetaData = async ({ params }) => {
   );
 
   return {
-    title: page?.title ? `${page.title} | Storybook docs` : undefined,
+    title: page?.title ? `${page.title} | Storybook docs` : 'Storybook docs',
     alternates: {
       canonical: findPage?.canonical,
     },
diff --git a/apps/frontpage/app/docs/page.tsx b/apps/frontpage/app/docs/page.tsx
index 4fe9d17d..8fc8447c 100644
--- a/apps/frontpage/app/docs/page.tsx
+++ b/apps/frontpage/app/docs/page.tsx
@@ -9,7 +9,7 @@ export async function generateMetadata(): Promise<Metadata> {
   const page = await getPageData([latestVersion.id], latestVersion);
 
   return {
-    title: page?.title ? `${page.title} | Storybook docs` : undefined,
+    title: page?.title ? `${page.title} | Storybook docs` : 'Storybook docs',
     alternates: {
       canonical: '/docs',
     },
diff --git a/apps/frontpage/app/recipes/[...name]/page.tsx b/apps/frontpage/app/recipes/[...name]/page.tsx
index 8b3ce057..1de0bb01 100644
--- a/apps/frontpage/app/recipes/[...name]/page.tsx
+++ b/apps/frontpage/app/recipes/[...name]/page.tsx
@@ -31,9 +31,7 @@ interface RecipeDetailsProps {
   params: Params;
 }
 
-async function getRecipeFromName(
-  addonName: string[],
-): Promise<
+async function getRecipeFromName(addonName: string[]): Promise<
   // TODO: More precise typing to avoid these omits
   | Omit<
       RecipeWithTagLinks,
@@ -55,10 +53,10 @@ export const generateMetadata: GenerateMetaData = async ({ params }) => {
   const name = (await params).name;
   const recipe = await getRecipeFromName(name);
 
+  const title = recipe?.displayName ?? recipe?.name;
+
   return {
-    title: recipe?.displayName
-      ? `${recipe.displayName} | Storybook recipes`
-      : undefined,
+    title: title ? `${title} | Storybook recipes` : 'Storybook recipes',
   };
 };