established structure and styles of notifications

assets/styles/layouts/_notifications.scss

@@ -0,0 +1,85 @@
+#docs-notifications {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 100;
+  width: calc(100vw - 20px);
+  max-width: 500px;
+
+  .notification {
+    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);
+
+    .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,23 @@
+- id: influxdb-2-0-ga
+  level: note
+  scope:
+    - /
+  message: |
+    ### InfluxDB v2.0 is now GA!!
+
+    Get your upgrade on!
+
+    [Upgrade from InfluxDB 1.x to 2.0](#)
+
+- id: beta-17-upgrade
+  level: warn
+  scope:
+    - /influxdb/v2.0/
+    - /influxdb/1.8/
+  message: |
+    ### Breaking changes in beta 17
+
+    InfluxDB v2.0 beta 17 includes breaking changes that require a manual upgrade
+    from beta-16 and older. For information, see:
+
+    [Upgrade to beta 17](#)

layouts/partials/article/feedback.html

@@ -8,7 +8,11 @@
 {{ $productName := (index .Site.Data.products $product).name }}
 {{ $supportBlacklist := slice "chronograf" "kapacitor" }}
 
-{{ .Scratch.Set "pageGithubLink" (print "https://github.com/influxdata/docs-v2/edit/master/content/" .File.Path) }}
+{{ if .File }}
+  {{ .Scratch.Set "pageGithubLink" (print "https://github.com/influxdata/docs-v2/edit/master/content/" .File.Path) }}
+{{ else }}
+  {{ .Scratch.Set "pageGithubLink" (print "https://github.com/influxdata/docs-v2/edit/master/content/") }}
+{{ end }}
 {{ .Scratch.Set "productGithubLink" (print "https://github.com/influxdata/" $product "/issues/new/choose/") }}
 {{ $pageGithubLink := .Scratch.Get "pageGithubLink" }}
 {{ $productGithubLink := .Scratch.Get "productGithubLink" }}

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/notifications.html

@@ -0,0 +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="close-notification"><span class="icon-ui-remove"></span></div>
+    </div>
+  {{ end }}
+</div>
+