get-started: add overview and template

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>

content/guides/getting-started/_index.md

@@ -1,20 +1,37 @@
 ---
 title: Getting started
 keywords: get started, getting started, how to get started
-description: Get started with Docker. You'll learn about Docker Desktop, developing with Docker, as well as how to build and push your first image.
+description: |
+  Get started with Docker. You'll learn about Docker Desktop, developing with
+  Docker, as well as how to build and push your first image.
+summary: |
+  Embark on a comprehensive learning path to understand Docker and
+  containerization, beginning with foundational concepts and installation
+  procedures. Progress through hands-on exercises that cover essential Docker
+  commands, image creation, and container orchestration.
 aliases:
-- /get-started/
+  - /get-started/
+layout: series
+params:
+  skill: Beginner
+  time: 15 minutes
+  prereq: None
 ---
 
-This getting started guide is a series of quick topics that show you how to:
+## About this series
 
-* Install Docker Desktop
+In this guide series, you will gain hands-on experience with Docker, starting
-* Develop with containers
+with installing and setting up Docker Desktop on your local machine. You will
-* Build and push your first image
+learn how to run your first container, understanding the basics of
+containerization and its benefits. This series guides you through building your
+first Docker image, providing insights into creating efficient and reusable
+images. Finally, you will explore how to publish your image on Docker Hub,
+enabling you to share your work with the broader community and leverage
+Docker's powerful ecosystem for collaborative development and deployment.
 
-By the end of this guide, you'll have hands-on experience using Docker Desktop
+## What you'll learn
-and a better understanding of the benefits of containerizing your applications.
 
-Get started by installing Docker Desktop and running your first container.
+- Set up Docker Desktop
-
+- Run your first container
-{{< button text="Get Docker Desktop" url="get-docker-desktop.md" >}}
+- Build your first image
+- Publish your image on Docker Hub

content/guides/getting-started/build-and-push-first-image.md

@@ -2,6 +2,12 @@
 title: Build and push your first image
 keywords: concepts, container, docker desktop
 description: This concept page will teach you how to build and push your first image
+summary: |
+  Learn how to build your first Docker image, a key step in containerizing your
+  application. We'll guide you through the process of creating an image
+  repository and building and pushing your image to Docker Hub. This enables
+  you to share your image easily within your team.
+weight: 3
 ---
 
 {{< youtube-embed 7ge1s5nAa34 >}}

content/guides/getting-started/develop-with-containers.md

@@ -1,7 +1,13 @@
 ---
-title: Develop with containers  
+title: Develop with containers
 keywords: concepts, build, images, container, docker desktop
 description: This concept page will teach you how to develop with containers
+summary: |
+  Learn how to run your first container, gaining hands-on experience with
+  Docker's powerful features. We'll cover making real-time changes to both
+  backend and frontend code within the containerized environment, ensuring
+  seamless integration and testing.
+weight: 2
 ---
 
 {{< youtube-embed D0SDBrS3t9I >}}

content/guides/getting-started/get-docker-desktop.md

@@ -2,6 +2,13 @@
 title: Get Docker Desktop 
 keywords: concepts, container, docker desktop
 description: This concept page will teach you download Docker Desktop and install it on Windows, Mac, and Linux
+summary: |
+  Getting Docker Desktop up and running is the first crucial step for
+  developers diving into containerization, offering a seamless and
+  user-friendly interface for managing Docker containers. Docker Desktop
+  simplifies the process of building, sharing, and running applications in
+  containers, ensuring consistency across different environments.
+weight: 1
 ---
 
 {{< youtube-embed C2bPVhiNU-0 >}}

content/guides/getting-started/whats-next.md

@@ -2,7 +2,12 @@
 title: What's next 
 keywords: concepts, build, images, container, docker desktop
 description: Explore step-by-step guides to hep you understand core Docker concepts, building images, and running containers.
