From fc71667147b1609d96c44e75d63260ce067bdfa5 Mon Sep 17 00:00:00 2001
From: Akash Bhave <akashbbhave@gmail.com>
Date: Sun, 17 Sep 2023 15:18:21 -0400
Subject: [PATCH] Support embeds in blog posts

---
 .gitignore                             |   3 +
 cms/schema.js                          |   2 +
 cms/schemas/collections/post.js        |   4 +-
 cms/schemas/modular/block-content.js   |   3 +-
 cms/schemas/modular/captioned-image.js |   2 +-
 cms/schemas/modular/code-block.js      |   2 +-
 cms/schemas/modular/embed.js           |  22 ++
 cms/schemas/modular/icon-link.js       |   2 +-
 cms/schemas/singletons/about.js        |   2 +-
 web/package-lock.json                  | 291 ++++++++++++++++++-------
 web/package.json                       |   2 +
 web/src/components/BlockContent.js     |  56 +++++
 web/src/components/BlockContentCode.js |  21 --
 web/src/pages/gpg.js                   |   8 +-
 web/src/pages/index.js                 |  16 +-
 web/src/templates/Post.js              |  20 +-
 web/src/utils/sanity.js                |  14 ++
 17 files changed, 337 insertions(+), 133 deletions(-)
 create mode 100644 cms/schemas/modular/embed.js
 create mode 100644 web/src/components/BlockContent.js
 delete mode 100644 web/src/components/BlockContentCode.js
 create mode 100644 web/src/utils/sanity.js

diff --git a/.gitignore b/.gitignore
index 697fd0a..d6907c2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -83,3 +83,6 @@ sw.*
 
 # macOS
 .DS_Store
+
+# Local Netlify folder
+.netlify
diff --git a/cms/schema.js b/cms/schema.js
index ce570d2..27f813b 100644
--- a/cms/schema.js
+++ b/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,
   ]),
 });
diff --git a/cms/schemas/collections/post.js b/cms/schemas/collections/post.js
index 6889ad6..b56c345 100644
--- a/cms/schemas/collections/post.js
+++ b/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",
     },
     {
diff --git a/cms/schemas/modular/block-content.js b/cms/schemas/modular/block-content.js
index 99cbf4f..573f8db 100644
--- a/cms/schemas/modular/block-content.js
+++ b/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" },
   ],
 };
