Brand header theme component breaks page layout on static and no_ember pages

dev
4

Workaround

While digging for the root cause, we have been able to spot something we filed at Almost void Discourse object instance will sneak through some safeguards and finally have been able to produce a workaround which works for us.

Mitigate the runtime error

One of the symptoms of this issue was the error message

TypeError: Discourse._registerPluginCode is not a function

revealing something along the way did not get initialized properly.

By following a specific hint found on GitHub from @sam (thanks again!), we have been able to work around the core problem which made Discourse plugin components croak on static and no_ember pages in general:

Learn about the brand header theme component

Before going to the next step, let’s investigate how the Brand header theme component manifests itself into the DOM. While most of its CSS (see common.scss) roams around with the .b-header class, there are two single CSS rules which just move the regular Discourse header a few pixels down, which we identified as a kind of an entrypoint regarding the CSS domain:

Thoughts

The problem looked like it was easy to tackle now.

By piggybacking on the workaround unlocked before, we would just visually toggle off the brand theme header by resetting the css property margin-top of the regular Discourse header through its .d-header class to its initial value, right? Challenge accepted ;].

That’s it

<!--
Work around `TypeError: Discourse._registerPluginCode is not a function`, see also:
- https://meta.discourse.org/t/typeerror-discourse-registerplugincode-is-not-a-function/88572
- https://meta.discourse.org/t/javascript-not-loading-on-certain-pages/92297

This resets the css property "margin-top" on the "d-header" class
to work around an obstacle with the banner header theme component.
-->
<script language="javascript">
    if (!('Discourse' in window)) {
        window.Discourse = {};
    }
    if ('Discourse' in window && !('_registerPluginCode' in window.Discourse)) {
        window.Discourse._registerPluginCode = function() {
            $(document).ready(function() {
                $('.d-header').css('margin-top', 'initial');
            });
        };
    }
</script>

Important note

Amending the margin-top css property will only work in the Header phase (or maybe later) of a theme component and after document.ready() has been signaled.

So, please run this from inside the Header phase or later (</head> will be too early!) of a theme component. Otherwise, it will not work.

Repeat ;].

Hope this helps.

1 Like