docs: revise storefront development guide (#10522)

www/apps/resources/app/storefront-development/page.mdx

@@ -6,8 +6,18 @@ export const metadata = {
 
 # {metadata.title}
 
-This section of the documentation holds guides to help you build a storefront for your Medusa application.
+The Medusa application is made up of a Node.js service and an admin dashboard. The storefront is installed, built, and hosted separately from the Medusa application, providing you with the flexibility to choose the frontend tech stack that you and your team are proficient in, and implement unique design systems and user experience. 
 
-<ChildDocs onlyTopLevel={true} showItems={["Tips", "Publishable API Key"]} />
+<Note>
 
-<ChildDocs hideItems={["Tips", "Publishable API Key"]} />
+Learn more about Medusa's architecture in [this documentation](!docs!/learn/introduction/architecture).
+
+</Note>
+
+You can build your storefront from scratch, or built it on top of the [Next.js Starter storefront](../nextjs-starter/page.mdx). This section of the documentation provides guides to help you build a storefront from scratch for your Medusa application.
+
+<ChildDocs showItems={["General"]} />
+
+---
+
+<ChildDocs hideItems={["General"]} />

www/apps/resources/generated/edit-dates.mjs

@@ -193,7 +193,7 @@ export const generatedEditDates = {
   "app/storefront-development/regions/store-retrieve-region/page.mdx": "2024-09-11T10:07:42.887Z",
   "app/storefront-development/regions/page.mdx": "2024-06-09T15:19:09+02:00",
   "app/storefront-development/tips/page.mdx": "2024-10-22T11:01:01.298Z",
-  "app/storefront-development/page.mdx": "2024-06-09T15:19:09+02:00",
+  "app/storefront-development/page.mdx": "2024-12-10T09:23:20.666Z",
   "app/troubleshooting/cors-errors/page.mdx": "2024-05-03T17:36:38+03:00",
   "app/troubleshooting/create-medusa-app-errors/page.mdx": "2024-07-11T10:29:13+03:00",
   "app/troubleshooting/database-errors/page.mdx": "2024-05-03T17:36:38+03:00",

www/apps/resources/generated/sidebar.mjs

@@ -8088,6 +8088,12 @@ export const generatedSidebar = [
     "path": "/storefront-development",
     "title": "Storefront Development",
     "isChildSidebar": true,
+    "children": [
+      {
+        "loaded": true,
+        "isPathHref": true,
+        "type": "category",
+        "title": "General",
         "children": [
           {
             "loaded": true,
@@ -8104,9 +8110,8 @@ export const generatedSidebar = [
             "path": "/storefront-development/publishable-api-keys",
             "title": "Publishable API Key",
             "children": []
-      },
-      {
-        "type": "separator"
+          }
+        ]
       },
       {
         "loaded": true,

www/apps/resources/sidebar.mjs

@@ -1816,6 +1816,10 @@ export const sidebar = sidebarAttachHrefCommonOptions([
     path: "/storefront-development",
     title: "Storefront Development",
     isChildSidebar: true,
+    children: [
+      {
+        type: "category",
+        title: "General",
         children: [
           {
             type: "link",
@@ -1827,8 +1831,7 @@ export const sidebar = sidebarAttachHrefCommonOptions([
             path: "/storefront-development/publishable-api-keys",
             title: "Publishable API Key",
           },
-      {
-        type: "separator",
+        ],
       },
       {
         type: "category",

www/packages/docs-ui/src/components/ChildDocs/index.tsx

@@ -4,6 +4,9 @@ import React, { useMemo } from "react"
 import { Card, CardList, H2, useSidebar } from "../.."
 import { InteractiveSidebarItem, SidebarItem, SidebarItemLink } from "types"
 import slugify from "slugify"
+import { MDXComponents } from "../.."
+
+const Hr = MDXComponents["hr"] as () => React.JSX.Element
 
 type ChildDocsProps = {
   onlyTopLevel?: boolean
@@ -148,8 +151,9 @@ export const ChildDocs = ({
     )
   }
 
-  const getAllLevelsElms = (items?: SidebarItem[]) =>
-    filterNonInteractiveItems(items).map((item, key) => {
+  const getAllLevelsElms = (items?: SidebarItem[]) => {
+    const filteredItems = filterNonInteractiveItems(items)
+    return filteredItems.map((item, key) => {
       const itemChildren = getChildrenForLevel(item)
       const HeadingComponent = itemChildren?.length ? H2 : undefined
 
@@ -170,6 +174,7 @@ export const ChildDocs = ({
                   })) || []
                 }
               />
+              {key !== filteredItems.length - 1 && <Hr />}
             </>
           )}
           {!HeadingComponent && item.type === "link" && (
@@ -178,6 +183,7 @@ export const ChildDocs = ({
         </React.Fragment>
       )
     })
+  }
 
   const getElms = (items?: SidebarItem[]) => {
     return onlyTopLevel ? getTopLevelElms(items) : getAllLevelsElms(items)