Ayuda con el componente Header-widget-override

Hola chicos

Me he tomado el tiempo de actualizar tu aviso de componente

[Aviso de administrador] Uno de tus temas o plugins necesita actualizarse para ser compatible con los próximos cambios principales de Discourse. (id:discourse.header-widget-overrides) Tema identificado: ‘Header Icons’.

Como novato que escribió el componente original con la ayuda de los documentos, mirando ejemplos y ensayo y error. Estoy un poco perdido.

La publicación sobre los cambios, Upcoming Header Changes - Preparing Themes and Plugins, asume conocimientos y contexto que me faltan. Y los documentos de ayuda Developing Discourse Themes & Theme Components no hacen referencia a las nuevas API (y parecen un poco desactualizados :frowning: )

Mi componente agrega dos iconos a la cabecera: uno es un enlace a la página del plugin de Documentos, y el otro es un icono que cambia de icono según un valor en un campo personalizado en la configuración.

Actualmente se hace a través de lo siguiente en head_tag.html

Cualquier orientación sería valorada ya que estoy completamente perdido sobre dónde ir para esto.

Gracias

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

Puedes ver todo el github de mi componente aquí: GitHub - bluefroguk1/DiscourseHeaderIcons: This theme component places the Calendar icon + shutter status tick in our Discourse instance bask en mi terrible intento de codificación lol

Hola Martin,

Hice una PR para ayudarte basándome en el código de aquí. Puede que no sea exactamente lo que quieres. Te ayudará a entender cómo usar la nueva API. :+1:

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

Avísame si tienes alguna pregunta.

1 me gusta