feat(feature-boards): embed product feature boards in the docs

assets/styles/layouts/_sidebar.scss

@@ -256,6 +256,51 @@
       }
     }
   }
+
+  .feature-board-badge {
+    position: relative;
+    padding: 1rem;
+    margin: 2rem 0 1.5rem -1.5rem;
+    background: rgba($nav-category, .05);
+    border: 1px solid rgba($nav-category, .2);
+    border-radius: $radius * 4;
+    text-decoration: none;
+    transition: background .2s, border-color .2s;
+    overflow: hidden;
+
+    &:before {
+      content: "NEW";
+      position: absolute;
+      padding: .1rem 1.2rem;
+      font-size: .65rem;
+      letter-spacing: .03rem;
+      font-weight: bold;
+      top: 6px;
+      right: -17px;
+      color: $g20-white;
+      background: $br-new-magenta;
+      transform: rotate(45deg);
+    }
+
+    h5 {
+      margin: 0 0 .25rem 0;
+      color: $nav-category;
+      font-size: 1.2rem;
+    }
+
+    p {
+      margin: 0;
+      color: $article-text;
+      font-size: 0.9rem;
+      line-height: 1.4rem;
+      font-weight: normal;
+      font-style: italic;
+    }
+
+    &:hover {
+      border-color: rgba($nav-category, .75);
+    }
+  }
 }
 
 ////////////////////////////////////////////////////////////////////////////////

assets/styles/layouts/_top-nav.scss

@@ -221,6 +221,32 @@
     width: 0;
     opacity: 0;
   }
+
+  &.feature-board {
+    .back-btn {
+      color: $article-bold;
+      background: rgba($article-text, .15);
+      border: 1px solid rgba($article-text, 0);
+      font-weight: $medium;
+      text-decoration: none;
+      padding: .35rem 1rem;
+      border-radius: $radius;
+      font-size: .9rem;
+      transition: border .2s;
+      &:before {
+        content: '\e909';
+        font-family: 'icomoon-v4';
+        font-weight: bold;
+        line-height: 0;
+        margin: 0 .5rem 0 -.25rem;
+        vertical-align: middle;
+      }
+      &:hover {
+        text-decoration: none;
+        border: 1px solid rgba($article-text, .25);
+      }
+    }
+  }
 }
 
 ////////////////////////////////////////////////////////////////////////////////
