From 2a1fd8eb23ba12e759a925624b041737acacd2da Mon Sep 17 00:00:00 2001 From: Allie Sadler <102604716+aevesdocker@users.noreply.github.com> Date: Mon, 7 Nov 2022 15:56:38 +0000 Subject: [PATCH] style guide alignments (#16111) * style guide alignments * fix * Update desktop/extensions-sdk/quickstart.md Co-authored-by: David Karlsson <35727626+dvdksn@users.noreply.github.com> * Update desktop/extensions-sdk/build/build-install.md Co-authored-by: David Karlsson <35727626+dvdksn@users.noreply.github.com> * Update desktop/extensions-sdk/build/test-debug.md Co-authored-by: David Karlsson <35727626+dvdksn@users.noreply.github.com> * Update desktop/extensions-sdk/build/test-debug.md Co-authored-by: David Karlsson <35727626+dvdksn@users.noreply.github.com> * Update desktop/extensions-sdk/build/test-debug.md Co-authored-by: David Karlsson <35727626+dvdksn@users.noreply.github.com> * Update desktop/extensions-sdk/quickstart.md Co-authored-by: David Karlsson <35727626+dvdksn@users.noreply.github.com> * Update desktop/extensions-sdk/quickstart.md Co-authored-by: David Karlsson <35727626+dvdksn@users.noreply.github.com> Co-authored-by: David Karlsson <35727626+dvdksn@users.noreply.github.com> --- _includes/desktop-linux-launch.md | 4 +-- desktop/containerd/index.md | 20 ++++++------- desktop/dev-environments/create-dev-env.md | 4 +-- desktop/dev-environments/dev-cli.md | 2 +- desktop/dev-environments/index.md | 4 +-- desktop/dev-environments/set-up.md | 4 +-- desktop/dev-environments/share.md | 2 +- desktop/extensions-sdk/build/build-install.md | 22 +++++++++++---- .../build/set-up/minimal-backend-extension.md | 4 +-- .../set-up/minimal-frontend-extension.md | 2 +- .../minimal-frontend-using-docker-cli.md | 2 +- .../build/set-up/react-extension.md | 2 +- desktop/extensions-sdk/build/test-debug.md | 28 +++++++++++++------ .../design/design-guidelines.md | 4 +-- .../design/mui-best-practices.md | 8 +++--- desktop/extensions-sdk/design/overview.md | 8 +++--- desktop/extensions-sdk/dev/kubernetes.md | 4 +-- desktop/extensions-sdk/extensions/index.md | 2 +- desktop/extensions-sdk/index.md | 8 +++--- desktop/extensions-sdk/quickstart.md | 25 +++++++++++------ desktop/extensions/index.md | 2 +- desktop/extensions/marketplace.md | 2 +- desktop/extensions/non-marketplace.md | 2 +- desktop/faqs/general.md | 2 +- desktop/faqs/macfaqs.md | 2 +- desktop/faqs/windowsfaqs.md | 10 +++---- desktop/get-started.md | 4 +-- .../enhanced-container-isolation/faq.md | 2 +- .../features-benefits.md | 4 +-- .../how-eci-works.md | 2 +- .../registry-access-management.md | 2 +- desktop/index.md | 4 +-- desktop/install/archlinux.md | 4 +-- desktop/install/debian.md | 4 +-- desktop/install/fedora.md | 4 +-- desktop/install/linux-install.md | 8 +++--- desktop/install/mac-install.md | 8 +++--- desktop/install/ubuntu.md | 2 +- desktop/install/windows-install.md | 20 ++++++------- desktop/kubernetes.md | 2 +- desktop/mac/permission-requirements.md | 8 +++--- desktop/networking.md | 2 +- desktop/settings/linux.md | 4 +-- desktop/settings/mac.md | 2 +- desktop/settings/windows.md | 4 +-- desktop/troubleshoot/known-issues.md | 18 ++++++------ desktop/troubleshoot/overview.md | 10 +++---- desktop/troubleshoot/topics.md | 20 ++++++------- desktop/troubleshoot/workarounds.md | 2 +- desktop/uninstall.md | 2 +- desktop/use-desktop/container.md | 4 +-- desktop/use-desktop/images.md | 16 +++++------ desktop/use-desktop/index.md | 10 ++++--- desktop/use-desktop/pause.md | 2 +- desktop/use-desktop/volumes.md | 6 ++-- desktop/vm-vdi.md | 8 +++--- desktop/wasm/index.md | 22 +++++++-------- desktop/windows/wsl.md | 8 +++--- 58 files changed, 210 insertions(+), 187 deletions(-) diff --git a/_includes/desktop-linux-launch.md b/_includes/desktop-linux-launch.md index ad127cfca2..4a40bc4a4c 100644 --- a/_includes/desktop-linux-launch.md +++ b/_includes/desktop-linux-launch.md @@ -1,7 +1,7 @@ To start Docker Desktop for Linux, search **Docker Desktop** on the -**Applications** menu and open it. This launches the whale menu icon and opens +**Applications** menu and open it. This launches the Docker menu icon and opens the Docker Dashboard, reporting the status of Docker Desktop. Alternatively, open a terminal and run: @@ -49,7 +49,7 @@ Alternatively, open a terminal and run: $ systemctl --user enable docker-desktop ``` -To stop Docker Desktop, click on the whale menu tray icon to open the Docker menu and select **Quit Docker Desktop**. +To stop Docker Desktop, select the Docker menu icon to open the Docker menu and select **Quit Docker Desktop**. Alternatively, open a terminal and run: diff --git a/desktop/containerd/index.md b/desktop/containerd/index.md index e4de44f70a..510d9951bc 100644 --- a/desktop/containerd/index.md +++ b/desktop/containerd/index.md @@ -29,7 +29,7 @@ To disable this feature, clear the **Use containerd for pulling and storing imag ### Show server and storage driver version -``` +```console $ docker info Client: Context: default @@ -93,9 +93,8 @@ Server: ### Run a simple container -``` +```console $ docker run --rm hello-world - Unable to find image 'hello-world:latest' locally 7d246653d051: Download complete 432f982638b3: Download complete @@ -112,7 +111,7 @@ This message shows that your installation appears to be working correctly. Run the container specifying port settings: -``` +```console $ docker run -p 8080:80 -d nginx Unable to find image 'nginx:latest' locally @@ -131,7 +130,7 @@ fd61d71c75fe: Download complete Confirm the NGINX container is running: -``` +```console $ docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 93b4d60dfd08 nginx "/docker-entrypoint.…" 3 seconds ago Up 3 seconds 0.0.0.0:8080->80/tcp stoic_mccarthy @@ -145,18 +144,15 @@ You can also check from the browser that NGINX is running: Sample Dockerfile: -``` - +```dockerfile FROM alpine ENTRYPOINT ["echo", "hello friends"] - ``` Build a multi-platform image: -``` - +```console $ docker buildx build --platform linux/amd64,linux/arm64 -t /hello-friends . [+] Building 0.7s (7/7) FINISHED @@ -184,13 +180,13 @@ FINISHED ``` Run multi-platform image: -``` +```console $ docker run /hello-friends ``` Push a multi-platform image: -``` +```console $ docker push /hello-friends Using default tag: latest f1edbf6b99d2: Pushed diff --git a/desktop/dev-environments/create-dev-env.md b/desktop/dev-environments/create-dev-env.md index a05e0bd9a5..a4d7c0bdf9 100644 --- a/desktop/dev-environments/create-dev-env.md +++ b/desktop/dev-environments/create-dev-env.md @@ -1,6 +1,6 @@ --- description: Dev Environments -keywords: Dev Environments, share, collaborate, local +keywords: Dev Environments, share, Docker Desktop, Compose, launch title: Launch a dev environment redirect_from: - /desktop/dev-environments/create-compose-dev-env/ @@ -98,7 +98,7 @@ Docker then clones the repository with your specified branch or tag. >Note > ->Currently, Dev Environments is not able to detect the main language of the subdirectory. You need to define your own base image or services in a `compose-dev.yaml`file located in your subdirectory. For more information on how to configure, see the [React application with a Spring backend and a MySQL database sample](https://github.com/docker/awesome-compose/tree/master/react-java-mysql) or the [Go server with an Nginx proxy and a Postgres database sample](https://github.com/docker/awesome-compose/tree/master/nginx-golang-postgres). +>Currently, Dev Environments is not able to detect the main language of the subdirectory. You need to define your own base image or services in a `compose-dev.yaml`file located in your subdirectory. For more information on how to configure, see the [React application with a Spring backend and a MySQL database sample](https://github.com/docker/awesome-compose/tree/master/react-java-mysql){:target="_blank" rel="noopener" class="_"} or the [Go server with an Nginx proxy and a Postgres database sample](https://github.com/docker/awesome-compose/tree/master/nginx-golang-postgres){:target="_blank" rel="noopener" class="_"}. 1. From **Dev Environments** in Docker Dashboard, select **Create**. The **Create a Dev Environment** dialog displays. 2. Select **Get Started** and then copy your Git subfolder link into the **Enter the Git Repository** field with **Existing Git repo** as the source. diff --git a/desktop/dev-environments/dev-cli.md b/desktop/dev-environments/dev-cli.md index 9ef5d0c691..f2b53cace0 100644 --- a/desktop/dev-environments/dev-cli.md +++ b/desktop/dev-environments/dev-cli.md @@ -1,6 +1,6 @@ --- description: Set up a dev Environments -keywords: Dev Environments, share, collaborate, local, set up +keywords: Dev Environments, share, docker dev, Docker Desktop title: Use the docker dev CLI plugin --- diff --git a/desktop/dev-environments/index.md b/desktop/dev-environments/index.md index 9d88e9babf..a04c374b0d 100644 --- a/desktop/dev-environments/index.md +++ b/desktop/dev-environments/index.md @@ -1,6 +1,6 @@ --- description: Dev Environments -keywords: Dev Environments, share, collaborate, local +keywords: Dev Environments, share, local, Compose title: Overview --- > **Beta** @@ -26,7 +26,7 @@ Dev Environments is powered by [Docker Compose](/compose/). This allows Dev Envi Every dev environment you want to run needs a `compose-dev.yaml` file which configures your application's services and lives in your project directory. You don't need to be an expert in Docker Compose or write a `compose-dev.yaml` file from scratch as Dev Environments creates a starter `compose-dev.yaml` files based on the main language in your project. -You can also use the many [sample dev environments](https://github.com/docker/awesome-compose) as a starting point for how to integrate different services. Alternatively, see [Set up a dev environment](set-up.md) for more information. +You can also use the many [sample dev environments](https://github.com/docker/awesome-compose){:target="_blank" rel="noopener" class="_"} as a starting point for how to integrate different services. Alternatively, see [Set up a dev environment](set-up.md) for more information. ## What's next? diff --git a/desktop/dev-environments/set-up.md b/desktop/dev-environments/set-up.md index f650ae7f89..9c6f009332 100644 --- a/desktop/dev-environments/set-up.md +++ b/desktop/dev-environments/set-up.md @@ -1,11 +1,9 @@ --- description: Set up a dev Environments -keywords: Dev Environments, share, collaborate, local, set up +keywords: Dev Environments, share, set up, Compose, Docker Desktop title: Set up a dev environment --- -## Set up your own dev environment - >**Changes to Dev Environments with Docker Desktop 4.13** > >Docker has simplified how you configure your dev environment project. All you need to get started is a `compose-dev.yaml` file. If you have an existing project with a `.docker/` folder this is automatically migrated the next time you launch. diff --git a/desktop/dev-environments/share.md b/desktop/dev-environments/share.md index 696a61e1a9..b04b423c00 100644 --- a/desktop/dev-environments/share.md +++ b/desktop/dev-environments/share.md @@ -1,6 +1,6 @@ --- description: Dev Environments -keywords: Dev Environments, share, collaborate, local, share +keywords: Dev Environments, share, Docker Desktop title: Distribute your dev environment --- diff --git a/desktop/extensions-sdk/build/build-install.md b/desktop/extensions-sdk/build/build-install.md index 6e4743df6d..2a4bc365cb 100644 --- a/desktop/extensions-sdk/build/build-install.md +++ b/desktop/extensions-sdk/build/build-install.md @@ -13,7 +13,9 @@ Once you have set up your directory correctly, you can build your extension for To build the extension, run: -`docker build -t .` +```console +$ docker build -t . +``` ## Validate your extension @@ -23,23 +25,31 @@ The validation checks if the extension’s `Dockerfile` specifies all the requir To validate, run: -`docker extension validate ` +```console +$ docker extension validate +``` If your extension is valid, the message below displays: -`The extension image "name-of-your-extension" is valid`. +```console +The extension image "name-of-your-extension" is valid +``` Before the image is built, it is also possible to validate only the metadata.json file: -`$ docker extension validate /path/to/metadata.json` +```console +$ docker extension validate /path/to/metadata.json +``` -The JSON schema used to validate the `metadata.json` file against can be found under the [releases page](https://github.com/docker/extensions-sdk/releases/latest). +The JSON schema used to validate the `metadata.json` file against can be found under the [releases page](https://github.com/docker/extensions-sdk/releases/latest){:target="_blank" rel="noopener" class="_"}. ## Install the extension To install the extension in Docker Desktop, run: -`docker extension install ` +```console +$ docker extension install +``` > Note > diff --git a/desktop/extensions-sdk/build/set-up/minimal-backend-extension.md b/desktop/extensions-sdk/build/set-up/minimal-backend-extension.md index c5c9111bad..2361ed4aad 100644 --- a/desktop/extensions-sdk/build/set-up/minimal-backend-extension.md +++ b/desktop/extensions-sdk/build/set-up/minimal-backend-extension.md @@ -8,7 +8,7 @@ redirect_from: To start creating your extension, you first need a directory with files which range from the extension’s source code to the required extension-specific files. This page provides information on how to set up a simple Docker Extension that runs CLI commands in the backend. -For extensions with a backend service running REST services over sockets or named pipes, see the `vm-ui extension` [sample](https://github.com/docker/extensions-sdk/tree/main/samples). +For extensions with a backend service running REST services over sockets or named pipes, see the `vm-ui extension` [sample](https://github.com/docker/extensions-sdk/tree/main/samples){:target="_blank" rel="noopener" class="_"}. > Note > @@ -20,7 +20,7 @@ For extensions with a backend service running REST services over sockets or name ## Extension folder structure -In the `minimal-backend` [sample folder](https://github.com/docker/extensions-sdk/tree/main/samples), you can find a ready-to-go example that represents a UI extension built on HTML that runs a backend service. We will go through this code example in this tutorial. +In the `minimal-backend` [sample folder](https://github.com/docker/extensions-sdk/tree/main/samples){:target="_blank" rel="noopener" class="_"}, you can find a ready-to-go example that represents a UI extension built on HTML that runs a backend service. We will go through this code example in this tutorial. Although you can start from an empty directory, it is highly recommended that you start from the template below and change it accordingly to suit your needs. diff --git a/desktop/extensions-sdk/build/set-up/minimal-frontend-extension.md b/desktop/extensions-sdk/build/set-up/minimal-frontend-extension.md index 0996596b43..ee070a61ed 100644 --- a/desktop/extensions-sdk/build/set-up/minimal-frontend-extension.md +++ b/desktop/extensions-sdk/build/set-up/minimal-frontend-extension.md @@ -18,7 +18,7 @@ To start creating your extension, you first need a directory with files which ra ## Extension folder structure -In the `minimal-frontend` [sample folder](https://github.com/docker/extensions-sdk/tree/main/samples), you can find a ready-to-go example that represents a UI Extension built on HTML. We will go through this code example in this tutorial. +In the `minimal-frontend` [sample folder](https://github.com/docker/extensions-sdk/tree/main/samples){:target="_blank" rel="noopener" class="_"}, you can find a ready-to-go example that represents a UI Extension built on HTML. We will go through this code example in this tutorial. Although you can start from an empty directory, it is highly recommended that you start from the template below and change it accordingly to suit your needs. diff --git a/desktop/extensions-sdk/build/set-up/minimal-frontend-using-docker-cli.md b/desktop/extensions-sdk/build/set-up/minimal-frontend-using-docker-cli.md index 612e6df4c0..805709493b 100644 --- a/desktop/extensions-sdk/build/set-up/minimal-frontend-using-docker-cli.md +++ b/desktop/extensions-sdk/build/set-up/minimal-frontend-using-docker-cli.md @@ -18,7 +18,7 @@ To start creating your extension, you first need a directory with files which ra ## Extension folder structure -In the `minimal-docker-cli` [sample folder](https://github.com/docker/extensions-sdk/tree/main/samples), you can find a ready-to-go example that represents a UI Extension invoking Docker commands. We will go through this code example in this tutorial. +In the `minimal-docker-cli` [sample folder](https://github.com/docker/extensions-sdk/tree/main/samples){:target="_blank" rel="noopener" class="_"}, you can find a ready-to-go example that represents a UI Extension invoking Docker commands. We will go through this code example in this tutorial. Although you can start from an empty directory, it is highly recommended that you start from the template below and change it accordingly to suit your needs. diff --git a/desktop/extensions-sdk/build/set-up/react-extension.md b/desktop/extensions-sdk/build/set-up/react-extension.md index ab5d602869..5c60f3f530 100644 --- a/desktop/extensions-sdk/build/set-up/react-extension.md +++ b/desktop/extensions-sdk/build/set-up/react-extension.md @@ -18,7 +18,7 @@ To start creating your extension, you first need a directory with files which ra ## Extension folder structure -In the `react-extension` [sample folder](https://github.com/docker/extensions-sdk/tree/main/samples), you can find a ready-to-go example that represents a UI Extension built on ReactJS. We will go through this code example in this tutorial. +In the `react-extension` [sample folder](https://github.com/docker/extensions-sdk/tree/main/samples){:target="_blank" rel="noopener" class="_"}, you can find a ready-to-go example that represents a UI Extension built on ReactJS. We will go through this code example in this tutorial. Although you can start from an empty directory, it is highly recommended that you start from the template below and change it accordingly to suit your needs. diff --git a/desktop/extensions-sdk/build/test-debug.md b/desktop/extensions-sdk/build/test-debug.md index e0dc9013cd..440352993f 100644 --- a/desktop/extensions-sdk/build/test-debug.md +++ b/desktop/extensions-sdk/build/test-debug.md @@ -19,13 +19,17 @@ The example below shows the [`Min FrontEnd Extension`](set-up/minimal-frontend-e In order to open the Chrome DevTools for your extension when you click on the extension tab, run: -`$ docker extension dev debug ` +```console +$ docker extension dev debug +``` Each subsequent click on the extension tab will also open Chrome Dev Tools. To stop this behaviour, run: -`$ docker extension dev reset ` +```console +$ docker extension dev reset +``` -After an extension is deployed, it is also possible to open Chrome DevTools from the UI extension part using a variation of the [Konami Code](https://en.wikipedia.org/wiki/Konami_Code). Click on the extension tab, and then hit the key sequence `up, up, down, down, left, right, left, right, p, d, t`. +After an extension is deployed, it is also possible to open Chrome DevTools from the UI extension part using a variation of the [Konami Code](https://en.wikipedia.org/wiki/Konami_Code){:target="_blank" rel="noopener" class="_"}. Click on the extension tab, and then hit the key sequence `up, up, down, down, left, right, left, right, p, d, t`. ### Hot reloading whilst developing the UI @@ -33,22 +37,26 @@ During UI development, it’s helpful to use hot reloading to test your changes Assuming your app runs on the default port, start your UI app and then run: -``` -cd ui -npm start +```console +$ cd ui +$ npm start ``` This starts a development server that listens on port 3000. You can now tell Docker Desktop to use this as the frontend source. In another terminal run: -`$ docker extension dev ui-source http://localhost:3000` +```console +$ docker extension dev ui-source http://localhost:3000 +``` Close and reopen the Docker Desktop dashboard and go to your extension. All the changes to the frontend code are immediately visible. Once finished, you can reset the extension configuration to the original settings. This will also reset opening Chrome dev tools if you used `docker extension dev debug `: -`$ docker extension dev reset ` +```console +$ docker extension dev reset +``` ## Show the extension containers @@ -62,7 +70,9 @@ If your extension is composed of one or more services running as containers in t To update the extension, you must first [rebuild and reinstall](build-install.md) your extension. You can then use the update command. -`docker extension update ` +```console +$ docker extension update +``` ## Clean up diff --git a/desktop/extensions-sdk/design/design-guidelines.md b/desktop/extensions-sdk/design/design-guidelines.md index 0ca120c573..d5d2645eaa 100644 --- a/desktop/extensions-sdk/design/design-guidelines.md +++ b/desktop/extensions-sdk/design/design-guidelines.md @@ -14,9 +14,9 @@ Here is a simple checklist to go through when building your extension: ## Build a consistent experience with Docker Desktop. -Use the [Docker Material UI Theme](https://www.npmjs.com/package/@docker/docker-mui-theme) and the [Docker Extensions Styleguide](https://www.figma.com/file/U7pLWfEf6IQKUHLhdateBI/Docker-Design-Guidelines?node-id=1%3A28771) to ensure that your extension feels like it is part of Docker Desktop to create a seamless experience for users. +Use the [Docker Material UI Theme](https://www.npmjs.com/package/@docker/docker-mui-theme){:target="_blank" rel="noopener" class="_"} and the [Docker Extensions Styleguide](https://www.figma.com/file/U7pLWfEf6IQKUHLhdateBI/Docker-Design-Guidelines?node-id=1%3A28771){:target="_blank" rel="noopener" class="_"} to ensure that your extension feels like it is part of Docker Desktop to create a seamless experience for users. -- Ensure the extension has both a light and dark theme. Using the components and styles as per the Docker style guide ensures that your extension meets the [level AA accessibility standard.](https://www.w3.org/WAI/WCAG2AA-Conformance) +- Ensure the extension has both a light and dark theme. Using the components and styles as per the Docker style guide ensures that your extension meets the [level AA accessibility standard.](https://www.w3.org/WAI/WCAG2AA-Conformance){:target="_blank" rel="noopener" class="_"}. ![light and dark mode](images/light_dark_mode.png) diff --git a/desktop/extensions-sdk/design/mui-best-practices.md b/desktop/extensions-sdk/design/mui-best-practices.md index dc20455e64..c2d1c531a1 100644 --- a/desktop/extensions-sdk/design/mui-best-practices.md +++ b/desktop/extensions-sdk/design/mui-best-practices.md @@ -4,7 +4,7 @@ description: Guidelines for using MUI to maximise compatibility with Docker Desk keywords: Docker, extensions, mui, theme, theming, material-ui, material --- -This article assumes you're following our recommended practice by using our [Material UI theme](https://www.npmjs.com/package/@docker/docker-mui-theme). Following the steps below maximises compatibility with Docker Desktop and minimises the work you need to do as an extension author. They should be considered supplementary to the non-MUI-specific guidelines found in the [UI Styling overview](overview.md). +This article assumes you're following our recommended practice by using our [Material UI theme](https://www.npmjs.com/package/@docker/docker-mui-theme){:target="_blank" rel="noopener" class="_"}. Following the steps below maximises compatibility with Docker Desktop and minimises the work you need to do as an extension author. They should be considered supplementary to the non-MUI-specific guidelines found in the [UI Styling overview](overview.md). ## Assume the theme can change at any time @@ -35,11 +35,11 @@ Sometimes you’ll need a piece of UI that doesn’t exist in our design system. If you still decide to build it yourself after contacting us, try and define the new UI in a reuseable fashion. If you define your custom UI in just one place, it’ll make it easier to change in the future if our core theme changes. You could use: -- A new `variant` of an existing component - see [MUI docs](https://mui.com/material-ui/customization/theme-components/#creating-new-component-variants) +- A new `variant` of an existing component - see [MUI docs](https://mui.com/material-ui/customization/theme-components/#creating-new-component-variants){:target="_blank" rel="noopener" class="_"} - A MUI mixin (a freeform bundle of reuseable styling rules defined inside a theme) -- A new [reuseable component](https://mui.com/material-ui/customization/how-to-customize/#2-reusable-component) +- A new [reuseable component](https://mui.com/material-ui/customization/how-to-customize/#2-reusable-component){:target="_blank" rel="noopener" class="_"} -Some of the above options require you to extend our MUI theme. See the MUI documentation on [theme composition](https://mui.com/material-ui/customization/theming/#nesting-the-theme). +Some of the above options require you to extend our MUI theme. See the MUI documentation on [theme composition](https://mui.com/material-ui/customization/theming/#nesting-the-theme){:target="_blank" rel="noopener" class="_"}. ## What's next? diff --git a/desktop/extensions-sdk/design/overview.md b/desktop/extensions-sdk/design/overview.md index 5d2b63a011..1c27150bab 100644 --- a/desktop/extensions-sdk/design/overview.md +++ b/desktop/extensions-sdk/design/overview.md @@ -4,7 +4,7 @@ description: Docker extension design keywords: Docker, extensions, design --- -Our Design System is a constantly evolving set of specifications that aim to ensure visual consistency across Docker products, and meet [level AA accessibility standards](https://www.w3.org/WAI/WCAG2AA-Conformance). We've opened parts of it to extension authors, documenting basic styles (color, typography) and components. See: [Docker Extensions Styleguide](https://www.figma.com/file/U7pLWfEf6IQKUHLhdateBI/Docker-Design-Guidelines?node-id=1%3A28771). +Our Design System is a constantly evolving set of specifications that aim to ensure visual consistency across Docker products, and meet [level AA accessibility standards](https://www.w3.org/WAI/WCAG2AA-Conformance){:target="_blank" rel="noopener" class="_"}. We've opened parts of it to extension authors, documenting basic styles (color, typography) and components. See: [Docker Extensions Styleguide](https://www.figma.com/file/U7pLWfEf6IQKUHLhdateBI/Docker-Design-Guidelines?node-id=1%3A28771){:target="_blank" rel="noopener" class="_"}. We require extensions to match the wider Docker Desktop UI to a certain degree, and reserve the right to make this stricter in the future. @@ -14,9 +14,9 @@ To get started on your UI, follow the steps below. ### Recommended: React+MUI, using our theme -Docker Desktop's UI is written in React and [MUI](https://mui.com/) (using Material UI to specific). This is the only officially supported framework for building extensions, and the one that our `init` command automatically configures for you. Using it brings significant benefits to authors: +Docker Desktop's UI is written in React and [MUI](https://mui.com/){:target="_blank" rel="noopener" class="_"} (using Material UI to specific). This is the only officially supported framework for building extensions, and the one that our `init` command automatically configures for you. Using it brings significant benefits to authors: -- You can use our [Material UI theme](https://www.npmjs.com/package/@docker/docker-mui-theme) to automatically replicate Docker Desktop's look & feel. +- You can use our [Material UI theme](https://www.npmjs.com/package/@docker/docker-mui-theme){:target="_blank" rel="noopener" class="_"} to automatically replicate Docker Desktop's look & feel. - In future, we'll release utilities and components specifically targeting this combination (e.g. custom MUI components, or React hooks for interacting with Docker). Read our [MUI best practices](mui-best-practices.md) guide to learn future-proof ways to use MUI with Docker Desktop. @@ -37,7 +37,7 @@ See our [MUI best practices](mui-best-practices.md) article. ### Only use colors from our palette -With minor exceptions, displaying your logo for example, you should only use colors from our palette. These can be found in our [style guide document](https://www.figma.com/file/U7pLWfEf6IQKUHLhdateBI/Docker-Design-Guidelines?node-id=1%3A28771), and will also soon be available in our MUI theme and via CSS variables. +With minor exceptions, displaying your logo for example, you should only use colors from our palette. These can be found in our [style guide document](https://www.figma.com/file/U7pLWfEf6IQKUHLhdateBI/Docker-Design-Guidelines?node-id=1%3A28771){:target="_blank" rel="noopener" class="_"}, and will also soon be available in our MUI theme and via CSS variables. ### Use counterpart colors in light/dark mode diff --git a/desktop/extensions-sdk/dev/kubernetes.md b/desktop/extensions-sdk/dev/kubernetes.md index 2c67b13854..0f46926c6d 100644 --- a/desktop/extensions-sdk/dev/kubernetes.md +++ b/desktop/extensions-sdk/dev/kubernetes.md @@ -6,7 +6,7 @@ keywords: Docker, Extensions, sdk, Kubernetes Currently, the Extensions SDK does not provide any API methods to directly interact with the Docker Desktop managed Kubernetes cluster or any other created using other tools such as KinD. However, this page provides a way for you to use other SDK APIs to interact indirectly with a Kubernetes cluster from your Docker extension. -To request an API that directly interacts with Docker Desktop-managed Kubernetes, you can upvote [this issue](https://github.com/docker/extensions-sdk/issues/181) in our GitHub repository. +To request an API that directly interacts with Docker Desktop-managed Kubernetes, you can upvote [this issue](https://github.com/docker/extensions-sdk/issues/181){:target="_blank" rel="noopener" class="_"} in our GitHub repository. ## Prerequisites @@ -24,7 +24,7 @@ To find out how to ship the `kubectl` command line tool for multiple platforms a ## Examples -The code snippets below have been put together in the [Kubernetes Sample Extension](https://github.com/docker/extensions-sdk/tree/main/samples/kubernetes-sample-extension). It shows how to interact with a Kubernetes cluster by shipping the `kubectl` commandline tool. +The code snippets below have been put together in the [Kubernetes Sample Extension](https://github.com/docker/extensions-sdk/tree/main/samples/kubernetes-sample-extension){:target="_blank" rel="noopener" class="_"}. It shows how to interact with a Kubernetes cluster by shipping the `kubectl` commandline tool. ### Check the Kubernetes API server is reachable diff --git a/desktop/extensions-sdk/extensions/index.md b/desktop/extensions-sdk/extensions/index.md index 49256533ed..d15c8ac7d0 100644 --- a/desktop/extensions-sdk/extensions/index.md +++ b/desktop/extensions-sdk/extensions/index.md @@ -24,7 +24,7 @@ To publish the extension you need to upload the Docker image to [DockerHub](http > > See [distribution and new releases](DISTRIBUTION.md#distribution-and-new-releases) for more information. > - > See [semver.org](https://semver.org/) to learn more about semantic versioning. + > See [semver.org](https://semver.org/){:target="_blank" rel="noopener" class="_"} to learn more about semantic versioning. 2. Push the image to Docker Hub: diff --git a/desktop/extensions-sdk/index.md b/desktop/extensions-sdk/index.md index 8ce8abde31..989b10c8ba 100644 --- a/desktop/extensions-sdk/index.md +++ b/desktop/extensions-sdk/index.md @@ -46,11 +46,11 @@ This build section provides sample folders with ready-to-go examples that walk y >Note > ->Whilst you're building your extension, make sure you follow our [design](design/design-guidelines.md) and [UI styling](design/overview.md) guidelines to ensure visual consistency and [level AA accessibility standards](https://www.w3.org/WAI/WCAG2AA-Conformance). +>Whilst you're building your extension, make sure you follow our [design](design/design-guidelines.md) and [UI styling](design/overview.md) guidelines to ensure visual consistency and [level AA accessibility standards](https://www.w3.org/WAI/WCAG2AA-Conformance){:target="_blank" rel="noopener" class="_"}. -If your extension requires additional services running in the Docker Desktop VM, see the [VM UI](https://github.com/docker/extensions-sdk/tree/main/samples/vm-service) example. +If your extension requires additional services running in the Docker Desktop VM, see the [VM UI](https://github.com/docker/extensions-sdk/tree/main/samples/vm-service){:target="_blank" rel="noopener" class="_"} example. -For further inspiration, see the other examples in the [samples folder](https://github.com/docker/extensions-sdk/tree/main/samples) +For further inspiration, see the other examples in the [samples folder](https://github.com/docker/extensions-sdk/tree/main/samples){:target="_blank" rel="noopener" class="_"}. ### Part two: Publish and distribute your extension @@ -58,7 +58,7 @@ Docker Desktop displays published extensions in the Extensions Marketplace. The All extensions submitted to the Extension Marketplace are reviewed and approved by our team before listing. This review process ensures a level of trust, security, and quality for developers using Extensions and allows for Extension developers to get feedback on what will improve their Extensions experience. -If you want your extension to be published in the Marketplace, you can submit your extension [here](https://www.docker.com/products/extensions/submissions/). We’ll review your submission and provide feedback if changes are needed before we can validate and publish it to make it available to all Docker Desktop users. +If you want your extension to be published in the Marketplace, you can submit your extension [here](https://www.docker.com/products/extensions/submissions/){:target="_blank" rel="noopener" class="_"}. We’ll review your submission and provide feedback if changes are needed before we can validate and publish it to make it available to all Docker Desktop users. ## What’s next? If you want to get up and running quickly with a Docker Extension, see the [Quickstart guide](quickstart.md). diff --git a/desktop/extensions-sdk/quickstart.md b/desktop/extensions-sdk/quickstart.md index ceb7798b84..b41820f400 100644 --- a/desktop/extensions-sdk/quickstart.md +++ b/desktop/extensions-sdk/quickstart.md @@ -15,14 +15,16 @@ Follow the guide below to build a basic Docker Extension quickly. The Quickstart ## Prerequisites - [Docker Desktop](../release-notes.md) -- [NodeJS](https://nodejs.org/) -- [Go](https://go.dev/dl/) +- [NodeJS](https://nodejs.org/){:target="_blank" rel="noopener" class="_"} +- [Go](https://go.dev/dl/){:target="_blank" rel="noopener" class="_"} ## Step one: Set up your directory To set up your directory, use the `init` subcommand and provide a name for your extension. -`docker extension init my-extension` +```console +$ docker extension init my-extension +``` You’ll be asked a series of questions about your extension, such as its name, a description, and the name of your Hub repository. This helps the CLI generate a set of boilerplate files for you to get started. The boilerplate files are stored in the directory `my-extension`. @@ -37,19 +39,24 @@ For more information and guidelines on building the UI, see the [Design and UI s To build your extension, run: -`docker build -t .` +```console +$ docker build -t . +``` `docker build` builds your extension and also generates an image which is named after your chosen hub repository. For instance, if you typed `john/my-extension` as the answer to the following question: -`? Hub repository (eg. namespace/repository on hub): john/my-extension` - +```console +? Hub repository (eg. namespace/repository on hub): john/my-extension` +``` The `docker build` generates an image with name `john/my-extension`. ## Step three: Install and preview the extension To install the extension in Docker Desktop, run: -`docker extension install ` +```console +$ docker extension install +``` To preview the extension in Docker Desktop, close and open Docker Dashboard once the installation is complete. @@ -63,7 +70,9 @@ If you want to make your extension available to all Docker Desktop users, you ca To remove the extension, run: -`docker extension rm ` +```console +$ docker extension rm +``` ## What's next diff --git a/desktop/extensions/index.md b/desktop/extensions/index.md index 7fce4e289a..f1e20622a8 100644 --- a/desktop/extensions/index.md +++ b/desktop/extensions/index.md @@ -21,7 +21,7 @@ Anyone can use Docker Extensions and there is no limit to the number of extensio ## What extensions are available? There is a mix of partner and community-built extensions and Docker-built extensions. -You can explore the list of available extensions in [Docker Hub](https://hub.docker.com/search?q=&type=extension) or in the Extensions Marketplace within Docker Desktop. +You can explore the list of available extensions in [Docker Hub](https://hub.docker.com/search?q=&type=extension){:target="_blank" rel="noopener" class="_"} or in the Extensions Marketplace within Docker Desktop. To find out more about Docker Extensions, we recommend the video walkthrough from DockerCon 2022: diff --git a/desktop/extensions/marketplace.md b/desktop/extensions/marketplace.md index 846b58abb6..611aaf55d8 100644 --- a/desktop/extensions/marketplace.md +++ b/desktop/extensions/marketplace.md @@ -1,6 +1,6 @@ --- description: Extensions -keywords: Docker Extensions, Docker Desktop, Linux, Mac, Windows, feedback +keywords: Docker Extensions, Docker Desktop, Linux, Mac, Windows, Marketplace title: Marketplace extensions --- diff --git a/desktop/extensions/non-marketplace.md b/desktop/extensions/non-marketplace.md index 184cba01f9..c9aa62a988 100644 --- a/desktop/extensions/non-marketplace.md +++ b/desktop/extensions/non-marketplace.md @@ -1,6 +1,6 @@ --- description: Extensions -keywords: Docker Extensions, Docker Desktop, Linux, Mac, Windows, feedback +keywords: Docker Extensions, Docker Desktop, Linux, Mac, Windows, title: Non-Marketplace extensions --- diff --git a/desktop/faqs/general.md b/desktop/faqs/general.md index 14f79b390d..34c61de33a 100644 --- a/desktop/faqs/general.md +++ b/desktop/faqs/general.md @@ -37,7 +37,7 @@ Read the [Blog](https://www.docker.com/blog/updating-product-subscriptions/){: t ## Do I need to pay to create or share Docker Extensions? -No, the [Docker Extension SDK](https://www.npmjs.com/package/@docker/extension-api-client) is licensed under the Apache 2.0 License and is free to use. Anyone can create new Docker Extensions and share them without constraints. +No, the [Docker Extension SDK](https://www.npmjs.com/package/@docker/extension-api-client){:target="_blank" rel="noopener" class="_"} is licensed under the Apache 2.0 License and is free to use. Anyone can create new Docker Extensions and share them without constraints. ## Do I need to use a specific license when I create a Docker Extension? diff --git a/desktop/faqs/macfaqs.md b/desktop/faqs/macfaqs.md index 8baa038e68..e094283265 100644 --- a/desktop/faqs/macfaqs.md +++ b/desktop/faqs/macfaqs.md @@ -227,7 +227,7 @@ Bash has [built-in support for completion](https://www.debian-administration.org/article/316/An_introduction_to_bash_completion_part_1){:target="_blank" class="_"} To activate completion for Docker commands, these files need to be copied or symlinked to your `bash_completion.d/` directory. For example, if you -installed bash via [Homebrew](https://brew.sh): +installed bash via [Homebrew](https://brew.sh){:target="_blank" rel="noopener" class="_"}: ```bash etc=/Applications/Docker.app/Contents/Resources/etc diff --git a/desktop/faqs/windowsfaqs.md b/desktop/faqs/windowsfaqs.md index 1bd2c16004..b5650f4cd8 100644 --- a/desktop/faqs/windowsfaqs.md +++ b/desktop/faqs/windowsfaqs.md @@ -109,15 +109,15 @@ containers, or select **Switch to Linux containers** to use Linux containers For more information on Windows containers, refer to the following documentation: -- Microsoft documentation on [Windows containers](https://docs.microsoft.com/en-us/virtualization/windowscontainers/about/index). +- Microsoft documentation on [Windows containers](https://docs.microsoft.com/en-us/virtualization/windowscontainers/about/index){:target="_blank" rel="noopener" class="_"}. -- [Build and Run Your First Windows Server Container (Blog Post)](https://blog.docker.com/2016/09/build-your-first-docker-windows-server-container/) +- [Build and Run Your First Windows Server Container (Blog Post)](https://blog.docker.com/2016/09/build-your-first-docker-windows-server-container/){:target="_blank" rel="noopener" class="_"} gives a quick tour of how to build and run native Docker Windows containers on Windows 10 and Windows Server 2016 evaluation releases. -- [Getting Started with Windows Containers (Lab)](https://github.com/docker/labs/blob/master/windows/windows-containers/README.md) - shows you how to use the [MusicStore](https://github.com/aspnet/MusicStore/blob/dev/README.md) +- [Getting Started with Windows Containers (Lab)](https://github.com/docker/labs/blob/master/windows/windows-containers/README.md){:target="_blank" rel="noopener" class="_"} + shows you how to use the [MusicStore](https://github.com/aspnet/MusicStore/blob/dev/README.md){:target="_blank" rel="noopener" class="_"} application with Windows containers. The MusicStore is a standard .NET application and, - [forked here to use containers](https://github.com/friism/MusicStore), is a good example of a multi-container application. + [forked here to use containers](https://github.com/friism/MusicStore){:target="_blank" rel="noopener" class="_"}, is a good example of a multi-container application. - To understand how to connect to Windows containers from the local host, see [I want to connect to a container from Windows](../networking.md#i-want-to-connect-to-a-container-from-the-host) diff --git a/desktop/get-started.md b/desktop/get-started.md index 4134035c54..4b0fefc222 100644 --- a/desktop/get-started.md +++ b/desktop/get-started.md @@ -1,7 +1,7 @@ --- description: Docker Dashboard -keywords: Docker Dashboard, manage, containers, gui, dashboard, images, user manual -title: Sign in and get started +keywords: Docker Dashboard, manage, containers, gui, dashboard, images, user manual, quick start, guide, sign in +title: Quick Start Guide and sign in redirect_from: - /desktop/linux/ - /desktop/linux/index/ diff --git a/desktop/hardened-desktop/enhanced-container-isolation/faq.md b/desktop/hardened-desktop/enhanced-container-isolation/faq.md index d51ae2e2bf..93318b389f 100644 --- a/desktop/hardened-desktop/enhanced-container-isolation/faq.md +++ b/desktop/hardened-desktop/enhanced-container-isolation/faq.md @@ -1,7 +1,7 @@ --- title: FAQs and known issues description: FAQ for Enhanced Container Isolation -keywords: enhanced container isolation, security, faq, sysbox +keywords: enhanced container isolation, security, faq, sysbox, known issues, Docker Desktop toc_max: 2 --- diff --git a/desktop/hardened-desktop/enhanced-container-isolation/features-benefits.md b/desktop/hardened-desktop/enhanced-container-isolation/features-benefits.md index 5f147871b6..b42d909496 100644 --- a/desktop/hardened-desktop/enhanced-container-isolation/features-benefits.md +++ b/desktop/hardened-desktop/enhanced-container-isolation/features-benefits.md @@ -1,12 +1,12 @@ --- description: Instructions on how to set up enhanced container isolation title: Key features and benefits -keywords: set up, enhanced container isolation, rootless, security +keywords: set up, enhanced container isolation, rootless, security, features, Docker Desktop --- ### Linux User Namespace on all Containers -With Enhanced Container Isolation, all user containers leverage the [Linux user-namespace](https://man7.org/linux/man-pages/man7/user_namespaces.7.html) +With Enhanced Container Isolation, all user containers leverage the [Linux user-namespace](https://man7.org/linux/man-pages/man7/user_namespaces.7.html){:target="_blank" rel="noopener" class="_"} for extra isolation. This means that the root user in the container maps to an unprivileged user in the Docker Desktop Linux VM. diff --git a/desktop/hardened-desktop/enhanced-container-isolation/how-eci-works.md b/desktop/hardened-desktop/enhanced-container-isolation/how-eci-works.md index c3d466aa1d..0503909e15 100644 --- a/desktop/hardened-desktop/enhanced-container-isolation/how-eci-works.md +++ b/desktop/hardened-desktop/enhanced-container-isolation/how-eci-works.md @@ -9,7 +9,7 @@ keywords: set up, enhanced container isolation, rootless, security >Enhance Container Isolation is available to Docker Business customers only. Enhanced Container Isolation hardens container isolation using the [Sysbox -container runtime](https://github.com/nestybox/sysbox). Sysbox is a fork of the +container runtime](https://github.com/nestybox/sysbox){:target="_blank" rel="noopener" class="_"}. Sysbox is a fork of the standard OCI runc runtime that was modified to enhance container isolation and workloads. For more details see [Under the hood](#under-the-hood). diff --git a/desktop/hardened-desktop/registry-access-management.md b/desktop/hardened-desktop/registry-access-management.md index 81660f8350..789acf7803 100644 --- a/desktop/hardened-desktop/registry-access-management.md +++ b/desktop/hardened-desktop/registry-access-management.md @@ -1,6 +1,6 @@ --- description: Registry Access Management -keywords: registry, access, managment +keywords: registry access managment, Hardened Desktop, Docker Desktop, images, Docker Hub title: Registry Access Management redirect_from: - /docker-hub/registry-access-management/ diff --git a/desktop/index.md b/desktop/index.md index 1a6f460175..b2b3ad37ce 100644 --- a/desktop/index.md +++ b/desktop/index.md @@ -1,6 +1,6 @@ --- description: Docker Desktop overview -keywords: Desktop, Docker, GUI, run, docker, local, machine, dashboard +keywords: Docker Desktop, Docker, features, GUI, linux, mac, windows title: Docker Desktop redirect_from: - /desktop/opensource/ @@ -22,7 +22,7 @@ that enables you to build and share containerized applications and microservices It provides a simple interface that enables you to manage your containers, applications, and images directly from your machine without having to use the CLI to perform core actions.