feat: add data sources tab content

src/@newrelic/gatsby-theme-newrelic/icons/newrelic.js

@@ -11,6 +11,7 @@ import relicans from './newrelic/relicans';
 import share from './newrelic/share';
 import nerdlog from './newrelic/nerdlog';
 import checkShield from './newrelic/check-shield';
+import documentation from './newrelic/documentation';
 
 export default {
   ...defaultIcons,
@@ -26,4 +27,5 @@ export default {
   share,
   nerdlog,
   'check-shield': checkShield,
+  documentation,
 };

src/@newrelic/gatsby-theme-newrelic/icons/newrelic/documentation.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import SVG from '@newrelic/gatsby-theme-newrelic/src/components/SVG';
+import { css } from '@emotion/react';
+
+const DocumentationIcon = () => (
+  <SVG
+    viewBox="0 0 16 16"
+    css={css`
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 1;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    `}
+  >
+    <path
+      fillRule="evenodd"
+      d="M8 11v1H5v-1h3zm2-3v1H5V8h5zM7.7 0H2v15h11V5.3L7.7 0zM8 1.7L11.3 5H8V1.7zM12 14H3V1h4v5h5v8z"
+    />
+  </SVG>
+);
+
+export default DocumentationIcon;

src/components/quickstarts/QuickstartDataSources.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import { css } from '@emotion/react';
+import pluralize from 'pluralize';
+import { Surface, Link, Icon } from '@newrelic/gatsby-theme-newrelic';
+import Intro from '../Intro';
+import { quickstart } from '../../types';
+
+const QuickstartDataSources = ({ quickstart }) => (
+  <>
+    <Intro
+      css={css`
+        margin-bottom: 16px;
+      `}
+    >
+      {quickstart.name} observability quickstart contains{' '}
+      {pluralize('data source', quickstart.documentation?.length ?? 0, true)}.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Aenean et tortor at
+      risus. Platea dictumst quisque sagittis purus sit amet volutpat consequat
+      mauris.{' '}
+    </Intro>
+
+    <div
+      css={css`
+        display: grid;
+        grid-gap: 1rem;
+        grid-template-columns: repeat(3, 1fr);
+
+        @media (max-width: 1180px) {
+          grid-template-columns: repeat(1, 1fr);
+        }
+      `}
+    >
+      {quickstart.documentation.map((doc, index) => (
+        <Surface
+          key={index}
+          base={Surface.BASE.PRIMARY}
+          css={css`
+            padding: 1rem;
+          `}
+          interactive
+        >
+          <Link
+            to={doc.url}
+            css={css`
+              text-decoration: none;
+              color: inherit;
+            `}
+          >
+            <h3
+              css={css`
+                display: flex;
+                align-items: center;
+              `}
+            >
+              <Icon name="nr-documentation" />
+              <span
+                css={css`
+                  margin-left: 0.5rem;
+                `}
+              >
+                {doc.name}
+              </span>
+            </h3>
+            {doc.description && <p>{doc.description}</p>}
+          </Link>
+        </Surface>
+      ))}
+    </div>
+  </>
+);
+
+QuickstartDataSources.propTypes = {
+  quickstart: quickstart.isRequired,
+};
+
+export default QuickstartDataSources;

src/templates/QuickstartDetails.js

@@ -20,6 +20,7 @@ import {
 import ImageGallery from '../components/ImageGallery';
 import InstallButton from '../components/InstallButton';
 import Markdown from '../components/Markdown';
+import QuickstartDataSources from '../components/quickstarts/QuickstartDataSources';
 import { quickstart } from '../types';
 import {
   QUICKSTARTS_REPO,
@@ -138,11 +139,15 @@ const ObservabilityPackDetails = ({ data, location }) => {
                 )}
               </Tabs.Page>
               <Tabs.Page id="data-sources">
-                <EmptyTab
-                  quickstartUrl={pack.packUrl}
-                  quickstartName={pack.name}
-                  tabName="data sources"
-                />
+                {pack.documentation ? (
+                  <QuickstartDataSources quickstart={pack} />
+                ) : (
+                  <EmptyTab
+                    quickstartUrl={pack.packUrl}
+                    quickstartName={pack.name}
+                    tabName="data sources"
+                  />
+                )}
               </Tabs.Page>
             </Tabs.Pages>
           </Layout.Content>
@@ -250,6 +255,11 @@ export const pageQuery = graphql`
         url
         type
       }
+      documentation {
+        name
+        url
+        description
+      }
       authors
     }
   }