docs: Add missing link, plus numerous small fixes (#2437)

docs/docs/guides/developer-guide/custom-fields/index.md

@@ -868,7 +868,7 @@ const config = {
 };
 ```
 
-In the above example, the `CmsArticle` entity is being used as a related entity. Howeer, the GraphQL type name is `BlogPost`, so we must specify this in the `graphQLType` property, otherwise Vendure will try to extend the GraphQL schema with reference to a non-existent "CmsArticle" type.
+In the above example, the `CmsArticle` entity is being used as a related entity. However, the GraphQL type name is `BlogPost`, so we must specify this in the `graphQLType` property, otherwise Vendure will try to extend the GraphQL schema with reference to a non-existent "CmsArticle" type.
 
 ### `inverseSide`
 

docs/docs/guides/developer-guide/migrations/index.md

@@ -7,7 +7,7 @@ import TabItem from '@theme/TabItem';
 
 Database migrations are needed whenever the database schema changes. This can be caused by:
 
-* changes to the [custom fields](/guides/developer-guide/custom-fields/) configuration.
+* changes to the [custom fields](/guides/developer-guide/custom-fields/) configuration
 * new [database entities defined by plugins](/guides/developer-guide/database-entity//)
 * occasional changes to the core Vendure database schema when updating to newer versions
 

docs/docs/guides/developer-guide/overview/index.md

@@ -13,7 +13,7 @@ These are the major parts of a Vendure application:
 
 * **Server**: The Vendure server is the part that handles requests coming in to the GraphQL APIs. It serves both the [Shop API](/reference/graphql-api/shop/queries) and [Admin API](/reference/graphql-api/admin/queries), and can send jobs to the Job Queue to be processed by the Worker.
 * **Worker**: The Worker runs in the background and deals with tasks such as updating the search index, sending emails, and other tasks which may be long-running, resource-intensive or require retries.
-* **Admin UI**: The Admin UI is how shop administrators manage orders, customers, products, settings and so on. It is not actually part of the Vendure core, but is provided as a plugin (the [AdminUiPlugin](/reference/core-plugins/admin-ui-plugin/)) which is installed for you in a standard Vendure installation. The Admin UI can be further extended to support custom functionality, as detailed in the 
+* **Admin UI**: The Admin UI is how shop administrators manage orders, customers, products, settings and so on. It is not actually part of the Vendure core, but is provided as a plugin (the [AdminUiPlugin](/reference/core-plugins/admin-ui-plugin/)) which is installed for you in a standard Vendure installation. The Admin UI can be further extended to support custom functionality, as detailed in the [Extending the Admin UI](/guides/extending-the-admin-ui/getting-started/) section
 * **Storefront**: With headless commerce, you are free to implement your storefront exactly as you see fit, unconstrained by the back-end, using any technologies that you like. To make this process easier, we have created a number of [storefront starter kits](/guides/storefront/storefront-starters/), as well as [guides on building a storefront](/guides/storefront/connect-api/).
 
 ![./Vendure_docs-architecture.webp](./Vendure_docs-architecture.webp) 

docs/docs/guides/developer-guide/the-service-layer/index.mdx

@@ -17,7 +17,7 @@ follow all the rules of NestJS providers, including dependency injection, scopin
 Services are generally scoped to a specific domain or entity. For instance, in the Vendure core, there is a [`Product` entity](/reference/typescript-api/entities/product),
 and a corresponding [`ProductService`](/reference/typescript-api/services/product-service) which contains all the methods for interacting with products.
 
-Here's a simplified example of a the `ProductService`, including an implementation of the `findOne()` method that was
+Here's a simplified example of a `ProductService`, including an implementation of the `findOne()` method that was
 used in the example in the [previous section](/guides/developer-guide/the-api-layer/#resolvers):
 
 ```ts title="src/services/product.service.ts"

docs/docs/guides/extending-the-admin-ui/admin-ui-theming-branding/index.md

@@ -108,7 +108,7 @@ Some customizable styles in [Clarity](https://clarity.design/), the Admin UI's u
     ```css title="my-variables.scss"
     $clr-header-height: 4rem;
     ```
-3. Set this as a sassVariableOverrides extension:
+3. Set this as a `sassVariableOverrides` extension:
     ```ts title="src/vendure-config.ts"
     import path from 'path';
     import { AdminUiPlugin } from '@vendure/admin-ui-plugin';
@@ -130,4 +130,4 @@ Some customizable styles in [Clarity](https://clarity.design/), the Admin UI's u
     }
     ```
 
-globalStyles and sassVariableOverrides extensions can be used in conjunction or separately.
+`globalStyles` and `sassVariableOverrides` extensions can be used in conjunction or separately.

docs/docs/guides/extending-the-admin-ui/getting-started/index.md

@@ -20,14 +20,23 @@ UI extensions fall into two categories:
 
 To extend the Admin UI, install the [`@vendure/ui-devkit` package](https://www.npmjs.com/package/@vendure/ui-devkit) as a dev dependency:
 
+<Tabs>
+<TabItem value="npm" label="npm" default>
+
 ```bash
-yarn add --save-dev @vendure/ui-devkit
+npm install --save-dev @vendure/ui-devkit
+```
 
-# or
+</TabItem>
+<TabItem value="yarn" label="yarn">
 
-npm install --save-dev @vendure/ui-devkit
+```bash
+yarn add --save-dev @vendure/ui-devkit
 ```
 
+</TabItem>
+</Tabs>
+
 You can then create the following folder structure to hold your UI extensions:
 
 ```
@@ -274,10 +283,23 @@ compileUiExtensions({
 
 This can then be run from the command line:
 
+<Tabs>
+<TabItem value="npm" label="npm" default>
+
+```bash
+npm run ts-node compile-admin-ui.ts
+```
+
+</TabItem>
+<TabItem value="yarn" label="yarn">
+
 ```bash
 yarn ts-node compile-admin-ui.ts
 ```
 
+</TabItem>
+</Tabs>
+
 Once complete, the production-ready app bundle will be output to `admin-ui/dist`. This method is suitable for a production setup, so that the Admin UI can be compiled ahead-of-time as part of your deployment process. This ensures that your Vendure server starts up as quickly as possible. In this case, you can pass the path of the compiled app to the AdminUiPlugin:
 
 ```ts title="src/vendure-config.ts"
@@ -314,10 +336,23 @@ To compile the angular app ahead of time (for production) and copy the dist fold
 "build:admin" will remove the admin-ui folder and run the compileUiExtensions function to generate the admin-ui Angular app.
 Make sure to install copyfiles before running the "copy" command:
 
+<Tabs>
+<TabItem value="npm" label="npm" default>
+
 ```bash
-yarn install copyfiles
+npm install copyfiles
 ```
 
+</TabItem>
+<TabItem value="yarn" label="yarn">
+
+```bash
+yarn add copyfiles
+```
+
+</TabItem>
+</Tabs>
+
 :::
 
 ## Using other frameworks

docs/docs/guides/extending-the-admin-ui/ui-library/index.md

@@ -121,22 +121,22 @@ import { CdsIcon } from '@vendure/admin-ui/react';
 export function DemoComponent() {
     return (
         <>
-            <CdsIcon icon={starIcon} size={'xs'}></CdsIcon>
-            <CdsIcon icon={starIcon} size={'sm'}></CdsIcon>
-            <CdsIcon icon={starIcon} size={'md'}></CdsIcon>
-            <CdsIcon icon={starIcon} size={'lg'}></CdsIcon>
-            <CdsIcon icon={starIcon} size={'xl'}></CdsIcon>
-            <CdsIcon icon={starIcon} size={'xxl'}></CdsIcon>
+            <CdsIcon icon={starIcon} size="xs" />
+            <CdsIcon icon={starIcon} size="sm" />
+            <CdsIcon icon={starIcon} size="md" />
+            <CdsIcon icon={starIcon} size="lg" />
+            <CdsIcon icon={starIcon} size="xl" />
+            <CdsIcon icon={starIcon} size="xxl" />
             
-            <CdsIcon icon={userIcon} badge={'success'}></CdsIcon>
-            <CdsIcon icon={userIcon} badge={'info'}></CdsIcon>
-            <CdsIcon icon={userIcon} badge={'warning'}></CdsIcon>
-            <CdsIcon icon={userIcon} badge={'danger'}></CdsIcon>
+            <CdsIcon icon={userIcon} badge="success" />
+            <CdsIcon icon={userIcon} badge="info" />
+            <CdsIcon icon={userIcon} badge="warning" />
+            <CdsIcon icon={userIcon} badge="danger" />
             
-            <CdsIcon icon={userIcon} status={'success'}></CdsIcon>
-            <CdsIcon icon={userIcon} status={'info'}></CdsIcon>
-            <CdsIcon icon={userIcon} status={'warning'}></CdsIcon>
-            <CdsIcon icon={userIcon} status={'danger'}></CdsIcon>
+            <CdsIcon icon={userIcon} status="success" />
+            <CdsIcon icon={userIcon} status="info" />
+            <CdsIcon icon={userIcon} status="warning" />
+            <CdsIcon icon={userIcon} status="danger" />
         </>
     );
 }
@@ -207,12 +207,12 @@ export function DemoComponent() {
                 <input type="checkbox" />
             </FormField>
             <FormField label="Textarea input">
-                <textarea></textarea>
+                <textarea />
             </FormField>
             <FormField label="With tooltip" tooltip="This is a tooltip for the form input">
                 <input type="text" />
             </FormField>
-            <FormField label="Invalid with error" invalid={true}>
+            <FormField label="Invalid with error" invalid>
                 <input type="text" />
             </FormField>
         </div>