Skip to content

Commit d95336d

Browse files
dvdksndvdksn
authored
Merge pull request docker#25178 from dvdksn/mermaid-codeblock-hook
layouts: render mermaid code blocks as diagrams
2 parents 2ea4a02 + f425f09 commit d95336d

7 files changed

Lines changed: 1045 additions & 65 deletions

File tree

‎assets/js/mermaid.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import mermaid from 'mermaid'
2+
3+
const isDark = () => document.documentElement.classList.contains('dark')
4+
5+
mermaid.initialize({
6+
startOnLoad: false,
7+
securityLevel: 'strict',
8+
theme: isDark() ? 'dark' : 'default',
9+
})
10+
11+
const render = () => {
12+
mermaid.run({ querySelector: 'pre.mermaid' })
13+
}
14+
15+
if (document.readyState === 'loading') {
16+
document.addEventListener('DOMContentLoaded', render)
17+
} else {
18+
render()
19+
}

‎content/get-started/docker-concepts/the-basics/what-is-a-registry.md‎

Lines changed: 55 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,20 @@ weight: 30
44
keywords: concepts, build, images, container, docker desktop
55
description: What is a registry? This Docker Concept will explain what a registry is, explore their interoperability, and have you interact with registries.
66
aliases:
7-
- /guides/walkthroughs/run-hub-images/
8-
- /guides/walkthroughs/publish-your-image/
9-
- /guides/docker-concepts/the-basics/what-is-a-registry/
7+
- /guides/walkthroughs/run-hub-images/
8+
- /guides/walkthroughs/publish-your-image/
9+
- /guides/docker-concepts/the-basics/what-is-a-registry/
1010
---
1111

1212
{{< youtube-embed 2WDl10Wv5rs >}}
1313

1414
## Explanation
1515

16-
Now that you know what a container image is and how it works, you might wonder - where do you store these images?
16+
Now that you know what a container image is and how it works, you might wonder - where do you store these images?
1717

1818
Well, you can store your container images on your computer system, but what if you want to share them with your friends or use them on another machine? That's where the image registry comes in.
1919

