├── .discourse-compatibility
├── javascripts
    └── discourse
    │   └── connectors
    │       └── above-site-header
    │           ├── brand-header.hbs
    │           └── brand-header.js.es6
├── README.md
├── about.json
├── desktop
    └── desktop.scss
├── mobile
    ├── mobile.scss
    └── header.html
├── settings.yaml
├── LICENSE.txt
└── common
    ├── common.scss
    └── header.html


/.discourse-compatibility:
--------------------------------------------------------------------------------
1 | 2.6.0.beta3: 79d57c32d579d85590ef50344edf236cad52f9de


--------------------------------------------------------------------------------
/javascripts/discourse/connectors/above-site-header/brand-header.hbs:
--------------------------------------------------------------------------------
1 | {{#if showWidget}}
2 |   {{mount-widget widget="brand-header"}}
3 | {{/if}}


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## Brand header theme component for Discourse
2 | 
3 | More info at: https://meta.discourse.org/t/brand-header-theme-component/77977
4 | 


--------------------------------------------------------------------------------
/about.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Brand Header Theme Component",
3 |   "about_url": "https://meta.discourse.org/t/brand-header-theme-component/77977",
4 |   "license_url": "https://github.com/discourse/discourse-brand-header/blob/main/LICENSE.txt",
5 |   "component": true
6 | }
7 | 


--------------------------------------------------------------------------------
/javascripts/discourse/connectors/above-site-header/brand-header.js.es6:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   setupComponent(args, component) {
 3 |     // show full bar on desktop and on mobile if specifically enabled
 4 |     component.set(
 5 |       "showWidget",
 6 |       !component.site.mobileView || settings.show_bar_on_mobile
 7 |     );
 8 |   },
 9 | };
10 | 


--------------------------------------------------------------------------------
/desktop/desktop.scss:
--------------------------------------------------------------------------------
 1 | .b-header {
 2 |   width: 100%;
 3 |   background-color: var(--header_background);
 4 |   height: 62px;
 5 |   margin-bottom: 0;
 6 |   .title {
 7 |     float: left;
 8 |     margin-right: 24px;
 9 |     a {
10 |       color: var(--secondary);
11 |     }
12 |     &:visited {
13 |       color: var(--secondary);
14 |     }
15 |     .rtl & {
16 |       float: right;
17 |       margin-left: 24px;
18 |       margin-right: 0;
19 |     }
20 |   }
21 | }


