feat: introduced home layout (#6214)

* fix: fix codebox tabs and copy button

* chore: normalize export of withCurrentOS

* chore: normalized layout types and layout connector

* fix: fixed codetabs styles

* feat: download button component

* chore: mdx codetabs with external link

* feat: home page layout

* fix: base-layout without overflow hidden

* chore: tailwind changes

* feat: shiki and highlighter changes

* chore: website redesign route rewrite

* fix: markdown styles

* chore: banner and badge on home

* fix: fixed types and code

* chore: fixed rewrites

* chore: rephrase text

* chore: design fixes and removed bloat

* chore: revert site.json test changes

* chore: tailwind fixes

* chore: make default layout more organised

* chore: more design fixes

* chore: use css modules

* refactor: styling updates

* refactor: feedbacks from review

* chore: some fixes and formatting

* Update next.rewrites.mjs

Co-authored-by: Brian Muenzenmeyer <[email protected]>
Signed-off-by: Claudio W <[email protected]>

* fix: numerous accessibility issues

* feat(styles): use `size` instead of `h` and `w`

* fix: codebox accessible comment color

* docs: color replacements on shikiji

* fix: fixed mdxcontent css priority

* fix: link component href and types

* refactor: button to be an anchor element

* fix: minor css fixes

* fix: fixed tests for button

* fix: button text always centered

---------

Signed-off-by: Claudio W <[email protected]>
Co-authored-by: Caner Akdas <[email protected]>
Co-authored-by: Brian Muenzenmeyer <[email protected]>
Co-authored-by: Augustin Mauroy <[email protected]>

Author: 4 people

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

@@ -5,7 +5,7 @@ import type { FC } from 'react';
 
 import { setClientContext } from '@/client-context';
 import { MDXRenderer } from '@/components/mdxRenderer';
-import { WithLayout } from '@/components/withLayout';
+import WithLayout from '@/components/withLayout';
 import { ENABLE_STATIC_EXPORT, VERCEL_REVALIDATE } from '@/next.constants.mjs';
 import { DEFAULT_VIEWPORT } from '@/next.dynamic.constants.mjs';
 import { dynamicRouter } from '@/next.dynamic.mjs';

app/[locale]/layout.tsx

@@ -42,7 +42,12 @@ const RootLayout: FC<PropsWithChildren> = async ({ children }) => {
           </ThemeProvider>
         </LocaleProvider>
 
-        <a rel="me" href="https://social.lfx.dev/@nodejs" />
+        <a
+          rel="me"
+          aria-hidden="true"
+          className="hidden"
+          href="https://social.lfx.dev/@nodejs"
+        />
 
         {VERCEL_ENV && (
           <>

components/Common/Breadcrumbs/BreadcrumbHomeLink/index.tsx

@@ -21,7 +21,7 @@ const BreadcrumbHomeLink: FC<BreadcrumbHomeLinkProps> = ({
   const navigateToHome = t('components.common.breadcrumbs.navigateToHome');
 
   return (
-    <BreadcrumbLink href={href} {...props}>
+    <BreadcrumbLink href={href} aria-label={navigateToHome} {...props}>
       <HomeIcon
         title={navigateToHome}
         aria-label={navigateToHome}

components/Common/Breadcrumbs/BreadcrumbLink/index.tsx

@@ -18,7 +18,7 @@ const BreadcrumbLink: FC<BreadcrumbLinkProps> = ({
     itemScope
     itemType="http://schema.org/Thing"
     itemProp="item"
-    itemID={href.toString()}
+    itemID={href?.toString()}
     href={href}
     className={classNames(
       styles.link,

components/Common/Breadcrumbs/index.tsx

@@ -1,4 +1,3 @@
-import { type LinkProps } from 'next/link';
 import { useMemo, type FC } from 'react';
 
 import BreadcrumbHomeLink from '@/components/Common/Breadcrumbs/BreadcrumbHomeLink';
@@ -10,7 +9,7 @@ import type { FormattedMessage } from '@/types';
 
 type BreadcrumbLink = {
   label: FormattedMessage;
-  href: LinkProps['href'];
+  href: string | undefined;
 };
 
 type BreadcrumbsProps = {

components/Common/Button/index.module.css

@@ -1,94 +1,94 @@
-@import '../../../styles/new/mixins';
-
 .button {
   @apply relative
-   px-4.5
-   py-2.5
-   font-semibold;
+    px-4.5
+    py-2.5
+    text-center
+    font-semibold;
 
   &.primary {
     @apply rounded
-     border
-     border-green-600
-     bg-green-600
-     text-white
-     shadow-sm;
+      border
+      border-green-600
+      bg-green-600
+      text-white
+      shadow-sm;
 
     &:hover {
       @apply border-green-700
-       bg-green-700;
+        bg-green-700
+        text-white;
     }
 
     &:focus {
       @apply border-green-700
-       bg-green-700;
+        bg-green-700;
     }
 
-    &:disabled {
+    &[aria-disabled='true'] {
       @apply bg-green-600
-       opacity-50;
+        opacity-50;
     }
   }
 
   &.secondary {
     @apply rounded-lg
-     text-neutral-800
-     dark:text-neutral-200/100;
+      text-neutral-800
+      dark:text-neutral-200;
 
     &:hover {
       @apply bg-neutral-100
-       text-neutral-800
-       dark:bg-neutral-900
-       dark:text-neutral-200;
+        text-neutral-800
+        dark:bg-neutral-900
+        dark:text-neutral-200;
     }
 
-    &:disabled {
-      @apply bg-neutral-100/0
+    &[aria-disabled='true'] {
+      @apply bg-transparent
         opacity-50;
     }
 
     &:focus {
       @apply bg-neutral-100
-       text-neutral-800
-       dark:bg-neutral-900
-       dark:text-neutral-200;
+        text-neutral-800
+        dark:bg-neutral-900
+        dark:text-neutral-200;
     }
   }
 
   &.special {
     @apply rounded-lg
-     border
-     border-green-600/30
-     bg-green-600/10
-     text-white
-     shadow-sm;
+      border
+      border-green-600/30
+      bg-green-600/10
+      text-white
+      shadow-sm;
 
     &::before {
       @apply absolute
-       right-0
-       top-0
-       z-[-1]
-       h-full
-       w-full
-       opacity-30;
-
-      @mixin glow-backdrop 8em, theme(colors.green.500);
-
-      content: '';
+        right-0
+        top-0
+        -z-10
+        h-full
+        w-full
+        bg-gradient-glow-backdrop
+        opacity-30
+        content-[''];
     }
 
     &::after {
       @apply absolute
-       right-0
-       top-[-1px]
-       h-px
-       w-[40%] bg-gradient-to-r from-green-600/0 via-green-600
-       to-green-600/0;
-
-      content: '';
+        -top-px
+        right-0
+        h-px
+        w-2/5
+        bg-gradient-to-r
+        from-green-600/0
+        via-green-600
+        to-green-600/0
+        content-[''];
     }
 
-    &:disabled {
+    &[aria-disabled='true'] {
       @apply opacity-50;
     }
 

components/Common/Button/index.stories.tsx

@@ -7,23 +7,23 @@ type Meta = MetaObj<typeof Button>;
 
 export const Primary: Story = {
   args: {
-    variant: 'primary',
+    kind: 'primary',
     children: 'Download Node (LTS)',
     disabled: false,
   },
 };
 
 export const Secondary: Story = {
   args: {
-    variant: 'secondary',
+    kind: 'secondary',
     children: 'Download Node (LTS)',
     disabled: false,
   },
 };
 
 export const Special: Story = {
   args: {
-    variant: 'special',
+    kind: 'special',
     children: 'Download Node (LTS)',
     disabled: false,
   },

components/Common/Button/index.tsx

@@ -1,24 +1,33 @@
 import classNames from 'classnames';
-import type { FC, ButtonHTMLAttributes } from 'react';
+import type { FC, AnchorHTMLAttributes } from 'react';
+
+import Link from '@/components/Link';
 
 import styles from './index.module.css';
 
-type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-  variant?: 'primary' | 'secondary' | 'special';
+type ButtonProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+  kind?: 'primary' | 'secondary' | 'special';
+  // We have an extra `disabled` prop as we simulate a button
+  disabled?: boolean;
 };
 
 const Button: FC<ButtonProps> = ({
-  variant = 'primary',
+  kind = 'primary',
+  disabled = false,
+  href = undefined,
   children,
   className,
   ...props
 }) => (
-  <button
-    className={classNames(styles.button, styles[variant], className)}
+  <Link
+    role="button"
+    href={disabled ? undefined : href}
+    aria-disabled={disabled}
+    className={classNames(styles.button, styles[kind], className)}
     {...props}
   >
     {children}
-  </button>
+  </Link>
 );
 
 export default Button;

components/Common/CodeBox/index.tsx

@@ -63,6 +63,7 @@ const CodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
   language,
   // For now we only want to render the Copy Button by default
   // if the Website Redesign is Enabled
+  // @todo remove this check once we migrate to website redesign
   showCopyButton = ENABLE_WEBSITE_REDESIGN,
 }) => {
   const ref = useRef<HTMLPreElement>(null);
@@ -98,7 +99,7 @@ const CodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
           <span className={styles.language}>{language}</span>
 
           {showCopyButton && (
-            <Button type="button" className={styles.action} onClick={onCopy}>
+            <Button className={styles.action} onClick={onCopy}>
               <DocumentDuplicateIcon className={styles.icon} />
               {t('components.common.codebox.copy')}
             </Button>

components/Common/CodeTabs/index.module.css

@@ -10,10 +10,10 @@
     border-neutral-900
     bg-neutral-950
     px-4
-    pr-5
-    pt-3;
+    pt-3
+    xs:px-2;
 
-  & [role='tab'] {
+  & [role='tablist'] > button {
     @apply border-b
       border-b-transparent
       px-1
@@ -24,27 +24,28 @@
         text-green-400;
     }
   }
-}
 
-.link {
-  @apply flex
-    items-center
-    gap-2
-    text-center
-    text-neutral-200;
+  .link {
+    @apply hidden
+      items-center
+      gap-2
+      text-center
+      text-neutral-200
+      lg:flex;
 
-  & > .icon {
-    @apply h-4
-      w-4
-      text-neutral-300;
-  }
+    & > .icon {
+      @apply h-4
+        w-4
+        text-neutral-300;
+    }
 
-  &:is(:link, :visited) {
-    &:hover {
-      @apply text-neutral-400;
+    &:is(:link, :visited) {
+      &:hover {
+        @apply text-neutral-400;
 
-      & > .icon {
-        @apply text-neutral-600;
+        & > .icon {
+          @apply text-neutral-600;
+        }
       }
     }
   }

components/Common/CodeTabs/index.tsx

@@ -6,14 +6,17 @@ import { Link } from '@/navigation.mjs';
 
 import styles from './index.module.css';
 
-type CodeTabsProps = Pick<
-  ComponentProps<typeof Tabs>,
-  'tabs' | 'onValueChange' | 'defaultValue'
-> & {
+export type CodeTabsExternaLink = {
   linkUrl?: string;
   linkText?: string;
 };
 
+type CodeTabsProps = Pick<
+  ComponentProps<typeof Tabs>,
+  'tabs' | 'onValueChange' | 'defaultValue'
+> &
+  CodeTabsExternaLink;
+
 const CodeTabs: FC<PropsWithChildren<CodeTabsProps>> = ({
   children,
   linkUrl,

components/Common/Pagination/__tests__/index.test.mjs

@@ -162,7 +162,7 @@ describe('Pagination', () => {
         screen.getByRole('button', {
           name: 'components.common.pagination.prevAriaLabel',
         })
-      ).toBeDisabled();
+      ).toHaveAttribute('aria-disabled');
     });
 
     it('Disables "Next" button when the currentPage is equal to the last page', () => {
@@ -175,7 +175,7 @@ describe('Pagination', () => {
         screen.getByRole('button', {
           name: 'components.common.pagination.nextAriaLabel',
         })
-      ).toBeDisabled();
+      ).toHaveAttribute('aria-disabled');
     });
   });
 });