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

Author: kylegach

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),
   };
 };
 

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),
   };
 };
 

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,
     },

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',
     },

apps/frontpage/app/recipes/[...name]/page.tsx

@@ -55,10 +55,14 @@ 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`,
+        }
+      : undefined),
   };
 };