From 4debc5effe7deac8b28d7eafe1b6f06d223e7d6c Mon Sep 17 00:00:00 2001
From: Suzu <47468734+Suzu-Gears@users.noreply.github.com>
Date: Mon, 13 Nov 2023 21:27:10 +0900
Subject: [PATCH 1/3] Define CodePenEmbed

---
 .../notion-blocks/CodePenEmbed.astro          | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 src/components/notion-blocks/CodePenEmbed.astro

diff --git a/src/components/notion-blocks/CodePenEmbed.astro b/src/components/notion-blocks/CodePenEmbed.astro
new file mode 100644
index 000000000..90f652a95
--- /dev/null
+++ b/src/components/notion-blocks/CodePenEmbed.astro
@@ -0,0 +1,26 @@
+---
+export interface Props {
+  url: string
+}
+const { url } = Astro.props
+const user = url.pathname.split('/')[1]
+const id = url.pathname.split('/')[3]
+---
+
+<div class="codepen-embed">
+  <p
+    class="codepen"
+    data-height="500"
+    data-slug-hash={id.toString()}
+    data-user={user.toString()}
+    style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
+  >
+  </p>
+</div>
+<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
+
+<style>
+  .codepen-embed {
+    background-color: #fff;
+  }
+</style>

From 0e3d50de2ef93273bb1e22d53b1aed09a9f3ab43 Mon Sep 17 00:00:00 2001
From: Suzu <47468734+Suzu-Gears@users.noreply.github.com>
Date: Mon, 13 Nov 2023 21:27:29 +0900
Subject: [PATCH 2/3] CodePen URL methods

---
 src/lib/blog-helpers.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/lib/blog-helpers.ts b/src/lib/blog-helpers.ts
index 4e14156d5..8d7b6ae57 100644
--- a/src/lib/blog-helpers.ts
+++ b/src/lib/blog-helpers.ts
@@ -220,6 +220,13 @@ export const isPinterestURL = (url: URL): boolean => {
   return /\/pin\/[\d]+/.test(url.pathname)
 }
 
+export const isCodePenURL = (url: URL): boolean => {
+  if (url.hostname !== 'codepen.io' && url.hostname !== 'www.codepen.io') {
+    return false
+  }
+  return /\/[^/]+\/pen\/[^/]+/.test(url.pathname)
+}
+
 export const isShortAmazonURL = (url: URL): boolean => {
   if (url.hostname === 'amzn.to' || url.hostname === 'www.amzn.to') {
     return true

From a7234da5012207f1aa58b430b85a48ba500e93c5 Mon Sep 17 00:00:00 2001
From: Suzu <47468734+Suzu-Gears@users.noreply.github.com>
Date: Mon, 13 Nov 2023 21:27:44 +0900
Subject: [PATCH 3/3] Support CodePen embed

---
 src/components/notion-blocks/Embed.astro | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/notion-blocks/Embed.astro b/src/components/notion-blocks/Embed.astro
index ca7a54e9c..ba5b78aba 100644
--- a/src/components/notion-blocks/Embed.astro
+++ b/src/components/notion-blocks/Embed.astro
@@ -5,12 +5,14 @@ import {
   isTikTokURL,
   isInstagramURL,
   isPinterestURL,
+  isCodePenURL,
 } from '../../lib/blog-helpers.ts'
 import Bookmark from './Bookmark.astro'
 import TweetEmbed from './TweetEmbed.astro'
 import TikTokEmbed from './TikTokEmbed.astro'
 import InstagramEmbed from './InstagramEmbed.astro'
 import PinterestEmbed from './PinterestEmbed.astro'
+import CodePenEmbed from './CodePenEmbed.astro'
 
 export interface Props {
   block: interfaces.Block
@@ -37,6 +39,8 @@ try {
       <InstagramEmbed url={url} />
     ) : isPinterestURL(url) ? (
       <PinterestEmbed url={url} />
+    ) : isCodePenURL(url) ? (
+      <CodePenEmbed url={url} />
     ) : (
       <Bookmark block={block} urlMap={urlMap} />
     )