Refactor tabs implementation (#3268)

* Refactor tabs implementation

* tidy head.html

* test jquery-ui tabs

* Initial tabs code refactor

* test liquid parsing

* test liquid stack

* move into tabs.html

* test jekyll tabs

* construct array

* test cleaner way

* add example content

* test split hack

* fix md

* add site.emptyArray

* set good defaults

* fix CSS

* cleanup li

* fix a href

* fix content tabs

* add space to default

* remove a href underline

* rename docs/tab-test.md to docs/tab-example.md

* fix skip toc check

* add assignees

* add comment to reference example

* add documentation to example

* escape md

* move demo to top, pretty it up

* add word

* tweak wording

_config.yml

@@ -42,6 +42,9 @@ logo: /images/favicon.png
 twitter:
   username: kubernetesio
 
+# empty array for tabs
+emptyArray: []
+
 # Tables of contents, stored in the _data folder, that control the sidebar nav
 tocs:
   - docs-home

_includes/head.html

@@ -2,12 +2,12 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="shortcut icon" type="image/png" href="/images/favicon.png">
-    <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic">
-    <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto+Mono' type='text/css'>
+    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
-    <link rel="stylesheet" href="/css/styles.css"/>
+    <link rel="stylesheet" type="text/css" href="/css/styles.css">
-    <link rel="stylesheet" href="/css/jquery-ui.min.css">
+    <link rel="stylesheet" type="text/css" href="/css/jquery-ui.min.css">
-    <link rel="stylesheet" href="/css/sweetalert.css">
+    <link rel="stylesheet" type="text/css" href="/css/sweetalert.css">
-    {% if page.class == "gridPage" %}<link rel="stylesheet" href="/css/gridpage.css">{% endif %}
+    {% if page.class == "gridPage" %}<link rel="stylesheet" type="text/css" href="/css/gridpage.css">{% endif %}
     <script src="/js/jquery-2.2.0.min.js"></script>
     <script src="/js/jquery-ui.min.js"></script>
     <script src="/js/script.js"></script>

_includes/tabs.html

@@ -1,17 +0,0 @@
-{% assign tabsraw = tabspec | newline_to_br | split: '<br />' %}
-{% assign tabsetname = tabsraw[0] %}
-<script>$(function(){$("#{{tabsetname}}").tabs();});</script>
-<div id="{{tabsetname}}">
-  <ul>{% for tab in tabsraw offset:1 %}{% assign thisTab = tab | split: ',' %}
-    <li><a href="#{{ thisTab[0] | strip | handleize }}">{{ thisTab[0] | strip}}</a></li>{% endfor %}
-  </ul>
-  {% for tab in tabsraw offset:1 %}
-  {% assign thisTab = tab | split: ',' %}
-  {% assign tabLang=thisTab[1] %}
-  {% assign tabFile=thisTab[2] %}
-  {% assign tabGHLink=thisTab[3] %}
-  <div id="{{ thisTab[0] | strip | handleize }}">
-  {% include code.html language=tabLang file=tabFile ghlink=tabGHLink %}
-  </div>
-  {% endfor %}
-</div>

_includes/tabs.md

@@ -0,0 +1,15 @@
+{% comment %} See /docs/tabs-example.md for usage example. {% endcomment %}
+{% assign tab_set_id = tab_set_name | default: "tabset" | slugify %}
+<div id="{{tab_set_id}}">
+    <ul>
+{% for name in tab_names %}
+        <li><a href="#{{tab_set_id}}-{{forloop.index0}}">{{ name | strip }}</a></li>
+{% endfor %}
+    </ul>
+{% for content in tab_contents %}
+    <div id="{{tab_set_id}}-{{forloop.index0}}">
+    {{ content | markdownify }}
+    </div>
+{% endfor %}
+</div>
+<script>$(function(){$("#{{tab_set_id}}").tabs();});</script>

_sass/_base.sass

@@ -1326,9 +1326,11 @@ $feature-box-div-margin-bottom: 40px
 		margin: 0px !important
 
 .ui-tabs .ui-tabs-panel
-	padding: 0px !important
 	border: 1px solid #ccc !important
 
+.ui-tabs-anchor
+	text-decoration: none !important
+
 // Talk to us
 #talkToUs
 	h3, h4

docs/tabs-example.md

@@ -0,0 +1,119 @@
+---
+assignees:
+- chenopis
+title: Tabs Example
+---
+
+In a markdown page (.md file) on this site, you can add a tab set to display multiple flavors of a given solution. 
+
+## Demo
+
+{% capture default_tab %}
+Select one of the tabs.
+{% endcapture %}
+
+{% capture calico %}
+```shell
+kubectl apply -f "http://docs.projectcalico.org/v2.0/getting-started/kubernetes/installation/hosted/kubeadm/calico.yaml"
+```
+{% endcapture %}
+
+{% capture flannel %}
+```shell
+kubectl apply -f "https://github.com/coreos/flannel/blob/master/Documentation/kube-flannel.yml?raw=true"
+```
+{% endcapture %}
+
+{% capture romana %}
+```shell
+kubectl apply -f "https://raw.githubusercontent.com/romana/romana/master/containerize/specs/romana-kubeadm.yml"
+```
+{% endcapture %}
+
+{% capture weave_net %}
+```shell
+kubectl apply -f "https://git.io/weave-kube"
+```
+{% endcapture %}
+
+{% assign tab_names = "Default,Calico,Flannel,Romana,Weave Net" | split: ',' | compact %}
+{% assign tab_contents = site.emptyArray | push: default_tab | push: calico | push: flannel | push: romana | push: weave_net %}
+
+{% include tabs.md %}
+
+## Example Liquid template code for tabs
+
+Below is the [Liquid](https://shopify.github.io/liquid/) template code for the tabs demo above to illustrate how to specify the contents of each tab. The [`/_includes/tabs.md`](https://github.com/kubernetes/kubernetes.github.io/tree/master/_includes/tabs.md) file included at the end then uses those elements to render the actual tab set.
+
+### The code
+
+````liquid
+{{ "{% capture default_tab " }}%}
+Select one of the tabs.
+{{ "{% endcapture " }}%}
+
+{{ "{% capture calico " }}%}
+```shell
+kubectl apply -f "http://docs.projectcalico.org/v2.0/getting-started/kubernetes/installation/hosted/kubeadm/calico.yaml"
+```
+{{ "{% endcapture " }}%}
+
+{{ "{% capture flannel " }}%}
+```shell
+kubectl apply -f "https://github.com/coreos/flannel/blob/master/Documentation/kube-flannel.yml?raw=true"
+```
+{{ "{% endcapture " }}%}
+
+{{ "{% capture romana " }}%}
+```shell
+kubectl apply -f "https://raw.githubusercontent.com/romana/romana/master/containerize/specs/romana-kubeadm.yml"
+```
+{{ "{% endcapture " }}%}
+
+{{ "{% capture weave_net " }}%}
+```shell
+kubectl apply -f "https://git.io/weave-kube"
+```
+{{ "{% endcapture " }}%}
+
+{{ "{% assign tab_names = 'Default,Calico,Flannel,Romana,Weave Net' | split: ',' | compact " }}%}
+{{ "{% assign tab_contents = site.emptyArray | push: default_tab | push: calico | push: flannel | push: romana | push: weave_net " }}%}
+
+{{ "{% include tabs.md " }}%}
+````
+
+### Capturing tab content
+
+````liquid
+{{ "{% capture calico " }}%}
+```shell
+kubectl apply -f "http://docs.projectcalico.org/v2.0/getting-started/kubernetes/installation/hosted/kubeadm/calico.yaml"
+```
+{{ "{% endcapture " }}%}
+````
+
+The `capture [variable_name]` tags store text or markdown content and assign them to the specified variable.
+
+### Assigning tab names
+
+````liquid
+{{ "{% assign tab_names = 'Default,Calico,Flannel,Romana,Weave Net' | split: ',' | compact " }}%}
+````
+
+The `assign tab_names` tag takes a list of labels to use for the tabs. Label text can include spaces. The given comma delimited string is split into an array and assigned to the `tab_names` variable. 
+
+### Assigning tab contents
+
+````liquid
+{{ "{% assign tab_contents = site.emptyArray | push: default_tab | push: calico | push: flannel | push: romana | push: weave_net " }}%}
+````
+
+The `assign tab_contents` tag adds the contents of each tab pane, captured above, as elements to the `tab_contents` array.
+
+### Including the tabs.md template
+
+````liquid
+{{ "{% include tabs.md " }}%}
+````
+
+`{{ "{% include tabs.md " }}%}` pulls in the tabs template code, which uses the `tab_names` and `tab_contents` variables to render the tab set.

skip_toc_check.txt

@@ -43,6 +43,7 @@ docs/home/security.md
 docs/reference/deprecation-policy.md
 docs/search.md
 docs/sitemap.md
+docs/tabs-example.md
 docs/user-guide/accessing-the-cluster.md
 docs/user-guide/annotations.md
 docs/user-guide/application-troubleshooting.md