diff --git a/cms/schemas/modular/captioned-image.js b/cms/schemas/modular/captioned-image.js
index 4e33de3..c0d2d70 100644
--- a/cms/schemas/modular/captioned-image.js
+++ b/cms/schemas/modular/captioned-image.js
@@ -1,6 +1,6 @@
 export default {
   name: "captionedImage",
-  title: "Captioned Image",
+  title: "Captioned image",
   type: "object",
   fields: [
     {
diff --git a/cms/schemas/modular/code-block.js b/cms/schemas/modular/code-block.js
index 8638ca9..fe49834 100644
--- a/cms/schemas/modular/code-block.js
+++ b/cms/schemas/modular/code-block.js
@@ -1,6 +1,6 @@
 export default {
   name: "codeBlock",
-  title: "Code Block",
+  title: "Code block",
   type: "object",
   fields: [
     {
diff --git a/cms/schemas/modular/embed.js b/cms/schemas/modular/embed.js
new file mode 100644
index 0000000..4a82a6a
--- /dev/null
+++ b/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} />
+    ),
+  },
+};
diff --git a/cms/schemas/modular/icon-link.js b/cms/schemas/modular/icon-link.js
index 7b8c14a..a68c0f1 100644
--- a/cms/schemas/modular/icon-link.js
+++ b/cms/schemas/modular/icon-link.js
@@ -1,6 +1,6 @@
 export default {
   name: "iconLink",
-  title: "Icon Link",
+  title: "Icon link",
   type: "object",
   fields: [
     {
diff --git a/cms/schemas/singletons/about.js b/cms/schemas/singletons/about.js
index e1f1caa..15628ef 100644
--- a/cms/schemas/singletons/about.js
+++ b/cms/schemas/singletons/about.js
@@ -43,7 +43,7 @@ export default {
     },
     {
       name: "gpgPublicKey",
-      title: "Public Key",
+      title: "Public key",
       type: "text",
       fieldset: "gpg",
     },
diff --git a/web/package-lock.json b/web/package-lock.json
index 9963067..5e3daea 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -1766,6 +1766,13 @@
         "@sanity/image-url": "^0.140.15",
         "hyperscript": "^2.0.2",
         "object-assign": "^4.1.1"
+      },
+      "dependencies": {
+        "@sanity/image-url": {
+          "version": "0.140.22",
+          "resolved": "https://registry.npmjs.org/@sanity/image-url/-/image-url-0.140.22.tgz",
+          "integrity": "sha512-CAmQZnj+KM7FSEYiWlIGDit072syicYuAw0w7R2ctMzHiZ4p9mE/g6dBnYqrqFUrw2J+GpJgPt+RVspKP8vdqA=="
+        }
       }
     },
     "@sanity/block-content-to-react": {
@@ -1778,42 +1785,50 @@
       }
     },
     "@sanity/client": {
-      "version": "0.144.0",
-      "resolved": "https://registry.npmjs.org/@sanity/client/-/client-0.144.0.tgz",
-      "integrity": "sha512-t1bEA1pb1/oPFRkm8hBRYXZzas1BuIsDgZwuwC0dPEymrI+xM5Hdx6nSyDtgz4NFs8mkPcgQbIzLXuRXt6E7LQ==",
-      "requires": {
-        "@sanity/eventsource": "0.144.0",
-        "@sanity/generate-help-url": "0.144.0",
-        "@sanity/observable": "0.144.0",
-        "deep-assign": "^2.0.0",
-        "get-it": "^5.0.0",
-        "make-error": "^1.3.0",
-        "object-assign": "^4.1.1"
+      "version": "6.4.12",
+      "resolved": "https://registry.npmjs.org/@sanity/client/-/client-6.4.12.tgz",
+      "integrity": "sha512-TuseXC5z0CORO7wKMmhNTiKy/8vjWsN7/PTMy53MUBshlMYE2xPad2QFw1zr+n/7qvNNc/CQ6Y2wVnaXU9PHVg==",
+      "requires": {
+        "@sanity/eventsource": "^5.0.0",
+        "get-it": "^8.4.3",
+        "rxjs": "^7.0.0"
       },
       "dependencies": {
-        "@sanity/generate-help-url": {
-          "version": "0.144.0",
-          "resolved": "https://registry.npmjs.org/@sanity/generate-help-url/-/generate-help-url-0.144.0.tgz",
-          "integrity": "sha512-rtMloCn7azSymOR4hwHhiIB4C6Mv7wU3Gq+0MFByNGX3Vdlm3F55HCXxR/+X3Sey/OPDBucxBt59/iI08pAlMg=="
+        "rxjs": {
+          "version": "7.8.1",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+          "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+          "requires": {
+            "tslib": "^2.1.0"
+          }
+        },
+        "tslib": {
+          "version": "2.6.2",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+          "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
         }
       }
     },
     "@sanity/eventsource": {
-      "version": "0.144.0",
-      "resolved": "https://registry.npmjs.org/@sanity/eventsource/-/eventsource-0.144.0.tgz",
-      "integrity": "sha512-MMuYYETcytAQa2JSduFxSPhwM1RsXYU8+syU8k5WKvKvUZpXy5wRSFHWFmcS5zPbwzRB6CRBl/7Ek5iFXpznvA==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@sanity/eventsource/-/eventsource-5.0.0.tgz",
+      "integrity": "sha512-0ewT+BDzfiamHwitUfRcwsl/RREHjWv6VNZvQ8Q4OnnNKXfEEGXbWmqzof0okOTkp4XELgyliht4Qj28o9AU2g==",
       "requires": {
-        "eventsource": "^1.0.6",
-        "eventsource-polyfill": "^0.9.6"
+        "@types/event-source-polyfill": "1.0.1",
+        "@types/eventsource": "1.1.11",
+        "event-source-polyfill": "1.0.31",
+        "eventsource": "2.0.2"
       },
       "dependencies": {
+        "event-source-polyfill": {
+          "version": "1.0.31",
+          "resolved": "https://registry.npmjs.org/event-source-polyfill/-/event-source-polyfill-1.0.31.tgz",
+          "integrity": "sha512-4IJSItgS/41IxN5UVAVuAyczwZF7ZIEsM1XAoUzIHA6A+xzusEZUutdXz2Nr+MQPLxfTiCvqE79/C8HT8fKFvA=="
+        },
         "eventsource": {
-          "version": "1.0.7",
-          "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-1.0.7.tgz",
-          "integrity": "sha512-4Ln17+vVT0k8aWq+t/bF5arcS3EpT9gYtW66EPacdj/mAFevznsnyoHLPy2BA8gbIQeIHoPsvwmfBftfcG//BQ==",
-          "requires": {
-            "original": "^1.0.0"
-          }
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz",
+          "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA=="
         }
       }
     },
@@ -1823,9 +1838,9 @@
       "integrity": "sha512-H/G/WA9S22TXcXST52CIiTsHx3S2hH0gvK7LnI5w76vfKS0obnDPh8jrPg4xeNRYGPuV9MHYRlyERGpRGoo4Qw=="
     },
     "@sanity/image-url": {
-      "version": "0.140.15",
-      "resolved": "https://registry.npmjs.org/@sanity/image-url/-/image-url-0.140.15.tgz",
-      "integrity": "sha512-SlL3JNWLmWEbnUW7B2vVIUazoRD/a6bg5D8nA4PNvRhu8EEE3WykrONQj7Ibpv/fAwTyxm1u2Hh+sy6f2FHvXg=="
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@sanity/image-url/-/image-url-1.0.2.tgz",
+      "integrity": "sha512-C4+jb2ny3ZbMgEkLd7Z3C75DsxcTEoE+axXQJsQ75ou0AKWGdVsP351hqK6mJUUxn5HCSlu3vznoh7Yljye4cQ=="
     },
     "@sanity/mutator": {
       "version": "0.144.0",
@@ -1858,9 +1873,9 @@
       },
       "dependencies": {
         "rxjs": {
-          "version": "6.5.3",
-          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.3.tgz",
-          "integrity": "sha512-wuYsAYYFdWTAnAaPoKGNhfpWwKZbJW+HgAJ+mImp+Epl7BG8oNWBCTyRM8gba9k4lk8BgWdoYm21Mo/RYhhbgA==",
+          "version": "6.6.7",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
+          "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==",
           "requires": {
             "tslib": "^1.9.0"
           }
@@ -1897,11 +1912,21 @@
       "resolved": "https://registry.npmjs.org/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz",
       "integrity": "sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag=="
     },
+    "@types/event-source-polyfill": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@types/event-source-polyfill/-/event-source-polyfill-1.0.1.tgz",
+      "integrity": "sha512-dls8b0lUgJ/miRApF0efboQ9QZnAm7ofTO6P1ILu8bRPxUFKDxVwFf8+TeuuErmNui6blpltyr7+eV72dbQXlQ=="
+    },
     "@types/events": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
       "integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g=="
     },
+    "@types/eventsource": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@types/eventsource/-/eventsource-1.1.11.tgz",
+      "integrity": "sha512-L7wLDZlWm5mROzv87W0ofIYeQP5K2UhoFnnUyEWLKM6UBb0ZNRgAqp98qE5DkgfBXdWfc2kYmw9KZm4NLjRbsw=="
+    },
     "@types/get-port": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/@types/get-port/-/get-port-0.0.4.tgz",
