Big pass at frontpage

storybookjs · Jul 17, 2024 · f2eca12 · f2eca12
1 parent 9a7cf62
commit f2eca12
Show file tree

Hide file tree

Showing 59 changed files with 429 additions and 405 deletions.
diff --git a/apps/frontpage/app/addons/sitemap.ts b/apps/frontpage/app/addons/sitemap.ts
@@ -10,41 +10,41 @@ interface AddonsData {
 
 export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
   /**
-   * TODO: Move this to a shared location, @repo/utils?
+   * TODO: Move this to a shared location, \@repo/utils?
    * Canonical source: apps/addon-catalog/lib/fetch-addons-data.ts
    */
   async function fetchAddonsData() {
-    try {
-      let value: AddonValue[] = [];
-      async function fetchPartialData(skip = 0) {
-        const data = await fetchAddonsQuery<AddonsData, { skip: number }>(
-          gql`
-            query Addons($skip: Int!) {
-              addons(limit: 30, skip: $skip) {
-                name
-              }
+    let value: AddonValue[] = [];
+    async function fetchPartialData(skip = 0) {
+      const data = await fetchAddonsQuery<AddonsData, { skip: number }>(
+        gql`
+          query Addons($skip: Int!) {
+            addons(limit: 30, skip: $skip) {
+              name
             }
-          `,
-          {
-            variables: { skip },
-          },
-        );
-
-        validateResponse(() => data.addons);
+          }
+        `,
+        {
+          variables: { skip },
+        },
+      );
 
-        const { addons } = data;
+      validateResponse(() => data.addons);
 
-        value = [...value, ...addons.map(({ name }) => name)];
+      const { addons } = data;
 
-        if (addons.length > 0) await fetchPartialData(skip + addons.length);
+      value = [...value, ...addons.map(({ name }) => name)];
 
-        return value;
-      }
+      if (addons.length > 0) await fetchPartialData(skip + addons.length);
 
+      return value;
+    }
+    try {
       return await fetchPartialData();
     } catch (error) {
-      // @ts-expect-error - Seems safe
-      throw new Error(`Failed to fetch addons data: ${error.message}`);
+      throw new Error(
+        `Failed to fetch addons data: ${(error as Error).message}`,
+      );
     }
   }
 
@@ -55,48 +55,48 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
   }
 
   /**
-   * TODO: Move this to a shared location, @repo/utils?
+   * TODO: Move this to a shared location, \@repo/utils?
    * Canonical source: apps/addon-catalog/lib/fetch-tags-data.ts
    */
   async function fetchTagsData({
     isCategory,
   }: {
     isCategory?: boolean;
   } = {}) {
-    try {
-      let value: TagValue[] = [];
-      async function fetchPartialData(skip = 0) {
-        const data = await fetchAddonsQuery<
-          TagsData,
-          { isCategory: boolean; skip: number }
-        >(
-          gql`
-            query TagNames($isCategory: Boolean!, $skip: Int!) {
-              tags(isCategory: $isCategory, limit: 30, skip: $skip) {
-                name
-              }
+    let value: TagValue[] = [];
+    async function fetchPartialData(skip = 0) {
+      const data = await fetchAddonsQuery<
+        TagsData,
+        { isCategory: boolean; skip: number }
+      >(
+        gql`
+          query TagNames($isCategory: Boolean!, $skip: Int!) {
+            tags(isCategory: $isCategory, limit: 30, skip: $skip) {
+              name
             }
-          `,
-          {
-            variables: { isCategory: Boolean(isCategory), skip },
-          },
-        );
-
-        validateResponse(() => data?.tags);
+          }
+        `,
+        {
+          variables: { isCategory: Boolean(isCategory), skip },
+        },
+      );
 
-        const { tags } = data;
+      validateResponse(() => data?.tags);
 
-        value = [...value, ...tags.map(({ name }) => name)];
+      const { tags } = data;
 
-        if (tags.length > 0) await fetchPartialData(skip + tags.length);
+      value = [...value, ...tags.map(({ name }) => name)];
 
-        return value;
-      }
+      if (tags.length > 0) await fetchPartialData(skip + tags.length);
 
+      return value;
+    }
+    try {
       return await fetchPartialData();
     } catch (error) {
-      // @ts-expect-error - Seems safe
-      throw new Error(`Failed to fetch addons data: ${error.message}`);
+      throw new Error(
+        `Failed to fetch addons data: ${(error as Error).message}`,
+      );
     }
   }
 
@@ -108,12 +108,12 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
     if (!name) throw new Error('Addon name is missing');
     return { loc: `https://storybook.js.org/addons/${name}` };
   });
