Aside bio code for À l'équilibre Squarespace blog

gistfile.js

// Custom code for Squarespace
// To add bio aside to https://www.alequilibre-nutrition.com/
(() => {
    try {
        const imageSrc = 'https://images.squarespace-cdn.com/content/v1/61d747e813d12769b8b2ae58/e4ba1672-bd46-42e2-8980-f2c19bd84bf3/Romane+A+l%27equilibre+meditation+self+care.jpg?format=120w';
        const linkUrl = '/apropos';
        const linkText = 'À propos';
        const body = 'alal la';
        
        const mobileBreakpoint = 768;
        
        const isMobile = document.documentElement.clientWidth < mobileBreakpoint;
        if (isMobile) {
            return;
        }

        const blogWrapper = document.getElementsByClassName('blog-item-inner-wrapper')[0];
        const header = document.getElementsByClassName('header-announcement-bar-wrapper')[0];
        const headerHeight = header ? header.scrollHeight : 0;
        
        if (!blogWrapper) {
            console.warn('No blogWrapper');
            return;
        }
        const html = `
            <aside id="profile-summary" style="width: 10rem; margin-left: 1rem">
                <div style="position: sticky; top: 0px; padding-top: ${headerHeight}px; overflow: hidden">
                    <div style="text-align: center">
                        <img
                            src="${imageSrc}"
                            style="height: 10rem; margin: 0 auto; border-radius: 50% 50% 3px 3px"
                        />
                    </div>
                    <h2 style="margin-top: 0.5em; margin-bottom: 0.5em; text-align: center">Romane</h2>
                    <p style="text-align: center">${body}</p>
                    <p style="text-align: center"><a href="${linkUrl}">${linkText}</a></p>
                </div>
            </aside>
        `;
        blogWrapper.insertAdjacentHTML('afterend', html);

        const article = blogWrapper.parentElement;
        if (article) {
            article.style.display = 'flex';
            article.style['align-items'] = 'stretch';
        }

        window.addEventListener('resize', function() {
            const isMobile = document.documentElement.clientWidth < mobileBreakpoint;
            const profileSummary = document.getElementById('profile-summary');
            profileSummary.style.display = isMobile ? 'none' : 'block';
        });
    } catch (error) {
        console.error(error);
    }
})();