docs: changes to main docs sidebar (#11750)

* docs: changes to main docs sidebar

* fix links

* fix vale test

* fix vale errors

www/packages/build-scripts/src/utils/number-sidebar-items.ts

@@ -17,10 +17,12 @@ export default function numberSidebarItems(
     }
 
     // append current number to the item's title
-    item.chapterTitle = `${numbering.join(".")}. ${
+    const currentNumbering = `${numbering.join(".")}.`
+    item.chapterTitle = `${currentNumbering} ${
       item.chapterTitle?.trim() || item.title?.trim()
     }`
     item.title = item.title.trim()
+    item.number = currentNumbering
 
     if (isTopItems) {
       // Add chapter category

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

@@ -87,10 +87,6 @@ export const Breadcrumbs = () => {
             ""
         )
       }
-      tempBreadcrumbItems.set(
-        getLinkPath(sidebarActiveItem) || "/",
-        sidebarActiveItem.chapterTitle || sidebarActiveItem.title || ""
-      )
     }
 
     return tempBreadcrumbItems

www/packages/docs-ui/src/components/Sidebar/Item/Link/index.tsx

@@ -119,6 +119,8 @@ export const SidebarItemLink = ({
             "flex justify-between items-center gap-[6px]",
             className
           )}
+          target={item.type === "external" ? "_blank" : undefined}
+          rel={item.type === "external" ? "noopener noreferrer" : undefined}
           {...item.linkProps}
         >
           <span

www/packages/docs-ui/src/components/Sidebar/Item/index.tsx

@@ -31,6 +31,7 @@ export const SidebarItem = ({
       return <SidebarItemSubCategory item={item} {...props} />
     case "link":
     case "ref":
+    case "external":
       return <SidebarItemLink item={item} {...props} />
     case "separator":
       return <DottedSeparator />

www/packages/docs-ui/src/providers/Sidebar/index.tsx

@@ -21,7 +21,7 @@ import {
   InteractiveSidebarItem,
   SidebarItemCategory,
   SidebarItemLinkWithParent,
-  SidebarItemTypes,
+  InteractiveSidebarItemTypes,
 } from "types"
 import { useIsBrowser } from "../BrowserProvider"
 
@@ -71,7 +71,7 @@ export const SidebarContext = createContext<SidebarContextType | null>(null)
 export type ActionOptionsType = {
   section?: SidebarItemSections
   parent?: {
-    type: SidebarItemTypes
+    type: InteractiveSidebarItemTypes
     path: string
     title: string
     changeLoaded?: boolean

www/packages/tags/src/tags/index.ts

@@ -1,40 +1,40 @@
 export * from "./user-guide.js"
-export * from "./fulfillment.js"
+export * from "./order.js"
 export * from "./payment.js"
 export * from "./pricing.js"
-export * from "./product.js"
 export * from "./promotion.js"
-export * from "./customer.js"
 export * from "./user.js"
+export * from "./auth.js"
+export * from "./product.js"
 export * from "./api-key.js"
+export * from "./stock-location.js"
 export * from "./workflow.js"
 export * from "./region.js"
-export * from "./stock-location.js"
-export * from "./order.js"
-export * from "./auth.js"
+export * from "./sales-channel.js"
 export * from "./currency.js"
+export * from "./tax.js"
+export * from "./store.js"
 export * from "./concept.js"
+export * from "./query.js"
 export * from "./inventory.js"
 export * from "./cart.js"
-export * from "./query.js"
-export * from "./storefront.js"
-export * from "./sales-channel.js"
+export * from "./customer.js"
+export * from "./fulfillment.js"
+export * from "./product-category.js"
+export * from "./stripe.js"
 export * from "./checkout.js"
 export * from "./server.js"
-export * from "./example.js"
-export * from "./store.js"
-export * from "./js-sdk.js"
 export * from "./publishable-api-key.js"
-export * from "./tax.js"
+export * from "./product-collection.js"
+export * from "./js-sdk.js"
+export * from "./logger.js"
 export * from "./step.js"
 export * from "./remote-query.js"
-export * from "./link.js"
-export * from "./event-bus.js"
-export * from "./product-collection.js"
-export * from "./stripe.js"
-export * from "./locking.js"
-export * from "./logger.js"
-export * from "./notification.js"
-export * from "./file.js"
+export * from "./example.js"
 export * from "./admin.js"
-export * from "./product-category.js"
+export * from "./notification.js"
+export * from "./event-bus.js"
+export * from "./file.js"
+export * from "./link.js"
+export * from "./storefront.js"
+export * from "./locking.js"

www/packages/types/src/sidebar.ts

@@ -13,14 +13,21 @@ export type SidebarItemCommon = {
   additionalElms?: React.ReactNode
   chapterTitle?: string
   hideChildren?: boolean
+  // generated by scripts
+  number?: string
   // can be used to hold any description relevant when showing cards, etc...
   description?: string
 }
 
-export type SidebarItemTypes = "category" | "sub-category" | "link" | "ref"
+export type InteractiveSidebarItemTypes =
+  | "category"
+  | "sub-category"
+  | "link"
+  | "ref"
+  | "external"
 
 export type SidebarItemLink = SidebarItemCommon & {
-  type: "link" | "ref"
+  type: "link" | "ref" | "external"
   path: string
   isPathHref?: boolean
   linkProps?: React.AllHTMLAttributes<HTMLAnchorElement>
@@ -68,7 +75,7 @@ export type RawSidebarItem = SidebarItem & {
   number?: string
 } & (
     | {
-        type: "category" | "sub-category" | "link" | "ref"
+        type: InteractiveSidebarItemTypes
         children?: RawSidebarItem[]
       }
     | {