365DevNet/365devnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
`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.
This commit is contained in:
Jumpei Ogawa
2024-08-25 09:31:58 +09:00
parent 06c39796d1
commit 35b7573a4e
2 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@@ -53,11 +53,11 @@
"prettier": "^3.3.3", "prettier": "^3.3.3",
"prettier-plugin-astro": "^0.14.1", "prettier-plugin-astro": "^0.14.1",
"reading-time": "^1.5.0", "reading-time": "^1.5.0",
"rehype-plugin-image-native-lazy-loading": "^1.2.0",
"sharp": "0.33.5", "sharp": "0.33.5",
"tailwind-merge": "^2.5.2", "tailwind-merge": "^2.5.2",
"tailwindcss": "^3.4.10", "tailwindcss": "^3.4.10",
"typescript": "^5.5.4", "typescript": "^5.5.4",
"typescript-eslint": "^8.2.0" "typescript-eslint": "^8.2.0",
"unist-util-visit": "^5.0.0"
} }
} }

14
src/utils/frontmatter.ts
View File

@@ -1,6 +1,6 @@
import getReadingTime from 'reading-time'; import getReadingTime from 'reading-time';
import { toString } from 'mdast-util-to-string'; 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'; import type { MarkdownAstroData, RehypePlugin, RemarkPlugin } from '@astrojs/markdown-remark';
export const readingTimeRemarkPlugin: RemarkPlugin = () => { 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';
}
});
};
};