20-
An image registry is a centralized location for storing and sharing your container images. It can be either public or private. [Docker Hub](https://hub.docker.com) is a public registry that anyone can use and is the default registry.
20+
An image registry is a centralized location for storing and sharing your container images. It can be either public or private. [Docker Hub](https://hub.docker.com) is a public registry that anyone can use and is the default registry.
2121

2222
While Docker Hub is a popular option, there are many other available container registries available today, including [Amazon Elastic Container Registry (ECR)](https://aws.amazon.com/ecr/), [Azure Container Registry (ACR)](https://azure.microsoft.com/en-in/products/container-registry), and [Google Container Registry (GCR)](https://cloud.google.com/artifact-registry). You can even run your private registry on your local system or inside your organization. For example, Harbor, JFrog Artifactory, GitLab Container registry etc.
2323

@@ -29,32 +29,24 @@ A _registry_ is a centralized location that stores and manages container images,
2929

3030
The following diagram shows the relationship between a registry, repositories, and images.
3131

32-
```goat {class="text-sm"}
33-
+---------------------------------------+
34-
| Registry |
35-
|---------------------------------------|
36-
| |
37-
| +-----------------------------+ |
38-
| | Repository A | |
39-
| |-----------------------------| |
40-
| | Image: project-a:v1.0 | |
41-
| | Image: project-a:v2.0 | |
42-
| +-----------------------------+ |
43-
| |
44-
| +-----------------------------+ |
45-
| | Repository B | |
46-
| |-----------------------------| |
47-
| | Image: project-b:v1.0 | |
48-
| | Image: project-b:v1.1 | |
49-
| | Image: project-b:v2.0 | |
50-
| +-----------------------------+ |
51-
| |
52-
+---------------------------------------+
32+
```mermaid
33+
flowchart TB
34+
subgraph Registry
35+
subgraph A["Repository A"]
36+
A1["project-a:v1.0"]
37+
A2["project-a:v2.0"]
38+
end
39+
subgraph B["Repository B"]
40+
B1["project-b:v1.0"]
41+
B2["project-b:v1.1"]
42+
B3["project-b:v2.0"]
43+
end
44+
end
5345
```
5446

5547
> [!TIP]
5648
>
57-
>A Docker Personal plan gives you one private repository and unlimited public repositories. To get unlimited private repositories, upgrade to the [Docker Team plan](https://www.docker.com/pricing?ref=Docs&refAction=DocsConceptsRegistry).
49+
> A Docker Personal plan gives you one private repository and unlimited public repositories. To get unlimited private repositories, upgrade to the [Docker Team plan](https://www.docker.com/pricing?ref=Docs&refAction=DocsConceptsRegistry).
5850
5951
## Try it out
6052

@@ -64,19 +56,19 @@ In this hands-on, you will learn how to build and push a Docker image to the Doc
6456

6557
1. If you haven't created one yet, head over to the [Docker Hub](https://hub.docker.com) page to sign up for a new Docker account. Be sure to finish the verification steps sent to your email.
6658

67-
![Screenshot of the official Docker Hub page showing the Sign up page](images/dockerhub-signup.webp?border)
59+
![Screenshot of the official Docker Hub page showing the Sign up page](images/dockerhub-signup.webp?border)
6860

69-
You can use your Google or GitHub account to authenticate.
61+
You can use your Google or GitHub account to authenticate.
7062

7163
### Create your first repository
7264

7365
1. Sign in to [Docker Hub](https://hub.docker.com).
7466
2. Select the **Create repository** button in the top-right corner.
7567
3. Select your namespace (most likely your username) and enter `docker-quickstart` as the repository name.
7668

77-
![Screenshot of the Docker Hub page that shows how to create a public repository](images/create-hub-repository.webp?border)
69+
![Screenshot of the Docker Hub page that shows how to create a public repository](images/create-hub-repository.webp?border)
7870

79-
4. Set the visibility to **Public**.
71+
4. Set the visibility to **Public**.
8072
5. Select the **Create** button to create the repository.
8173

8274
That's it. You've successfully created your first repository. 🎉
@@ -96,62 +88,62 @@ Don't worry about the specifics of the Dockerfile, as you'll learn about that in
9688

9789
1. Clone the GitHub repository using the following command:
9890

99-
```console
100-
git clone https://github.com/dockersamples/helloworld-demo-node
101-
```
91+
```console
92+
git clone https://github.com/dockersamples/helloworld-demo-node
93+
```
10294

10395
2. Navigate into the newly created directory.
10496

105-
```console
106-
cd helloworld-demo-node
107-
```
97+
```console
98+
cd helloworld-demo-node
99+
```
108100

109101
3. Run the following command to build a Docker image, swapping out `YOUR_DOCKER_USERNAME` with your username.
110102

111-
```console
112-
docker build -t <YOUR_DOCKER_USERNAME>/docker-quickstart .
113-
```
103+
```console
104+
docker build -t <YOUR_DOCKER_USERNAME>/docker-quickstart .
105+
```
114106

115-
> [!NOTE]
116-
>
117-
> Make sure you include the dot (.) at the end of the `docker build` command. This tells Docker where to find the Dockerfile.
107+
> [!NOTE]
108+
>
109+
> Make sure you include the dot (.) at the end of the `docker build` command. This tells Docker where to find the Dockerfile.
118110
119111
4. Run the following command to list the newly created Docker image:
120112

121-
```console
122-
docker images
123-
```
113+
```console
114+
docker images
115+
```
124116

125-
You will see output like the following:
117+
You will see output like the following:
126118

127-
```console
128-
REPOSITORY TAG IMAGE ID CREATED SIZE
129-
<YOUR_DOCKER_USERNAME>/docker-quickstart latest 476de364f70e 2 minutes ago 170MB
130-
```
119+
```console
120+
REPOSITORY TAG IMAGE ID CREATED SIZE
121+
<YOUR_DOCKER_USERNAME>/docker-quickstart latest 476de364f70e 2 minutes ago 170MB
122+
```
131123

132124
5. Start a container to test the image by running the following command (swap out the username with your own username):
133125

134-
```console
135-
docker run -d -p 8080:8080 <YOUR_DOCKER_USERNAME>/docker-quickstart
136-
```
126+
```console
127+
docker run -d -p 8080:8080 <YOUR_DOCKER_USERNAME>/docker-quickstart
128+
```
137129

138-
You can verify if the container is working by visiting [http://localhost:8080](http://localhost:8080) with your browser.
130+
You can verify if the container is working by visiting [http://localhost:8080](http://localhost:8080) with your browser.
139131

140-
6. Use the [`docker tag`](/reference/cli/docker/image/tag/) command to tag the Docker image. Docker tags allow you to label and version your images.
132+
6. Use the [`docker tag`](/reference/cli/docker/image/tag/) command to tag the Docker image. Docker tags allow you to label and version your images.
141133

142-
```console
143-
docker tag <YOUR_DOCKER_USERNAME>/docker-quickstart <YOUR_DOCKER_USERNAME>/docker-quickstart:1.0
144-
```
134+
```console
135+
docker tag <YOUR_DOCKER_USERNAME>/docker-quickstart <YOUR_DOCKER_USERNAME>/docker-quickstart:1.0
136+
```
145137

146138
7. Finally, it's time to push the newly built image to your Docker Hub repository by using the [`docker push`](/reference/cli/docker/image/push/) command:
147139

148-
```console
149-
docker push <YOUR_DOCKER_USERNAME>/docker-quickstart:1.0
150-
```
140+
```console
141+
docker push <YOUR_DOCKER_USERNAME>/docker-quickstart:1.0
142+
```
151143

152144
8. Open [Docker Hub](https://hub.docker.com) and navigate to your repository. Navigate to the **Tags** section and see your newly pushed image.
153145

154-
![Screenshot of the Docker Hub page that displays the newly added image tag](images/dockerhub-tags.webp?border=true)
146+
![Screenshot of the Docker Hub page that displays the newly added image tag](images/dockerhub-tags.webp?border=true)
155147

156148
In this walkthrough, you signed up for a Docker account, created your first Docker Hub repository, and built, tagged, and pushed a container image to your Docker Hub repository.
157149

‎layouts/_markup/render-codeblock-mermaid.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{{- .Page.Store.Set "mermaid" true -}}
2+
<pre
3+
class="mermaid not-prose my-4 flex justify-center bg-transparent"
4+
data-pagefind-ignore
5+
>{{- .Inner -}}</pre>

‎layouts/_partials/mermaid-script.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{{ $mermaid := resources.Get "js/mermaid.js"
2+
| js.Build (dict "minify" true "targetPath" "mermaid.js")
3+
}}
4+
<script defer src="{{ $mermaid.Permalink }}"></script>

‎layouts/baseof.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,5 +95,9 @@
9595
{{ with .Store.Get "youtube" }}
9696
{{ partialCached "youtube-script.html" "-" "-" }}
9797
{{ end }}
98+
{{/* Load mermaid if the page contains a mermaid code block */}}
99+
{{ with .Store.Get "mermaid" }}
100+
{{ partialCached "mermaid-script.html" "-" "-" }}
101+
{{ end }}
98102
</body>
99103
</html>

0 commit comments

Comments
 (0)