--------------------------------------------------------------------------------
/mobile/mobile.scss:
--------------------------------------------------------------------------------
 1 | .b-header {
 2 |   .title {
 3 |     padding: 0.5em;
 4 |     a {
 5 |       color: var(--tertiary);
 6 |     }
 7 |     &:visited {
 8 |       color: var(--tertiary);
 9 |     }
10 |   }
11 |   
12 |   #toggle-hamburger-brand-menu {
13 |     margin: 0;
14 |   
15 |     .d-icon {
16 |       font-size: 1.143em;
17 |       vertical-align: middle;
18 |     }
19 |   }
20 | }
21 | 
22 | .profiler-results {
23 |   display: none;
24 | }
25 | 
26 | // applies when show_bar_on_mobile is checked
27 | .above-site-header-outlet .b-header {
28 |   width: 100%;
29 |   background-color: var(--tertiary);
30 |   height: 48px;
31 |   margin-bottom: 0;
32 | 
33 |   .title {
34 |     float: left;
35 |     margin-right: 24px;
36 |     a {
37 |       color: var(--secondary);
38 |     }
39 |     &:visited {
40 |       color: var(--secondary);
41 |     }
42 |     .rtl & {
43 |       float: right;
44 |       margin-left: 24px;
45 |       margin-right: 0;
46 |     }
47 |   }
48 |   .title {
49 |     padding: 0px;
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/settings.yaml:
--------------------------------------------------------------------------------
 1 | brand_name:
 2 |   default: "Netdata"
 3 | website_url:
 4 |   default: "https://netdata.cloud"
 5 | logo_url:
 6 |   default: "https://github.com/netdata/developer-relations/blob/main/community/Assets/logo_for_brand_header.png?raw=true"
 7 | mobile_logo_url:
 8 |   default: "https://github.com/netdata/developer-relations/blob/main/community/Assets/logo_for_brand_header.png?raw=true"
 9 | links:
10 |   type: list
11 |   list_type: simple
12 |   default: >-
13 |     Get the Agent, https://learn.netdata.cloud/docs/get, _blank|
14 |     Sign into Cloud, https://app.netdata.cloud, _blank|
15 |     Netdata Learn, https://learn.netdata.cloud, _blank|
16 |     Help, https://netdata.cloud/community, _blank
17 | icons:
18 |   type: list
19 |   list_type: simple
20 |   default: ""
21 |   description: "Format: icon-name,url,target (optional)"
22 | custom_font_awesome_icons:
23 |   type: list
24 |   list_type: simple
25 |   default: ""
26 |   description: "List of FontAwesome 5 icons used in this theme component"
27 | show_bar_on_mobile:
28 |   type: bool
29 |   default: false
30 | 


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2017: Discourse
 2 | 
 3 | MIT License
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining
 6 | a copy of this software and associated documentation files (the
 7 | "Software"), to deal in the Software without restriction, including
 8 | without limitation the rights to use, copy, modify, merge, publish,
 9 | distribute, sublicense, and/or sell copies of the Software, and to
10 | permit persons to whom the Software is furnished to do so, subject to
11 | the following conditions:
12 | 
13 | The above copyright notice and this permission notice shall be
14 | included in all copies or substantial portions of the Software.
15 | 
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
23 | 


--------------------------------------------------------------------------------
/common/common.scss:
--------------------------------------------------------------------------------
 1 | .b-header {
 2 |   .contents {
 3 |     margin: 14px 0;
 4 |   }
 5 | 
 6 |   #brand-logo {
 7 |     // max-height: 32px;
 8 |     height: 32px;
 9 |     margin-top: 14px;
10 |   }
11 | 
12 |   #brand-text-logo {
13 |     line-height: 32px;
14 |     margin: 0;
15 |   }
16 | 
17 |   nav.links {
18 |     float: left;
19 |     .rtl & {
20 |       float: right;
21 |     }
22 |   }
23 | 
24 |   .nav-pills {
25 |     margin-bottom: 0;
26 |     > li > a {
27 |       color: var(--secondary);
28 |       line-height: 22px;
29 |       &:hover {
30 |         color: var(--quaternary);
31 |         background-color: var(--quaternary-low);
32 |       }
33 |       &.active > a,
34 |       > a.active {
35 |         color: var(--secondary);
36 |         background-color: var(--quaternary);
37 |       }
38 |     }
39 |   }
40 | 
41 |   .panel {
42 |     float: right;
43 |     position: relative;
44 |     .rtl & {
45 |       float: left;
46 |     }
47 |   }
48 | 
49 |   ul.icons {
50 |     text-align: center;
51 |     margin: 0 0 0 5px;
52 |     > li {
53 |       float: left;
54 |       list-style: none;
55 |     }
56 |     a {
57 |       width: 28px;
58 |       height: 28px;
59 |       font-size: 16px;
60 |       line-height: 28px;
61 |       display: inline-block;
62 |       margin: 2px;
63 |     }
64 |     .rtl & {
65 |       margin: 0 5px 0 0;
66 |       > li {
67 |         float: right;
68 |       }
69 |     }
70 |   }
71 | 
72 |   .panel > ul.icons {
73 |     float: right;
74 |     a,
75 |     .d-icon {
76 |       color: var(--secondary);
77 |     }
78 |     .rtl & {
79 |       float: left;
80 |     }
81 |   }
82 | }


