feat: use k8s.website.tabs to show different installation types

site/assets/scss/_reset.scss

@@ -0,0 +1,49 @@
+// CONVENIENCE
+.clear {
+    display: block;
+    clear: both;
+  }
+
+  .light-text {
+    color: white;
+  }
+
+  .right {
+    float: right;
+  }
+
+  .left {
+    float: left;
+  }
+
+  .center {
+    text-align: center;
+  }
+
+  //mixins
+  @mixin fullScreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+  }
+
+  @mixin pureCenter($left: 50%, $top: 50%) {
+    position: absolute;
+    top: $top;
+    left: $left;
+    transform: translate(-50%, -50%);
+  }
+
+  @mixin maintain-aspect-ratio(
+    $width-factor: 16,
+    $height-factor: 9,
+    $target-width: 80vw,
+    $target-height: 80vh
+  ) {
+    width: $target-width;
+    height: $target-width * ($height-factor / $width-factor);
+    max-width: $target-height * ($width-factor / $height-factor);
+    max-height: $target-height;
+  }

site/assets/scss/_size.scss

@@ -0,0 +1,28 @@
+section,
+#vendorStrip {
+  padding-left: $full-width-paddingX;
+  padding-right: $full-width-paddingX;
+}
+
+#hamburger {
+  width: $hamburger-size;
+  height: $hamburger-size;
+}
+
+.header-hero {
+  padding-top: $hero-padding-top;
+}
+
+#vendorStrip {
+  height: $vendor-strip-height;
+  line-height: $vendor-strip-height;
+  font-size: $vendor-strip-font-size;
+}
+
+#announcement {
+  min-height: $hero-padding-top;
+
+  .announcement-main {
+    padding-top: calc(max(8em, 8rem, #{$hero-padding-top} / 3));
+  }
+}

site/assets/scss/_skin.scss

@@ -0,0 +1,5 @@
+$blue: #3371e3;
+$light-grey: #f7f7f7;
+$dark-grey: #303030;
+$medium-grey: #4c4c4c;
+$white: #ffffff;

site/assets/scss/_variables_project.scss

@@ -4,6 +4,12 @@ Add styles or override variables from the theme here.
 
 */
 
+@import "reset";
+@import "skin";
+
+@import "base";
+
+
 $primary: #280C53;
 $secondary: #802A78;
 $dark: #280C53;

site/content/en/latest/tasks/quickstart.md

@@ -47,10 +47,16 @@ consideration when debugging.
 
 ## Testing the Configuration
 
+{{< tabs name="tabs_test_the_configuration" >}}
+{{% tab name="Without LoadBalancer Support" %}}
+
 Get the name of the Envoy service created the by the example Gateway:
 
 ```shell
-export ENVOY_SERVICE=$(kubectl get svc -n envoy-gateway-system --selector=gateway.envoyproxy.io/owning-gateway-namespace=default,gateway.envoyproxy.io/owning-gateway-name=eg -o jsonpath='{.items[0].metadata.name}')
+export ENVOY_SERVICE= \ 
+    $(kubectl get svc -n envoy-gateway-system \
+    --selector=gateway.envoyproxy.io/owning-gateway-namespace=default,gateway.envoyproxy.io/owning-gateway-name=eg \
+    -o jsonpath='{.items[0].metadata.name}')
 ```
 
 Port forward to the Envoy service:
@@ -65,13 +71,16 @@ Curl the example app through Envoy proxy:
 curl --verbose --header "Host: www.example.com" http://localhost:8888/get
 ```
 
-### External LoadBalancer Support
+{{% /tab %}}
+
+{{% tab name="External LoadBalancer Support" %}}
+Get the name of the Envoy service created the by the example Gateway:
 
 You can also test the same functionality by sending traffic to the External IP. To get the external IP of the
 Envoy service, run:
 
 ```shell
-export GATEWAY_HOST=$(kubectl get svc/${ENVOY_SERVICE} -n envoy-gateway-system -o jsonpath='{.status.loadBalancer.ingress[0].ip}')
+export GATEWAY_HOST=$(kubectl get gateway/eg -o jsonpath='{.status.addresses[0].value}')
 ```
 
 In certain environments, the load balancer may be exposed using a hostname, instead of an IP address. If so, replace
@@ -83,6 +92,9 @@ Curl the example app through Envoy proxy:
 curl --verbose --header "Host: www.example.com" http://$GATEWAY_HOST/get
 ```
 
+{{% /tab %}}
+{{< /tabs >}}
+=======
 ## What to explore next?
 
 In this quickstart, you have:
@@ -102,7 +114,7 @@ Review the [Tasks](./) section for the scenario matching your use case.  The Env
 
 ## Clean-Up
 
-Use the steps in this section to uninstall everything from the quickstart.
+Use the steps in this section to uninstall everything from the quickstart guide.
 
 Delete the GatewayClass, Gateway, HTTPRoute and Example App:
 

site/content/en/v1.0.1/tasks/quickstart.md

@@ -47,42 +47,54 @@ consideration when debugging.
 
 ## Testing the Configuration
 
+{{< tabs name="tabs_test_the_configuration" >}}
+{{% tab name="With LoadBalancer Support" %}}
 Get the name of the Envoy service created the by the example Gateway:
 
-```shell
-export ENVOY_SERVICE=$(kubectl get svc -n envoy-gateway-system --selector=gateway.envoyproxy.io/owning-gateway-namespace=default,gateway.envoyproxy.io/owning-gateway-name=eg -o jsonpath='{.items[0].metadata.name}')
-```
-
-Port forward to the Envoy service:
+You can also test the same functionality by sending traffic to the External IP. To get the external IP of the
+Envoy service, run:
 
 ```shell
-kubectl -n envoy-gateway-system port-forward service/${ENVOY_SERVICE} 8888:80 &
+export GATEWAY_HOST=$(kubectl get gateway/eg -o jsonpath='{.status.addresses[0].value}')
 ```
 
+In certain environments, the load balancer may be exposed using a hostname, instead of an IP address. If so, replace
+`ip` in the above command with `hostname`.
+
 Curl the example app through Envoy proxy:
 
 ```shell
-curl --verbose --header "Host: www.example.com" http://localhost:8888/get
+curl --verbose --header "Host: www.example.com" http://$GATEWAY_HOST/get
 ```
 
-### External LoadBalancer Support
+{{% /tab %}}
 
-You can also test the same functionality by sending traffic to the External IP. To get the external IP of the
-Envoy service, run:
+{{% tab name="Without LoadBalancer Support" %}}
+
+Get the name of the Envoy service created the by the example Gateway:
 
 ```shell
-export GATEWAY_HOST=$(kubectl get svc/${ENVOY_SERVICE} -n envoy-gateway-system -o jsonpath='{.status.loadBalancer.ingress[0].ip}')
+export ENVOY_SERVICE= \ 
+    $(kubectl get svc -n envoy-gateway-system \
+    --selector=gateway.envoyproxy.io/owning-gateway-namespace=default,gateway.envoyproxy.io/owning-gateway-name=eg \
+    -o jsonpath='{.items[0].metadata.name}')
 ```
 
-In certain environments, the load balancer may be exposed using a hostname, instead of an IP address. If so, replace
-`ip` in the above command with `hostname`.
+Port forward to the Envoy service:
+
+```shell
+kubectl -n envoy-gateway-system port-forward service/${ENVOY_SERVICE} 8888:80 &
+```
 
 Curl the example app through Envoy proxy:
 
 ```shell
-curl --verbose --header "Host: www.example.com" http://$GATEWAY_HOST/get
+curl --verbose --header "Host: www.example.com" http://localhost:8888/get
 ```
 
+{{% /tab %}}
+{{< /tabs >}}
+
 ## What to explore next?
 
 In this quickstart, you have:

site/layouts/partials/scripts.html

@@ -0,0 +1,54 @@
+<script src="/js/jquery-3.6.0.min.js" integrity="sha384-vtXRMe3mGCbOeY7l30aIg8H9p3GdeSe4IFlP6G8JMa7o7lXvnz3GFKzPxzJdPfGK" crossorigin="anonymous"></script>
+<script src="/js/bootstrap-4.6.1.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
+<script src="{{ "js/script.js" | relURL }}"></script>
+
+{{ $jsBase := resources.Get "js/base.js" }}
+{{ $jsAnchor := resources.Get "js/anchor.js" }}
+{{ $jsSearch := resources.Get "js/search.js" | resources.ExecuteAsTemplate "js/search.js" .Site.Home }}
+{{ $jsMermaid := resources.Get "js/mermaid.js" | resources.ExecuteAsTemplate "js/mermaid.js" . }}
+{{ if .Site.Params.offlineSearch }}
+{{ $jsSearch = resources.Get "js/offline-search.js" }}
+{{ end }}
+{{ $js := (slice $jsBase $jsAnchor $jsSearch $jsMermaid) | resources.Concat "js/main.js" }}
+{{ if .Site.IsServer }}
+<script src="{{ $js.RelPermalink }}"></script>
+{{ else }}
+{{ $js := $js | minify | fingerprint }}
+<script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>
+{{ end }}
+{{ with .Site.Params.prism_syntax_highlighting }}
+<!-- scripts for prism -->
+<script src='/js/prism.js'></script>
+{{ end }}
+
+<!--for the splitter-->
+<script>
+  let splitInstance = null;
+
+  function enableSplitter(mediaQuery) {
+    if (mediaQuery.matches) {
+      if (!splitInstance) {
+        splitInstance = Split(["#sidebarnav", "#maindoc"], {
+          sizes: [20, 80],
+          minSize: 100,
+        });
+      }
+    } else {
+      if (splitInstance) {
+        splitInstance.destroy();
+        splitInstance = null;
+      }
+    }
+  }
+
+  const screenWidthMediaQuery = window.matchMedia("(min-width: 768px)");
+
+  const eleNav = document.getElementById("sidebarnav");
+  if (eleNav !== null) {
+    enableSplitter(screenWidthMediaQuery);
+    screenWidthMediaQuery.addListener(enableSplitter);
+  }
+</script>
+
+
+{{ partial "hooks/body-end.html" . }}

site/layouts/shortcodes/blacks/__common.html

@@ -0,0 +1,16 @@
+{{/* This file contains some common template definitions used in the blocks shortcodes. 
+    The reasoning behind the long and hard-to-remember template names is that these templates are global. */}}
+    {{ define "shortcodes-blocks_getimage" }}
+    {{- $cr := site.GetPage "/_common-resources" -}}
+    {{- with $cr -}}
+    {{- $image := $cr.Resources.GetMatch (printf "images/**%s*" $.name ) -}}
+    {{- with $image -}}
+    {{- $.ctx.Scratch.Set $.target $image -}}
+    {{- else -}}
+    {{- errorf "Image matching %q not found _common-resources" $.name -}}
+    {{- end -}}
+    {{- else -}}
+    {{ errorf "[%s] No resource bundle found. Create an empty headless bundle; create content/%s/_common-resources/index.md with \"headless: true\" in front matter. See https://gohugo.io/content-management/page-bundles/#headless-bundle"  $.ctx.Page.Lang $.ctx.Page.Lang }}
+    {{- end -}}
+    {{- end -}}
+

site/layouts/shortcodes/tab.html

@@ -0,0 +1,19 @@
+{{ if .Parent }}
+	{{ $name := trim (.Get "name") " " }}
+	{{ $include := trim (.Get "include") " "}}
+	{{ $codelang := .Get "codelang" }}
+	{{ if not (.Parent.Scratch.Get "tabs") }}
+	{{ .Parent.Scratch.Set "tabs" slice }}
+	{{ end }}
+	{{ with .Inner }}
+	{{ if $codelang }}
+	{{ $.Parent.Scratch.Add "tabs" (dict "name" $name "content" (highlight . $codelang "") ) }}
+	{{ else }}
+	{{ $.Parent.Scratch.Add "tabs" (dict "name" $name "content" . ) }}
+	{{ end }}
+	{{ else }}
+	{{ $.Parent.Scratch.Add "tabs" (dict "name" $name "include" $include "codelang" $codelang) }}
+	{{ end }}
+{{ else }}
+	{{- errorf "[%s] %q: tab shortcode missing its parent" site.Language.Lang .Page.Path -}}
+{{ end}}

site/layouts/shortcodes/tabs.html

@@ -0,0 +1,50 @@
+{{- .Page.Scratch.Add "tabset-counter" 1 -}}
+{{- $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 -}}
+<ul class="nav nav-tabs" id="{{ $tab_set_id }}" role="tablist">
+	{{- range $i, $e := $tabs -}}
+	  {{- $id := printf "%s-%d" $tab_set_id $i -}}
+	  {{- 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 -}}
+{{- 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 -}}
+		{{- if eq $.Page.BundleType "leaf" -}}
+			{{- /* find the file somewhere inside the bundle. Note the use of double asterisk */ -}}
+			{{- with $.Page.Resources.GetMatch (printf "**%s*" .include) -}}
+				{{- if ne .ResourceType "page" -}}
+				{{- /* Assume it is a file that needs code highlighting. */ -}}
+				{{- $codelang := $e.codelang | default ( path.Ext .Name | strings.TrimPrefix ".") -}}
+				{{- highlight .Content $codelang "" -}}
+				{{- else -}}
+					{{- .Content -}}
+				{{- end -}}
+			{{- end -}}
+		{{- else -}}
+		{{- $path := path.Join $.Page.File.Dir .include -}}
+		{{- $page := site.GetPage "page" $path -}}
+		{{- with $page -}}
+			{{- .Content -}}
+		{{- else -}}
+		{{- errorf "[%s] tabs include not found for path %q" site.Language.Lang $path -}}
+		{{- end -}}
+		{{- end -}}
+	{{- end -}}
+</div>
+{{- end -}}
+</div>