@@ -5180,7 +5205,7 @@
     "deep-assign": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/deep-assign/-/deep-assign-2.0.0.tgz",
-      "integrity": "sha1-6+BrHwfwja5ZdiDj3RYi83GhxXI=",
+      "integrity": "sha512-2QhG3Kxulu4XIF3WL5C5x0sc/S17JLgm1SfvDfIRsR/5m7ZGmcejII7fZ2RyWhN0UWIJm0TNM/eKow6LAn3evQ==",
       "requires": {
         "is-obj": "^1.0.0"
       }
@@ -6381,7 +6406,7 @@
     "eventsource-polyfill": {
       "version": "0.9.6",
       "resolved": "https://registry.npmjs.org/eventsource-polyfill/-/eventsource-polyfill-0.9.6.tgz",
-      "integrity": "sha1-EODRh/ERsWfyj9q5GIQ859gY8Tw="
+      "integrity": "sha512-LyMFp2oPDGhum2lMvkjqKZEwWd2/AoXyt8aoyftTBMWwPHNgU+2tdxhTHPluDxoz+z4gNj0uHAPR9nqevATMbg=="
     },
     "evp_bytestokey": {
       "version": "1.0.3",
@@ -9048,6 +9073,39 @@
         "url-parse": "^1.4.4"
       },
       "dependencies": {
+        "@sanity/client": {
+          "version": "0.144.0",
+          "resolved": "https://registry.npmjs.org/@sanity/client/-/client-0.144.0.tgz",
+          "integrity": "sha512-t1bEA1pb1/oPFRkm8hBRYXZzas1BuIsDgZwuwC0dPEymrI+xM5Hdx6nSyDtgz4NFs8mkPcgQbIzLXuRXt6E7LQ==",
+          "requires": {
+            "@sanity/eventsource": "0.144.0",
+            "@sanity/generate-help-url": "0.144.0",
+            "@sanity/observable": "0.144.0",
+            "deep-assign": "^2.0.0",
+            "get-it": "^5.0.0",
+            "make-error": "^1.3.0",
+            "object-assign": "^4.1.1"
+          }
+        },
+        "@sanity/eventsource": {
+          "version": "0.144.0",
+          "resolved": "https://registry.npmjs.org/@sanity/eventsource/-/eventsource-0.144.0.tgz",
+          "integrity": "sha512-MMuYYETcytAQa2JSduFxSPhwM1RsXYU8+syU8k5WKvKvUZpXy5wRSFHWFmcS5zPbwzRB6CRBl/7Ek5iFXpznvA==",
+          "requires": {
+            "eventsource": "^1.0.6",
+            "eventsource-polyfill": "^0.9.6"
+          }
+        },
+        "@sanity/generate-help-url": {
+          "version": "0.144.0",
+          "resolved": "https://registry.npmjs.org/@sanity/generate-help-url/-/generate-help-url-0.144.0.tgz",
+          "integrity": "sha512-rtMloCn7azSymOR4hwHhiIB4C6Mv7wU3Gq+0MFByNGX3Vdlm3F55HCXxR/+X3Sey/OPDBucxBt59/iI08pAlMg=="
+        },
+        "@sanity/image-url": {
+          "version": "0.140.22",
+          "resolved": "https://registry.npmjs.org/@sanity/image-url/-/image-url-0.140.22.tgz",
+          "integrity": "sha512-CAmQZnj+KM7FSEYiWlIGDit072syicYuAw0w7R2ctMzHiZ4p9mE/g6dBnYqrqFUrw2J+GpJgPt+RVspKP8vdqA=="
+        },
         "debug": {
           "version": "4.1.1",
           "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
@@ -9056,6 +9114,51 @@
             "ms": "^2.1.1"
           }
         },
