{"_id":"@benjc/rehype-semantic-images","name":"@benjc/rehype-semantic-images","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@benjc/rehype-semantic-images","version":"0.1.0","description":"This unified ecosystem plugin enriches HTML images with semantic elements and customizable features, improving accessibility and performance through options like lazy loading and dynamic source modification.","type":"module","main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","scripts":{"prebuild":"rimraf dist","build":"tsc","test":"vitest","coverage":"vitest run --coverage","coverage:types":"type-coverage --min=100","typecheck":"tsc --noEmit","lint":"xo --prettier","lint:fix":"xo --fix --prettier","format":"prettier --write ."},"repository":{"type":"git","url":"git+https://github.com/benjamincharity/rehype-semantic-images.git"},"keywords":["rehype","rehype-plugin","unified","unified-plugin","html","images","figure"],"author":{"name":"Benjamin Charity","email":"ben.charity@hey.com","url":"https://www.benjamincharity.com/"},"license":"MIT","bugs":{"url":"https://github.com/benjamincharity/rehype-semantic-images/issues"},"homepage":"https://github.com/benjamincharity/rehype-semantic-images#readme","devDependencies":{"@trivago/prettier-plugin-sort-imports":"^4.3.0","@types/hast":"^3.0.4","@types/node":"^20.11.16","@vitest/coverage-v8":"^1.2.2","hast-util-select":"6.0.2","hast-util-to-html":"^9.0.0","hastscript":"^9.0.0","prettier":"^3.2.4","rehype-minify-whitespace":"^6.0.0","rimraf":"^5.0.5","to-vfile":"^8.0.0","type-coverage":"^2.27.1","typecov":"~0.2.3","typescript":"^5.3.3","vite":"^5.0.12","vitest":"^1.2.2","xo":"~0.56.0"},"peerDependencies":{"rehype":"^13.0.0","unified":"^11.0.0"},"engines":{"node":">=18.0.0"},"dependencies":{"unist-util-visit":"5.0.0"},"_id":"@benjc/rehype-semantic-images@0.1.0","gitHead":"13755f0da6340e64805b49ab3560f321ac6889e0","_nodeVersion":"20.11.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-liFJysC+BiQKGPIl46KK2D2cJKveAUDb1vLT4syfwS3qFtsknOBegx6MmIUxFpgB3UUYScjSKDHqL2MA7BtTRQ==","shasum":"e495af1c3a16365f644c9b0c4fff23bfc2d30057","tarball":"https://registry.npmjs.org/@benjc/rehype-semantic-images/-/rehype-semantic-images-0.1.0.tgz","fileCount":6,"unpackedSize":12715,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@benjc%2frehype-semantic-images@0.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICL65S/fbSw8DGbolI91MeQ27jDsKJtlGIokxqZP0HZTAiEA46coCKun89J72F0tiiZHLKnHR3FsJQAYYb927T/Lt+g="}]},"_npmUser":{"name":"benjamincharity","email":"ben.charity@hey.com"},"directories":{},"maintainers":[{"name":"benjamincharity","email":"ben.charity@hey.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rehype-semantic-images_0.1.0_1707090473941_0.656790583537711"},"_hasShrinkwrap":false}},"time":{"created":"2024-02-04T23:47:53.856Z","0.1.0":"2024-02-04T23:47:54.080Z","modified":"2024-02-04T23:47:54.620Z"},"maintainers":[{"name":"benjamincharity","email":"ben.charity@hey.com"}],"description":"This unified ecosystem plugin enriches HTML images with semantic elements and customizable features, improving accessibility and performance through options like lazy loading and dynamic source modification.","homepage":"https://github.com/benjamincharity/rehype-semantic-images#readme","keywords":["rehype","rehype-plugin","unified","unified-plugin","html","images","figure"],"repository":{"type":"git","url":"git+https://github.com/benjamincharity/rehype-semantic-images.git"},"author":{"name":"Benjamin Charity","email":"ben.charity@hey.com","url":"https://www.benjamincharity.com/"},"bugs":{"url":"https://github.com/benjamincharity/rehype-semantic-images/issues"},"license":"MIT","readme":"# rehype-semantic-images\n\n![test workflow](https://github.com/benjamincharity/rehype-semantic-images/actions/workflows/test.yml/badge.svg)\n[![codecov](https://codecov.io/gh/benjamincharity/rehype-semantic-images/branch/main/graph/badge.svg?token=T3Z18P56LV)](https://codecov.io/gh/benjamincharity/rehype-semantic-images)\n\nThis plugin enhances images in HTML documents processed by rehype in the unified ecosystem. It adds semantic elements such as figure, figcaption, and customizable container elements, and supports lazy loading options, custom class names, and IDs. It enables dynamic source set and URL building, which allows developers to improve accessibility, SEO, and performance of web pages. With fine-grained control over image presentation and loading behavior, this plugin provides developers with greater flexibility and customization options.\n\n## Install\n\n```\nnpm i -D @benjc/rehype-semantic-images\n```\n\n## Usage\n\n```typescript\nimport rehypeSemanticImages from \"@benjc/rehype-semantic-images\";\nimport rehype from \"rehype\";\nimport rehypeParse from \"rehype-parse\";\nimport { unified } from \"unified\";\n\nunified()\n .use(rehypeParse, { fragment: true })\n .use(rehypeSemanticImages)\n .process(`\"My`);\n\n// Or with options:\nunified()\n .use(rehypeParse, { fragment: true })\n .use(rehypeSemanticImages, {\n urlBuilder: (src) => `https://my-cdn.com/${src}`,\n })\n .process(`\"My`);\n```\n\n### Input\n\n```html\n\"My\n```\n\n### Output\n\n```html\n
\n
\n \"My\n
\n
My alt text
\n
\n```\n\n## Options\n\n| Option | Type | Description |\n| --------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `urlBuilder` | Function | A function that takes the `src` of an image and returns a new `src`. |\n| `disableLazy` | Boolean | If `true`, the `loading` attribute of the `img` element will be set to `\"eager\"`. Otherwise, it will be set to `\"lazy\"`. |\n| `defaultSizes` | String | The value for the `sizes` attribute of the `img` element. |\n| `elements.img` | Object | An object containing additional properties for the `img` element. |\n| `elements.container` | Object | An object containing properties for the `div` container element. If `disable` is `true`, the container will not be added. |\n| `elements.figcaption` | Object | An object containing properties for the `figcaption` element. If `disable` is `true`, the `figcaption` will not be added. |\n| `elements.figure` | Object | An object containing properties for the `figure` element. If `disable` is `true`, the `figure` will not be added. |\n| `srcSetSteps` | Array of numbers | An array of multipliers for generating the `srcSet` attribute of the `img` element. If not provided or empty, only the original `src` will be used. |\n\nThese options can be passed to the `rehype-semantic-images` plugin as part of the `options` object. For example:\n\n```typescript\nrehypeSemanticImages({\n defaultSizes: \"(min-width: 960px) 720px, 100vw\",\n disableLazy: false,\n elements: {\n container: { className: \"custom-container\", id: \"containerID\", disable: false },\n figcaption: { className: \"custom-figcaption\", id: \"figcaptionID\", disable: false },\n figure: { className: \"custom-figure\", id: \"figureID\", disable: false },\n img: { className: \"custom-image\", id: \"imageID\" },\n },\n srcSetSteps: [1, 2, 3],\n urlBuilder: (src) => `https://my-cdn.com/${src}`,\n});\n```\n\nThis will customize the top and bottom links according to the provided options.\n\n## License\n\n[MIT][license] © [benjamincharity][author]\n\n[license]: license\n[author]: https://www.benjamincharity.com\n","readmeFilename":"README.md"}