feat(layout): Refractoring

apps/site/app/[locale]/error.tsx

@@ -6,31 +6,26 @@ import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
 import Button from '@/components/Common/Button';
-import GlowingBackdrop from '@/components/Common/GlowingBackdrop';
-import CenteredLayout from '@/layouts/Centered';
+import GlowingBackdropLayout from '@/layouts/GlowingBackdrop';
 
 const ErrorPage: FC<{ error: Error }> = ({ error }) => {
   captureException(error);
   const t = useTranslations();
 
   return (
-    <CenteredLayout>
-      <GlowingBackdrop />
-
-      <main>
-        500
-        <h1 className="special -mt-4 text-center">
-          {t('layouts.error.internalServerError.title')}
-        </h1>
-        <p className="-mt-4 max-w-sm text-center text-lg">
-          {t('layouts.error.internalServerError.description')}
-        </p>
-        <Button href="/">
-          {t('layouts.error.backToHome')}
-          <ArrowRightIcon />
-        </Button>
-      </main>
-    </CenteredLayout>
+    <GlowingBackdropLayout>
+      500
+      <h1 className="special -mt-4 text-center">
+        {t('layouts.error.internalServerError.title')}
+      </h1>
+      <p className="-mt-4 max-w-sm text-center text-lg">
+        {t('layouts.error.internalServerError.description')}
+      </p>
+      <Button href="/">
+        {t('layouts.error.backToHome')}
+        <ArrowRightIcon />
+      </Button>
+    </GlowingBackdropLayout>
   );
 };
 

apps/site/app/[locale]/not-found.tsx

@@ -6,40 +6,35 @@ import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
 import Button from '@/components/Common/Button';
-import GlowingBackdrop from '@/components/Common/GlowingBackdrop';
-import CenteredLayout from '@/layouts/Centered';
+import GlowingBackdropLayout from '@/layouts/GlowingBackdrop';
 
 const NotFoundPage: FC = () => {
   const t = useTranslations();
 
   return (
-    <CenteredLayout>
-      <GlowingBackdrop />
-
-      <main>
-        404
-        <h1 className="special -mt-4 text-center">
-          {t('layouts.error.notFound.title')}
-        </h1>
-        <div className="my-4 flex h-[150px] items-center justify-center md:h-[300px]">
-          <div className="turtle motion-safe:animate-surf motion-reduce:animate-none">
-            <Image
-              src="/static/images/node-mascot.svg"
-              alt="The Node.js mascot"
-              height={114.69}
-              width={100}
-            />
-          </div>
+    <GlowingBackdropLayout>
+      404
+      <h1 className="special -mt-4 text-center">
+        {t('layouts.error.notFound.title')}
+      </h1>
+      <div className="my-4 flex h-[150px] items-center justify-center md:h-[300px]">
+        <div className="turtle motion-safe:animate-surf motion-reduce:animate-none">
+          <Image
+            src="/static/images/node-mascot.svg"
+            alt="The Node.js mascot"
+            height={114.69}
+            width={100}
+          />
         </div>
-        <p className="-mt-4 max-w-sm text-center text-lg">
-          {t('layouts.error.notFound.description')}
-        </p>
-        <Button href="/">
-          {t('layouts.error.backToHome')}
-          <ArrowRightIcon />
-        </Button>
-      </main>
-    </CenteredLayout>
+      </div>
+      <p className="-mt-4 max-w-sm text-center text-lg">
+        {t('layouts.error.notFound.description')}
+      </p>
+      <Button href="/">
+        {t('layouts.error.backToHome')}
+        <ArrowRightIcon />
+      </Button>
+    </GlowingBackdropLayout>
   );
 };
 

apps/site/app/global-error.tsx

@@ -5,9 +5,8 @@ import { captureException } from '@sentry/nextjs';
 import type { FC } from 'react';
 
 import Button from '@/components/Common/Button';
