added tabbed content functionality and styles

README.md

@@ -138,3 +138,50 @@ To format Enterprise-specific content, wrap it in the `{{% enterprise %}}` short
 Insert enterprise-specific markdown content here.
 {{% /enterprise %}}
 ```
+
+### Tabbed Content
+Shortcodes are available for creating "tabbed" content (content that is changed by a users' selection).
+Ther following three must be used:
+
+`{{< tabs-wrapper >}}`  
+This shortcode creates a wrapper or container for the tabbed content.
+All UI interactions are limited to the scope of each container.
+If you have more than one "group" of tabbed content in a page, each needs its own `tabs-wrapper`.
+This shortcode must be closed with `{{< /tabs-wrapper >}}`.
+
+**Note**: The `<` and `>` characters used in this shortcode indicate that the contents should be processed as HTML.
+
+`{{% tabs %}}`  
+This shortcode creates a container for buttons that control the display of tabbed content.
+It should contain simple markdown links with anonymous anchors (`#`).
+The link text is used as the button text.
+This shortcode must be closed with `{{% /tabs %}}`.
+
+**Note**: The `%` characters used in this shortcode indicate that the contents should be processed as Markdown.
+
+`{{% tab-content %}}`  
+This shortcode creates a container for a content block.
+Each content block in the tab group needs to be wrapped in this shortcode.
+This shortcode must be closed with `{{% /tab-content %}}`.
+
+**Note**: The `%` characters used in this shortcode indicate that the contents should be processed as Markdown.
+
+#### Example tabbed content group
+```md
+{{< tabs-wrapper >}}
+
+{{% tabs %}}
+[Button text for tab 1](#)
+[Button text for tab 2](#)
+{{% /tabs %}}
+
+{{% tab-content %}}
+Markdown content for tab 1.
+{{% /tab-content %}}
+
+{{% tab-content %}}
+Markdown content for tab 2.
+{{% /tab-content %}}
+
+{{< /tabs-wrapper >}}
+```

assets/js/content-interactions.js

@@ -1,20 +1,53 @@
-// Make headers linkable
+///////////////////////////// Make headers linkable /////////////////////////////
+
 $("h2,h3,h4,h5,h6").each(function() {
   var link = "<a href=\"#" + $(this).attr("id") + "\"></a>"
   $(this).wrapInner( link );
   })
 
-// Smooth Scroll
-var topBuffer = 0;
-  $('a[href^="#"]').on('click',function (e) {
-    e.preventDefault();
+///////////////////////////////// Smooth Scroll /////////////////////////////////
 
-    var target = this.hash;
-    var $target = $(target);
+$('a[href^="#"]:not(.tabs p a)').on('click',function (e) {
+  e.preventDefault();
 
-    $('html, body').stop().animate({
-      'scrollTop': ($target.offset().top - topBuffer)
-    }, 400, 'swing', function () {
-      window.location.hash = target;
-    });
+  var target = this.hash;
+  var $target = $(target);
+
+  $('html, body').stop().animate({
+    'scrollTop': ($target.offset().top)
+  }, 400, 'swing', function () {
+    window.location.hash = target;
   });
+});
+
+//////////////////////////////// Tabbed Content ////////////////////////////////
+
+$(function() {
+	const container = '.tabs-wrapper'
+	const tab = '.tabs p a';
+	const content = '.tab-content';
+
+	// Add the active class to the first tab in each tab group,
+	// in case it wasn't already set in the markup.
+	$(container).each(function () {
+		$(tab, this).removeClass('is-active');
+		$(tab + ':first', this).addClass('is-active');
+	});
+
+	$(tab).on('click', function(e) {
+		e.preventDefault();
+
+		// Make sure the tab being clicked is marked as active, and make the rest inactive.
+		$(this).addClass('is-active').siblings().removeClass('is-active');
+
+		// Render the correct tab content based on the position of the tab being clicked.
+		const activeIndex = $(tab).index(this);
+		$(content).each(function(i) {
+			if (i === activeIndex) {
+				$(this).show();
+				$(this).siblings(content).hide();
+			}
+		});
+		console.log(activeIndex);
+	});
+});

assets/styles/layouts/_layout-article.scss

@@ -362,4 +362,49 @@
     }
   }
 
