From 7789efc2fe55772cc082184495026e34b73ba3eb Mon Sep 17 00:00:00 2001 From: Scott Anderson Date: Fri, 3 Jun 2022 13:26:25 -0500 Subject: [PATCH] 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 | 33 ++++++++ assets/js/content-interactions.js | 20 +++-- assets/styles/layouts/_article.scss | 1 + assets/styles/layouts/article/_influxdbu.scss | 84 +++++++++++++++++++ content/influxdb/v2.2/query-data/_index.md | 2 + layouts/shortcodes/influxdbu.html | 32 +++++++ static/svgs/influxdbu-full-white.svg | 46 ++++++++++ 7 files changed, 213 insertions(+), 5 deletions(-) create mode 100644 assets/styles/layouts/article/_influxdbu.scss create mode 100644 layouts/shortcodes/influxdbu.html create mode 100644 static/svgs/influxdbu-full-white.svg diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index aa8138675..dc7ae1118 100644 --- a/CONTRIBUTING.md +++ b/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 + +{{< influxdbu >}} + + +{{< influxdbu "influxdb-101" >}} + + +{{< 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**. diff --git a/assets/js/content-interactions.js b/assets/js/content-interactions.js index 08dcd7c73..fac870e37 100644 --- a/assets/js/content-interactions.js +++ b/assets/js/content-interactions.js @@ -1,10 +1,20 @@ ///////////////////////////// Make headers linkable ///////////////////////////// -$(".article--content h2, \ - .article--content h3, \ - .article--content h4, \ - .article--content h5, \ - .article--content h6" ).each(function() { +var headingWhiteList = $("\ + .article--content h2, \ + .article--content h3, \ + .article--content h4, \ + .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')) } diff --git a/assets/styles/layouts/_article.scss b/assets/styles/layouts/_article.scss index 3e05da328..62711ad03 100644 --- a/assets/styles/layouts/_article.scss +++ b/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", diff --git a/assets/styles/layouts/article/_influxdbu.scss b/assets/styles/layouts/article/_influxdbu.scss new file mode 100644 index 000000000..bd5e49240 --- /dev/null +++ b/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%; + } + } +} \ No newline at end of file diff --git a/content/influxdb/v2.2/query-data/_index.md b/content/influxdb/v2.2/query-data/_index.md index 3c1ca1760..ede1668a8 100644 --- a/content/influxdb/v2.2/query-data/_index.md +++ b/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" >}} diff --git a/layouts/shortcodes/influxdbu.html b/layouts/shortcodes/influxdbu.html new file mode 100644 index 000000000..b9a9dc65e --- /dev/null +++ b/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" }} +
+ + +
+{{ 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 }} \ No newline at end of file diff --git a/static/svgs/influxdbu-full-white.svg b/static/svgs/influxdbu-full-white.svg new file mode 100644 index 000000000..a35d5b9bf --- /dev/null +++ b/static/svgs/influxdbu-full-white.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + +