diff --git a/.storybook/constants.ts b/.storybook/constants.ts index 71dc10f42560a..46ee4053fa87e 100644 --- a/.storybook/constants.ts +++ b/.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', -}); diff --git a/.storybook/main.ts b/.storybook/main.ts index 8d3db12e56530..e559e3a2fed19 100644 --- a/.storybook/main.ts +++ b/.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 = { diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index dcc92a433159d..7988925b9793f 100644 --- a/.storybook/preview.tsx +++ b/.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 = { diff --git a/app/[locale]/[[...path]]/page.tsx b/app/[locale]/[[...path]]/page.tsx index ef38907098b8c..3c4aac114dbbb 100644 --- a/app/[locale]/[[...path]]/page.tsx +++ b/app/[locale]/[[...path]]/page.tsx @@ -95,15 +95,27 @@ const getPage: FC = 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 ( - + diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx index 61fdfd82e8b24..79edc0da1e014 100644 --- a/app/[locale]/layout.tsx +++ b/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 = async ({ children }) => { const locale = await getLocale(); const { langDir, hrefLang } = availableLocalesMap[locale] || defaultLocale; return ( - + - {children} + {children} diff --git a/client-context.ts b/client-context.ts index 27750981b6d9a..3abe1d0082cb6 100644 --- a/client-context.ts +++ b/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; }; diff --git a/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css b/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css index 91747b6ebaa11..d82fa364b5b8f 100644 --- a/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css +++ b/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 diff --git a/components/Common/Breadcrumbs/index.tsx b/components/Common/Breadcrumbs/index.tsx index 512e89c279809..9e05c0b7e7d36 100644 --- a/components/Common/Breadcrumbs/index.tsx +++ b/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 = ({ return (