feat: add Instagram embedding support with remarkInstagram plugin

astro.config.mjs

@@ -8,6 +8,7 @@ import remarkUnwrapImages from "remark-unwrap-images";
 import { remarkR2Images } from "./src/plugins/remark-r2-images.mjs";
 import { rehypePictureWebp } from "./src/plugins/rehype-picture-webp.mjs";
 import { remarkYouTube } from "./src/plugins/remark-youtube.mjs";
+import { remarkInstagram } from "./src/plugins/remark-instagram.mjs";
 
 export default defineConfig({
   site: "https://balodeplao.com/",
@@ -24,6 +25,7 @@ export default defineConfig({
       remarkR2Images,
       remarkUnwrapImages,
       remarkYouTube,
+      remarkInstagram,
     ],
     rehypePlugins: [rehypePictureWebp],
   },

src/pages/[...slug].astro

@@ -123,4 +123,10 @@ const metadata = {
   <script>
     import "lite-youtube-embed/src/lite-yt-embed.js";
   </script>
+  <style is:global>
+    .instagram-media {
+      width: 100% !important;
+      max-width: 100% !important;
+    }
+  </style>
 </BaseLayout>

src/plugins/remark-instagram.mjs

@@ -0,0 +1,34 @@
+import { visit } from "unist-util-visit";
+
+const IG_REGEX = /https?:\/\/(?:www\.)?instagram\.com\/p\/([\w-]+)\/?/;
+
+export function remarkInstagram() {
+  return (tree) => {
+    let hasEmbed = false;
+
+    visit(tree, "paragraph", (node, index, parent) => {
+      if (node.children.length !== 1) return;
+      const child = node.children[0];
+      const url = child.type === "link" ? child.url : child.value;
+      const match = url?.match(IG_REGEX);
+      if (!match) return;
+
+      const postId = match[1];
+      const permalink = `https://www.instagram.com/p/${postId}/`;
+
+      hasEmbed = true;
+      parent.children.splice(index, 1, {
+        type: "html",
+        value: `<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="${permalink}?utm_source=ig_embed" data-instgrm-version="14" style="max-width:540px;min-width:326px;width:100%;margin:1px auto;"></blockquote>`,
+      });
+    });
+
+    // Thêm embed.js một lần duy nhất nếu có Instagram embed
+    if (hasEmbed) {
+      tree.children.push({
+        type: "html",
+        value: `<script async src="//www.instagram.com/embed.js"><\/script>`,
+      });
+    }
+  };
+}