docs: intro + basic chapter fixes (#10361)

2024-12-02 09:31:47 +02:00
parent a1f36caaf7
commit b4d6a4b3f0
17 changed files with 105 additions and 91 deletions
@@ -29,6 +29,8 @@ You create a UI route in a `page.tsx` file under a sub-directory of `src/admin/r

 For example, create the file `src/admin/routes/custom/page.tsx` with the following content:

+![Example of UI route file in the application's directory structure](https://res.cloudinary.com/dza7lstvk/image/upload/v1732867243/Medusa%20Book/ui-route-dir-overview_tgju25.jpg)
+
 ```tsx title="src/admin/routes/custom/page.tsx"
 import { Container, Heading } from "@medusajs/ui"

@@ -110,6 +112,8 @@ The above example adds a new sidebar item with the label `Custom Route` and an i

 Consider that along the UI route above at `src/admin/routes/custom/page.tsx` you create a nested UI route at `src/admin/routes/custom/nested/page.tsx` that also exports route configurations:

+![Example of nested UI route file in the application's directory structure](https://res.cloudinary.com/dza7lstvk/image/upload/v1732867243/Medusa%20Book/ui-route-dir-overview_tgju25.jpg)
+
 ```tsx title="src/admin/routes/custom/nested/page.tsx"
 import { defineRouteConfig } from "@medusajs/admin-sdk"
 import { Container, Heading } from "@medusajs/ui"
@@ -149,6 +153,8 @@ To create a page under the settings section of the admin dashboard, create a UI

 For example, create a UI route at `src/admin/routes/settings/custom/page.tsx`:

+![Example of settings UI route file in the application's directory structure](https://res.cloudinary.com/dza7lstvk/image/upload/v1732867435/Medusa%20Book/setting-ui-route-dir-overview_kytbh8.jpg)
+
 ```tsx title="src/admin/routes/settings/custom/page.tsx"
 import { defineRouteConfig } from "@medusajs/admin-sdk"
 import { Container, Heading } from "@medusajs/ui"
@@ -180,6 +186,8 @@ A UI route can accept path parameters if the name of any of the directories in i

 For example, create the file `src/admin/routes/custom/[id]/page.tsx` with the following content:

+![Example of UI route file with path parameters in the application's directory structure](https://res.cloudinary.com/dza7lstvk/image/upload/v1732867748/Medusa%20Book/path-param-ui-route-dir-overview_kcfbev.jpg)
+
 ```tsx title="src/admin/routes/custom/[id]/page.tsx" highlights={[["5", "", "Retrieve the path parameter."], ["10", "{id}", "Show the path parameter."]]}
 import { useParams } from "react-router-dom"
 import { Container, Heading } from "@medusajs/ui"
@@ -29,6 +29,8 @@ You create a widget in a `.tsx` file under the `src/admin/widgets` directory. Th

 For example, create the file `src/admin/widgets/product-widget.tsx` with the following content:

+![Example of widget file in the application's directory structure](https://res.cloudinary.com/dza7lstvk/image/upload/v1732867137/Medusa%20Book/widget-dir-overview_dqsbct.jpg)
+
 export const widgetHighlights = [
  ["5", "ProductWidget", "The React component of the product widget."], 
  ["17", "zone", "The zone to inject the widget to."]