diff --git a/src/images/github/icon-github-dark-green.svg b/src/images/github/icon-github-dark-green.svg new file mode 100644 index 000000000..8e772ea05 --- /dev/null +++ b/src/images/github/icon-github-dark-green.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/github/icon-github-white.svg b/src/images/github/icon-github-white.svg new file mode 100644 index 000000000..2ae3ec23f --- /dev/null +++ b/src/images/github/icon-github-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/templates/ObservabilityPackDetails.js b/src/templates/ObservabilityPackDetails.js index ed38ef334..964adda95 100644 --- a/src/templates/ObservabilityPackDetails.js +++ b/src/templates/ObservabilityPackDetails.js @@ -10,11 +10,13 @@ import { PageTools, useTessen, useInstrumentedHandler, + Button, } from '@newrelic/gatsby-theme-newrelic'; import ImageGallery from '../components/ImageGallery'; import Intro from '../components/Intro'; import InstallButton from '../components/InstallButton'; import ImageSlider from '../components/ImageSlider'; +import iconGitHubWhite from '../images/github/icon-github-white.svg'; const ObservabilityPackDetails = ({ data, location }) => { const pack = data.observabilityPacks; @@ -32,6 +34,23 @@ const ObservabilityPackDetails = ({ data, location }) => { packId: pack.id, } ); + + const getPackUrl = () => { + const baseUrl = + 'https://github.com/newrelic/newrelic-observability-packs/tree/main/packs'; + + if (!pack.logoUrl) { + return baseUrl; + } + + /** + * logoUrl looks something like: 'https://raw.githubusercontent.com/newrelic/newrelic-observability-packs/v0.8.2/packs/couchbase/logo.svg' + */ + const [packName, ..._] = pack.logoUrl.split('/').slice(-2); + + return `${baseUrl}/${packName}`; + }; + return ( <> @@ -45,7 +64,7 @@ const ObservabilityPackDetails = ({ data, location }) => { `} > @@ -230,6 +249,28 @@ const ObservabilityPackDetails = ({ data, location }) => { } `} > + +
+ +
+
How to use this pack
    @@ -271,6 +312,7 @@ export const pageQuery = graphql` level id description + logoUrl dashboards { description name