Engdocs 1985b (#19399)

* extension design freshness

* extension build freshness

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"

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 <my-extension>`. 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**
 > 

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 <my-extension>` provides a better base for your extension.
+{ .tip }
 
 ## Extension folder structure
 

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.

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?
 

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.

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 <name-of-your-extension>
 ```
 
-{{< include "extensions-form.md" >}}
-
 ## What's next
 
 - Build a more [advanced frontend](build/frontend-extension-tutorial.md) for your extension.