diff --git a/astro.config.mjs b/astro.config.mjs index c59dd17..bcd897a 100644 --- a/astro.config.mjs +++ b/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], }, diff --git a/src/pages/[...slug].astro b/src/pages/[...slug].astro index 41908f8..37588c8 100644 --- a/src/pages/[...slug].astro +++ b/src/pages/[...slug].astro @@ -123,4 +123,10 @@ const metadata = { + diff --git a/src/plugins/remark-instagram.mjs b/src/plugins/remark-instagram.mjs new file mode 100644 index 0000000..ae7cb37 --- /dev/null +++ b/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: `
`, + }); + }); + + // Thêm embed.js một lần duy nhất nếu có Instagram embed + if (hasEmbed) { + tree.children.push({ + type: "html", + value: `