Merge pull request #24234 from kbhawkey/kb-cleanup-config-site

update tab component, remove jquery-ui

layouts/partials/css.html

@@ -13,7 +13,6 @@
   {{ end }}
 {{- end }}
 
-<link rel="stylesheet" href="{{ "css/jquery-ui.min.css" | relURL }}">
 <link rel="stylesheet" href="{{ "css/feature-states.css" | relURL }}">
 <link rel="stylesheet" href="{{ "css/custom-jekyll/tags.css" | relURL }}">
 {{- if .Site.Params.announcement }}

layouts/partials/head.html

@@ -85,7 +85,6 @@
 <meta property="og:image" content="{{ "/images/kubernetes-horizontal-color.png" | relURL }}">
 {{ end }}
 <meta property="og:type" content="{{ $ogType }}">
-<script src="{{ "js/jquery-ui-1.12.1.min.js" | relURL }}"></script>
 <script src="{{ "js/sweetalert-2.1.2.min.js" | relURL }}"></script>
 
 {{ if .HasShortcode "mermaid" }}

layouts/partials/header.html

@@ -1,73 +0,0 @@
-<div id="cellophane" onclick="kub.toggleMenu()"></div>
-
-<header>
-    <a href="{{ site.Home.RelPermalink }}" class="logo" title="{{ site.Home.Title }} - {{ site.Params.title }}" aria-label="Kubernetes website" data-proofer-ignore></a>
-
-    <div class="nav-buttons" data-auto-burger="primary">
-        <ul class="global-nav">
-            {{ $sections := slice "docs" "blog" "training" "partners" "community" "case-studies" }}
-            {{ range $sections }}
-            {{ with site.GetPage "section" . }}<li><a href="{{ .RelPermalink }}"{{ if eq .Section $.Section }} class="active"{{ end}} data-proofer-ignore>{{ .Title }}</a></li>{{ end }}
-            {{ end }}
-            {{/* Link directly to documentation etc., if possible. */}}
-            {{ $langPage := cond (gt (len .Translations) 0) . site.Home }}
-             <li>
-                <a href="#" data-proofer-ignore>
-                    {{ $langPage.Language.LanguageName }} <span class="ui-icon ui-icon-carat-1-s"></span>
-                </a>
-                <ul>
-                {{ range $langPage.Translations }}
-                    <li><a href="{{ .RelPermalink }}" data-proofer-ignore>{{ .Language.LanguageName }}</a></li>
-                {{ end }}
-                </ul>
-            </li>
-
-            <li>
-                <a href="#" data-proofer-ignore>
-                    {{ site.Params.version }} <span class="ui-icon ui-icon-carat-1-s"></span>
-                </a>
-                <ul>
-                {{ range site.Params.versions }}
-                    <li><a href="{{ .url }}{{ $.RelPermalink }}" data-proofer-ignore>{{ .version }}</a></li>
-                {{ end }}
-                </ul>
-            </li>
-        </ul>
-        {{ with site.GetPage "section" "docs/tutorials/kubernetes-basics" }}
-        <a href="{{ .RelPermalink }}" class="button" id="tryKubernetes" data-auto-burger-exclude data-proofer-ignore>{{ .LinkTitle }}</a>
-        {{ end }}
-
-        <button id="hamburger" onclick="kub.toggleMenu()" data-auto-burger-exclude><div></div></button>
-    </div>
-
-    <nav id="mainNav">
-        <div class="main-section" data-auto-burger="primary">
-         {{ range site.Menus.main }}
-           <div class="nav-box">
-            <h3><a href="{{ .URL }}" data-proofer-ignore>{{ .Title }}</a></h3>
-           {{ .Post }}
-            </div>
-         {{ end }}
-        </div>
-        <div class="main-section" data-auto-burger="primary">
-            <div class="left">
-                <h5 class="github-invite">{{ T "main_github_invite" }}</h5>
-                <a href="https://github.com/kubernetes/kubernetes" class="button" data-auto-burger-exclude>{{ T "main_github_view_on" }}</a>
-            </div>
-
-            <div class="right">
-                <h5 class="github-invite">{{ T "main_community_explore" }}</h5>
-                <div class="social">
-                    <a href="https://twitter.com/kubernetesio" class="twitter"><span>{{ T "community_twitter_name" }}</span></a>
-                    <a href="https://github.com/kubernetes/kubernetes" class="github"><span>{{ T "community_github_name" }}</span></a>
-                    <a href="http://slack.k8s.io/" class="slack"><span>{{ T "community_slack_name" }}</span></a>
-                    <a href="https://stackoverflow.com/questions/tagged/kubernetes" class="stack-overflow"><span>{{ T "community_stack_overflow_name" }}</span></a>
-                    <a href="https://www.youtube.com/kubernetescommunity" class="youtube"><span>{{ T "community_youtube_name" }}</span></a>
-                    <a href="https://discuss.kubernetes.io" class="mailing-list"><span>{{ T "community_forum_name" }}</span></a>
-                    <a href="https://calendar.google.com/calendar/embed?src=cgnt364vd8s86hr2phapfjc6uk%40group.calendar.google.com" class="calendar"><span>{{ T "community_events_calendar" }}</span></a>
-                </div>
-            </div>
-            <div class="clear" style="clear: both"></div>
-        </div>
-    </nav>
-</header>

layouts/shortcodes/tabs.html

@@ -2,16 +2,25 @@
 {{- $tab_set_id := .Get "name" | default (printf "tabset-%s-%d" (.Page.RelPermalink) (.Page.Scratch.Get "tabset-counter") ) | anchorize -}}
 {{- $tabs := .Scratch.Get "tabs" -}}
 {{- if .Inner -}}{{- /* We don't use the inner content, but Hugo will complain if we don't reference it. */ -}}{{- end -}}
-<div id="{{ $tab_set_id }}">
-<ul>
+<ul class="nav nav-tabs" id="{{ $tab_set_id }}" role="tablist">
 	{{- range $i, $e := $tabs -}}
 	  {{- $id := printf "%s-%d" $tab_set_id $i -}}
-<li><a href="#{{ $id }}">{{- trim .name " " -}}</a></li>
+	  {{- if (eq $i 0) -}}
+		<li class="nav-item"><a data-toggle="tab" class="nav-link active" href="#{{ $id }}" role="tab" aria-controls="{{ $id }}" aria-selected="true">{{- trim .name " " -}}</a></li>
+	  {{ else }}
+		<li class="nav-item"><a data-toggle="tab" class="nav-link" href="#{{ $id }}" role="tab" aria-controls="{{ $id }}">{{- trim .name " " -}}</a></li>
+	  {{- end -}}
 {{- end -}}
 </ul>
+<div class="tab-content" id="{{ $tab_set_id }}">
 {{- range $i, $e := $tabs -}}
 {{- $id := printf "%s-%d" $tab_set_id $i -}}
-<div id="{{ $id }}">
+{{- if (eq $i 0) -}}
+  <div id="{{ $id }}" class="tab-pane show active" role="tabpanel" aria-labelledby="{{ $id }}">
+{{ else }}
+  <div id="{{ $id }}" class="tab-pane" role="tabpanel" aria-labelledby="{{ $id }}">
+{{ end }}
+<p>
 	{{- with .content -}}
 		{{- . -}}
 	{{- else -}}
@@ -39,5 +48,3 @@
 </div>
 {{- end -}}
 </div>
-{{- $elem :=  $tab_set_id | safeJS -}}
-<script>$(function(){$("#{{ $elem }}").tabs();});</script>