MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* ─── Menhirs Fate Wiki — WordPress Header/Footer Integration ──────────────
 *
 * Fetches the live WP header and footer from a server-side proxy (/wp-nav.php)
 * which caches the WordPress site HTML for 1 hour.  The proxy avoids CORS.
 *
 * Astra (WordPress theme) CSS is loaded inside a CSS @layer so it has lower
 * priority than Citizen's unlayered styles, preventing conflicts.
 * ─────────────────────────────────────────────────────────────────────────── */
( function () {
    'use strict';

    /* Load Astra stylesheets inside @layer wp-astra so they lose to Citizen */
    function loadAstraCSS( inlineCSS ) {
        // Inject Astra CSS custom properties (colour tokens, spacing vars)
        if ( inlineCSS ) {
            var s = document.createElement( 'style' );
            s.id = 'mf-wp-inline-css';
            s.textContent = '@layer wp-astra {\n' + inlineCSS + '\n}';
            document.head.appendChild( s );
        }
        // Import Astra theme stylesheets inside a named layer
        var layerStyle = document.createElement( 'style' );
        layerStyle.id = 'mf-wp-astra-imports';
        layerStyle.textContent = [
            '@layer wp-astra {',
            '  @import url("https://www.menhirsfate.com/wp-content/themes/astra/assets/css/minified/main.min.css");',
            '  @import url("https://www.menhirsfate.com/wp-content/themes/astra/assets/css/minified/menu-animation.min.css");',
            '}'
        ].join( '\n' );
        document.head.appendChild( layerStyle );
    }

    /* Insert WP header as first child of <body>, above all Citizen UI */
    function injectHeader( html ) {
        if ( !html ) return;
        var wrap = document.createElement( 'div' );
        wrap.id = 'mf-wp-header';
        wrap.innerHTML = html;
        document.body.insertBefore( wrap, document.body.firstChild );
    }

    /* Append WP footer after all Citizen UI */
    function injectFooter( html ) {
        if ( !html ) return;
        var wrap = document.createElement( 'div' );
        wrap.id = 'mf-wp-footer';
        wrap.innerHTML = html;
        document.body.appendChild( wrap );
    }

    /* Fetch from the server-side proxy — same origin, no CORS needed */
    fetch( '/wp-nav.php', { cache: 'default' } )
        .then( function ( r ) {
            return r.ok ? r.json() : Promise.reject( r.status );
        } )
        .then( function ( data ) {
            loadAstraCSS( data.inlineCSS || '' );
            injectHeader( data.header || '' );
            injectFooter( data.footer || '' );
        } )
        .catch( function () {
            /* Silently fail — wiki remains fully functional without the WP nav */
        } );

}() );