@vendure/docs 0.0.0-202601221213 → 0.0.0-202601280949

package/docs/guides/developer-guide/updating/index.mdx

@@ -60,7 +60,7 @@ For any database schema changes, it is advised to:
 
 1. Read the changelog breaking changes entries to see what changes to expect
 2. **Important:** Make a backup of your database!
-3. Create a new database migration as described in the [Migrations guide](/guides/developer-guide/migrations/)
+3. Create a new database migration as described in the [Migrations guide](/developer-guide/migrations/)
 4. Manually check the migration script. In some cases manual action is needed to customize the script in order to correctly migrate your existing data.
 5. Test the migration script against non-production data.
 6. Only when you have verified that the migration works as expected, run it against your production database.

package/docs/guides/developer-guide/uploading-files/index.mdx

@@ -3,7 +3,7 @@ title: "Uploading Files"
 showtoc: true
 ---
 
-Vendure handles file uploads with the [GraphQL multipart request specification](https://github.com/jaydenseric/graphql-multipart-request-spec). Internally, we use the [graphql-upload package](https://github.com/jaydenseric/graphql-upload). Once uploaded, a file is known as an [Asset](/guides/core-concepts/images-assets/). Assets are typically used for images, but can represent any kind of binary data such as PDF files or videos.
+Vendure handles file uploads with the [GraphQL multipart request specification](https://github.com/jaydenseric/graphql-multipart-request-spec). Internally, we use the [graphql-upload package](https://github.com/jaydenseric/graphql-upload). Once uploaded, a file is known as an [Asset](/core-concepts/images-assets/). Assets are typically used for images, but can represent any kind of binary data such as PDF files or videos.
 
 ## Upload clients
 
@@ -55,11 +55,11 @@ function UploadFile() {
 
 ## Custom upload mutations
 
-How about if you want to implement a custom mutation for file uploads? Let's take an example where we want to allow customers to set an avatar image. To do this, we'll add a [custom field](/guides/developer-guide/custom-fields/) to the Customer entity and then define a new mutation in the Shop API.
+How about if you want to implement a custom mutation for file uploads? Let's take an example where we want to allow customers to set an avatar image. To do this, we'll add a [custom field](/developer-guide/custom-fields/) to the Customer entity and then define a new mutation in the Shop API.
 
 ### Configuration
 
-Let's define a custom field to associate the avatar `Asset` with the `Customer` entity. To keep everything encapsulated, we'll do all of this in a [plugin](/guides/developer-guide/plugins/)
+Let's define a custom field to associate the avatar `Asset` with the `Customer` entity. To keep everything encapsulated, we'll do all of this in a [plugin](/developer-guide/plugins/)
 
 ```ts title="src/plugins/customer-avatar/customer-avatar.plugin.ts"
 import { Asset, LanguageCode, PluginCommonModule, VendurePlugin } from '@vendure/core';

package/docs/guides/extending-the-admin-ui/creating-detail-views/index.mdx

@@ -13,14 +13,14 @@ in that case you won't be able to use the built-in Angular-specific components.
 
 ## Example: Creating a Product Detail View
 
-Let's say you have a plugin which adds a new entity to the database called `ProductReview`. You have already created a [list view](/guides/extending-the-admin-ui/creating-list-views/), and
+Let's say you have a plugin which adds a new entity to the database called `ProductReview`. You have already created a [list view](/extending-the-admin-ui/creating-list-views/), and
 now you need a detail view which can be used to view and edit individual reviews.
 
 ### Extend the TypedBaseDetailComponent class
 
 The detail component itself is an Angular component which extends the [BaseDetailComponent](/reference/admin-ui-api/list-detail-views/base-detail-component/) or [TypedBaseDetailComponent](/reference/admin-ui-api/list-detail-views/typed-base-detail-component) class.
 
-This example assumes you have set up your project to use code generation as described in the [GraphQL code generation guide](/guides/how-to/codegen/#codegen-for-admin-ui-extensions).
+This example assumes you have set up your project to use code generation as described in the [GraphQL code generation guide](/how-to/codegen/#codegen-for-admin-ui-extensions).
 
 ```ts title="src/plugins/reviews/ui/components/review-detail/review-detail.component.ts"
 import { ResultOf } from '@graphql-typed-document-node/core';
@@ -236,7 +236,7 @@ export default [
 
 ## Supporting custom fields
 
-From Vendure v2.2, it is possible for your [custom entities to support custom fields](/guides/developer-guide/database-entity/#supporting-custom-fields).
+From Vendure v2.2, it is possible for your [custom entities to support custom fields](/developer-guide/database-entity/#supporting-custom-fields).
 
 If you have set up your entity to support custom fields, and you want custom fields to be available in the Admin UI detail view,
 you need to add the following to your detail component:

package/docs/guides/extending-the-admin-ui/creating-list-views/index.mdx

@@ -39,14 +39,14 @@ type ProductReviewList implements PaginatedList {
 ```
 
 :::info
-See the [Paginated Lists guide](/guides/how-to/paginated-list/) for details on how to implement this in your server plugin code.
+See the [Paginated Lists guide](/how-to/paginated-list/) for details on how to implement this in your server plugin code.
 :::
 
 ### Create the list component
 
 The list component itself is an Angular component which extends the [BaseListComponent](/reference/admin-ui-api/list-detail-views/base-list-component/) or [TypedBaseListComponent](/reference/admin-ui-api/list-detail-views/typed-base-list-component) class.
 
-This example assumes you have set up your project to use code generation as described in the [GraphQL code generation guide](/guides/how-to/codegen/#codegen-for-admin-ui-extensions).
+This example assumes you have set up your project to use code generation as described in the [GraphQL code generation guide](/how-to/codegen/#codegen-for-admin-ui-extensions).
 
 ```ts title="src/plugins/reviews/ui/components/review-list/review-list.component.ts"
 import { ChangeDetectionStrategy, Component } from '@angular/core';
@@ -247,7 +247,7 @@ export default [
 
 ## Supporting custom fields
 
-From Vendure v2.2, it is possible for your [custom entities to support custom fields](/guides/developer-guide/database-entity/#supporting-custom-fields).
+From Vendure v2.2, it is possible for your [custom entities to support custom fields](/developer-guide/database-entity/#supporting-custom-fields).
 
 If you have set up your entity to support custom fields, and you want custom fields to be available in the Admin UI list view,
 you need to add the following to your list component:

package/docs/guides/extending-the-admin-ui/custom-data-table-components/index.mdx

@@ -3,7 +3,7 @@ title: 'Custom DataTable Components'
 weight: 6
 ---
 
-The Admin UI list views are powered by a data table component which features sorting, advanced filtering, pagination and more. It will also give you the option of displaying any configured [custom fields](/guides/developer-guide/custom-fields/) for the entity in question.
+The Admin UI list views are powered by a data table component which features sorting, advanced filtering, pagination and more. It will also give you the option of displaying any configured [custom fields](/developer-guide/custom-fields/) for the entity in question.
 
 With Admin UI extensions, you can specify custom components to use in rendering any column of any data table - both custom fields _and_ built-in fields, using either Angular or React components.
 

package/docs/guides/extending-the-admin-ui/custom-form-inputs/index.mdx

@@ -2,7 +2,7 @@
 title: 'Custom Form Inputs'
 ---
 
-You can define custom Angular or React components which can be used to render [Custom Fields](/guides/developer-guide/custom-fields/) you have defined on your entities as well as [configurable args](/reference/typescript-api/configurable-operation-def/config-args/) used by custom [Configurable Operations](/guides/developer-guide/strategies-configurable-operations/#configurable-operations).
+You can define custom Angular or React components which can be used to render [Custom Fields](/developer-guide/custom-fields/) you have defined on your entities as well as [configurable args](/reference/typescript-api/configurable-operation-def/config-args/) used by custom [Configurable Operations](/developer-guide/strategies-configurable-operations/#configurable-operations).
 
 ## For Custom Fields
 
@@ -128,7 +128,7 @@ export default [
 
 ### 3. Register the providers
 
-The `providers.ts` is then passed to the `compileUiExtensions()` function as described in the [UI Extensions Getting Started guide](/guides/extending-the-admin-ui/getting-started/):
+The `providers.ts` is then passed to the `compileUiExtensions()` function as described in the [UI Extensions Getting Started guide](/extending-the-admin-ui/getting-started/):
 
 ```ts title="src/vendure-config.ts"
 import * as path from 'path';
@@ -253,7 +253,7 @@ export class RelationReviewInputComponent implements OnInit, FormInputComponent<
 
 ## For ConfigArgs
 
-[ConfigArgs](/reference/typescript-api/configurable-operation-def/config-args/) are used by classes which extend [Configurable Operations](/guides/developer-guide/strategies-configurable-operations/#configurable-operations) (such as ShippingCalculator or PaymentMethodHandler). These ConfigArgs allow user-input values to be passed to the operation's business logic.
+[ConfigArgs](/reference/typescript-api/configurable-operation-def/config-args/) are used by classes which extend [Configurable Operations](/developer-guide/strategies-configurable-operations/#configurable-operations) (such as ShippingCalculator or PaymentMethodHandler). These ConfigArgs allow user-input values to be passed to the operation's business logic.
 
 They are configured in a very similar way to custom fields, and likewise can use custom form inputs by specifying the `ui` property. 
 

package/docs/guides/extending-the-admin-ui/custom-timeline-components/index.mdx

@@ -75,5 +75,5 @@ export default [
 ];
 ```
 
-Then we need to add the `providers.ts` file to the `uiExtensions` array as described in the [UI Extensions Getting Started guide](/guides/extending-the-admin-ui/getting-started/).
+Then we need to add the `providers.ts` file to the `uiExtensions` array as described in the [UI Extensions Getting Started guide](/extending-the-admin-ui/getting-started/).
 

package/docs/guides/extending-the-admin-ui/dashboard-widgets/index.mdx

@@ -74,7 +74,7 @@ We also need to define an `NgModule` for this component. This is because we will
 
 ### Register the widget
 
-Our widget now needs to be registered in our [providers file](/guides/extending-the-admin-ui/getting-started/#providers):
+Our widget now needs to be registered in our [providers file](/extending-the-admin-ui/getting-started/#providers):
 
 ```ts title="src/plugins/reviews/ui/providers.ts"
 import { registerDashboardWidget } from '@vendure/admin-ui/core';

package/docs/guides/extending-the-admin-ui/defining-routes/index.mdx

@@ -6,7 +6,7 @@ Routes allow you to mount entirely custom components at a given URL in the Admin
 
 ![Route area](./route-area.webp)
 
-Routes can be defined natively using either **Angular** or **React**. It is also possible to [use other frameworks](/guides/extending-the-admin-ui/using-other-frameworks/) in a more limited capacity.
+Routes can be defined natively using either **Angular** or **React**. It is also possible to [use other frameworks](/extending-the-admin-ui/using-other-frameworks/) in a more limited capacity.
 
 ## Example: Creating a "Greeter" route
 
@@ -565,7 +565,7 @@ export default [
 ];
 ```
 
-A more powerful way to set the breadcrumbs is by using the `getBreadcrumbs` property. This is a function that receives any resolved detail data and returns an array of link/label pairs. An example of its use can be seen in the [Creating detail views guide](/guides/extending-the-admin-ui/creating-detail-views/#route-config).
+A more powerful way to set the breadcrumbs is by using the `getBreadcrumbs` property. This is a function that receives any resolved detail data and returns an array of link/label pairs. An example of its use can be seen in the [Creating detail views guide](/extending-the-admin-ui/creating-detail-views/#route-config).
 
 ### Dynamically from the component
 

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

@@ -2,11 +2,11 @@
 title: 'Getting Started'
 ---
 
-:::warning Angular Admin UI Deprecation
-The Angular-based Admin UI has been replaced by the new [React Admin Dashboard](/guides/extending-the-dashboard/getting-started/). The Angular Admin UI will not be maintained after **July 2026**. 
+:::warning[Angular Admin UI Deprecation]
+The Angular-based Admin UI has been replaced by the new [React Admin Dashboard](/extending-the-dashboard/getting-started/). The Angular Admin UI will not be maintained after **July 2026**. 
 Until then, we will continue patching critical bugs and security issues. Community contributions will always be merged and released.
 
-**For new projects, use the [React Admin Dashboard](/guides/extending-the-dashboard/getting-started/) instead.**
+**For new projects, use the [React Admin Dashboard](/extending-the-dashboard/getting-started/) instead.**
 
 If you want to use the Admin UI and the Dashboard together, both plugins can now be used simultaneously without any special configuration.
 :::
@@ -282,7 +282,7 @@ Routes allow you to define completely custom views in the Admin UI.
 
 Your `routes.ts` file exports an array of objects which define new routes in the Admin UI. For example, imagine you have created a plugin which implements a simple content management system. You can define a route for the list of articles, and another for the detail view of an article.
 
-For a detailed instructions, see the [Defining Routes guide](/guides/extending-the-admin-ui/defining-routes/).
+For a detailed instructions, see the [Defining Routes guide](/extending-the-admin-ui/defining-routes/).
 
 ## Dev vs Prod mode
 
@@ -410,7 +410,7 @@ yarn add copyfiles
 
 ## Using other frameworks
 
-While the Admin UI natively supports extensions written with Angular or React, it is still possible to create extensions using other front-end frameworks such as Vue or Solid. Note that creating extensions in this way is much more limited, with only the ability to define new routes, and limited access to internal services such as data fetching and notifications. See [UI extensions in other frameworks](/guides/extending-the-admin-ui/using-other-frameworks/).
+While the Admin UI natively supports extensions written with Angular or React, it is still possible to create extensions using other front-end frameworks such as Vue or Solid. Note that creating extensions in this way is much more limited, with only the ability to define new routes, and limited access to internal services such as data fetching and notifications. See [UI extensions in other frameworks](/extending-the-admin-ui/using-other-frameworks/).
 
 ## IDE Support
 
@@ -461,7 +461,7 @@ Angular uses the concept of modules ([NgModules](https://angular.io/guide/ngmodu
 
 When creating your UI extensions, you can set your module to be either `lazy` or `shared`. Shared modules are loaded _eagerly_, i.e. their code is bundled up with the main app and loaded as soon as the app loads.
 
-As a rule, modules defining new routes should be lazily loaded (so that the code is only loaded once that route is activated), and modules defining [new navigations items](/guides/extending-the-admin-ui/nav-menu/) and [custom form input](/guides/extending-the-admin-ui/custom-form-inputs/) should be set to `shared`.
+As a rule, modules defining new routes should be lazily loaded (so that the code is only loaded once that route is activated), and modules defining [new navigations items](/extending-the-admin-ui/nav-menu/) and [custom form input](/extending-the-admin-ui/custom-form-inputs/) should be set to `shared`.
 
 :::info
 "lazy" modules are equivalent to the new "routes" API, and "shared" modules are equivalent to the new "providers" API. In fact, behind the scenes,

package/docs/guides/extending-the-admin-ui/nav-menu/index.mdx

@@ -10,7 +10,7 @@ access to routes in the app, and can be extended and modified by UI extensions.
 
 Once you have defined some custom routes, you need some way for the administrator to access them. For this you will use the [addNavMenuItem](/reference/admin-ui-api/nav-menu/add-nav-menu-item/) and [addNavMenuSection](/reference/admin-ui-api/nav-menu/add-nav-menu-section) functions.
 
-Let's add a new section to the Admin UI main nav bar containing a link to the "greeter" module from the [Getting Started guide](/guides/extending-the-admin-ui/getting-started/#routes) example:
+Let's add a new section to the Admin UI main nav bar containing a link to the "greeter" module from the [Getting Started guide](/extending-the-admin-ui/getting-started/#routes) example:
 
 ```ts title="src/plugins/greeter/ui/providers.ts"
 import { addNavMenuSection } from '@vendure/admin-ui/core';

package/docs/guides/extending-the-admin-ui/using-other-frameworks/index.mdx

@@ -202,4 +202,4 @@ If your extension does not have a build step, you can still include the UiDevkit
 
 ## Next Steps
 
-Now you have created your extension, you need a way for your admin to access it. See [Adding Navigation Items](/guides/extending-the-admin-ui/nav-menu/)
+Now you have created your extension, you need a way for your admin to access it. See [Adding Navigation Items](/extending-the-admin-ui/nav-menu/)

package/docs/guides/extending-the-dashboard/creating-pages/detail-pages.mdx

@@ -5,7 +5,7 @@ title: 'Creating Detail Pages'
 ## Setup
 
 :::info
-This guide assumes you have a `CmsPlugin` with an `Article` entity, as covered in the [Extending the Dashboard: Plugin Setup](/guides/extending-the-dashboard/extending-overview/#plugin-setup) guide.
+This guide assumes you have a `CmsPlugin` with an `Article` entity, as covered in the [Extending the Dashboard: Plugin Setup](/extending-the-dashboard/extending-overview/#plugin-setup) guide.
 :::
 
 Detail pages can be created for any entity which has been exposed via the Admin API. Following the

package/docs/guides/extending-the-dashboard/creating-pages/index.mdx

@@ -34,7 +34,7 @@ export function TestPage() {
 Following this structure ensures that:
 - Your pages look consistent with the rest of the Dashboard
 - Your page content is responsive
-- Your page can be further extended using the [pageBlocks API](/guides/extending-the-dashboard/customizing-pages/page-blocks)
+- Your page can be further extended using the [pageBlocks API](/extending-the-dashboard/customizing-pages/page-blocks)
 
 :::info
 Note that the [ListPage](/reference/dashboard/list-views/list-page) and [DetailPage](/reference/dashboard/detail-views/detail-page)
@@ -80,7 +80,7 @@ defineDashboardExtension({
 ```
 
 :::info
-For a complete guide to the navigation options available, see the [Navigation guide](/guides/extending-the-dashboard/navigation/)
+For a complete guide to the navigation options available, see the [Navigation guide](/extending-the-dashboard/navigation/)
 :::
 
 

package/docs/guides/extending-the-dashboard/creating-pages/list-pages.mdx

@@ -5,10 +5,10 @@ title: 'Creating List Pages'
 ## Setup
 
 :::info
-This guide assumes you have a `CmsPlugin` with an `Article` entity, as covered in the [Extending the Dashboard: Plugin Setup](/guides/extending-the-dashboard/extending-overview/#plugin-setup) guide.
+This guide assumes you have a `CmsPlugin` with an `Article` entity, as covered in the [Extending the Dashboard: Plugin Setup](/extending-the-dashboard/extending-overview/#plugin-setup) guide.
 :::
 
-List pages can be easily created for any query in the Admin API that follows the [PaginatedList pattern](/guides/how-to/paginated-list/).
+List pages can be easily created for any query in the Admin API that follows the [PaginatedList pattern](/how-to/paginated-list/).
 
 For example, the `articles` query of our `CmsPlugin` looks like this:
 

package/docs/guides/extending-the-dashboard/creating-pages/tabbed-pages.mdx

@@ -5,7 +5,7 @@ title: 'Creating Tabbed Pages'
 ## Setup
 
 :::info
-This guide assumes you have a basic understanding of creating custom pages in the Vendure Dashboard, as covered in the [Creating List Pages](/guides/extending-the-dashboard/creating-pages/list-pages) and [Creating Detail Pages](/guides/extending-the-dashboard/creating-pages/detail-pages) guides.
+This guide assumes you have a basic understanding of creating custom pages in the Vendure Dashboard, as covered in the [Creating List Pages](/extending-the-dashboard/creating-pages/list-pages) and [Creating Detail Pages](/extending-the-dashboard/creating-pages/detail-pages) guides.
 :::
 
 Tabbed pages allow you to organize related content into separate tabs within a single page. This is useful

package/docs/guides/extending-the-dashboard/custom-form-components/index.mdx

@@ -84,7 +84,7 @@ Here's how this component will look when rendered in your form:
 
 ## Custom Field Components
 
-Let's configure a [custom field](/guides/developer-guide/custom-fields/) which uses the `ColorPickerComponent` as its form component.
+Let's configure a [custom field](/developer-guide/custom-fields/) which uses the `ColorPickerComponent` as its form component.
 
 First we need to register the component with the `defineDashboardExtension` function:
 
@@ -138,7 +138,7 @@ export class MyPlugin {}
 
 ## Configurable Operation Components
 
-The `ColorPickerComponent` can also be used as a [configurable operation argument](/guides/developer-guide/strategies-configurable-operations/#configurable-operations) component. For example, we can add a color code
+The `ColorPickerComponent` can also be used as a [configurable operation argument](/developer-guide/strategies-configurable-operations/#configurable-operations) component. For example, we can add a color code
 to a shipping calculator:
 
 ```tsx title="src/plugins/my-plugin/config/custom-shipping-calculator.ts"
@@ -254,7 +254,7 @@ operation argument.
 
 You can access validation data for the current field or the whole form by using the `useFormContext` hook.
 
-:::note Error Messages
+:::note[Error Messages]
 Your component does not need to handle standard error messages - the Dashboard will handle them for you.
 
 For example, if your custom field specifies a `pattern` property, the Dashboard will automatically display an error message
@@ -306,7 +306,7 @@ export const ValidatedInputComponent: DashboardFormComponent = ({ value, onChang
 }
 ```
 
-:::tip Best Practices
+:::tip[Best Practices]
 
 1. **Always use Shadcn UI components** from the `@vendure/dashboard` package for consistent styling
 2. **Handle React Hook Form events properly** - call `onChange` and `onBlur` appropriately for custom field components

package/docs/guides/extending-the-dashboard/customizing-pages/action-bar-items.mdx

@@ -266,7 +266,7 @@ The dashboard provides several button variants you can use:
 
 To find the `pageId` for your action bar items:
 
-1. Enable [Dev Mode](/guides/extending-the-dashboard/extending-overview/#dev-mode) in the dashboard
+1. Enable [Dev Mode](/extending-the-dashboard/extending-overview/#dev-mode) in the dashboard
 2. Navigate to the page where you want to add your action
 3. The page ID will be shown in the dev mode overlay
 4. Use this ID in your action bar item configuration

package/docs/guides/extending-the-dashboard/customizing-pages/customizing-detail-pages.mdx

@@ -32,12 +32,12 @@ defineDashboardExtension({
 });
 ```
 
-To learn how to build custom form components, see the [Custom Form Elements guide](/guides/extending-the-dashboard/custom-form-components/).
+To learn how to build custom form components, see the [Custom Form Elements guide](/extending-the-dashboard/custom-form-components/).
 
 ## Extending the detail query
 
 You might want to extend the GraphQL query used to fetch the data for the detail page. For example, to include new
-fields that your plugin has defined so that you can render them in [custom page blocks](/guides/extending-the-dashboard/customizing-pages/page-blocks).
+fields that your plugin has defined so that you can render them in [custom page blocks](/extending-the-dashboard/customizing-pages/page-blocks).
 
 ```tsx title="index.tsx"
 import { defineDashboardExtension } from '@vendure/dashboard';

package/docs/guides/extending-the-dashboard/customizing-pages/customizing-login-page.mdx

@@ -44,7 +44,7 @@ This will result in a login page like this:
 ## Fully custom login pages
 
 If you need even more control over the login page, you can also create an
-[unauthenticated route](/guides/extending-the-dashboard/navigation/#unauthenticated-routes) with a completely
+[unauthenticated route](/extending-the-dashboard/navigation/#unauthenticated-routes) with a completely
 custom layout.
 
 ```tsx title="index.tsx"

package/docs/guides/extending-the-dashboard/customizing-pages/index.mdx

@@ -4,7 +4,7 @@ title: 'Customizing Pages'
 
 Existing pages in the Dashboard can be customized in many ways:
 
-- [Action bar buttons](/guides/extending-the-dashboard/customizing-pages/action-bar-items) can be added to the top of the page
-- [Page blocks](/guides/extending-the-dashboard/customizing-pages/page-blocks) can be added at any position, and existing page blocks can be replaced or removed.
-- [Extend list pages](/guides/extending-the-dashboard/customizing-pages/customizing-list-pages) with custom components, data and bulk actions
-- [Extend detail pages](/guides/extending-the-dashboard/customizing-pages/customizing-detail-pages) with custom components and data
+- [Action bar buttons](/extending-the-dashboard/customizing-pages/action-bar-items) can be added to the top of the page
+- [Page blocks](/extending-the-dashboard/customizing-pages/page-blocks) can be added at any position, and existing page blocks can be replaced or removed.
+- [Extend list pages](/extending-the-dashboard/customizing-pages/customizing-list-pages) with custom components, data and bulk actions
+- [Extend detail pages](/extending-the-dashboard/customizing-pages/customizing-detail-pages) with custom components and data

package/docs/guides/extending-the-dashboard/customizing-pages/page-blocks.mdx

@@ -3,7 +3,7 @@ title: 'Page Blocks'
 ---
 
 In the Dashboard, all pages are built from blocks. Every block has a `pageId` and a `blockId` which uniquely locates it in the
-app (see [Dev Mode](/guides/extending-the-dashboard/extending-overview/#dev-mode) section).
+app (see [Dev Mode](/extending-the-dashboard/extending-overview/#dev-mode) section).
 
 You can also define your own blocks, which can be added to any page and can even replace the default blocks.
 
@@ -229,12 +229,12 @@ defineDashboardExtension({
 
 To find the `pageId` and `blockId` values for positioning your blocks:
 
-1. Enable [Dev Mode](/guides/extending-the-dashboard/extending-overview/#dev-mode) in the dashboard
+1. Enable [Dev Mode](/extending-the-dashboard/extending-overview/#dev-mode) in the dashboard
 2. Navigate to the page where you want to add your block
 3. Hover over existing blocks to see their IDs
 4. Use these IDs in your block positioning configuration
 
-:::tip Best Practices
+:::tip[Best Practices]
 
 1. **Use descriptive IDs**: Choose clear, unique IDs for your blocks
 2. **Position thoughtfully**: Consider the user experience when placing blocks

package/docs/guides/extending-the-dashboard/data-fetching/index.mdx

@@ -119,7 +119,7 @@ to a file - by default you can find it at `src/gql/graphql-env.d.ts`.
 When you then use the `import { graphql } from '@/gql'` function to define your queries and mutations, you get automatic
 type safety when using the results in your components!
 
-When you have the `@/gql` path mapping correctly [set up as per the getting started guide](/guides/extending-the-dashboard/getting-started/#installation--setup), you should see that
+When you have the `@/gql` path mapping correctly [set up as per the getting started guide](/extending-the-dashboard/getting-started/#installation--setup), you should see that
 your IDE is able to infer the TypeScript type of your queries and mutations, including the correct inputs and return
 types!
 

package/docs/guides/extending-the-dashboard/deployment/index.mdx

@@ -51,7 +51,7 @@ export default defineConfig({
 
 ### 2. Add DashboardPlugin to Vendure Config
 
-:::info Angular Admin UI compatibility
+:::info[Angular Admin UI compatibility]
 If you want to use the Angular Admin UI and the Dashboard together, both plugins can now be used simultaneously without any special configuration.
 :::
 
@@ -151,7 +151,7 @@ export default defineConfig({
 });
 ```
 
-:::warning Build-Time Variables
+:::warning[Build-Time Variables]
 Environment variables are resolved at **build time** and embedded as static strings in the final bundles. Ensure these variables are available during the build process, not just at runtime.
 :::
 

package/docs/guides/extending-the-dashboard/extending-overview/index.mdx

@@ -220,6 +220,6 @@ In Dev Mode, hovering any block in the dashboard will allow you to find the corr
 
 Now that you understand the fundamentals of extending the dashboard, explore these specific guides:
 
-- [Creating Pages](/guides/extending-the-dashboard/creating-pages/) 
-- [Customizing Pages](/guides/extending-the-dashboard/customizing-pages/) 
-- [Navigation](/guides/extending-the-dashboard/navigation/) 
+- [Creating Pages](/extending-the-dashboard/creating-pages/) 
+- [Customizing Pages](/extending-the-dashboard/customizing-pages/) 
+- [Navigation](/extending-the-dashboard/navigation/) 

package/docs/guides/extending-the-dashboard/getting-started/index.mdx

@@ -185,7 +185,7 @@ npx vite
 
 To stop the running dashboard, type `q` and hit enter.
 
-:::info Compatibility with the legacy Admin UI
+:::info[Compatibility with the legacy Admin UI]
 If you still need to run the legacy Angular-based Admin UI in parallel with the Dashboard,
 this is totally possible. Both plugins can now be used simultaneously without any special configuration.
 :::

package/docs/guides/extending-the-dashboard/migration/index.mdx

@@ -16,7 +16,7 @@ Community contributions will always be merged and released.
 A recommended approach to migrating is to run both the Admin UI _and_ the new Dashboard in parallel. This allows you to start building
 new features right away with the new Dashboard while maintaining access to existing features that have not yet been migrated.
 
-To do so, follow the instructions to [set up the Dashboard](/guides/extending-the-dashboard/getting-started/#installation--setup).
+To do so, follow the instructions to [set up the Dashboard](/extending-the-dashboard/getting-started/#installation--setup).
 Both plugins can now be used simultaneously without any special configuration.
 
 ## AI-Assisted Migration
@@ -1589,14 +1589,14 @@ It is very likely you'll still need to do _some_ manual cleanup after an AI-assi
 things like:
 
 - Non-optimum styling choices
-- Issues with the [tsconfig setup](/guides/extending-the-dashboard/getting-started/#installation--setup) not being perfectly implemented.
+- Issues with the [tsconfig setup](/extending-the-dashboard/getting-started/#installation--setup) not being perfectly implemented.
 - For more complex repo structures like a monorepo with plugins as separate libs, you may need to manually implement
   the initial setup of the config files.
 
 ## Manual Migration
 
-If you would rather do a full manual migration, you should first follow the [Dashboard Getting Started guide](/guides/extending-the-dashboard/getting-started/)
-and the [Extending the Dashboard guide](http://localhost:3001/guides/extending-the-dashboard/extending-overview/).
+If you would rather do a full manual migration, you should first follow the [Dashboard Getting Started guide](/extending-the-dashboard/getting-started/)
+and the [Extending the Dashboard guide](http://localhost:3001/extending-the-dashboard/extending-overview/).
 
 The remainder of this document details specific features, and how they are now implemented in the new Dashboard.
 

package/docs/guides/extending-the-dashboard/navigation/index.mdx

@@ -43,7 +43,7 @@ The dashboard comes with several built-in sections:
 
 ### Finding Section IDs & Ordering
 
-You can find the available IDs & their order value for all navigation sections and items using [Dev mode](/guides/extending-the-dashboard/extending-overview/#dev-mode):
+You can find the available IDs & their order value for all navigation sections and items using [Dev mode](/extending-the-dashboard/extending-overview/#dev-mode):
 
 ![Dev mode navigation ids](./dev-mode-nav.webp)
 
@@ -158,7 +158,7 @@ Order values are scoped within each placement area. This means:
 
 This means if you want to add a section between Catalog and Sales in the top area, you might use `order: 250`. If you want to add a section before Settings in the bottom area, you could use `order: 150`.
 
-:::note Default Placement
+:::note[Default Placement]
 If you don't specify a `placement`, sections default to `'top'` placement.
 :::
 
@@ -311,7 +311,7 @@ Common icons for navigation sections:
 
 ## Best Practices
 
-:::tip Navigation Design Guidelines
+:::tip[Navigation Design Guidelines]
 
 1. **Use descriptive section names**: Choose clear, concise names that indicate the section's purpose
 2. **Group related functionality**: Keep logically related menu items in the same section

package/docs/guides/getting-started/graphql-intro/index.mdx

@@ -50,8 +50,8 @@ Both GraphQL and REST are valid approaches to building an API. These are some of
 - **Many resources in a single request**: Very often, a single page in a web app will need to fetch data from multiple resources. For example, a product detail page might need to fetch the product, the product's variants, the product's collections, the product's reviews, and the product's images. With REST, this would require multiple requests. With GraphQL, you can fetch all of this data in a single request.
 - **Static typing**: GraphQL APIs are always defined by a statically typed schema. This means that you can be sure that the data you receive from the API will always be in the format you expect.
 - **Developer tooling**: The schema definition allows for powerful developer tooling. For example, the GraphQL Playground above with auto-complete and full documentation is generated automatically from the schema definition. You can also get auto-complete and type-checking directly in your IDE.
-- **Code generation**: TypeScript types can be generated automatically from the schema definition. This means that you can be sure that your frontend code is always in sync with the API. This end-to-end type safety is extremely valuable, especially when working on large projects or with teams. See the [GraphQL Code Generation guide](/guides/storefront/codegen/)
-- **Extensible**: Vendure is designed with extensibility in mind, and GraphQL is a perfect fit. You can extend the GraphQL API with your own custom queries, mutations, and types. You can also extend the built-in types with your own custom fields, or supply you own custom logic to resolve existing fields. See the [Extend the GraphQL API guide](/guides/developer-guide/extend-graphql-api/)
+- **Code generation**: TypeScript types can be generated automatically from the schema definition. This means that you can be sure that your frontend code is always in sync with the API. This end-to-end type safety is extremely valuable, especially when working on large projects or with teams. See the [GraphQL Code Generation guide](/storefront/codegen/)
+- **Extensible**: Vendure is designed with extensibility in mind, and GraphQL is a perfect fit. You can extend the GraphQL API with your own custom queries, mutations, and types. You can also extend the built-in types with your own custom fields, or supply you own custom logic to resolve existing fields. See the [Extend the GraphQL API guide](/developer-guide/extend-graphql-api/)
 
 ## GraphQL Terminology
 
@@ -398,7 +398,7 @@ type EmailAddressInUseError {
 ```
 
 :::info
-In Vendure, we use this pattern for almost all mutations. You can read more about it in the [Error Handling guide](/guides/developer-guide/error-handling/).
+In Vendure, we use this pattern for almost all mutations. You can read more about it in the [Error Handling guide](/developer-guide/error-handling/).
 :::
 
 Now, when we perform this mutation, we need alter the way we select the fields in the response, since the response could be one of two types:
@@ -484,7 +484,7 @@ A resolver is a function which is responsible for fetching the data for a partic
 would be resolved by a function which fetches the list of customers from the database.
 
 To get started with Vendure's APIs, you don't need to know much about resolvers beyond this basic understanding. However,
-later on you may want to write your own custom resolvers to extend the API. This is covered in the [Extending the GraphQL API guide](/guides/developer-guide/extend-graphql-api/).
+later on you may want to write your own custom resolvers to extend the API. This is covered in the [Extending the GraphQL API guide](/developer-guide/extend-graphql-api/).
 
 ## Querying data
 
@@ -555,7 +555,7 @@ can use to provide autocomplete.
 
 Code generation means the automatic generation of TypeScript types based on your GraphQL schema and your GraphQL operations. This is a very powerful feature that allows you to write your code in a type-safe manner, without you needing to manually write any types for your API calls.
 
-For more information see the [GraphQL Code Generation guide](/guides/storefront/codegen).
+For more information see the [GraphQL Code Generation guide](/storefront/codegen).
 
 ## Further reading
 

package/docs/guides/getting-started/installation/index.mdx

@@ -76,7 +76,7 @@ If you'd rather have more control over the configuration, you can choose the "Ma
 
 Vendure supports a number of different databases. The `@vendure/create` tool will prompt you to select one.
 
-**To quickly test out Vendure, we recommend using SQLite**, which requires no external dependencies. You can always switch to a different database later [by changing your configuration file](/guides/developer-guide/configuration/#connecting-to-the-database).
+**To quickly test out Vendure, we recommend using SQLite**, which requires no external dependencies. You can always switch to a different database later [by changing your configuration file](/developer-guide/configuration/#connecting-to-the-database).
 
 ```text
 ┌  Let's create a Vendure App ✨
@@ -104,7 +104,7 @@ If you select MySQL, MariaDB, or Postgres, you need to make sure you:
 
 3. **Have database credentials**: You need the username and password for a database user that has full permissions (CREATE, ALTER, DROP, INSERT, UPDATE, DELETE, SELECT) on the database you created.
 
-For detailed database configuration examples, see the [Configuration guide](/guides/developer-guide/configuration/#connecting-to-the-database).
+For detailed database configuration examples, see the [Configuration guide](/developer-guide/configuration/#connecting-to-the-database).
 
 :::
 
@@ -112,7 +112,7 @@ For detailed database configuration examples, see the [Configuration guide](/gui
 
 The final prompt will ask whether to populate your new Vendure server with some sample product data.
 
-**We recommend you do so**, as it will give you a good starting point for exploring the APIs, which we will cover in the [Try the API section](/guides/getting-started/try-the-api/), as well as providing some data to use when building your own storefront.
+**We recommend you do so**, as it will give you a good starting point for exploring the APIs, which we will cover in the [Try the API section](/getting-started/try-the-api/), as well as providing some data to use when building your own storefront.
 
 ```text
 ┌  Let's create a Vendure App ✨
@@ -203,9 +203,9 @@ If you included the Next.js Storefront Starter, you can also access:
 
 Congratulations! 🥳 You now have a fully functional Vendure server running locally.
 
-Now you can explore Vendure by following our [Try the API guide](/guides/getting-started/try-the-api/) to learn how to interact with the server.
+Now you can explore Vendure by following our [Try the API guide](/getting-started/try-the-api/) to learn how to interact with the server.
 
-If you are new to GraphQL, you should also check out our [Introducing GraphQL guide](/guides/getting-started/graphql-intro/).
+If you are new to GraphQL, you should also check out our [Introducing GraphQL guide](/getting-started/graphql-intro/).
 
 :::tip
 Open the Dashboard at [http://localhost:3000/dashboard](http://localhost:3000/dashboard) in your browser and log in with the superadmin credentials you specified, which default to:

package/docs/guides/getting-started/try-the-api/index.mdx

@@ -2,7 +2,7 @@
 title: 'Try the API'
 ---
 
-Once you have successfully installed Vendure locally following the [installation guide](/guides/getting-started/installation),
+Once you have successfully installed Vendure locally following the [installation guide](/getting-started/installation),
 it's time to try out the API!
 
 :::note
@@ -162,7 +162,7 @@ if the response is an `ErrorResult`, we want to include the `errorCode` and `mes
 Running this mutation a second time should show that the quantity of the product in the order has increased by 1.
 
 :::info
-For more information about `ErrorResult` and the handling of errors in Vendure, see the [Error Handling guide](/guides/developer-guide/error-handling).
+For more information about `ErrorResult` and the handling of errors in Vendure, see the [Error Handling guide](/developer-guide/error-handling).
 :::
 
 ## Admin API