added js for notification cookies and interactions

assets/js/notifications.js

@@ -0,0 +1,46 @@
+// Get notification cookie name
+function notificationCookieName(el) {
+  return "influx-" + $(el).attr('id') + "-notification-seen"
+}
+
+// Show notifications that are within scope and haven't been ssen
+function showNotifications() {
+  $('#docs-notifications > .notification').each(function() {
+
+    // Check if the path includes paths defined in the data-scope attribute
+    // of the notification html element
+    function inScope(path, scope) {
+      for(let i = 0; i < scope.length; i++){
+        if (path.includes(scope[i])) {
+          return true;
+        };
+      }
+      return false;
+    }
+
+    var scope = $(this).data('scope').split(',')
+    var pageInScope = inScope(window.location.pathname, scope)
+    var notificationCookie = Cookies.get( notificationCookieName(this) )
+
+    if (pageInScope && notificationCookie != 'true') {
+      $(this).show().animate({right: 0, opacity: 1}, 200, 'swing')
+    }
+  });
+}
+
+// Hide a notification and set cookie as true
+function hideNotification(el) {
+  $(el).closest('.notification').animate({height: 0, opacity: 0}, 200, 'swing', function(){
+    $(this).hide();
+    Cookies.set(notificationCookieName(this), true);
+  });
+}
+
+// Show notifications on page load
+showNotifications()
+
+// Hide a notification and set see cookie to true
+$('.close-notification').click(function(e) {
+  e.preventDefault();
+  hideNotification(this);
+})

assets/styles/layouts/_notifications.scss

@@ -1,20 +1,28 @@
 #docs-notifications {
-  position: absolute;
+  position: fixed;
   top: 10px;
   right: 10px;
   z-index: 100;
   width: calc(100vw - 20px);
   max-width: 500px;
+  transition: all .4s ease;
 
   .notification {
+    display: none; // initial hidden state
+    right: -50px; // initial hidden state
+    opacity: 0; // initial hidden state
+
     position: relative;
-    padding: 1.25rem 2.35rem .5rem 1.25rem;
-    margin-bottom: 10px;
     border-radius: $radius;
-    font-size: .95rem;
-    color: $g20-white;
     box-shadow: 2px 2px 6px rgba($g2-kevlar, .35);
 
+    .notification-content {
+      padding: 1.25rem 2.35rem .5rem 1.25rem;
+      margin-bottom: 10px;
+      font-size: .95rem;
+      color: $g20-white;
+    }
+
     .close-notification {
       position: absolute;
       top: 8px;

data/notifications.yaml

@@ -1,23 +1,20 @@
-- id: influxdb-2-0-ga
-  level: note
-  scope:
-    - /
-  message: |
-    ### InfluxDB v2.0 is now GA!!
+# Notification data structure
+#
+# - id: unqiue ID for notification, cannot start with digit, no spaces, a-z and 0-9
+#   level: note or warn
+#   scope:
+#     - list of URL paths to show notification on, no scope shows everywhere
+#   message: |
+#     Markdown message content.
 
-    Get your upgrade on!
-
-    [Upgrade from InfluxDB 1.x to 2.0](#)
-
-- id: beta-17-upgrade
+- id: rc1-upgrade
   level: warn
   scope:
     - /influxdb/v2.0/
-    - /influxdb/1.8/
   message: |
-    ### Breaking changes in beta 17
+    ### Breaking changes in v2.0 rc.1
 
-    InfluxDB v2.0 beta 17 includes breaking changes that require a manual upgrade
+    InfluxDB v2.0 rc.1 includes breaking changes that require a manual upgrade
     from beta-16 and older. For information, see:
 
-    [Upgrade to beta 17](#)
+    [Upgrade to v2.0 rc.1](#)

layouts/partials/footer/javascript.html

@@ -3,7 +3,8 @@
 {{ $searchInteractions := resources.Get "js/search-interactions.js" }}
 {{ $telegrafFilters := resources.Get "js/telegraf-filters.js" }}
 {{ $influxdbURLs := resources.Get "js/influxdb-url.js" }}
-{{ $footerjs := slice $versionSelector $contentInteractions $searchInteractions $telegrafFilters $influxdbURLs | resources.Concat "js/footer.bundle.js" | resources.Fingerprint }}
+{{ $notifications := resources.Get "js/notifications.js" }}
+{{ $footerjs := slice $versionSelector $contentInteractions $searchInteractions $telegrafFilters $influxdbURLs $notifications | resources.Concat "js/footer.bundle.js" | resources.Fingerprint }}
 
 <!-- Load cloudUrls array -->
 <script type="text/javascript">

layouts/partials/footer/notifications.html

@@ -1,7 +1,9 @@
 <div id="docs-notifications">
   {{ range .Site.Data.notifications }}
-    <div class="notification {{ .level }}" id="{{ .id }}" {{ if .scope }}data-scope='{{ delimit .scope "," }}'{{ end }}>
-      {{ .message | markdownify }}
+    <div class="notification {{ .level }}" id="{{ .id }}" data-scope='{{ if .scope }}{{ delimit .scope "," }}{{ else }}/{{ end }}'>
+      <div class="notification-content">
+        {{ .message | markdownify }}
+      </div>
       <div class="close-notification"><span class="icon-ui-remove"></span></div>
     </div>
   {{ end }}