docs: added ecommerce recipe (#5017)

* docs: added ecommerce recipe

* fix eslint errors

www/docs/content/recipes/b2b.mdx

@@ -7,7 +7,7 @@ import DocCard from '@theme/DocCard';
 import Icons from '@theme/Icon';
 import LearningPath from '@site/src/components/LearningPath';
 
-# B2B / Wholesale Recipe
+# B2B Recipe
 
 This document guides you through the different documentation resources that will help you build a B2B store with Medusa.
 

www/docs/content/recipes/ecommerce.mdx

@@ -0,0 +1,129 @@
+---
+addHowToData: true
+---
+
+import DocCardList from '@theme/DocCardList';
+import DocCard from '@theme/DocCard';
+import Icons from '@theme/Icon';
+
+# Ecommerce Recipe
+
+This document guides you through building an ecommerce store with Medusa and start selling.
+
+## Overview
+
+Businesses use an ecommerce store to allow customers to browse their products and make purchases. It also includes accepting payments, managing orders, and more.
+
+Medusa provides all essential commerce features out-of-the-box. Businesses can go live and start selling without making any adjustments. They can also power-up their store with plugins for payment, fulfillment, and more.
+
+:::tip
+
+Recommended read: [How Tekla created an ecommerce store using Medusa](https://medusajs.com/blog/tekla-agilo-pos-case/).
+
+:::
+
+<LearningPath pathName="simple-quickstart" />
+
+---
+
+## Create a Next.js Starter Storefront
+
+The Medusa backend can be used with any storefront. All you have to do is connect to its Store APIs to utilize the backend's commerce features.
+
+You can install, use, and customize the Next.js starter storefront to benefit from all the necessary ecommerce features. Alternatively, you can build your own storefront.
+
+<DocCard item={{
+  type: 'link',
+  href: '/starters/nextjs-medusa-starter',
+  label: 'Install Next.js Storefront',
+  customProps: {
+    icon: Icons['academic-cap-solid'],
+    description: 'Learn how to install the Next.js starter storefront.',
+  }
+}} />
+
+---
+
+## (Optional) Install Plugins
+
+Medusa provides official plugins that you can use for payment, fulfillment, search, and more. These plugins can provide additional functionalities for both your backend and your storefront.
+
+For example, if you want to accept payment with Stripe, you can install the [Stripe plugin](../plugins/payment/stripe.mdx).
+
+<DocCard item={{
+  type: 'link',
+  href: '/plugins/overview',
+  label: 'Explore Plugins',
+  customProps: {
+    icon: Icons['academic-cap-solid'],
+    description: 'Explore official plugins and learn how to install them.',
+  }
+}} />
+
+---
+
+## Deploy the Backend
+
+The first step to go live is to deploy the Medusa backend. The deployment guides available in our documentation provide extensive step-by-step guide for different hosting providers, as well as a general deployment guide that you can follow to deploy your backend to other providers.
+
+<DocCard item={{
+  type: 'link',
+  href: '/deployments/server',
+  label: 'Deploy Backend',
+  customProps: {
+    icon: Icons['academic-cap-solid'],
+    description: 'Learn how to deploy the backend to your preferred hosting provider.',
+  }
+}} />
+
+---
+
+## Deploy the Storefront
+
+You can now deploy your storefront. The instructions defer whether you're using the Next.js storefront, a custom storefront, or other forms of storefronts such as a mobile app.
+
+<DocCard item={{
+  type: 'link',
+  href: '/deployments/storefront',
+  label: 'Deploy Next.js Storefront',
+  customProps: {
+    icon: Icons['academic-cap-solid'],
+    description: 'Learn how to deploy the Next.js storefront to your preferred hosting provider.',
+  }
+}} />
+
+---
+
+## Explore Features and Development Resources
+
+Our documentation includes guides related to Medusa's features and how to customize your store. You can learn about how to add new features to your storefront and backend, how to customize existing features, or how to use the Medusa admin to perform different ecommerce functionalities.
+
+<DocCardList colSize={4} items={[
+  {
+    type: 'link',
+    href: '/modules/overview',
+    label: 'Commerce Modules',
+    customProps: {
+      icon: Icons['academic-cap-solid'],
+      description: 'Learn about Medusa\'s commerce features and check out available guides.',
+    }
+  },
+  {
+    type: 'link',
+    href: '/development/overview',
+    label: 'Medusa Development',
+    customProps: {
+      icon: Icons['academic-cap-solid'],
+      description: 'Learn about how the Medusa backend works and how you can customize it.',
+    }
+  },
+  {
+    type: 'link',
+    href: '/user-guide',
+    label: 'Admin User Guide',
+    customProps: {
+      icon: Icons['users-solid'],
+      description: 'Learn about available admin functionalities and how to use them.',
+    }
+  },
+]} />

www/docs/content/recipes/oms.mdx

@@ -3,7 +3,6 @@ addHowToData: true
 ---
 
 import DocCardList from '@theme/DocCardList';
-import DocCard from '@theme/DocCard';
 import Icons from '@theme/Icon';
 
 # Order Management System (OMS)
@@ -16,6 +15,12 @@ An order management system (OMS) is a system that provides features to track and
 
 Medusa can be used within a larger ecosystem as an OMS. Its modular architecture and commerce features make it easy for developers to integrate it with other services while utilizing powerful OMS features, including returns, exchanges, and order edits.
 
+:::tip
+
+Recommended read: [How Siam Makro used Medusa an OMS](https://medusajs.com/blog/makro-omnichannel-order-orchestration/).
+
+:::
+
 ---
 
 ## Source Orders into Medusa

www/docs/content/recipes/subscriptions.mdx

@@ -13,6 +13,12 @@ Subscription-based purchase allows customers to purchase products for a specifie
 
 For example, a customer can purchase a book subscription box for a period of three months. Each month, the payment will be captured for that order and, if the payment is successful, the fulfillment will be processed.
 
+:::tip
+
+Recommended read: [How Goodchef built subscription-based purchases with Medusa](https://medusajs.com/blog/goodchef-webbers-powering-subscriptions-with-medusas-commerce-modules/).
+
+:::
+
 <LearningPath pathName="subscriptions" />
 
 ---

www/docs/sidebars.js

@@ -47,6 +47,15 @@ module.exports = {
       },
       className: "homepage-sidebar-item",
       items: [
+        {
+          type: "doc",
+          id: "recipes/ecommerce",
+          label: "Ecommerce",
+          customProps: {
+            iconName: "shopping-cart",
+            excludeFromDocList: true,
+          },
+        },
         {
           type: "doc",
           id: "recipes/marketplace",
@@ -106,7 +115,7 @@ module.exports = {
         {
           type: "doc",
           id: "recipes/b2b",
-          label: "B2B / Wholesale",
+          label: "B2B",
           customProps: {
             iconName: "building-solid",
           },

www/docs/src/theme/Details/index.tsx

@@ -49,8 +49,8 @@ export default function Details({
         event.stopPropagation()
       }}
       className={clsx(
-        "border-medusa-border-base dark:border-medusa-border-base-dark border-y border-solid border-x-0",
-        "overflow-hidden [&>summary]:relative [&>summary]:z-[400]",
+        "border-x-0 border-y border-solid border-medusa-border-base dark:border-medusa-border-base-dark",
+        "overflow-hidden [&>summary]:relative [&>summary]:z-[398]",
         props.className
       )}
     >

www/docs/src/theme/DocCardList/index.tsx

@@ -21,7 +21,10 @@ export default function DocCardList(props: ModifiedProps): JSX.Element {
   if (!items) {
     return <DocCardListForCurrentSidebarCategory {...props} />
   }
-  const filteredItems = filterDocCardListItems(items)
+  const filteredItems = filterDocCardListItems(items).filter(
+    (item) => !item.customProps.excludeFromDocList
+  )
+
   return (
     <section
       className={clsx("cards-grid", `grid-${props.colSize || "4"}`, className)}