From c4d31da65b869c1e81e4c4ccb95763e1d15d147d Mon Sep 17 00:00:00 2001 From: Andrii Holovin Date: Sat, 19 Apr 2025 20:36:39 +0300 Subject: [PATCH] replace html-inline with shortcodes in the tutorial --- .../tutorials/kubernetes-basics/_index.md | 80 +++++++++---------- .../kubernetes-basics/scale/scale-intro.md | 22 +++-- .../kubernetes-basics/update/update-intro.md | 34 ++++---- .../shortcodes/tutorials/carousel-item.html | 3 + layouts/shortcodes/tutorials/carousel.html | 7 ++ layouts/shortcodes/tutorials/module.html | 12 +++ layouts/shortcodes/tutorials/modules.html | 5 ++ static/css/style_tutorials.css | 11 ++- 8 files changed, 98 insertions(+), 76 deletions(-) create mode 100644 layouts/shortcodes/tutorials/carousel-item.html create mode 100644 layouts/shortcodes/tutorials/carousel.html create mode 100644 layouts/shortcodes/tutorials/module.html create mode 100644 layouts/shortcodes/tutorials/modules.html diff --git a/content/en/docs/tutorials/kubernetes-basics/_index.md b/content/en/docs/tutorials/kubernetes-basics/_index.md index 0885da9b50..2edb6729d3 100644 --- a/content/en/docs/tutorials/kubernetes-basics/_index.md +++ b/content/en/docs/tutorials/kubernetes-basics/_index.md @@ -35,49 +35,45 @@ container orchestration, combined with best-of-breed ideas from the community. ## Kubernetes Basics Modules - - + +{{< tutorials/modules >}} + {{< tutorials/module + path="/docs/tutorials/kubernetes-basics/create-cluster/cluster-intro/" + image="/docs/tutorials/kubernetes-basics/public/images/module_01.svg?v=1469803628347" + alt="Module 1" + title="1. Create a Kubernetes cluster" >}} -
-
- - Module 1 -
1. Create a Kubernetes cluster
- -
-
- - Module 2 -
2. Deploy an app
- -
-
- - Module 3 -
3. Explore your app
- -
-
- - Module 4 -
4. Expose your app publicly
- -
-
- - Module 5 -
5. Scale up your app
- -
-
- - Module 6 -
6. Update your app
- -
-
+ {{< tutorials/module + path="/docs/tutorials/kubernetes-basics/deploy-app/deploy-intro/" + image="/docs/tutorials/kubernetes-basics/public/images/module_02.svg?v=1469803628347" + alt="Module 2" + title="2. Deploy an app" >}} + + {{< tutorials/module + path="/docs/tutorials/kubernetes-basics/explore/explore-intro/" + image="/docs/tutorials/kubernetes-basics/public/images/module_03.svg?v=1469803628347" + alt="Module 3" + title="3. Explore your app" >}} + + {{< tutorials/module + path="/docs/tutorials/kubernetes-basics/expose/expose-intro/" + image="/docs/tutorials/kubernetes-basics/public/images/module_04.svg?v=1469803628347" + alt="Module 4" + title="4. Expose your app publicly" >}} + + {{< tutorials/module + path="/docs/tutorials/kubernetes-basics/scale/scale-intro/" + image="/docs/tutorials/kubernetes-basics/public/images/module_05.svg?v=1469803628347" + alt="Module 5" + title="5. Scale up your app" >}} + + {{< tutorials/module + path="/docs/tutorials/kubernetes-basics/update/update-intro/" + image="/docs/tutorials/kubernetes-basics/public/images/module_06.svg?v=1469803628347" + alt="Module 6" + title="6. Update your app" >}} +{{< /tutorials/modules >}} ## {{% heading "whatsnext" %}} -* Tutorial [Using Minikube to Create a -Cluster](/docs/tutorials/kubernetes-basics/create-cluster/) \ No newline at end of file +* Tutorial [Using Minikube to Create a Cluster](/docs/tutorials/kubernetes-basics/create-cluster/) diff --git a/content/en/docs/tutorials/kubernetes-basics/scale/scale-intro.md b/content/en/docs/tutorials/kubernetes-basics/scale/scale-intro.md index 2b2f5b65b6..27ae333ccb 100644 --- a/content/en/docs/tutorials/kubernetes-basics/scale/scale-intro.md +++ b/content/en/docs/tutorials/kubernetes-basics/scale/scale-intro.md @@ -44,18 +44,14 @@ kubectl expose deployment/kubernetes-bootcamp --type="LoadBalancer" --port 8080 ## Scaling overview -
- -
+{{< tutorials/carousel id="myCarousel" interval="3000" >}} + {{< tutorials/carousel-item + image="/docs/tutorials/kubernetes-basics/public/images/module_05_scaling1.svg" + active="true" >}} + + {{< tutorials/carousel-item + image="/docs/tutorials/kubernetes-basics/public/images/module_05_scaling2.svg" >}} +{{< /tutorials/carousel >}} {{% alert %}} _Scaling is accomplished by changing the number of replicas in a Deployment._ @@ -229,4 +225,4 @@ This confirms that 2 Pods were terminated. * Tutorial [Performing a Rolling Update](/docs/tutorials/kubernetes-basics/update/update-intro/). * Learn more about [ReplicaSet](/docs/concepts/workloads/controllers/replicaset/). -* Learn more about [Autoscaling](/docs/concepts/workloads/autoscaling/). \ No newline at end of file +* Learn more about [Autoscaling](/docs/concepts/workloads/autoscaling/). diff --git a/content/en/docs/tutorials/kubernetes-basics/update/update-intro.md b/content/en/docs/tutorials/kubernetes-basics/update/update-intro.md index 4ac55d9387..9be42abcc4 100644 --- a/content/en/docs/tutorials/kubernetes-basics/update/update-intro.md +++ b/content/en/docs/tutorials/kubernetes-basics/update/update-intro.md @@ -31,24 +31,20 @@ versioned and any Deployment update can be reverted to a previous (stable) versi ## Rolling updates overview -
- -
+{{< tutorials/carousel id="myCarousel" interval="3000" >}} + {{< tutorials/carousel-item + image="/docs/tutorials/kubernetes-basics/public/images/module_06_rollingupdates1.svg" + active="true" >}} + + {{< tutorials/carousel-item + image="/docs/tutorials/kubernetes-basics/public/images/module_06_rollingupdates2.svg" >}} + + {{< tutorials/carousel-item + image="/docs/tutorials/kubernetes-basics/public/images/module_06_rollingupdates3.svg" >}} + + {{< tutorials/carousel-item + image="/docs/tutorials/kubernetes-basics/public/images/module_06_rollingupdates4.svg" >}} +{{< /tutorials/carousel >}} {{% alert %}} _If a Deployment is exposed publicly, the Service will load-balance the traffic @@ -212,4 +208,4 @@ kubectl delete deployments/kubernetes-bootcamp services/kubernetes-bootcamp ## {{% heading "whatsnext" %}} -* Learn more about [Deployments](/docs/concepts/workloads/controllers/deployment/). \ No newline at end of file +* Learn more about [Deployments](/docs/concepts/workloads/controllers/deployment/). diff --git a/layouts/shortcodes/tutorials/carousel-item.html b/layouts/shortcodes/tutorials/carousel-item.html new file mode 100644 index 0000000000..02df1d2298 --- /dev/null +++ b/layouts/shortcodes/tutorials/carousel-item.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/layouts/shortcodes/tutorials/carousel.html b/layouts/shortcodes/tutorials/carousel.html new file mode 100644 index 0000000000..6ee688ada2 --- /dev/null +++ b/layouts/shortcodes/tutorials/carousel.html @@ -0,0 +1,7 @@ +
+
+
+ {{ .Inner }} +
+
+
diff --git a/layouts/shortcodes/tutorials/module.html b/layouts/shortcodes/tutorials/module.html new file mode 100644 index 0000000000..88c11e23d3 --- /dev/null +++ b/layouts/shortcodes/tutorials/module.html @@ -0,0 +1,12 @@ +{{ $path := .Get "path" }} +{{ $defaultLang := .Site.Params.defaultContentLanguage | default "en" }} +{{ $url := $path }} +{{ if ne .Page.Lang $defaultLang }} + {{ $url = printf "/%s%s" .Page.Lang $path }} +{{ end }} +
+ + {{ .Get +
{{ .Get "title" }}
+ +
diff --git a/layouts/shortcodes/tutorials/modules.html b/layouts/shortcodes/tutorials/modules.html new file mode 100644 index 0000000000..2eaf72b7f0 --- /dev/null +++ b/layouts/shortcodes/tutorials/modules.html @@ -0,0 +1,5 @@ + + +
+ {{ .Inner }} +
diff --git a/static/css/style_tutorials.css b/static/css/style_tutorials.css index 278e378383..363363bef6 100644 --- a/static/css/style_tutorials.css +++ b/static/css/style_tutorials.css @@ -3,7 +3,7 @@ display: flex; flex-wrap: wrap; gap: 20px; - justify-content: space-between; + justify-content: space-evenly; } .module { @@ -17,4 +17,11 @@ .module h5 { margin: 10px 0 0; -} \ No newline at end of file +} + +@media screen and (max-width: 768px) { + .module { + width: 45%; + text-align: center; + } +}