From 4e9c179e9195359c94bbd73e7af7b2f5fe47a627 Mon Sep 17 00:00:00 2001 From: David Karlsson <35727626+dvdksn@users.noreply.github.com> Date: Sun, 23 Jun 2024 22:10:31 +0200 Subject: [PATCH 1/3] get-started: add overview and template Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com> --- content/guides/getting-started/_index.md | 39 ++++++++++----- .../build-and-push-first-image.md | 6 +++ .../develop-with-containers.md | 8 ++- .../getting-started/get-docker-desktop.md | 7 +++ content/guides/getting-started/whats-next.md | 5 ++ hugo_stats.json | 2 + layouts/guides/series.html | 49 +++++++++++++++++++ layouts/shortcodes/youtube-embed.html | 4 +- 8 files changed, 106 insertions(+), 14 deletions(-) create mode 100644 layouts/guides/series.html diff --git a/content/guides/getting-started/_index.md b/content/guides/getting-started/_index.md index 6f2bdf217a..71f18df4a4 100644 --- a/content/guides/getting-started/_index.md +++ b/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" >}} \ No newline at end of file +- Set up Docker Desktop +- Run your first container +- Build your first image +- Publish your image on Docker Hub diff --git a/content/guides/getting-started/build-and-push-first-image.md b/content/guides/getting-started/build-and-push-first-image.md index ff67d227e1..362ac3ecce 100644 --- a/content/guides/getting-started/build-and-push-first-image.md +++ b/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 >}} diff --git a/content/guides/getting-started/develop-with-containers.md b/content/guides/getting-started/develop-with-containers.md index f84e9ca7fc..4b2d7c8eb4 100644 --- a/content/guides/getting-started/develop-with-containers.md +++ b/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 >}} diff --git a/content/guides/getting-started/get-docker-desktop.md b/content/guides/getting-started/get-docker-desktop.md index 2f4376dea6..14d156f1b3 100644 --- a/content/guides/getting-started/get-docker-desktop.md +++ b/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 >}} diff --git a/content/guides/getting-started/whats-next.md b/content/guides/getting-started/whats-next.md index 13a4d6b8f7..835100554e 100644 --- a/content/guides/getting-started/whats-next.md +++ b/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? diff --git a/hugo_stats.json b/hugo_stats.json index 23447f3b91..d137d24714 100644 --- a/hugo_stats.json +++ b/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", diff --git a/layouts/guides/series.html b/layouts/guides/series.html new file mode 100644 index 0000000000..f160f750ba --- /dev/null +++ b/layouts/guides/series.html @@ -0,0 +1,49 @@ +{{ define "left" }} +{{ partial "sidebar.html" . }} +{{ end }} + +{{ define "main" }} +{{ partial "breadcrumbs.html" . }} +
+

{{ .Title }}

+
{{ .Summary }}
+
+
+
+ Skill level + {{ .Params.skill }} +
+
+ Time to complete + {{ .Params.time }} +
+
+ Prerequisites + {{ .Params.prereq }} +
+
+
+ {{ .Content }} + {{ partial "heading.html" (dict "text" "Modules" "level" 2) }} + {{ range $i, $e := .Pages }} + {{ $open := compare.Conditional (eq $i 0) true false }} +
+ +
+
+
{{ $e.Summary }}
+
+ Start +
+
+
+
+ {{ end }} +
+{{ end }} diff --git a/layouts/shortcodes/youtube-embed.html b/layouts/shortcodes/youtube-embed.html index 0eba6c1415..baf6682055 100644 --- a/layouts/shortcodes/youtube-embed.html +++ b/layouts/shortcodes/youtube-embed.html @@ -1,4 +1,4 @@ -
+
{{ if page.Scratch.Get "youtube-embed" | default "incomplete" | ne "setup" }} {{ page.Scratch.Set "youtube-embed" "setup" }} -{{ end }} \ No newline at end of file +{{ end }} From 9f8eca227606a9c42df165bdaced3af58a59a8b2 Mon Sep 17 00:00:00 2001 From: David Karlsson <35727626+dvdksn@users.noreply.github.com> Date: Thu, 27 Jun 2024 16:34:26 +0200 Subject: [PATCH 2/3] feat: add stepper graphic for article series Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com> --- layouts/_default/single.html | 3 +++ layouts/partials/guides-stepper.html | 30 ++++++++++++++++++++++++++++ 2 files changed, 33 insertions(+) create mode 100644 layouts/partials/guides-stepper.html diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 8de8e490dd..7805db93e0 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -8,6 +8,9 @@ {{ with .Title }}

