Merge pull request #1428 from influxdata/docs-notifications

Docs notifications

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

@@ -0,0 +1,93 @@
+#docs-notifications {
+  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;
+    border-radius: $radius;
+    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;
+      right: 8px;
+      font-size: 1.1rem;
+      cursor: pointer;
+      transition: color .2s;
+      font-weight: bold;
+      color: rgba($g20-white, .5);
+      &:hover{ color: $g20-white }
+    }
+
+    &.note {
+      @include gradient($grad-GarageBand);
+      a:hover { color: $gr-gypsy; }
+      code { color: $gr-gypsy; background: rgba($gr-gypsy, .25); }
+      pre { background: rgba($gr-gypsy, .25); }
+    }
+
+    &.warn {
+      @include gradient($grad-FuyuPersimmon, 225deg);
+      a:hover { color: $r-basalt; }
+      code { color: #ffbbdd; background: rgba($r-basalt, .35); }
+      pre { background: rgba($r-basalt, .35); }
+    }
+
+    //////////// Basic HTML element styles for notification content ////////////
+
+    h1,h2,h3,h4,h5,h6 {
+      font-weight: 500;
+      margin: 1rem 0 .75rem;
+      &:first-child { margin-top: 0; }
+    }
+
+    h1,h2 { font-size: 1.5rem; }
+    h3 { font-size: 1.25rem; }
+    h4 { font-size: 1.1rem; }
+    h5 { font-size: 1rem; }
+    h6 { font-size: .95rem; font-style: italic; }
+
+    p,li  { line-height: 1.4rem; }
+
+    p { margin: 0 0 .75rem; }
+
+    a {
+      font-weight: bold;
+      text-decoration: none;
+      color: $g20-white;
+      transition: color .2s;
+    }
+
+    ul,ol { padding-left: 1.5rem; }
+
+    code {
+      padding: .15rem .4rem;
+      border-radius: $radius;
+      font-weight: bold;
+    }
+
+    pre {
+      padding: 1rem;
+      border-radius: $radius;
+      overflow: scroll;
+      code { background: transparent !important; }
+    }
+
+  }
+}

assets/styles/styles-default.scss

@@ -25,7 +25,8 @@
         "layouts/error-page",
         "layouts/url-selector",
         "layouts/feature-callouts",
-        "layouts/v1-overrides";
+        "layouts/v1-overrides",
+        "layouts/notifications";
 
 // Import Product-specifc color schemes
 @import "product-overrides/telegraf",

assets/styles/tools/_color-palette.scss

@@ -138,6 +138,7 @@ $grad-PastelGothic:       $p-comet, $b-laser;
 $grad-GarageBand:         $b-pool, $gr-rainforest;
 $grad-LowDifficulty:      $b-pool, $gr-honeydew;
 $grad-DesertFestival:     $r-curacao, $p-star;
+$grad-FuyuPersimmon:      $y-tiger, $r-fire;
 $grad-SavannaHeat:        $y-topaz, $r-ruby;
 $grad-ScotchBonnet:       $y-pineapple,$r-curacao;
 

data/notifications.yaml

@@ -0,0 +1,20 @@
+# 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.
+
+- id: rc0-upgrade
+  level: warn
+  scope:
+    - /influxdb/v2.0/
+  message: |
+    ### InfluxDB OSS 2.0 release candidate 0
+
+    **InfluxDB OSS v2.0.rc0** includes **breaking changes** that require a manual
+    upgrade from all alpha and beta versions. For information, see:
+
+    [Upgrade to InfluxDB OSS v2.0.rc0](#)

layouts/partials/footer.html

@@ -9,6 +9,9 @@
   <!-- Docsearch JS -->
   {{ partial "footer/search.html" . }}
 
+  <!-- Docs Notifications -->
+  {{ partial "footer/notifications.html" . }}
+
   </body>
   {{ partial "footer/javascript.html" . }}
 </html>

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

@@ -0,0 +1,11 @@
+<div id="docs-notifications">
+  {{ range .Site.Data.notifications }}
+    <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 }}
+</div>
+