Merge pull request #458 from thejonanshow/podcasts-page

Podcasts page

src/components/NavigationItems.js

@@ -15,6 +15,7 @@ const iconLibrary = {
   'Automate workflows': 'automation',
   'Explore docs': 'developerDocs',
   'Developer champions': 'developerChampions',
+  Podcasts: 'podcasts',
   'Try our APIs': 'tryOurAPIs',
 };
 

src/components/NewRelicIcon.js

@@ -83,6 +83,15 @@ const NEWRELIC_ICONS = {
       <path d="M750.7,362.2" />
     </>
   ),
+  podcasts: (
+    <>
+      <path d="M12,3.179c-4.85,0-8.782,4.099-8.782,9.153c0,2.589,1.031,4.927,2.689,6.593 c0.063,0.062,0.162-0.023,0.107-0.094c-1.2-1.568-1.926-3.611-1.926-5.846c0-4.938,3.542-8.15,7.911-8.15 c4.37,0,7.911,3.213,7.911,8.15c0,2.235-0.727,4.278-1.926,5.846c-0.055,0.07,0.044,0.156,0.107,0.094 c1.658-1.666,2.689-4.004,2.689-6.593C20.781,7.278,16.85,3.179,12,3.179z" />
+      <path d="M7.098,12.49c-0.086-0.209-0.312-0.323-0.531-0.27L5.28,12.536c-0.281,0.068-0.428,0.378-0.304,0.64 l3.36,7.078c0.125,0.262,0.458,0.344,0.689,0.168l0.748-0.568c0.165-0.125,0.225-0.346,0.146-0.537L7.098,12.49z" />
+      <path d="M4.696,13.119c-0.061-0.126-0.217-0.174-0.338-0.102H4.357c-0.057,0.033-0.092,0.096-0.09,0.162 c0.023,1.211,0.269,2.396,0.712,3.482l0.526,1.082c0.195,0.342,0.412,0.67,0.649,0.98c0.058,0.076,0.068,0.174,0.027,0.258 c0,0.002,0,0.002,0,0.002c-0.023,0.045-0.025,0.098-0.003,0.143l0.454,0.934c0.021,0.045,0.057,0.082,0.101,0.105l1.154,0.625 c0.068,0.037,0.151,0.039,0.221,0.004l0.015-0.008c0.117-0.059,0.165-0.199,0.108-0.316L4.696,13.119z" />
+      <path d="M18.719,12.536l-1.287-0.315c-0.219-0.054-0.445,0.061-0.531,0.27l-2.82,6.827 c-0.079,0.191-0.02,0.412,0.146,0.537l0.748,0.568c0.23,0.176,0.564,0.094,0.688-0.168l3.36-7.078 C19.147,12.914,19,12.604,18.719,12.536z" />
+      <path d="M18.494,17.746l0.527-1.084c0.442-1.086,0.688-2.271,0.711-3.482c0.001-0.066-0.033-0.129-0.09-0.162 h-0.002c-0.121-0.073-0.277-0.025-0.338,0.102l-3.535,7.352c-0.057,0.117-0.008,0.258,0.109,0.316l0.015,0.008 c0.069,0.035,0.152,0.033,0.222-0.004l1.153-0.625c0.044-0.023,0.079-0.061,0.101-0.105l0.455-0.934 c0.021-0.045,0.019-0.098-0.004-0.143c0,0,0,0,0-0.002c-0.042-0.084-0.031-0.182,0.026-0.258 C18.082,18.414,18.299,18.088,18.494,17.746z" />
+    </>
+  ),
 };
 
 NewRelicIcon.propTypes = {

src/data/sidenav.json

@@ -485,5 +485,9 @@
   {
     "displayName": "Developer champions",
     "url": "/developer-champion"
+  },
+  {
+    "displayName": "Podcasts",
+    "url": "/podcasts"
   }
 ]

src/pages/index.js

@@ -15,6 +15,7 @@ import { PageContext } from '../components/PageContext';
 import { pageContext } from '../types';
 import styles from './index.module.scss';
 import devChampionBadge from '../images/developer-champion/dev-champion-badge.png';
