diff --git a/packages/shared/content/blog/extended-markdown-style-guide.md b/packages/shared/content/blog/extended-markdown-style-guide.md
index 1e09714..dc41fe9 100644
--- a/packages/shared/content/blog/extended-markdown-style-guide.md
+++ b/packages/shared/content/blog/extended-markdown-style-guide.md
@@ -23,7 +23,7 @@ You can embed tweets in your blog posts.
 
 You can embed codepens in your blog posts.
 
-{% codepen url="https://codepen.io/ruphaa/pen/eYJqjgq" title="Ecosystem - Pen in CSS by Ruphaa" /%}
+{% codepen url="https://codepen.io/ruphaa/pen/eYJqjgq" title="Ecosystem - Pen in CSS by Ruphaa" data-slug-hash="eYJqjgq" data-user="ruphaa" /%}
 
 ## GitHub Gist
 
diff --git a/packages/shared/src/markdoc/markdoc.config.ts b/packages/shared/src/markdoc/markdoc.config.ts
index 7c69187..e80457d 100644
--- a/packages/shared/src/markdoc/markdoc.config.ts
+++ b/packages/shared/src/markdoc/markdoc.config.ts
@@ -88,6 +88,8 @@ export const config: Config = {
       attributes: {
         url: { type: String, required: true },
         title: { type: String, required: true },
+        data_slug_hash: { type: String, required: true },
+        data_user: { type: String, required: true }
       },
       selfClosing: true,
     },
