add Iframe component to embed codepen

next.config.js

@@ -12,6 +12,20 @@ const nextConfig = {
       },
     ],
   },
+
+  async headers() {
+    return [
+      {
+        source: "/(.*)",
+        headers: [
+          {
+            key: "Content-Security-Policy",
+            value: "frame-ancestors https://codepen.io",
+          },
+        ],
+      },
+    ]
+  },
 }
 
 module.exports = nextConfig

src/app/blog/page.jsx

@@ -4,6 +4,7 @@ import PostListItem from "@/components/PostListItem"
 import paginate from "@/lib/paginate"
 import Pagination from "@/components/Pagination"
 import GradientBlog from "@/components/(decoration)/GradientBlog"
+import Iframe from "@/components/Iframe"
 
 export const revalidate = parseInt(process.env.REVALIDATE_INTERVAL)
 

src/components/Iframe.jsx

@@ -0,0 +1,17 @@
+import React from "react"
+
+const Iframe = ({ title, src, otherClass = "w-full h-[500px]", children }) => {
+  return (
+    <iframe
+      className={otherClass}
+      title={title}
+      src={src}
+      loading="lazy"
+      allowFullScreen={true}
+    >
+      {children}
+    </iframe>
+  )
+}
+
+export default Iframe

src/lib/posts.js

@@ -6,6 +6,8 @@ import Video from "@/components/Video"
 import Button from "@/components/Button"
 import LinkToNewTab from "@/components/LinkToNewTab"
 import HeightTransition from "@/components/(demo)/HeightTransition"
+import Iframe from "@/components/Iframe"
+
 import { s } from "hastscript"
 
 export async function getPostByName(fileName) {
@@ -33,6 +35,7 @@ export async function getPostByName(fileName) {
       Button,
       LinkToNewTab,
       HeightTransition,
+      Iframe,
     },
     options: {
       parseFrontmatter: true,