Merge pull request #172 from Suzu-Gears/support-CodePen-embed

Support CodePen embed

Author: otoyo

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>

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} />
     )

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