--------------------------------------------------------------------------------
/mobile/header.html:
--------------------------------------------------------------------------------
 1 | <script type="text/discourse-plugin" version="0.8">
 2 |   const { h } = require('virtual-dom');
 3 |   const { later } = require('@ember/runloop');
 4 | 
 5 |   api.createWidget('brand-header-icon', {
 6 |     tagName: 'ul.icons.clearfix',
 7 | 
 8 |     buildAttributes() {
 9 |       return { role: 'navigation' };
10 |     },
11 | 
12 |     html(attrs) {
13 |       const hamburger = this.attach('header-dropdown', {
14 |                               title: 'hamburger_brand_menu',
15 |                               icon: 'bars',
16 |                               iconId: 'toggle-hamburger-brand-menu',
17 |                               active: attrs.brandMenuVisible,
18 |                               action: 'toggleBrandMenu'
19 |                             });
20 |       const icons = [hamburger];
21 |       return icons;
22 |     },
23 |   });
24 | 
25 |   api.createWidget('hamburger-brand-menu', {
26 |     tagName: 'div.hamburger-panel',
27 | 
28 |     panelContents(generalLinks, iconLinks) {
29 |       const results = [];
30 | 
31 |       results.push(this.attach('brand-logo'));
32 |       results.push(h('hr'));
33 |       results.push(this.attach('menu-links', { contents: () => generalLinks }));
34 |       results.push(this.attach('nav-icons', { contents: () => iconLinks }));
35 | 
36 |       return results;
37 |     },
38 | 
39 |     html(attrs) {
40 |       return this.attach('menu-panel', { contents: () => this.panelContents(attrs.generalLinks, attrs.iconLinks) });
41 |     },
42 | 
43 |     clickOutside(e) {
44 |       const panel = document.querySelector('.menu-panel');
45 |       panel.classList.add("animate");
46 |       panel.style.left = `${-window.innerWidth}px`;
47 | 
48 |       const headerCloak = document.querySelector('.header-cloak');
49 |       headerCloak.classList.add("animate");
50 |       headerCloak.style.opacity = 0;
51 |       later(() => this.sendWidgetAction("toggleBrandMenu"), 200);
52 |     }
53 |   });
54 | 
55 |   if (!settings.show_bar_on_mobile) {
56 |     api.reopenWidget('brand-header', {
57 |       defaultState() {
58 |         let states =  {
59 |           brandMenuVisible: false
60 |         };
61 | 
62 |         return states;
63 |       },
64 | 
65 |       toggleBrandMenu() {
66 |         this.state.brandMenuVisible = !this.state.brandMenuVisible;
67 | 
68 |         if (!this.state.brandMenuVisible) {
69 |           const headerCloak = document.querySelector('.header-cloak');
70 |           headerCloak.classList.remove("animate");
71 |           headerCloak.removeAttribute("style");
72 |         }
73 |       },
74 | 
75 |       html(attrs, state) {
76 |         const { siteSettings } = this;
77 |         const panelContents = [];
78 | 
79 |         panelContents.push(this.attach('brand-header-icon', { brandMenuVisible: state.brandMenuVisible }));
80 | 
81 |         if (state.brandMenuVisible) {
82 |           panelContents.push(this.attach('hamburger-brand-menu', { generalLinks: this.generalLinks(), iconLinks: this.iconLinks() }));
83 |         }
84 | 
85 |         return panelContents;
86 |       }
87 |     });
88 | 
89 |     api.decorateWidget("home-logo:before", helper => {
90 |       return [helper.widget.attach('brand-header')];
91 |     });
92 |   }
93 | </script>
94 | 