+import podcastBadge from '../images/podcasts/podcasts-badge.png';
 
 const getStartedGuides = [
   {
@@ -213,6 +214,28 @@ const IndexPage = ({ data, pageContext }) => {
             alt="developer champion badge"
           />
         </section>
+
+        <section
+          className={cx(
+            styles.section,
+            styles.stripedSection,
+            styles.developerChampions
+          )}
+        >
+          <div>
+            <h1>New Relic Podcasts</h1>
+            <p>
+              We like to talk, especially to developers about developer things.
+              Join us for conversations on open source, observability, software
+              design and industry news.
+            </p>
+            <Button as={Link} variant={Button.VARIANT.PRIMARY} href="/podcasts">
+              Listen
+              <FeatherIcon className={styles.Icon} name="link" />
+            </Button>
+          </div>
+          <img className={styles.img} src={podcastBadge} alt="podcast badge" />
+        </section>
       </>
     </PageContext.Provider>
   );

src/pages/podcasts.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import cx from 'classnames';
+import SEO from '../components/Seo';
+import PageTitle from '../components/PageTitle';
+import podcastsHeader from '../images/podcasts/podcasts.jpg';
+import styles from './podcasts.module.scss';
+
+const PodcastsPage = () => {
+  return (
+    <>
+      <SEO />
+      <PageTitle>New Relic Podcasts</PageTitle>
+      <section className={cx(styles.section, styles.twoColumn)}>
+        <div>
+          <p>
+            Sometimes we talk on the internet about some things. You probably
+            listen to some things on the internet sometimes. We're perfect for
+            each other.
+          </p>
+          <p>
+            We're in the process of spinning up a few podcasts to bring you all
+            the news, code and pontification that's fit for publication, and
+            rather a lot that isn't as well.
+          </p>
+          <p>
+            For the time being we have one podcast, so we're including it here
+            for your listening enjoyment.
+          </p>
+          <p>
+            While it may seem silly to start an entire page for podcasts when we
+            only have the one (we should really have called it 'podcast' page),
+            we had to start somewhere.
+          </p>
+          <p>
+            <blockquote>
+              <p>
+                "Omnium rerum principia parva sunt" (All things have small
+                beginnings)
+              </p>
+              <footer>- Marcus Tullius Cicero (106 BC - 43 BC)</footer>
+            </blockquote>
+          </p>
+          <p>
+            We hope you enjoy it. If you don't please feel free to{' '}
+            <a href="mailto:[email protected]">send us mean emails.</a> It's
+            internet tradition.
+          </p>
+        </div>
+        <img
+          className={styles.img}
+          src={podcastsHeader}
+          alt="podcasts header"
+        />
+      </section>
+      <section className={cx(styles.section, styles.player)}>
+        <div id="buzzsprout-player">
+          <iframe
+            title="buzzsprout"
+            src="https://www.buzzsprout.com/1225223/4619918-code-red-observability-meltdown?client_source=small_player&amp;iframe=true&amp;referrer=https%253A%252F%252Fwww.buzzsprout.com%252F1225223%252F4619918-code-red-observability-meltdown.js%253Fcontainer_id%253Dbuzzsprout-player%2526player%253Dsmall%22%20width=%22100%25%22%20height=%22200%22%20frameborder=%220%22%20scrolling=%22no%22"
+          />
+        </div>
+      </section>
+    </>
+  );
+};
+
+export default PodcastsPage;

src/pages/podcasts.module.scss

@@ -0,0 +1,21 @@
+.section {
+  &:not(:last-child) {
+    margin-bottom: 4rem;
+  }
+}
+
+.twoColumn {
+  display: grid;
+  grid-template-columns: repeat(2, calc(50% - 1rem));
+  grid-gap: 2rem;
+}
+
+.img {
+  width: 100%;
+}
+
+.player iframe {
+  width: 100%;
+  height: 421px;
+  border: none;
+}