asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: merge conflicts

Browse Source
This commit is contained in:
olivermrbl
2022-05-01 14:58:28 +02:00
parent 9ff5dc98ed 56e79d334e
commit d0675dc8b5
60 changed files with 589 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/content/add-plugins/minio.md
View File

@@ -46,7 +46,11 @@ Then configure your `medusa-config.js` to include the plugin alongside the requi
The two access keys in the options are the ones created in the previous section.
> Make sure to use an environment variable for the secret key in a live environment.
:::tip
Make sure to use an environment variable for the secret key in a live environment.
:::
### Try it out

6
docs/content/add-plugins/s3.md
View File

@@ -78,7 +78,11 @@ https://[bucket].s3.[region].amazonaws.com
The two access keys in the options are the ones created in the previous section.
> Make sure to use an environment variable for the secret key in a live environment.
:::tip
Make sure to use an environment variable for the secret key in a live environment.
:::
### Try it out

6
docs/content/add-plugins/segment.md
View File

@@ -21,7 +21,11 @@ Common integration use cases that can be implemented with Segment include:
## Adding Segment to your Medusa store
> Note: you should create a [Node.js source in Segment](https://segment.com/docs/connections/sources/catalog/libraries/server/node/quickstart/) in order to obtain the write key that will be provided in the plugin options.
:::note
You should create a [Node.js source in Segment](https://segment.com/docs/connections/sources/catalog/libraries/server/node/quickstart/) in order to obtain the write key that will be provided in the plugin options.
:::
Plugins in Medusa's ecosystem come as separate npm packages, that can be installed from the npm registry.

6
docs/content/add-plugins/spaces.md
View File

@@ -47,7 +47,11 @@ Then configure your `medusa-config.js` to include the plugin alongside the requi
In the above options, a `spaces_url` is included. This can be found in your Space overview. The `bucket` should point to the name you gave your Space. The `endpoint` identifies the region in which you created the Space. And finally the two keys are the ones created in the previous section.
> Make sure to use an environment variable for the secret key in a live environment.
:::tip
Make sure to use an environment variable for the secret key in a live environment.
:::
### Try it out!

29
docs/content/add-plugins/strapi.md
View File

@@ -37,7 +37,11 @@ Alternatively, using Yarn:
yarn create medusa-app
```
> When choosing `npx` you are shown different store engine options as part of the setup. For this Strapi tutorial, you should choose `medusa-starter-default`. Optionally, pick a storefront.
:::note
When choosing `npx` you are shown different store engine options as part of the setup. For this Strapi tutorial, you should choose `medusa-starter-default`. Optionally, pick a storefront.
:::
**Use `medusa-cli`**
`@medusajs/medusa-cli` is our Command Line Tool for creating the Medusa store engine (alongside many other powerful commands). First, install it:
@@ -116,12 +120,19 @@ Alternatively, using Yarn:
yarn global add create-strapi-app@3.6.8
create-strapi-app strapi-medusa --template https://github.com/Deathwish98/strapi-medusa-template.git
```
:::note
> Note: The plugin expects node version to be '>= 10.16.0 and <=14.x.x', otherwise it will throw an error.
The plugin expects node version to be '>= 10.16.0 and <=14.x.x', otherwise it will throw an error.
:::
After running the command, you have a full Strapi project configured to synchronize with Medusa. Upon the initial start of the Strapi server, all the required models will be created. They will correlate with models from Medusa to allow for two-way synchronization.
> Note: The Strapi template starter uses SQLite as the default database. There is a known bug related to `knex.js` that comes from multiple write connections. Restarting the Strapi server should make the error disappear.
:::caution
The Strapi template starter uses SQLite as the default database. There is a known bug related to `knex.js` that comes from multiple write connections. Restarting the Strapi server should make the error disappear.
:::
**Synchronization**
@@ -133,7 +144,11 @@ When products are created in Medusa, the two-way communication ensures that data
**Variants**: title
**Region**: name
> Further down the road, the support for synchronizing more entities is expected to be introduced
:::note
Further down the road, the support for synchronizing more entities is expected to be introduced
:::
**Using Postgres in Medusa (optional)**
@@ -157,7 +172,11 @@ projectConfig: {
},
```
> Note: the `DATABASE_URL` variable should use the Postgres database created in the previous step
:::tip
The `DATABASE_URL` variable should use the Postgres database created in the previous step
:::
## Summary and next steps

14
docs/content/advanced/backend/payment/frontend-payment-flow-in-checkout.md
View File

@@ -2,12 +2,17 @@
## Introduction
The purpose of this guide is to describe a checkout flow in Medusa. It is assumed that you've completed our [Quickstart](https://docs.medusajs.com/quickstart/quick-start) or [Tutorial](https://docs.medusajs.com/tutorial/set-up-your-development-environment) and are familiar with the technologies we use in our stack. Additionally, having an understanding of the [core API](https://docs.medusajs.com/api/store/auth) would serve as a great foundation for this walkthrough.
> All code snippets in the following guide, use the JS SDK distributed through **npm**. To install it, run:
:::note
All code snippets in the following guide, use the JS SDK distributed through **npm**. To install it, run:
```bash npm2yarn
npm install @medusajs/medusa-js
```
:::
## Glossary
- **Cart**: The Cart contains all the information needed for customers to complete an Order. In the Cart customers gather the items they wish to purchase, they add shipping and billing details and complete payment information.
- **LineItem**: Line Items represent an expense added to a Cart. Typically this will be a Product Variant and a certain quantity of the same variant. Line Items hold descriptive fields that help communicate its contents and price.
@@ -17,7 +22,12 @@ npm install @medusajs/medusa-js
## Checkout flow
To create an order from a cart, we go through the following flow.
> At this point, it assumed that the customer has created a cart, added items and is now at the initial step of the checkout flow.
:::note
At this point, it assumed that the customer has created a cart, added items and is now at the initial step of the checkout flow.
:::
### Initializing the checkout
The first step in the flow is to _initialize_ the configured Payment Sessions for the Cart. If you are using the `medusa-starter-default` starter, this call will result in the `cart.payment_sessions` array being filled with one Payment Session for the manual payment provider.

6
docs/content/advanced/backend/subscribers/create-subscriber.md
View File

@@ -69,7 +69,11 @@ export default OrderNotifierSubscriber;
This subscriber will register the method `handleOrder` as one of the handlers of the `order.placed` event. The method `handleOrder` will be executed every time an order is placed, and it will receive the order ID in the `data` parameter. You can then use the order’s details to perform any kind of task you need.
> The `data` object will not contain other order data. Only the ID of the order. You can retrieve the order information using the `orderService`.
:::note
The `data` object will not contain other order data. Only the ID of the order. You can retrieve the order information using the `orderService`.
:::
## Using Services in Subscribers

18
docs/content/guides/plugins.md
View File

@@ -12,7 +12,11 @@ Plugins offer a way to extend and integrate the core functionality of Medusa.
In most commerce solutions, you can extend the basic features but it often comes with the expense of having to build standalone web applications. Our architecture is built such that plugins run within the same process as the core eliminating the need for extra server capacity, infrastructure and maintenance. As a result, the plugins can use all other services as dependencies and access the database.
> You will notice that plugins vary in naming. The name should signal what functionality they provide.
:::note
You will notice that plugins vary in naming. The name should signal what functionality they provide.
:::
In the following sections, we will go through the basics of implementing a generic plugin. And finally, how to use it as part of your commerce setup.
@@ -34,7 +38,11 @@ We've already gone through the process of building custom services, endpoints, a
To quickly get started with the implementation, we advise you to copy `/services/welcome.js`, `/api/index.js`, `/subscribers/welcome.js` and the config files from the tutorial and add them in `/src`. As a result, you should have the following folder structure:
> Please note: since the container resolution paths are automatically generated from the used directories and filenames you should avoid pre- or suffixing your file (e.g. `services/welcomeService.js` would result in the service being registered as `WelcomeServiceService`).
:::note
Since the container resolution paths are automatically generated from the used directories and filenames you should avoid pre- or suffixing your file (e.g. `services/welcomeService.js` would result in the service being registered as `WelcomeServiceService`).
:::
```js
.
@@ -55,7 +63,11 @@ Please note that you will need some build step before being able to properly loa
It is worth mentioning the difference between building a generic and a non-generic plugin. A non-generic plugin has a specific purpose such as processing payments or creating fulfillments. Medusa core depends on a specific implementation from such plugins, which is why we've created interfaces that enforce this. These can be found in `medusa-interfaces`.
> Note: Non-generic plugins are required to extend the correct interface, otherwise they will not be loaded correctly as part of your Medusa setup.
:::note
Non-generic plugins are required to extend the correct interface, otherwise they will not be loaded correctly as part of your Medusa setup.
:::
For a more comprehensive walkthrough of the implementation of such plugins, see our guides:

50
docs/content/homepage.mdx
View File

@@ -23,35 +23,35 @@ You can learn more about Medusa's architecture in [our introduction](/introducti
![Medusa's Architecture](https://i.imgur.com/ZHvM2bu.png)
<div class="container" style={{ padding: 0 }}>
<div class="row is-multiline">
<div class="col col--6">
<Link class="card" to="/tutorial/set-up-your-development-environment" style={{ height: '100%' }}>
<div class="card__body">
<div className="container" style={{ padding: 0 }}>
<div className="row is-multiline">
<div className="col col--6">
<Link className="card box-link" to="/tutorial/set-up-your-development-environment" style={{ height: '100%' }}>
<div className="card__body">
<h4>Tutorial</h4>
<p>Set up your local development environment</p>
</div>
</Link>
</div>
<div class="col col--6">
<Link class="card" to="/tutorial/adding-custom-functionality" style={{ height: '100%' }}>
<div class="card__body">
<div className="col col--6">
<Link className="card box-link" to="/tutorial/adding-custom-functionality" style={{ height: '100%' }}>
<div className="card__body">
<h4>Make it your own</h4>
<p>Create custom endpoints, services, or subscribers.</p>
</div>
</Link>
</div>
<div class="col col--6">
<Link class="card" to="/guides/plugins" style={{ height: '100%' }}>
<div class="card__body">
<div className="col col--6">
<Link className="card box-link" to="/guides/plugins" style={{ height: '100%' }}>
<div className="card__body">
<h4>Plugins</h4>
<p>Add or build a plugin to make your engine more powerful.</p>
</div>
</Link>
</div>
<div class="col col--6">
<Link class="card" to="/how-to/deploying-on-heroku" style={{ height: '100%' }}>
<div class="card__body">
<div className="col col--6">
<Link className="card box-link" to="/how-to/deploying-on-heroku" style={{ height: '100%' }}>
<div className="card__body">
<h4>Deploy in seconds</h4>
<p>Use one of our guides to deploy your Medusa project in seconds.</p>
</div>
@@ -66,28 +66,28 @@ Visit our [Quickstart](https://github.com/medusajs/medusa#-quickstart) to get up
## What you'll find here
<div class="container" style={{ padding: 0 }}>
<div class="row is-multiline">
<div class="col col--4">
<Link class="card" to="/quickstart/quick-start" style={{ height: '100%' }}>
<div class="card__body">
<div className="container" style={{ padding: 0 }}>
<div className="row is-multiline">
<div className="col col--4">
<Link className="card box-link" to="/quickstart/quick-start" style={{ height: '100%' }}>
<div className="card__body">
<h4>Quickstart</h4>
<p>A short guide to get you quickly started.</p>
</div>
</Link>
</div>
<div class="col col--4">
<Link class="card" to="/how-to/notification-api" style={{ height: '100%' }}>
<div class="card__body">
<div className="col col--4">
<Link className="card box-link" to="/how-to/notification-api" style={{ height: '100%' }}>
<div className="card__body">
<h4>How-to and guides</h4>
<p>Guides and walkthroughs of concepts, tools, deployment and APIs.</p>
</div>
</Link>
</div>
{/* Ref */}
<div class="col col--4">
<a class="card" href="https://docs.medusajs.com/api/store" target="_blank" style={{ height: '100%' }}>
<div class="card__body">
<div className="col col--4">
<a className="card box-link" href="https://docs.medusajs.com/api/store" target="_blank" style={{ height: '100%' }}>
<div className="card__body">
<h4>Reference</h4>
<p>Technical documentation of the Medusa API.</p>
</div>

12
docs/content/how-to/deploying-admin-on-netlify.md
View File

@@ -6,7 +6,11 @@ title: "Deploying Admin on Netlify"
This is a guide for deploying Medusa Admin on Netlify. Netlify is a platform that offers hosting and backend services for applications and static websites.
> At this point, you should have a running instance of Medusa Admin. If not, check out [these steps](https://github.com/medusajs/admin#-setting-up-admin) or use `npx create-medusa-app` to set up your application in a matter of minutes. For the latter, see [this guide](https://docs.medusajs.com/how-to/create-medusa-app) for a small walkthrough.
:::note
At this point, you should have a running instance of Medusa Admin. If not, check out [these steps](https://github.com/medusajs/admin#-setting-up-admin) or use `npx create-medusa-app` to set up your application in a matter of minutes. For the latter, see [this guide](https://docs.medusajs.com/how-to/create-medusa-app) for a small walkthrough.
:::
### 1. Install the Netlify CLI
@@ -62,7 +66,11 @@ git push origin main
Within a couple of minutes, your Medusa Admin is live and running on Netlify.
> If you experience CORS issues in your new setup, you might need to add your admin url as part of the ADMIN_CORS environment variable in your server setup.
:::tip
If you experience CORS issues in your new setup, you might need to add your admin url as part of the ADMIN_CORS environment variable in your server setup.
:::
### What's next?

18
docs/content/how-to/deploying-on-digital-ocean.md
View File

@@ -2,7 +2,11 @@
This is a guide for deploying a Medusa project on DigitalOcean App Platform.
> It is assumed, that you are currently running a local instance of Medusa. If not, check out our [Quickstart](https://docs.medusajs.com/quickstart/quick-start) or use `npx create-medusa-app` to set up your application in a matter of minutes. For the latter, see [this guide](https://docs.medusajs.com/how-to/create-medusa-app) for a small walkthrough.
:::note
It is assumed, that you are currently running a local instance of Medusa. If not, check out our [Quickstart](https://docs.medusajs.com/quickstart/quick-start) or use `npx create-medusa-app` to set up your application in a matter of minutes. For the latter, see [this guide](https://docs.medusajs.com/how-to/create-medusa-app) for a small walkthrough.
:::
### 1. Configure Medusa
@@ -83,7 +87,11 @@ Navigate to the top-right dropdown **Create** and select **Apps**.
Choose **GitHub** or **GitLab** and select the repository that holds your Medusa project. Check **Autodeploy code changes**, if you want DigitalOcean to deploy on every push to your repository.
> It's important, that DigitalOcean is pointing to the directory holding the Medusa store engine as it is only this which that will be deployed (If you followed the quickstart guide this will simply be the created project, and if you used the npx command this will be the backend folder inside of the newly created project).
:::tip
It's important, that DigitalOcean is pointing to the directory holding the Medusa store engine as it is only this which that will be deployed (If you followed the quickstart guide this will simply be the created project, and if you used the npx command this will be the backend folder inside of the newly created project).
:::
### 5. Configure environment variables
@@ -100,7 +108,11 @@ JWT_SECRET=your-jwt-secret
COOKIE_SECRET=your-cookie-secret
```
> Make sure to use actual secrets in a production environment
:::tip
Make sure to use actual secrets in a production environment
:::
### 6. Set up a Database

29
docs/content/how-to/deploying-on-heroku.md
View File

@@ -12,7 +12,11 @@ This is a guide for deploying a Medusa project on Heroku. Heroku is at PaaS that
</video>
</div>
> We assume, that you are currently running a local instance of Medusa. If not, check out our [Quickstart](https://docs.medusajs.com/quickstart/quick-start) or use `npx create-medusa-app` to set up your application in a matter of minutes. For the latter, see [this guide](https://docs.medusajs.com/how-to/create-medusa-app) for a small walkthrough.
:::note
We assume, that you are currently running a local instance of Medusa. If not, check out our [Quickstart](https://docs.medusajs.com/quickstart/quick-start) or use `npx create-medusa-app` to set up your application in a matter of minutes. For the latter, see [this guide](https://docs.medusajs.com/how-to/create-medusa-app) for a small walkthrough.
:::
### 1. Install the Heroku CLI
@@ -45,7 +49,11 @@ Connect to your Heroku account from your terminal:
heroku login
```
> Follow the instructions on your terminal
:::note
Follow the instructions on your terminal
:::
### 3. Create an app on Heroku
@@ -60,7 +68,11 @@ heroku git:remote -a medusa-test-app
Medusa requires a Postgres database and a Redis instance to work. These are added through the Heroku CLI using the following commands.
> In this below example, we initialize the resources on free plans. This is not a valid configuration for a production environment.
:::tip
In this below example, we initialize the resources on free plans. This is not a valid configuration for a production environment.
:::
#### Postgresql
@@ -76,7 +88,11 @@ You can find more informations, plans and pricing about Heroku Postgres [here](h
Add a Redis instance to your Heroku app
> The addon `redistogo:nano` is free, but Heroku requires you to add a payment method to proceed.
:::note
The addon `redistogo:nano` is free, but Heroku requires you to add a payment method to proceed.
:::
```bash
heroku addons:create redistogo:nano
@@ -94,8 +110,11 @@ heroku config:set JWT_SECRET=your-super-secret
heroku config:set COOKIE_SECRET=your-super-secret-pt2
heroku config:set NPM_CONFIG_PRODUCTION=false
```
:::tip
> Make sure to use actual secrets in a production environment.
Make sure to use actual secrets in a production environment.
:::
Additionally, we need to set the buildpack to Node.js

30
docs/content/how-to/deploying-on-qovery.md
View File

@@ -2,7 +2,11 @@
This is a guide for deploying a Medusa project to Qovery. Qovery is a Continuous Deployment Platform, that provides you with the developer experience of Heroku on top of your cloud provider (e.g. AWS, DigitalOcean).
> We assume, that you are currently running a local instance of Medusa. If not, check out our [Quickstart](https://docs.medusajs.com/quickstart/quick-start) or use `npx create-medusa-app` to set up your application in a matter of minutes. For the latter, see [this guide](https://docs.medusajs.com/how-to/create-medusa-app) for a small walkthrough.
:::note
We assume, that you are currently running a local instance of Medusa. If not, check out our [Quickstart](https://docs.medusajs.com/quickstart/quick-start) or use `npx create-medusa-app` to set up your application in a matter of minutes. For the latter, see [this guide](https://docs.medusajs.com/how-to/create-medusa-app) for a small walkthrough.
:::
### 1. Qovery Console
@@ -16,7 +20,11 @@ Create a project and an environment.
Add a new app to your Qovery environment and connect the Git repository that holds your Medusa project. In your application settings, set the port to 9000 unless something else is specified in your setup.
> If you used our `npx` starter, your repository will most likely hold all components; storefront, admin and backend. Ensure that **Root application path** in Qovery is pointing to your Medusa project (`/backend`).
:::note
If you used our `npx` starter, your repository will most likely hold all components; storefront, admin and backend. Ensure that **Root application path** in Qovery is pointing to your Medusa project (`/backend`).
:::
### 4. Add a database
@@ -61,10 +69,14 @@ module.exports = {
};
```
> **IMPORTANT**: We are using the Qovery community plan, that does not allow SSL connections for the database, so this is disabled.
>
> In a production environment, you would need the following in the config:
> `database_extra: { ssl: { rejectUnauthorized: false } }`
:::caution IMPORTANT
We are using the Qovery community plan, that does not allow SSL connections for the database, so this is disabled.
In a production environment, you would need the following in the config:
`database_extra: { ssl: { rejectUnauthorized: false } }`
:::
#### Add some extra variables
@@ -75,7 +87,11 @@ JTW_SECRET=something_secret_jwt
COOKIE_SECRET=something_secret_cookie
```
> Make sure to use actual secrets in a production environment.
:::tip
Make sure to use actual secrets in a production environment.
:::
#### Update `package.json`

12
docs/content/how-to/headless-ecommerce-store-with-gatsby-contentful-medusa.md
View File

@@ -4,7 +4,11 @@ title: Create a headless ecommerce store with Gatsby, Contentful & Medusa
# Creating a headless ecommerce store with Gatsby, Contentful and Medusa
> Medusa is an open source headless commerce engine that allow you to create amazing digital commerce experiences. Medusa is highly customizable, allowing you to extend the core to fit your needs.
:::info About Medusa
Medusa is an open source headless commerce engine that allow you to create amazing digital commerce experiences. Medusa is highly customizable, allowing you to extend the core to fit your needs.
:::
## Introduction
@@ -33,7 +37,11 @@ If you want to jump straight to the code for this series you can checkout:
## Prerequisites
> For a full guide to how to set up your development environment for Medusa please see [the tutorial](https://docs.medusajs.com/tutorials/set-up-your-development-environment)
:::note
For a full guide to how to set up your development environment for Medusa please see [the tutorial](https://docs.medusajs.com/tutorials/set-up-your-development-environment)
:::
In order to get you started with your Gatsby, Contentful, Medusa store you must complete a couple of installations:

18
docs/content/how-to/making-your-store-more-powerful-with-contentful.md
View File

@@ -76,11 +76,13 @@ npm run migrate:contentful --file contentful-migrations/update-page-module-valid
To use your new Rich Text module **Content > Page > About**, and click **Add Content > Page**. You will now make use of the new Rich Text module to add some more details about your store. You can write your own text or use the text provided below if you just want to copy/paste.
> ### About Medusa
>
> Medusa is an open-source headless commerce engine for fast-growing businesses. Getting started with Medusa is very easy and you will be able to start selling online with a basic setup in no time, however, the real power of Medusa starts showing up when you add custom functionality and extend your core to fit your needs.
>
> The core Medusa package and all the official Medusa plugins ship as individual NPM packages that you install into a Node project. You store and plugins are configured in your medusa-config.js file making it very easy to manage your store as your business grows. Custom functionality doesn't have to come from plugins, you can also add project-level functionality by simply adding files in your `src/` folder. Medusa will automatically register your custom functionalities in the bootstrap phase.
:::info About Medusa
Medusa is an open-source headless commerce engine for fast-growing businesses. Getting started with Medusa is very easy and you will be able to start selling online with a basic setup in no time, however, the real power of Medusa starts showing up when you add custom functionality and extend your core to fit your needs.
The core Medusa package and all the official Medusa plugins ship as individual NPM packages that you install into a Node project. You store and plugins are configured in your medusa-config.js file making it very easy to manage your store as your business grows. Custom functionality doesn't have to come from plugins, you can also add project-level functionality by simply adding files in your `src/` folder. Medusa will automatically register your custom functionalities in the bootstrap phase.
:::
![](https://i.imgur.com/hqiaoFq.png)
@@ -88,7 +90,11 @@ When you have added your text you can click **Publish changes** (make sure the A
## Updating the storefront to support the Rich Text module
> If you want to jump straight to the final frontend code visit [medusajs/medusa-contentful-storefront@part-2](https://github.com/medusajs/medusa-contentful-storefront/tree/part-2).
:::note
If you want to jump straight to the final frontend code visit [medusajs/medusa-contentful-storefront@part-2](https://github.com/medusajs/medusa-contentful-storefront/tree/part-2).
:::
To display your newly created Rich Text module open up the storefront code and create a new file at `src/components/rich-text/rich-text.jsx`.

8
docs/content/how-to/notification-api.md
View File

@@ -78,8 +78,12 @@ class MyService extends NotificationService {
export default MyService;
```
> **Note:** a notification service must have a static property called `identifier` this is used to determine which classes are called when subscribing to different events. In this case the service identifier is `my-service` so to subscribe to notifications you must use:
> `notificationService.subscribe([eventname], "my-service")`
:::note
A notification service must have a static property called `identifier` this is used to determine which classes are called when subscribing to different events. In this case the service identifier is `my-service` so to subscribe to notifications you must use:
`notificationService.subscribe([eventname], "my-service")`
:::
The above class is an example implementation of a NotificationService. It uses a fictional email service called `CoolEmailSender` to send emails to a customer whenever an order is placed. The `sendNotification` implementation gets the event name and fetches relevant data based on what event is being processed; in this case it retrieves an order, which is later used when requesting `CoolEmailSender` to dispatch an email. The address to send the email to is likewise fetched from the order.

8
docs/content/how-to/setting-up-a-nextjs-storefront-for-your-medusa-project.md
View File

@@ -4,8 +4,12 @@ title: Setting up a Next.js storefront for your Medusa project
# Setting up a Next.js storefront for your Medusa project
> Medusa is a headless open source commerce platform giving engineers the foundation for building unique and scalable digital commerce projects through our API-first engine.
> Being headless, our starters serve as a good foundation for you to get coupled with a frontend in a matter of minutes.
:::note
Medusa is a headless open source commerce platform giving engineers the foundation for building unique and scalable digital commerce projects through our API-first engine.
Being headless, our starters serve as a good foundation for you to get coupled with a frontend in a matter of minutes.
:::
This article assumes you already have the Medusa project created and ready to be linked to your Next.js starter.

6
docs/content/how-to/uploading-images-to-minio.md
View File

@@ -46,7 +46,11 @@ Then configure your `medusa-config.js` to include the plugin alongside the requi
The two access keys in the options are the ones created in the previous section.
> Make sure to use an environment variable for the secret key in a live environment.
:::tip
Make sure to use an environment variable for the secret key in a live environment.
:::
### Try it out

6
docs/content/how-to/uploading-images-to-s3.md
View File

@@ -78,7 +78,11 @@ https://[bucket].s3.[region].amazonaws.com
The two access keys in the options are the ones created in the previous section.
> Make sure to use an environment variable for the secret key in a live environment.
:::tip
Make sure to use an environment variable for the secret key in a live environment.
:::
### Try it out

6
docs/content/how-to/uploading-images-to-spaces.md
View File

@@ -41,7 +41,11 @@ Then configure your `medusa-config.js` to include the plugin alongside the requi
In the above options, a `spaces_url` is included. This can be found in your Space overview. The `bucket` should point to the name you gave your Space. The `endpoint` identifies the region in which you created the Space. And finally the two keys are the ones created in the previous section.
> Make sure to use an environment variable for the secret key in a live environment.
:::tip
Make sure to use an environment variable for the secret key in a live environment.
:::
### Try it out!

6
docs/content/quickstart/quick-start.md
View File

@@ -50,7 +50,11 @@ We have created two starters for you that can help you lay a foundation for your
- [Nextjs Starter](https://github.com/medusajs/nextjs-starter-medusa)
- [Gatsby Starter](https://github.com/medusajs/gatsby-starter-medusa)
> Note: Medusa runs on port 9000 by default and the storefront starters are both configured to run on port 8000. If you wish to run your storefront starter on another port you should update your CORS settings in your project's `medusa-config.js`.
:::tip
Medusa runs on port 9000 by default and the storefront starters are both configured to run on port 8000. If you wish to run your storefront starter on another port you should update your CORS settings in your project's `medusa-config.js`.
:::
<!-- ### Link you local development to Medusa Cloud (Coming soon!)

6
docs/content/troubleshooting/transaction-error-in-checkout.md
View File

@@ -34,8 +34,12 @@ module.exports = {
}
```
> When changing from SQLite to Postgres, you should seed the database again using:
:::tip
When changing from SQLite to Postgres, you should seed the database again using:
```bash npm2yarn
npm run seed
```
:::

6
docs/content/tutorial/0-set-up-your-development-environment.md
View File

@@ -58,7 +58,11 @@ If you prefer using something like homebrew you can also run:
brew install node
```
> **Mac users**: Make sure that you have Xcode command line tools installed; if not run `xcode-select --install`
:::tip
**Mac users**: Make sure that you have Xcode command line tools installed; if not run `xcode-select --install`
:::
### Git

6
docs/content/tutorial/1-creating-your-medusa-server.md
View File

@@ -51,7 +51,11 @@ For customizations that are more particular to your project you can extend your
## Starting your Medusa server
> Note: For your server to run correctly you should configure your `COOKIE_SECRET` and `JWT_SECRET` environment variables by adding a `.env` file to the root of your Medusa project.
:::note
For your server to run correctly you should configure your `COOKIE_SECRET` and `JWT_SECRET` environment variables by adding a `.env` file to the root of your Medusa project.
:::
After your project has been set up with `medusa new`, you can run the following commands to start your server:

19
docs/content/tutorial/2-adding-custom-functionality.md
View File

@@ -52,7 +52,11 @@ constructor({ cartService, orderService }) {
In the constructor we specify that our `WelcomeService` will depend upon the `cartService` and `orderService` and Medusa will make sure to provide those as the first argument to the constructor when starting up Medusa. We then keep a reference to these services within the `WelcomeService` so that we can use them later on.
> Note: Just like we can depend on the `cartService` and `orderService` other services will be able to depend on our newly created `WelcomeService`. The registration name of our service is the camelCased version of our file name with the registration type appended. I.e. `/src/services/welcome.js` -> `welcomeService`.
:::note
Just like we can depend on the `cartService` and `orderService` other services will be able to depend on our newly created `WelcomeService`. The registration name of our service is the camelCased version of our file name with the registration type appended. I.e. `/src/services/welcome.js` -> `welcomeService`.
:::
### `registerOptin`
@@ -72,7 +76,12 @@ async registerOptin(cartId, optin) {
The `registerOptin` implementation simply validates that the provided argument is of the correct type and calls the CartService function `update`. `update` takes two arguments: the first is the id of the cart to update and the second is an object that with the key/value pairs that we want to update. In this case we are updating the metadata on the cart. The `metadata` field on the cart is itself an object so we need to pass an object when updating this field.
> Note: Most entities in Medusa have a `metadata` field that can be used for customizations or integrations when it is necessary to persist some data relating to the entity. Metadata cannot be overridden by other plugins.
:::note
Most entities in Medusa have a `metadata` field that can be used for customizations or integrations when it is necessary to persist some data relating to the entity. Metadata cannot be overridden by other
plugins.
:::
### `sendWelcome`
@@ -115,7 +124,11 @@ We then check if the number of previous orders is greater than 1, indicating tha
The final part of the implementation checks if the `welcome_optin` metadata has been set to true. If the customer has opted in we use `someEmailService.send` to trigger and email dispatch to the email stored on the order. In this case `someEmailSender` could be any email service for example Sendgrid, SES, Mailgun, etc.
> Note: If you have `medusa-plugin-sendgrid` installed you can use `sendgridService` in your constructor to use it later in `sendWelcome`. You will then be able to do `sendgridService.send({ ... })`.
:::note
If you have `medusa-plugin-sendgrid` installed you can use `sendgridService` in your constructor to use it later in `sendWelcome`. You will then be able to do `sendgridService.send({ ... })`.
:::
We have completed the implementation of our custom service and we will now be able to call it from elsewhere in our project.

12
docs/content/tutorial/3-linking-your-local-project-with-medusa-cloud.md
View File

@@ -40,9 +40,17 @@ The `link` command will first check that you have authenticated your CLI which w
You should note that the `--develop` flag is optional for the `link` command. If provided it tells the CLI to start up your server after linking is completed; you may leave it out if you'd rather start your server separately.
> Note: For local linking to work you must make sure to have your CORS settings configured correctly. This is done by adding `https://app.medusajs.com` to your `cors_admin` config in `medusa-config.js`.
:::note
> Note: If you change the port that your local server is running on you will have to run `medusa link` again. `medusa link` uses your `PORT` environment variable to specify where Medusa Cloud should look for your local server.
For local linking to work you must make sure to have your CORS settings configured correctly. This is done by adding `https://app.medusajs.com` to your `cors_admin` config in `medusa-config.js`.
:::
:::note
If you change the port that your local server is running on you will have to run `medusa link` again. `medusa link` uses your `PORT` environment variable to specify where Medusa Cloud should look for your local server.
:::
## Summary

13
docs/services/CartService.md
View File

@@ -39,11 +39,14 @@ update the line item.
Deleting line items happens with `DELETE /cart/line-items/[line-id]`. Endpoint
removes the line item with the given line id by calling `removeLineItem`.
> ### Custom add to cart
> It is possible to make custom endpoints to add to cart. For example if you are
> creating a gift card plugin you may want to create a custom endpoint that
> accepts values like `amount` which can be set by the customer. As long as the
> controller compiles a valid `LineItem` it can safely call `addLineItem`
:::note Custom add to cart
It is possible to make custom endpoints to add to cart. For example if you are
creating a gift card plugin you may want to create a custom endpoint that
accepts values like `amount` which can be set by the customer. As long as the
controller compiles a valid `LineItem` it can safely call `addLineItem`
:::
## Checking out

2
packages/medusa-plugin-twilio-sms/README.md
View File

@@ -1,4 +1,4 @@
# medusa-plugin-sendgrid
# medusa-plugin-twilio-sms
Twilio SMS / Messaging plugin.

7
www/docs/docusaurus.config.js
View File

@@ -27,7 +27,8 @@ module.exports = {
themeConfig: {
colorMode: {
defaultMode: 'light',
disableSwitch: true,
disableSwitch: false,
respectPrefersColorScheme: true,
},
algolia: {
apiKey: algoliaApiKey,
@@ -45,9 +46,9 @@ module.exports = {
navbar: {
hideOnScroll: true,
logo: {
alt: "Medusa Commerce",
alt: "Medusa",
src: "img/logo.svg",
srcDark: "img/logo.svg",
srcDark: "img/logo-dark.svg",
width: 100
},
items: [

9
www/docs/sidebars.js
View File

@@ -192,19 +192,10 @@ module.exports = {
},
]
},
{
type: "doc",
id: "tutorial/adding-custom-functionality",
label: "Add Custom Functionality"
},
{
type: "doc",
id: "how-to/notification-api",
},
{
type: "doc",
id: "guides/fulfillment-api",
},
{
type: "doc",
id: "guides/plugins",

64
www/docs/src/css/custom.css
View File

@@ -10,13 +10,13 @@
:root {
/* Colors */
--ifm-color-primary: #0a3149;
--ifm-color-primary-dark: #0a3149;
--ifm-color-primary-darker: #0a3149;
--ifm-color-primary-darkest: #0a3149;
--ifm-color-primary-light: #0a3149;
--ifm-color-primary-lighter: #0a3149;
--ifm-color-primary-lightest: #0a3149;
--ifm-color-primary: #7C53FF;
--ifm-color-primary-dark: #6231ff;
--ifm-color-primary-darker: #5520ff;
--ifm-color-primary-darkest: #3800ed;
--ifm-color-primary-light: #9675ff;
--ifm-color-primary-lighter: #a386ff;
--ifm-color-primary-lightest: #c9b8ff;
--ifm-medusa-gray: #f0f0f0;
/* Fonts */
@@ -33,21 +33,39 @@
--ifm-toc-border-color: #f0f0f0;
--ifm-toc-link-color: #a6acb5;
--ifm-toc-padding-horizontal: 9px;
}
html:not([data-theme="dark"]) {
/* Navbar */
--ifm-navbar-shadow: 0px 1px 0px 0px #a6acb5;
}
html[data-theme="dark"] {
--ifm-color-primary-dark: #ff4848;
--ifm-color-primary: #ff4242;
--ifm-background-color: #1f1f1f;
--ifm-background-surface-color: #1f1f1f;
--ifm-navbar-background-color: #242526;
/* --ifm-color-primary: #7C53FF; */
--ifm-color-primary-dark: #6231ff;
--ifm-color-primary-darker: #5520ff;
--ifm-color-primary-darkest: #3800ed;
--ifm-color-primary: #9675ff;
--ifm-color-primary-lighter: #a386ff;
--ifm-color-primary-lightest: #c9b8ff;
--ifm-background-color: var(--ifm-color-gray-900);
--ifm-background-surface-color: var(--ifm-color-gray-900);
--ifm-medusa-gray: #292929;
--ifm-menu-color: #fff;
--ifm-toc-border-color: #333;
}
[data-theme="dark"] .breadcrumbs__item--active a {
background-color: var(--ifm-color-gray-800) !important;
color: var(--ifm-color-primary-lightest) !important;
font-weight: bold;
}
[data-theme="dark"] pre code {
background-color: var(--ifm-code-background);
}
h1 {
font-size: 2.5em;
}
@@ -92,6 +110,15 @@ html[data-theme="dark"] .docusaurus-highlight-code-line {
background-color: rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] footer:not(.theme-doc-footer) {
background-color: var(--ifm-color-gray-800);
}
html[data-theme="dark"] .card {
border: 1px solid #fff;
color: var(--ifm-color-primary);
}
.navbar {
z-index: 1000;
font-size: 14px;
@@ -183,7 +210,6 @@ a.menu__link--sublist::after {
.menu__list-item > a {
font-weight: 450;
color: #1f1f1f;
}
/* Pagination */
@@ -221,7 +247,7 @@ footer .footer__title {
width: 150px;
}
footer {
html:not([data-theme="dark"]) footer {
background-color: #ffffff !important;
border-top: 1px solid var(--ifm-toc-border-color);
}
@@ -232,7 +258,7 @@ footer {
/* Cards */
.card {
html:not([data-theme=dark]) .card {
border: 1px solid #1f1f1f;
border-radius: 8px;
}
@@ -258,8 +284,14 @@ details summary {
cursor: pointer;
}
.theme-doc-markdown a {
color: #9461ff;
.theme-doc-markdown a:not(.box-link):hover {
color: var(--ifm-color-primary-darkest);
text-decoration: none;
}
.box-link,
.box-link:hover {
color: #0a3149;
}
.theme-doc-markdown a:hover {

15
www/docs/static/img/logo-dark.svg vendored Normal file
View File

@@ -0,0 +1,15 @@
<svg width="408" height="96" viewBox="0 0 408 96" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M160.04 69H151V45.56C151 42.9466 150.36 40.8933 149.08 39.4C147.8 37.8533 146.04 37.08 143.8 37.08C141.24 37.08 139.24 37.9333 137.8 39.64C136.413 41.3467 135.72 43.6933 135.72 46.68V69H126.6V29.8H135.56V33.24C138.013 30.3066 141.4 28.84 145.72 28.84C150.573 28.84 154.226 30.5466 156.68 33.96C159.72 30.5466 163.8 28.84 168.92 28.84C174.04 28.84 177.906 30.3333 180.52 33.32C183.186 36.2533 184.52 40.5466 184.52 46.2V69H175.4V45.56C175.4 42.9466 174.76 40.8933 173.48 39.4C172.2 37.8533 170.44 37.08 168.2 37.08C165.64 37.08 163.64 37.96 162.2 39.72C160.76 41.4266 160.04 43.7467 160.04 46.68V69Z" fill="white"/>
<path d="M228.886 48.92L228.806 52.12H202.006C202.22 55.0533 203.26 57.3733 205.126 59.08C206.993 60.7866 209.393 61.64 212.326 61.64C216.54 61.64 219.9 59.8 222.406 56.12L228.566 61.88C224.406 67.2133 218.993 69.88 212.326 69.88C206.406 69.88 201.66 68.0133 198.086 64.28C194.46 60.4933 192.646 55.6133 192.646 49.64C192.646 43.8267 194.3 38.8933 197.606 34.84C200.966 30.84 205.42 28.84 210.966 28.84C216.886 28.84 221.34 30.8133 224.326 34.76C227.366 38.7067 228.886 43.4267 228.886 48.92ZM211.046 37.16C208.753 37.16 206.86 37.88 205.366 39.32C203.926 40.76 202.966 42.6 202.486 44.84H219.206C219.153 42.6533 218.433 40.84 217.046 39.4C215.66 37.9067 213.66 37.16 211.046 37.16Z" fill="white"/>
<path d="M255.751 28.84C260.124 28.84 263.778 30.12 266.711 32.68V12.92H275.831V69H266.871V65.48C264.098 68.4133 260.391 69.88 255.751 69.88C250.204 69.88 245.618 67.96 241.991 64.12C238.418 60.2267 236.631 55.32 236.631 49.4C236.631 43.48 238.418 38.5733 241.991 34.68C245.564 30.7867 250.151 28.84 255.751 28.84ZM264.071 40.44C262.204 38.0933 259.644 36.92 256.391 36.92C253.138 36.92 250.578 38.0933 248.711 40.44C246.844 42.7866 245.911 45.7733 245.911 49.4C245.911 53.0267 246.844 56.0133 248.711 58.36C250.578 60.7067 253.138 61.88 256.391 61.88C259.644 61.88 262.204 60.7067 264.071 58.36C265.938 56.0133 266.871 53.0267 266.871 49.4C266.871 45.7733 265.938 42.7866 264.071 40.44Z" fill="white"/>
<path d="M285.872 29.8H294.992V53.24C294.992 55.8533 295.632 57.9333 296.912 59.48C298.192 60.9733 300.005 61.72 302.352 61.72C304.859 61.72 306.832 60.84 308.272 59.08C309.765 57.2667 310.512 54.8666 310.512 51.88V29.8H319.632V69H310.672V65.8C308.165 68.52 304.779 69.88 300.512 69.88C296.032 69.88 292.459 68.36 289.792 65.32C287.179 62.2267 285.872 57.9866 285.872 52.6V29.8Z" fill="white"/>
<path d="M346.658 54.2L341.458 52.92C333.512 51.0533 329.538 46.92 329.538 40.52C329.538 37 330.872 34.1733 333.538 32.04C336.205 29.9067 339.645 28.84 343.858 28.84C349.512 28.84 354.445 31.0266 358.658 35.4L352.818 41.64C350.418 38.3333 347.352 36.68 343.618 36.68C342.018 36.68 340.712 37.0533 339.698 37.8C338.738 38.4933 338.258 39.3467 338.258 40.36C338.258 42.1733 339.538 43.4 342.098 44.04L348.258 45.48C356.258 47.2933 360.258 51.3733 360.258 57.72C360.258 61.3467 358.872 64.28 356.098 66.52C353.378 68.76 349.592 69.88 344.738 69.88C337.912 69.88 332.498 67.3466 328.498 62.28L334.258 56.36C337.138 60.1467 340.872 62.04 345.458 62.04C349.458 62.04 351.458 60.7067 351.458 58.04C351.458 56.3333 349.858 55.0533 346.658 54.2Z" fill="white"/>
<path d="M379.911 69.88C376.124 69.88 372.978 68.8133 370.471 66.68C367.964 64.4933 366.711 61.5867 366.711 57.96C366.711 53.8 368.204 50.5733 371.191 48.28C374.178 45.9866 378.124 44.84 383.031 44.84C385.484 44.84 388.124 45.2933 390.951 46.2V43.56C390.951 41.64 390.231 40.0933 388.791 38.92C387.351 37.6933 385.511 37.08 383.271 37.08C379.164 37.08 376.071 38.9733 373.991 42.76L367.831 37C369.271 34.3867 371.378 32.3867 374.151 31C376.978 29.56 380.044 28.84 383.351 28.84C388.524 28.84 392.604 30.12 395.591 32.68C398.578 35.24 400.071 38.8933 400.071 43.64V69H391.111V65.96C388.178 68.5733 384.444 69.88 379.911 69.88ZM375.831 57.32C375.831 58.6533 376.338 59.7467 377.351 60.6C378.418 61.4533 379.884 61.88 381.751 61.88C385.591 61.88 388.658 60.76 390.951 58.52V54.04C388.071 52.9733 385.351 52.44 382.791 52.44C380.658 52.44 378.951 52.8666 377.671 53.72C376.444 54.5733 375.831 55.7733 375.831 57.32Z" fill="white"/>
<path d="M77.707 15.5831L56.0329 3.0766C48.9414 -1.02553 40.2518 -1.02553 33.1603 3.0766L11.3864 15.5831C4.39474 19.6853 0 27.2892 0 35.3934V60.5065C0 68.7108 4.39474 76.2147 11.3864 80.3168L33.0604 92.9234C40.1519 97.0255 48.8415 97.0255 55.933 92.9234L77.6071 80.3168C84.6986 76.2147 88.9935 68.7108 88.9935 60.5065V35.3934C89.1932 27.2892 84.7985 19.6853 77.707 15.5831ZM44.5467 70.3116C32.2614 70.3116 22.2733 60.3064 22.2733 48C22.2733 35.6936 32.2614 25.6884 44.5467 25.6884C56.832 25.6884 66.9199 35.6936 66.9199 48C66.9199 60.3064 56.9318 70.3116 44.5467 70.3116Z" fill="url(#paint0_linear_593_870)"/>
<defs>
<linearGradient id="paint0_linear_593_870" x1="0" y1="96" x2="107.4" y2="66.105" gradientUnits="userSpaceOnUse">
<stop stop-color="#7C53FF"/>
<stop offset="1" stop-color="#F796FF"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

1
www/reference/gatsby-config.js
View File

@@ -6,6 +6,7 @@ module.exports = {
},
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-dark-mode`,
{
resolve: `gatsby-plugin-anchor-links`,
options: {

5
www/reference/package.json
View File

@@ -18,10 +18,12 @@
"@emotion/react": "^11.1.2",
"@emotion/styled": "^11.0.0",
"@rebass/forms": "^4.0.6",
"copy-to-clipboard": "^3.3.1",
"emotion-theming": "^10.0.27",
"gatsby": "^3.9.1",
"gatsby-plugin-algolia-docsearch": "^1.0.5",
"gatsby-plugin-anchor-links": "^1.1.1",
"gatsby-plugin-dark-mode": "^1.1.2",
"gatsby-plugin-emotion": "^5.0.0",
"gatsby-plugin-env-variables": "^2.1.0",
"gatsby-plugin-preact": "^5.9.0",
@@ -38,14 +40,13 @@
"preact-render-to-string": "^5.1.19",
"prismjs": "^1.24.1",
"react": "^16.12.0",
"copy-to-clipboard": "^3.3.1",
"react-collapsible": "^2.8.1",
"react-dom": "^16.12.0",
"react-helmet": "^6.1.0",
"react-highlight.js": "^1.0.7",
"react-tooltip": "^4.2.10",
"react-intersection-observer": "^8.29.0",
"react-markdown": "^5.0.3",
"react-tooltip": "^4.2.10",
"react-virtualized": "^9.22.3",
"theme-ui": "^0.10.0"
},

2
www/reference/src/assets/clipboard.svg
View File

@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<svg height="10" width="10" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
viewBox="0 0 512 512" fill="#fff" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<title>Clipboard</title>
<g>
<g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 695 B

After

Width:  |  Height:  |  Size: 707 B

9
www/reference/src/assets/github-light.svg Normal file
View File

@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="33px" height="33px" viewBox="0 0 33 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>GitHub</title>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="GitHub-Mark" transform="translate(-136.000000, -331.000000)" fill="#fff">
<path d="M152.608,331.455 C143.614,331.455 136.32,338.748 136.32,347.745 C136.32,354.942 140.987,361.047 147.46,363.201 C148.275,363.351 148.572,362.848 148.572,362.416 C148.572,362.029 148.558,361.005 148.55,359.646 C144.019,360.63 143.063,357.462 143.063,357.462 C142.322,355.58 141.254,355.079 141.254,355.079 C139.775,354.069 141.366,354.089 141.366,354.089 C143.001,354.204 143.861,355.768 143.861,355.768 C145.314,358.257 147.674,357.538 148.602,357.121 C148.75,356.069 149.171,355.351 149.636,354.944 C146.019,354.533 142.216,353.135 142.216,346.893 C142.216,345.115 142.851,343.66 143.893,342.522 C143.725,342.11 143.166,340.453 144.053,338.211 C144.053,338.211 145.42,337.773 148.532,339.881 C149.831,339.519 151.225,339.339 152.61,339.332 C153.994,339.339 155.387,339.519 156.688,339.881 C159.798,337.773 161.163,338.211 161.163,338.211 C162.052,340.453 161.493,342.11 161.326,342.522 C162.37,343.66 163,345.115 163,346.893 C163,353.151 159.191,354.528 155.563,354.931 C156.147,355.434 156.668,356.428 156.668,357.947 C156.668,360.125 156.648,361.882 156.648,362.416 C156.648,362.852 156.942,363.359 157.768,363.2 C164.236,361.041 168.899,354.94 168.899,347.745 C168.899,338.748 161.605,331.455 152.608,331.455" id="Fill-51"></path>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

15
www/reference/src/assets/logo-dark.svg Normal file
View File

@@ -0,0 +1,15 @@
<svg width="408" height="96" viewBox="0 0 408 96" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M160.04 69H151V45.56C151 42.9466 150.36 40.8933 149.08 39.4C147.8 37.8533 146.04 37.08 143.8 37.08C141.24 37.08 139.24 37.9333 137.8 39.64C136.413 41.3467 135.72 43.6933 135.72 46.68V69H126.6V29.8H135.56V33.24C138.013 30.3066 141.4 28.84 145.72 28.84C150.573 28.84 154.226 30.5466 156.68 33.96C159.72 30.5466 163.8 28.84 168.92 28.84C174.04 28.84 177.906 30.3333 180.52 33.32C183.186 36.2533 184.52 40.5466 184.52 46.2V69H175.4V45.56C175.4 42.9466 174.76 40.8933 173.48 39.4C172.2 37.8533 170.44 37.08 168.2 37.08C165.64 37.08 163.64 37.96 162.2 39.72C160.76 41.4266 160.04 43.7467 160.04 46.68V69Z" fill="white"/>
<path d="M228.886 48.92L228.806 52.12H202.006C202.22 55.0533 203.26 57.3733 205.126 59.08C206.993 60.7866 209.393 61.64 212.326 61.64C216.54 61.64 219.9 59.8 222.406 56.12L228.566 61.88C224.406 67.2133 218.993 69.88 212.326 69.88C206.406 69.88 201.66 68.0133 198.086 64.28C194.46 60.4933 192.646 55.6133 192.646 49.64C192.646 43.8267 194.3 38.8933 197.606 34.84C200.966 30.84 205.42 28.84 210.966 28.84C216.886 28.84 221.34 30.8133 224.326 34.76C227.366 38.7067 228.886 43.4267 228.886 48.92ZM211.046 37.16C208.753 37.16 206.86 37.88 205.366 39.32C203.926 40.76 202.966 42.6 202.486 44.84H219.206C219.153 42.6533 218.433 40.84 217.046 39.4C215.66 37.9067 213.66 37.16 211.046 37.16Z" fill="white"/>
<path d="M255.751 28.84C260.124 28.84 263.778 30.12 266.711 32.68V12.92H275.831V69H266.871V65.48C264.098 68.4133 260.391 69.88 255.751 69.88C250.204 69.88 245.618 67.96 241.991 64.12C238.418 60.2267 236.631 55.32 236.631 49.4C236.631 43.48 238.418 38.5733 241.991 34.68C245.564 30.7867 250.151 28.84 255.751 28.84ZM264.071 40.44C262.204 38.0933 259.644 36.92 256.391 36.92C253.138 36.92 250.578 38.0933 248.711 40.44C246.844 42.7866 245.911 45.7733 245.911 49.4C245.911 53.0267 246.844 56.0133 248.711 58.36C250.578 60.7067 253.138 61.88 256.391 61.88C259.644 61.88 262.204 60.7067 264.071 58.36C265.938 56.0133 266.871 53.0267 266.871 49.4C266.871 45.7733 265.938 42.7866 264.071 40.44Z" fill="white"/>
<path d="M285.872 29.8H294.992V53.24C294.992 55.8533 295.632 57.9333 296.912 59.48C298.192 60.9733 300.005 61.72 302.352 61.72C304.859 61.72 306.832 60.84 308.272 59.08C309.765 57.2667 310.512 54.8666 310.512 51.88V29.8H319.632V69H310.672V65.8C308.165 68.52 304.779 69.88 300.512 69.88C296.032 69.88 292.459 68.36 289.792 65.32C287.179 62.2267 285.872 57.9866 285.872 52.6V29.8Z" fill="white"/>
<path d="M346.658 54.2L341.458 52.92C333.512 51.0533 329.538 46.92 329.538 40.52C329.538 37 330.872 34.1733 333.538 32.04C336.205 29.9067 339.645 28.84 343.858 28.84C349.512 28.84 354.445 31.0266 358.658 35.4L352.818 41.64C350.418 38.3333 347.352 36.68 343.618 36.68C342.018 36.68 340.712 37.0533 339.698 37.8C338.738 38.4933 338.258 39.3467 338.258 40.36C338.258 42.1733 339.538 43.4 342.098 44.04L348.258 45.48C356.258 47.2933 360.258 51.3733 360.258 57.72C360.258 61.3467 358.872 64.28 356.098 66.52C353.378 68.76 349.592 69.88 344.738 69.88C337.912 69.88 332.498 67.3466 328.498 62.28L334.258 56.36C337.138 60.1467 340.872 62.04 345.458 62.04C349.458 62.04 351.458 60.7067 351.458 58.04C351.458 56.3333 349.858 55.0533 346.658 54.2Z" fill="white"/>
<path d="M379.911 69.88C376.124 69.88 372.978 68.8133 370.471 66.68C367.964 64.4933 366.711 61.5867 366.711 57.96C366.711 53.8 368.204 50.5733 371.191 48.28C374.178 45.9866 378.124 44.84 383.031 44.84C385.484 44.84 388.124 45.2933 390.951 46.2V43.56C390.951 41.64 390.231 40.0933 388.791 38.92C387.351 37.6933 385.511 37.08 383.271 37.08C379.164 37.08 376.071 38.9733 373.991 42.76L367.831 37C369.271 34.3867 371.378 32.3867 374.151 31C376.978 29.56 380.044 28.84 383.351 28.84C388.524 28.84 392.604 30.12 395.591 32.68C398.578 35.24 400.071 38.8933 400.071 43.64V69H391.111V65.96C388.178 68.5733 384.444 69.88 379.911 69.88ZM375.831 57.32C375.831 58.6533 376.338 59.7467 377.351 60.6C378.418 61.4533 379.884 61.88 381.751 61.88C385.591 61.88 388.658 60.76 390.951 58.52V54.04C388.071 52.9733 385.351 52.44 382.791 52.44C380.658 52.44 378.951 52.8666 377.671 53.72C376.444 54.5733 375.831 55.7733 375.831 57.32Z" fill="white"/>
<path d="M77.707 15.5831L56.0329 3.0766C48.9414 -1.02553 40.2518 -1.02553 33.1603 3.0766L11.3864 15.5831C4.39474 19.6853 0 27.2892 0 35.3934V60.5065C0 68.7108 4.39474 76.2147 11.3864 80.3168L33.0604 92.9234C40.1519 97.0255 48.8415 97.0255 55.933 92.9234L77.6071 80.3168C84.6986 76.2147 88.9935 68.7108 88.9935 60.5065V35.3934C89.1932 27.2892 84.7985 19.6853 77.707 15.5831ZM44.5467 70.3116C32.2614 70.3116 22.2733 60.3064 22.2733 48C22.2733 35.6936 32.2614 25.6884 44.5467 25.6884C56.832 25.6884 66.9199 35.6936 66.9199 48C66.9199 60.3064 56.9318 70.3116 44.5467 70.3116Z" fill="url(#paint0_linear_593_870)"/>
<defs>
<linearGradient id="paint0_linear_593_870" x1="0" y1="96" x2="107.4" y2="66.105" gradientUnits="userSpaceOnUse">
<stop stop-color="#7C53FF"/>
<stop offset="1" stop-color="#F796FF"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

2
www/reference/src/assets/logo-muted.svg
View File

@@ -1,5 +1,5 @@
<svg width="602" height="122" viewBox="0 0 602 122" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="602" height="122" fill="white"/>
<rect width="602" height="122" fill="none"/>
<path d="M95.0625 0H129.431V119.437H108.713V18.0375L75.5625 119.437H53.8688L20.7188 19.2562V119.437H0V0H34.6125L64.8375 95.7937L95.0625 0Z" fill="#89959C"/>
<path d="M233.756 92.3826C228.881 110.42 213.525 121.633 192.319 121.633C165.75 121.633 148.688 103.595 148.688 76.5388C148.688 49.4826 165.75 31.4451 192.806 31.4451C222.788 31.4451 238.387 53.8701 230.1 81.9014H169.406C171.112 96.0389 178.913 104.326 192.562 104.326C202.069 104.326 209.625 99.9389 212.55 92.1389H233.756V92.3826ZM169.894 68.2514H211.819C213.037 56.0639 205.969 48.0201 192.562 48.0201C179.888 48.0201 171.844 55.0889 169.894 68.2514Z" fill="#89959C"/>
<path d="M312.244 0.000396729H331.744V119.438H312.244V106.763C305.663 116.269 295.669 121.875 283.238 121.875C260.813 121.875 244.725 103.838 244.725 76.7816C244.725 49.7254 260.325 31.6879 283.238 31.6879C295.669 31.6879 305.663 37.0504 312.244 46.8004V0.000396729V0.000396729ZM312.975 76.7816C312.975 59.9629 303.469 48.7504 289.088 48.7504C274.463 48.7504 264.956 59.9629 264.956 76.7816C264.956 93.6004 274.463 104.813 289.088 104.813C303.469 104.569 312.975 93.6004 312.975 76.7816Z" fill="#89959C"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

17
www/reference/src/components/ColorModeToggler/index.css Normal file
View File

@@ -0,0 +1,17 @@
.dark-mode-toggler {
background: transparent;
border: 0;
border-radius: 50%;
height: 32px;
width: 32px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin-left: 5px;
color: var(--theme-ui-colors-text)
}
.dark-mode-toggler:hover {
background-color: #00000010;
}

26
www/reference/src/components/ColorModeToggler/index.js Normal file
View File

@@ -0,0 +1,26 @@
import "./index.css"
import DarkMode from "../icons/dark-mode"
import LightMode from "../icons/light-mode"
import React from 'react'
import { ThemeToggler } from 'gatsby-plugin-dark-mode'
import { useColorMode } from 'theme-ui'
export default function ColorModeToggler () {
const [, setColorMode] = useColorMode()
return (
<ThemeToggler>
{({ theme, toggleTheme }) => (
<button onClick={() => {
const mode = theme === 'dark' ? 'light' : 'dark';
toggleTheme(mode);
setColorMode(mode);
}} className="dark-mode-toggler">
{theme === "light" && <LightMode />}
{theme === "dark" && <DarkMode />}
</button>
)}
</ThemeToggler>
)
}

5
www/reference/src/components/CopyToClipboard/index.js
View File

@@ -1,9 +1,10 @@
import { Box, Text } from "theme-ui"
import React, { useState } from "react"
import { Flex, Box, Text } from "theme-ui"
import Clipboard from '../icons/clipboard'
import ReactTooltip from "react-tooltip"
import styled from "@emotion/styled"
import copy from 'copy-to-clipboard'
import styled from "@emotion/styled"
const StyledTooltip = ({id, text}) => {
const StyledTooltip = styled(ReactTooltip)`

11
www/reference/src/components/content/code-box.js
View File

@@ -1,6 +1,7 @@
import React from "react"
import { Flex, Box, Text } from "theme-ui"
import { Box, Flex, Text } from "theme-ui"
import CopyToClipboard from "../CopyToClipboard"
import React from "react"
const CodeBox = ({ header, children, shell, content, allowCopy }) => {
return (
@@ -8,7 +9,7 @@ const CodeBox = ({ header, children, shell, content, allowCopy }) => {
sx={{
background: "fadedContrast",
borderRadius: "small",
boxShadow: "0 0 0 1px rgb(0 0 0 / 7%)",
boxShadow: "0 0 0 1px var(--theme-ui-colors-primaryLight)",
alignSelf: "flex-start",
marginLeft: "auto",
marginRight: "auto",
@@ -18,7 +19,7 @@ const CodeBox = ({ header, children, shell, content, allowCopy }) => {
>
<Box
sx={{
bg: "faded",
bg: "primary",
p: "8px 10px",
letterSpacing: "0.01em",
borderRadius: "8px 8px 0 0",
@@ -31,7 +32,7 @@ const CodeBox = ({ header, children, shell, content, allowCopy }) => {
alignItems: "baseline",
}}
>
<Text variant="small" sx={{ fontWeight: "400" }}>
<Text variant="small" sx={{ fontWeight: "400", color: "light" }}>
{header.toUpperCase()}
</Text>
{allowCopy ? (

9
www/reference/src/components/content/parameters.js
View File

@@ -1,8 +1,9 @@
import React from "react"
import { Flex, Text, Box } from "theme-ui"
import { Box, Flex, Text } from "theme-ui"
import Description from "./description"
import Markdown from "react-markdown"
import NestedCollapsible from "./collapsible"
import Description from "./description"
import React from "react"
const Parameters = ({ params, type }) => {
const getDescriptions = (title, items) => {
@@ -33,7 +34,7 @@ const Parameters = ({ params, type }) => {
>
<Flex sx={{ alignItems: "baseline", fontSize: "0" }}>
<Text mr={2}>{prop.property || prop.name}</Text>
<Text color={"gray"}>
<Text color={"#707070"}>
{prop.type || prop.schema?.type || nested?.title}
</Text>
{prop.required ? (

5
www/reference/src/components/icons/clipboard.js
View File

@@ -1,7 +1,6 @@
import { Image } from "@theme-ui/components"
import React from "react"
import Logo from "../../assets/clipboard.svg"
import React from "react"
const Clipboard = () => {
return (
@@ -9,7 +8,7 @@ const Clipboard = () => {
src={Logo}
sx={{
height: "100%",
fill: "#000",
fill: "light",
cursor: 'pointer'
}}
/>

20
www/reference/src/components/icons/dark-mode.js Normal file
View File

@@ -0,0 +1,20 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
export default function DarkMode(props) {
return (
<svg viewBox="0 0 24 24" width={24} height={24} {...props}>
<path
fill="currentColor"
d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"
/>
</svg>
);
}

12
www/reference/src/components/icons/github.js
View File

@@ -1,15 +1,17 @@
import { Image } from "@theme-ui/components"
import React from "react"
import Logo from "../../assets/github.svg"
import LogoLight from "../../assets/github-light.svg"
import React from "react"
import { useColorMode } from 'theme-ui'
const GitHub = () => {
const [colorMode,] = useColorMode()
return (
<Image
src={Logo}
src={colorMode === 'light' ? Logo : LogoLight}
sx={{
height: "20px",
fill: "#000",
height: "24px",
}}
/>
)

20
www/reference/src/components/icons/light-mode.js Normal file
View File

@@ -0,0 +1,20 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
export default function LightMode(props) {
return (
<svg viewBox="0 0 24 24" width={24} height={24} {...props}>
<path
fill="currentColor"
d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"
/>
</svg>
);
}

1
www/reference/src/components/layout.js
View File

@@ -35,6 +35,7 @@ const Layout = ({ data, api, children }) => {
fontFamily: "body",
flexGrow: "1",
}}
className="layout-container"
>
<Sidebar data={data} api={api} />
<ContentBox>{children}</ContentBox>

14
www/reference/src/components/side-bar/index.js
View File

@@ -2,11 +2,12 @@ import { Box, Flex, Image } from "theme-ui"
import React, { useEffect, useState } from "react"
import Logo from "../../assets/logo.svg"
import LogoMuted from "../../assets/logo-muted.svg"
import LogoDark from "../../assets/logo-dark.svg"
import SideBarItem from "./sidebar-item"
import SideBarSelector from "./sidebar-selector"
import { navigate } from "gatsby"
import styled from "@emotion/styled"
import { useColorMode } from 'theme-ui'
const SideBarContainer = styled(Flex)`
@media screen and (max-width: 848px) {
@@ -26,6 +27,7 @@ const SideBarFade = styled(Box)`
const Sidebar = ({ data, api }) => {
const [scrollPos, setScrollPos] = useState(0)
const [colorMode,] = useColorMode()
useEffect(() => {
const nav = document.querySelector("#nav")
@@ -47,24 +49,25 @@ const Sidebar = ({ data, api }) => {
top: "0",
bottom: "0",
height: "100vh",
backgroundColor: "light",
backgroundColor: "var(--theme-ui-colors-background)",
boxShadow: "sidebarShadow",
minWidth: "var(--side-bar-width)",
flexDirection: "column",
}}
className="sidebar-container"
>
<Flex
sx={{
px: "4",
pt: "3",
background: "light",
background: "var(--theme-ui-colors-background)",
width: "calc(var(--side-bar-width) - 1px)",
flexDirection: "column",
}}
>
<Flex>
<Image
src={Logo}
src={colorMode === 'light' ? Logo : LogoDark}
alt="Medusa logo"
onClick={() => navigate("/")}
sx={{
@@ -96,9 +99,6 @@ const Sidebar = ({ data, api }) => {
return <SideBarItem item={s} key={i} />
})}
</Flex>
<Flex sx={{ py: 4, px: 4, borderTop: "1px solid #efefef" }}>
<Image src={LogoMuted} alt="Medusa Type" sx={{ height: "10px" }} />
</Flex>
</SideBarContainer>
)
}

16
www/reference/src/components/side-bar/sidebar-item.js
View File

@@ -81,8 +81,12 @@ const SideBarItem = ({ item }) => {
height: "25px",
justifyContent: "space-between",
"&:hover, &.active": {
backgroundColor: "faded",
backgroundColor: "primary",
color: "light"
},
"&:hover svg, &.active svg": {
color: "light"
}
}}
className={
currentSection === convertToKebabCase(section.section_name)
@@ -90,7 +94,7 @@ const SideBarItem = ({ item }) => {
: null
}
>
{section.section_name} <ChevronDown />
{section.section_name} <ChevronDown fill={"light"} />
</Flex>
}
open={isOpen}
@@ -114,13 +118,15 @@ const SideBarItem = ({ item }) => {
cursor: "pointer",
mb: "8px",
textDecoration: "none",
color: "black",
color: "text",
height: "25px",
"&:hover": {
backgroundColor: "faded",
backgroundColor: "primary",
color: "light"
},
"&.active": {
backgroundColor: "faded",
backgroundColor: "primary",
color: "light"
},
}}
>

7
www/reference/src/components/side-bar/sidebar-selector.js
View File

@@ -1,8 +1,9 @@
import React, { useContext } from "react"
import { Flex, Select } from "theme-ui"
import { navigate } from "gatsby-link"
import NavigationContext from "../../context/navigation-context"
import React, { useContext } from "react"
import ChevronDown from "../icons/chevron-down"
import NavigationContext from "../../context/navigation-context"
import { navigate } from "gatsby-link"
const SideBarSelector = ({ api }) => {
const { reset } = useContext(NavigationContext)

4
www/reference/src/components/topbar.js
View File

@@ -2,6 +2,7 @@ import { Box, Flex, Link, Select } from "@theme-ui/components"
import React, { useContext } from "react"
import ChevronDown from "./icons/chevron-down"
import ColorModeToggler from "./ColorModeToggler"
import GitHub from "../components/icons/github"
import NavigationContext from "../context/navigation-context"
import Search from "./search"
@@ -40,7 +41,6 @@ const Topbar = ({ data, api }) => {
left: "0",
right: "0",
zIndex: "100",
backgroundColor: "light",
},
}}
>
@@ -64,7 +64,6 @@ const Topbar = ({ data, api }) => {
fontWeight: "500",
flexGrow: "1",
px: "0",
backgroundColor: "light",
transition: "all .1s ease-in-out",
"&:focus": {
outline: "none !important",
@@ -116,6 +115,7 @@ const Topbar = ({ data, api }) => {
<GitHub />
</Link>
<Search data={data} />
<ColorModeToggler />
</Flex>
</Flex>
)

2
www/reference/src/gatsby-plugin-theme-ui/colors.js
View File

@@ -1,5 +1,5 @@
export default {
primary: "#B27979",
primary: "#7C53FF",
secondary: "#79B28A",
medusaGreen: "#3ecf8e",
lightest: "#fefefe",

31
www/reference/src/gatsby-plugin-theme-ui/index.js
View File

@@ -2,13 +2,16 @@ import "../fonts/index.css"
import breakpoints from "./breakpoints"
import buttons from "./buttons"
import spacing from "./spacing"
import shadows from "./shadows"
import forms from "./forms"
import labels from "./labels"
import shadows from "./shadows"
import spacing from "./spacing"
// eslint-disable-next-line import/no-anonymous-default-export
export default {
config: {
initialColorModeName: 'light',
},
sizes: {
headerHeight: "50px",
},
@@ -59,18 +62,38 @@ export default {
},
},
colors: {
primary: "#53725D",
primary: "#7C53FF",
primaryLight: "#7c53ff4a",
secondary: "#79B28A",
danger: "#FF7675",
placeholder: "#a3acb9",
dark: "#0a3149",
darkContrast: "#0a314940",
selectBg: "rgba(9, 10, 17, 0.8)",
light: "#ffffff",
faded: "#eef0f5",
fadedContrast: "#eef0f540",
text: '#000',
background: '#fff',
inverseText: '#000',
separator: "#eef0f5",
codeBoxShadow: "rgb(0 0 0 / 7%)",
sectionSeparator: "#E3E8EE",
modes: {
dark: {
text: '#fff',
background: "#242526",
inverseText: '#000',
dark: "#eef0f5",
separator: "#eef0f540",
codeBoxShadow: "#d2d2d22b",
sectionSeparator: "#404244",
selectBg: "rgba(9, 10, 17, 0.8)"
}
}
},
borders: {
hairline: "1px solid #E3E8EE",
hairline: "1px solid var(--theme-ui-colors-sectionSeparator)",
},
fontSizes: [12, 14, 16, 18, 22],
fonts: {

6
www/reference/src/gatsby-plugin-theme-ui/labels.js
View File

@@ -4,13 +4,13 @@ export const labels = {
fontSize: 0,
},
GET: {
color: "#4159de",
color: "#1b7cb8",
},
POST: {
color: "#09825d",
color: "#0e8761",
},
DELETE: {
color: "#b50a0a",
color: "#bf3030",
},
}

2
www/reference/src/gatsby-plugin-theme-ui/shadows.js
View File

@@ -111,7 +111,7 @@ export default {
`,
sidebarShadow: `
inset -1px 0 0 0 #eef0f5
inset -1px 0 0 0 var(--theme-ui-colors-separator)
`,
topbarShadow: `
0 2px 5px 0 rgb(59 65 94 / 10%), 0 1px 1px 0 rgb(0 0 0 / 7%)

20
www/reference/src/medusa-plugin-themes/docsearch/theme.css
View File

@@ -1,5 +1,5 @@
:root {
--docsearch-primary-color: #0a3149;
--docsearch-primary-color: #7C53FF;
/*dark*/
--docsearch-secondary-color: #eef0f5;
/*faded*/
@@ -38,13 +38,14 @@
/* Darkmode */
html[data-theme='dark'] {
.dark {
--docsearch-secondary-color: rgb(127, 132, 151);
--docsearch-text-color: rgb(245, 246, 247);
--docsearch-container-background: rgba(9, 10, 17, 0.8);
--docsearch-modal-background: rgb(21, 23, 42);
--docsearch-modal-shadow: inset 1px 1px 0 0 rgb(44, 46, 64), 0 3px 8px 0 rgb(0, 3, 9);
--docsearch-searchbox-background: rgb(9, 10, 17);
--docsearch-searchbox-focus-background: #000;
--docsearch-searchbox-focus-background: var(--docsearch-modal-background);
--docsearch-hit-color: rgb(190, 195, 201);
--docsearch-hit-shadow: none;
--docsearch-hit-background: rgb(9, 10, 17);
@@ -53,7 +54,7 @@ html[data-theme='dark'] {
--docsearch-footer-background: rgb(30, 33, 54);
--docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5), 0 -4px 8px 0 rgba(0, 0, 0, 0.2);
--docsearch-logo-color: rgb(255, 255, 255);
--docsearch-muted-color: rgb(127, 132, 151);
--docsearch-muted-color: #d7d7d7;
}
/* Body modifier */
@@ -650,25 +651,26 @@ svg.DocSearch-Hit-Select-Icon {
.DocSearch-Button {
display: flex;
align-items: center;
background: white;
background: var(--docsearch-container-background);
border: 0;
border-radius: 36px;
color: var(--docsearch-muted-color);
cursor: pointer;
display: flex;
font-weight: 500;
height: 36px;
height: 38px;
justify-content: space-between;
padding: 0 8px;
user-select: none;
border: 1px solid var(--docsearch-secondary-color);
flex-grow: 1;
max-width: 200px;
margin-left: 12px;
border: 2px solid transparent;
transition: all .1s;
}
.DocSearch-Button:hover, .DocSearch-Button:active, .DocSearch-Button:focus {
color: var(--docsearch-primary-color);
border-color: var(--docsearch-primary-color);
outline: none;
}
@@ -731,7 +733,7 @@ svg.DocSearch-Hit-Select-Icon {
display: flex;
justify-content: center;
padding: 0;
background-color: var(--docsearch-secondary-color);
background-color: var(--docsearch-container-background);
border: none;
}
.DocSearch-Button .DocSearch-Search-Icon {

24
www/reference/src/medusa-plugin-themes/prism/theme.css
View File

@@ -18,6 +18,10 @@ code[class*="language-"], pre[class*="language-"] {
hyphens: none;
}
.dark code[class*="language-"], .dark pre[class*="language-"] {
color: #249feb;
}
/* Code blocks */
pre[class*="language-"] {
@@ -39,6 +43,10 @@ pre[class*="language-"] {
white-space: normal;
}
.dark :not(pre)>code {
background-color: #515151;
}
.token.comment, .token.prolog, .token.doctype, .token.cdata {
color: blue;
}
@@ -55,6 +63,11 @@ pre[class*="language-"] {
color: #0a3149;
}
.dark .token.property, .dark .token.tag, .dark .token.constant, .dark .token.symbol, .dark .token.deleted,
.dark .token.punctuation {
color: #249feb;
}
.token.number {
color: #e56f4a;
}
@@ -64,13 +77,18 @@ pre[class*="language-"] {
}
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted {
color: #09825d;
color: #10c38d;
}
.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string, .token.variable {
color: #0a3149;
}
.dark .token.operator, .dark .token.entity, .dark .token.url, .dark .language-css .token.string, .dark .style .token.string,
.dark .token.variable {
color: #249feb;
}
.token.atrule, .token.attr-value, .token.function, .token.class-name {
color: #e6db74;
}
@@ -83,6 +101,10 @@ pre[class*="language-"] {
color: grey;
}
.dark .token.keyword.null {
color: rgb(184, 184, 184);
}
.token.regex, .token.important {
color: #fd971f;
}

2
www/reference/src/templates/reference-page.js
View File

@@ -9,7 +9,7 @@ import { convertToKebabCase } from "../utils/convert-to-kebab-case"
export default function ReferencePage({
pageContext: { data, api, title, description, to },
}) {
const { setApi, goTo, metadata, currentSection, currentSectionObj } = useContext(NavigationContext)
const { setApi, goTo, metadata, currentSectionObj } = useContext(NavigationContext)
const [siteData, setSiteData] = useState({
title: title,
description: description,

18
www/reference/yarn.lock
View File

@@ -5371,6 +5371,13 @@ gatsby-plugin-anchor-links@^1.1.1:
dependencies:
scroll-to-element "^2.0.3"
gatsby-plugin-dark-mode@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/gatsby-plugin-dark-mode/-/gatsby-plugin-dark-mode-1.1.2.tgz#9bab271da9f913cd64687a2b2d85b1d62a3605d8"
integrity sha512-kq/7/KSIgyYxolSqLxXfmcC/iBU98XpRGcIOaa3bjjl8Tb0WDYwfa45zABx1XNjB0YecWdgniss+kqmeAu04GA==
dependencies:
prop-types "^15.5.7"
gatsby-plugin-emotion@^5.0.0:
version "5.4.0"
resolved "https://registry.yarnpkg.com/gatsby-plugin-emotion/-/gatsby-plugin-emotion-5.4.0.tgz#042ab3d09c1c55092ae0c57f93e9152bae405081"
@@ -9345,6 +9352,15 @@ prompts@^2.3.2:
kleur "^3.0.3"
sisteransi "^1.0.5"
prop-types@^15.5.7:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
dependencies:
loose-envify "^1.4.0"
object-assign "^4.1.1"
react-is "^16.13.1"
prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
@@ -9585,7 +9601,7 @@ react-intersection-observer@^8.29.0:
resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-8.32.5.tgz#92e8d8888b0b43a5c10c398e0d483d574bce7f3e"
integrity sha512-4xKdUWRNdPueXXxTyMOV41w6qIa4tsV7BbWOW+IYsvGPP7wxOj9V6o3cKywie+/VDr5Qs7pCzi5Wom78dUxj1w==
react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6:
react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==