--------------------------------------------------------------------------------
/common/header.html:
--------------------------------------------------------------------------------
  1 | <script type="text/discourse-plugin" version="0.8">
  2 | 
  3 |   const { h } = require('virtual-dom');
  4 |   const { applyDecorators } = require('discourse/widgets/widget');
  5 | 
  6 |   const flatten = array => [].concat.apply([], array);
  7 | 
  8 |   api.createWidget('nav-links', {
  9 |     tagName: 'nav.links',
 10 | 
 11 |     html(attrs) {
 12 |       const links = [].concat(attrs.contents());
 13 | 
 14 |       return [h('ul.nav.nav-pills', links.map(l => h('li', {}, l)))];
 15 |     }
 16 |   });
 17 | 
 18 |   api.createWidget('nav-icons', {
 19 |     tagName: 'ul.icons.clearfix',
 20 | 
 21 |     html(attrs) {
 22 |       const links = [].concat(attrs.contents());
 23 | 
 24 |       return links.map(l => h('li', {}, l));
 25 |     }
 26 |   });
 27 | 
 28 |   api.createWidget('brand-header-right', {
 29 |     tagName: 'div.panel.clearfix',
 30 | 
 31 |     html(attrs) {
 32 |       return attrs.contents();
 33 |     },
 34 |   });
 35 | 
 36 |   api.createWidget('brand-header', {
 37 |     tagName: 'header.b-header.clearfix',
 38 |     buildKey: () => `header`,
 39 | 
 40 |     generalLinks() {
 41 |       const links = settings.links;
 42 | 
 43 |       if (links) {
 44 |         return links.split("|").map(l => {
 45 |           const values = l.split(",");
 46 |           return this.attach('link', {
 47 |               rawLabel: values[0].trim(),
 48 |               href: values[1].trim(),
 49 |               omitSpan: true,
 50 |               attributes: {
 51 |                 target: (values[2] || '').trim()
 52 |               }
 53 |           });
 54 |         });
 55 |       } else {
 56 |         return [];
 57 |       }
 58 |     },
 59 | 
 60 |     iconLinks() {
 61 |       const icons = settings.icons;
 62 | 
 63 |       if (icons) {
 64 |         return icons.split("|").map(l => {
 65 |           const values = l.split(",");
 66 |           return this.attach('link', {
 67 |               icon: values[0].trim(),
 68 |               href: values[1].trim(),
 69 |               omitSpan: true,
 70 |               attributes: {
 71 |                 target: (values[2] || '').trim()
 72 |               }
 73 |           });
 74 |         });
 75 |       } else {
 76 |         return [];
 77 |       }
 78 |     },
 79 | 
 80 |     html(attrs, state) {
 81 |       const { siteSettings } = this;
 82 |       const mobileView = this.site.mobileView;
 83 | 
 84 |       const contents = [];
 85 | 
 86 |       contents.push(this.attach('brand-logo'));
 87 | 
 88 |       const panelContents = [];
 89 | 
 90 |       contents.push(this.attach('nav-links', { contents: () => this.generalLinks() }));
 91 |       panelContents.push(this.attach('nav-icons', { contents: () => this.iconLinks() }));
 92 | 
 93 |       contents.push(this.attach('brand-header-right', { contents: () => panelContents }));
 94 | 
 95 |       return h('div.wrap', h('div.contents.clearfix', contents));
 96 |     }
 97 | 
 98 |   });
 99 | 
100 |   const { wantsNewWindow } = require('discourse/lib/intercept-click');
101 |   const DiscourseURL = require('discourse/lib/url').default;
102 | 
103 |   api.createWidget('brand-logo', {
104 |     tagName: 'div.title',
105 | 
106 |     logo() {
107 |       const mobileView = this.site.mobileView;
108 | 
109 |       const mobileLogoUrl = settings.mobile_logo_url || "";
110 |       const showMobileLogo = mobileView && (mobileLogoUrl.length > 0);
111 | 
112 |       const logoUrl = settings.logo_url || "";
113 |       const title = settings.brand_name;
114 | 
115 |       if (showMobileLogo) {
116 |         return h('img#brand-logo.logo-big', { key: 'logo-mobile', attributes: { src: mobileLogoUrl, alt: title } });
117 |       } else if (logoUrl.length) {
118 |         return h('img#brand-logo.logo-big', { key: 'logo-big', attributes: { src: logoUrl, alt: title } });
119 |       } else {
120 |         return h('h2#brand-text-logo.text-logo', { key: 'logo-text' }, title);
121 |       }
122 |     },
123 | 
124 |     html() {
125 |       return h('a', { attributes: { href: settings.website_url } }, this.logo());
126 |     },
127 | 
128 |     click(e) {
129 |       if (wantsNewWindow(e)) { return false; }
130 |       e.preventDefault();
131 |       DiscourseURL.routeToTag(e.target.closest('a'));
132 |       return false;
133 |     }
134 |   });
135 | 
136 | </script>
137 | 


--------------------------------------------------------------------------------