From 2ec9930e456d18e9117ca4b8b96caa2ed6165739 Mon Sep 17 00:00:00 2001
From: Clinton <clinton.langosch@gmail.com>
Date: Tue, 31 Aug 2021 16:02:04 -0700
Subject: [PATCH] feat: add breadcrumbs to details pages

---
 src/components/Breadcrumbs.js      | 52 ++++++++++++++++++++++++++++++
 src/templates/QuickstartDetails.js | 12 +++++++
 2 files changed, 64 insertions(+)
 create mode 100644 src/components/Breadcrumbs.js

diff --git a/src/components/Breadcrumbs.js b/src/components/Breadcrumbs.js
new file mode 100644
index 000000000..f3f8f06b4
--- /dev/null
+++ b/src/components/Breadcrumbs.js
@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { css } from '@emotion/react';
+import { Link } from '@newrelic/gatsby-theme-newrelic';
+
+const Breadcrumbs = ({ segments, separator }) => {
+  return (
+    <div
+      css={css`
+        margin: 2em 0;
+        > :first-child {
+          margin-left: 0;
+        }
+        > * {
+          margin-left: 0.5em;
+        }
+      `}
+      aria-label="breadcrumb"
+    >
+      {segments
+        .map((segment) => {
+          const elem = segment.url ? (
+            <Link to={segment.url}>{segment.name}</Link>
+          ) : (
+            segment.name
+          );
+          return <span key={`breadcrumb-${segment.name}`}>{elem}</span>;
+        })
+        .reduce((prev, curr) => [
+          prev,
+          React.createElement('span', {}, separator),
+          curr,
+        ])}
+    </div>
+  );
+};
+
+Breadcrumbs.defaultProps = {
+  separator: '/',
+};
+
+Breadcrumbs.propTypes = {
+  segments: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      url: PropTypes.string,
+    })
+  ),
+  separator: PropTypes.string,
+};
+
+export default Breadcrumbs;
diff --git a/src/templates/QuickstartDetails.js b/src/templates/QuickstartDetails.js
index b6ba28923..4626fa310 100644
--- a/src/templates/QuickstartDetails.js
+++ b/src/templates/QuickstartDetails.js
@@ -21,6 +21,7 @@ import ImageGallery from '../components/ImageGallery';
 import InstallButton from '../components/InstallButton';
 import Markdown from '../components/Markdown';
 import QuickstartDataSources from '../components/quickstarts/QuickstartDataSources';
+import Breadcrumbs from '../components/Breadcrumbs';
 import { quickstart } from '../types';
 import {
   QUICKSTARTS_REPO,
@@ -49,6 +50,16 @@ const QuickstartDetails = ({ data, location }) => {
   const pack = data.quickstarts;
   const packUrl = pack.packUrl || QUICKSTARTS_REPO;
   const tessen = useTessen();
+  const breadcrumbSegments = [
+    {
+      name: 'Instant Observability (I/O)',
+      url: '/instant-observability/',
+    },
+    {
+      name: pack.name,
+      url: null,
+    },
+  ];
   const handleInstallClick = useInstrumentedHandler(
     () => {
       tessen.track('observabilityPack', 'packInstall', {
@@ -66,6 +77,7 @@ const QuickstartDetails = ({ data, location }) => {
   return (
     <>
       <DevSiteSeo title={pack.name} location={location} />
+      <Breadcrumbs segments={breadcrumbSegments} />
       <Tabs>
         <PageLayout type={PageLayout.TYPE.RELATED_CONTENT_TABS}>
           <PageLayout.Header