@yozora/gatsby-images/gatsby-browser.js

Transform markdown files to Yozora AST

const DEFAULT_OPTIONS = {
    maxWidth: 650,
    wrapperStyle: '',
    backgroundColor: 'white',
    decoding: 'async',
    disableBgImageOnAlpha: false,
    disableBgImage: false,
    linkImagesToOriginal: true,
    loading: 'lazy',
    markdownCaptions: false,
    showCaptions: false,
    withWebp: false,
    withAvif: false,
    tracedSVG: false,
};
const imageClass = 'gatsby-resp-image-image';
const imageWrapperClass = 'gatsby-resp-image-wrapper';
const imageBackgroundClass = 'gatsby-resp-image-background-image';
new Set([
    'jpeg',
    'jpg',
    'png',
    'webp',
    'tif',
    'tiff',
    'avif',
]);

function onRouteUpdate(api, pluginOptions = {}) {
    const options = Object.assign({}, DEFAULT_OPTIONS, pluginOptions);
    const imgWrappers = document.querySelectorAll(`.${imageWrapperClass}`);
    for (let i = 0; i < imgWrappers.length; i++) {
        const imageWrapper = imgWrappers[i];
        const bgEl = imageWrapper.querySelector(`.${imageBackgroundClass}`);
        const imgEl = imageWrapper.querySelector(`.${imageClass}`);
        const onImageLoad = () => {
            if (bgEl)
                bgEl.style.transition = 'opacity 0.5s 0.5s';
            if (imgEl)
                imgEl.style.transition = 'opacity 0.5s';
            onImageComplete();
        };
        const onImageComplete = () => {
            if (bgEl)
                bgEl.style.opacity = '0';
            if (imgEl) {
                imgEl.style.opacity = '1';
                imgEl.style.color = 'inherit';
                imgEl.style.boxShadow = `inset 0px 0px 0px 400px ${options.backgroundColor}`;
                imgEl.removeEventListener('load', onImageLoad);
                imgEl.removeEventListener('error', onImageComplete);
            }
        };
        if (imgEl) {
            imgEl.style.opacity = '0';
            imgEl.addEventListener('load', onImageLoad);
            imgEl.addEventListener('error', onImageComplete);
            if (imgEl.complete) {
                onImageComplete();
            }
        }
    }
}

export { onRouteUpdate };