Add transcripts to episode pages

[gerhynes]

Emma mentioned in issue #15 wanting to add the transcripts to the episode pages rather than just linking to them on GitHub.

I've come up with one possible solution and wanted to raise it in an issue and get feedback before making a PR.

I did the following:

• Moved /transcripts into /src.

• Sourced the transcripts using gatsby-source-filesystem in gatsby-config.js.

• Updated the GraphQL query in gatsby-node.js to filter out Markdown files that don't have a title in their frontmatter, so that only the episode Markdown files get turned into pages.

• Added a link to the transcript Markdown files to the frontmatter of the episode Markdown files.

• Updated the BlogPostByPath query in the episode.js template to also grab the transcript.

• Added the transcript in a paragraph tag below the episode in episode.js.

My code is here

I also set up a live demo on Netlify to check that it didn't just work on my local machine.

I'm still learning Gatsby so there might be a more straightforward way of doing this. I'd be happy to make any changes.

[dimitrisr]

Hi @GK-Hynes, I think your changes partially fix #25.

When I visit an episode on your page i.e. https://competent-kare-8fe7b2.netlify.com/game-development, I can see the transcript but all other content disappears on reload or when accessing the episode from anywhere else other than the episodes page.

See here: https://imgur.com/a/AcRHJI9

The recordings are with Brave but is the same case with Firefox.

[gerhynes]

Hi @dimitrisr. Thanks so much for finding this.

It looks like I ran into facebook/react#5479 where dangerouslySetInnerHTML does not work with nested <p> tags.

I've changed the two <p> tags in episode.js to <div>s and the content now persists on page reload or when accessing the episode page via url (checked on Firefox, Chrome, and Brave).

[dimitrisr]

Nice one @GK-Hynes! It appears to be working properly now. :)