Помощь по компоненту Header-widget-override

Разработка
1

Привет, ребята!

У меня наконец-то появилось время обновить уведомление о вашем компоненте.

[Административное уведомление] Один из ваших тем или плагинов требует обновления для совместимости с предстоящими изменениями в ядре Discourse. (id:discourse.header-widget-overrides) Обнаружена тема: ‘Header Icons’.

Как новичок, который писал этот компонент, используя документацию, примеры и метод проб и ошибок, я немного потерялся.

Пост об изменениях по ссылке Upcoming Header Changes - Preparing Themes and Plugins предполагает наличие знаний и контекста, которых у меня нет. А в документации по ссылке Developing Discourse Themes & Theme Components не упоминаются новые API (и, похоже, она немного устарела :frowning: )

Мой компонент добавляет две иконки в шапку: одна — ссылка на страницу плагина Documents, а другая — иконка, которая меняется в зависимости от значения в пользовательском поле настроек.

image
image416×118 12 KB

Сейчас это реализовано с помощью кода ниже в файле head_tag.html:

Любые советы будут очень кстати, так как я совершенно не знаю, куда двигаться дальше.

Спасибо!

<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>

Весь код моего компонента на GitHub можно посмотреть здесь: GitHub - bluefroguk1/DiscourseHeaderIcons: This theme component places the Calendar icon + shutter status tick in our Discourse instance · GitHub — наслаждайтесь моим ужасным кодом, ха-ха!

2

Привет, Мартин,

Я сделал PR, чтобы помочь тебе, основываясь на коде здесь. Это может быть не совсем то, что ты хочешь. Это поможет тебе понять, как использовать новый API. :+1:

https://github.com/bluefroguk1/DiscourseHeaderIcons/pull/1

Дай знать, если у тебя возникнут вопросы.