@bashbers/astro-image-dithering
Version:
Astro image dithering plugin - converts png's in project to dithered.pngs and uses them inside markdown files.
45 lines (42 loc) • 2.25 kB
JavaScript
import { visit } from 'unist-util-visit';
import path from 'node:path';
export const rehypeDitheredImageContainerHtml = () => {
return (tree) => {
visit(tree, 'element', (node, index, parent) => {
if (node.tagName === 'img' && parent) {
const originalSrc = node.properties?.src;
const alt = node.properties?.alt || '';
if (typeof originalSrc === 'string') {
const parsed = path.parse(originalSrc);
// Presume we pass the original src as input in the MD file.
const ditheredSrc = path.join(parsed.dir, `${parsed.name}-dithered${parsed.ext}`);
// Start with the dithered image as src
const html = `
<figure class="dithered-image-container" data-src-a="${originalSrc}" data-src-b="${ditheredSrc}">
<img class="dithered" src="${ditheredSrc}" alt="${alt}" />
<button class="dithered-button" type="button">
<svg width="15" height="15" viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg">
<rect width="30" height="30" x="0" y="0" fill="black" />
<rect width="30" height="30" x="30" y="0" fill="transparent" />
<rect width="30" height="30" x="60" y="0" fill="black" />
<rect width="30" height="30" x="0" y="30" fill="transparent" />
<rect width="30" height="30" x="30" y="30" fill="black" />
<rect width="30" height="30" x="60" y="30" fill="transparent" />
<rect width="30" height="30" x="0" y="60" fill="black" />
<rect width="30" height="30" x="30" y="60" fill="transparent" />
<rect width="30" height="30" x="60" y="60" fill="black" />
</svg>
<span class="dithered-label">Toggle image</span>
</button>
</figure>
`;
parent.children[index] = {
type: 'raw',
value: html,
};
}
}
});
};
};
export default rehypeDitheredImageContainerHtml;