chore: replace rehype-plugin-image-native-lazy-loading with our own

`rehype-plugin-image-native-lazy-loading` is no-longer maintained.
https://github.com/potato4d/rehype-plugin-image-native-lazy-loading

I haven't seen the source code of `rehype-plugin-image-native-lazy-loading` to implement this.

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"
   }
 }

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';
+      }
+    });
+  };
+};