import type { GetStaticProps } from 'next';
import dynamic from 'next/dynamic';
import Head from 'next/head';
import NextImage from 'next/image';
import React, { type ReactNode } from 'react';
import { useIntl } from 'react-intl';
import {
getLayout,
Heading,
ImageWidget,
Link,
SocialMediaWidget,
Page,
PageHeader,
PageSidebar,
PageBody,
} from '../components';
import { mdxComponents } from '../components/mdx';
import CVContent, { data, meta } from '../content/pages/cv.mdx';
import type { NextPageWithLayout } from '../types';
import { CONFIG } from '../utils/config';
import { PERSONAL_LINKS, ROUTES } from '../utils/constants';
import { getAboutPageGraph, getSchemaFrom } from '../utils/helpers';
import { loadTranslation } from '../utils/helpers/server';
import { useBreadcrumbs, useHeadingsTree } from '../utils/hooks';
const Toc = dynamic(
async () => import('../components').then((mod) => mod.TocWidget),
{
ssr: false,
}
);
const DownloadLink = (chunks: ReactNode) => (
{chunks}
);
/**
* CV page.
*/
const CVPage: NextPageWithLayout = () => {
const intl = useIntl();
const { ref, tree } = useHeadingsTree({ fromLevel: 2 });
const { dates, intro, seo, title } = meta;
const { items: breadcrumbItems, schema: breadcrumbSchema } =
useBreadcrumbs(title);
const messages = {
image: {
caption: intl.formatMessage(
{
defaultMessage: 'Download the CV in PDF',
id: 'fN04AJ',
description: 'CVPage: download CV in PDF text',
},
{
link: DownloadLink,
}
),
title: intl.formatMessage({
defaultMessage: 'Others formats',
description: 'CVPage: cv preview widget title',
id: 'B9OCyV',
}),
},
socialMedia: {
github: intl.formatMessage({
defaultMessage: 'Github profile',
description: 'CVPage: Github profile link',
id: 'Jm0a6H',
}),
gitlab: intl.formatMessage({
defaultMessage: 'Gitlab profile',
description: 'CVPage: Gitlab profile link',
id: '++U2Hm',
}),
linkedin: intl.formatMessage({
defaultMessage: 'LinkedIn profile',
description: 'CVPage: LinkedIn profile link',
id: 'Sm2wCk',
}),
title: intl.formatMessage({
defaultMessage: 'Open-source projects',
description: 'CVPage: social media widget title',
id: '+Dre5J',
}),
},
toc: {
title: intl.formatMessage({
defaultMessage: 'Table of Contents',
description: 'PageLayout: table of contents title',
id: 'eys2uX',
}),
},
};
const jsonLd = getSchemaFrom([
getAboutPageGraph({
breadcrumb: breadcrumbSchema,
copyrightYear: new Date(dates.publication).getFullYear(),
cover: data.image.src,
dates,
description: intro,
slug: ROUTES.CV,
title,
}),
]);
const page = {
title: `${seo.title} - ${CONFIG.name}`,
url: `${CONFIG.url}${ROUTES.CV}`,
};
return (
{page.title}
{/*eslint-disable-next-line react/jsx-no-literals -- Name allowed */}
{/*eslint-disable-next-line react/jsx-no-literals -- Content allowed */}
{messages.toc.title}}
tree={tree}
/>
{messages.image.title}
}
img={}
/>
{messages.socialMedia.title}
}
media={[
{
icon: 'Github',
id: 'github',
label: messages.socialMedia.github,
url: PERSONAL_LINKS.GITHUB,
},
{
icon: 'Gitlab',
id: 'gitlab',
label: messages.socialMedia.gitlab,
url: PERSONAL_LINKS.GITLAB,
},
]}
/>
);
};
CVPage.getLayout = (page) => getLayout(page);
export const getStaticProps: GetStaticProps = async ({ locale }) => {
const translation = await loadTranslation(locale);
return {
props: {
translation,
},
};
};
export default CVPage;