Skip to content

Commit

Permalink
feat(layout): Refractoring (nodejs#6929)
Browse files Browse the repository at this point in the history
* feat(layout): introduce SimplePage

* feat(layout): refractoring

* fix: flex col ≠ flex row
  • Loading branch information
AugustinMauroy authored Oct 10, 2024
1 parent 6360223 commit f116efe
Show file tree
Hide file tree
Showing 12 changed files with 117 additions and 146 deletions.
33 changes: 14 additions & 19 deletions apps/site/app/[locale]/error.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
};

Expand Down
51 changes: 23 additions & 28 deletions apps/site/app/[locale]/not-found.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
};

Expand Down
31 changes: 12 additions & 19 deletions apps/site/app/global-error.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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>
Expand Down
6 changes: 4 additions & 2 deletions apps/site/components/withLayout.tsx
Original file line number Diff line number Diff line change
@@ -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 }>;
Expand Down
24 changes: 24 additions & 0 deletions apps/site/layouts/ArticlePage.tsx
Original file line number Diff line number Diff line change
@@ -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;
18 changes: 0 additions & 18 deletions apps/site/layouts/Centered.tsx
Original file line number Diff line number Diff line change
@@ -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;
9 changes: 0 additions & 9 deletions apps/site/layouts/Content.tsx

This file was deleted.

35 changes: 35 additions & 0 deletions apps/site/layouts/GlowingBackdrop.tsx
Original file line number Diff line number Diff line change
@@ -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;
16 changes: 0 additions & 16 deletions apps/site/layouts/Home.tsx

This file was deleted.

5 changes: 2 additions & 3 deletions apps/site/layouts/Post.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -26,7 +25,7 @@ const PostLayout: FC<PropsWithChildren> = ({ children }) => {
<>
<WithNavBar />

<ContentLayout>
<div className={styles.contentLayout}>
<div className={styles.postLayout}>
<main>
<h1>{frontmatter.title}</h1>
Expand All @@ -51,7 +50,7 @@ const PostLayout: FC<PropsWithChildren> = ({ children }) => {
</div>

<WithMetaBar />
</ContentLayout>
</div>

<WithFooter />
</>
Expand Down
32 changes: 1 addition & 31 deletions apps/site/pages/en/download/package-manager/all.md
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
3 changes: 2 additions & 1 deletion apps/site/types/layouts.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,5 @@ export type Layouts =
| 'blog-category'
| 'blog-post'
| 'search'
| 'download';
| 'download'
| 'article';

0 comments on commit f116efe

Please sign in to comment.