-  const tagAndCategoryPaths = [...categories, ...tags].map((name, i) => {
+  const tagAndCategoryPaths = [...categories, ...tags].map((name) => {
     if (!name) throw new Error('Tag name is missing');
     return { loc: `https://storybook.js.org/addons/tag/${name}` };
   });
 
-  const urls = [...addonPaths, ...tagAndCategoryPaths].map(({ loc }, i) => {
+  const urls = [...addonPaths, ...tagAndCategoryPaths].map(({ loc }) => {
     const encoded = loc
       .replace('&', '&amp;')
       .replace('<', '&lt;')

diff --git a/apps/frontpage/app/blog/sitemap.ts b/apps/frontpage/app/blog/sitemap.ts
@@ -2,16 +2,11 @@ import { type MetadataRoute } from 'next';
 import { fetchExternalSitemap } from '../../lib/fetch-external-sitemap';
 
 export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
-  try {
-    const { sites, error } = await fetchExternalSitemap(
-      'https://storybook.js.org/blog/sitemap/sitemap-0.xml',
-    );
+  const { sites, error } = await fetchExternalSitemap(
+    'https://storybook.js.org/blog/sitemap/sitemap-0.xml',
+  );
 
-    if (error) throw new Error(error);
+  if (error) throw new Error(error);
 
-    return sites;
-  } catch (error: any) {
-    console.log(error.message || 'Error fetching sitemap');
-    throw error;
-  }
+  return sites;
 }
diff --git a/apps/frontpage/app/docs-all/sitemap.ts b/apps/frontpage/app/docs-all/sitemap.ts
@@ -33,7 +33,7 @@ export default function sitemap(): MetadataRoute.Sitemap {
     url:
       version.id === latestVersion.id
         ? 'https://storybook.js.org/docs'
-        : `https://storybook.js.org/docs/${version.inSlug || version.id}`,
+        : `https://storybook.js.org/docs/${version.inSlug ?? version.id}`,
   }));
 
   return [

diff --git a/apps/frontpage/app/docs/[...slug]/page.tsx b/apps/frontpage/app/docs/[...slug]/page.tsx
@@ -24,15 +24,16 @@ export async function generateMetadata({
     filterDrafts: false,
     filterSecondLevelDirectories: false,
   });
+  const newSlug = slug ?? [];
   const findPage = flatTree.find(
-    (node) => node.slug === `/docs/${slug?.join('/')}`,
+    (node) => node.slug === `/docs/${newSlug.join('/')}`,
   );
 
   const slugToFetch = slug ? [...slug] : [];
   const page = await getPageData(slugToFetch, activeVersion);
 
   return {
-    title: `${page?.title || 'Docs'} | Storybook`,
+    title: `${page?.title ?? 'Docs'} | Storybook`,
     alternates: {
       canonical: findPage?.canonical,
     },
@@ -66,11 +67,12 @@ export default async function Page({ params: { slug } }: PageProps) {
   const slugToFetch = slug ? [...slug] : [];
   if (!isLatest) slugToFetch.shift();
   slugToFetch.unshift(activeVersion.id);
+  const newSlug = slug ?? [];
 
   const page = await getPageData(slugToFetch, activeVersion);
 
   const isIndex = slug && slug[slug.length - 1] === 'index';
-  const pathWithoutIndex = `/docs/${slug?.slice(0, -1).join('/')}`;
+  const pathWithoutIndex = `/docs/${newSlug.slice(0, -1).join('/')}`;
 
   // If the page is an index page, redirect to the parent page
   if (isIndex) redirect(pathWithoutIndex);

diff --git a/apps/frontpage/app/docs/layout.tsx b/apps/frontpage/app/docs/layout.tsx
@@ -12,7 +12,7 @@ import { getAllTrees } from '../../lib/get-all-trees';
 import { DocsProvider } from './provider';
 import { RendererCookie } from './renderer-cookie';
 
-export async function generateMetadata(): Promise<Metadata> {
+export function generateMetadata(): Metadata {
   return {
     title: 'Docs | Storybook',
   };
@@ -38,7 +38,7 @@ export default async function Layout({ children }: { children: ReactNode }) {
       />
       <Image
         alt="Storybook Docs"
-        className="absolute left-0 top-0 -z-10 w-full"
+        className="absolute top-0 left-0 w-full -z-10"
         height={339}
         priority
         src="/bubbles.png"

diff --git a/apps/frontpage/app/docs/page.tsx b/apps/frontpage/app/docs/page.tsx
@@ -5,7 +5,7 @@ import { type Metadata } from 'next';
 import { getPageData } from '../../lib/get-page';
 import { Content } from '../../components/docs/content';
 
-export async function generateMetadata(): Promise<Metadata> {
+export function generateMetadata(): Metadata {
   return {
     alternates: {
       canonical: '/docs',

diff --git a/apps/frontpage/app/docs/provider.tsx b/apps/frontpage/app/docs/provider.tsx
@@ -4,7 +4,6 @@ import { languages, packageManagers, renderers } from '@repo/utils';
 import { getCookie, setCookie } from 'cookies-next';
 import type { ReactNode } from 'react';
 import { createContext, useContext, useEffect, useState } from 'react';
-import { useSearchParams } from 'next/navigation';
 import {
   cookieLanguageId,
   cookiePackageManagerId,

diff --git a/apps/frontpage/app/docs/renderer-cookie.tsx b/apps/frontpage/app/docs/renderer-cookie.tsx
@@ -19,6 +19,7 @@ export const RendererCookie = () => {
         setRenderer(rendererParam);
       }
     }
-  }, [rendererParam]);
+  }, [rendererParam, setRenderer]);
+
   return null;
 };
diff --git a/apps/frontpage/app/docs/sitemap.ts b/apps/frontpage/app/docs/sitemap.ts
@@ -8,7 +8,7 @@ export default function sitemap(): MetadataRoute.Sitemap {
 
   // Generate docs tree for the latest version only
   const listOfTrees = getAllTrees();
-  const tree = listOfTrees.find((tree) => tree.name === latestVersion.id);
+  const tree = listOfTrees.find((t) => t.name === latestVersion.id);
 
   // We flatten the tree
   const flatTree = tree?.children && getFlatTree({ tree: tree?.children });

diff --git a/apps/frontpage/app/recipes/[...name]/page.tsx b/apps/frontpage/app/recipes/[...name]/page.tsx
@@ -51,7 +51,7 @@ export default async function RecipeDetails({ params }: RecipeDetailsProps) {
       <Container className="mb-16">
         <SubHeader leftLabel="Back to integrations" leftHref="/addons" />
         <div className="mx-auto flex max-w-[1024px] flex-col items-center justify-center pb-20">
-          <div className="mb-8 flex gap-10">
+          <div className="flex gap-10 mb-8">
             <div className="flex h-20 w-20 items-center justify-center rounded-lg bg-[#ff4785]">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -65,22 +65,22 @@ export default async function RecipeDetails({ params }: RecipeDetailsProps) {
                   d="M7 2.111a2.413 2.413 0 0 0-2.26 2.5l1.486 39.62a2.413 2.413 0 0 0 2.304 2.32l32.213 1.447.108.002a2.413 2.413 0 0 0 2.413-2.413V2.413A2.413 2.413 0 0 0 40.7.004l-2.649.167.194 5.539a.36.36 0 0 1-.583.295l-1.784-1.406-2.114 1.603a.36.36 0 0 1-.577-.302l.226-5.44L7.001 2.111Zm27.441 16.276c-.849.66-7.173 1.11-7.173.17.134-3.582-1.47-3.739-2.361-3.739-.847 0-2.273.256-2.273 2.175 0 1.956 2.084 3.06 4.53 4.356 3.474 1.841 7.678 4.07 7.678 9.677 0 5.374-4.366 8.342-9.935 8.342-5.748 0-10.77-2.325-10.204-10.387.223-.947 7.53-.722 7.53 0-.089 3.327.669 4.305 2.584 4.305 1.47 0 2.14-.81 2.14-2.175 0-2.066-2.172-3.284-4.67-4.687-3.38-1.898-7.36-4.133-7.36-9.26 0-5.118 3.52-8.53 9.801-8.53 6.283 0 9.713 3.36 9.713 9.753Z"
                   fillRule="evenodd"
                   fill="#fff"
-                 />
+                />
               </svg>
             </div>
             <div
-              className="flex h-20 w-20 items-center justify-center rounded-lg"
-              style={{ backgroundColor: metadata?.accentColor || '#ff4785' }}
+              className="flex items-center justify-center w-20 h-20 rounded-lg"
+              style={{ backgroundColor: metadata?.accentColor ?? '#ff4785' }}
             >
               <Image
-                src={metadata?.icon || ''}
-                alt={metadata?.name || ''}
+                src={metadata?.icon ?? ''}
+                alt={metadata?.name ?? ''}
                 width={48}
                 height={48}
               />
             </div>
           </div>
-          <h1 className="mb-4 text-center text-4xl font-bold">
+          <h1 className="mb-4 text-4xl font-bold text-center">
             Integrate {metadata?.displayName} with Storybook
           </h1>
           <div className="mb-6 max-w-[640px] text-center text-2xl text-zinc-500">
@@ -96,23 +96,27 @@ export default async function RecipeDetails({ params }: RecipeDetailsProps) {
             />
           </div>
           <div className="w-[250px] flex-shrink-0">
-            <div className="mb-6 flex items-center text-sm font-bold">Tags</div>
-            <ul className="mb-6 flex flex-wrap gap-2">
-              {metadata?.tags?.map((tag) => <Pill>{tag.name}</Pill>)}
+            <div className="flex items-center mb-6 text-sm font-bold">Tags</div>
+            <ul className="flex flex-wrap gap-2 mb-6">
+              {metadata?.tags?.map((tag) => (
+                <Pill key={tag.name}>{tag.name}</Pill>
+              ))}
             </ul>
-            <div className="mb-4 flex items-center py-2 text-sm font-bold">
+            <div className="flex items-center py-2 mb-4 text-sm font-bold">
               Contributors
             </div>
-            <ul className="mb-6 flex flex-col gap-4">
+            <ul className="flex flex-col gap-4 mb-6">
               {metadata?.authors?.map((author) => (
                 <li className="flex items-center gap-2" key={author.username}>
-                  {author.gravatarUrl ? <div className="relative h-7 w-7 overflow-hidden rounded-full">
+                  {author.gravatarUrl ? (
+                    <div className="relative overflow-hidden rounded-full h-7 w-7">
                       <Image
                         src={`https:${author.gravatarUrl}`}
                         alt={author.username}
                         fill
                       />
-                    </div> : null}
+                    </div>
+                  ) : null}
                   {author.username}
                 </li>
               ))}

diff --git a/apps/frontpage/app/releases/[slug]/page.tsx b/apps/frontpage/app/releases/[slug]/page.tsx
@@ -39,7 +39,7 @@ export default async function Page({ params: { slug } }: PageProps) {
         <main>
           <Sidebar>
             <DocsMainNav />
-            <div className="mt-4 flex flex-col border-t border-zinc-200 pt-4">
+            <div className="flex flex-col pt-4 mt-4 border-t border-zinc-200">
               {releases
                 .sort((a, b) => b.localeCompare(a))
                 .map((release) => (
@@ -56,9 +56,9 @@ export default async function Page({ params: { slug } }: PageProps) {
                 ))}
             </div>
           </Sidebar>
-          <article className="w-full max-w-3xl flex-1 py-12">
-            <h1 className="mb-6 mt-0 text-4xl font-bold">
-              {page?.frontmatter.title || 'Page Not Found'}
+          <article className="flex-1 w-full max-w-3xl py-12">
+            <h1 className="mt-0 mb-6 text-4xl font-bold">
+              {page?.frontmatter.title ?? 'Page Not Found'}
             </h1>
             {page?.content}
             <ReleaseNewsletter />

diff --git a/apps/frontpage/app/releases/iframe/[slug]/page.tsx b/apps/frontpage/app/releases/iframe/[slug]/page.tsx
@@ -24,9 +24,9 @@ export default async function Home({ params: { slug } }: HomeProps) {
   const page = await getRelease(slug);
 
   return (
-    <article className="w-full max-w-4xl mx-auto px-4 lg:px-8 my-10">
-      <h1 className="text-4xl mt-0 mb-6 font-bold">
-        {page?.frontmatter.title || 'Page Not Found'}
+    <article className="w-full max-w-4xl px-4 mx-auto my-10 lg:px-8">
+      <h1 className="mt-0 mb-6 text-4xl font-bold">
+        {page?.frontmatter.title ?? 'Page Not Found'}
       </h1>
       {page?.content}
       <ReleaseNewsletter />

diff --git a/apps/frontpage/app/releases/sitemap.ts b/apps/frontpage/app/releases/sitemap.ts
@@ -1,7 +1,7 @@
 import { type MetadataRoute } from 'next';
 import { getReleases } from '../../lib/get-releases';
 
-export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+export default function sitemap(): MetadataRoute.Sitemap {
   const releases = getReleases();
 
   return releases.map((name) => ({