+        "eventsource": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-1.1.2.tgz",
+          "integrity": "sha512-xAH3zWhgO2/3KIniEKYPr8plNSzlGINOUqYj0m0u7AB81iRw8b/3E73W6AuU+6klLbaSFmZnaETQ2lXPfAydrA=="
+        },
+        "get-it": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/get-it/-/get-it-5.2.1.tgz",
+          "integrity": "sha512-KDR5lTKmxKd/XyP3egZ8ieIdKLxKrQPKUFxk86MSoytGjxX4STigaFuwtFGmGx/lBPc1YSpi9wyuQJ5uP8WcRA==",
+          "requires": {
+            "@sanity/timed-out": "^4.0.2",
+            "create-error-class": "^3.0.2",
+            "debug": "^2.6.8",
+            "decompress-response": "^3.3.0",
+            "follow-redirects": "^1.2.4",
+            "form-urlencoded": "^2.0.7",
+            "into-stream": "^3.1.0",
+            "is-plain-object": "^2.0.4",
+            "is-retry-allowed": "^1.1.0",
+            "is-stream": "^1.1.0",
+            "nano-pubsub": "^1.0.2",
+            "object-assign": "^4.1.1",
+            "parse-headers": "^2.0.1",
+            "progress-stream": "^2.0.0",
+            "same-origin": "^0.1.1",
+            "simple-concat": "^1.0.0",
+            "tunnel-agent": "^0.6.0",
+            "url-parse": "^1.1.9"
+          },
+          "dependencies": {
+            "debug": {
+              "version": "2.6.9",
+              "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+              "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+              "requires": {
+                "ms": "2.0.0"
+              }
+            },
+            "ms": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+              "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+            }
+          }
+        },
         "get-stream": {
           "version": "5.1.0",
           "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.1.0.tgz",
@@ -9438,43 +9541,86 @@
       "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w=="
     },
     "get-it": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/get-it/-/get-it-5.0.2.tgz",
