Add GDPR banner

_layouts/website/page.html

@@ -5,4 +5,5 @@
 {% block head %}
 <meta content="{{ page.keywords|default("continuous delivery, software, continuous integration, open source, blog, software development, tools, automation, deployment pipelines, devops, techniques") }}" name="keywords" />
     <link rel="canonical" href="{{ config.currentBaseUrl }}/{{file.path | replace('index.html.md','') | replace('INTRO.md','') | replace('README.md','') | replace('readme.md','') | replace('.md','.html') | replace('.adoc','.html')}}"/>
+    <script async src="resources/javascripts/_gdpr-banner.js" type="text/javascript"></script>
 {% endblock %}

resources/javascripts/_gdpr-banner.js

@@ -0,0 +1,79 @@
+(function() {
+  "use strict";
+
+  function gdpr() {
+    if (!hasCookie()) {
+      setCookie();
+
+      var banner = el("div", {class: "gdpr-banner"}, [
+        on(el("i", {class: "gdpr-close"}), "click", hide),
+        el("p", {}, [
+          "Our site uses ", link("cookies", "https://www.thoughtworks.com/privacy-policy#cookie-section"),
+          " for analytics. If you're unsure about it, take a look at our ",
+          link("privacy policy", "https://www.thoughtworks.com/privacy-policy"), "."
+          ])
+        ]);
+
+      function hide() {
+        setCookie();
+        document.body.removeChild(banner);
+      }
+
+      document.body.insertBefore(banner, document.body.firstChild);
+    }
+  }
+
+  document.addEventListener("DOMContentLoaded", gdpr);
+
+  /* ========== DOM helpers ========== */
+
+  function on(el, type, fn) {
+    el.addEventListener(type, fn, false);
+    return el;
+  }
+
+  function addContent(node, content) {
+    if ("string" === typeof content) {
+      content = document.createTextNode(content);
+    }
+    node.appendChild(content);
+  }
+
+  function el(tag, attrs, content) {
+    const node = document.createElement(tag.toLowerCase());
+
+    if (attrs) {
+      for (var key in attrs) {
+        node.setAttribute(key, attrs[key]);
+      }
+    }
+
+    if (content) {
+      if (content.forEach) {
+        content.forEach(function (child) {
+          addContent(node, child);
+        });
+      } else {
+        addContent(node, content);
+      }
+    }
+
+    return node;
+  }
+
+  function link(text, href) {
+    return el("a", {href: href, target: "_blank", rel: "noopener noreferrer"}, text);
+  }
+
+  /* ========== Cookie Utils ========== */
+
+  function hasCookie() {
+    return /_gdpr-accept=/.test(document.cookie);
+  }
+
+  function setCookie() {
+    if (!hasCookie()) {
+      document.cookie = "_gdpr-accept=yes; expires=Fri, 31 Dec 9999 23:59:59 GMT";
+    }
+  }
+})();

resources/stylesheets/website.css

@@ -26,3 +26,57 @@ figure.concept_image img.medium_image {
   font-size: large;
   font-weight: normal;
 }
+
+.gdpr-banner {
+  box-sizing: border-box;
+  background: #808285;
+  color: #fff;
+  padding: 10px 66px;
+  width: 100%;
+  position: fixed;
+  z-index: 100;
+
+  text-align: center;
+  font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;
+  font-size: 14px;
+}
+
+.gdpr-banner ~ * {
+  transform: translateY(36px);
+}
+
+.gdpr-banner p { margin: 0; padding: 0; }
+
+.gdpr-banner a, .gdpr-banner a:active, .gdpr-banner a:visited {
+  text-decoration: underline;
+}
+
+.gdpr-banner a, .gdpr-banner a:visited {
+  color: #fff;
+}
+
+.gdpr-banner a:hover, .gdpr-banner a:active {
+  color: #fff
+}
+
+.gdpr-banner .gdpr-close {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  top: 50%;
+  right: 40px;
+  margin-top: -8px;
+  cursor: pointer;
+}
+
+.gdpr-banner .gdpr-close::before, .gdpr-banner .gdpr-close::after {
+  position: absolute;
+  left: 7px;
+  content: '';
+  height: 17.63px;
+  width: 3px;
+  background-color: #fff;
+}
+
+.gdpr-banner .gdpr-close::before { transform: rotate(45deg); }
+.gdpr-banner .gdpr-close::after { transform: rotate(-45deg); }