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

[amotl (Andreas Motl)]

Hi there,

Introduction

We rediscovered an issue with the Brand header theme component which breaks the rendering on 404 pages and other pages without ember, already collected some background information about it and thought it would be a good idea to bring this up as a dedicated topic.

The issue was first brought up by @davisonio at brand header component breaks rendering on confirmation pages and JavaScript not loading on certain pages.

Discussion

@sam and @vinothkannans already started a discussion about how to improve the plugin:

@sam

I think we should probably spend some time and rewrite this so it no longer leans on the plugin interface and works on 404 pages and other pages without ember.

@vinothkannans

Sure, I will try to improve it to support no_ember pages too. But in that case somehow we should have access to the theme_settings.

but sure there are many many things going on so this got lost. That’s why I’m picking this up again, maybe it could attract others working on it. If I will find some time, I would also like to have a look at the details.

Thanks for listening!

Cheers,
Andreas.

[amotl (Andreas Motl)]

Screenshots

In the wild, this issue looks like…

Example 1: After someone deletes their account.

– https://meta.discourse.org/t/brand-header-theme-component/77977/61

Example 2: When someone activates their account.

– https://meta.discourse.org/t/daemonite-material-theme/64521/60

[amotl (Andreas Motl)]

Hi there,

@vinothkannans, the main author of the brand header theme component is already aware of the problem:

@vinothkannans

I think we should probably spend some time and rewrite this so it no longer leans on the plugin interface and works on 404 pages and other pages without ember.

I think this is very related to the above. It’s already in my list for long time. I will improve it soon. Thanks for the report.

Coming from there, we discovered these guys, perfectly complementing what we are up to here:

JavaScript not loading on certain pages

An example is when I visit a 404 page and the custom brand header child theme is installed. The theme component works on most pages but on this page it fails with references errors [23] After closer inspection it seems that no discourse JavaScript code is being generated on some pages e.g. 404 pages. The page in question is https://eurodiscover.eu/404 if anyone has time for a browse.

https://github.com/discourse/discourse/pull/6098

With kind regards,
Andreas.

[amotl (Andreas Motl)]

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:

TypeError: Discourse._registerPluginCode is not a function

By pulling together some educated guessing, improved duck typing and a bit of monkey patching as @sam already might have suggested by his comment referenced above (thanks for the valuable hint!), we have been able to find the root cause and to provide a drop-in workaround. Root cause The root cause must be elsewhere, we just added an appropriate topic outlining our observations. https://meta.discourse.org/t/almost-void-discourse-object-instance-will-sneak-through-some-safeguards/106553 Work…

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:

discourse/discourse-brand-header/blob/47ed15ae/common/common.scss#L90-L96

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.