@@ -135,8 +137,7 @@ export const config: Config = {
         const children = node.transformChildren(config);
         if (children.some((child) => typeof child !== "string")) {
           throw new Error(
-            `unexpected non-string child of code block from ${
-              node.location?.file ?? "(unknown file)"
+            `unexpected non-string child of code block from ${node.location?.file ?? "(unknown file)"
             }:${node.location?.start.line ?? "(unknown line)"}`
           );
         }
diff --git a/templates/bubblegum/content/blog/extended-markdown-style-guide.md b/templates/bubblegum/content/blog/extended-markdown-style-guide.md
index 1e09714..dc41fe9 100644
--- a/templates/bubblegum/content/blog/extended-markdown-style-guide.md
+++ b/templates/bubblegum/content/blog/extended-markdown-style-guide.md
@@ -23,7 +23,7 @@ You can embed tweets in your blog posts.
 
 You can embed codepens in your blog posts.
 
-{% codepen url="https://codepen.io/ruphaa/pen/eYJqjgq" title="Ecosystem - Pen in CSS by Ruphaa" /%}
+{% codepen url="https://codepen.io/ruphaa/pen/eYJqjgq" title="Ecosystem - Pen in CSS by Ruphaa" data-slug-hash="eYJqjgq" data-user="ruphaa" /%}
 
 ## GitHub Gist
 
diff --git a/templates/bubblegum/src/components/CodePenEmbed.astro b/templates/bubblegum/src/components/CodePenEmbed.astro
index 9c65bd5..249cb8e 100644
--- a/templates/bubblegum/src/components/CodePenEmbed.astro
+++ b/templates/bubblegum/src/components/CodePenEmbed.astro
@@ -2,17 +2,19 @@
 type Props = {
   url: string;
   title: string;
+  data_user: string
+  data_slug_hash: string
 };
 
-const { url, title } = Astro.props;
+const { url, title, data_user, data_slug_hash } = Astro.props;
 ---
 
 <p
   class="codepen"
   data-height="300"
   data-default-tab="html,result"
-  data-slug-hash="eYJqjgq"
-  data-user="ruphaa"
+  data-slug-hash={data_slug_hash}
+  data-user={data_user}
   style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
 >
   <span><a href={url}>{title}</a></span>
diff --git a/templates/bubblegum/src/lib/markdoc/markdoc.config.ts b/templates/bubblegum/src/lib/markdoc/markdoc.config.ts
index 7c69187..e80457d 100644
--- a/templates/bubblegum/src/lib/markdoc/markdoc.config.ts
+++ b/templates/bubblegum/src/lib/markdoc/markdoc.config.ts
@@ -88,6 +88,8 @@ export const config: Config = {
       attributes: {
         url: { type: String, required: true },
         title: { type: String, required: true },
+        data_slug_hash: { type: String, required: true },
+        data_user: { type: String, required: true }
       },
       selfClosing: true,
     },
@@ -135,8 +137,7 @@ export const config: Config = {
         const children = node.transformChildren(config);
         if (children.some((child) => typeof child !== "string")) {
           throw new Error(
-            `unexpected non-string child of code block from ${
-              node.location?.file ?? "(unknown file)"
+            `unexpected non-string child of code block from ${node.location?.file ?? "(unknown file)"
             }:${node.location?.start.line ?? "(unknown line)"}`
           );
         }
diff --git a/templates/minimal/content/blog/extended-markdown-style-guide.md b/templates/minimal/content/blog/extended-markdown-style-guide.md
index 1e09714..dc41fe9 100644
--- a/templates/minimal/content/blog/extended-markdown-style-guide.md
+++ b/templates/minimal/content/blog/extended-markdown-style-guide.md
@@ -23,7 +23,7 @@ You can embed tweets in your blog posts.
 
 You can embed codepens in your blog posts.
 
-{% codepen url="https://codepen.io/ruphaa/pen/eYJqjgq" title="Ecosystem - Pen in CSS by Ruphaa" /%}
+{% codepen url="https://codepen.io/ruphaa/pen/eYJqjgq" title="Ecosystem - Pen in CSS by Ruphaa" data-slug-hash="eYJqjgq" data-user="ruphaa" /%}
 
 ## GitHub Gist
 
diff --git a/templates/minimal/src/components/CodePenEmbed.astro b/templates/minimal/src/components/CodePenEmbed.astro
index f3c1d9b..cfd75da 100644
--- a/templates/minimal/src/components/CodePenEmbed.astro
+++ b/templates/minimal/src/components/CodePenEmbed.astro
@@ -2,9 +2,11 @@
 type Props = {
   url: string;
   title: string;
+  data_user: string
+  data_slug_hash: string
 };
 
-const { url, title } = Astro.props;
+const { url, title, data_user, data_slug_hash } = Astro.props;
 ---
 
 <!-- 
@@ -16,8 +18,8 @@ const { url, title } = Astro.props;
   class="codepen"
   data-height="300"
   data-default-tab="html,result"
-  data-slug-hash="eYJqjgq"
-  data-user="ruphaa"
+  data-slug-hash={data_slug_hash}
+  data-user={data_user}
   style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
 >
   <span><a href={url}>{title}</a></span>
diff --git a/templates/minimal/src/lib/markdoc/markdoc.config.ts b/templates/minimal/src/lib/markdoc/markdoc.config.ts
index 7c69187..e80457d 100644
--- a/templates/minimal/src/lib/markdoc/markdoc.config.ts
+++ b/templates/minimal/src/lib/markdoc/markdoc.config.ts
@@ -88,6 +88,8 @@ export const config: Config = {
       attributes: {
         url: { type: String, required: true },
         title: { type: String, required: true },
+        data_slug_hash: { type: String, required: true },
+        data_user: { type: String, required: true }
       },
       selfClosing: true,
     },
@@ -135,8 +137,7 @@ export const config: Config = {
         const children = node.transformChildren(config);
         if (children.some((child) => typeof child !== "string")) {
           throw new Error(
-            `unexpected non-string child of code block from ${
-              node.location?.file ?? "(unknown file)"
+            `unexpected non-string child of code block from ${node.location?.file ?? "(unknown file)"
             }:${node.location?.start.line ?? "(unknown line)"}`
           );
         }
diff --git a/templates/newspaper/content/blog/extended-markdown-style-guide.md b/templates/newspaper/content/blog/extended-markdown-style-guide.md
index 1e09714..dc41fe9 100644
--- a/templates/newspaper/content/blog/extended-markdown-style-guide.md
+++ b/templates/newspaper/content/blog/extended-markdown-style-guide.md
@@ -23,7 +23,7 @@ You can embed tweets in your blog posts.
 
 You can embed codepens in your blog posts.
 
-{% codepen url="https://codepen.io/ruphaa/pen/eYJqjgq" title="Ecosystem - Pen in CSS by Ruphaa" /%}
+{% codepen url="https://codepen.io/ruphaa/pen/eYJqjgq" title="Ecosystem - Pen in CSS by Ruphaa" data-slug-hash="eYJqjgq" data-user="ruphaa" /%}
 
 ## GitHub Gist
 
diff --git a/templates/newspaper/src/components/CodePenEmbed.astro b/templates/newspaper/src/components/CodePenEmbed.astro
index 9c65bd5..249cb8e 100644
--- a/templates/newspaper/src/components/CodePenEmbed.astro
+++ b/templates/newspaper/src/components/CodePenEmbed.astro
@@ -2,17 +2,19 @@
 type Props = {
   url: string;
   title: string;
+  data_user: string
+  data_slug_hash: string
 };
 
-const { url, title } = Astro.props;
+const { url, title, data_user, data_slug_hash } = Astro.props;
 ---
 
 <p
   class="codepen"
   data-height="300"
   data-default-tab="html,result"
-  data-slug-hash="eYJqjgq"
-  data-user="ruphaa"
+  data-slug-hash={data_slug_hash}
+  data-user={data_user}
   style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
 >
   <span><a href={url}>{title}</a></span>
diff --git a/templates/newspaper/src/lib/markdoc/markdoc.config.ts b/templates/newspaper/src/lib/markdoc/markdoc.config.ts
index 7c69187..e80457d 100644
--- a/templates/newspaper/src/lib/markdoc/markdoc.config.ts
+++ b/templates/newspaper/src/lib/markdoc/markdoc.config.ts
@@ -88,6 +88,8 @@ export const config: Config = {
       attributes: {
         url: { type: String, required: true },
         title: { type: String, required: true },
+        data_slug_hash: { type: String, required: true },
+        data_user: { type: String, required: true }
       },
       selfClosing: true,
     },
@@ -135,8 +137,7 @@ export const config: Config = {
         const children = node.transformChildren(config);
         if (children.some((child) => typeof child !== "string")) {
           throw new Error(
-            `unexpected non-string child of code block from ${
-              node.location?.file ?? "(unknown file)"
+            `unexpected non-string child of code block from ${node.location?.file ?? "(unknown file)"
             }:${node.location?.start.line ?? "(unknown line)"}`
           );
         }
diff --git a/templates/sleek/content/blog/extended-markdown-style-guide.md b/templates/sleek/content/blog/extended-markdown-style-guide.md
index 1e09714..dc41fe9 100644
--- a/templates/sleek/content/blog/extended-markdown-style-guide.md
+++ b/templates/sleek/content/blog/extended-markdown-style-guide.md
@@ -23,7 +23,7 @@ You can embed tweets in your blog posts.
 
 You can embed codepens in your blog posts.
 
-{% codepen url="https://codepen.io/ruphaa/pen/eYJqjgq" title="Ecosystem - Pen in CSS by Ruphaa" /%}
+{% codepen url="https://codepen.io/ruphaa/pen/eYJqjgq" title="Ecosystem - Pen in CSS by Ruphaa" data-slug-hash="eYJqjgq" data-user="ruphaa" /%}
 
 ## GitHub Gist
 
diff --git a/templates/sleek/src/components/CodePenEmbed.astro b/templates/sleek/src/components/CodePenEmbed.astro
index 9c65bd5..249cb8e 100644
--- a/templates/sleek/src/components/CodePenEmbed.astro
+++ b/templates/sleek/src/components/CodePenEmbed.astro
@@ -2,17 +2,19 @@
 type Props = {
   url: string;
   title: string;
+  data_user: string
+  data_slug_hash: string
 };
 
-const { url, title } = Astro.props;
+const { url, title, data_user, data_slug_hash } = Astro.props;
 ---
 
 <p
   class="codepen"
   data-height="300"
   data-default-tab="html,result"
-  data-slug-hash="eYJqjgq"
-  data-user="ruphaa"
+  data-slug-hash={data_slug_hash}
+  data-user={data_user}
   style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
 >
   <span><a href={url}>{title}</a></span>
diff --git a/templates/sleek/src/lib/markdoc/markdoc.config.ts b/templates/sleek/src/lib/markdoc/markdoc.config.ts
index 7c69187..e80457d 100644
--- a/templates/sleek/src/lib/markdoc/markdoc.config.ts
+++ b/templates/sleek/src/lib/markdoc/markdoc.config.ts
@@ -88,6 +88,8 @@ export const config: Config = {
       attributes: {
         url: { type: String, required: true },
         title: { type: String, required: true },
+        data_slug_hash: { type: String, required: true },
+        data_user: { type: String, required: true }
       },
       selfClosing: true,
     },
@@ -135,8 +137,7 @@ export const config: Config = {
         const children = node.transformChildren(config);
         if (children.some((child) => typeof child !== "string")) {
           throw new Error(
-            `unexpected non-string child of code block from ${
-              node.location?.file ?? "(unknown file)"
+            `unexpected non-string child of code block from ${node.location?.file ?? "(unknown file)"
             }:${node.location?.start.line ?? "(unknown line)"}`
           );
         }
diff --git a/themes/bubblegum/src/components/CodePenEmbed.astro b/themes/bubblegum/src/components/CodePenEmbed.astro
index 9c65bd5..249cb8e 100644
--- a/themes/bubblegum/src/components/CodePenEmbed.astro
+++ b/themes/bubblegum/src/components/CodePenEmbed.astro
@@ -2,17 +2,19 @@
 type Props = {
   url: string;
   title: string;
+  data_user: string
+  data_slug_hash: string
 };
 
-const { url, title } = Astro.props;
+const { url, title, data_user, data_slug_hash } = Astro.props;
 ---
 
 <p
   class="codepen"
   data-height="300"
   data-default-tab="html,result"
-  data-slug-hash="eYJqjgq"
-  data-user="ruphaa"
+  data-slug-hash={data_slug_hash}
+  data-user={data_user}
   style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
 >
   <span><a href={url}>{title}</a></span>
diff --git a/themes/minimal/src/components/CodePenEmbed.astro b/themes/minimal/src/components/CodePenEmbed.astro
index f3c1d9b..cfd75da 100644
--- a/themes/minimal/src/components/CodePenEmbed.astro
+++ b/themes/minimal/src/components/CodePenEmbed.astro
@@ -2,9 +2,11 @@
 type Props = {
   url: string;
   title: string;
+  data_user: string
+  data_slug_hash: string
 };
 
-const { url, title } = Astro.props;
+const { url, title, data_user, data_slug_hash } = Astro.props;
 ---
 
 <!-- 
@@ -16,8 +18,8 @@ const { url, title } = Astro.props;
   class="codepen"
   data-height="300"
   data-default-tab="html,result"
-  data-slug-hash="eYJqjgq"
-  data-user="ruphaa"
+  data-slug-hash={data_slug_hash}
+  data-user={data_user}
   style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
 >
   <span><a href={url}>{title}</a></span>
diff --git a/themes/newspaper/src/components/CodePenEmbed.astro b/themes/newspaper/src/components/CodePenEmbed.astro
index 9c65bd5..249cb8e 100644
--- a/themes/newspaper/src/components/CodePenEmbed.astro
+++ b/themes/newspaper/src/components/CodePenEmbed.astro
@@ -2,17 +2,19 @@
 type Props = {
   url: string;
   title: string;
+  data_user: string
+  data_slug_hash: string
 };
 
-const { url, title } = Astro.props;
+const { url, title, data_user, data_slug_hash } = Astro.props;
 ---
 
 <p
   class="codepen"
   data-height="300"
   data-default-tab="html,result"
-  data-slug-hash="eYJqjgq"
-  data-user="ruphaa"
+  data-slug-hash={data_slug_hash}
+  data-user={data_user}
   style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
 >
   <span><a href={url}>{title}</a></span>
diff --git a/themes/sleek/src/components/CodePenEmbed.astro b/themes/sleek/src/components/CodePenEmbed.astro
index 9c65bd5..249cb8e 100644
--- a/themes/sleek/src/components/CodePenEmbed.astro
+++ b/themes/sleek/src/components/CodePenEmbed.astro
@@ -2,17 +2,19 @@
 type Props = {
   url: string;
   title: string;
+  data_user: string
+  data_slug_hash: string
 };
 
-const { url, title } = Astro.props;
+const { url, title, data_user, data_slug_hash } = Astro.props;
 ---
 
 <p
   class="codepen"
   data-height="300"
   data-default-tab="html,result"
-  data-slug-hash="eYJqjgq"
-  data-user="ruphaa"
+  data-slug-hash={data_slug_hash}
+  data-user={data_user}
   style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
 >
   <span><a href={url}>{title}</a></span>