1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
|
import Link from '@components/atoms/links/link';
import SearchForm from '@components/organisms/forms/search-form';
import LinksListWidget from '@components/organisms/widgets/links-list-widget';
import { getLayout } from '@components/templates/layout/layout';
import PageLayout from '@components/templates/page/page-layout';
import {
getThematicsPreview,
getTotalThematics,
} from '@services/graphql/thematics';
import { getTopicsPreview, getTotalTopics } from '@services/graphql/topics';
import { type NextPageWithLayout } from '@ts/types/app';
import {
type RawThematicPreview,
type RawTopicPreview,
} from '@ts/types/raw-data';
import { loadTranslation, type Messages } from '@utils/helpers/i18n';
import {
getLinksListItems,
getPageLinkFromRawData,
} from '@utils/helpers/pages';
import useBreadcrumb from '@utils/hooks/use-breadcrumb';
import useSettings from '@utils/hooks/use-settings';
import { GetStaticProps } from 'next';
import Head from 'next/head';
import { ReactNode } from 'react';
import { useIntl } from 'react-intl';
type Error404PageProps = {
thematicsList: RawThematicPreview[];
topicsList: RawTopicPreview[];
translation: Messages;
};
/**
* Error 404 page.
*/
const Error404Page: NextPageWithLayout<Error404PageProps> = ({
thematicsList,
topicsList,
}) => {
const intl = useIntl();
const { website } = useSettings();
const title = intl.formatMessage({
defaultMessage: 'Page not found',
description: 'Error404Page: page title',
id: 'KnWeKh',
});
const body = intl.formatMessage(
{
defaultMessage:
'Sorry, it seems that the page your are looking for does not exist. If you think this path should work, feel free to <link>contact me</link> with the necessary information so that I can fix the problem.',
id: '9sGNKq',
description: 'Error404Page: page body',
},
{
link: (chunks: ReactNode) => <Link href="/contact">{chunks}</Link>,
}
);
const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
title,
url: `/404`,
});
const pageTitle = intl.formatMessage(
{
defaultMessage: 'Error 404: Page not found - {websiteName}',
description: '404Page: SEO - Page title',
id: '310o3F',
},
{ websiteName: website.name }
);
const pageDescription = intl.formatMessage({
defaultMessage: 'Page not found.',
description: '404Page: SEO - Meta description',
id: '48Ww//',
});
const thematicsListTitle = intl.formatMessage({
defaultMessage: 'Thematics',
description: 'Error404Page: thematics list widget title',
id: 'HohQPh',
});
const topicsListTitle = intl.formatMessage({
defaultMessage: 'Topics',
description: 'Error404Page: topics list widget title',
id: 'GVpTIl',
});
return (
<>
<Head>
<title>{pageTitle}</title>
<meta name="description" content={pageDescription} />
</Head>
<PageLayout
title={title}
breadcrumb={breadcrumbItems}
breadcrumbSchema={breadcrumbSchema}
widgets={[
<LinksListWidget
key="thematics-list"
items={getLinksListItems(
thematicsList.map((thematic) =>
getPageLinkFromRawData(thematic, 'thematic')
)
)}
title={thematicsListTitle}
level={2}
/>,
<LinksListWidget
key="topics-list"
items={getLinksListItems(
topicsList.map((topic) => getPageLinkFromRawData(topic, 'topic'))
)}
title={topicsListTitle}
level={2}
/>,
]}
>
{body}
<p>
{intl.formatMessage({
defaultMessage: 'You can also try a search:',
description: 'Error404Page: try a search message',
id: 'XKy7rx',
})}
</p>
<SearchForm hideLabel={true} searchPage="/recherche/" />
</PageLayout>
</>
);
};
Error404Page.getLayout = (page) =>
getLayout(page, { useGrid: true, withExtraPadding: true });
export const getStaticProps: GetStaticProps<Error404PageProps> = async ({
locale,
}) => {
const totalThematics = await getTotalThematics();
const thematics = await getThematicsPreview({ first: totalThematics });
const totalTopics = await getTotalTopics();
const topics = await getTopicsPreview({ first: totalTopics });
const translation = await loadTranslation(locale);
return {
props: {
thematicsList: thematics.edges.map((edge) => edge.node),
topicsList: topics.edges.map((edge) => edge.node),
translation,
},
};
};
export default Error404Page;
|
