Formatted timestamps in the transcript should link!

packages/gatsby-theme-podcast/src/templates/episode-page.js

@@ -3,6 +3,7 @@ import { Link, graphql } from "gatsby";
 import get from "lodash.get";
 import PodcastPlayer from "syntax-podcast-player";
 
+import { MDXProvider } from '@mdx-js/react'
 import { MDXRenderer } from "gatsby-plugin-mdx";
 import Layout from "../components/Layout";
 import Support from "../components/Support";
@@ -11,6 +12,51 @@ import SEO from "../components/SEO";
 import { rhythm } from "../utils/typography";
 
 import "./player-styles.css";
+import "./transcript.css";
+
+const TranscriptParagraph = props => {
+  let hasTimestamp = false;
+  const children = React.Children.toArray(props.children).map((child, i) => {
+    if (i === 0 && typeof child === "string") {
+      const timestamp = child.match(/^\[(\d\d):(\d\d)(?::(\d\d))?\]/);
+      if (timestamp) {
+
+        let seconds = 0;
+        if (timestamp[3]) {
+          seconds =
+            Number(timestamp[1]) * 3600 +
+            Number(timestamp[2]) * 60 +
+            Number(timestamp[3]);
+        } else {
+          seconds = Number(timestamp[1]) * 60 + Number(timestamp[2]);
+        }
+        hasTimestamp = seconds;
+
+        return (
+          <a
+            key={child}
+            className="timestamp"
+            href={`#playFrom=${seconds}`}
+          >
+            {child}
+          </a>
+        );
+      }
+    }
+    return child;
+  });
+
+  return (
+    <p id={hasTimestamp ? `playFrom=${hasTimestamp}` : ''}>
+      {children}
+    </p>
+  );
+};
+
+const components = {
+  p: TranscriptParagraph,
+}
+
 class RssItemPageTemplate extends React.Component {
   render() {
     const rssItem = this.props.data.rssFeedItem;
@@ -66,7 +112,13 @@ class RssItemPageTemplate extends React.Component {
             }}
           />
 
-          <MDXRenderer>{rssItem.childMdx.body}</MDXRenderer>
+          {
+            rssItem.childMdx ?
+              <MDXProvider components={components}>
+                <MDXRenderer>{rssItem.childMdx.body}</MDXRenderer>
+              </MDXProvider>
+            : null
+          }
 
           <p>
             <a href={discussUrl} target="_blank" rel="noopener noreferrer">

packages/gatsby-theme-podcast/src/templates/transcript.css

@@ -0,0 +1,4 @@
+.timestamp {
+  float: left;
+  margin-left: -4.3rem;	
+}

podcast-site/content/episodes/0-intro.mdx

@@ -10,9 +10,15 @@ ygatsby: meh
 
 ## Transcript
 
-Person 1: [00:00](#playFrom=0) So hi, yep, what's up everyone?
+[00:00] **Henry**:  All right. We decided to make a bonus episode. So Nadia wrote a post a month ago about her reading of a book called ["The Death and Life of Great American Cities"]. It talks about cities and how that relates to open source and communities online, that open source is kind of like a digital city. Same with the internet.
 
-Person 2: [00:29](#playFrom=29) Yep we're making a podcast.
+[00:21] **Henry**:  That got me looking into my own research on the topic. I found a paper called ["The City as Liturgy"]. And so I thought it'd be cool to bring on the author. So right now we have Dr. Timothy Patitsas, with us. He's a Assistant Professor of Orthodox Christian Ethics at Holy Cross Greek Orthodox School of Theology in Boston. And he wrote a dissertation called, "The King Returns to His City, an Interpretation of the Great Week and Bright Week Cycle of the Orthodox Church". Thanks for joining us today.
+
+[00:57] **Timothy**: Thank you, Henry. And thank you, Nadia. Thanks for bringing me on.
+
+[01:02] **Nadia**:  That'll be good if we start just by talking a little bit about this theory that you had about City as Liturgy and your reading of Jane Jacobs' work just for the benefit of everyone who hasn't read her work and, also just as a refresher of like what liturgy is and like how that relates to cities in your mind.
+
+[01:19] **Timothy**: So to start with Jane Jacobs, she did not finish college. She did do a couple of years at Colombia in the 1930s. And when she got to a point where they insisted that she choose a major she quit. She wanted to be free to organize her education any way she saw fit. And I mean to follow the intellectual leads as they came to her.
 
 ## Credits