Aiuto componente Header-widget-override

Ciao ragazzi

Ho trovato il tempo di aggiornare il tuo componente notice

[Avviso Admin] Uno dei tuoi temi o plugin necessita di un aggiornamento per la compatibilità con le modifiche imminenti al core di Discourse. (id:discourse.header-widget-overrides) Tema identificato: ‘Header Icons’.

Essendo un principiante che ha scritto il componente originale usando i documenti di aiuto, guardando esempi e tentativi ed errori. Sono un po’ perso.

Il post sulle modifiche, Upcoming Header Changes - Preparing Themes and Plugins presuppone conoscenze e contesto che mi mancano. E i documenti di aiuto Developing Discourse Themes & Theme Components non fanno riferimento alle nuove API (e sembrano un po’ datati :frowning: )

Il mio componente aggiunge due icone all’header: una è un link alla pagina del plugin Documenti, e l’altra è un’icona che cambia icona in base a un valore in un campo personalizzato nelle impostazioni.

Attualmente è fatto tramite il codice sottostante in head_tag.html

Qualsiasi guida sarebbe apprezzata perché sono completamente perso su dove andare per questo

Grazie

<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 = 'Stato apertura: sconosciuto';
            try {
                const cache = JSON.parse(settings.tool_status);
                const shutter = cache.tools[4];
                if (shutter.status)
                {
                    icon = 'calendar-check';
                    title = 'Aperto dal '+shutter.date;
                }
                else
                {
                    icon = 'calendar-alt';
                    title = 'Chiuso dal '+shutter.date;
                }
            } catch (e) {}
            return helper.h('div.d-header-icons.shutter-status', [
                helper.h('a.icon', {
                    href:'/calendar',
                    title: title
                }, iconNode(icon)),
            ]);
        });
    </script>

Puoi vedere l’intero github del mio componente qui: GitHub - bluefroguk1/DiscourseHeaderIcons: This theme component places the Calendar icon + shutter status tick in our Discourse instance goditi il mio terribile tentativo di codifica lol

Ciao Martin,

Ho creato una PR per aiutarti basata sul codice qui. Potrebbe non essere esattamente quello che desideri. Ti aiuterà a capire come utilizzare la nuova API. :+1:

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

Fammi sapere se hai domande.

1 Mi Piace