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
|
import ContactForm from '@components/ContactForm/ContactForm';
import { getLayout } from '@components/Layouts/Layout';
import PostHeader from '@components/PostHeader/PostHeader';
import Sidebar from '@components/Sidebar/Sidebar';
import { SocialMedia } from '@components/Widgets';
import styles from '@styles/pages/Page.module.scss';
import { NextPageWithLayout } from '@ts/types/app';
import { settings } from '@utils/config';
import { getIntlInstance, loadTranslation } from '@utils/helpers/i18n';
import { GetStaticProps, GetStaticPropsContext } from 'next';
import Head from 'next/head';
import { useRouter } from 'next/router';
import { useIntl } from 'react-intl';
import { ContactPage as ContactPageSchema, Graph, WebPage } from 'schema-dts';
const ContactPage: NextPageWithLayout = () => {
const intl = useIntl();
const router = useRouter();
const pageTitle = intl.formatMessage(
{
defaultMessage: 'Contact form - {websiteName}',
description: 'ContactPage: SEO - Page title',
},
{ websiteName: settings.name }
);
const pageDescription = intl.formatMessage(
{
defaultMessage:
"Contact {websiteName} through its website. All you need to do it's to fill the contact form.",
description: 'ContactPage: SEO - Meta description',
},
{ websiteName: settings.name }
);
const pageUrl = `${settings.url}${router.asPath}`;
const title = intl.formatMessage({
defaultMessage: 'Contact',
description: 'ContactPage: page title',
});
const intro = intl.formatMessage({
defaultMessage: 'Please fill the form to contact me.',
description: 'ContactPage: page introduction',
});
const webpageSchema: WebPage = {
'@id': `${pageUrl}`,
'@type': 'WebPage',
breadcrumb: { '@id': `${settings.url}/#breadcrumb` },
name: pageTitle,
description: pageDescription,
reviewedBy: { '@id': `${settings.url}/#branding` },
url: `${pageUrl}`,
isPartOf: {
'@id': `${settings.url}`,
},
};
const contactSchema: ContactPageSchema = {
'@id': `${settings.url}/#contact`,
'@type': 'ContactPage',
name: title,
description: intro,
author: { '@id': `${settings.url}/#branding` },
creator: { '@id': `${settings.url}/#branding` },
editor: { '@id': `${settings.url}/#branding` },
inLanguage: settings.locales.defaultLocale,
license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
mainEntityOfPage: { '@id': `${pageUrl}` },
};
const schemaJsonLd: Graph = {
'@context': 'https://schema.org',
'@graph': [webpageSchema, contactSchema],
};
return (
<>
<Head>
<title>{pageTitle}</title>
<meta name="description" content={pageDescription} />
<meta property="og:url" content={`${pageUrl}`} />
<meta property="og:type" content="article" />
<meta property="og:title" content={title} />
<meta property="og:description" content={intro} />
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
></script>
</Head>
<article
id="contact"
className={`${styles.article} ${styles['article--no-comments']}`}
>
<PostHeader title={title} intro={intro} />
<div className={styles.body}>
<p>
{intl.formatMessage({
defaultMessage: 'All fields marked with * are required.',
description: 'ContactPage: required fields text',
})}
</p>
<ContactForm />
</div>
<Sidebar position="right">
<SocialMedia
title={intl.formatMessage({
defaultMessage: 'Find me elsewhere',
description: 'ContactPage: social media widget title',
})}
github={true}
gitlab={true}
linkedin={true}
/>
</Sidebar>
</article>
</>
);
};
ContactPage.getLayout = getLayout;
export const getStaticProps: GetStaticProps = async (
context: GetStaticPropsContext
) => {
const intl = await getIntlInstance();
const breadcrumbTitle = intl.formatMessage({
defaultMessage: 'Contact',
description: 'ContactPage: breadcrumb item',
});
const { locale } = context;
const translation = await loadTranslation(locale);
return {
props: {
breadcrumbTitle,
locale,
translation,
},
};
};
export default ContactPage;
|
