feat: ✨ add CODEPEN component

Author: spences10

src/lib/components/code-pen.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import GeneralObserver from './general-observer.svelte'
+
+  export let width: string = '100'
+  export let height: string = '500'
+  export let codePenId: string = ''
+  export let tabs:
+    | string[]
+    | 'js'
+    | 'css'
+    | 'scss'
+    | 'less'
+    | 'result' = 'result'
+  export let clickToLoad: boolean = true
+  export let editable: boolean = true
+  export let theme: string | 'light' | 'dark' | 'default' = 'default'
+
+  const baseUrl = `https://codepen.io/team/codepen/embed`
+  const src = `${baseUrl}/${
+    clickToLoad ? '/preview' : ''
+  }/${codePenId}/?height=${height}&theme-id=${theme}&default-tab=${tabs}&editable=${editable}`
+</script>
+
+<GeneralObserver {height} {width}>
+  <iframe
+    {height}
+    class="code-pen-sveltekit-embed"
+    title={`codepen-${codePenId}`}
+    {src}
+    frameborder="no"
+    allowfullscreen
+    style={`
+      width: 100%;
+    `}
+  />
+</GeneralObserver>

src/lib/index.ts

@@ -1,5 +1,6 @@
 export { default as AnchorFm } from './components/anchor-fm.svelte'
 export { default as Buzzsprout } from './components/buzzsprout.svelte'
+export { default as CodePen } from './components/code-pen.svelte'
 export { default as Deezer } from './components/deezer.svelte'
 export { default as GeneralObserver } from './components/general-observer.svelte'
 export { default as GenericEmbed } from './components/generic-embed.svelte'

src/routes/index.md

@@ -2,6 +2,7 @@
   import {
     AnchorFm,
     Buzzsprout,
+    CodePen,
     Deezer,
     GenericEmbed,
     SimpleCast,
@@ -81,6 +82,39 @@ Output:
   buzzsproutId="190346/9866589-185-scott-spence-from-vba-analyst-to-webdev"
 />
 
+## CodePen
+
+Props:
+
+```ts
+width: string = '100'
+height: string = '500'
+codePenId: string = ''
+tabs:
+  | string[]
+  | 'js'
+  | 'css'
+  | 'scss'
+  | 'less'
+  | 'result' = 'result'
+clickToLoad: boolean = true
+editable: boolean = true
+theme: string | 'light' | 'dark' | 'default' = 'default'
+```
+
+Usage:
+
+For a CodePen URL like this: https://codepen.io/spences10/pen/WNMvXpa
+take the `codePenId` this `WNMvXpa` and add it to the component.
+
+```html
+<CodePen codePenId="WNMvXpa" />
+```
+
+Output:
+
+<CodePen codePenId="WNMvXpa" />
+
 ## Deezer
 
 Props: