fix!: add two new props for CodePenEmmbed component

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
 

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)"}`
           );
         }

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
 

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>

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)"}`
           );
         }

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
 

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>

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)"}`
           );
         }

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
 

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>

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)"}`
           );
         }

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
 

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>

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)"}`
           );
         }

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>

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>

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>

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>