diff --git a/content/desktop/extensions-sdk/_index.md b/content/desktop/extensions-sdk/_index.md index 885f210b29..f4689353e3 100644 --- a/content/desktop/extensions-sdk/_index.md +++ b/content/desktop/extensions-sdk/_index.md @@ -10,7 +10,7 @@ grid: icon: "checklist" link: "/desktop/extensions-sdk/process/" - title: "Quickstart guide" - description: Follow the quickstart guide to create a basic Docker Extension quickly. + description: Follow the quickstart guide to create a basic Docker extension quickly. icon: "explore" link: "/desktop/extensions-sdk/quickstart/" - title: "View the design guidelines" @@ -22,7 +22,7 @@ grid: icon: "publish" link: "/desktop/extensions-sdk/extensions/" - title: "Interacting with Kubernetes" - description: Find information on how to interact indirectly with a Kubernetes cluster from your Docker Extension. + description: Find information on how to interact indirectly with a Kubernetes cluster from your Docker extension. icon: "multiple_stop" link: "/desktop/extensions-sdk/dev/kubernetes/" - title: "Multi-arch extensions" diff --git a/content/desktop/extensions-sdk/build/backend-extension-tutorial.md b/content/desktop/extensions-sdk/build/backend-extension-tutorial.md index 9f9218e39b..660fc56b68 100644 --- a/content/desktop/extensions-sdk/build/backend-extension-tutorial.md +++ b/content/desktop/extensions-sdk/build/backend-extension-tutorial.md @@ -12,9 +12,10 @@ Your extension can ship a backend part with which the frontend can interact with Before you start, make sure you have installed the latest version of [Docker Desktop](https://www.docker.com/products/docker-desktop/). -> Note +> Tip > > Check the [Quickstart guide](../quickstart.md) and `docker extension init `. They provide a better base for your extension as it's more up-to-date and related to your install of Docker Desktop. +{ .tip } ## Why add a backend? @@ -176,10 +177,10 @@ type HTTPMessageBody struct { {{< tabs group="lang" >}} {{< tab name="Go" >}} -To deploy your Go backend when installing the extension, you need first to configure the `Dockerfile`, so that: -- it builds the backend application -- it copies the binary in the extension's container filesystem -- it starts the binary when the container starts listening on the extension socket +To deploy your Go backend when installing the extension, you need first to configure the `Dockerfile`, so that it: +- Builds the backend application +- Copies the binary in the extension's container filesystem +- Starts the binary when the container starts listening on the extension socket > **Tip** > diff --git a/content/desktop/extensions-sdk/build/minimal-frontend-extension.md b/content/desktop/extensions-sdk/build/minimal-frontend-extension.md index 2893f27616..2224696a71 100644 --- a/content/desktop/extensions-sdk/build/minimal-frontend-extension.md +++ b/content/desktop/extensions-sdk/build/minimal-frontend-extension.md @@ -11,9 +11,10 @@ To start creating your extension, you first need a directory with files which ra Before you start, make sure you have installed the latest version of [Docker Desktop](../../release-notes.md). -> Note +> Tip > > If you want to start a codebase for your new extension, our [Quickstart guide](../quickstart.md) and `docker extension init ` provides a better base for your extension. +{ .tip } ## Extension folder structure diff --git a/content/desktop/extensions-sdk/design/_index.md b/content/desktop/extensions-sdk/design/_index.md index 0edf71099f..b2b5cc83ac 100644 --- a/content/desktop/extensions-sdk/design/_index.md +++ b/content/desktop/extensions-sdk/design/_index.md @@ -19,7 +19,7 @@ To get started on your UI, follow the steps below. 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: -- 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) to automatically replicate Docker Desktop's look and 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. diff --git a/content/desktop/extensions-sdk/design/design-guidelines.md b/content/desktop/extensions-sdk/design/design-guidelines.md index a142e748fb..cd4cc3df9e 100644 --- a/content/desktop/extensions-sdk/design/design-guidelines.md +++ b/content/desktop/extensions-sdk/design/design-guidelines.md @@ -18,39 +18,39 @@ Use the [Docker Material UI Theme](https://www.npmjs.com/package/@docker/docker- - 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). - ![Light and dark mode](images/light_dark_mode.png) + ![Light and dark mode](images/light_dark_mode.webp) - Ensure that your extension icon is visible both in light and dark mode. - ![Icon colors in light and dark mode](images/icon_colors.png) + ![Icon colors in light and dark mode](images/icon_colors.webp) - Ensure that the navigational behavior is consistent with the rest of Docker Desktop. Add a header to set the context for the extension. - ![Header that sets the context](images/header.png) + ![Header that sets the context](images/header.webp) - Avoid embedding terminal windows. The advantage we have with Docker Desktop over the CLI is that we have the opportunity to provide rich information to users. Make use of this interface as much as possible. - ![Terminal window used incorrectly](images/terminal_window_dont.png) + ![Terminal window used incorrectly](images/terminal_window_dont.webp) - ![Terminal window used correctly](images/terminal_window_do.png) + ![Terminal window used correctly](images/terminal_window_do.webp) ## Build features natively - In order not to disrupt the flow of users, avoid scenarios where the user has to navigate outside Docker Desktop, to the CLI or a webpage for example, in order to carry out certain functionalities. Instead, build features that are native to Docker Desktop. - ![Incorrect way to switch context](images/switch_context_dont.png) + ![Incorrect way to switch context](images/switch_context_dont.webp) - ![Correct way to switch context](images/switch_context_do.png) + ![Correct way to switch context](images/switch_context_do.webp) ## Break down complicated user flows - If a flow is too complicated or the concept is abstract, break down the flow into multiple steps with one simple call-to-action in each step. This helps when onboarding novice users to your extension - ![A complicated flow](images/complicated_flows.png) + ![A complicated flow](images/complicated_flows.webp) - Where there are multiple call-to-actions, ensure you use the primary (filled button style) and secondary buttons (outline button style) to convey the importance of each action. - ![Call to action](images/cta.png) + ![Call to action](images/cta.webp) ## Onboarding new users @@ -62,7 +62,7 @@ When creating your extension, ensure that first time users of the extension and - Link to necessary resources such as documentation. - If your extension has particularly complex functionality, add a demo or video to the start page. This helps onboard a first time user quickly. - ![start page](images/start_page.png) + ![start page](images/start_page.webp) ## What's next? diff --git a/content/desktop/extensions-sdk/design/images/complicated_flows.png b/content/desktop/extensions-sdk/design/images/complicated_flows.png deleted file mode 100644 index 7c3f51a48d..0000000000 Binary files a/content/desktop/extensions-sdk/design/images/complicated_flows.png and /dev/null differ diff --git a/content/desktop/extensions-sdk/design/images/complicated_flows.webp b/content/desktop/extensions-sdk/design/images/complicated_flows.webp new file mode 100644 index 0000000000..372eefc3ea Binary files /dev/null and b/content/desktop/extensions-sdk/design/images/complicated_flows.webp differ diff --git a/content/desktop/extensions-sdk/design/images/cta.png b/content/desktop/extensions-sdk/design/images/cta.png deleted file mode 100644 index 4ffe64edf5..0000000000 Binary files a/content/desktop/extensions-sdk/design/images/cta.png and /dev/null differ diff --git a/content/desktop/extensions-sdk/design/images/cta.webp b/content/desktop/extensions-sdk/design/images/cta.webp new file mode 100644 index 0000000000..e18b953857 Binary files /dev/null and b/content/desktop/extensions-sdk/design/images/cta.webp differ diff --git a/content/desktop/extensions-sdk/design/images/header.png b/content/desktop/extensions-sdk/design/images/header.png deleted file mode 100644 index 417ea9b121..0000000000 Binary files a/content/desktop/extensions-sdk/design/images/header.png and /dev/null differ diff --git a/content/desktop/extensions-sdk/design/images/header.webp b/content/desktop/extensions-sdk/design/images/header.webp new file mode 100644 index 0000000000..b271509449 Binary files /dev/null and b/content/desktop/extensions-sdk/design/images/header.webp differ diff --git a/content/desktop/extensions-sdk/design/images/icon_colors.png b/content/desktop/extensions-sdk/design/images/icon_colors.png deleted file mode 100644 index f3a61c455d..0000000000 Binary files a/content/desktop/extensions-sdk/design/images/icon_colors.png and /dev/null differ diff --git a/content/desktop/extensions-sdk/design/images/icon_colors.webp b/content/desktop/extensions-sdk/design/images/icon_colors.webp new file mode 100644 index 0000000000..e00f7ab9f8 Binary files /dev/null and b/content/desktop/extensions-sdk/design/images/icon_colors.webp differ diff --git a/content/desktop/extensions-sdk/design/images/light_dark_mode.png b/content/desktop/extensions-sdk/design/images/light_dark_mode.png deleted file mode 100644 index 50d4b6e5b0..0000000000 Binary files a/content/desktop/extensions-sdk/design/images/light_dark_mode.png and /dev/null differ diff --git a/content/desktop/extensions-sdk/design/images/light_dark_mode.webp b/content/desktop/extensions-sdk/design/images/light_dark_mode.webp new file mode 100644 index 0000000000..ef9bc16be5 Binary files /dev/null and b/content/desktop/extensions-sdk/design/images/light_dark_mode.webp differ diff --git a/content/desktop/extensions-sdk/design/images/start_page.png b/content/desktop/extensions-sdk/design/images/start_page.png deleted file mode 100644 index e035314256..0000000000 Binary files a/content/desktop/extensions-sdk/design/images/start_page.png and /dev/null differ diff --git a/content/desktop/extensions-sdk/design/images/start_page.webp b/content/desktop/extensions-sdk/design/images/start_page.webp new file mode 100644 index 0000000000..990b6a1857 Binary files /dev/null and b/content/desktop/extensions-sdk/design/images/start_page.webp differ diff --git a/content/desktop/extensions-sdk/design/images/switch_context_do.png b/content/desktop/extensions-sdk/design/images/switch_context_do.png deleted file mode 100644 index 3c50d3633f..0000000000 Binary files a/content/desktop/extensions-sdk/design/images/switch_context_do.png and /dev/null differ diff --git a/content/desktop/extensions-sdk/design/images/switch_context_do.webp b/content/desktop/extensions-sdk/design/images/switch_context_do.webp new file mode 100644 index 0000000000..52a7dd0b3a Binary files /dev/null and b/content/desktop/extensions-sdk/design/images/switch_context_do.webp differ diff --git a/content/desktop/extensions-sdk/design/images/switch_context_dont.png b/content/desktop/extensions-sdk/design/images/switch_context_dont.png deleted file mode 100644 index 747bfb2f53..0000000000 Binary files a/content/desktop/extensions-sdk/design/images/switch_context_dont.png and /dev/null differ diff --git a/content/desktop/extensions-sdk/design/images/switch_context_dont.webp b/content/desktop/extensions-sdk/design/images/switch_context_dont.webp new file mode 100644 index 0000000000..28189f8dc3 Binary files /dev/null and b/content/desktop/extensions-sdk/design/images/switch_context_dont.webp differ diff --git a/content/desktop/extensions-sdk/design/images/terminal_window_do.png b/content/desktop/extensions-sdk/design/images/terminal_window_do.png deleted file mode 100644 index 195b542597..0000000000 Binary files a/content/desktop/extensions-sdk/design/images/terminal_window_do.png and /dev/null differ diff --git a/content/desktop/extensions-sdk/design/images/terminal_window_do.webp b/content/desktop/extensions-sdk/design/images/terminal_window_do.webp new file mode 100644 index 0000000000..8d9d2af78a Binary files /dev/null and b/content/desktop/extensions-sdk/design/images/terminal_window_do.webp differ diff --git a/content/desktop/extensions-sdk/design/images/terminal_window_dont.png b/content/desktop/extensions-sdk/design/images/terminal_window_dont.png deleted file mode 100644 index 593fc6174f..0000000000 Binary files a/content/desktop/extensions-sdk/design/images/terminal_window_dont.png and /dev/null differ diff --git a/content/desktop/extensions-sdk/design/images/terminal_window_dont.webp b/content/desktop/extensions-sdk/design/images/terminal_window_dont.webp new file mode 100644 index 0000000000..a8632244db Binary files /dev/null and b/content/desktop/extensions-sdk/design/images/terminal_window_dont.webp differ diff --git a/content/desktop/extensions-sdk/process.md b/content/desktop/extensions-sdk/process.md index 99983f1d7f..78e23e5feb 100644 --- a/content/desktop/extensions-sdk/process.md +++ b/content/desktop/extensions-sdk/process.md @@ -6,14 +6,14 @@ keyword: Docker Extensions, sdk, build, create, publish This documentation is structured so that it matches the steps you need to take when creating your extension. -There are two main parts to creating a Docker Extension: +There are two main parts to creating a Docker extension: 1. Build the foundations 2. Publish the extension > **Note** > -> You do not need to pay to create a Docker Extension. 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. +> You do not need to pay to create a Docker extension. 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 extensions and share them without constraints. > > There is also no constraint on how each extension should be licensed, this is up to you to decide when creating a new extension. @@ -27,13 +27,13 @@ The build process consists of: - Configuring the metadata file which is required at the root of the image filesystem. - Building and installing the extension. +For further inspiration, see the other examples in the [samples folder](https://github.com/docker/extensions-sdk/tree/main/samples). + > **Tip** > > Whilst creating your extension, make sure you follow the [design](design/design-guidelines.md) and [UI styling](design/index.md) guidelines to ensure visual consistency and [level AA accessibility standards](https://www.w3.org/WAI/WCAG2AA-Conformance). { .tip } -For further inspiration, see the other examples in the [samples folder](https://github.com/docker/extensions-sdk/tree/main/samples). - ## Part two: Publish and distribute your extension Docker Desktop displays published extensions in the Extensions Marketplace. The Extensions Marketplace is a curated space where developers can discover extensions to improve their developer experience and upload their own extension to share with the world. diff --git a/content/desktop/extensions-sdk/quickstart.md b/content/desktop/extensions-sdk/quickstart.md index 2f96f9d275..5b9321b2ea 100644 --- a/content/desktop/extensions-sdk/quickstart.md +++ b/content/desktop/extensions-sdk/quickstart.md @@ -66,6 +66,7 @@ see a **Quickstart** item underneath the **Extensions** menu. Selecting this ite > > During UI development, it’s helpful to use hot reloading to test your changes without rebuilding your entire > extension. See [Preview whilst developing the UI](dev/test-debug.md#hot-reloading-whilst-developing-the-ui) for more information. +{ .tip } You may also want to inspect the containers that belong to the extension. By default, extension containers are hidden from the Docker Dashboard. You can change this in **Settings**, see @@ -83,8 +84,6 @@ To remove the extension, run: $ docker extension rm ``` -{{< include "extensions-form.md" >}} - ## What's next - Build a more [advanced frontend](build/frontend-extension-tutorial.md) for your extension.