whentimeslows/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor tabs implementation (#3268)

Browse Source 
* 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
This commit is contained in:
Andrew Chen
2017-05-04 13:52:59 -07:00
committed by GitHub
parent 204aad82b1
commit 105942fdb4
7 changed files with 147 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_config.yml
+3
View File
@@ -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
+6 -6
View File
@@ -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" href='https://fonts.googleapis.com/css?family=Roboto+Mono' type='text/css'>
<link rel="stylesheet" href="/css/styles.css"/>
<link rel="stylesheet" href="/css/jquery-ui.min.css">
<link rel="stylesheet" href="/css/sweetalert.css">
{% if page.class == "gridPage" %}<link rel="stylesheet" href="/css/gridpage.css">{% endif %}
<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" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
<link rel="stylesheet" type="text/css" href="/css/styles.css">
<link rel="stylesheet" type="text/css" href="/css/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="/css/sweetalert.css">
{% 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
-17
View File
@@ -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
+15
View File
@@ -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
+3 -1
View File
@@ -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
+119
View File
@@ -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
+1
View File
@@ -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