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 addedpull/4086/head
Scott Anderson
GitHub
parent
5179cd2f57
commit
7789efc2fe
|
|
@ -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**.
|
||||
|
|
|
|||
|
|
@ -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'))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -123,6 +123,7 @@
|
|||
"article/flex",
|
||||
"article/flux",
|
||||
"article/html-diagrams",
|
||||
"article/influxdbu",
|
||||
"article/keybinding",
|
||||
"article/list-filters",
|
||||
"article/lists",
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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" >}}
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
Loading…
Reference in New Issue