diff --git a/package.json b/package.json index 3e03101..e2b9983 100644 --- a/package.json +++ b/package.json @@ -53,11 +53,11 @@ "prettier": "^3.3.3", "prettier-plugin-astro": "^0.14.1", "reading-time": "^1.5.0", - "rehype-plugin-image-native-lazy-loading": "^1.2.0", "sharp": "0.33.5", "tailwind-merge": "^2.5.2", "tailwindcss": "^3.4.10", "typescript": "^5.5.4", - "typescript-eslint": "^8.2.0" + "typescript-eslint": "^8.2.0", + "unist-util-visit": "^5.0.0" } } diff --git a/src/utils/frontmatter.ts b/src/utils/frontmatter.ts index 7dc10d1..0437104 100644 --- a/src/utils/frontmatter.ts +++ b/src/utils/frontmatter.ts @@ -1,6 +1,6 @@ import getReadingTime from 'reading-time'; import { toString } from 'mdast-util-to-string'; -import lazyLoadPlugin from 'rehype-plugin-image-native-lazy-loading'; +import { visit } from 'unist-util-visit'; import type { MarkdownAstroData, RehypePlugin, RemarkPlugin } from '@astrojs/markdown-remark'; export const readingTimeRemarkPlugin: RemarkPlugin = () => { @@ -35,4 +35,14 @@ export const responsiveTablesRehypePlugin: RehypePlugin = () => { }; }; -export const lazyImagesRehypePlugin = lazyLoadPlugin; +export const lazyImagesRehypePlugin: RehypePlugin = () => { + return function (tree) { + if (!tree.children) return; + + visit(tree, 'element', function (node) { + if (node.tagName === 'img') { + node.properties.loading = 'lazy'; + } + }); + }; +};