Support embeds in blog posts

Author: AkashBhave

.gitignore

@@ -83,3 +83,6 @@ sw.*
 
 # macOS
 .DS_Store
+
+# Local Netlify folder
+.netlify

cms/schema.js

@@ -8,6 +8,7 @@ import captionedImage from "./schemas/modular/captioned-image";
 import codeBlock from "./schemas/modular/code-block";
 import iconLink from "./schemas/modular/icon-link";
 import skill from "./schemas/modular/skill";
+import embed from "./schemas/modular/embed";
 // Collection schemas
 import post from "./schemas/collections/post";
 import project from "./schemas/collections/project";
@@ -34,5 +35,6 @@ export default createSchema({
     codeBlock,
     iconLink,
     skill,
+    embed,
   ]),
 });

cms/schemas/collections/post.js

@@ -23,7 +23,7 @@ export default {
     },
     {
       name: "mainImage",
-      title: "Main Image",
+      title: "Main image",
       type: "image",
       options: {
         hotspot: true,
@@ -56,7 +56,7 @@ export default {
     },
     {
       name: "publishedAt",
-      title: "Published At",
+      title: "Published at",
       type: "datetime",
     },
     {

cms/schemas/modular/block-content.js

@@ -11,7 +11,7 @@
 
 export default {
   name: "blockContent",
-  title: "Block Content",
+  title: "Block content",
   type: "array",
   of: [
     {
@@ -40,5 +40,6 @@ export default {
     },
     { type: "captionedImage" },
     { type: "codeBlock" },
+    { type: "embed" },
   ],
 };

cms/schemas/modular/captioned-image.js

@@ -1,6 +1,6 @@
 export default {
   name: "captionedImage",
-  title: "Captioned Image",
+  title: "Captioned image",
   type: "object",
   fields: [
     {

cms/schemas/modular/code-block.js

@@ -1,6 +1,6 @@
 export default {
   name: "codeBlock",
-  title: "Code Block",
+  title: "Code block",
   type: "object",
   fields: [
     {

cms/schemas/modular/embed.js

@@ -0,0 +1,22 @@
+import React from "react";
+
+export default {
+  title: "Embed",
+  name: "embed",
+  type: "object",
+  fields: [
+    {
+      title: "URL",
+      name: "url",
+      type: "url",
+    },
+  ],
+  preview: {
+    select: {
+      url: "url",
+    },
+    component: ({ value }) => (
+      <iframe src={value.url} width="100%" height="500px" frameBorder={0} />
+    ),
+  },
+};

cms/schemas/modular/icon-link.js

@@ -1,6 +1,6 @@
 export default {
   name: "iconLink",
-  title: "Icon Link",
+  title: "Icon link",
   type: "object",
   fields: [
     {

cms/schemas/singletons/about.js

@@ -43,7 +43,7 @@ export default {
     },
     {
       name: "gpgPublicKey",
-      title: "Public Key",
+      title: "Public key",
       type: "text",
       fieldset: "gpg",
     },