Header-widget-override 컴포넌트 도움말

여러분 안녕하세요

드디어 시간을 내서 여러분의 컴포넌트에 대한 공지사항을 업데이트했습니다.

[관리자 공지] 다가오는 Discourse 코어 변경 사항과의 호환성을 위해 테마 또는 플러그인 중 하나가 업데이트가 필요합니다. (id:discourse.header-widget-overrides) 식별된 테마: ‘Header Icons’.

원래 컴포넌트를 도움말 문서, 예제, 시행착오를 통해 작성한 초보자로서, 지금은 좀 막막합니다.

변경 사항에 대한 게시물인 Upcoming Header Changes - Preparing Themes and Plugins 은 제가 부족한 지식과 맥락을 전제로 하고 있습니다. 또한 도움말 문서 Developing Discourse Themes & Theme Components 는 새로운 API를 참조하지 않고 있으며(이제는 좀 구식이 된 것 같습니다 :() )

제 컴포넌트는 헤더에 두 개의 아이콘을 추가합니다. 하나는 Documents 플러그인 페이지로 가는 링크이고, 다른 하나는 설정의 커스텀 필드 값에 따라 아이콘이 바뀌는 아이콘입니다.

현재는 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 저장소는 여기에서 볼 수 있습니다: https://github.com/bluefroguk1/DiscourseHeaderIcons 제 엉망진창인 코딩 실력을 구경해 주세요 lol

martin님, 안녕하세요!

여기 있는 코드를 기반으로 도움이 될 수 있도록 PR을 만들었습니다. 정확히 원하시는 내용과는 다를 수 있지만, 새로운 API를 어떻게 사용하는지 이해하는 데 도움이 될 것입니다. :+1:

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

질문이 있으시면 말씀해 주세요.