-      "integrity": "sha512-nEbFn2HvKFWSl8CNmiMZs7prWSwQELCmFak+4NMaTtrB23ePpVKf3/bpjdTjsjWMc/W2a4SrChvmgqwa8fO8UQ==",
-      "requires": {
-        "@sanity/timed-out": "^4.0.2",
-        "create-error-class": "^3.0.2",
-        "debug": "^2.6.8",
-        "decompress-response": "^3.3.0",
-        "follow-redirects": "^1.2.4",
-        "form-urlencoded": "^2.0.7",
-        "in-publish": "^2.0.0",
-        "into-stream": "^3.1.0",
-        "is-plain-object": "^2.0.4",
-        "is-retry-allowed": "^1.1.0",
-        "is-stream": "^1.1.0",
-        "nano-pubsub": "^1.0.2",
-        "object-assign": "^4.1.1",
-        "parse-headers": "^2.0.1",
+      "version": "8.4.3",
+      "resolved": "https://registry.npmjs.org/get-it/-/get-it-8.4.3.tgz",
+      "integrity": "sha512-H9YbPCN3QCbxtojv42fvmrkIYe434qKg1nKpMMtBqwL8U3XprnHMgDbQwMJIxSIFOPpajQPf0BxhjsHoFI0cEQ==",
+      "requires": {
+        "debug": "^4.3.4",
+        "decompress-response": "^7.0.0",
+        "follow-redirects": "^1.15.2",
+        "into-stream": "^6.0.0",
+        "is-plain-object": "^5.0.0",
+        "is-retry-allowed": "^2.2.0",
+        "is-stream": "^2.0.1",
+        "parse-headers": "^2.0.5",
         "progress-stream": "^2.0.0",
-        "same-origin": "^0.1.1",
-        "simple-concat": "^1.0.0",
-        "tunnel-agent": "^0.6.0",
-        "url-parse": "^1.1.9"
+        "tunnel-agent": "^0.6.0"
       },
       "dependencies": {
         "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "version": "4.3.4",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+          "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
           "requires": {
-            "ms": "2.0.0"
+            "ms": "2.1.2"
           }
         },
+        "decompress-response": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-7.0.0.tgz",
+          "integrity": "sha512-6IvPrADQyyPGLpMnUh6kfKiqy7SrbXbjoUuZ90WMBJKErzv2pCiwlGEXjRX9/54OnTq+XFVnkOnOMzclLI5aEA==",
+          "requires": {
+            "mimic-response": "^3.1.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.15.2",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+          "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
+        },
+        "into-stream": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/into-stream/-/into-stream-6.0.0.tgz",
+          "integrity": "sha512-XHbaOAvP+uFKUFsOgoNPRjLkwB+I22JFPFe5OjTkQ0nwgj6+pSjb4NmB6VMxaPshLiOf+zcpOCBQuLwC1KHhZA==",
+          "requires": {
+            "from2": "^2.3.0",
+            "p-is-promise": "^3.0.0"
+          }
+        },
+        "is-plain-object": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+          "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q=="
+        },
+        "is-retry-allowed": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-2.2.0.tgz",
+          "integrity": "sha512-XVm7LOeLpTW4jV19QSH38vkswxoLud8sQ57YwJVTPWdiaI9I8keEhGFpBlslyVsgdQy4Opg8QOLb8YRgsyZiQg=="
+        },
+        "is-stream": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+          "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg=="
+        },
+        "mimic-response": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+          "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ=="
+        },
         "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        },
