Header-widget-override component help

Dev
1

Hi Guys

I’ve been getting the time to update your component notice

[Admin Notice] One of your themes or plugins needs updating for compatibility with upcoming Discourse core changes. (id:discourse.header-widget-overrides) Identified theme: ‘Header Icons’.

As a newbie who wrote the original component using the help documents, looking at examples and trial and error. I’m a bit lost.

The post about the changes, Upcoming Header Changes - Preparing Themes and Plugins has assumed knowledge and context that I am lacking. And the help documents Beginner's guide to developing Discourse Themes do not reference the new APIs (and seem a little out of date now :frowning: )

My component adds two icons to the header - one is a link to the Documents plugin’s page, and the other is an icon that changes icon based on a value in a custom field in the settings.

image
image416×118 12 KB

It is currently done via the below in head_tag.html

Any guidance would be valued as i’m completely lost on where to go for this

Thanks

<script type="text/discourse-plugin" version="0.8">
    const { iconNode } = require("discourse-common/lib/icon-library");
    api.decorateWidget('header-icons:before', helper => {
        return helper.h('div.d-header-icons.doc-header-set', [
            helper.h('a.icon.btn-flat.doc', {
                href:'/docs',
                title: 'Documents'
            }, [iconNode("book"), "Documents"]),
        ]);
    });

    
        api.decorateWidget('header-icons:before', (helper) => {
            //https://fontawesome.com/v5.15/icons?d=gallery&p=2&q=times&s=regular,solid&m=free
            let icon = 'calendar';
            let title = 'Open status: unknown';
            try {
                const cache = JSON.parse(settings.tool_status);
                const shutter = cache.tools[4];
                if (shutter.status)
                {
                    icon = 'calendar-check';
                    title = 'Open since '+shutter.date;
                }
                else
                {
                    icon = 'calendar-alt';
                    title = 'Closed since '+shutter.date;
                }
            } catch (e) {}
            return helper.h('div.d-header-icons.shutter-status', [
                helper.h('a.icon', {
                    href:'/calendar',
                    title: title
                }, iconNode(icon)),
            ]);
        });
    </script>

You can see the whole github of my component here: GitHub - bluefroguk1/DiscourseHeaderIcons: This theme component places the Calendar icon + shutter status tick in our Discourse instance bask in my terrible coding attempt lol

2

Hey martin,

I made a PR to help you based on the code here. It may not be exactly what you want. It will help you to understand how to use the new API. :+1:

Let me know if you have any questions.

1 Like