diff --git a/www/apps/resources/app/admin-components/page.mdx b/www/apps/resources/app/admin-components/page.mdx
index 97dab89aff..0606c53f65 100644
--- a/www/apps/resources/app/admin-components/page.mdx
+++ b/www/apps/resources/app/admin-components/page.mdx
@@ -1,20 +1,24 @@
import { ChildDocs } from "docs-ui"
export const metadata = {
- title: `Admin Components`,
+ title: `Admin Components & Layouts`,
}
# {metadata.title}
-In this section, you'll find examples of implementing common Medusa Admin components and layouts.
+In this section of the documentation, you'll learn how to implement common Medusa Admin components and layouts.
-These components are useful to follow the same design conventions as the Medusa Admin, and are build on top of the [Medusa UI package](!ui!).
+These guides are useful to build components and layouts that follow the same design conventions as the Medusa Admin. The components and layouts are built on top of the [Medusa UI package](!ui!).
+
+
Refer to the [Medusa UI documentation](!ui!) for a full list of components.
+
+
## Layouts
-Use these components to set the layout of your UI route.
+These layout components allow you to set the layout of your [UI routes](!docs!/learn/fundamentals/admin/ui-routes) similar to the layouts used in the Medusa Admin.
@@ -22,6 +26,6 @@ Use these components to set the layout of your UI route.
## Components
-Use these components in your widgets and UI routes.
+These components allow you to use common Medusa Admin components in your custom UI routes and widgets.
diff --git a/www/apps/resources/app/deployment/page.mdx b/www/apps/resources/app/deployment/page.mdx
index c0783a3211..840f25b3a1 100644
--- a/www/apps/resources/app/deployment/page.mdx
+++ b/www/apps/resources/app/deployment/page.mdx
@@ -1,4 +1,4 @@
-import { ChildDocs } from "docs-ui"
+import { CardList, Card } from "docs-ui"
export const metadata = {
title: `Deployments`,
@@ -32,7 +32,20 @@ With Medusa Cloud, you maintain full customization control as you deploy your ow
To host and maintain Medusa on your own, check out the following guides.
-
+
---
@@ -40,4 +53,8 @@ To host and maintain Medusa on your own, check out the following guides.
Learn how to deploy the Next.js Starter Storefront.
-
+
diff --git a/www/apps/resources/app/how-to-tutorials/page.mdx b/www/apps/resources/app/how-to-tutorials/page.mdx
new file mode 100644
index 0000000000..6c8c8b41e6
--- /dev/null
+++ b/www/apps/resources/app/how-to-tutorials/page.mdx
@@ -0,0 +1,25 @@
+import { ChildDocs } from "docs-ui"
+
+export const metadata = {
+ title: `How-to & Tutorials`,
+}
+
+# {metadata.title}
+
+In this section of the documentation, you'll find how-to guides and tutorials that will help you customize the Medusa server and admin. These guides are useful after you've learned Medusa's main concepts in the [Get Started](!docs!/learn) section of the documentation.
+
+You can follow these guides to learn how to customize the Medusa server and admin to fit your business requirements. This section of the documentation also includes deployment guides to help you deploy your Medusa server and admin to different platforms.
+
+## Example Snippets
+
+For a quick access to code snippets of the different concepts you learned about, such as API routes and workflows, refer to the [Examples Snippets](../examples/page.mdx) documentation.
+
+---
+
+
+
+---
+
+## Deployment Guides
+
+Deployment guides are a collection of guides that help you deploy your Medusa server and admin to different platforms. Learn more in the [Deployment Overview](../deployment/page.mdx) documentation.
diff --git a/www/apps/resources/app/medusa-workflows-reference/page.mdx b/www/apps/resources/app/medusa-workflows-reference/page.mdx
index 8cf608a2d5..1c04113af6 100644
--- a/www/apps/resources/app/medusa-workflows-reference/page.mdx
+++ b/www/apps/resources/app/medusa-workflows-reference/page.mdx
@@ -20,7 +20,7 @@ Through this reference, you'll learn about the available workflows and steps in
All workflows and steps in this reference are exported by the `@medusajs/medusa/core-flows` package.
- {
- const { shownSidebar, activeItem } = useSidebar()
+ const { shownSidebar, activeItem, getSidebarFirstLinkChild } = useSidebar()
const { isBrowser } = useIsBrowser()
const [searchQuery, setSearchQuery] = useState("")
const [localSearch, setLocalSearch] = useState<
@@ -135,21 +137,27 @@ export const useChildDocs = ({
)
}
- const getChildrenForLevel = (
- item: Sidebar.InteractiveSidebarItem,
- currentLevel = 1
- ): Sidebar.InteractiveSidebarItem[] | undefined => {
- if (currentLevel === childLevel) {
- return filterNonInteractiveItems(item.children)
- }
- if (!item.children) {
+ const getChildrenForLevel = ({
+ item,
+ currentLevel = 1,
+ }: {
+ item: Sidebar.InteractiveSidebarItem
+ currentLevel?: number
+ }): Sidebar.InteractiveSidebarItem[] | undefined => {
+ if ((endChildLevel > 0 && currentLevel > endChildLevel) || !item.children) {
return
}
+ if (currentLevel >= startChildLevel) {
+ return filterNonInteractiveItems(item.children)
+ }
const childrenResult: Sidebar.InteractiveSidebarItem[] = []
filterNonInteractiveItems(item.children).forEach((child) => {
- const childChildren = getChildrenForLevel(child, currentLevel + 1)
+ const childChildren = getChildrenForLevel({
+ item: child,
+ currentLevel: currentLevel + 1,
+ })
if (!childChildren) {
return
@@ -196,7 +204,7 @@ export const useChildDocs = ({
} else {
filteredItems?.forEach((item) => {
const childItems: Sidebar.SidebarItemLink[] =
- (getChildrenForLevel(item)?.filter((childItem) => {
+ (getChildrenForLevel({ item })?.filter((childItem) => {
return isSidebarItemLink(childItem)
}) as Sidebar.SidebarItemLink[]) || []
searchableItems.push(...childItems)
@@ -283,12 +291,17 @@ export const useChildDocs = ({
)
}
- const getAllLevelsElms = (
- items?: Sidebar.InteractiveSidebarItem[],
- headerLevel = titleLevel
- ) => {
+ const getAllLevelsElms = ({
+ items,
+ headerLevel = titleLevel,
+ currentLevel = 1,
+ }: {
+ items?: Sidebar.InteractiveSidebarItem[]
+ headerLevel?: number
+ currentLevel?: number
+ }) => {
return items?.map((item, key) => {
- const itemChildren = getChildrenForLevel(item)
+ const itemChildren = getChildrenForLevel({ item, currentLevel })
const HeadingComponent = itemChildren?.length
? TitleHeaderComponent(headerLevel)
: undefined
@@ -315,22 +328,39 @@ export const useChildDocs = ({
)}
{isChildrenCategory &&
- getAllLevelsElms(itemChildren, headerLevel + 1)}
+ getAllLevelsElms({
+ items: itemChildren,
+ headerLevel: headerLevel + 1,
+ currentLevel: currentLevel + 1,
+ })}
{!isChildrenCategory && (
({
- title: childItem.title,
- href: isSidebarItemLink(childItem) ? childItem.path : "",
- text: childItem.description,
- rightIcon:
- childItem.type === "ref"
- ? ChevronDoubleRight
- : undefined,
- })) || []
+ itemChildren
+ ?.filter(
+ (item) =>
+ isSidebarItemLink(item) || item.type === "sidebar"
+ )
+ .map((childItem) => {
+ const href = isSidebarItemLink(childItem)
+ ? childItem.path
+ : getSidebarFirstLinkChild(
+ childItem as Sidebar.SidebarItemSidebar
+ )?.path
+ return {
+ title: childItem.title,
+ href,
+ text: childItem.description,
+ rightIcon:
+ childItem.type === "ref"
+ ? ChevronDoubleRight
+ : undefined,
+ }
+ }) || []
}
itemsPerRow={itemsPerRow}
defaultItemsPerRow={defaultItemsPerRow}
+ className="mb-docs_1"
/>
)}
{key !== items.length - 1 && headerLevel === 2 &&
}
@@ -398,7 +428,9 @@ export const useChildDocs = ({
<>
{onlyTopLevel
? getTopLevelElms(filteredItems)
- : getAllLevelsElms(filteredItems)}
+ : getAllLevelsElms({
+ items: filteredItems,
+ })}
)}