-import GlowingBackdrop from '@/components/Common/GlowingBackdrop';
 import BaseLayout from '@/layouts/Base';
-import CenteredLayout from '@/layouts/Centered';
+import GlowingBackdropLayout from '@/layouts/GlowingBackdrop';
 
 const GlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
   captureException(error);
@@ -16,23 +15,17 @@ const GlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
     <html>
       <body>
         <BaseLayout>
-          <CenteredLayout>
-            <GlowingBackdrop />
-
-            <main>
-              500
-              <h1 className="special -mt-4 text-center">
-                Internal Server Error
-              </h1>
-              <p className="-mt-4 max-w-sm text-center text-lg">
-                This page has thrown a non-recoverable error.
-              </p>
-              <Button href="/">
-                Back to Home
-                <ArrowRightIcon />
-              </Button>
-            </main>
-          </CenteredLayout>
+          <GlowingBackdropLayout>
+            500
+            <h1 className="special -mt-4 text-center">Internal Server Error</h1>
+            <p className="-mt-4 max-w-sm text-center text-lg">
+              This page has thrown a non-recoverable error.
+            </p>
+            <Button href="/">
+              Back to Home
+              <ArrowRightIcon />
+            </Button>
+          </GlowingBackdropLayout>
         </BaseLayout>
       </body>
     </html>

apps/site/components/withLayout.tsx

@@ -1,24 +1,26 @@
 import type { FC, PropsWithChildren } from 'react';
 
 import AboutLayout from '@/layouts/About';
+import ArticlePageLayout from '@/layouts/ArticlePage';
 import BlogLayout from '@/layouts/Blog';
 import DefaultLayout from '@/layouts/Default';
 import DownloadLayout from '@/layouts/Download';
-import HomeLayout from '@/layouts/Home';
+import GlowingBackdropLayout from '@/layouts/GlowingBackdrop';
 import LearnLayout from '@/layouts/Learn';
 import PostLayout from '@/layouts/Post';
 import SearchLayout from '@/layouts/Search';
 import type { Layouts } from '@/types';
 
 const layouts = {
   about: AboutLayout,
-  home: HomeLayout,
+  home: props => <GlowingBackdropLayout kind="home" {...props} />,
   learn: LearnLayout,
   page: DefaultLayout,
   'blog-post': PostLayout,
   'blog-category': BlogLayout,
   search: SearchLayout,
   download: DownloadLayout,
+  article: ArticlePageLayout,
 } satisfies Record<Layouts, FC>;
 
 type WithLayoutProps<L = Layouts> = PropsWithChildren<{ layout: L }>;

apps/site/layouts/ArticlePage.tsx

@@ -0,0 +1,24 @@
+import type { FC, PropsWithChildren } from 'react';
+
+import WithMetaBar from '@/components/withMetaBar';
+import WithNavBar from '@/components/withNavBar';
+import WithSidebar from '@/components/withSidebar';
+import ArticleLayout from '@/layouts/Article';
+
+const ArticlePageLayout: FC<PropsWithChildren> = ({ children }) => (
+  <>
+    <WithNavBar />
+
+    <ArticleLayout>
+      <WithSidebar navKeys={[]} />
+
+      <div>
+        <main>{children}</main>
+
+        <WithMetaBar />
+      </div>
+    </ArticleLayout>
+  </>
+);
+
+export default ArticlePageLayout;

apps/site/layouts/Centered.tsx

@@ -1,18 +0,0 @@
-import type { FC, PropsWithChildren } from 'react';
-
-import WithFooter from '@/components/withFooter';
-import WithNavBar from '@/components/withNavBar';
-
-import styles from './layouts.module.css';
-
-const CenteredLayout: FC<PropsWithChildren> = ({ children }) => (
-  <>
-    <WithNavBar />
-
-    <div className={styles.centeredLayout}>{children}</div>
-
-    <WithFooter />
-  </>
-);
-
-export default CenteredLayout;

apps/site/layouts/GlowingBackdrop.tsx

