In a Discourse instance I maintain, I have a component (inherited from the previous maintainer of the instance) to display the logos of the sponsors of that instance in the footer. The component used to work fine until recently, but now is rendered wrongly, displaying the template control directives literally (and putting the template value placeholders literally into the HTML, so that the paths to the images aren’t resolved):
The component isn’t maintained in a git repo, it’s configured directly under “Admin” → “Appearance” → “Themes & components” → tab “Components”:
Custom Code
Custom sections:
- Common: CSS, Footer, JS
Uploads
- $geoaargau: geoaargau.jpg
- $asseco_berit: asseco_berit.jpg
Extra files
Export theme to view these files.
- javascripts/discourse/api-initializers/theme-initializer.gjs
content of those “sections”
as seen when clicking “Edit Code”; path to corresponding files in the export given in parentheses
CSS (common/common.scss)
.sponsors {
.inner {
display: flex;
align-items: center;
justify-content: space-around;
margin-bottom: 10px;
}
.heading {
font-size: 1.75em;
}
.sponsor-image {
max-height: 55px;
}
.geoaargau {
max-height: 45px;
}
}
Footer (common/footer.html)
{{#if displaySponsors}}
<div class="sponsors-wrapper wrap">
<div class="inner">
<h3 class="heading">Sponsoren</h3>
<a href="http://www.asseco-berit.ch/"><img src="{{theme-setting "theme_uploads.asseco_berit"}}" alt="Asseco Berit" class="sponsor-image asseco-berit"></a>
<a href="http://www.geoaargau.ch/"><img src="{{theme-setting "theme_uploads.geoaargau"}}" alt="GEOAargau" class="sponsor-image geoaargau"></a>
</div>
</div>
{{/if}}
JS (javascripts/discourse/api-initializers/theme-initializer.gjs)
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
// This is the plugin outlet, followed by a custom name for the component
api.registerConnectorClass("above-footer", "sponsors", {
setupComponent(args, component) {
var topMenuRoutes =
component.siteSettings.top_menu.split('|')
.map(function(route) {return '/' + route});
var homeRoute = topMenuRoutes[0];
api.onPageChange((url) => {
if (url === "/" || url === homeRoute ){
document.querySelector("html").classList.add("sponsors");
component.set("displaySponsors", true);
} else {
document.querySelector("html").classList.remove("sponsors");
component.set("displaySponsors", false);
}
});
}
});
});
The export additionally contains:
about.json (466 Bytes)
which I guess is generated on-the-fly when exporting, so I don’t assume it’s relavant.
The relevant part of the effective DOM with this breakage is:
<div class="custom-footer-content">
{{#if displaySponsors}}
<div class="sponsors-wrapper wrap">
<div class="inner">
<h3 class="heading">Sponsoren</h3>
<a href="http://www.asseco-berit.ch/"><img src="{{theme-setting " theme_uploads.asseco_berit"}}"="" alt="Asseco Berit" class="sponsor-image asseco-berit"></a>
<a href="http://www.geoaargau.ch/"><img src="{{theme-setting " theme_uploads.geoaargau"}}"="" alt="GEOAargau" class="sponsor-image geoaargau"></a>
</div>
</div>
{{/if}}
</div>
so we can see that the control directive {{#if ...}}...{{/if}} and the placeholders {{theme-setting "..."}} were used as literal HTML rather than executed / evaluated / interpolated.
How and why did that change and how should I fix it?
Is it maybe related to Upcoming Header Changes - Preparing Themes and Plugins? (Though I don’t see changes to the templating syntax mentioned there.)
Often, if something is deprecated, the console will throw some useful info out