+summary: |
+  Now that you have set up Docker Desktop, developed with containers, and built
+  and pushed your first image, you are ready to take the next step and dive
+  deep into what a container is and how it works.
 notoc: true
+weight: 4
 
 the-basics:
 - title: What is a container?

hugo_stats.json

@@ -138,9 +138,11 @@
       "bg-gradient-to-br",
       "bg-gradient-to-r",
       "bg-gradient-to-t",
+      "bg-gray-dark-300",
       "bg-gray-light-100",
       "bg-gray-light-200",
       "bg-gray-light-200/50",
+      "bg-gray-light-300",
       "bg-green-light",
       "bg-pattern-blue",
       "bg-pattern-purple",

layouts/guides/series.html

@@ -0,0 +1,49 @@
+{{ define "left" }}
+{{ partial "sidebar.html" . }}
+{{ end }}
+
+{{ define "main" }}
+{{ partial "breadcrumbs.html" . }}
+<article class="prose max-w-none dark:prose-invert">
+  <h1 data-pagefind-weight="10" class="scroll-mt-36">{{ .Title }}</h1>
+  <div class="text-lg">{{ .Summary }}</div>
+  <div class="not-prose">
+    <div class="flex flex-col sm:flex-row w-full justify-between gap-4 p-6 m-4 bg-gray-light-200 dark:bg-gray-dark-300">
+      <div class="flex flex-col">
+        <span><strong>Skill level</strong></span>
+        <span>{{ .Params.skill }}</span>
+      </div>
+      <div class="flex flex-col">
+        <span><strong>Time to complete</strong></span>
+        <span>{{ .Params.time }}</span>
+      </div>
+      <div class="flex flex-col">
+        <span><strong>Prerequisites</strong></span>
+        <span>{{ .Params.prereq }}</span>
+      </div>
+    </div>
+  </div>
+  {{ .Content }}
+  {{ partial "heading.html" (dict "text" "Modules" "level" 2) }}
+  {{ range $i, $e := .Pages }}
+    {{ $open := compare.Conditional (eq $i 0) true false }}
+    <div x-data="{ open: {{ $open }} }" class="border border-gray-light-200 dark:border-gray-dark-200 bg-white dark:bg-gray-dark-100 py-2">
+      <button class="not-prose w-full py-2 px-4 flex justify-between" x-on:click="open = ! open">
+        <span class="text-xl">{{ fmt.Printf "%d. %s" (add $i 1) .Title }}</span>
+        <span :class="{ 'hidden' : !open }" class="icon-svg">{{ partialCached "icon" "expand_less" "expand_less" }}</span>
+        <span :class="{ 'hidden' : open }" class="icon-svg">{{ partialCached "icon" "expand_more" "expand_more" }}</span>
+      </button>
+      <div x-show="open" x-collapse class="px-4">
+        <div class="mb-4">
+          <div class="mb-4">{{ $e.Summary }}</div>
+          <div>
+            <a href="{{ $e.Permalink }}"
+            class="no-underline cursor-pointer py-2 px-4 rounded bg-blue-light-500 dark:bg-blue-dark-400 hover:bg-blue-light-400 dark:hover:bg-blue-dark-500 text-white"
+            >Start</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  {{ end }}
+</article>
+{{ end }}

layouts/shortcodes/youtube-embed.html

@@ -1,4 +1,4 @@
-<div id="youtube-player-{{ .Get 0 }}" data-video-id="{{ .Get 0}}" class="youtube-video aspect-video w-full"></div>
+<div id="youtube-player-{{ .Get 0 }}" data-video-id="{{ .Get 0 }}" class="youtube-video aspect-video w-full"></div>
 {{ if page.Scratch.Get "youtube-embed" | default "incomplete" | ne "setup" }} 
 {{ page.Scratch.Set "youtube-embed" "setup" }}
 <script>
@@ -53,4 +53,4 @@
 })();
   
 </script>
-{{ end }}
+{{ end }}