2

I have set up a Gatsby blog that uses md files to create pages for each blog post. I want to use Narrative.so (photo layouts) for the content of each blog. Using their software, it generates HTML for you to paste into your site's page.

Would this be possible in Gatsby? Here is the HTML it gave me as an example: 

<div class='nar-root' data-post-id='9ab2885d-f0e8-4d00-9c59-135ab04fc384' style='p {text-align:center;opacity: 0.0;animation: nara 0s ease-in 2s forwards;}@keyframes nara {to {opacity: 1.0;}}' >
  <img style="width:100%;" src="https://content1.getnarrativeapp.com/static/9ab2885d-f0e8-4d00-9c59-135ab04fc384/featured.jpg">
  <noscript><p>Your Narrative blog will appear here, click preview to see it live.<br>For any issues click <a href="https://help.narrative.so/i/j">here</a></p></noscript>
  <script type="text/javascript" src="https://service.getnarrativeapp.com/core/embed/r/9ab2885d-f0e8-4d00-9c59-135ab04fc384.js"></script>
</div>
TrevPennington
  • 435
  • 5
  • 15

1 Answers1

1

Yes, it is possible. Here is one possiblity:

  1. Add MDX support to your blog
  2. With MDX you can embed React components into your markdown file. 
// markdown file
import { NarrativePhotoLayout } from '../components/NarrativePhotoLayout'

# Here’s a NarrativePhotoLayout

The NarrativePhotoLayout is rendered inside our MDX document.

<NarrativePhotoLayout/>
  1. Build a React component that contains your HTML. This answer tells you how.
  2. Embed your React component in your blog post.
EliteRaceElephant
  • 7,744
  • 4
  • 47
  • 62
  • Ok thanks. In theory, would dangerouslySetInnerHTML make it work? Pasting in codepen works perfectly (all images appear) but with dangerouslySetInnerHTML in Gatsby, only the first image appears for some reason. – TrevPennington Apr 24 '20 at 17:58