{{ . }}

{{ end }} + {{ if eq .CurrentSection.Layout "series" }} + {{ partial "guides-stepper.html" . }} + {{ end }}
{{ partial "pagemeta.html" . }}
diff --git a/layouts/partials/guides-stepper.html b/layouts/partials/guides-stepper.html new file mode 100644 index 0000000000..b81b70ddd4 --- /dev/null +++ b/layouts/partials/guides-stepper.html @@ -0,0 +1,30 @@ +{{ if or .NextInSection .PrevInSection }} + + SERIES + {{ .CurrentSection.Title }} + +
+ {{ page.Store.Set "stepper_seen" false }} + {{ range $i, $e := .CurrentSection.Pages }} + {{ if $i }} + {{ if (page.Store.Get "stepper_seen") }} +
+ {{ else }} +
+ {{ end }} + {{ end }} + + {{ add $i 1 }} + {{ end }} +
+{{ end }} From f38f4f067c4e6a00c85863a7937fc96d4f93315e Mon Sep 17 00:00:00 2001 From: David Karlsson <35727626+dvdksn@users.noreply.github.com> Date: Mon, 1 Jul 2024 12:12:03 +0200 Subject: [PATCH 3/3] chore: regen hugo_stats.json Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com> --- hugo_stats.json | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/hugo_stats.json b/hugo_stats.json index d137d24714..ff49fd85ec 100644 --- a/hugo_stats.json +++ b/hugo_stats.json @@ -84,6 +84,7 @@ "Python", "RHEL-8", "RHEL-9", + "RHEL-CentOS-or-Fedora", "Raw", "React", "Regular-install", @@ -133,17 +134,18 @@ "bg-background-light", "bg-black/70", "bg-blue-light", + "bg-blue-light-400", "bg-blue-light-500", "bg-cover", "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-gray-light-400", "bg-green-light", + "bg-green-light-400", "bg-pattern-blue", "bg-pattern-purple", "bg-pattern-verde", @@ -154,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", @@ -173,6 +178,7 @@ "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", @@ -180,10 +186,13 @@ "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", @@ -227,6 +236,7 @@ "flex-auto", "flex-col", "flex-col-reverse", + "flex-grow", "flex-wrap", "focus:outline-blue-light", "font-medium", @@ -236,6 +246,7 @@ "from-accent-light", "from-background-light", "from-blue-light-400", + "gap-1", "gap-10", "gap-12", "gap-2", @@ -306,6 +317,7 @@ "lntable", "lntd", "m-2", + "m-4", "m-auto", "macOS", "max-h-[80vh]", @@ -328,6 +340,7 @@ "md:h-[334px]", "md:hidden", "md:max-w-[66%]", + "md:px-20", "md:scale-100", "min-h-0", "min-h-screen", @@ -343,6 +356,7 @@ "my-0", "my-2", "my-4", + "my-8", "no-underline", "no-wrap", "not-prose", @@ -380,6 +394,7 @@ "px-2", "px-3", "px-4", + "px-8", "py-1", "py-12", "py-2", @@ -396,7 +411,9 @@ "rounded-[6px]", "rounded-b-lg", "rounded-full", + "rounded-l", "rounded-lg", + "rounded-r", "rounded-sm", "scale-50", "scale-75", @@ -405,6 +422,7 @@ "self-center", "shadow", "sidebar-hover", + "sm:flex-row", "space-x-2", "space-y-4", "sticky", @@ -415,6 +433,7 @@ "text-base", "text-black", "text-blue-light", + "text-center", "text-divider-light", "text-gray-light", "text-gray-light-300",