diff --git a/assets/js/content-interactions.js b/assets/js/content-interactions.js index c29abf538..6e57adbf8 100644 --- a/assets/js/content-interactions.js +++ b/assets/js/content-interactions.js @@ -7,7 +7,7 @@ $("h2,h3,h4,h5,h6").each(function() { ///////////////////////////////// Smooth Scroll ///////////////////////////////// -$('.article a[href^="#"]:not(.tabs p a)').on('click',function (e) { +$('.article a[href^="#"]:not(.tabs p a, .code-tabs p a)').on('click',function (e) { e.preventDefault(); var target = this.hash; @@ -30,10 +30,7 @@ $(".children-toggle").click(function(e) { //////////////////////////////// Tabbed Content //////////////////////////////// -$(function() { - const container = '.tabs-wrapper' - const tab = '.tabs p a'; - const content = '.tab-content'; +function tabbedContent(container, tab, content) { // Add the active class to the first tab in each tab group, // in case it wasn't already set in the markup. @@ -57,4 +54,7 @@ $(function() { } }); }); -}); +} + +tabbedContent('.code-tabs-wrapper', '.code-tabs p a', '.code-tab-content'); +tabbedContent('.tabs-wrapper', '.tabs p a', '.tab-content'); diff --git a/assets/styles/layouts/_layout-article.scss b/assets/styles/layouts/_layout-article.scss index 1527f769b..8122e45b4 100644 --- a/assets/styles/layouts/_layout-article.scss +++ b/assets/styles/layouts/_layout-article.scss @@ -377,37 +377,39 @@ /////////////////////////////// Tabbed Content /////////////////////////////// - .tabs-wrapper{ - margin: 2rem 0 .5rem; + .tabs-wrapper, .code-tabs-wrapper{ + margin: 2.5rem 0 .5rem; } - .tabs p { - display: flex; - flex-wrap: wrap; - } - .tabs a { - flex-grow: 1; - margin: 2px; - font-size: 0.875rem; - color: $article-tab-text; - padding: .35rem .75rem; - display: inline-block; - text-align: center; - border-radius: $border-radius; - background-color: $article-tab-bg; - transition: background-color .2s, color .2s; - - &:hover { - color: $article-tab-active-text; - background: $article-tab-active-bg; + .tabs, .code-tabs { + p { + display: flex; + flex-wrap: wrap; } - &.is-active { - color: $article-tab-active-text; - background: $article-tab-active-bg; + a { + flex-grow: 1; + margin: 2px; + font-size: 0.875rem; + color: $article-tab-text; + padding: .35rem .75rem; + display: inline-block; + text-align: center; + border-radius: $border-radius; + background-color: $article-tab-bg; + transition: background-color .2s, color .2s; + + &:hover { + color: $article-tab-active-text; + background: $article-tab-active-bg; + } + &.is-active { + color: $article-tab-active-text; + background: $article-tab-active-bg; + } } } - .tab-content { - padding: 1.5rem 0; + .tab-content, .code-tabs-content { + margin: .75rem 0 3rem; width: 100%; & > * { @@ -416,34 +418,35 @@ } } - .tab-content:not(:first-of-type) { + .tab-content:not(:first-of-type), + .code-tab-content:not(:first-of-type) { display: none; } - .tabs-wrapper.code { - .tabs { - p { - margin: 0; - text-align: right; - display: block; - } - a { - margin: 0; - border-radius: $border-radius $border-radius 0 0; - display: inline-block; - background: $article-tab-code-bg; - color: $article-tab-code-text; - &:hover { - background: $article-tab-code-bg-hover; - color: $article-tab-code-text-hover; - } - &.is-active { - background-color: $article-code-bg; - color: $article-tab-code-active-text; - } - } + .code-tabs-wrapper { + .code-tabs { + p { + margin: 0; + text-align: right; + display: block; + } + a { + margin: 0; + border-radius: $border-radius $border-radius 0 0; + display: inline-block; + background: $article-tab-code-bg; + color: $article-tab-code-text; + &:hover { + background: $article-tab-code-bg-hover; + color: $article-tab-code-text-hover; + } + &.is-active { + background-color: $article-code-bg; + color: $article-tab-code-active-text; + } + } } - .tab-content { + .code-tab-content { padding: 0; pre { margin: 0 0 3rem; diff --git a/assets/styles/layouts/_syntax-highlighting.scss b/assets/styles/layouts/_syntax-highlighting.scss index c52d5332c..c8ecaf3a5 100644 --- a/assets/styles/layouts/_syntax-highlighting.scss +++ b/assets/styles/layouts/_syntax-highlighting.scss @@ -170,3 +170,53 @@ pre[class*="language-"] { .w /* Text.Whitespace */ { font-style: italic } } + +.note { + .highlight { + color: $article-note-code; + + .gh,.go,.na,.nt,.nv,.ow + { color: $article-note-code } + .c,.ch,.cm,.cpf,.c1, .cs,.w + { color: $article-note-code-accent1; } + .gi + { background-color: $article-note-code-accent1; } + .k,.kc,.kd,.kn,.kp,.kr,.nn + { color: $article-note-code-accent2; } + .bp,.cp,.dl,.gt,.gu,.kt,.nb,.nc,.no,.sa,.sb,.sc,.sd,.se,.sh,.sx,.sr,.s1,.s2 + { color: $article-note-code-accent3 } + .err,.fm,.gr,.gd,.nd,.ne,.nf,.nl,.si + { color: $article-note-code-accent4 } + .m,.ni,.mb,.mf,.mh,.mi,.mo,.vc,.vg,.vi,.vm,.il + { color: $article-note-code-accent5 } + .gp,.o + { color: $article-note-code-accent6 } + .ss + { color: $article-note-code-accent7 } + } +} + +.warn { + .highlight { + color: $article-warn-code; + + .gh,.go,.na,.nt,.nv,.ow + { color: $article-warn-code } + .c,.ch,.cm,.cpf,.c1, .cs,.w + { color: $article-warn-code-accent1; } + .gi + { background-color: $article-warn-code-accent1; } + .k,.kc,.kd,.kn,.kp,.kr,.nn + { color: $article-warn-code-accent2; } + .bp,.cp,.dl,.gt,.gu,.kt,.nb,.nc,.no,.sa,.sb,.sc,.sd,.se,.sh,.sx,.sr,.s1,.s2 + { color: $article-warn-code-accent3 } + .err,.fm,.gr,.gd,.nd,.ne,.nf,.nl,.si + { color: $article-warn-code-accent4 } + .m,.ni,.mb,.mf,.mh,.mi,.mo,.vc,.vg,.vi,.vm,.il + { color: $article-warn-code-accent5 } + .gp,.o + { color: $article-warn-code-accent6 } + .ss + { color: $article-warn-code-accent7 } + } +} diff --git a/assets/styles/themes/_theme-dark.scss b/assets/styles/themes/_theme-dark.scss index 4ffd578c8..f8973f3fd 100644 --- a/assets/styles/themes/_theme-dark.scss +++ b/assets/styles/themes/_theme-dark.scss @@ -64,20 +64,34 @@ $article-note-heading: $g20-white !default; $article-note-text: $gr-viridian !default; $article-note-link: $gr-rainforest !default; $article-note-link-hover: $g20-white !default; -$article-note-code: #75d2f1 !default; -$article-note-code-bg: #20272b !default; $article-note-table-header: $gr-viridian !default; $article-note-table-row-alt: #21272d !default; +$article-note-code: #75d2f1 !default; +$article-note-code-bg: #20272b !default; +$article-note-code-accent1: #567375 !default; +$article-note-code-accent2: $b-pool !default; +$article-note-code-accent3: $gr-viridian !default; +$article-note-code-accent4: $o-ruby !default; +$article-note-code-accent5: #ff6db0 !default; +$article-note-code-accent6: $b-pool !default; +$article-note-code-accent7: #e90 !default; $article-warn-base: $o-dreamsicle !default; $article-warn-heading: $g20-white !default; $article-warn-text: $o-dreamsicle !default; $article-warn-link: $o-tungsten !default; $article-warn-link-hover: $g20-white !default; -$article-warn-code: #ec6e6e !default; -$article-warn-code-bg: #292024 !default; $article-warn-table-header: $o-dreamsicle !default; $article-warn-table-row-alt: #2b252b !default; +$article-warn-code: #ec6e6e !default; +$article-warn-code-bg: #292024 !default; +$article-warn-code-accent1: #844c4c !default; +$article-warn-code-accent2: $b-pool !default; +$article-warn-code-accent3: $gr-viridian !default; +$article-warn-code-accent4: $o-ruby !default; +$article-warn-code-accent5: #ffb4fb !default; +$article-warn-code-accent6: $b-pool !default; +$article-warn-code-accent7: #e90 !default; $article-enterprise-base: $p-star !default; $article-enterprise-text: $p-potassium !default; diff --git a/assets/styles/themes/_theme-light.scss b/assets/styles/themes/_theme-light.scss index a6106b9e0..c49ac4c62 100644 --- a/assets/styles/themes/_theme-light.scss +++ b/assets/styles/themes/_theme-light.scss @@ -63,20 +63,34 @@ $article-note-heading: $gr-emerald; $article-note-text: $gr-emerald; $article-note-link: rgba($gr-emerald, .75); $article-note-link-hover: $b-pool; -$article-note-code: #147572; -$article-note-code-bg: #d6f7ec; $article-note-table-header: $gr-viridian; $article-note-table-row-alt: #d6f5e9; +$article-note-code: #0A6f75; +$article-note-code-bg: #d6f7ec; +$article-note-code-accent1: #6abba0; +$article-note-code-accent2: #0084d6; +$article-note-code-accent3: #5d52d6; +$article-note-code-accent4: $o-ruby; +$article-note-code-accent5: #e24bbb; +$article-note-code-accent6: #0084d6; +$article-note-code-accent7: #e90; $article-warn-base: $o-dreamsicle; $article-warn-heading: $o-fire; $article-warn-text: $o-curacao; $article-warn-link: rgba($o-curacao, .75); $article-warn-link-hover: $b-sapphire; -$article-warn-code: #f52f75; -$article-warn-code-bg: #ffebeb; $article-warn-table-header: $o-dreamsicle; $article-warn-table-row-alt: #ffe6df; +$article-warn-code: #d0154e; +$article-warn-code-bg: #ffebeb; +$article-warn-code-accent1: #fd99b8; +$article-warn-code-accent2: #357ae8; +$article-warn-code-accent3: #6c59cc; +$article-warn-code-accent4: $o-ruby; +$article-warn-code-accent5: #6a0a6f; +$article-warn-code-accent6: #357ae8; +$article-warn-code-accent7: #e90; $article-enterprise-base: $p-comet; $article-enterprise-text: $p-star; diff --git a/content/v2.0/example.md b/content/v2.0/example.md index 839f6b0c6..09a5b904d 100644 --- a/content/v2.0/example.md +++ b/content/v2.0/example.md @@ -393,7 +393,38 @@ cpu = from(bucket:"telegraf/autogen") {{% /tabs %}} {{% tab-content %}} -This is tab 1.1 content. +This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rutrum, metus id scelerisque euismod, erat ante suscipit nibh, ac congue enim risus id est. Etiam tristique nisi et tristique auctor. Morbi eu bibendum erat. Sed ullamcorper, dui id lobortis efficitur, mauris odio pharetra neque, vel tempor odio dolor blandit justo. + +## h2 This is a header2 +This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rutrum, metus id scelerisque euismod, erat ante suscipit nibh, ac congue enim risus id est. Etiam tristique nisi et tristique auctor. Morbi eu bibendum erat. Sed ullamcorper, dui id lobortis efficitur, mauris odio pharetra neque, vel tempor odio dolor blandit justo. + +This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rutrum, metus id scelerisque euismod, erat ante suscipit nibh, ac congue enim risus id est. Etiam tristique nisi et tristique auctor. Morbi eu bibendum erat. Sed ullamcorper, dui id lobortis efficitur, mauris odio pharetra neque, vel tempor odio dolor blandit justo. + +{{< code-tabs-wrapper >}} +{{% code-tabs %}} +[Flux](#) +[InfluxQL](#) +{{% /code-tabs %}} + +{{% code-tab-content %}} +```js +data = from(bucket: "telegraf/autogen") + |> range(start: -15m) + |> filter(fn: (r) => + r._measurement == "mem" AND + r._field == "used_percent" + ) +``` +{{% /code-tab-content %}} +{{% code-tab-content %}} +```sql +SELECT "used_percent" +FROM "telegraf"."autogen"."mem" +WHERE time > now() - 15m +``` +{{% /code-tab-content %}} +{{< /code-tabs-wrapper >}} + {{% /tab-content %}} {{% tab-content %}} diff --git a/layouts/partials/article/enterprise.html b/layouts/partials/article/enterprise.html index 8dbb5f2c6..ceea7dad7 100644 --- a/layouts/partials/article/enterprise.html +++ b/layouts/partials/article/enterprise.html @@ -1,8 +1,9 @@ +{{ $enterpriseLink := "#"}} {{ if ( $.Params.enterprise_all ) }}

The features and functionality discussed on this page are unique to the Enterprise edition of InfluxDB. - Learn more about InfluxDB Enterprise. + Learn more about InfluxDB Enterprise.

{{ else if ( $.Params.enterprise_some ) }} @@ -13,7 +14,7 @@

This page includes features and functionality unique to the Enterprise edition of InfluxDB. - Learn more about InfluxDB Enterprise. + Learn more about InfluxDB Enterprise.

diff --git a/layouts/shortcodes/code-tab-content.html b/layouts/shortcodes/code-tab-content.html index d88086a17..151b19b9c 100644 --- a/layouts/shortcodes/code-tab-content.html +++ b/layouts/shortcodes/code-tab-content.html @@ -1,3 +1,3 @@ -
+
{{ .Inner }}
diff --git a/layouts/shortcodes/code-tabs-wrapper.html b/layouts/shortcodes/code-tabs-wrapper.html index e42d0856e..71b5f3120 100644 --- a/layouts/shortcodes/code-tabs-wrapper.html +++ b/layouts/shortcodes/code-tabs-wrapper.html @@ -1,3 +1,3 @@ -
+
{{ .Inner }}
diff --git a/layouts/shortcodes/code-tabs.html b/layouts/shortcodes/code-tabs.html index 94db29833..4d61d40f7 100644 --- a/layouts/shortcodes/code-tabs.html +++ b/layouts/shortcodes/code-tabs.html @@ -1,3 +1,3 @@ -
+
{{ .Inner }}