+  /////////////////////////////// Tabbed Content ///////////////////////////////
+
+  .tabs-wrapper{
+    margin: 2rem 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;
+    }
+    &.is-active {
+      color: $article-tab-active-text;
+      background: $article-tab-active-bg;
+    }
+  }
+
+  .tab-content {
+    padding: 1.5rem 0;
+    width: 100%;
+
+    & > * {
+      width: 100% !important;
+      margin-left: 0 !important;
+    }
+  }
+
+  .tab-content:not(:first-of-type) {
+    display: none;
+  }
+
 }

assets/styles/themes/_theme-dark.scss

@@ -83,3 +83,9 @@ $article-enterprise-base: $p-star !default;
 $article-enterprise-text: $p-potassium !default;
 $article-enterprise-link: $p-moonstone !default;
 $article-enterprise-link-hover: $g20-white !default;
+
+// Article Tabs for tabbed content
+$article-tab-text: $g12-forge !default;
+$article-tab-bg: $g4-onyx !default;
+$article-tab-active-text: $g20-white !default;
+$article-tab-active-bg: $b-ocean !default;

assets/styles/themes/_theme-light.scss

@@ -82,3 +82,9 @@ $article-enterprise-base: $p-comet;
 $article-enterprise-text: $p-star;
 $article-enterprise-link: $p-star;
 $article-enterprise-link-hover: $b-ocean;
+
+// Article Tabs for tabbed content
+$article-tab-text: $g8-storm;
+$article-tab-bg: $g18-cloud;
+$article-tab-active-text: $g20-white;
+$article-tab-active-bg: $b-pool;

content/v2.0/example.md

@@ -350,3 +350,55 @@ cpu = from(bucket:"telegraf/autogen")
 | Row 4.1  | Row 4.2  | Row 4.3  | Row 4.4  |
 
 {{% /warn %}}
+
+{{< tabs-wrapper >}}
+{{% tabs %}}
+[tab 1.1](#)
+[tab 1.2](#)
+[tab 1.3](#)
+[tab 1.4](#)
+{{% /tabs %}}
+
+{{% tab-content %}}
+This is tab 1.1 content.
+{{% /tab-content %}}
+
+{{% tab-content %}}
+This is tab 1.2 content.
+{{% /tab-content %}}
+
+{{% tab-content %}}
+This is tab 1.3 content.
+{{% /tab-content %}}
+
+{{% tab-content %}}
+This is tab 1.4 content.
+{{% /tab-content %}}
+
+{{< /tabs-wrapper >}}
+
+{{< tabs-wrapper >}}
+{{% tabs %}}
+[tab 2.1](#)
+[tab 2.2](#)
+[tab 2.3](#)
+[tab 2.4](#)
+{{% /tabs %}}
+
+{{% tab-content %}}
+This is tab 2.1 content.
+{{% /tab-content %}}
+
+{{% tab-content %}}
+This is tab 2.2 content.
+{{% /tab-content %}}
+
+{{% tab-content %}}
+This is tab 2.3 content.
+{{% /tab-content %}}
+
+{{% tab-content %}}
+This is tab 2.4 content.
+{{% /tab-content %}}
+
+{{< /tabs-wrapper >}}

layouts/_default/section.html

@@ -3,12 +3,12 @@
 <div class="page-wrapper">
   {{ partial "sidebar.html" . }}
   <div class="article">
-    <div class="article--content">
+    <article class="article--content">
       <h1>{{ .Title }}</h1>
       {{ partial "article/latest-version.html" . }}
       {{ partial "article/enterprise.html" . }}
       {{ .Content }}
-    </div>
+    </article>
   </div>
 </div>
 

layouts/_default/single.html

@@ -3,12 +3,12 @@
 <div class="page-wrapper">
   {{ partial "sidebar.html" . }}
   <div class="article">
-    <div class="article--content">
+    <article class="article--content">
       <h1>{{ .Title }}</h1>
       {{ partial "article/latest-version.html" . }}
       {{ partial "article/enterprise.html" . }}
       {{ .Content }}
-    </div>
+    </article>
   </div>
 </div>
 

layouts/shortcodes/tab-content.html

@@ -0,0 +1,3 @@
+<section class="tab-content">
+  {{ .Inner }}
+</section>

layouts/shortcodes/tabs-wrapper.html

@@ -0,0 +1,3 @@
+<div class="tabs-wrapper">
+  {{ .Inner }}
+</div>

layouts/shortcodes/tabs.html

@@ -0,0 +1,3 @@
+<div class="tabs">
+  {{ .Inner }}
+</div>