mirror/docker-docs
1
0
Fork 0
mirror of https://github.com/docker/docs.git synced 2026-06-19 07:35:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #25178 from dvdksn/mermaid-codeblock-hook

Browse Source 
layouts: render mermaid code blocks as diagrams
This commit is contained in:
David Karlsson
2026-05-27 14:49:57 +02:00
committed by GitHub
parent 2ea4a02305 f425f09df7
commit d95336d485
7 changed files with 1045 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/mermaid.js
+19
View File
@@ -0,0 +1,19 @@
import mermaid from 'mermaid'
const isDark = () => document.documentElement.classList.contains('dark')
mermaid.initialize({
startOnLoad: false,
securityLevel: 'strict',
theme: isDark() ? 'dark' : 'default',
})
const render = () => {
mermaid.run({ querySelector: 'pre.mermaid' })
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', render)
} else {
render()
}
content/get-started/docker-concepts/the-basics/what-is-a-registry.md
+55 -63
View File
@@ -4,20 +4,20 @@ weight: 30
keywords: concepts, build, images, container, docker desktop
description: What is a registry? This Docker Concept will explain what a registry is, explore their interoperability, and have you interact with registries.
aliases:
- /guides/walkthroughs/run-hub-images/
- /guides/walkthroughs/publish-your-image/
- /guides/docker-concepts/the-basics/what-is-a-registry/
- /guides/walkthroughs/run-hub-images/
- /guides/walkthroughs/publish-your-image/
- /guides/docker-concepts/the-basics/what-is-a-registry/
---
{{< youtube-embed 2WDl10Wv5rs >}}
## Explanation
Now that you know what a container image is and how it works, you might wonder - where do you store these images?
Now that you know what a container image is and how it works, you might wonder - where do you store these images?
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.
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.
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.
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.
@@ -29,32 +29,24 @@ A _registry_ is a centralized location that stores and manages container images,
The following diagram shows the relationship between a registry, repositories, and images.
```goat {class="text-sm"}
+---------------------------------------+
| Registry |
|---------------------------------------|
| |
| +-----------------------------+ |
| | Repository A | |
| |-----------------------------| |
| | Image: project-a:v1.0 | |
| | Image: project-a:v2.0 | |
| +-----------------------------+ |
| |
| +-----------------------------+ |
| | Repository B | |
| |-----------------------------| |
| | Image: project-b:v1.0 | |
| | Image: project-b:v1.1 | |
| | Image: project-b:v2.0 | |
| +-----------------------------+ |
| |
+---------------------------------------+
```mermaid
flowchart TB
subgraph Registry
subgraph A["Repository A"]
A1["project-a:v1.0"]
A2["project-a:v2.0"]
end
subgraph B["Repository B"]
B1["project-b:v1.0"]
B2["project-b:v1.1"]
B3["project-b:v2.0"]
end
end
```
> [!TIP]
>
>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).
> 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).
## Try it out
@@ -64,9 +56,9 @@ In this hands-on, you will learn how to build and push a Docker image to the Doc
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.
![Screenshot of the official Docker Hub page showing the Sign up page](images/dockerhub-signup.webp?border)
![Screenshot of the official Docker Hub page showing the Sign up page](images/dockerhub-signup.webp?border)
You can use your Google or GitHub account to authenticate.
You can use your Google or GitHub account to authenticate.
### Create your first repository
@@ -74,9 +66,9 @@ In this hands-on, you will learn how to build and push a Docker image to the Doc
2. Select the **Create repository** button in the top-right corner.
3. Select your namespace (most likely your username) and enter `docker-quickstart` as the repository name.
![Screenshot of the Docker Hub page that shows how to create a public repository](images/create-hub-repository.webp?border)
![Screenshot of the Docker Hub page that shows how to create a public repository](images/create-hub-repository.webp?border)
4. Set the visibility to **Public**.
4. Set the visibility to **Public**.
5. Select the **Create** button to create the repository.
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
1. Clone the GitHub repository using the following command:
```console
git clone https://github.com/dockersamples/helloworld-demo-node
```
```console
git clone https://github.com/dockersamples/helloworld-demo-node
```
2. Navigate into the newly created directory.
```console
cd helloworld-demo-node
```
```console
cd helloworld-demo-node
```
3. Run the following command to build a Docker image, swapping out `YOUR_DOCKER_USERNAME` with your username.
```console
docker build -t <YOUR_DOCKER_USERNAME>/docker-quickstart .
```
```console
docker build -t <YOUR_DOCKER_USERNAME>/docker-quickstart .
```
> [!NOTE]
>
> Make sure you include the dot (.) at the end of the `docker build` command. This tells Docker where to find the Dockerfile.
> [!NOTE]
>
> Make sure you include the dot (.) at the end of the `docker build` command. This tells Docker where to find the Dockerfile.
4. Run the following command to list the newly created Docker image:
```console
docker images
```
```console
docker images
```
You will see output like the following:
You will see output like the following:
```console
REPOSITORY TAG IMAGE ID CREATED SIZE
<YOUR_DOCKER_USERNAME>/docker-quickstart latest 476de364f70e 2 minutes ago 170MB
```
```console
REPOSITORY TAG IMAGE ID CREATED SIZE
<YOUR_DOCKER_USERNAME>/docker-quickstart latest 476de364f70e 2 minutes ago 170MB
```
5. Start a container to test the image by running the following command (swap out the username with your own username):
```console
docker run -d -p 8080:8080 <YOUR_DOCKER_USERNAME>/docker-quickstart
```
```console
docker run -d -p 8080:8080 <YOUR_DOCKER_USERNAME>/docker-quickstart
```
You can verify if the container is working by visiting [http://localhost:8080](http://localhost:8080) with your browser.
You can verify if the container is working by visiting [http://localhost:8080](http://localhost:8080) with your browser.
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.
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.
```console
docker tag <YOUR_DOCKER_USERNAME>/docker-quickstart <YOUR_DOCKER_USERNAME>/docker-quickstart:1.0
```
```console
docker tag <YOUR_DOCKER_USERNAME>/docker-quickstart <YOUR_DOCKER_USERNAME>/docker-quickstart:1.0
```
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:
```console
docker push <YOUR_DOCKER_USERNAME>/docker-quickstart:1.0
```
```console
docker push <YOUR_DOCKER_USERNAME>/docker-quickstart:1.0
```
8. Open [Docker Hub](https://hub.docker.com) and navigate to your repository. Navigate to the **Tags** section and see your newly pushed image.
![Screenshot of the Docker Hub page that displays the newly added image tag](images/dockerhub-tags.webp?border=true)
![Screenshot of the Docker Hub page that displays the newly added image tag](images/dockerhub-tags.webp?border=true)
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.
layouts/_markup/render-codeblock-mermaid.html
+5
View File
@@ -0,0 +1,5 @@
{{- .Page.Store.Set "mermaid" true -}}
<pre
class="mermaid not-prose my-4 flex justify-center bg-transparent"
data-pagefind-ignore
>{{- .Inner -}}</pre>
layouts/_partials/mermaid-script.html
+4
View File
@@ -0,0 +1,4 @@
{{ $mermaid := resources.Get "js/mermaid.js"
| js.Build (dict "minify" true "targetPath" "mermaid.js")
}}
<script defer src="{{ $mermaid.Permalink }}"></script>
layouts/baseof.html
+4
View File
@@ -95,5 +95,9 @@
{{ with .Store.Get "youtube" }}
{{ partialCached "youtube-script.html" "-" "-" }}
{{ end }}
{{/* Load mermaid if the page contains a mermaid code block */}}
{{ with .Store.Get "mermaid" }}
{{ partialCached "mermaid-script.html" "-" "-" }}
{{ end }}
</body>
</html>
package-lock.json
Generated
+957 -2
View File
File diff suppressed because it is too large Load Diff
package.json
+1
View File
@@ -25,6 +25,7 @@
"heroicons": "2.2.0",
"highlight.js": "11.11.1",
"marked": "17.0.4",
"mermaid": "11.15.0",
"tailwindcss": "4.2.1"
},
"devDependencies": {