feat(vth): add breadcrumb to content page

frameless · Oct 17, 2023 · b3672af · b3672af
1 parent 4072fe7
commit b3672af
Show file tree

Hide file tree

Showing 9 changed files with 1,548 additions and 1,946 deletions.
diff --git a/apps/vth-frontend/package.json b/apps/vth-frontend/package.json
@@ -38,9 +38,7 @@
     "react-markdown": "8.0.5",
     "react-vega": "7.6.0",
     "rehype-raw": "6.1.1",
-    "sharp": "0.32.1",
-    "vega": "5.25.0",
-    "vega-lite": "5.14.1"
+    "sharp": "0.32.1"
   },
   "devDependencies": {
     "eslint": "8.35.0",

diff --git a/apps/vth-frontend/src/app/[locale]/layout.tsx b/apps/vth-frontend/src/app/[locale]/layout.tsx
@@ -7,6 +7,7 @@ import { Navigation, Page, PageContent, PageHeader } from '@/components';
 import '@utrecht/component-library-css';
 import '../../styles/globals.css';
 import '@utrecht/design-tokens/dist/index.css';
+import { BreadcrumbNavigation } from '@/components/BreadcrumbNavigation';
 import { Footer } from '@/components/Footer';
 import { Grid } from '@/components/Grid';
 import { Logo } from '@/components/Logo';

diff --git a/apps/vth-frontend/src/app/[locale]/themas/[themaSlug]/content/[contentSlug]/page.tsx b/apps/vth-frontend/src/app/[locale]/themas/[themaSlug]/content/[contentSlug]/page.tsx
@@ -4,6 +4,7 @@ import { Heading1 } from '@utrecht/component-library-react';
 import { Metadata } from 'next';
 import React from 'react';
 import { useTranslation } from '@/app/i18n';
+import { BreadcrumbNavigation, BreadcrumbNavigationElement } from '@/components/BreadcrumbNavigation';
 import { Grid } from '@/components/Grid';
 import { Markdown } from '@/components/Markdown';
 import { LinkData, SideNavigation } from '@/components/SideNavigation';
@@ -56,8 +57,31 @@ const Thema = async ({ params: { locale, contentSlug } }: Params) => {
 
   const sideNavigationLinks: LinkData[] = [...themasLinks, ...contentLinks];
 
+  const breadcrumbNavigationElements: BreadcrumbNavigationElement[] = [];
+
+  if (parents?.data[0]?.attributes?.parents?.data[0]) {
+    breadcrumbNavigationElements.push({
+      title: parents?.data[0]?.attributes?.parents?.data[0]?.attributes?.title,
+      href: `/themas/${parents?.data[0]?.attributes?.parents?.data[0]?.attributes?.slug}`,
+    });
+  }
+
+  breadcrumbNavigationElements.push({
+    title: parents?.data[0]?.attributes?.title,
+    href: `/themas/${parentSlug}`,
+  });
+
+  breadcrumbNavigationElements.push({
+    title: title,
+    href: `/themas/${parentSlug}/content/${contentSlug}`,
+    isCurrent: true,
+  });
+
   return (
     <Grid className={'utrecht-grid--content-padding'}>
+      <div className={'utrecht-grid__full-width'}>
+        <BreadcrumbNavigation navigationElements={breadcrumbNavigationElements} />
+      </div>
       <div className={'utrecht-grid__two-third'}>
         <Heading1>{title}</Heading1>
         <Markdown strapiBackendURL={process.env.STRAPI_PUBLIC_URL}>{content}</Markdown>

diff --git a/apps/vth-frontend/src/app/[locale]/themas/[themaSlug]/page.tsx b/apps/vth-frontend/src/app/[locale]/themas/[themaSlug]/page.tsx
@@ -4,6 +4,7 @@ import { Heading1 } from '@utrecht/component-library-react';
 import { Metadata } from 'next';
 import React from 'react';
 import { useTranslation } from '@/app/i18n';
+import {BreadcrumbNavigation, BreadcrumbNavigationElement} from '@/components/BreadcrumbNavigation';
 import { Card } from '@/components/Card';
 import { Grid } from '@/components/Grid';
 import { Markdown } from '@/components/Markdown';

diff --git a/apps/vth-frontend/src/components/BreadcrumbNavigation/index.tsx b/apps/vth-frontend/src/components/BreadcrumbNavigation/index.tsx
@@ -0,0 +1,76 @@
+import Link from 'next/link';
+import { FC, useId } from 'react';
+import { UtrechtIconChevronRight } from '../Icons';
+import clsx from 'clsx';
+
+export type BreadcrumbNavigationElement = {
+  title: string;
+  href: string;
+  isCurrent?: boolean;
+};
+
+type BreadcrumbNavigationProps = {
+  navigationElements: BreadcrumbNavigationElement[];
+};
+
+export const BreadcrumbNavigation: FC<BreadcrumbNavigationProps> = ({ navigationElements }) => {
+  const labelId = useId();
+
+  return (
+    <nav className="utrecht-breadcrumb-nav utrecht-breadcrumb-nav--html-ol" aria-labelledby={labelId}>
+      <h2 className="utrecht-heading-2 utrecht-breadcrumb-nav__heading" id={labelId} aria-hidden="true">
+        Kruimelpad:
+      </h2>
+      <ol
+        className="utrecht-breadcrumb-nav__list utrecht-breadcrumb-nav__list--html-ol"
+        itemType="https://schema.org/BreadcrumbList"
+      >
+        <li className="utrecht-breadcrumb-nav__item" itemType="https://schema.org/ListItem" itemProp="itemListElement">
+          <Link
+            href="/"
+            className="utrecht-link utrecht-link--html-a utrecht-breadcrumb-nav__link"
+            rel="home"
+            itemProp="item"
+          >
+            <span className="utrecht-breadcrumb-nav__text" itemProp="name">
+              Home
+            </span>
+            <meta itemProp="position" content="1" />
+          </Link>
+        </li>
+        {navigationElements?.map(({ title, href, isCurrent }, index) => (
+          <>
+            <li
+              key={`breadcrumb-separator-${index}`}
+              aria-hidden="true"
+              className="utrecht-breadcrumb-nav__separator utrecht-breadcrumb-nav__separator--html-li"
+            >
+              <UtrechtIconChevronRight />
+            </li>
+            <li
+              key={`breadcrumb-item-${title}`}
+              className="utrecht-breadcrumb-nav__item"
+              itemType="https://schema.org/ListItem"
+              itemProp="itemListElement"
+            >
+              <Link
+                href={href}
+                className={clsx('utrecht-link utrecht-link--html-a', 'utrecht-breadcrumb-nav__link', {
+                  ['utrecht-breadcrumb-nav__link--current utrecht-breadcrumb-nav__link--disabled']: isCurrent,
+                })}
+                itemProp="item"
+                aria-current={isCurrent ? 'page' : false}
+                aria-disabled={isCurrent ? 'true' : false}
+              >
+                <span className="utrecht-breadcrumb-nav__text" itemProp="name">
+                  {title}
+                </span>
+                <meta itemProp="position" content={`${index + 1}`} />
+              </Link>
+            </li>
+          </>
+        ))}
+      </ol>
+    </nav>
+  );
+};
diff --git a/apps/vth-frontend/src/components/Icons/index.tsx b/apps/vth-frontend/src/components/Icons/index.tsx
@@ -0,0 +1,3 @@
+'use client';
+
+export { UtrechtIconChevronRight } from '@utrecht/web-component-library-react';
diff --git a/apps/vth-frontend/src/query/index.ts b/apps/vth-frontend/src/query/index.ts
@@ -135,6 +135,14 @@ query GET_CONTENT_BY_SLUG($slug: String) {
               attributes {
                 title
                 slug
+                parents {
+                  data {
+                    attributes {
+                      title
+                      slug
+                    }
+                  }
+                }
                 child_themas {
                   data {
                     attributes {

diff --git a/apps/vth-frontend/src/styles/globals.css b/apps/vth-frontend/src/styles/globals.css
@@ -151,3 +151,7 @@ a {
 .utrecht-sidenav__item {
   border-block-end: 1px solid var(--utrecht-color-grey-80);
 }
+
+.utrecht-breadcrumb-nav__link--disabled {
+  text-decoration-line: none !important;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		'use client';

		export { UtrechtIconChevronRight } from '@utrecht/web-component-library-react';