@@ -0,0 +1,35 @@
+import classNames from 'classnames';
+import type { FC, PropsWithChildren } from 'react';
+
+import GlowingBackdrop from '@/components/Common/GlowingBackdrop';
+import WithFooter from '@/components/withFooter';
+import WithNavBar from '@/components/withNavBar';
+
+import styles from './layouts.module.css';
+
+type GlowingBackdropLayoutProps = PropsWithChildren<{
+  kind?: 'home';
+}>;
+
+const GlowingBackdropLayout: FC<GlowingBackdropLayoutProps> = ({
+  kind,
+  children,
+}) => (
+  <>
+    <WithNavBar />
+    <div className={styles.centeredLayout}>
+      <GlowingBackdrop />
+
+      <main
+        className={classNames({
+          [styles.homeLayout]: kind === 'home',
+        })}
+      >
+        {children}
+      </main>
+    </div>
+    <WithFooter />
+  </>
+);
+
+export default GlowingBackdropLayout;

apps/site/layouts/Post.tsx

@@ -7,7 +7,6 @@ import WithFooter from '@/components/withFooter';
 import WithMetaBar from '@/components/withMetaBar';
 import WithNavBar from '@/components/withNavBar';
 import { useClientContext } from '@/hooks/react-server';
-import ContentLayout from '@/layouts/Content';
 import {
   mapAuthorToCardAuthors,
   mapBlogCategoryToPreviewType,
@@ -26,7 +25,7 @@ const PostLayout: FC<PropsWithChildren> = ({ children }) => {
     <>
       <WithNavBar />
 
-      <ContentLayout>
+      <div className={styles.contentLayout}>
         <div className={styles.postLayout}>
           <main>
             <h1>{frontmatter.title}</h1>
@@ -51,7 +50,7 @@ const PostLayout: FC<PropsWithChildren> = ({ children }) => {
         </div>
 
         <WithMetaBar />
-      </ContentLayout>
+      </div>
 
       <WithFooter />
     </>

apps/site/pages/en/download/package-manager/all.md

@@ -1,42 +1,12 @@
 ---
-layout: download
+layout: article
 title: Installing Node.js via package manager
 ---
 
 # Installing Node.js via Package Managers
 
 > The packages on this page are maintained and supported by their respective packagers, **not** the Node.js core team. Please report any issues you encounter to the package maintainer. If it turns out your issue is a bug in Node.js itself, the maintainer will report the issue upstream.
 
----
-
-- [Alpine Linux](#alpine-linux)
-- [Android](#android)
-- [Arch Linux](#arch-linux)
-- [CentOS, Fedora and Red Hat Enterprise Linux](#centos-fedora-and-red-hat-enterprise-linux)
-- [Debian and Ubuntu based Linux distributions](#debian-and-ubuntu-based-linux-distributions)
-- [Exherbo Linux](#exherbo-linux)
-- [fnm](#fnm)
-- [FreeBSD](#freebsd)
-- [Gentoo](#gentoo)
-- [IBM i](#ibm-i)
-- [macOS](#macos)
-- [n](#n)
-- [NetBSD](#netbsd)
-- [Nodenv](#nodenv)
-- [nvm](#nvm)
-- [nvs](#nvs)
-- [OpenBSD](#openbsd)
-- [openSUSE and SLE](#opensuse-and-sle)
-- [SmartOS and illumos](#smartos-and-illumos)
-- [Snap](#snap)
-- [Solus](#solus)
-- [vfox](#vfox)
-- [Void Linux](#void-linux)
-- [Windows](#windows-1)
-- [z/OS](#zos)
-
----
-
 ## Alpine Linux
 
 Node.js LTS and npm packages are available in the Main Repository.

apps/site/types/layouts.ts

@@ -6,4 +6,5 @@ export type Layouts =
   | 'blog-category'
   | 'blog-post'
   | 'search'
-  | 'download';
+  | 'download'
+  | 'article';