Announcement: initial addon implementation

It allows users to show a small announcement at the bottom-left of the page.
The message and on which versions to show it are configurable.

Closes #109

public/_/readthedocs-addons.json

@@ -35,12 +35,8 @@
       "ad_free": false,
       "enabled": true,
       "publisher": "readthedocs",
-      "campaign_types":	[
-        "community",
-        "house",
-        "paid"
-      ],
-      "keywords":	[
+      "campaign_types": ["community", "house", "paid"],
+      "keywords": [
         "only words",
         "readthedocs-project-12345",
         "readthedocs-project-slug",
@@ -134,6 +130,14 @@
         ["Search subprojects", "subprojects:example/latest"]
       ],
       "default_filter": "subprojects:example/latest"
+    },
+    "announcement": {
+      "enabled": true,
+      "versions": {
+        "all": {
+          "content": "This is a <em>customizable message</em>. The user can choose between showing it on a <strong>specific version</strong> or in all of them. Try out <a href=\"https://docs.readthedocs.io/en/latest/config-file/v2.html#build-commands\">build.commands</a> now!"
+        }
+      }
     }
   }
 }

src/announcement.css

@@ -0,0 +1,49 @@
+div {
+  font-family: var(
+    --readthedocs-announcement-font-family,
+    "Lato",
+    "proxima-nova",
+    "Helvetica Neue",
+    "Arial",
+    "sans-serif"
+  );
+  opacity: 1;
+  width: 300px;
+  right: auto;
+  left: 20px;
+  bottom: 20px;
+  padding-left: 20px;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  background-color: white;
+  border-color: black;
+  border-style: solid;
+  border-width: 2px;
+  border-radius: 0.25rem;
+  display: flex;
+  z-index: 1000;
+  position: fixed;
+  box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12),
+    0 2px 10px 0 rgba(34, 36, 38, 0.15);
+}
+
+div p {
+  line-height: 1.5;
+}
+
+div a.icon {
+  display: inline-flex;
+  align-self: stretch;
+  align-items: center;
+  padding: 0.25rem 1rem;
+}
+
+div svg {
+  float: right;
+  display: inline-block;
+  height: 1rem;
+  vertical-align: middle;
+  cursor: pointer;
+  color: var(--readthedocs-notification-title-color, rgba(96, 96, 96));
+  font-weight: normal;
+}

src/announcement.js

@@ -0,0 +1,110 @@
+import { AddonBase } from "./utils";
+import { library, icon } from "@fortawesome/fontawesome-svg-core";
+import { faCircleXmark } from "@fortawesome/free-solid-svg-icons";
+import styleSheet from "./announcement.css";
+import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
+import { html, nothing, LitElement } from "lit";
+
+export class AnnouncementElement extends LitElement {
+  static elementName = "readthedocs-announcement";
+
+  static properties = {
+    config: {
+      state: true,
+    },
+    enabled: {
+      type: Boolean,
+    },
+  };
+
+  static styles = styleSheet;
+
+  constructor() {
+    super();
+
+    this.content = undefined;
+  }
+
+  loadConfig(config) {
+    this.config = config;
+    this.content =
+      this.config.addons.announcement.versions[
+        this.config.versions.current.slug
+      ] || this.config.addons.announcement.versions.all.content;
+  }
+
+  render() {
+    library.add(faCircleXmark);
+    const xmark = icon(faCircleXmark, {
+      title: "Close announcement",
+    });
+
+    return html`<div>
+      <p>${unsafeHTML(this.content)}</p>
+      <a href="#" class="icon" @click=${this.closeAnnouncement}>
+        ${xmark.node[0]}
+      </a>
+    </div>`;
+  }
+
+  // renderExternalVersionWarning() {
+  //   library.add(faCircleXmark);
+  //   library.add(faCodePullRequest);
+  //   const xmark = icon(faCircleXmark, {
+  //     title: "Close notification",
+  //   });
+  //   const iconPullRequest = icon(faCodePullRequest, {
+  //     title: "This version is a pull request version",
+  //     classes: ["header", "icon"],
+  //   });
+
+  //   return html`
+  //     <div>
+  //       ${iconPullRequest.node[0]}
+  //       <div class="title">
+  //         This page was created from a pull request build
+  //         <a href="#" class="right" @click=${this.closeNotification}>
+  //           ${xmark.node[0]}
+  //         </a>
+  //       </div>
+  //       <div class="content">
+  //         See the
+  //         <a href="${this.urls.build}">build's detail page</a>
+  //         or
+  //         <a href="${this.urls.external}"
+  //           >pull request #${this.config.versions.current.slug}</a
+  //         >
+  //         for more information.
+  //       </div>
+  //     </div>
+  //   `;
+  // }
+
+  closeAnnouncement(e) {
+    this.remove();
+    // Avoid event propagation
+    return false;
+  }
+}
+
+export class AnnouncementAddon extends AddonBase {
+  constructor(config) {
+    super();
+
+    customElements.define("readthedocs-announcement", AnnouncementElement);
+    let elems = document.querySelectorAll("readthedocs-announcement");
+    if (!elems.length) {
+      elems = [new AnnouncementElement()];
+      document.body.append(elems[0]);
+      elems[0].requestUpdate();
+    }
+
+    for (const elem of elems) {
+      elem.loadConfig(config);
+    }
+  }
+
+  static isEnabled(config) {
+    return config.addons && config.addons.announcement.enabled;
+  }
+}

src/index.js

@@ -5,6 +5,7 @@ import * as search from "./search";
 import * as docdiff from "./docdiff";
 import * as flyout from "./flyout";
 import * as ethicalads from "./ethicalads";
+import * as announcement from "./announcement";
 import { domReady, isReadTheDocsEmbedPresent } from "./utils";
 
 export function setup() {
@@ -27,6 +28,7 @@ export function setup() {
           ethicalads.EthicalAdsAddon,
           search.SearchAddon,
           docdiff.DocDiffAddon,
+          announcement.AnnouncementAddon,
         ];
 
         if (!IS_PRODUCTION) {