add arcade embed

lib/contentfulBlogPosts.js

@@ -76,6 +76,7 @@ const ContentfulBlogPosts = {
                     }
                     __typename
                     ${GraphQLStringBlocks.videoEmbed()}
+                    ${GraphQLStringBlocks.arcadeEmbed()}
                     ${GraphQLStringBlocks.callout()}
                     ${GraphQLStringBlocks.codeBlock()}
                     ${GraphQLStringBlocks.blogPost()}

lib/graphQLStringBlocks.js

@@ -123,6 +123,14 @@ const GraphQLStringBlocks = {
     }
     `;
   },
+  arcadeEmbed: function () {
+    return `
+    ... on ArcadeEmbed {
+        title
+        embedCode
+      }
+    `;
+  },
   videoEmbed: function () {
     return `
     ... on VideoEmbed {

src/_components/arcadeEmbed.js

@@ -0,0 +1,8 @@
+function ArcadeEmbed({ embedCode, title }) {
+  return /* html */ `
+    <div class="post__arcadeEmbed">
+      ${embedCode}>
+    </div>`;
+}
+
+module.exports = ArcadeEmbed;

src/_components/richText.js

@@ -7,6 +7,7 @@ const ResponsiveImage = require("./responsiveImage");
 const Callout = require("./callout");
 const CodeBlock = require("./codeBlock");
 const VideoEmbed = require("./videoEmbed");
+const ArcadeEmbed = require("./arcadeEmbed");
 const CodePenEmbed = require("./codepenEmbed");
 const TweetEmbed = require("./tweetEmbed");
 const BlogPostEmbed = require("./blogPostEmbed");
@@ -121,6 +122,8 @@ function getRichTextRenderOptions(links, options) {
             return TweetEmbed({ tweetUrl: entry.tweetUrl });
           case "VideoEmbed":
             return VideoEmbed({ embedUrl: entry.embedUrl, title: entry.title });
+          case "ArcadeEmbed":
+            return ArcadeEmbed({ embedCode: entry.embedCode, title: entry.title });
           case "Callout":
             return Callout({ title: entry.title, content: entry.content, emoji: entry.emoji });
           case "CodeBlock":

src/_sass/_post.scss

@@ -352,3 +352,8 @@
     @include link_focus;
   }
 }
+
+.post__arcadeEmbed {
+  margin-bottom: 2rem;
+  margin-top: 2rem;
+}