biibaye/addon/extension.js

export default {
    setupExtension(appInstance, universe) {
        const hookService = universe.getService('hook');

        setDocumentTitle();
        injectBrandStyles();
        replaceFavicon();

        hookService.registerHook('application:before-model', () => {
            setDocumentTitle();
            replaceFavicon();
        });
    },
};

function setDocumentTitle() {
    document.title = 'Biibaye - Delivery System';
}

function injectBrandStyles() {
    if (document.getElementById('biibaye-brand-styles')) {
        return;
    }

    const style = document.createElement('style');
    style.id = 'biibaye-brand-styles';
    style.textContent = `
        :root {
            --primary: #FF4500;
            --primary-hover: #e03d00;
        }
        body[data-theme="dark"] {
            background-color: #343538 !important;
        }
    `;
    document.head.appendChild(style);
}

function replaceFavicon() {
    removeExistingFavicons();
    addBiibayeFavicon();
    updateMetaTags();
}

function removeExistingFavicons() {
    document.querySelectorAll('link[rel*="icon"], link[rel="apple-touch-icon"], link[rel="mask-icon"]').forEach((el) => el.remove());
    document.querySelectorAll('meta[name="msapplication-TileColor"], meta[name="theme-color"]').forEach((el) => el.remove());
    const manifestLink = document.querySelector('link[rel="manifest"]');
    if (manifestLink) {
        manifestLink.href = '/favicon/site.webmanifest';
    }
}

function addBiibayeFavicon() {
    const faviconPath = '/favicon';
    const links = [
        { rel: 'icon', type: 'image/x-icon', href: `${faviconPath}/favicon.ico` },
        { rel: 'icon', type: 'image/png', sizes: '16x16', href: `${faviconPath}/favicon-16x16.png` },
        { rel: 'icon', type: 'image/png', sizes: '32x32', href: `${faviconPath}/favicon-32x32.png` },
        { rel: 'icon', type: 'image/png', sizes: '96x96', href: `${faviconPath}/favicon-96x96.png` },
        { rel: 'icon', type: 'image/png', sizes: '192x192', href: `${faviconPath}/android-icon-192x192.png` },
        { rel: 'apple-touch-icon', sizes: '57x57', href: `${faviconPath}/apple-icon-57x57.png` },
        { rel: 'apple-touch-icon', sizes: '60x60', href: `${faviconPath}/apple-icon-60x60.png` },
        { rel: 'apple-touch-icon', sizes: '72x72', href: `${faviconPath}/apple-icon-72x72.png` },
        { rel: 'apple-touch-icon', sizes: '76x76', href: `${faviconPath}/apple-icon-76x76.png` },
        { rel: 'apple-touch-icon', sizes: '114x114', href: `${faviconPath}/apple-icon-114x114.png` },
        { rel: 'apple-touch-icon', sizes: '120x120', href: `${faviconPath}/apple-icon-120x120.png` },
        { rel: 'apple-touch-icon', sizes: '144x144', href: `${faviconPath}/apple-icon-144x144.png` },
        { rel: 'apple-touch-icon', sizes: '152x152', href: `${faviconPath}/apple-icon-152x152.png` },
        { rel: 'apple-touch-icon', sizes: '180x180', href: `${faviconPath}/apple-icon-180x180.png` },
    ];

    links.forEach(({ rel, type, sizes, href }) => {
        const link = document.createElement('link');
        link.rel = rel;
        if (type) link.type = type;
        if (sizes) link.sizes = sizes;
        link.href = href;
        document.head.appendChild(link);
    });
}

function updateMetaTags() {
    const metaTags = [
        { name: 'msapplication-TileColor', content: '#FF4500' },
        { name: 'msapplication-TileImage', content: '/favicon/ms-icon-144x144.png' },
        { name: 'theme-color', content: '#FF4500' },
    ];

    metaTags.forEach(({ name, content }) => {
        const meta = document.createElement('meta');
        meta.name = name;
        meta.content = content;
        document.head.appendChild(meta);
    });
}