Skip to content

Commit f116efe

Browse files
AugustinMauroyAugustinMauroy
authored
feat(layout): Refractoring (#6929)
* feat(layout): introduce SimplePage * feat(layout): refractoring * fix: flex col ≠ flex row
1 parent 6360223 commit f116efe

File tree

12 files changed

+117
-146
lines changed

12 files changed

+117
-146
lines changed

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

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,31 +6,26 @@ import { useTranslations } from 'next-intl';
66
import type { FC } from 'react';
77

88
import Button from '@/components/Common/Button';
9-
import GlowingBackdrop from '@/components/Common/GlowingBackdrop';
10-
import CenteredLayout from '@/layouts/Centered';
9+
import GlowingBackdropLayout from '@/layouts/GlowingBackdrop';
1110

1211
const ErrorPage: FC<{ error: Error }> = ({ error }) => {
1312
captureException(error);
1413
const t = useTranslations();
1514

1615
return (
17-
<CenteredLayout>
18-
<GlowingBackdrop />
19-
20-
<main>
21-
500
22-
<h1 className="special -mt-4 text-center">
23-
{t('layouts.error.internalServerError.title')}
24-
</h1>
25-
<p className="-mt-4 max-w-sm text-center text-lg">
26-
{t('layouts.error.internalServerError.description')}
27-
</p>
28-
<Button href="/">
29-
{t('layouts.error.backToHome')}
30-
<ArrowRightIcon />
31-
</Button>
32-
</main>
33-
</CenteredLayout>
16+
<GlowingBackdropLayout>
17+
500
18+
<h1 className="special -mt-4 text-center">
19+
{t('layouts.error.internalServerError.title')}
20+
</h1>
21+
<p className="-mt-4 max-w-sm text-center text-lg">
22+
{t('layouts.error.internalServerError.description')}
23+
</p>
24+
<Button href="/">
25+
{t('layouts.error.backToHome')}
26+
<ArrowRightIcon />
27+
</Button>
28+
</GlowingBackdropLayout>
3429
);
3530
};
3631

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

Lines changed: 23 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -6,40 +6,35 @@ import { useTranslations } from 'next-intl';
66
import type { FC } from 'react';
77

88
import Button from '@/components/Common/Button';
9-
import GlowingBackdrop from '@/components/Common/GlowingBackdrop';
10-
import CenteredLayout from '@/layouts/Centered';
9+
import GlowingBackdropLayout from '@/layouts/GlowingBackdrop';
1110

1211
const NotFoundPage: FC = () => {
1312
const t = useTranslations();
1413

1514
return (
16-
<CenteredLayout>
17-
<GlowingBackdrop />
18-
19-
<main>
20-
404
21-
<h1 className="special -mt-4 text-center">
22-
{t('layouts.error.notFound.title')}
23-
</h1>
24-
<div className="my-4 flex h-[150px] items-center justify-center md:h-[300px]">
25-
<div className="turtle motion-safe:animate-surf motion-reduce:animate-none">
26-
<Image
27-
src="/static/images/node-mascot.svg"
28-
alt="The Node.js mascot"
29-
height={114.69}
30-
width={100}
31-
/>
32-
</div>
15+
<GlowingBackdropLayout>
16+
404
17+
<h1 className="special -mt-4 text-center">
18+
{t('layouts.error.notFound.title')}
19+
</h1>
20+
<div className="my-4 flex h-[150px] items-center justify-center md:h-[300px]">
21+
<div className="turtle motion-safe:animate-surf motion-reduce:animate-none">
22+
<Image
23+
src="/static/images/node-mascot.svg"
24+
alt="The Node.js mascot"
25+
height={114.69}
26+
width={100}
27+
/>
3328
</div>
34-
<p className="-mt-4 max-w-sm text-center text-lg">
35-
{t('layouts.error.notFound.description')}
36-
</p>
37-
<Button href="/">
38-
{t('layouts.error.backToHome')}
39-
<ArrowRightIcon />
40-
</Button>
41-
</main>
42-
</CenteredLayout>
29+
</div>
30+
<p className="-mt-4 max-w-sm text-center text-lg">
31+
{t('layouts.error.notFound.description')}
32+
</p>
33+
<Button href="/">
34+
{t('layouts.error.backToHome')}
35+
<ArrowRightIcon />
36+
</Button>
37+
</GlowingBackdropLayout>
4338
);
4439
};
4540

‎apps/site/app/global-error.tsx‎

Lines changed: 12 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,8 @@ import { captureException } from '@sentry/nextjs';
55
import type { FC } from 'react';
66

77
import Button from '@/components/Common/Button';
8-
import GlowingBackdrop from '@/components/Common/GlowingBackdrop';
98
import BaseLayout from '@/layouts/Base';
10-
import CenteredLayout from '@/layouts/Centered';
9+
import GlowingBackdropLayout from '@/layouts/GlowingBackdrop';
1110

1211
const GlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
1312
captureException(error);
@@ -16,23 +15,17 @@ const GlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
1615
<html>
1716
<body>
1817
<BaseLayout>
19-
<CenteredLayout>
20-
<GlowingBackdrop />
21-
22-
<main>
23-
500
24-
<h1 className="special -mt-4 text-center">
25-
Internal Server Error
26-
</h1>
27-
<p className="-mt-4 max-w-sm text-center text-lg">
28-
This page has thrown a non-recoverable error.
29-
</p>
30-
<Button href="/">
31-
Back to Home
32-
<ArrowRightIcon />
33-
</Button>
34-
</main>
35-
</CenteredLayout>
18+
<GlowingBackdropLayout>
19+
500
20+
<h1 className="special -mt-4 text-center">Internal Server Error</h1>
21+
<p className="-mt-4 max-w-sm text-center text-lg">
22+
This page has thrown a non-recoverable error.
23+
</p>
24+
<Button href="/">
25+
Back to Home
26+
<ArrowRightIcon />
27+
</Button>
28+
</GlowingBackdropLayout>
3629
</BaseLayout>
3730
</body>
3831
</html>

‎apps/site/components/withLayout.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,26 @@
11
import type { FC, PropsWithChildren } from 'react';
22

33
import AboutLayout from '@/layouts/About';
4+
import ArticlePageLayout from '@/layouts/ArticlePage';
45
import BlogLayout from '@/layouts/Blog';
56
import DefaultLayout from '@/layouts/Default';
67
import DownloadLayout from '@/layouts/Download';
7-
import HomeLayout from '@/layouts/Home';
8+
import GlowingBackdropLayout from '@/layouts/GlowingBackdrop';
89
import LearnLayout from '@/layouts/Learn';
910
import PostLayout from '@/layouts/Post';
1011
import SearchLayout from '@/layouts/Search';
1112
import type { Layouts } from '@/types';
1213

1314
const layouts = {
1415
about: AboutLayout,
15-
home: HomeLayout,
16+
home: props => <GlowingBackdropLayout kind="home" {...props} />,
1617
learn: LearnLayout,
1718
page: DefaultLayout,
1819
'blog-post': PostLayout,
1920
'blog-category': BlogLayout,
2021
search: SearchLayout,
2122
download: DownloadLayout,
23+
article: ArticlePageLayout,
2224
} satisfies Record<Layouts, FC>;
2325

2426
type WithLayoutProps<L = Layouts> = PropsWithChildren<{ layout: L }>;

‎apps/site/layouts/ArticlePage.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import type { FC, PropsWithChildren } from 'react';
2+
3+
import WithMetaBar from '@/components/withMetaBar';
4+
import WithNavBar from '@/components/withNavBar';
5+
import WithSidebar from '@/components/withSidebar';
6+
import ArticleLayout from '@/layouts/Article';
7+
8+
const ArticlePageLayout: FC<PropsWithChildren> = ({ children }) => (
9+
<>
10+
<WithNavBar />
11+
12+
<ArticleLayout>
13+
<WithSidebar navKeys={[]} />
14+
15+
<div>
16+
<main>{children}</main>
17+
18+
<WithMetaBar />
19+
</div>
20+
</ArticleLayout>
21+
</>
22+
);
23+
24+
export default ArticlePageLayout;

‎apps/site/layouts/Centered.tsx‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +0,0 @@
1-
import type { FC, PropsWithChildren } from 'react';
2-
3-
import WithFooter from '@/components/withFooter';
4-
import WithNavBar from '@/components/withNavBar';
5-
6-
import styles from './layouts.module.css';
7-
8-
const CenteredLayout: FC<PropsWithChildren> = ({ children }) => (
9-
<>
10-
<WithNavBar />
11-
12-
<div className={styles.centeredLayout}>{children}</div>
13-
14-
<WithFooter />
15-
</>
16-
);
17-
18-
export default CenteredLayout;

‎apps/site/layouts/Content.tsx‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎apps/site/layouts/GlowingBackdrop.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import classNames from 'classnames';
2+
import type { FC, PropsWithChildren } from 'react';
3+
4+
import GlowingBackdrop from '@/components/Common/GlowingBackdrop';
5+
import WithFooter from '@/components/withFooter';
6+
import WithNavBar from '@/components/withNavBar';
7+
8+
import styles from './layouts.module.css';
9+
10+
type GlowingBackdropLayoutProps = PropsWithChildren<{
11+
kind?: 'home';
12+
}>;
13+
14+
const GlowingBackdropLayout: FC<GlowingBackdropLayoutProps> = ({
15+
kind,
16+
children,
17+
}) => (
18+
<>
19+
<WithNavBar />
20+
<div className={styles.centeredLayout}>
21+
<GlowingBackdrop />
22+
23+
<main
24+
className={classNames({
25+
[styles.homeLayout]: kind === 'home',
26+
})}
27+
>
28+
{children}
29+
</main>
30+
</div>
31+
<WithFooter />
32+
</>
33+
);
34+
35+
export default GlowingBackdropLayout;

‎apps/site/layouts/Home.tsx‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎apps/site/layouts/Post.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import WithFooter from '@/components/withFooter';
77
import WithMetaBar from '@/components/withMetaBar';
88
import WithNavBar from '@/components/withNavBar';
99
import { useClientContext } from '@/hooks/react-server';
10-
import ContentLayout from '@/layouts/Content';
1110
import {
1211
mapAuthorToCardAuthors,
1312
mapBlogCategoryToPreviewType,
@@ -26,7 +25,7 @@ const PostLayout: FC<PropsWithChildren> = ({ children }) => {
2625
<>
2726
<WithNavBar />
2827

29-
<ContentLayout>
28+
<div className={styles.contentLayout}>
3029
<div className={styles.postLayout}>
3130
<main>
3231
<h1>{frontmatter.title}</h1>
@@ -51,7 +50,7 @@ const PostLayout: FC<PropsWithChildren> = ({ children }) => {
5150
</div>
5251

5352
<WithMetaBar />
54-
</ContentLayout>
53+
</div>
5554

5655
<WithFooter />
5756
</>

0 commit comments

Comments
 (0)