feat: add dark mode and announcement component

components/announcement-banner/common/common.scss

@@ -0,0 +1,28 @@
+.announcement {
+  background-color: #a32952;
+  font-family: monospace;
+  color: #ffefef;
+  font-size: 1em;
+  line-height: 1.4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  margin: 1em 0;
+  padding: 1em;
+}
+
+.announcement a {
+  color: #ffefef;
+  font-weight: bold;
+  text-decoration: underline;
+  padding: 0 4px;
+}
+
+.announcement a:hover {
+  cursor: pointer;
+}
+
+.announcement-heading {
+  text-align: center;
+}

components/announcement-banner/common/head_tag.html

@@ -0,0 +1,65 @@
+<script type="text/discourse-plugin" version="0.8.18">
+
+const h = require("virtual-dom").h;
+
+api.createWidget("banner-box-widget", {
+  tagName: "div.banner-box",
+  html(attrs) {
+
+    const path = window.location.pathname;
+
+    let showOnHomepage;
+    if(settings.display_on_homepage) {
+      let hasSingleForwardSlash = new RegExp('[^\/]\/[^\/]');
+      showOnHomepage = !hasSingleForwardSlash.test(path);
+    }
+
+    let urlMatch;
+    if(settings.url_must_contain.length) {
+      let escapedList = settings.url_must_contain.replace(/\//g, '\\/');
+      let regex = new RegExp(escapedList);
+      urlMatch = regex.test(path);
+    }
+
+    if(showOnHomepage || urlMatch) {
+      return [
+        h('div.container', [
+          this.attach('banner-content-widget')
+        ])
+      ]
+    }
+  }
+});
+
+api.decorateWidget('banner-box-widget:after', helper => {
+  helper.widget.appEvents.on('page:changed', () => {
+    helper.widget.scheduleRerender();
+  });
+});
+
+api.createWidget("banner-content-widget", {
+  tagName: "div#banner-content_wrap",
+  html(attrs) {
+    let columns = h('div', { innerHTML: settings.banner_content })
+    return h('div.row', columns);
+  }
+});
+
+</script>
+
+<script type="text/x-handlebars" data-template-name="/connectors/custom-banner/banner">
+  {{mount-widget widget="banner-box-widget"}}
+</script>
+
+<script type="text/x-handlebars" data-template-name="/connectors/above-main-container/banner-themes">
+  {{#if (theme-setting 'show_for_members')}}
+    {{#if currentUser}}
+      {{plugin-outlet name="custom-banner"}}
+    {{/if}}
+  {{/if}}
+  {{#if (theme-setting 'show_for_anon')}}
+    {{#unless currentUser}}
+      {{plugin-outlet name="custom-banner"}}
+    {{/unless}}
+  {{/if}}
+</script>