Influxdata
/
docs-v2
mirror of https://github.com/influxdata/docs-v2.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

WIP dark theme

pull/954/head
Scott Anderson 2020-04-14 14:54:03 -06:00
parent bf43c889fe
commit b755f17b6a
18 changed files with 239 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
CONTRIBUTING.md
View File

@ -521,29 +521,6 @@ The following case insensitive values are supported:
- settings
- feedback
### InfluxDB UI notification messages
In some cases, documentation references a notification message that appears in
the top-right corner of the InfluxDB UI.
Rather than taking a screenshot of the message (that can be hard to maintain over time),
use the `{{< ui-message >}}` shortcode.
It expects two parameters:
**`text`** (Required)
The message displayed.
**`color`** (Optional)
Sets the background color and icons used in the message.
The following options are available:
- green _(default)_
- blue
- red
```
{{< ui-message color="green" text="The message displayed in the notification.">}}
```
### Flexbox-formatted content blocks
CSS Flexbox formatting lets you create columns in article content that adjust and
flow based on the viewable width.

6
assets/styles/layouts/_error-page.scss
View File

@ -61,12 +61,12 @@
margin-right: 4px;
padding: .75rem 1rem;
border-radius: $radius;
background: $error-page-btn;
text-align: center;
color: $error-page-btn-text;
transition: background-color .2s;
@include gradient($grad-blue);
&:hover {
background: $error-page-btn-hover;
color: $error-page-btn-hover-text;
@include gradient($grad-blue);
}
&.back:before {
content: "\e90a";

4
assets/styles/layouts/_top-nav.scss
View File

@ -42,7 +42,7 @@
right: 3.5rem;
color: $g20-white;
height: 2rem;
background: $version-selector-top;
@include gradient($version-selector-gradient);
font-weight: $medium;
border-radius: $radius;
overflow: hidden;
@ -65,7 +65,7 @@
&.open {
height: auto;
background: linear-gradient($version-selector-top, $version-selector-bottom);
@include gradient($version-selector-gradient);
&:after {
transform: rotate(180deg);
}

47
assets/styles/layouts/_ui-messages.scss
View File

@ -1,47 +0,0 @@
.article--content {
.ui-message {
display: flex;
align-items: center;
width: 375px;
margin: 1rem 0 2rem;
padding: .85rem 0;
font-family: $rubik;
font-size: .9rem;
border-radius: 5px;
color: $g20-white;
.icon, .close {
width: 13%;
text-align: center;
font-family: 'icomoon';
font-size: 1.1rem;
}
.close:after {
content: "\e932";
opacity: .25;
}
.text {
width: 74%;
font-weight: $medium;
}
&.green {
background: linear-gradient(45deg, #34bb56, #00a3fe);
.icon:before { content: ""; }
}
&.blue {
background: linear-gradient(45deg, rgb(190, 46, 228), rgb(0, 163, 255));
.icon:before { content: "\e935"; }
}
&.red {
background: linear-gradient(45deg, rgb(220, 78, 88), rgb(142, 31, 195));
.icon:before { content: "\e920"; }
}
}
}

29
assets/styles/layouts/article/_buttons.scss
View File

@ -1,22 +1,43 @@
/////////////////////////////////// Buttons //////////////////////////////////
a.btn {
position: relative;
display: inline-block;
margin: .5rem 0 1rem;
margin: .5rem .25rem .5rem 0;
padding: .5rem 1rem;
background: $article-btn;
color: $article-btn-text;
border-radius: $radius;
font-size: .95rem;
z-index: 1;
@include gradient($grad-blue);
&:after {
content: "";
position: absolute;
display: block;
top: 0;
right: 0;
width: 100%;
height: 100%;
border-radius: $radius;
@include gradient($grad-blue-light);
opacity: 0;
transition: opacity .2s;
z-index: -1;
}
&:hover {
background: $article-btn-hover;
color: $article-btn-text-hover;
cursor: pointer;
&:after {
opacity: 1;
}
}
&.download:before {
content: "\e91c";
font-family: "icomoon";
margin-right: .5rem;
font-size: 1.1rem;
}
}

8
assets/styles/layouts/article/_cloud.scss
View File

@ -69,7 +69,7 @@
color: $article-cloud-text;
box-shadow: 1px 3px 10px $article-cloud-shadow;
thead{
background: $article-cloud-table-header;
@include gradient($article-cloud-table-header);
}
tr:nth-child(even) td {
background: $article-cloud-table-row-alt;
@ -81,7 +81,11 @@
}
.code-tabs-wrapper .code-tabs a {
background: transparent;
&.is-active {background: $article-cloud-code-bg}
color: rgba($article-cloud-text, .5);
&:hover { color: rgba($article-cloud-text, 1); }
&.is-active {
color: rgba($article-cloud-text, 1);
background: $article-cloud-code-bg};
}
&.flex {

8
assets/styles/layouts/article/_note.scss
View File

@ -36,7 +36,7 @@
color: $article-note-text;
box-shadow: 1px 3px 10px $article-note-shadow;
thead{
background: $article-note-table-header;
@include gradient($article-note-table-header);
}
tr:nth-child(even) td {
background: $article-note-table-row-alt;
@ -48,6 +48,10 @@
}
.code-tabs-wrapper .code-tabs a {
background: transparent;
&.is-active {background: $article-note-code-bg}
color: rgba($article-note-text, .5);
&:hover { color: rgba($article-note-text, 1); }
&.is-active {
color: rgba($article-note-text, 1);
background: $article-note-code-bg};
}
}

113
assets/styles/layouts/article/_tabbed-content.scss
View File

@ -1,14 +1,9 @@
/////////////////////////////// Tabbed Content ///////////////////////////////
.tabs-wrapper {
margin: 2.5rem 0 .5rem;
}
.tabs-wrapper { margin: 2.5rem 0 .5rem; }
.code-tabs-wrapper { margin: 1.5rem 0 .5rem; }
.code-tabs-wrapper {
margin: 1.5rem 0 .5rem;
}
.tabs, .code-tabs {
.tabs {
p {
display: flex;
flex-wrap: wrap;
@ -16,70 +11,90 @@
a {
flex-grow: 1;
margin: 2px;
position: relative;
font-size: 0.875rem;
font-weight: $medium;
color: $article-tab-text;
padding: .35rem .75rem;
display: inline-block;
text-align: center;
color: $article-tab-text;
border-radius: $radius;
background-color: $article-tab-bg;
transition: background-color .2s, color .2s;
z-index: 1;
&:after {
content: "";
position: absolute;
display: block;
top: 0;
right: 0;
width: 100%;
height: 100%;
border-radius: $radius;
@include gradient($grad-blue);
opacity: 0;
transition: opacity .2s;
z-index: -1;
}
&:hover {
color: $article-tab-active-text;
background: $article-tab-active-bg;
&:after {
opacity: 1;
}
}
&.is-active {
color: $article-tab-active-text;
background: $article-tab-active-bg;
&:after {
opacity: 1;
@include gradient($grad-blue)
}
}
}
}
.code-tabs {
p {
margin: 0;
text-align: right;
display: block;
}
a {
padding: .1rem .75rem;
margin: 0;
border-radius: $radius $radius 0 0;
display: inline-block;
font-size: 0.875rem;
background: $article-bg;
color: rgba($article-tab-code-text, .5);
&:hover {
color: $article-tab-code-text;
}
&.is-active {
background-color: $article-code-bg;
color: $article-tab-code-text;
}
}
}
.code-tab-content {
padding: 0;
pre {
margin: 0 0 3rem;
border-radius: $radius 0 $radius $radius;
}
}
.tab-content, .code-tabs-content {
margin: .75rem 0 3rem;
width: 100%;
& > * {
width: 100% !important;
margin-left: 0 !important;
width: 100%;
margin-left: 0;
}
}
.tab-content:not(:first-of-type),
.code-tab-content:not(:first-of-type) {
display: none;
}
.code-tabs-wrapper {
.code-tabs {
p {
margin: 0;
text-align: right;
display: block;
}
a {
padding: .1rem .75rem;
margin: 0;
border-radius: $radius $radius 0 0;
display: inline-block;
background: $article-bg;
color: rgba($article-tab-code-text, .5);
&:hover {
color: $article-tab-code-text;
}
&.is-active {
background-color: $article-code-bg;
color: $article-tab-code-text;
}
}
}
.code-tab-content {
padding: 0;
pre {
margin: 0 0 3rem;
border-radius: $radius 0 $radius $radius;
}
}
}
.tab-content:not(:first-of-type) { display: none; }
.code-tab-content:not(:first-of-type) { display: none; }

2
assets/styles/layouts/article/_tables.scss
View File

@ -15,7 +15,7 @@ table {
padding: .85rem 1.25rem;
}
thead {
background: linear-gradient(to right, $article-table-header-left, $article-table-header-right);
@include gradient($article-table-header, 90deg);
background-attachment: fixed;
}

8
assets/styles/layouts/article/_warn.scss
View File

@ -36,7 +36,7 @@
color: $article-warn-text;
box-shadow: 1px 3px 10px $article-warn-shadow;
thead{
background: $article-warn-table-header;
@include gradient($article-warn-table-header);
}
tr:nth-child(even) td {
background: $article-warn-table-row-alt;
@ -48,6 +48,10 @@
}
.code-tabs-wrapper .code-tabs a {
background: transparent;
&.is-active {background: $article-warn-code-bg}
color: rgba($article-warn-text, .5);
&:hover { color: rgba($article-warn-text, 1); }
&.is-active {
color: rgba($article-warn-text, 1);
background: $article-warn-code-bg};
}
}

1
assets/styles/styles-default.scss
View File

@ -18,7 +18,6 @@
"layouts/content-wrapper",
"layouts/article",
"layouts/inline-icons",
"layouts/ui-messages",
"layouts/syntax-highlighting",
"layouts/algolia-search-overrides",
"layouts/landing",

32
assets/styles/themes/_theme-dark.scss
View File

@ -19,8 +19,7 @@ $body-bg: $g0-obsidian;
// TopNav Colors
$topnav-link: $g20-white;
$topnav-link-hover: $b-pool;
$version-selector-top: $b-pool;
$version-selector-bottom: $br-galaxy;
$version-selector-gradient: $grad-miyazakisky;
$theme-switch-light: inline-block;
$theme-switch-dark: none;
@ -33,7 +32,7 @@ $sidebar-search-text: $g20-white;
// Left Navigation
$nav-category: $b-pool;
$nav-category-hover: $g20-white;
$nav-item: $g16-pearl;
$nav-item: $g15-platinum;
$nav-item-hover: $b-pool;
$nav-border: $g5-pepper;
$nav-toggle: $g16-pearl;
@ -45,7 +44,7 @@ $nav-active: $br-chartreuse;
$article-bg: $g1-raven;
$article-heading: $g20-white;
$article-heading-alt: $g19-ghost;
$article-text: $g16-pearl;
$article-text: $g15-platinum;
$article-bold: $g19-ghost;
$article-link: $b-pool;
$article-link-hover: $g20-white;
@ -54,7 +53,7 @@ $article-shadow: $g0-obsidian;
// Article Code
$article-code: $cp-munchkin;
$article-code-bg: $code-dark-bg;
$article-code-bg: $g0-obsidian;
$article-code-shadow: $g0-obsidian;
$article-code-accent1: $np-smokey;
$article-code-accent2: $b-pool;
@ -64,13 +63,12 @@ $article-code-accent5: #ff6db0;
$article-code-accent6: $b-pool;
$article-code-accent7: #e90;
$article-code-select: $b-pool;
$article-code-link: $b-dodger;
$article-code-link: $b-pool;
$article-code-link-hover: $g20-white;
$article-code-scrollbar: $g3-castle;
// Article Tables
$article-table-header-left: $br-pulsar;
$article-table-header-right: $b-pool;
$article-table-header: $grad-gundampilot;
$article-table-row-alt: $g3-castle;
$article-table-scrollbar: $g0-obsidian;
@ -80,7 +78,7 @@ $article-note-heading: $g20-white;
$article-note-text: $gr-honeydew;
$article-note-link: $gr-wasabi;
$article-note-link-hover: $g20-white;
$article-note-table-header: $gr-viridian;
$article-note-table-header: $grad-green-dark;
$article-note-table-row-alt: #1a3c34;
$article-note-table-scrollbar: #162627;
$article-note-shadow: $g0-obsidian;
@ -100,9 +98,9 @@ $article-warn-heading: $g20-white;
$article-warn-text: $r-tungsten;
$article-warn-link: $r-marmelade;
$article-warn-link-hover: $g20-white;
$article-warn-table-header: rgba($r-dreamsicle, .9);
$article-warn-table-header: $grad-red;
$article-warn-table-row-alt: #4a2a2a;
$article-warn-table-scrollbar: #2a2025;
$article-warn-table-scrollbar: #1f181b;
$article-warn-shadow: $g0-obsidian;
$article-warn-code: #ec6e6e;
$article-warn-code-bg: $g0-obsidian;
@ -120,7 +118,7 @@ $article-cloud-heading: $g20-white;
$article-cloud-text: $b-fleur;
$article-cloud-link: $b-hawkeye;
$article-cloud-link-hover: $g20-white;
$article-cloud-table-header: $b-pool;
$article-cloud-table-header: $grad-blue-dark;
$article-cloud-table-row-alt: #1b3a58;
$article-cloud-table-scrollbar: #192a3a;
$article-cloud-shadow: $g0-obsidian;
@ -159,20 +157,20 @@ $article-nav-icon-bg: $g5-pepper;
$article-nav-acct-bg: $g3-castle;
// Error Page Colors
$error-page-btn: $b-dodger;
$error-page-btn: $b-pool;
$error-page-btn-text: $g20-white;
$error-page-btn-hover: $g20-white;
$error-page-btn-hover-text: $b-dodger;
$error-page-btn-hover-text: $b-pool;
// Landing Page colors
$landing-lg-gradient-left: $wp-violentdark;
$landing-lg-gradient-right: $cp-minsk;
$landing-sm-bg: $cp-victoria;
$landing-sm-bg-alt: $cp-victoria;
$landing-sm-bg-hover: $b-dodger;
$landing-sm-bg-hover: $b-pool;
$landing-btn-text: $g20-white;
$landing-btn-bg: $b-dodger;
$landing-btn-text-hover: $b-dodger;
$landing-btn-bg: $b-pool;
$landing-btn-text-hover: $b-pool;
$landing-btn-bg-hover: $g20-white;
$landing-artwork-color: $cp-minsk;

60
assets/styles/themes/_theme-light.scss
View File

@ -19,37 +19,36 @@ $radius: 3px !default;
// TopNav Colors
$topnav-link: $g8-storm !default;
$topnav-link-hover: $b-dodger !default;
$version-selector-top: $b-pool !default;
$version-selector-bottom: $br-galaxy !default;
$topnav-link-hover: $b-pool !default;
$version-selector-gradient: $grad-pastelgothic !default;
$theme-switch-light: none !default;
$theme-switch-dark: inline-block !default;
// Search
$sidebar-search-bg: $g20-white !default;
$sidebar-search-shadow: $g14-chromium !default;
$sidebar-search-highlight: $b-dodger !default;
$sidebar-search-highlight: $b-pool !default;
$sidebar-search-text: $g8-storm !default;
// Left Navigation
$nav-category: $b-dodger !default;
$nav-category-hover: $cp-purple !default;
$nav-item: $np-rum !default;
$nav-item-hover: $cp-purple !default;
$nav-category: $b-pool !default;
$nav-category-hover: $br-magenta !default;
$nav-item: $g9-mountain !default;
$nav-item-hover: $br-magenta !default;
$nav-border: $g14-chromium !default;
$nav-toggle: $g20-white !default;
$nav-toggle-hover: $g20-white !default;
$nav-toggle-bg-hover: $br-galaxy !default;
$nav-active: $m-magenta !default;
$nav-toggle-bg-hover: $br-magenta !default;
$nav-active: $br-magenta !default;
// Article Content
$article-bg: $g20-white !default;
$article-heading: $cp-marguerite !default;
$article-heading-alt: $g7-graphite !default;
$article-text: $g8-storm !default;
$article-bold: $g8-storm !default;
$article-link: $b-dodger !default;
$article-link-hover: $cp-purple !default;
$article-heading: $br-pulsar !default;
$article-heading-alt: $g5-pepper !default;
$article-text: $g6-smoke !default;
$article-bold: $g5-pepper !default;
$article-link: $b-pool !default;
$article-link-hover: $br-magenta !default;
$article-shadow: #c8cdd0 !default;
$article-hr: $g15-platinum !default;
@ -58,11 +57,11 @@ $article-code: $cp-marguerite !default;
$article-code-bg: $cp-titan !default;
$article-code-shadow: $g20-white !default;
$article-code-accent1: $cp-melrose !default;
$article-code-accent2: $b-dodger !default;
$article-code-accent2: $b-pool !default;
$article-code-accent3: #12A290 !default;
$article-code-accent4: $o-ruby !default;
$article-code-accent4: $r-ruby !default;
$article-code-accent5: #e24bbb !default;
$article-code-accent6: $b-dodger !default;
$article-code-accent6: $b-pool !default;
$article-code-accent7: #e90 !default;
$article-code-select: $b-pool !default;
$article-code-link: $cp-marguerite !default;
@ -70,8 +69,7 @@ $article-code-link-hover: $cp-marguerite !default;
$article-code-scrollbar: $cp-periwinkle !default;
// Article Tables
$article-table-header-left: $cp-marguerite !default;
$article-table-header-right: $b-laser !default;
$article-table-header: $grad-miyazakisky !default;
$article-table-row-alt: #F6F7F8 !default;
$article-table-scrollbar: $g14-chromium !default;
@ -81,7 +79,7 @@ $article-note-heading: $gr-emerald !default;
$article-note-text: $gr-emerald !default;
$article-note-link: $gr-emerald !default;
$article-note-link-hover: $cp-purple !default;
$article-note-table-header: $gr-viridian !default;
$article-note-table-header: $grad-green-dark !default;
$article-note-table-row-alt: #d6f5e9 !default;
$article-note-table-scrollbar: #87DABE !default;
$article-note-shadow: #8CB7AB !default;
@ -101,7 +99,7 @@ $article-warn-heading: $o-fire !default;
$article-warn-text: $o-curacao !default;
$article-warn-link: $o-curacao !default;
$article-warn-link-hover: $cp-purple !default;
$article-warn-table-header: $r-dreamsicle !default;
$article-warn-table-header: $grad-red !default;
$article-warn-table-row-alt: #ffe6df !default;
$article-warn-table-scrollbar: #FFB1B1 !default;
$article-warn-shadow: #b98a7d !default;
@ -121,7 +119,7 @@ $article-cloud-heading: $b-eastern !default;
$article-cloud-text: $b-curious !default;
$article-cloud-link: $b-curious !default;
$article-cloud-link-hover: $cp-purple !default;
$article-cloud-table-header: $b-curious !default;
$article-cloud-table-header: $grad-blue !default;
$article-cloud-table-row-alt: $b-hawkeye !default;
$article-cloud-table-scrollbar: $b-malibu !default;
$article-cloud-shadow: #6EB8E4 !default;
@ -139,7 +137,7 @@ $article-cloud-code-scrollbar: $b-malibu !default;
$article-enterprise-base: $br-galaxy !default;
$article-enterprise-text: $cp-purple !default;
$article-enterprise-link: $cp-purple !default;
$article-enterprise-link-hover: $b-dodger !default;
$article-enterprise-link-hover: $b-pool !default;
// Article Tabs for tabbed content
$article-tab-text: $g8-storm !default;
@ -152,7 +150,7 @@ $article-tab-code-text: $cp-marguerite !default;
// Article page buttons
$article-btn: $b-pool !default;
$article-btn-text: $g20-white !default;
$article-btn-hover: $b-dodger !default;
$article-btn-hover: $b-pool !default;
$article-btn-text-hover: $g20-white !default;
// Article UI nav icons
@ -160,7 +158,7 @@ $article-nav-icon-bg: $g6-smoke !default;
$article-nav-acct-bg: $g5-pepper !default;
// Error Page Colors
$error-page-btn: $b-dodger !default;
$error-page-btn: $b-pool !default;
$error-page-btn-text: $g20-white !default;
$error-page-btn-hover: $b-pool !default;
$error-page-btn-hover-text: $g20-white !default;
@ -170,10 +168,10 @@ $landing-lg-gradient-left: $cp-jakarta !default;
$landing-lg-gradient-right: $wp-heart !default;
$landing-sm-bg: $wp-seance !default;
$landing-sm-bg-alt: $wp-jagger !default;
$landing-sm-bg-hover: $b-dodger !default;
$landing-sm-bg-hover: $b-pool !default;
$landing-btn-text: $g20-white !default;
$landing-btn-bg: $b-dodger !default;
$landing-btn-text-hover: $b-dodger !default;
$landing-btn-bg: $b-pool !default;
$landing-btn-text-hover: $b-pool !default;
$landing-btn-bg-hover: $g20-white !default;
$landing-artwork-color: rgba($g20-white, .15) !default;
@ -190,7 +188,7 @@ $svg-table-row-alt1: $b-laser !default;
$svg-table-row-alt2: $br-galaxy !default;
$svg-table-code: $cp-marguerite !default;
$svg-table-code-bg: $cp-titan !default;
$svg-table-code-operator: $b-dodger !default;
$svg-table-code-operator: $b-pool !default;
$svg-table-code-string: #12A290 !default;
$svg-geo-s2-cell: $b-malibu !default;

38
assets/styles/tools/_color-palette.scss
View File

@ -82,8 +82,40 @@ $r-flan: #FFF7F4;
// Code
$cp-munchkin: #B7B8FF;
$code-dark-bg: $g0-obsidian;
$code-dark-scroll:#2f2f50;
$cp-marguerite: #736ECD;
$cp-titan: #EDEDFF;
/////////////////////////////////// Gradients //////////////////////////////////
$grad-grey-light: $g13-mist, $g18-cloud;
$grad-grey: $g10-wolf, $g13-mist;
$grad-grey-dark: $g3-castle, $g6-smoke;
$grad-blue-light: $b-pool, $b-hydrogen;
$grad-blue: $b-ocean, $b-pool;
$grad-blue-dark: $b-sapphire, $b-ocean;
$grad-purple-light: $p-comet, $p-moonstone;
$grad-purple: $p-star, $p-comet;
$grad-purple-dark: $p-void, $p-amethyst;
$grad-green-light: $gr-honeydew, $gr-krypton;
$grad-green: $gr-rainforest, $gr-honeydew;
$grad-green-dark: $gr-emerald, $gr-viridian;
$grad-yellow-light: $y-thunder, $y-sulfur;
$grad-yellow: $y-pineapple, $y-thunder;
$grad-yellow-dark: $y-topaz, $y-tiger;
$grad-red-light: $r-dreamsicle, $r-tungsten;
$grad-red: $r-curacao, $r-dreamsicle;
$grad-red-dark: $r-ruby, $r-fire;
$grad-gundampilot: $p-amethyst, $b-ocean;
$grad-miyazakisky: $p-star, $b-pool;
$grad-pastelgothic: $p-comet, $b-laser;
$grad-garageband: $b-pool, $gr-rainforest;
////////////////////////////////////////////////////////////////////////////////
@ -114,14 +146,12 @@ $cp-jakarta: #322368;
$cp-minsk: #423681;
$cp-victoria: #52499A;
$cp-blueviolet: #625CB3;
$cp-marguerite: #736ECD;
$cp-purple: #8381E6;
//
$cp-melrose: #A5A6FF;
//
$cp-periwinkle: #C9CAFF;
$cp-coolfog: #DBDBFF;
$cp-titan: #EDEDFF;
// Neutral Purples
$np-deepnight: #13002d; // Brand color

4
assets/styles/tools/mixins.scss
View File

@ -14,3 +14,7 @@
border-radius: 6px;
}
}
@mixin gradient($colors, $deg: 45deg) {
background: linear-gradient($deg, $colors);
}

56
content/v2.0/example.md
View File

@ -441,20 +441,36 @@ This is **bold**. This is _italic_.
Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
Etiam tristique nisi et tristique auctor.
{{< code-tabs-wrapper >}}
{{% code-tabs %}}
[tab1](#)
[tab2](#)
{{% /code-tabs %}}
{{% code-tab-content %}}
```js
// This is a code block inside of a blockquote
cpu = from(bucket:"example-bucket")
|> range(start:-30m)
|> filter(fn:(r) => r._measurement == "cpu" and r._field == "someReallyLongFieldName")
```
{{% /code-tab-content %}}
{{% code-tab-content %}}
```js
// This is a code block inside of a blockquote
cpu = from(bucket:"my-bucket")
|> range(start:-30m)
|> filter(fn:(r) => r._measurement == "cpu")
```
{{% /code-tab-content %}}
{{< /code-tabs-wrapper >}}
###### This is a table in a blockquote
| Column 1 | Column 2 | Column 3 | Column 4 |
| -------- | -------- | -------- | -------- |
| Row 1.1 | `Row 1.2` | Row 1.3 | Row 1.4 |
| Row 2.1 | `Row 2.2` | Row 2.3 | Row 2.4 |
| Row 3.1 | `Row 3.2` | Row 3.3 | Row 3.4 |
| Row 4.1 | `Row 4.2` | Row 4.3 | Row 4.4 |
| Column 1 | Column 2 | Column 3 | Column 4 | Column 1 | Column 2 | Column 3 | Column 4 |
| -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
| Row 1.1 | `Row 1.2` | Row 1.3 | Row 1.4 | Row 1.1 | `Row 1.2` | Row 1.3 | Row 1.4 |
| Row 2.1 | `Row 2.2` | Row 2.3 | Row 2.4 | Row 2.1 | `Row 2.2` | Row 2.3 | Row 2.4 |
| Row 3.1 | `Row 3.2` | Row 3.3 | Row 3.4 | Row 3.1 | `Row 3.2` | Row 3.3 | Row 3.4 |
| Row 4.1 | `Row 4.2` | Row 4.3 | Row 4.4 | Row 4.1 | `Row 4.2` | Row 4.3 | Row 4.4 |
{{% /warn %}}
@ -549,20 +565,36 @@ This is **bold**. This is _italic_.
Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
Etiam tristique nisi et tristique auctor.
{{< code-tabs-wrapper >}}
{{% code-tabs %}}
[tab1](#)
[tab2](#)
{{% /code-tabs %}}
{{% code-tab-content %}}
```js
// This is a code block inside of a blockquote
cpu = from(bucket:"example-bucket")
|> range(start:-30m)
|> filter(fn:(r) => r._measurement == "cpu" and r._field == "someReallyLongFieldName")
```
{{% /code-tab-content %}}
{{% code-tab-content %}}
```js
// This is a code block inside of a blockquote
cpu = from(bucket:"my-bucket")
|> range(start:-30m)
|> filter(fn:(r) => r._measurement == "cpu")
```
{{% /code-tab-content %}}
{{< /code-tabs-wrapper >}}
###### This is a table in a blockquote
| Column 1 | Column 2 | Column 3 | Column 4 |
| -------- | -------- | -------- | -------- |
| Row 1.1 | `Row 1.2` | Row 1.3 | Row 1.4 |
| Row 2.1 | `Row 2.2` | Row 2.3 | Row 2.4 |
| Row 3.1 | `Row 3.2` | Row 3.3 | Row 3.4 |
| Row 4.1 | `Row 4.2` | Row 4.3 | Row 4.4 |
| Column 1 | Column 2 | Column 3 | Column 4 | Column 1 | Column 2 | Column 3 | Column 4 |
| -------- | -------- | -------- | -------- | -------- | -------- | -------- | -------- |
| Row 1.1 | `Row 1.2` | Row 1.3 | Row 1.4 | Row 1.1 | `Row 1.2` | Row 1.3 | Row 1.4 |
| Row 2.1 | `Row 2.2` | Row 2.3 | Row 2.4 | Row 2.1 | `Row 2.2` | Row 2.3 | Row 2.4 |
| Row 3.1 | `Row 3.2` | Row 3.3 | Row 3.4 | Row 3.1 | `Row 3.2` | Row 3.3 | Row 3.4 |
| Row 4.1 | `Row 4.2` | Row 4.3 | Row 4.4 | Row 4.1 | `Row 4.2` | Row 4.3 | Row 4.4 |
{{% /cloud-msg %}}

4
content/v2.0/write-data/quick-start.md
View File

@ -31,10 +31,6 @@ metrics in the [Prometheus data format](https://prometheus.io/docs/instrumenting
The scraper stores the scraped metrics in the bucket created during the
[initial setup process](/v2.0/get-started/#set-up-influxdb).
The following message briefly appears in the UI:
{{< ui-message text="Scraper was created successfully" >}}
{{% note %}}
Quick Start is only available in the last step of the setup process.
If you missed the Quick Start option, you can [manually create a scraper](/v2.0/write-data/scrape-data)

8
layouts/shortcodes/ui-message.html
View File

@ -1,8 +0,0 @@
{{ $text := .Get "text" }}
{{ $color := .Get "color" | default "green" }}
<div class="ui-message {{ $color }}">
<div class="icon"></div>
<div class="text">{{ $text }}</div>
<div class="close"></div>
</div>