Add the influxdbu shortcode for diplaying InfluxDB University banners (#4083)

* add the influxdbu shortcode for diplaying InfluxDB U banners

* add influxdbu banner media queries

* remove placholder influxdbu shortcode

* blacklist heading elements from having anchor links added

CONTRIBUTING.md

@@ -1114,6 +1114,39 @@ Use the `{{< caps >}}` shortcode to format text to match those buttons.
 Click {{< caps >}}Add Data{{< /caps >}}
 ```
 
+#### InfluxDB University banners
+Use the `{{< influxdbu >}}` shortcode to add an InfluxDB University banner that
+points to the InfluxDB University site or a specific course.
+Use the default banner template, a predefined course template, or fully customize
+the content of the banner.
+
+```html
+<!-- Default banner -->
+{{< influxdbu >}}
+
+<!-- Predfined course banner -->
+{{< influxdbu "influxdb-101" >}}
+
+<!-- Custom banner -->
+{{< influxdbu title="Course title" summary="Short course summary." action="Take the course" link="https://university.influxdata.com/" >}}
+```
+
+##### Course templates
+Use one of the following course templates:
+
+- influxdb-101
+- telegraf-102
+- flux-103
+
+##### Custom banner content
+Use the following shortcode parameters to customize the content of the InfluxDB
+University banner:
+
+- **title**: Course or banner title
+- **summary**: Short description shown under the title
+- **action**: Text of the button
+- **link**: URL the button links to
+
 ### Reference content
 The InfluxDB documentation is "task-based," meaning content primarily focuses on
 what a user is **doing**, not what they are **using**.

assets/js/content-interactions.js

@@ -1,10 +1,20 @@
 ///////////////////////////// Make headers linkable /////////////////////////////
 
-$(".article--content h2, \
+var headingWhiteList = $("\
-   .article--content h3, \
+  .article--content h2, \
-   .article--content h4, \
+  .article--content h3, \
-   .article--content h5, \
+  .article--content h4, \
-   .article--content h6" ).each(function() {
+  .article--content h5, \
+  .article--content h6 \
+");
+
+var headingBlackList = ("\
+  .influxdbu-banner h4 \
+");
+
+headingElements = headingWhiteList.not(headingBlackList);
+
+headingElements.each(function() {
     function getLink(element) {
       return ((element.attr('href') === undefined ) ? $(element).attr("id") : element.attr('href'))
     }

assets/styles/layouts/_article.scss

@@ -123,6 +123,7 @@
           "article/flex",
           "article/flux",
           "article/html-diagrams",
+          "article/influxdbu",
           "article/keybinding",
           "article/list-filters",
           "article/lists",

assets/styles/layouts/article/_influxdbu.scss

@@ -0,0 +1,84 @@
+.influxdbu-banner {
+  background-color: $br-dark-blue;
+  margin: 2.5rem 0 3rem;
+  padding: 2.5rem;
+  border-radius: 1.5rem;
+  box-shadow: 2px 2px 8px $article-shadow;
+  background-image: url('/svgs/home-bg-circle-right.svg');
+  background-size: cover;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .influxdbu-logo {
+    max-width: 170px;
+    margin: 0 0 1rem;
+    box-shadow: none;
+  }
+
+  .banner-content {
+    margin-right: 1rem;
+    max-width: 65%;
+
+    h4 {
+      margin-top: -1.75rem;
+      font-size: 1.5rem;
+      font-style: normal;
+      color: $g20-white;
+    }
+    p {
+      margin-bottom: 0;
+      color: $g20-white;
+      strong { color: $g20-white; }
+    }
+  }
+  
+  .banner-cta {
+    position: relative;
+    a {
+      display: block;
+      position: relative;
+      padding: 1rem 1.5rem;
+      color: $g20-white;
+      text-align: center;
+      border-radius: $radius;
+      @include gradient($grad-burningDusk);
+      z-index: 1;
+
+      &:after {
+        content: "";
+        position: absolute;
+        padding: 0;
+        top: 0;
+        right: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: $radius;
+        @include gradient($grad-coolDusk, 270deg);
+        transition: opacity .2s;
+        z-index: -1;
+        opacity: 0;
+      }
+
+      &:hover:after {opacity: 1;}
+    }
+  }
+}
+
+////////////////////////////////////////////////////////////////////////////////
+///////////////////////////////// MEDIA QUERIES ////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////
+
+@include media(small) {
+  .influxdbu-banner {
+    flex-direction: column;
+    .banner-content {
+      max-width: 100%;
+      h4 {margin-top: -1.25rem;}
+    }
+    .banner-cta {
+      margin-top: 1.75rem;
+      width: 100%;
+    }
+  }
+}

content/influxdb/v2.2/query-data/_index.md

@@ -17,3 +17,5 @@ Learn to query data stored in InfluxDB using Flux and tools such as the InfluxDB
 user interface and the 'influx' command line interface.
 
 {{< children >}}
+
+{{< influxdbu "influxdb-101" >}}

layouts/shortcodes/influxdbu.html

@@ -0,0 +1,32 @@
+{{ $course := .Get 0 | default "influxdbu" }}
+{{ $title := .Get "title" | default "Become an InfluxDB expert" }}
+{{ $summary := .Get "summary" | default "InfluxDB University provides **free**, in-depth training courses for InfluxDB, Flux, Telegraf, and more." }}
+{{ $action := .Get "action" | default "Sign up now" }}
+{{ $link := .Get "link" | default "https://university.influxdata.com" }}
+
+{{ $influxdb101 := dict "title" "InfluxDB Essentials" "summary" "Learn how to write, query, and visualize data in InfluxDB in this **free** InfluxDB University course." "action" "Take the course" "link" "https://university.influxdata.com/courses/influxdb-essentials-tutorial/" }}
+{{ $telegraf102 := dict "title" "Data Collection with Telegraf" "summary" "Learn how to use Telegraf to make data time series data collection easy in this **free** InfluxDB University course." "action" "Take the course" "link" "https://university.influxdata.com/courses/data-collection-with-telegraf-tutorial/" }}
+{{ $flux103 := dict "title" "Beginner Flux" "summary" "Get a hands-on introduction to writing queries in the Flux language in this **free** InfluxDB University course." "action" "Take the course" "link" "https://university.influxdata.com/courses/beginner-flux-tutorial" }}
+
+{{ define "banner" }}
+<div class="influxdbu-banner">
+  <div class="banner-content">
+    <img class="influxdbu-logo" src="/svgs/influxdbu-full-white.svg" alt="InfluxDB University">
+    <h4>{{ .title }}</h4>
+    <p>{{ .summary | markdownify }}</p>
+  </div>
+  <div class="banner-cta">
+    <a href="{{ .link }}" target="_blank">{{ .action }}</a>
+  </div>
+</div>
+{{ end }}
+
+{{ if eq $course "influxdb-101" }}
+  {{ template "banner" $influxdb101 }}
+{{ else if eq $course "telegraf-102" }}
+  {{ template "banner" $telegraf102 }}
+{{ else if eq $course "flux-103" }}
+  {{ template "banner" $flux103 }}
+{{ else }}
+  {{ template "banner" dict "title" $title "summary" $summary "action" $action "link" $link }}
+{{ end }}

static/svgs/influxdbu-full-white.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 345 73" style="enable-background:new 0 0 345 73;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#D30971;}
+</style>
+<path class="st0" d="M106.5,0h8.6v39.2h-8.6V0z"/>
+<path class="st0" d="M122.7,0h9.4l9.4,22.3V0h8.6v39.2h-9.4l-9.4-22.3v22.3h-8.6V0z"/>
+<path class="st0" d="M157.7,0h21.9v7.8h-13.3v7.8h8.9l-1.8,7.8h-7.1v15.7h-8.6V0z"/>
+<path class="st0" d="M187.3,0h8.6v31.3h13.3v7.8h-21.9V0z"/>
+<path class="st0" d="M216.8,34.1V0h8.6v31.3h7.4V0h8.6v34.1c0,1.3-0.5,2.6-1.5,3.6c-1,1-2.2,1.5-3.6,1.5h-14.5
+	c-1.4,0-2.7-0.5-3.6-1.5C217.4,36.7,216.8,35.5,216.8,34.1z"/>
+<path class="st0" d="M256.9,20l-8.3-20h9.2l6.1,15.3L270.1,0h9.3L271,20l8.4,19.2h-9.3L264,24.6l-6,14.5h-9.4L256.9,20z"/>
+<path class="st0" d="M286.5,0h20c1.3,0,2.6,0.5,3.6,1.5c1,1,1.5,2.2,1.5,3.6v29c0,1.3-0.5,2.6-1.5,3.6c-1,1-2.2,1.5-3.6,1.5h-20V0z
+	 M303,31.3V7.9h-7.8v23.5H303z"/>
+<path class="st0" d="M319.2,0h20c1.3,0,2.6,0.5,3.6,1.5c1,1,1.5,2.2,1.5,3.6v9.8c0,1-0.3,2-0.9,2.8c-0.6,0.8-1.4,1.5-2.3,1.9
+	c0.9,0.4,1.7,1,2.3,1.9c0.6,0.8,0.9,1.8,0.9,2.8v9.8c0,1.4-0.5,2.6-1.5,3.6c-1,1-2.2,1.5-3.6,1.5h-20V0z M335.7,15.7V7.8h-7.8v7.8
+	H335.7z M335.7,31.3v-7.8h-7.8v7.8L335.7,31.3z"/>
+<path class="st0" d="M109.6,73h8.9c1.7,0,3.1-1.4,3.1-3.1V49h-5.3v19.2h-4.6V49h-5.3v20.9C106.5,71.6,107.9,73,109.6,73z"/>
+<path class="st0" d="M133.2,73h5.3V59.3l5.8,13.7h5.8V49h-5.3v13.7L139,49h-5.8V73z"/>
+<path class="st0" d="M161.6,73h5.3V49h-5.3V73z"/>
+<path class="st0" d="M182.6,73h7.9l5.1-24h-5.4l-3.7,19.2L182.9,49h-5.4L182.6,73z"/>
+<path class="st0" d="M206.2,73h13.4v-4.8h-8.2v-4.8h4.4l1.1-4.8h-5.5v-4.8h8.2V49h-13.4V73z"/>
+<path class="st0" d="M231.2,73h5.3v-6.7h3.2l1.7,6.7h5.5l-1.8-7c1.1-0.5,1.8-1.6,1.8-2.8V52.1c0-1.7-1.4-3.1-3.1-3.1h-12.5V73z
+	 M236.5,61.5v-7.7h5v7.7H236.5z"/>
+<path class="st0" d="M261.6,73h8.2c1.7,0,3.1-1.4,3.1-3.1v-6.8c0-1.2-0.8-2.4-1.9-2.8l-7.2-3.1v-3.4h3.8v2.9l5.3-1.2v-3.4
+	c0-1.7-1.4-3.1-3.1-3.1h-8.2c-1.7,0-3.1,1.4-3.1,3.1v6.1c0,1.2,0.8,2.4,1.9,2.8l7.2,3.1v4.1h-3.8v-2.9l-5.3,1.2v3.4
+	C258.4,71.6,259.8,73,261.6,73z"/>
+<path class="st0" d="M284.4,73h5.3V49h-5.3V73z"/>
+<path class="st0" d="M305.9,73h5.3V53.8h5.3V49h-15.8v4.8h5.3V73z"/>
+<path class="st0" d="M332.7,73h5.2v-7.9l6.3-16.1h-5.7l-3.3,10.1L332,49h-5.7l6.3,16.1V73z"/>
+<path class="st1" d="M77,26.3v20.4c-0.1,0.7-0.1,1.5-0.2,2.2c-0.5,2.5-1.7,4.5-3.5,6.1c-1.9,1.8-4.1,2.8-6.6,3
+	c-1.5,0.1-2.9,0-4.3,0.1v-6.6l3.1,0c0.4,0,0.7-0.1,1.1-0.1c2.3-0.5,3.8-2.4,3.8-4.8V26.3c0-0.4,0-0.7-0.1-1.1
+	c-0.5-2.2-2.4-3.6-4.8-3.6H25.3v-6.6h39.5c0.8,0,1.7,0,2.5,0.1c3.9,0.7,6.7,2.8,8.5,6.3C76.7,22.9,77,24.6,77,26.3z"/>
+<path class="st1" d="M9.8,51.6h43v6.6H0.9c-0.1,0-0.1,0-0.3,0C0.3,58.2,0,58,0,57.7c0-0.4,0.3-0.6,0.6-0.7c1.6-0.4,2.5-1.6,2.6-3.3
+	V19.5c0-1.7-0.8-2.9-2.7-3.4C0.3,16,0,15.9,0,15.7c0-0.3,0.1-0.7,0.7-0.7h15v6.6H9.8V51.6z"/>
+<path class="st0" d="M62.4,14.6v0.3h-6.6c0-0.1,0-0.1,0-0.2v-3.2c0-0.6-0.1-1.3-0.3-1.9c-0.6-1.6-2.3-3-4.8-3H25.3v14.9v11.7h25.5
+	c0.3,0,0.4,0,1.1-0.1c2.1-0.3,3.8-2.1,3.9-4.3c0.1-1.5,0.1-3,0.1-4.5V24h6.6v4.5c0,1.6-0.3,3.1-1,4.6c-0.6,1.3-1.4,2.4-2.4,3.3
+	l0.1,0.1c2.1,2.2,3.2,4.7,3.3,7.6c0.1,2.4,0,4.8,0,7.2v0.3v6.6v1.7c0,1.1,0,2.2-0.1,3.3c-0.2,2.3-1.2,4.3-2.7,6
+	c-2.3,2.5-5.3,3.8-8.8,3.8H16c-0.4,0-0.6-0.2-0.6-0.4c0-0.2,0.1-0.5,0.4-0.6c0.2-0.1,0.4-0.1,0.6-0.2c0.8-0.4,1.6-0.8,1.9-1.7
+	c0.3-0.6,0.3-1.1,0.3-1.7v-7.8h6.7v5.9h25.6c0.5,0,1.1-0.1,1.5-0.2c2.1-0.6,3.5-2.5,3.5-4.8V44.7c0,0,0-0.2-0.1-0.8
+	c-0.3-2.5-2.3-4.2-4.9-4.2H25.3v11.9h-6.7V4.3C18.5,3,18,2.1,16.8,1.6c-0.3-0.1-0.9-0.3-1.1-0.4c-0.3-0.1-0.5-0.4-0.4-0.7
+	C15.5,0.1,15.9,0,15.9,0h35.4l0.1,0.1c3.2,0.1,5.8,1.4,7.9,3.5c1.9,2,2.9,4.3,3.1,6.9C62.5,11.9,62.4,13.2,62.4,14.6z"/>
+</svg>