Skip to content

Commit 0ddd4fa

Browse files
adamgordonbelladamgordonbell
authored
Update K8s landing page with new video (#15128)
* Update Kubernetes page layout and video section - Changed YouTube video ID in the Kubernetes topic. - Reorganized HTML structure for better layout and visibility. - Moved the hero section and video section to the top of the page. - Added a new section highlighting advantages of using Pulumi with Kubernetes. * Improve Kubernetes documentation formatting and add additional spacing. * Add introductory video link to Kubernetes documentation and cleanup whitespace. * Refactor Kubernetes topic layout: move hero section to top, add customer logos, and simplify code example section. * Add YouTube overview video for deploying Kubernetes with Pulumi
1 parent e143c3d commit 0ddd4fa

File tree

4 files changed

+128
-113
lines changed

4 files changed

+128
-113
lines changed

‎content/docs/iac/clouds/kubernetes/_index.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,9 @@ guides-description: Learn how to use Pulumi & Kubernetes together.
6666
guides:
6767
description: Learn how to use Kubernetes & Pulumi together.
6868
guides_list:
69+
- display_name: Introductory Video
70+
url: https://www.youtube.com/watch?v=2P8JLgAc5QI
71+
external_link: true
6972
- display_name: Crosswalk playbooks for Kubernetes
7073
url: guides/playbooks/
7174
- display_name: Control plane

‎content/docs/iac/get-started/kubernetes/_index.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,15 @@ For a quick example of how Pulumi deploys infrastructure on Kubernetes, this tut
3636
1. Creating a service to access the NGINX deployment.
3737
1. Cleaning up your deployment by destroying the resources you've provisioned.
3838

39+
Before you begin, watch this overview of how to deploy Kubernetes infrastructure with Pulumi:
40+
41+
<div class="rounded-md shadow border border-gray-300 w-3/4 mx-auto my-4" style="position: relative; padding-bottom: 40.25%; height: 0; overflow: hidden;">
42+
<iframe
43+
src="//www.youtube.com/embed/2P8JLgAc5QI?rel=0"
44+
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;"
45+
allowfullscreen=""
46+
title="Getting Started with Kubernetes and Pulumi: Deploy Amazon EKS in 5 minutes">
47+
</iframe>
48+
</div>
49+
3950
{{< get-started-stepper >}}

‎content/topics/kubernetes.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ hero:
1717
video_section:
1818
title: Pulumi In Action
1919
subtitle: Watch how easy it is to set up Amazon Elastic Kubernetes Service (EKS) in 5 minutes with Pulumi.
20-
youtube_video_id: yA40w1ryMu8
20+
youtube_video_id: 2P8JLgAc5QI
2121
video_title: Watch how easy it is to setup Amazon Elastic Kubernetes Service (EKS) in 5 minutes with Pulumi.
2222

2323
kubernetes_overview:

‎layouts/topics/kubernetes.html‎

Lines changed: 113 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -12,34 +12,124 @@ <h1>
1212
{{ define "main" }}
1313
{{ $pageContext := . }}
1414

15-
16-
<section id="overview" class="my-16">
17-
<div class="flex flex-wrap container mx-auto">
18-
<div class="w-full order-last lg:mt-0 lg:order-first lg:w-1/2 px-5">
15+
<section id="description" class="container mx-auto my-16 flex flex-col">
16+
<div class="flex flex-col lg:flex-row px-8">
17+
<div class="w-full lg:w-1/2 lg:pr-8 order-last lg:order-first">
1918
<h2>{{ .Params.hero.title }}</h2>
20-
<p class="mr-4">{{ .Params.hero.body | markdownify }}</p>
21-
<div>
22-
<div class="flex justify-start items-start mt-8">
23-
<div class="flex flex-col lg:flex-row items-start">
24-
<a class="btn-primary mr-4" href="{{ relref . "/docs/iac/get-started/kubernetes/" }}">Get Started</a>
25-
<a class="btn-secondary" href="#contact">Request A Demo</a>
26-
</div>
19+
<p>{{ .Params.hero.body | markdownify }}</p>
20+
<div class="mt-8 flex justify-start items-start">
21+
<div class="flex flex-col lg:flex-row items-start">
22+
<a class="btn-primary mr-4" href="{{ relref . "/docs/iac/get-started/kubernetes/" }}">Get Started</a>
23+
<a class="btn-secondary" href="#contact">Request A Demo</a>
2724
</div>
2825
</div>
2926
</div>
30-
<div class="w-full order-first lg:order-last mt-8 lg:mt-0 lg:w-1/2 lg:mt-0">
31-
<div>
32-
<div>
33-
<div class="max-w-4xl container text-left card bg-white p-6 mx-auto">
34-
<pulumi-chooser type="language" options="typescript,python,go,csharp,java,yaml">
35-
{{ range $lang := .Params.kubernetes_overview.ide.tabs }}
36-
<pulumi-choosable type="language" class="highlight" value="{{ $lang.language }}">
37-
{{ partial "code" (dict "lang" $lang.language "code" $lang.code "mode" "light") }}
38-
</pulumi-choosable>
39-
{{ end }}
40-
</pulumi-chooser>
27+
{{ with .Params.video_section }}
28+
<div class="w-full lg:w-1/2 mb-8 lg:mb-0">
29+
<div class="rounded-xl shadow-2xl relative h-0 overflow-hidden" style="padding-bottom: 50.25%;">
30+
<iframe
31+
src="https://www.youtube.com/embed/{{ .youtube_video_id }}?rel=0"
32+
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;"
33+
allowfullscreen=""
34+
title="{{ .video_title }}"
35+
></iframe>
36+
</div>
37+
</div>
38+
{{ end }}
39+
</div>
40+
</section>
41+
42+
<!-- Code example section hidden as requested -->
43+
44+
<!-- Hero section moved to top of page to be alongside the video -->
45+
46+
<!-- Customer logos -->
47+
<section id="customers" class="my-20 px-4">
48+
<h3 class="mt-12 mb-8 text-center">Powering top engineering teams</h3>
49+
<div class="container mx-auto">
50+
<div class="flex flex-col lg:flex-row items-center justify-center my-4">
51+
<a data-track="customer-logo" href="/case-studies/snowflake" target="_blank">
52+
<img class="mx-auto my-4 lg:my-2 lg:mx-8 h-12" src="/logos/customers/snowflake-logo.svg" alt="Snowflake" title="Snowflake" />
53+
</a>
54+
<a data-track="customer-logo" href="/case-studies/mercedes-benz" target="_blank">
55+
<img
56+
class="mx-auto my-4 lg:my-2 lg:mx-8 h-12"
57+
src="/logos/customers/mercedes-benz-RDNA_logo.png"
58+
title="Mercedes-Benz Research and Development"
59+
alt="Mercedes-Benz Research and Development"
60+
/>
61+
</a>
62+
<a data-track="customer-logo" href="https://www.mindbodyonline.com/" target="_blank">
63+
<img class="mx-auto my-4 lg:my-2 lg:mx-8 h-10" src="/logos/customers/mindbody_logo.svg" alt="MindBody" title="MindBody" />
64+
</a>
65+
<a data-track="customer-logo" href="https://www.nih.gov/" target="_blank">
66+
<img class="mx-auto my-4 lg:my-2 lg:mx-8 h-10" src="/logos/customers/nih.png" alt="National Institutes of Health" title="National Institutes of Health" />
67+
</a>
68+
</div>
69+
<div class="lg:flex items-center justify-center my-4">
70+
<a data-track="customer-logo" href="/case-studies/sourcegraph" target="_blank">
71+
<img class="mx-auto my-4 lg:my-2 lg:mx-8 h-12" src="/logos/customers/sourcegraph-logo.svg" alt="Sourcegraph" title="Sourcegraph" />
72+
</a>
73+
<a data-track="customer-logo" href="/case-studies/lemonade" target="_blank">
74+
<img class="mx-auto my-8 lg:my-2 lg:mx-8 h-8" src="/logos/customers/lemonade.svg" alt="Lemonade" title="Lemonade" />
75+
</a>
76+
<a data-track="customer-logo" href="/case-studies/bmw" target="_blank">
77+
<img class="mx-auto my-8 lg:my-2 lg:mx-8 h-8" src="/logos/customers/bmw.svg" alt="BMW Group" title="BMW Group" />
78+
</a>
79+
<a data-track="customer-logo" href="/case-studies/unity" target="_blank">
80+
<img class="mx-auto my-8 lg:my-2 lg:mx-8 h-8" src="/logos/customers/unity.png" alt="Unity" title="Unity" />
81+
</a>
82+
<a data-track="customer-logo" href="/case-studies/starburst" target="_blank">
83+
<img class="mx-auto my-8 lg:my-2 lg:mx-8 h-8" src="/logos/customers/starburst.png" alt="Starburst" title="Starburst" />
84+
</a>
85+
</div>
86+
</div>
87+
</section>
88+
89+
<section id="kubernetes-overview" class="py-16 px-4 lg:px-0">
90+
<div class="container mx-auto flex flex-col lg:mx-auto lg:flex lg:flex-row lg:items-center lg:justify-center">
91+
{{ with .Params.kubernetes_overview }}
92+
<div class="lg:w-1/2">
93+
<div class="mx-auto">
94+
<img src="/images/topics/kubernetes/k8s-diagram.png"/>
95+
</div>
96+
</div>
97+
<div class="lg:w-1/2">
98+
<div class="md:px-24 lg:px-4">
99+
<h3>{{ .title }}</h3>
100+
<p>{{ .description }}</p>
101+
<ul>
102+
{{ range $i, $item := .list }}
103+
<li>{{ $item | markdownify }}</li>
104+
{{ end }}
105+
</ul>
106+
<div class="my-8">
107+
<a class="btn-secondary lg:inline-block" href="{{ relref $pageContext .cta_url }}">
108+
{{ .cta }}
109+
</a>
41110
</div>
42111
</div>
112+
</div>
113+
{{ end }}
114+
</div>
115+
</section>
116+
117+
<section id="code-example" class="container mx-auto my-16">
118+
<div class="text-center mb-8">
119+
<h3>Infrastructure as Code for Kubernetes</h3>
120+
<p class="max-w-3xl mx-auto">Define your Kubernetes resources using the programming languages you know and love. With Pulumi's SDK, you can manage both your cloud infrastructure and Kubernetes workloads with the same tools.</p>
121+
</div>
122+
<div class="px-8">
123+
<div class="w-full">
124+
<div class="card bg-white p-6 mx-auto h-full">
125+
<pulumi-chooser type="language" options="typescript,python,go,csharp,java,yaml">
126+
{{ range $lang := .Params.kubernetes_overview.ide.tabs }}
127+
<pulumi-choosable type="language" class="highlight" value="{{ $lang.language }}">
128+
{{ partial "code" (dict "lang" $lang.language "code" $lang.code "mode" "light") }}
129+
</pulumi-choosable>
130+
{{ end }}
131+
</pulumi-chooser>
132+
43133
<div class="flex justify-center items-center mt-8 h-8">
44134
<span title="TypeScript">
45135
<svg class="mx-4 h-8 rounded" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -148,77 +238,7 @@ <h2>{{ .Params.hero.title }}</h2>
148238
</div>
149239
</div>
150240
</div>
151-
</section>
152241

153-
<!-- Customer logos -->
154-
<section id="customers" class="my-20 px-4">
155-
<h3 class="mt-12 mb-8 text-center">Powering top engineering teams</h3>
156-
<div class="container mx-auto">
157-
<div class="flex flex-col lg:flex-row items-center justify-center my-4">
158-
<a data-track="customer-logo" href="/case-studies/snowflake" target="_blank">
159-
<img class="mx-auto my-4 lg:my-2 lg:mx-8 h-12" src="/logos/customers/snowflake-logo.svg" alt="Snowflake" title="Snowflake" />
160-
</a>
161-
<a data-track="customer-logo" href="/case-studies/mercedes-benz" target="_blank">
162-
<img
163-
class="mx-auto my-4 lg:my-2 lg:mx-8 h-12"
164-
src="/logos/customers/mercedes-benz-RDNA_logo.png"
165-
title="Mercedes-Benz Research and Development"
166-
alt="Mercedes-Benz Research and Development"
167-
/>
168-
</a>
169-
<a data-track="customer-logo" href="https://www.mindbodyonline.com/" target="_blank">
170-
<img class="mx-auto my-4 lg:my-2 lg:mx-8 h-10" src="/logos/customers/mindbody_logo.svg" alt="MindBody" title="MindBody" />
171-
</a>
172-
<a data-track="customer-logo" href="https://www.nih.gov/" target="_blank">
173-
<img class="mx-auto my-4 lg:my-2 lg:mx-8 h-10" src="/logos/customers/nih.png" alt="National Institutes of Health" title="National Institutes of Health" />
174-
</a>
175-
</div>
176-
<div class="lg:flex items-center justify-center my-4">
177-
<a data-track="customer-logo" href="/case-studies/sourcegraph" target="_blank">
178-
<img class="mx-auto my-4 lg:my-2 lg:mx-8 h-12" src="/logos/customers/sourcegraph-logo.svg" alt="Sourcegraph" title="Sourcegraph" />
179-
</a>
180-
<a data-track="customer-logo" href="/case-studies/lemonade" target="_blank">
181-
<img class="mx-auto my-8 lg:my-2 lg:mx-8 h-8" src="/logos/customers/lemonade.svg" alt="Lemonade" title="Lemonade" />
182-
</a>
183-
<a data-track="customer-logo" href="/case-studies/bmw" target="_blank">
184-
<img class="mx-auto my-8 lg:my-2 lg:mx-8 h-8" src="/logos/customers/bmw.svg" alt="BMW Group" title="BMW Group" />
185-
</a>
186-
<a data-track="customer-logo" href="/case-studies/unity" target="_blank">
187-
<img class="mx-auto my-8 lg:my-2 lg:mx-8 h-8" src="/logos/customers/unity.png" alt="Unity" title="Unity" />
188-
</a>
189-
<a data-track="customer-logo" href="/case-studies/starburst" target="_blank">
190-
<img class="mx-auto my-8 lg:my-2 lg:mx-8 h-8" src="/logos/customers/starburst.png" alt="Starburst" title="Starburst" />
191-
</a>
192-
</div>
193-
</div>
194-
</section>
195-
196-
<section id="kubernetes-overview" class="py-16 px-4 lg:px-0">
197-
<div class="container mx-auto flex flex-col lg:mx-auto lg:flex lg:flex-row lg:items-center lg:justify-center">
198-
{{ with .Params.kubernetes_overview }}
199-
<div class="lg:w-1/2">
200-
<div class="mx-auto">
201-
<img src="/images/topics/kubernetes/k8s-diagram.png"/>
202-
</div>
203-
</div>
204-
<div class="lg:w-1/2">
205-
<div class="md:px-24 lg:px-4">
206-
<h3>{{ .title }}</h3>
207-
<p>{{ .description }}</p>
208-
<ul>
209-
{{ range $i, $item := .list }}
210-
<li>{{ $item | markdownify }}</li>
211-
{{ end }}
212-
</ul>
213-
<div class="my-8">
214-
<a class="btn-secondary lg:inline-block" href="{{ relref $pageContext .cta_url }}">
215-
{{ .cta }}
216-
</a>
217-
</div>
218-
</div>
219-
</div>
220-
{{ end }}
221-
</div>
222242
</section>
223243

224244
<section id="superpowers" class="container mx-auto text-center mt-16">
@@ -275,26 +295,7 @@ <h5>{{ $row.title }}</h5>
275295
</section>
276296
{{ end }}
277297

278-
{{ with .Params.video_section }}
279-
<div class="max-w-4xl my-24 mx-auto px-4">
280-
<div class="text-center mb-8">
281-
<h2>{{ .title }}</h2>
282-
<p class="text-lg">
283-
{{ .subtitle }}
284-
</p>
285-
</div>
286-
287-
<!-- Rendered with Hugo's YouTube shortcode: https://gohugo.io/content-management/shortcodes/#youtube -->
288-
<div class="rounded shadow-md" style="position: relative; padding-bottom: 56.25%; overflow: hidden;">
289-
<iframe
290-
src="//www.youtube.com/embed/{{ .youtube_video_id }}?rel=0"
291-
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;"
292-
allowfullscreen=""
293-
title="{{ .video_title }}"
294-
></iframe>
295-
</div>
296-
</div>
297-
{{ end }}
298+
<!-- Video section moved to the top of the page -->
298299

299300
{{ partial "get-started.html" . }}
300301

0 commit comments

Comments
 (0)