diff --git a/_config.yml b/_config.yml index c172cefb59..72d99fdfa8 100644 --- a/_config.yml +++ b/_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 diff --git a/_includes/head.html b/_includes/head.html index 2f85549db5..25b363308d 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -2,12 +2,12 @@ - - - - - - {% if page.class == "gridPage" %}{% endif %} + + + + + + {% if page.class == "gridPage" %}{% endif %} diff --git a/_includes/tabs.html b/_includes/tabs.html deleted file mode 100644 index ff672be6ad..0000000000 --- a/_includes/tabs.html +++ /dev/null @@ -1,17 +0,0 @@ -{% assign tabsraw = tabspec | newline_to_br | split: '
' %} -{% assign tabsetname = tabsraw[0] %} - -
- - {% for tab in tabsraw offset:1 %} - {% assign thisTab = tab | split: ',' %} - {% assign tabLang=thisTab[1] %} - {% assign tabFile=thisTab[2] %} - {% assign tabGHLink=thisTab[3] %} -
- {% include code.html language=tabLang file=tabFile ghlink=tabGHLink %} -
- {% endfor %} -
\ No newline at end of file diff --git a/_includes/tabs.md b/_includes/tabs.md new file mode 100644 index 0000000000..48fd7f9b41 --- /dev/null +++ b/_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 %} +
+ +{% for content in tab_contents %} +
+ {{ content | markdownify }} +
+{% endfor %} +
+ diff --git a/_sass/_base.sass b/_sass/_base.sass index 1139a60dfa..81c7adc2cb 100644 --- a/_sass/_base.sass +++ b/_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 diff --git a/docs/tabs-example.md b/docs/tabs-example.md new file mode 100644 index 0000000000..863a466964 --- /dev/null +++ b/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. diff --git a/skip_toc_check.txt b/skip_toc_check.txt index bccd6c2008..c04cdd54cb 100644 --- a/skip_toc_check.txt +++ b/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