From f0ab0ec8b151658e6bd72b0efeb6e9fa15dcff31 Mon Sep 17 00:00:00 2001 From: Scott Anderson Date: Thu, 3 Jan 2019 09:46:23 -0700 Subject: [PATCH] added tabbed codeblock shortcodes and styles --- README.md | 39 ++++++++++++++++++++++ assets/styles/layouts/_layout-article.scss | 33 ++++++++++++++++++ assets/styles/themes/_theme-dark.scss | 6 ++++ assets/styles/themes/_theme-light.scss | 10 ++++-- content/v2.0/example.md | 25 ++++++++++++++ layouts/shortcodes/code-tab-content.html | 3 ++ layouts/shortcodes/code-tabs-wrapper.html | 3 ++ layouts/shortcodes/code-tabs.html | 3 ++ 8 files changed, 120 insertions(+), 2 deletions(-) create mode 100644 layouts/shortcodes/code-tab-content.html create mode 100644 layouts/shortcodes/code-tabs-wrapper.html create mode 100644 layouts/shortcodes/code-tabs.html diff --git a/README.md b/README.md index ebe3110db..b132550e0 100644 --- a/README.md +++ b/README.md @@ -186,3 +186,42 @@ Markdown content for tab 2. {{< /tabs-wrapper >}} ``` + +#### Tabbed code blocks +Shortcodes are also available for tabbed code blocks primarily used to give users +the option to choose between different languages and syntax. +The shortcode structure is the same as above, but the shortcode names are different: + +`{{< code-tabs-wrapper >}}` +`{{% code-tabs %}}` +`{{% code-tab-content %}}` + +~~~md +{{< 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 >}} +~~~ diff --git a/assets/styles/layouts/_layout-article.scss b/assets/styles/layouts/_layout-article.scss index a31719819..8f48ad169 100644 --- a/assets/styles/layouts/_layout-article.scss +++ b/assets/styles/layouts/_layout-article.scss @@ -151,6 +151,7 @@ padding: 1.5em; border-radius: $border-radius; overflow: scroll; + code { padding: 0; } } //////////////////////////////////// Tables //////////////////////////////////// @@ -407,4 +408,36 @@ 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; + } + } + } + .tab-content { + padding: 0; + pre { + margin: 0 0 3rem; + border-radius: $border-radius 0 $border-radius $border-radius; + } + } + } + } diff --git a/assets/styles/themes/_theme-dark.scss b/assets/styles/themes/_theme-dark.scss index 485e78e3b..3657ff10b 100644 --- a/assets/styles/themes/_theme-dark.scss +++ b/assets/styles/themes/_theme-dark.scss @@ -90,6 +90,12 @@ $article-tab-bg: $g4-onyx !default; $article-tab-active-text: $g20-white !default; $article-tab-active-bg: $b-ocean !default; +$article-tab-code-text: $g9-mountain !default; +$article-tab-code-bg: $g5-pepper !default; +$article-tab-code-text-hover: $g20-white !default; +$article-tab-code-bg-hover: $b-ocean !default; +$article-tab-code-active-text: $g20-white !default; + // Left Navigation $nav-category: $b-ocean !default; $nav-category-hover: $g20-white !default; diff --git a/assets/styles/themes/_theme-light.scss b/assets/styles/themes/_theme-light.scss index 00892d2bb..a1d8e890e 100644 --- a/assets/styles/themes/_theme-light.scss +++ b/assets/styles/themes/_theme-light.scss @@ -41,10 +41,10 @@ $article-code: $p-star; $article-code-bg: $p-violettecreme; $article-code-accent1: $p-potassium; $article-code-accent2: $b-ocean; -$article-code-accent3: #0e9e75; +$article-code-accent3: #008e7c; $article-code-accent4: $o-ruby; $article-code-accent5: #e24bbb; -$article-code-accent6: $b-pool; +$article-code-accent6: $b-ocean; $article-code-accent7: #e90; $article-code-select: $b-pool; $article-code-hover: $b-sapphire; @@ -89,6 +89,12 @@ $article-tab-bg: $g18-cloud; $article-tab-active-text: $g20-white; $article-tab-active-bg: $b-pool; +$article-tab-code-text: $p-potassium; +$article-tab-code-bg: $g20-white; +$article-tab-code-text-hover: $g20-white; +$article-tab-code-bg-hover: $p-comet; +$article-tab-code-active-text: $p-star; + // Left Navigation $nav-category: $b-ocean; $nav-category-hover: $gr-viridian; diff --git a/content/v2.0/example.md b/content/v2.0/example.md index c085072a4..6a05ba789 100644 --- a/content/v2.0/example.md +++ b/content/v2.0/example.md @@ -16,6 +16,31 @@ This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nu 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 >}} + {{% enterprise %}} ### h3 This is a header3 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. diff --git a/layouts/shortcodes/code-tab-content.html b/layouts/shortcodes/code-tab-content.html new file mode 100644 index 000000000..d88086a17 --- /dev/null +++ b/layouts/shortcodes/code-tab-content.html @@ -0,0 +1,3 @@ +
+ {{ .Inner }} +
diff --git a/layouts/shortcodes/code-tabs-wrapper.html b/layouts/shortcodes/code-tabs-wrapper.html new file mode 100644 index 000000000..e42d0856e --- /dev/null +++ b/layouts/shortcodes/code-tabs-wrapper.html @@ -0,0 +1,3 @@ +
+ {{ .Inner }} +
diff --git a/layouts/shortcodes/code-tabs.html b/layouts/shortcodes/code-tabs.html new file mode 100644 index 000000000..94db29833 --- /dev/null +++ b/layouts/shortcodes/code-tabs.html @@ -0,0 +1,3 @@ +
+ {{ .Inner }} +