diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-01-07 18:51:02 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-01-07 19:37:26 +0100 |
| commit | 9a85c175bf59b7a360f09da23a3ac83293838570 (patch) | |
| tree | c4e5385a3b2fd618cabd5356573aff14602c7d20 /src/components/Breadcrumb | |
| parent | 06d0b7bb010f5ac1b3a0c8117b274a700f7266fe (diff) | |
chore: add article header styles
Diffstat (limited to 'src/components/Breadcrumb')
| -rw-r--r-- | src/components/Breadcrumb/Breadcrumb.module.scss | 5 | ||||
| -rw-r--r-- | src/components/Breadcrumb/Breadcrumb.tsx | 12 |
2 files changed, 7 insertions, 10 deletions
diff --git a/src/components/Breadcrumb/Breadcrumb.module.scss b/src/components/Breadcrumb/Breadcrumb.module.scss index b469ee0..98a11a4 100644 --- a/src/components/Breadcrumb/Breadcrumb.module.scss +++ b/src/components/Breadcrumb/Breadcrumb.module.scss @@ -1,4 +1,5 @@ @use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/mixins" as mix; @use "@styles/abstracts/placeholders"; .wrapper { @@ -7,9 +8,7 @@ minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch) minmax(0, 1fr); align-items: center; - padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) - var(--spacing-lg); - border-bottom: fun.convert-px(3) solid var(--color-border-lighter); + padding: var(--spacing-md) 0; } .list { diff --git a/src/components/Breadcrumb/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx index e090a4f..77e7c08 100644 --- a/src/components/Breadcrumb/Breadcrumb.tsx +++ b/src/components/Breadcrumb/Breadcrumb.tsx @@ -1,4 +1,5 @@ import { t } from '@lingui/macro'; +import Head from 'next/head'; import Link from 'next/link'; import { useRouter } from 'next/router'; import styles from './Breadcrumb.module.scss'; @@ -7,7 +8,6 @@ const Breadcrumb = ({ pageTitle }: { pageTitle: string }) => { const router = useRouter(); const isHome = router.pathname === '/'; - const isBlog = router.pathname === '/blog'; const isArticle = router.pathname.includes('/article/'); const isThematic = router.pathname.includes('/thematique/'); const isSubject = router.pathname.includes('/sujet/'); @@ -15,12 +15,14 @@ const Breadcrumb = ({ pageTitle }: { pageTitle: string }) => { const getItems = () => { return ( <> + <Head> + <script type="application/ld+json">{}</script> + </Head> <li className={styles.item}> <Link href="/"> <a>{t`Home`}</a> </Link> </li> - {isBlog && <li className={styles.item}>{t`Blog`}</li>} {(isArticle || isThematic || isSubject) && ( <> <li className={styles.item}> @@ -28,12 +30,8 @@ const Breadcrumb = ({ pageTitle }: { pageTitle: string }) => { <a>{t`Blog`}</a> </Link> </li> - <li className={styles.item}>{pageTitle}</li> </> )} - {!isBlog && !isArticle && !isThematic && !isSubject && ( - <li className={styles.item}>{pageTitle}</li> - )} </> ); }; @@ -41,7 +39,7 @@ const Breadcrumb = ({ pageTitle }: { pageTitle: string }) => { return ( <> {!isHome && ( - <nav> + <nav className={styles.wrapper}> <span className="screen-reader-text">{t`You are here:`}</span> <ol className={styles.list}>{getItems()}</ol> </nav> |