Merge pull request docker#20279 from dvdksn/multipage-guide-layout

get-started: add overview and template

Author: dvdksn

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
-* Develop with containers
-* Build and push your first image
+In this guide series, you will gain hands-on experience with Docker, starting
+with installing and setting up Docker Desktop on your local machine. You will
+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
-and a better understanding of the benefits of containerizing your applications.
+## What you'll learn
 
-Get started by installing Docker Desktop and running your first container.
-
-{{< button text="Get Docker Desktop" url="get-docker-desktop.md" >}}
+- Set up Docker Desktop
+- Run your first container
+- 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

@@ -84,6 +84,7 @@
       "Python",
       "RHEL-8",
       "RHEL-9",
+      "RHEL-CentOS-or-Fedora",
       "Raw",
       "React",
       "Regular-install",
@@ -133,6 +134,7 @@
       "bg-background-light",
       "bg-black/70",
       "bg-blue-light",
+      "bg-blue-light-400",
       "bg-blue-light-500",
       "bg-cover",
       "bg-gradient-to-br",
@@ -141,7 +143,9 @@
       "bg-gray-light-100",
       "bg-gray-light-200",
       "bg-gray-light-200/50",
+      "bg-gray-light-400",
       "bg-green-light",
+      "bg-green-light-400",
       "bg-pattern-blue",
       "bg-pattern-purple",
       "bg-pattern-verde",
@@ -152,7 +156,10 @@
       "block",
       "border",
       "border-0",
+      "border-b-2",
       "border-b-4",
+      "border-b-gray-light-400",
+      "border-b-green-light-400",
       "border-blue-light-500",
       "border-divider-light",
       "border-gray-light-100",
@@ -171,17 +178,21 @@
       "dark:bg-background-dark",
       "dark:bg-blue-dark",
       "dark:bg-blue-dark-400",
+      "dark:bg-blue-dark-500",
       "dark:bg-gray-dark-100",
       "dark:bg-gray-dark-100/70",
       "dark:bg-gray-dark-200",
       "dark:bg-gray-dark-300",
       "dark:bg-gray-dark-300/50",
       "dark:bg-gray-dark-400",
       "dark:bg-green-dark",
+      "dark:bg-green-dark-400",
       "dark:bg-red-dark",
       "dark:bg-violet-dark",
       "dark:block",
       "dark:border-b-blue-dark-600",
+      "dark:border-b-gray-dark-400",
+      "dark:border-b-green-dark-400",
       "dark:border-divider-dark",
       "dark:border-gray-dark-200",
       "dark:border-gray-dark-400",
@@ -225,6 +236,7 @@
       "flex-auto",
       "flex-col",
       "flex-col-reverse",
+      "flex-grow",
       "flex-wrap",
       "focus:outline-blue-light",
       "font-medium",
@@ -234,6 +246,7 @@
       "from-accent-light",
       "from-background-light",
       "from-blue-light-400",
+      "gap-1",
       "gap-10",
       "gap-12",
       "gap-2",
@@ -304,6 +317,7 @@
       "lntable",
       "lntd",
       "m-2",
+      "m-4",
       "m-auto",
       "macOS",
       "max-h-[80vh]",
@@ -326,6 +340,7 @@
       "md:h-[334px]",
       "md:hidden",
       "md:max-w-[66%]",
+      "md:px-20",
       "md:scale-100",
       "min-h-0",
       "min-h-screen",
@@ -341,6 +356,7 @@
       "my-0",
       "my-2",
       "my-4",
+      "my-8",
       "no-underline",
       "no-wrap",
       "not-prose",
@@ -378,6 +394,7 @@
       "px-2",
       "px-3",
       "px-4",
+      "px-8",
       "py-1",
       "py-12",
       "py-2",
@@ -394,7 +411,9 @@
       "rounded-[6px]",
       "rounded-b-lg",
       "rounded-full",
+      "rounded-l",
       "rounded-lg",
+      "rounded-r",
       "rounded-sm",
       "scale-50",
       "scale-75",
@@ -403,6 +422,7 @@
       "self-center",
       "shadow",
       "sidebar-hover",
+      "sm:flex-row",
       "space-x-2",
       "space-y-4",
       "sticky",
@@ -413,6 +433,7 @@
       "text-base",
       "text-black",
       "text-blue-light",
+      "text-center",
       "text-divider-light",
       "text-gray-light",
       "text-gray-light-300",

layouts/_default/single.html

@@ -8,6 +8,9 @@
     {{ with .Title }}
     <h1 data-pagefind-weight="10" class="scroll-mt-36">{{ . }}</h1>
     {{ end }}
+    {{ if eq .CurrentSection.Layout "series" }}
+      {{ partial "guides-stepper.html" . }}
+    {{ end }}
     <div class="block lg:hidden">
       {{ partial "pagemeta.html" . }}
       <hr>

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/partials/guides-stepper.html

@@ -0,0 +1,30 @@
+{{ if or .NextInSection .PrevInSection }}
+  <a
+    class="no-underline my-8 flex justify-center text-xs text-white"
+    href="{{ .CurrentSection.Permalink }}">
+    <span class="rounded-l bg-blue-light-400 px-2 dark:bg-blue-dark-500">SERIES</span>
+    <span class="rounded-r bg-blue-light-500 px-2 dark:bg-blue-dark-400">{{ .CurrentSection.Title }}</span>
+  </a>
+  <div x-data class="mb-8 flex w-full items-center justify-center gap-1 px-8 text-center text-sm md:px-20">
+    {{ page.Store.Set "stepper_seen" false }}
+    {{ range $i, $e := .CurrentSection.Pages }}
+      {{ if $i }}
+        {{ if (page.Store.Get "stepper_seen") }}
+          <div class="flex-grow border-b-2 border-b-gray-light-400 dark:border-b-gray-dark-400"></div>
+        {{ else }}
+          <div class="flex-grow border-b-2 border-b-green-light-400 dark:border-b-green-dark-400"></div>
+        {{ end }}
+      {{ end }}
+      <a href="{{ .Permalink }}" class="no-underline text-white flex items-center justify-center w-8 h-8 rounded-full
+        {{ if (page.Store.Get "stepper_seen") }}
+          bg-gray-light-400 dark:bg-gray-dark-400
+        {{ else if (eq . page) }}
+          {{ .Store.Set "stepper_seen" true }}
+          bg-blue-light-400 dark:bg-blue-dark-400
+        {{ else }}
+          bg-green-light-400 dark:bg-green-dark-400
+        {{ end }}">
+        {{ add $i 1 }}</a>
+    {{ end }}
+  </div>
+{{ 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 }}