+        "p-is-promise": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-3.0.0.tgz",
+          "integrity": "sha512-Wo8VsW4IRQSKVXsJCn7TomUaVtyfjVDn3nUP7kE967BQk0CwFpdbZs0X0uk5sW9mkBa9eNM7hCMaG93WUAwxYQ=="
+        },
+        "parse-headers": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.5.tgz",
+          "integrity": "sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA=="
         }
       }
     },
@@ -10461,11 +10607,6 @@
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
     },
-    "in-publish": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz",
-      "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E="
-    },
     "indent-string": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz",
@@ -11815,9 +11956,9 @@
       }
     },
     "make-error": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.5.tgz",
-      "integrity": "sha512-c3sIjNUow0+8swNwVpqoH4YCShKNFkMaw6oH1mNS2haDZQqkeZFlHS3dhoeEbKKmJB4vXpJucU6oH75aDYeE9g=="
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
     },
     "mamacro": {
       "version": "0.0.3",
@@ -12304,7 +12445,7 @@
     "nano-pubsub": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nano-pubsub/-/nano-pubsub-1.0.2.tgz",
-      "integrity": "sha1-NM53b3r5WZFbj3rP6N1rnGbzvek="
+      "integrity": "sha512-HtPs1RbULM/z8wt3BbeeZlxVNiJbl+zQAwwrbc0KAq5NHaCG3MmffOVCpRhNTs+TK67MdN6aZ+5wzPtRZvME+w=="
     },
     "nanomatch": {
       "version": "1.2.13",
@@ -14574,7 +14715,7 @@
     "progress-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/progress-stream/-/progress-stream-2.0.0.tgz",
-      "integrity": "sha1-+sY6Cz0R3qy7CWmrzJOyFLzhntU=",
+      "integrity": "sha512-xJwOWR46jcXUq6EH9yYyqp+I52skPySOeHfkxOZ2IY1AiBi/sFJhbhAKHoV3OTw/omQ45KTio9215dRJ2Yxd3Q==",
       "requires": {
         "speedometer": "~1.0.0",
         "through2": "~2.0.3"
@@ -15783,7 +15924,7 @@
     "same-origin": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/same-origin/-/same-origin-0.1.1.tgz",
-      "integrity": "sha1-wih9MZJXffUXrLvW0UUanDw5FPU="
+      "integrity": "sha512-effkSW9cap879l6CVNdwL5iubVz8tkspqgfiqwgBgFQspV7152WHaLzr5590yR8oFgt7E1d4lO09uUhtAgUPoA=="
     },
     "sax": {
       "version": "1.2.4",
@@ -16577,7 +16718,7 @@
     "speedometer": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/speedometer/-/speedometer-1.0.0.tgz",
-      "integrity": "sha1-zWccsGdSwivKM3Di8zREC+T8YuI="
+      "integrity": "sha512-lgxErLl/7A5+vgIIXsh9MbeukOaCb2axgQ+bKCdIE+ibNT4XNYGNCR1qFEGq6F+YDASXK3Fh/c5FgtZchFolxw=="
     },
     "split-string": {
       "version": "3.1.0",
diff --git a/web/package.json b/web/package.json
index eee91e4..ea87a1a 100644
--- a/web/package.json
+++ b/web/package.json
@@ -6,6 +6,8 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.11.2",
     "@sanity/block-content-to-react": "^2.0.7",
+    "@sanity/client": "^6.4.12",
+    "@sanity/image-url": "^1.0.2",
     "axios": "^0.19.0",
     "dotenv": "^8.2.0",
     "gatsby": "2.15.1",
diff --git a/web/src/components/BlockContent.js b/web/src/components/BlockContent.js
new file mode 100644
index 0000000..4789558
--- /dev/null
+++ b/web/src/components/BlockContent.js
@@ -0,0 +1,56 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Highlight from "react-highlight";
+
+import SanityBlockContent from "@sanity/block-content-to-react";
+import { sanityImage } from "~utils/sanity";
+
+export const BlockContentCode = ({ node }) => (
+  <div className="my-8">
+    <Highlight className={node.language || ""}>
+      <p className="text-dark relative hljs-language bg-light font-light px-2 py-1 uppercase border-2 border-blue-primary font-sans">
+        {node.language || "unknown"}
+      </p>
+      <code className={node.language || ""}>{node.code.code}</code>
+    </Highlight>
+  </div>
+);
+
+const BlockContentEmbed = ({ node }) => (
+  <iframe src={node.url} className="py-3 w-full" height="600" />
+);
+
+const BlockContentImage = ({ node }) => (
+  <div className="mb-6">
+    <img
+      src={sanityImage(node.image.asset)
+        .width(1500)
+        .url()}
+    />
+    <p className="text-center opacity-75 italic" style={{ marginTop: "-10px" }}>
+      {node.caption}
+    </p>
+  </div>
+);
+
+BlockContentCode.propTypes = {
+  code: PropTypes.object,
+  language: PropTypes.string
+};
+
+const BlockContent = ({ body }) => (
+  <SanityBlockContent
+    blocks={body || []}
+    serializers={{
+      types: {
+        codeBlock: BlockContentCode,
+        embed: BlockContentEmbed,
+        captionedImage: BlockContentImage
+      }
+    }}
+    projectId={process.env.GATSBY_SANITY_ID}
+    dataset={process.env.GATSBY_SANITY_DATASET}
+  />
+);
+
+export default BlockContent;
diff --git a/web/src/components/BlockContentCode.js b/web/src/components/BlockContentCode.js
deleted file mode 100644
index 452fd4f..0000000
--- a/web/src/components/BlockContentCode.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import Highlight from "react-highlight";
-
-const BlockContentCode = ({ node }) => (
-  <div className="my-8">
-    <Highlight className={node.language || ""}>
-      <p className="text-dark relative hljs-language bg-light font-light px-2 py-1 uppercase border-2 border-blue-primary font-sans">
-        {node.language || "unknown"}
-      </p>
-      <code classname={node.language || ""}>{node.code.code}</code>
-    </Highlight>
-  </div>
-);
-
-BlockContentCode.propTypes = {
-  code: PropTypes.object,
-  language: PropTypes.string,
-};
-
-export default BlockContentCode;
diff --git a/web/src/pages/gpg.js b/web/src/pages/gpg.js
index cf8bc2a..1701374 100644
--- a/web/src/pages/gpg.js
+++ b/web/src/pages/gpg.js
@@ -4,7 +4,7 @@ import { graphql } from "gatsby";
 import Layout from "~layouts/default";
 import SEO from "~utils/seo";
 import PageTitle from "~components/PageTitle";
-import BlockContentCode from "~components/BlockContentCode";
+import { BlockContentCode } from "~components/BlockContent";
 
 const GPGPage = ({ data }) => (
   <Layout>
@@ -18,7 +18,7 @@ const GPGPage = ({ data }) => (
         <BlockContentCode
           node={{
             code: { code: data.page.gpgId },
-            language: "plaintext",
+            language: "plaintext"
           }}
         />
       </div>
@@ -27,7 +27,7 @@ const GPGPage = ({ data }) => (
         <BlockContentCode
           node={{
             code: { code: data.page.gpgFingerprint },
-            language: "plaintext",
+            language: "plaintext"
           }}
         />
       </div>
@@ -36,7 +36,7 @@ const GPGPage = ({ data }) => (
         <BlockContentCode
           node={{
             code: { code: data.page.gpgPublicKey },
-            language: "plaintext",
+            language: "plaintext"
           }}
         />
       </div>
diff --git a/web/src/pages/index.js b/web/src/pages/index.js
index c2e0998..110100e 100644
--- a/web/src/pages/index.js
+++ b/web/src/pages/index.js
@@ -3,8 +3,7 @@ import { graphql } from "gatsby";
 import BackgroundImage from "gatsby-background-image";
 import Image from "gatsby-image";
 
-import BlockContent from "@sanity/block-content-to-react";
-import BlockContentCode from "~components/BlockContentCode";
+import BlockContent from "~components/BlockContent";
 
 import Typewriter from "typewriter-effect";
 import Layout from "~layouts/default";
@@ -28,10 +27,10 @@ const IndexPage = ({ data }) => (
             <Typewriter
               options={{
                 // Append period to each phrase
-                strings: data.page.phrases.map((phrase) => phrase + "."),
+                strings: data.page.phrases.map(phrase => phrase + "."),
                 autoStart: true,
                 loop: true,
-                delay: "natural",
+                delay: "natural"
               }}
             />
           </div>
@@ -56,14 +55,7 @@ const IndexPage = ({ data }) => (
           </div>
         </div>
         <div className="style-normal md:w-2/3 w-full flex md:justify-start md:ml-8 md:-mr-8">
-          <BlockContent
-            blocks={data.about._rawDescription || []}
-            serializers={{
-              types: { codeBlock: BlockContentCode },
-            }}
-            projectId={process.env.GATSBY_SANITY_ID}
-            dataset={process.env.GATSBY_SANITY_DATASET}
-          />
+          <BlockContent body={data.about._rawDescription} />
         </div>
       </div>
     </section>
diff --git a/web/src/templates/Post.js b/web/src/templates/Post.js
index 709908f..4d3d2c6 100644
--- a/web/src/templates/Post.js
+++ b/web/src/templates/Post.js
@@ -1,8 +1,7 @@
 import React from "react";
 import { Link, graphql } from "gatsby";
 
-import BlockContent from "@sanity/block-content-to-react";
-import BlockContentCode from "~components/BlockContentCode";
+import BlockContent from "~components/BlockContent";
 import SEO from "~utils/seo";
 import Layout from "~layouts/informational";
 import PostTypeBadge from "~components/PostTypeBadge";
@@ -29,7 +28,7 @@ const Post = ({ data: { post } }) => {
                 project={post.project}
               />
             </div>
-            <h1 className="md:text-5xl text-4xl font-serif font-bold -mb-2 mt-6">
+            <h1 className="md:text-4xl text-3xl font-serif font-bold -mb-2 mt-6">
               {post.title}
             </h1>
             <h3 className="text-xl mt-4">
@@ -48,13 +47,13 @@ const Post = ({ data: { post } }) => {
                       weekday: "long",
                       year: "numeric",
                       month: "long",
-                      day: "numeric",
-                    },
+                      day: "numeric"
+                    }
                   )}
               </span>
             </h3>
             <div className="mt-6">
-              {post.keywords.map((keyword) => (
+              {post.keywords.map(keyword => (
                 <span
                   className="inline-block mb-2 mx-2 p-2 font-light text-light bg-blue-secondary rounded"
                   key={keyword}
@@ -68,14 +67,7 @@ const Post = ({ data: { post } }) => {
       }
       mainImage={post.mainImage}
     >
-      <BlockContent
-        blocks={post._rawBody || []}
-        serializers={{
-          types: { codeBlock: BlockContentCode },
-        }}
-        projectId={process.env.GATSBY_SANITY_ID}
-        dataset={process.env.GATSBY_SANITY_DATASET}
-      />
+      <BlockContent body={post._rawBody} />
     </Layout>
   );
 };
diff --git a/web/src/utils/sanity.js b/web/src/utils/sanity.js
new file mode 100644
index 0000000..480fc12
--- /dev/null
+++ b/web/src/utils/sanity.js
@@ -0,0 +1,14 @@
+import { createClient } from "@sanity/client";
+import sanityImg from "@sanity/image-url";
+
+export const sanityClient = createClient({
+  projectId: process.env.GATSBY_SANITY_ID,
+  dataset: process.env.GATSBY_SANITY_DATASET,
+  useCdn: true, // set to `false` to bypass the edge cache
+  apiVersion: "2023-05-03" // use current date (YYYY-MM-DD) to target the latest API version
+});
+
+const builder = sanityImg(sanityClient);
+export const sanityImage = source => {
+  return builder.image(source);
+};