@@ -237,7 +263,12 @@
 @include media(small) {
   .icon-influx-logotype { display: none; }
 
-  .topnav { min-height: 5.75rem; }
+  .topnav {
+    min-height: 5.75rem;
+    &.feature-board {
+      min-height: auto;
+    }
+  }
   .topnav-right {
     flex-direction: column-reverse;
     align-items: flex-end;

content/influxdb3/core/feature-board.md

@@ -0,0 +1,8 @@
+---
+title: InfluxDB 3 Core Feature Board
+description: >
+  View and provide feedback on potential, in progress, and launched features for
+  {{% product-name %}}.
+layout: feature-board
+---
+

content/influxdb3/enterprise/feature-board.md

@@ -0,0 +1,8 @@
+---
+title: InfluxDB 3 Enterprise Feature Board
+description: >
+  View and provide feedback on potential, in progress, and launched features for
+  {{% product-name %}}.
+layout: feature-board
+---
+

layouts/_default/feature-board.html

@@ -0,0 +1,15 @@
+{{ partial "header.html" . }}
+{{ partial "topnav.html" . }}
+{{ $productPathData := split .RelPermalink "/" }}
+{{ $product := index $productPathData 1 }}
+{{ $version := index $productPathData 2 }}
+{{ $productPortalLinks := dict
+  "influxdb3_enterprise" "https://portal.productboard.com/s4ypqjwpwk7d33grlsfswkfm"
+  "influxdb3_core" "https://portal.productboard.com/paeu8mii9jrzjkiucwfep1ea"
+}}
+
+<div class="page-wrapper">
+  <iframe style="width:100%;height:calc(100vh - 55px);" src='{{ index $productPortalLinks (print $product "_" $version) }}' frameborder="0"></iframe>
+</div>
+
+{{ partial "footer.html" . }}

layouts/partials/sidebar.html

@@ -3,8 +3,9 @@
 {{/* Support deployments (such as CI tools) with subdirectory baseURL */}}
 {{ $pathOffset := .Site.Params.prPreviewPathOffset | default 0 }}
 {{ $product := index $productPathData (add $pathOffset 0) }}
-{{ $productName := (index .Site.Data.products $product).name }}
 {{ $currentVersion := index $productPathData (add $pathOffset 1) }}
+{{ $productKey := print $product "_" $currentVersion }}
+{{ $productData := index $.Site.Data.products $productKey }}
 
 <!-- Menu Key -->
 {{ .Scratch.Set "menuKey" "menu"}}
@@ -93,6 +94,12 @@ <h4 class="flux">Flux</h4>
     <li class="nav-category"><a href="/flux/{{ $latestFlux }}/stdlib/">Flux standard library</a></li>
   {{ end }}
 
+  <!-- Feature Board link for supported products -->
+  {{ $featureBoardWhitelist := slice "influxdb3_core" "influxdb3_enterprise" }}
+  {{ if in $featureBoardWhitelist (print $product "_" $currentVersion) }}
+    {{ partial "sidebar/feature-board.html" (dict "product" $product "version" $currentVersion "productName" $productData.name) }}
+  {{ end }}
+
   <!-- Platform menu for 1.x docs -->
   {{ $platformWhitelist := (slice "telegraf_v1" "chronograf_v1" "kapacitor_v1" "enterprise_influxdb_v1" "influxdb_v1") }}
   {{ if (in $platformWhitelist $menuKey) }}

layouts/partials/sidebar/feature-board.html

@@ -0,0 +1,6 @@
+<a class="feature-board-badge"  href="/{{ .product }}/{{ .version }}/feature-board/">
+  <h5>Feature Board</h5>
+  <p>
+    View and give feedback on upcoming and launched {{ .productName }} features
+  </p>
+</a>

layouts/partials/topnav.html

@@ -1,29 +1,36 @@
-{{ $productPathData := findRE "[^/]+.*?" .RelPermalink }}
-{{ $product := index $productPathData 0 }}
-{{ $currentVersion := index $productPathData 1 }}
+{{ $productPathData := split .RelPermalink "/" }}
+{{ $product := index $productPathData 1 }}
+{{ $version := index $productPathData 2 }}
+{{ $productData := index $.Site.Data.products (print $product "_" $version) }}
+{{ $productName := $productData.name }}
+{{ $layout := .Params.layout }}
 
-<div class="topnav">
+<div class="topnav{{ if $layout }} {{ $layout }}{{ end }}">
   <div class="topnav-left">
     <a class="influx-home" href="https://www.influxdata.com" title="InfluxData"><span
         class="icon-influx-logo"></span><span class="icon-influx-logotype"></span></a>
     <span class="divider"></span>
     <a class="docs-home" href="/"><span class=short>Doc</span><span class="long">umentation</span></a>
   </div>
   <div class="topnav-right">
-    <div class="selector-dropdowns">
-      {{ partial "topnav/product-selector.html" . }}
-    </div>
-    <div class="buttons">
-      <div class="search-btn" data-component="search-button">
-        <button id="search-btn" data-action="toggle"><span class="cf-icon Search_New"></span></button>
+    {{ if eq $layout "feature-board" }}
+      <a class="back-btn" href="/{{ $product }}/{{ $version }}/">{{ $productName }} Docs</a>
+    {{ else }}
+      <div class="selector-dropdowns">
+        {{ partial "topnav/product-selector.html" . }}
       </div>
-      <button class="url-trigger" href="#"><span class="cf-icon CogSolid_New"></span></button>
-      <span data-component="theme-switch">
-        <button class="theme-switch theme-switch-light">
-          <span class="cf-icon Lightmode_New"></span></button>
-        <button class="theme-switch theme-switch-dark">
-          <span class="cf-icon Darkmode_New"></span></button>
-      </span>
-    </div>
+      <div class="buttons">
+        <div class="search-btn" data-component="search-button">
+          <button id="search-btn" data-action="toggle"><span class="cf-icon Search_New"></span></button>
+        </div>
+        <button class="url-trigger" href="#"><span class="cf-icon CogSolid_New"></span></button>
+        <span data-component="theme-switch">
+          <button class="theme-switch theme-switch-light">
+            <span class="cf-icon Lightmode_New"></span></button>
+          <button class="theme-switch theme-switch-dark">
+            <span class="cf-icon Darkmode_New"></span></button>
+        </span>
+      </div>
+    {{ end }}
   </div>
 </div>