import { settings } from '@utils/config'; import Head from 'next/head'; import Link from 'next/link'; import { useRouter } from 'next/router'; import { useIntl } from 'react-intl'; import { BreadcrumbList, WithContext } from 'schema-dts'; import styles from './Breadcrumb.module.scss'; const Breadcrumb = ({ pageTitle }: { pageTitle: string }) => { const intl = useIntl(); const router = useRouter(); const isHome = router.pathname === '/'; const isArticle = router.pathname.includes('/article/'); const isProject = router.pathname.includes('/projet/'); const isSubject = router.pathname.includes('/sujet/'); const isThematic = router.pathname.includes('/thematique/'); const getItems = () => { return ( <>

{intl.formatMessage({ defaultMessage: 'Home', description: 'Breadcrumb: Home item', })}

{(isArticle || isThematic || isSubject) && ( <>

{intl.formatMessage({ defaultMessage: 'Blog', description: 'Breadcrumb: Blog item', })}

)} {isProject && ( <>

{intl.formatMessage({ defaultMessage: 'Projects', description: 'Breadcrumb: Projects item', })}

)}

{pageTitle}

); }; const getElementsSchema = () => { const items = []; const homepage: BreadcrumbList['itemListElement'] = { '@type': 'ListItem', position: 1, name: intl.formatMessage({ defaultMessage: 'Home', description: 'Breadcrumb: Home item', }), item: settings.url, }; items.push(homepage); if (isArticle || isThematic || isSubject) { const blog: BreadcrumbList['itemListElement'] = { '@type': 'ListItem', position: 2, name: intl.formatMessage({ defaultMessage: 'Blog', description: 'Breadcrumb: Blog item', }), item: `${settings.url}/blog`, }; items.push(blog); } if (isProject) { const blog: BreadcrumbList['itemListElement'] = { '@type': 'ListItem', position: 2, name: intl.formatMessage({ defaultMessage: 'Projects', description: 'Breadcrumb: Projects item', }), item: `${settings.url}/projets`, }; items.push(blog); } const currentPage: BreadcrumbList['itemListElement'] = { '@type': 'ListItem', position: items.length + 1, name: pageTitle, item: `${settings.url}${router.asPath}`, }; items.push(currentPage); return items; }; const schemaJsonLd: WithContext = { '@context': 'https://schema.org', '@type': 'BreadcrumbList', '@id': `${settings.url}/#breadcrumb`, itemListElement: getElementsSchema(), }; return ( <> {!isHome && ( )} ); }; export default Breadcrumb; 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

@use "@styles/abstracts/functions" as fun;

.icon {
  display: block;
  margin: auto;
  width: var(--icon-size, #{fun.convert-px(40)});
}

.big-handle {
  fill: var(--color-primary-lighter);
  stroke: var(--color-primary-darker);
  stroke-width: 3;
}

.glass {
  fill: var(--color-bg-opacity);
  stroke: var(--color-primary-darker);
  stroke-width: 2;
}

.upright {
  fill: var(--color-primary-lighter);
  stroke: var(--color-primary-darker);
  stroke-width: 3;
}

.small-handle {
  fill: var(--color-primary);
  stroke: var(--color-primary-darker);
  stroke-width: 2;
}