Aide concernant le composant Header-widget-override

Salut tout le monde

J’ai pris le temps de mettre à jour votre composant, avis

[Avis d’administrateur] L’un de vos thèmes ou plugins nécessite une mise à jour pour être compatible avec les changements à venir dans le noyau de Discourse. (id:discourse.header-widget-overrides) Thème identifié : ‘Header Icons’.

En tant que nouveau venu qui a écrit le composant original à l’aide des documents d’aide, en regardant des exemples et par essais et erreurs. Je suis un peu perdu.

Le post sur les changements, Upcoming Header Changes - Preparing Themes and Plugins suppose des connaissances et un contexte que je n’ai pas. Et les documents d’aide Developing Discourse Themes & Theme Components ne font pas référence aux nouvelles API (et semblent un peu obsolètes maintenant :frowning: )

Mon composant ajoute deux icônes à l’en-tête - l’une est un lien vers la page du plugin Documents, et l’autre est une icône qui change d’icône en fonction d’une valeur dans un champ personnalisé dans les paramètres.

C’est actuellement fait via le code ci-dessous dans head_tag.html

Toute aide serait appréciée car je suis complètement perdu sur la façon de procéder.

Merci

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

Vous pouvez voir tout le github de mon composant ici : GitHub - bluefroguk1/DiscourseHeaderIcons: This theme component places the Calendar icon + shutter status tick in our Discourse instance, admirez ma terrible tentative de codage lol

Salut Martin,

J’ai fait une PR pour t’aider en me basant sur le code ici. Ce n’est peut-être pas exactement ce que tu veux. Cela t’aidera à comprendre comment utiliser la nouvelle API. :+1:

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

Fais-moi savoir si tu as des questions.

1 « J'aime »