feat: introduced base website redesign layouts (nodejs#6145)

* refactor: updated components to be functional for website redesign

* chore: hooks separate generic hooks

* chore: updated storybook previews for redesign

* chore: removed other languages as they will be translated on crowdin

* fix: updated base styles for redesign

* chore: updated types

* feat: added new layouts (base, and article layout) and related "providers"

* feat: updated mdx engine and shared context and app layouts

* meta: updated packages, navigation, tailwind config, etc

* chore: moved package to prod deps

* fix: mocked module

* chore: design fixes

* fix: last story fix

* meta: mismatch of lock file

* fix: fixed styles and minor content-wise bug fixes

* fix: home icon go home

* chore: home aria label

* chore: some minimum design fixes

* refactor: paddings merged

* refactor: footer top border added

* fix: contrast ratio on dark mode breadcrumb

* fix: colspan changed to 2 for missing border

* fix: old layout table heading

* refactor: gradient and shadow colors replaced with theme colors

* chore: moved the `with` components to `components`

* refactor: tw config alpha channel and xl content padding

---------

Co-authored-by: Caner Akdas <[email protected]>

.storybook/constants.ts

@@ -1,5 +1,3 @@
-import { Open_Sans, IBM_Plex_Mono } from 'next/font/google';
-
 // This defines "execution" modes that Chromatic will run on the each Storybook Story
 // This allows us to test each Story with different parameters
 // @see https://www.chromatic.com/blog/introducing-story-modes/
@@ -28,22 +26,3 @@ export const STORYBOOK_SIZES = {
   small: { name: 'Small', styles: { width: '414px', height: '896px' } },
   large: { name: 'Large', styles: { width: '1024px', height: '768px' } },
 };
-
-// This configures the Next.js Font for Open Sans
-// We then export a variable and class name to be used
-// within Tailwind (tailwind.config.ts) and Storybook (preview.js)
-export const OPEN_SANS_FONT = Open_Sans({
-  weight: ['300', '400', '600', '700'],
-  display: 'fallback',
-  subsets: ['latin'],
-  variable: '--font-open-sans',
-});
-
-// This configures the Next.js Font for IBM Plex Mono
-// We then export a variable and class name to be used
-// within Tailwind (tailwind.config.ts) and Storybook (preview.js)
-export const IBM_PLEX_MONO_FONT = IBM_Plex_Mono({
-  weight: ['600'],
-  subsets: ['latin'],
-  variable: '--font-ibm-plex-mono',
-});

.storybook/main.ts

@@ -5,12 +5,7 @@ const rootClasses = classNames(
   // note: this is hard-coded sadly as next/font can only be loaded within next.js context
   '__variable_open-sans-normal',
   // note: this is hard-coded sadly as next/font can only be loaded within next.js context
-  '__variable_ibm-plex-mono-normal-600',
-  'font-open-sans',
-  'bg-white',
-  'text-neutral-950',
-  'dark:bg-neutral-950',
-  'dark:text-white'
+  '__variable_ibm-plex-mono-normal-600'
 );
 
 const config: StorybookConfig = {

.storybook/preview.tsx

@@ -7,6 +7,7 @@ import type { Preview, ReactRenderer } from '@storybook/react';
 
 import englishLocale from '@/i18n/locales/en.json';
 
+import '../next.fonts';
 import '../styles/new/index.css';
 
 const preview: Preview = {

app/[locale]/[[...path]]/page.tsx

@@ -95,15 +95,27 @@ const getPage: FC<DynamicParams> = async ({ params }) => {
   if (source.length && filename.length) {
     // This parses the source Markdown content and returns a React Component and
     // relevant context from the Markdown File
-    const { MDXContent, frontmatter, headings } =
+    const { MDXContent, frontmatter, headings, readingTime } =
       await dynamicRouter.getMDXContent(source, filename);
 
+    // Metadata and shared Context to be available through the lifecycle of the page
+    const sharedContext = {
+      frontmatter,
+      headings,
+      pathname: `/${pathname}`,
+      readingTime,
+      filename,
+    };
+
     // Defines a shared Server Context for the Client-Side
     // That is shared for all pages under the dynamic router
-    setClientContext({ frontmatter, headings, pathname });
+    setClientContext(sharedContext);
 
+    // The Matter Provider allows Client-Side injection of the data
+    // to a shared React Client Provider even though the page is rendered
+    // within a server-side context
     return (
-      <MatterProvider matter={frontmatter} headings={headings}>
+      <MatterProvider {...sharedContext}>
         <WithLayout layout={frontmatter.layout}>
           <MDXRenderer Component={MDXContent} />
         </WithLayout>

app/[locale]/layout.tsx

@@ -1,33 +1,43 @@
 import { Analytics } from '@vercel/analytics/react';
-import { Source_Sans_3 } from 'next/font/google';
+import classNames from 'classnames';
 import { getLocale } from 'next-intl/server';
 import type { FC, PropsWithChildren } from 'react';
 
-import BaseLayout from '@/layouts/BaseLayout';
-import { VERCEL_ENV } from '@/next.constants.mjs';
+import LegacyBaseLayout from '@/layouts/BaseLayout';
+import NewBaseLayout from '@/layouts/New/Base';
+import { ENABLE_WEBSITE_REDESIGN, VERCEL_ENV } from '@/next.constants.mjs';
+import { IBM_PLEX_MONO, OPEN_SANS, SOURCE_SANS } from '@/next.fonts';
 import { availableLocalesMap, defaultLocale } from '@/next.locales.mjs';
 import { LocaleProvider } from '@/providers/localeProvider';
 import { ThemeProvider } from '@/providers/themeProvider';
 
-import '@/styles/old/index.css';
+// Uses a WebPack/TurboPack Alias for resolving Global Styles
+// @deprecated remove when website redesign is done
+// eslint-disable-next-line import/no-unresolved
+import 'globalStyles';
 
-const sourceSans = Source_Sans_3({
-  weight: ['400', '600'],
-  display: 'fallback',
-  subsets: ['latin'],
+// Defines the App Fonts based on being on Website Redesign or not
+// @deprecated remove when website redesign is done
+const fontClasses = classNames(IBM_PLEX_MONO.variable, {
+  [SOURCE_SANS.className]: !ENABLE_WEBSITE_REDESIGN,
+  [OPEN_SANS.variable]: ENABLE_WEBSITE_REDESIGN,
 });
 
+// Defines the Base Layout based on being on Website Redesign or not
+// @deprecated remove when website redesign is done
+const AppLayout = ENABLE_WEBSITE_REDESIGN ? NewBaseLayout : LegacyBaseLayout;
+
 const RootLayout: FC<PropsWithChildren> = async ({ children }) => {
   const locale = await getLocale();
 
   const { langDir, hrefLang } = availableLocalesMap[locale] || defaultLocale;
 
   return (
-    <html className={sourceSans.className} dir={langDir} lang={hrefLang}>
+    <html className={fontClasses} dir={langDir} lang={hrefLang}>
       <body suppressHydrationWarning>
         <LocaleProvider>
           <ThemeProvider>
-            <BaseLayout>{children}</BaseLayout>
+            <AppLayout>{children}</AppLayout>
           </ThemeProvider>
         </LocaleProvider>
 

client-context.ts

@@ -10,6 +10,8 @@ export const getClientContext = cache(() => {
     frontmatter: {},
     pathname: '',
     headings: [],
+    readingTime: { text: '', minutes: 0, time: 0, words: 0 },
+    filename: '',
   };
 
   return serverSharedContext;
@@ -21,4 +23,6 @@ export const setClientContext = (data: ClientSharedServerContext) => {
   getClientContext().frontmatter = data.frontmatter;
   getClientContext().pathname = data.pathname;
   getClientContext().headings = data.headings;
+  getClientContext().readingTime = data.readingTime;
+  getClientContext().filename = data.filename;
 };

components/Common/Breadcrumbs/BreadcrumbLink/index.module.css

@@ -5,7 +5,8 @@
       px-2
       py-1
       font-semibold
-      text-white;
+      text-white
+      dark:text-white;
 
     &:hover {
       @apply bg-green-700

components/Common/Breadcrumbs/index.tsx

@@ -6,9 +6,10 @@ import BreadcrumbItem from '@/components/Common/Breadcrumbs/BreadcrumbItem';
 import BreadcrumbLink from '@/components/Common/Breadcrumbs/BreadcrumbLink';
 import BreadcrumbRoot from '@/components/Common/Breadcrumbs/BreadcrumbRoot';
 import BreadcrumbTruncatedItem from '@/components/Common/Breadcrumbs/BreadcrumbTruncatedItem';
+import type { FormattedMessage } from '@/types';
 
 type BreadcrumbLink = {
-  label: string;
+  label: FormattedMessage;
   href: LinkProps['href'];
 };
 
@@ -38,7 +39,7 @@ const Breadcrumbs: FC<BreadcrumbsProps> = ({
 
         return (
           <BreadcrumbItem
-            key={link.href.toString()}
+            key={link.label.toString()}
             hidden={hidden}
             hideSeparator={isLastItem}
             position={position + +!hideHome}

components/Common/MetaBar/index.module.css

@@ -1,13 +1,21 @@
 .wrapper {
   @apply flex
-    w-80
     flex-col
     items-start
     gap-8
     border-l
-    border-neutral-200
-    p-6
-    dark:border-neutral-900;
+    border-l-neutral-200
+    px-4
+    py-6
+    dark:border-l-neutral-900
+    md:max-w-xs
+    lg:px-6
+    xs:mt-8
+    xs:w-full
+    xs:border-l-0
+    xs:border-t
+    xs:border-t-neutral-200
+    xs:dark:border-t-neutral-900;
 
   dt {
     @apply mb-2

components/Common/MetaBar/index.tsx

@@ -11,19 +11,19 @@ type MetaBarProps = {
   items: Record<string, React.ReactNode>;
   headings?: {
     items: Heading[];
-    depth?: number;
+    minDepth?: number;
   };
 };
 
 const MetaBar: FC<MetaBarProps> = ({ items, headings }) => {
   const t = useTranslations();
 
   // The default depth of headings to display in the table of contents.
-  const { depth = 2, items: headingItems = [] } = headings || {};
+  const { minDepth = 2, items: headingItems = [] } = headings || {};
 
   const heading = useMemo(
-    () => headingItems.filter(head => head.depth === depth),
-    [depth, headingItems]
+    () => headingItems.filter(({ depth }) => depth >= minDepth && depth <= 4),
+    [minDepth, headingItems]
   );
 
   return (
@@ -35,21 +35,20 @@ const MetaBar: FC<MetaBarProps> = ({ items, headings }) => {
             <dd>{value}</dd>
           </Fragment>
         ))}
+
         {heading.length > 0 && (
-          <Fragment key="tableOfContents">
+          <>
             <dt>{t('components.metabar.tableOfContents')}</dt>
             <dd>
               <ol>
                 {heading.map(head => (
                   <li key={head.value}>
-                    <Link href={`#${head?.data?.id || head.value}`}>
-                      {head.value}
-                    </Link>
+                    <Link href={`#${head?.data?.id}`}>{head.value}</Link>
                   </li>
                 ))}
               </ol>
             </dd>
-          </Fragment>
+          </>
         )}
       </dl>
     </div>

components/Containers/NavItem/index.stories.tsx → components/Common/NavItem/index.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import NavItem from '@/components/Containers/NavItem';
+import NavItem from '@/components/Common/NavItem';
 
 type Story = StoryObj<typeof NavItem>;
 type Meta = MetaObj<typeof NavItem>;

components/Containers/NavItem/index.tsx → components/Common/NavItem/index.tsx

@@ -31,6 +31,7 @@ const NavItem: FC<PropsWithChildren<NavItemProps>> = ({
       href={href}
       className={classNames(styles.navItem, styles[type], className)}
       activeClassName={styles.active}
+      allowSubPath
     >
       <span className={styles.label}>{children}</span>
       {showIcon && <ArrowUpRightIcon className={styles.icon} />}

components/Common/Select/index.module.css

@@ -5,14 +5,18 @@
     gap-1.5;
 
   .label {
-    @apply text-sm
+    @apply block
+      w-full
+      text-sm
       font-medium
       text-neutral-800
       dark:text-neutral-200;
   }
 
   .trigger {
     @apply inline-flex
+      h-11
+      w-full
       min-w-[17rem]
       items-center
       justify-between
@@ -97,7 +101,8 @@
 
 .inline {
   .trigger {
-    @apply min-w-fit
+    @apply h-auto
+      min-w-fit
       px-2.5
       py-2
       text-sm