docs: restructured docs sidebar (#2156)

* restructured docs sidebar

* resolved incorrect URLs
This commit is contained in:
Shahed Nasser
2022-09-06 19:16:54 +03:00
committed by GitHub
parent cd217c8a95
commit a71cf60060
30 changed files with 694 additions and 478 deletions

View File

@@ -1,22 +1,8 @@
# How to Create Entities
# Create an Entity
In this document, youll learn about entities in Medusa and how you can create your own entity.
In this document, youll learn how you can create an [Entity](overview.md).
## Overview
Entities in medusa represent tables in the database as classes. An example of this would be the `Order` entity which represents the `order` table in the database. Entities provide a uniform way of defining and interacting with data retrieved from the database.
Aside from Medusas core entities, you can also create your own entities to use in your Medusa server. Custom entities must reside in the `src/models` directory of your Medusa server.
Entities are TypeScript files and they are based on [Typeorms Entities](https://typeorm.io/entities) and use Typeorm decorators.
All entities must extend either the `BaseEntity` or `SoftDeletableEntity` classes. The `BaseEntity` class holds common columns including the `id`, `created_at`, and `updated_at` columns.
The `SoftDeletableEntity` class extends the `BaseEntity` class and adds another column `deleted_at`. If an entity can be soft deleted, meaning that a row in it can appear to the user as deleted but still be available in the database, it should extend `SoftDeletableEntity`.
## How to Create a Custom Entity
### Prerequisites
## Prerequisites
Its recommended to create a `tsconfig.json` file in the root of your Medusa server with the following content:
@@ -30,7 +16,7 @@ Its recommended to create a `tsconfig.json` file in the root of your Medusa s
This will remove any errors that show up in your IDE related to experimental decorators.
### Create the Entity
## Create the Entity
To create an entity, create a TypeScript file in `src/models`. For example, heres a `Post` entity defined in the file `src/models/post.ts`:
@@ -70,11 +56,11 @@ export class Post extends SoftDeletableEntity {
You can learn more about what decorators and column types you can use in [Typeorms documentation](https://typeorm.io/entities).
### Create the Migration
### Create a Migration
Additionally, you must create a migration for your entity. Migrations are used to update the database schema with new tables or changes to existing tables.
You can learn more about Migrations, how to create them, and how to run them in the [Migration documentation](migrations.md).
You can learn more about Migrations, how to create them, and how to run them in the [Migration documentation](../migrations/overview.md).
### Create a Repository
@@ -97,7 +83,7 @@ Be careful with your file names as it can cause unclear errors in Typeorm. Make
:::
## Access Your Custom Entity
## Access a Custom Entity
:::note
@@ -145,7 +131,7 @@ This same usage of repositories can be done in subscribers as well.
:::
### Deleting Soft-Deletable Entities
### Delete a Soft-Deletable Entity
To delete soft-deletable entities that extend the `SoftDeletableEntity` class, you can use the repository method `softDelete` method:
@@ -155,6 +141,6 @@ await postRepository.softDelete(post.id);
## Whats Next 🚀
- Check out Medusa's entities in the [Entities' reference](../../references/entities/classes/Address.md).
- Learn about [migrations](migrations.md).
- Learn more about [Services](services/create-service.md) and how to use them.
- Check out Medusa's entities in the [Entities' reference](../../../references/entities/classes/Address.md).
- Learn about [migrations](../migrations/overview.md).
- Learn more about [Services](../services/create-service.md) and how to use them.

View File

@@ -0,0 +1,22 @@
# Entities
In this document, you'll learn what Entities are in Medusa.
## What are Entities?
Entities in medusa represent tables in the database as classes. An example of this would be the `Order` entity which represents the `order` table in the database. Entities provide a uniform way of defining and interacting with data retrieved from the database.
Aside from Medusas core entities, you can also create your own entities to use in your Medusa server. Custom entities must reside in the `src/models` directory of your Medusa server.
Entities are TypeScript files and they are based on [Typeorms Entities](https://typeorm.io/entities) and use Typeorm decorators.
## Base Entities
All entities must extend either the `BaseEntity` or `SoftDeletableEntity` classes. The `BaseEntity` class holds common columns including the `id`, `created_at`, and `updated_at` columns.
The `SoftDeletableEntity` class extends the `BaseEntity` class and adds another column `deleted_at`. If an entity can be soft deleted, meaning that a row in it can appear to the user as deleted but still be available in the database, it should extend `SoftDeletableEntity`.
## What's Next :rocket:
- Learn [how to create an entity](./index.md).
- Check out Medusa's entities in the [Entities' reference](../../../references/entities/classes/Address.md).

View File

@@ -0,0 +1,47 @@
# How to Create Migrations
In this document, youll learn how to create a [Migration](overview.md) using [Typeorm](https://typeorm.io).
## Create Migration File
To create a migration that makes changes to your Medusa schema, run the following command:
```bash
npx typeorm migration:create -n UserChanged --dir src/migrations
```
:::tip
The migration file must be inside the `src/migrations` directory. When the build command is run, it will be transpiled into the directory `dist/migrations`. The `migrations run` command can only pick up migrations under the `dist/migrations` directory.
:::
This will create the migration file in the path you specify. You can use this without the need to install Typeorm's CLI tool. You can then go ahead and make changes to it as necessary.
:::tip
You can learn more about writing migrations in [Typeorms Documentation](https://typeorm.io/migrations).
:::
## Build Files
Before you can run the migrations you need to run the build command to transpile the TypeScript files to JavaScript files:
```bash npm2yarn
npm run build
```
## Run Migration
The last step is to run the migration with the command detailed earlier
```bash
medusa migrations run
```
If you check your database now you should see that the change defined by the migration has been applied successfully.
## Whats Next 🚀
- Learn more about [setting up your development server](../../../tutorial/0-set-up-your-development-environment.mdx).

View File

@@ -1,6 +1,6 @@
# Migrations
In this document, youll learn about what Migrations are, their purpose, how you can run them, and how you can create your own Migrations.
In this document, you'll learn what Migrations are in Medusa.
:::note
@@ -8,7 +8,7 @@ Medusas Migrations do not work with SQLite databases. They are intended to be
:::
## Overview
## What are Migrations?
Migrations are scripts that are used to make additions or changes to your database schema. In Medusa, they are essential for both when you first install your server and for subsequent server upgrades later on.
@@ -48,50 +48,7 @@ npm run seed
This will use the underlying `seed` command provided by Medusa's CLI to seed your database with data from the file `data/seed.json` on your Medusa server.
## How to Create Migrations
## What's Next :rocket:
In this section, youll learn how to create your own migrations using [Typeorm](https://typeorm.io). This will allow you to modify Medusas predefined tables or create your own tables.
### Create Migration
To create a migration that makes changes to your Medusa schema, run the following command:
```bash
npx typeorm migration:create -n UserChanged --dir src/migrations
```
:::tip
The migration file must be inside the `src/migrations` directory. When the build command is run, it will be transpiled into the directory `dist/migrations`. The `migrations run` command can only pick up migrations under the `dist/migrations` directory.
:::
This will create the migration file in the path you specify. You can use this without the need to install Typeorm's CLI tool. You can then go ahead and make changes to it as necessary.
:::tip
You can learn more about writing migrations in [Typeorms Documentation](https://typeorm.io/migrations).
:::
### Build Files
Before you can run the migrations you need to run the build command to transpile the TypeScript files to JavaScript files:
```bash npm2yarn
npm run build
```
### Run Migration
The last step is to run the migration with the command detailed earlier
```bash
medusa migrations run
```
If you check your database now you should see that the change defined by the migration has been applied successfully.
## Whats Next 🚀
- Learn more about [setting up your development server](/tutorial/set-up-your-development-environment).
- Learn [how to create a migration](index.md)
- Learn more about [setting up your development server](../../../tutorial/set-up-your-development-environment).

View File

@@ -158,7 +158,7 @@ This guide does not cover how to create each of those files or components. If yo
- How to [create a service](../services/create-service.md)
- How to [create a subscriber](../subscribers/create-subscriber.md)
- How to create an entity
- How to [create a migration](../migrations.md)
- How to [create a migration](../migrations/index.md)
## Add Plugin Configuration
@@ -260,7 +260,7 @@ const plugins = [
:::note
If your plugin has migrations, you must run them before you start the server. Check out the [Migrations guide](../migrations.md#run-migration) for more details.
If your plugin has migrations, you must run them before you start the server. Check out the [Migrations guide](../migrations/overview.md#migrate-command) for more details.
:::

View File

@@ -1,26 +1,6 @@
---
title: Create a Service
---
# Create a Service
In this document, youll learn how you can create a service and use it across your Medusa server just like any of the core services.
## Overview
Services in Medusa represent bundled helper methods that you want to use across your server. By convention, they represent a certain entity or functionality in your server.
For example, you can use Medusas `productService` to get the list of products, as well as perform other functionalities related to products. Theres also an `authService` that provides functionalities like authenticating customers and users.
Custom services reside in the `src/services` directory of your Medusa Server installation. Each service should be a class that extends the `TransactionBaseService` class from the core Medusa package `@medusajs/medusa`.
Each file you create in `src/services` should hold one service and export it.
The file name is important as it determines the name of the service when you need to use it elsewhere. The name of the service will be registered as the camel-case version of the file name + `Service` at the end of the name.
For example, if the file name is `hello.js`, the service will be registered as `helloService`. If the file name is `hello-world.js`, the service name will be registered as `helloWorldService`.
The registration name of the service is important, as youll be referring to it when you want to get access to the service using dependency injection or in routes.
In this document, youll learn how you can create a [Service](./overview.md) and use it across your Medusa server just like any of the core services.
## Implementation
@@ -63,9 +43,9 @@ async getProductCount() {
}
```
## Using your Custom Service
## Using a Service
You can use your custom service throughout your Medusa server just like you would use any of the core services.
You can use core and custom services throughout your Medusa server.
:::note

View File

@@ -0,0 +1,24 @@
# Services
In this document, you'll learn about what Services are in Medusa.
## What are Services?
Services in Medusa represent bundled helper methods that you want to use across your server. By convention, they represent a certain entity or functionality in your server.
For example, you can use Medusas `productService` to get the list of products, as well as perform other functionalities related to products. Theres also an `authService` that provides functionalities like authenticating customers and users.
Custom services reside in the `src/services` directory of your Medusa Server installation. Each service should be a class that extends the `TransactionBaseService` class from the core Medusa package `@medusajs/medusa`.
Each file you create in `src/services` should hold one service and export it.
The file name is important as it determines the name of the service when you need to use it elsewhere. The name of the service will be registered as the camel-case version of the file name + `Service` at the end of the name.
For example, if the file name is `hello.js`, the service will be registered as `helloService`. If the file name is `hello-world.js`, the service name will be registered as `helloWorldService`.
The registration name of the service is important, as youll be referring to it when you want to get access to the service using dependency injection or in routes.
## What's Next :rocket:
- Learn [how to create a service](./create-service.md)
- Check out the [Services Reference](/references/services/classes/AuthService) to see a list of all services in Medusa.

View File

@@ -1,26 +1,6 @@
---
title: Create a Subscriber
---
# Create a Subscriber
In this document, youll learn how you create a subscriber in your Medusa server that listens to events to perform an action.
## Overview
In Medusa, there are events that are emitted when a certain action occurs. For example, if a customer places an order, the `order.placed` event is emitted with the order data.
The purpose of these events is to allow other parts of the platform, or third-party integrations, to listen to those events and perform a certain action. That is done by creating subscribers.
Subscribers register handlers for an events and allows you to perform an action when that event occurs. For example, if you want to send your customer an email when they place an order, then you can listen to the `order.placed` event and send the email when the event is emitted.
Natively in Medusa there are subscribers to handle different events. However, you can also create your own custom subscribers.
Custom subscribers reside in your project's `src/subscribers` directory. Files here should export classes, which will be treated as subscribers by Medusa. By convention, the class name should end with `Subscriber` and the file name should be the camel-case version of the class name without `Subscriber`. For example, the `WelcomeSubscriber` class is in the file `src/subscribers/welcome.js`.
Whenever an event is emitted, the subscribers registered handler method is executed. The handler method receives as a parameter an object that holds data related to the event. For example, if an order is placed the `order.placed` event will be emitted and all the handlers will receive the order id in the parameter object.
In this document, youll learn how to create a [Subscriber](overview.md) in your Medusa server that listens to events to perform an action.
## Prerequisites

View File

@@ -1693,7 +1693,7 @@ As of Medusa v1.3.5, Sales Channels are available but guarded by a feature flag.
MEDUSA_FF_SALES_CHANNELS=true
```
Then, run the [migrations](../migrations.md#how-to-run-migrations).
Then, run the [migrations](../migrations/overview.md#how-to-run-migrations).
:::

View File

@@ -0,0 +1,24 @@
# Subscribers
In this document, you'll learn what Subscribers are in Medusa.
## What are Events?
In Medusa, there are events that are emitted when a certain action occurs. For example, if a customer places an order, the `order.placed` event is emitted with the order data.
The purpose of these events is to allow other parts of the platform, or third-party integrations, to listen to those events and perform a certain action. That is done by creating subscribers.
## What are Subscribers?
Subscribers register handlers for an events and allows you to perform an action when that event occurs. For example, if you want to send your customer an email when they place an order, then you can listen to the `order.placed` event and send the email when the event is emitted.
Natively in Medusa there are subscribers to handle different events. However, you can also create your own custom subscribers.
Custom subscribers reside in your project's `src/subscribers` directory. Files here should export classes, which will be treated as subscribers by Medusa. By convention, the class name should end with `Subscriber` and the file name should be the camel-case version of the class name without `Subscriber`. For example, the `WelcomeSubscriber` class is in the file `src/subscribers/welcome.js`.
Whenever an event is emitted, the subscribers registered handler method is executed. The handler method receives as a parameter an object that holds data related to the event. For example, if an order is placed the `order.placed` event will be emitted and all the handlers will receive the order id in the parameter object.
## What's Next :rocket:
- Learn [how to create a Subscriber](create-subscriber.md).
- [View the list of all events](events-list.md).

View File

@@ -61,7 +61,7 @@ module.exports = {
items: [
{
type: "docSidebar",
sidebarId: "tutorialSidebar",
sidebarId: "docsSidebar",
label: "Docs"
},
{
@@ -93,40 +93,6 @@ module.exports = {
},
],
},
{
type: 'dropdown',
label: 'References',
items: [
{
to: "cli/reference",
label: "CLI Reference",
},
{
type: "docSidebar",
sidebarId: "entitiesSidebar",
label: "Entities Reference",
},
{
to: "advanced/backend/subscribers/events-list",
label: "Events Reference",
},
{
type: "docSidebar",
sidebarId: "jsClientSidebar",
label: "JS Client Reference",
},
{
type: "docSidebar",
sidebarId: "servicesSidebar",
label: "Services Reference",
},
]
},
{
href: "https://github.com/medusajs/medusa/issues/new?assignees=&labels=type%3A+docs&template=docs.yml",
position: 'right',
label: 'Report an Issue'
},
{
href: "https://github.com/medusajs/medusa",
className: "navbar-github-link",
@@ -177,6 +143,18 @@ module.exports = {
],
copyright: `© ${new Date().getFullYear()} Medusa`,
},
sidebarFooter: [
{
href: "https://github.com/medusajs/medusa/issues/new?assignees=&labels=type%3A+docs&template=docs.yml",
label: 'Report an Issue',
className: 'alert-icon',
},
{
href: "https://medusajs.com/",
label: 'Go to medusajs.com',
className: 'topright-icon',
},
]
},
presets: [
[

View File

@@ -10,45 +10,50 @@
*/
module.exports = {
tutorialSidebar: [
{
type: "doc",
id: "homepage",
label: "Overview",
},
{
type: "doc",
id: "introduction",
label: "Introduction",
},
{
type: "doc",
id: "quickstart/quick-start",
label: "Quickstart Guide",
},
{
type: "doc",
id: "usage",
},
docsSidebar: [
{
type: "category",
collapsed: false,
label: "Usage Guides",
label: "Getting Started",
items: [
{
type: "doc",
id: "homepage",
label: "Overview",
},
{
type: "doc",
id: "introduction",
label: "Introduction",
},
{
type: "doc",
id: "quickstart/quick-start",
label: "Quickstart Guide",
},
{
type: "doc",
id: "usage",
},
]
},
{
type: "category",
label: "Setup & Deployment",
items: [
{
type: "doc",
id: "tutorial/set-up-your-development-environment",
label: "Set Up your Development Environment"
label: "Set Up Development Environment"
},
{
type: "doc",
id: "usage/configurations",
label: "Configure your Server"
label: "Configure Server"
},
{
type: "category",
collapsed: true,
label: "Storefront Quickstart",
label: "Storefronts",
items: [
{
type: "doc",
@@ -146,177 +151,150 @@ module.exports = {
},
],
},
{
type: "category",
label: 'Upgrade Guides',
collapsed: true,
link: {
type: 'doc',
id: 'advanced/backend/upgrade-guides/index'
},
items: [
{
type: "doc",
id: "advanced/backend/upgrade-guides/1-3-0",
label: "v1.3.0"
},
{
type: "doc",
id: "advanced/backend/upgrade-guides/1-3-6",
label: "v1.3.6"
},
]
},
]
},
{
type: "category",
label: "Advanced Guide",
collapsed: false,
label: "How-to Guides",
items: [
{
type: "category",
label: "Medusa Server",
collapsed: true,
items: [
{
type: "category",
label: 'Endpoints',
collapsed: true,
items: [
{
type: "doc",
id: "advanced/backend/endpoints/add-storefront",
label: "Create Endpoint for Storefront"
},
{
type: "doc",
id: "advanced/backend/endpoints/add-admin",
label: "Create Endpoint for Admin"
},
]
},
{
type: "doc",
id: "advanced/backend/services/create-service",
label: "Create a Service"
},
{
type: "category",
label: 'Subscribers',
collapsed: true,
items: [
{
type: "doc",
id: "advanced/backend/subscribers/create-subscriber",
label: "Create a Subscriber"
},
{
type: "doc",
id: "advanced/backend/subscribers/events-list",
label: "List of Events"
},
]
},
{
type: "doc",
id: "advanced/backend/entities",
label: "Entities"
},
{
type: "category",
label: 'Shipping',
collapsed: true,
items: [
{
type: "doc",
id: "advanced/backend/shipping/overview",
label: "Architecture Overview"
},
{
type: "doc",
id: "advanced/backend/shipping/add-fulfillment-provider",
label: "Create a Fulfillment Provider"
}
]
},
{
type: "category",
label: 'Payment',
collapsed: true,
items: [
{
type: "doc",
id: "advanced/backend/payment/overview",
label: "Architecture Overview"
},
{
type: "doc",
id: "advanced/backend/payment/how-to-create-payment-provider",
label: "Create a Payment Provider"
},
]
},
{
type: "category",
label: "Notification",
collapsed: true,
items: [
{
type: "doc",
id: "advanced/backend/notification/overview"
},
{
type: "doc",
id: "advanced/backend/notification/how-to-create-notification-provider",
label: "Create a Notification Provider"
}
]
},
{
type: "category",
label: "Plugins",
collapsed: true,
items: [
{
type: "doc",
id: "advanced/backend/plugins/overview",
label: "Overview"
},
{
type: "doc",
id: "advanced/backend/plugins/create",
}
]
},
{
type: "doc",
id: "advanced/backend/migrations",
label: "Migrations"
},
{
type: "category",
label: 'Upgrade Guides',
collapsed: true,
link: {
type: 'doc',
id: 'advanced/backend/upgrade-guides/index'
},
items: [
{
type: "doc",
id: "advanced/backend/upgrade-guides/1-3-0",
label: "v1.3.0"
},
{
type: "doc",
id: "advanced/backend/upgrade-guides/1-3-6",
label: "v1.3.6"
},
]
},
]
type: "doc",
id: "advanced/backend/endpoints/add-storefront",
label: "Create Endpoint for Storefront"
},
{
type: "doc",
id: "advanced/backend/endpoints/add-admin",
label: "Create Endpoint for Admin"
},
{
type: "doc",
id: "advanced/backend/services/create-service",
label: "Create a Service"
},
{
type: "doc",
id: "advanced/backend/subscribers/create-subscriber",
label: "Create a Subscriber"
},
{
type: "doc",
id: "advanced/backend/entities/index",
label: "Create an Entity"
},
{
type: "doc",
id: "advanced/backend/shipping/add-fulfillment-provider",
label: "Create a Fulfillment Provider"
},
{
type: "doc",
id: "advanced/backend/payment/how-to-create-payment-provider",
label: "Create a Payment Provider"
},
{
type: "doc",
id: "advanced/backend/notification/how-to-create-notification-provider",
label: "Create a Notification Provider"
},
{
type: "doc",
id: "advanced/backend/plugins/create",
label: "Create a Plugin"
},
{
type: "doc",
id: "advanced/backend/migrations/index",
label: "Create a Migration"
},
{
type: "category",
label: "Storefront",
collapsed: true,
items: [
{
type: "doc",
id: "advanced/storefront/how-to-implement-checkout-flow",
id: "guides/carts-in-medusa",
label: "Implement Cart"
},
{
type: "doc",
id: "guides/carts-in-medusa",
id: "advanced/storefront/how-to-implement-checkout-flow",
label: "Implement Checkout"
},
]
}
]
},
{
type: "category",
label: "Conceptual Guides",
items: [
{
type: "doc",
id: "advanced/backend/services/overview",
label: "Services"
},
{
type: "doc",
id: "advanced/backend/subscribers/overview",
label: "Subscribers"
},
{
type: "doc",
id: "advanced/backend/entities/overview",
label: "Entities"
},
{
type: "doc",
id: "advanced/backend/shipping/overview",
label: "Shipping Architecture"
},
{
type: "doc",
id: "advanced/backend/payment/overview",
label: "Payment Architecture"
},
{
type: "doc",
id: "advanced/backend/notification/overview",
label: "Notification Architecture"
},
{
type: "doc",
id: "advanced/backend/plugins/overview",
label: "Plugins"
},
{
type: "doc",
id: "advanced/backend/migrations/overview",
label: "Migrations"
},
]
},
{
type: "category",
label: "Integrations",
collapsed: false,
items: [
{
type: "category",
@@ -483,14 +461,40 @@ module.exports = {
],
},
{
type: "doc",
id: "cli/reference",
label: "CLI Reference",
},
{
type: "doc",
id: "contribution-guidelines",
label: "Contribution Guidelines",
type: "category",
label: "References",
items: [
{
type: "doc",
id: "cli/reference",
label: "CLI Reference",
},
{
type: "doc",
id: "contribution-guidelines",
label: "Contribution Guidelines",
},
{
type: "ref",
id: "references/entities/classes/Address",
label: "Entities Reference",
},
{
type: "doc",
id: "advanced/backend/subscribers/events-list",
label: "Events Reference"
},
{
type: "ref",
id: "js-client/overview",
label: "JS Client Reference",
},
{
type: "ref",
id: "references/services/classes/AuthService",
label: "Services Reference",
},
]
},
],
userGuideSidebar: [

View File

@@ -6,7 +6,7 @@
*/
/* You can override the default Infima variables here. */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;400;500;600;700&display=swap');
:root {
/* Colors */
@@ -21,7 +21,7 @@
/* Fonts */
--ifm-code-font-size: 80%;
--ifm-font-family-base: "custom-font",BlinkMacSystemFont,-apple-system,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif;
--ifm-font-family-base: "Inter",BlinkMacSystemFont,-apple-system,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif;
/* Sidebar */
--doc-sidebar-width: 350px !important;
@@ -33,6 +33,9 @@
--ifm-toc-border-color: #f0f0f0;
--ifm-toc-link-color: #a6acb5;
--ifm-toc-padding-horizontal: 9px;
--ifm-menu-active: #111827;
--ifm-navbar-shadow: 0px 1px 0px 0px #a6acb5;
}
html:not([data-theme="dark"]) {
@@ -41,7 +44,7 @@ html:not([data-theme="dark"]) {
}
html[data-theme="dark"] {
--ifm-navbar-background-color: #242526;
--ifm-navbar-background-color: rgba(5, 1, 13, 1);
/* --ifm-color-primary: #7C53FF; */
--ifm-color-primary-dark: #6231ff;
--ifm-color-primary-darker: #5520ff;
@@ -49,11 +52,14 @@ html[data-theme="dark"] {
--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-background-color: rgba(5, 1, 13, 1);
--ifm-background-surface-color: rgba(5, 1, 13, 1);
--ifm-medusa-gray: #292929;
--ifm-menu-color: #fff;
--ifm-toc-border-color: #333;
--ifm-menu-active: #fff;
--ifm-menu-color: rgba(255, 255, 255, 0.5);
--ifm-navbar-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .breadcrumbs__item--active a {
@@ -225,6 +231,12 @@ a.menu__link--sublist::after,
padding-right: 32px;
}
@media screen and (max-width: 991px) {
.navbar {
padding-left: 24px;
}
}
/* Footer */
footer .footer__items svg {
@@ -300,7 +312,7 @@ details summary {
}
[data-theme="dark"] a:hover {
color: rgba(255, 255, 255, 0.8);
color: var(--ifm-menu-active);
}
.DocSearch-Container {
@@ -349,6 +361,11 @@ html[data-theme="dark"] .redocusaurus h2 + div + div > div + div {
background-color: #11171a;
}
html[data-theme="dark"] .redocusaurus .menu-content,
html[data-theme="dark"] .redocusaurus .menu-content label {
background-color: var(--ifm-background-color) !important;
}
/* User Guide Styling */
html[data-theme="dark"] kbd {
--ifm-color-emphasis-0: var(--ifm-color-gray-200);
@@ -364,4 +381,200 @@ kbd {
vertical-align: sub;
width: 20px;
height: 20px;
}
/* Sidebar */
.menu__link,
.redocusaurus .menu-content label {
font-weight: 500 !important;
font-size: 14px;
line-height: 1.7em;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.menu__link {
display: inline-block;
max-width: 100%;
}
.theme-doc-sidebar-item-link-level-1 .menu__link,
.theme-doc-sidebar-item-category-level-1 .menu__link,
.redocusaurus .menu-content label.-depth1 {
padding-left: 1.7em;
}
[class*=theme-doc-sidebar-item-link-level-]:not(.theme-doc-sidebar-item-link-level-1) .menu__link {
padding-left: 2em;
}
.redocusaurus .menu-content label {
color: var(--ifm-menu-color)
}
.menu__link:hover,
.menu__link--active,
.menu__list-item-collapsible:hover,
.menu__list-item-collapsible--active,
.redocusaurus .menu-content label:hover,
.redocusaurus .menu-content label.active {
background-color: transparent !important;
color: var(--ifm-menu-active);
}
.menu__link--active,
.menu__list-item-collapsible--active,
.redocusaurus .menu-content label.active {
font-weight: 600 !important;
}
.menu__list,
.redocusaurus .menu-content ul {
padding-left: 1.7em;
padding-right: 1.7em;
}
a.menu__link--sublist::after {
content: none;
}
a.menu__link--sublist + .menu__caret,
.redocusaurus .menu-content label svg {
display: none;
}
a.menu__link--sublist::before,
.redocusaurus .menu-content label[type=tag].-depth1::before {
content: "";
height: 1.1em;
width: 1.1em;
background-image: url('/img/triangle-right.svg');
background-repeat: no-repeat;
background-position: center;
transition: transform var(--ifm-transition-fast) linear;
position: absolute;
}
html:not([data-theme="dark"]) a.menu__link--sublist:hover::before,
html:not([data-theme="dark"]) .redocusaurus .menu-content label[type=tag].-depth1:hover::before,
html:not([data-theme="dark"]) a.menu__link--sublist.menu__link--active::before,
html:not([data-theme="dark"]) .redocusaurus .menu-content label[type=tag].-depth1.active::before {
background-image: url('/img/triangle-right-hover.svg');
}
[data-theme="dark"] a.menu__link--sublist:hover::before,
[data-theme="dark"] .redocusaurus .menu-content label[type=tag].-depth1:hover::before,
[data-theme="dark"] a.menu__link--sublist.menu__link--active::before,
[data-theme="dark"] .redocusaurus .menu-content label[type=tag].-depth1.active::before {
background-image: url('/img/triangle-right-hover-dark.svg');
}
.menu__list-item:not(.menu__list-item--collapsed) > .menu__list-item-collapsible > .menu__link--sublist:before {
transform: rotate(90deg);
}
.menu__link:not(.menu__link--sublist)::before {
content: "";
height: 1.1em;
width: 1.1em;
background-image: url('/img/circle.svg');
background-repeat: no-repeat;
background-position: center;
position: absolute;
}
html:not([data-theme="dark"]) .menu__link:not(.menu__link--sublist):hover::before,
html:not([data-theme="dark"]) .menu__link:not(.menu__link--sublist).menu__link--active::before {
background-image: url('/img/circle-hover.svg');
}
[data-theme="dark"] .menu__link:not(.menu__link--sublist):hover::before,
[data-theme="dark"] .menu__link:not(.menu__link--sublist).menu__link--active::before {
background-image: url('/img/circle-hover-dark.svg');
}
[class*=theme-doc-sidebar-item-link-level-]:not(.theme-doc-sidebar-item-link-level-1) .menu__link::before,
[class*=theme-doc-sidebar-item-link-level-]:not(.theme-doc-sidebar-item-link-level-1) a.menu__link--sublist::before,
[class*=theme-doc-sidebar-item-category-level-]:not(.theme-doc-sidebar-item-category-level-1) .menu__link::before,
[class*=theme-doc-sidebar-item-category-level-]:not(.theme-doc-sidebar-item-category-level-1) a.menu__link--sublist::before {
left: 5px;
}
.theme-doc-sidebar-item-link-level-1 .menu__link::before,
.theme-doc-sidebar-item-link-level-1 a.menu__link--sublist::before,
.theme-doc-sidebar-item-category-level-1 .menu__link::before,
.theme-doc-sidebar-item-category-level-1 a.menu__link--sublist::before,
.redocusaurus .menu-content label[type=tag].-depth1::before {
left: 0;
}
.redocusaurus .menu-content label::before {
top: 35%;
}
a.menu__link--sublist::before,
.theme-doc-sidebar-item-link-level-1 .menu__link::before,
.menu__link:not(.menu__link--sublist)::before {
top: 28%;
}
.menu__list-item > .menu__list-item-collapsible + .menu__list {
transition-property: opacity, height !important;
transition-duration: 350ms !important;
transition-timing-function: ease-in-out !important;
will-change: opacity, height !important;
opacity: 0;
display: block !important;
height: 0;
transition-delay: 100ms, 0s !important;
}
.menu__list-item:not(.menu__list-item--collapsed) > .menu__list-item-collapsible + .menu__list {
opacity: 1;
height: auto;
}
.menu__list-item.alert-icon .menu__link::before {
background-image: url('/img/alert.svg');
width: 20px;
height: 20px;
top: 23%;
}
html:not([data-theme="dark"]) .menu__list-item.alert-icon .menu__link:hover::before,
html:not([data-theme="dark"]) .menu__list-item.alert-icon .menu__link.menu__link--active::before {
background-image: url('/img/alert-hover.svg');
}
[data-theme="dark"] .menu__list-item.alert-icon .menu__link:hover::before,
[data-theme="dark"] .menu__list-item.alert-icon .menu__link.menu__link--active::before {
background-image: url('/img/alert-hover-dark.svg');
}
.menu__list-item.topright-icon .menu__link::before {
background-image: url('/img/arrow-top-right.svg');
width: 20px;
height: 20px;
top: 23%;
}
html:not([data-theme="dark"]) .menu__list-item.topright-icon .menu__link:hover::before,
html:not([data-theme="dark"]) .menu__list-item.topright-icon .menu__link.menu__link--active::before {
background-image: url('/img/arrow-top-right-hover.svg');
}
[data-theme="dark"] .menu__list-item.topright-icon .menu__link:hover::before,
[data-theme="dark"] .menu__list-item.topright-icon .menu__link.menu__link--active::before {
background-image: url('/img/arrow-top-right-hover-dark.svg');
}
.menu__list-item.alert-icon [class*=iconExternalLink],
.menu__list-item.topright-icon [class*=iconExternalLink] {
display: none;
}
.menu__list-item-collapsible {
padding-bottom: 6px;
}

View File

@@ -0,0 +1,41 @@
import React from 'react';
import clsx from 'clsx';
import {useThemeConfig} from '@docusaurus/theme-common';
import Logo from '@theme/Logo';
import CollapseButton from '@theme/DocSidebar/Desktop/CollapseButton';
import Content from '@theme/DocSidebar/Desktop/Content';
import styles from './styles.module.css';
import DocSidebarItem from '@theme/DocSidebarItem';
function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
const {
navbar: {hideOnScroll},
docs: {
sidebar: {hideable},
},
sidebarFooter = [],
} = useThemeConfig();
return (
<div
className={clsx(
styles.sidebar,
hideOnScroll && styles.sidebarWithHideableNavbar,
isHidden && styles.sidebarHidden,
)}>
{hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
<Content path={path} sidebar={sidebar} />
<ul className={
clsx(
styles.sidebarFooterList
)
}>
{sidebarFooter.map((item, index) => (
<DocSidebarItem key={index} item={item} index={index} level={1} />
))}
</ul>
{hideable && <CollapseButton onClick={onCollapse} />}
</div>
);
}
export default React.memo(DocSidebarDesktop);

View File

@@ -0,0 +1,49 @@
@media (min-width: 997px) {
.sidebar {
display: flex;
flex-direction: column;
max-height: 100vh;
height: 100%;
position: sticky;
top: 0;
padding-top: var(--ifm-navbar-height);
width: var(--doc-sidebar-width);
transition: opacity 50ms ease;
}
.sidebarWithHideableNavbar {
padding-top: 0;
}
.sidebarHidden {
opacity: 0;
height: 0;
overflow: hidden;
visibility: hidden;
}
.sidebarLogo {
display: flex !important;
align-items: center;
margin: 0 var(--ifm-navbar-padding-horizontal);
min-height: var(--ifm-navbar-height);
max-height: var(--ifm-navbar-height);
color: inherit !important;
text-decoration: none !important;
}
.sidebarLogo img {
margin-right: 0.5rem;
height: 2rem;
}
}
.sidebarLogo {
display: none;
}
.sidebarFooterList {
border-top: 1px solid var(--ifm-toc-border-color);
list-style: none;
padding: 1.7em;
}

View File

@@ -1,12 +0,0 @@
import OriginalDocSidebar from "@theme-original/DocSidebar"
import React from "react"
const DocSidebar = (props) => {
return (
<div className="sidebar-bg">
<OriginalDocSidebar {...props} />
</div>
)
}
export default DocSidebar

View File

@@ -1,124 +0,0 @@
/**
* 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.
*/
:root {
--collapse-button-bg-color-dark: #2e333a;
}
@media (min-width: 997px) {
.sidebar {
display: flex;
flex-direction: column;
max-height: 100vh;
height: 100%;
position: sticky;
top: 0;
padding-top: var(--ifm-navbar-height);
width: var(--doc-sidebar-width);
transition: opacity 50ms ease;
}
.sidebarWithHideableNavbar {
padding-top: 0;
}
.sidebarHidden {
opacity: 0;
height: 0;
overflow: hidden;
visibility: hidden;
}
.sidebarLogo {
display: flex !important;
align-items: center;
margin: 0 var(--ifm-navbar-padding-horizontal);
min-height: var(--ifm-navbar-height);
max-height: var(--ifm-navbar-height);
color: inherit !important;
text-decoration: none !important;
}
.sidebarLogo img {
margin-right: 0.5rem;
height: 2rem;
}
.menu {
flex-grow: 1;
padding: 0.5rem;
}
.menuLinkText {
cursor: initial;
}
.menuLinkText:hover {
background: none;
}
.menuWithAnnouncementBar {
margin-bottom: var(--docusaurus-announcement-bar-height);
}
.collapseSidebarButton {
display: block !important;
background-color: var(--ifm-button-background-color);
height: 40px;
position: sticky;
bottom: 0;
border-radius: 0;
border: 1px solid var(--ifm-toc-border-color);
}
.collapseSidebarButtonIcon {
transform: rotate(180deg);
margin-top: 4px;
}
html[dir="rtl"] .collapseSidebarButtonIcon {
transform: rotate(0);
}
html[data-theme="dark"] .collapseSidebarButton {
background-color: var(--collapse-button-bg-color-dark);
}
html[data-theme="dark"] .collapseSidebarButton:hover,
html[data-theme="dark"] .collapseSidebarButton:focus {
background-color: var(--ifm-color-emphasis-200);
}
}
.sidebarLogo,
.collapseSidebarButton {
display: none;
}
.sidebarMenuIcon {
vertical-align: middle;
}
.sidebarMenuCloseIcon {
display: inline-flex;
justify-content: center;
align-items: center;
height: 24px;
font-size: 1.5rem;
font-weight: var(--ifm-font-weight-bold);
line-height: 0.9;
width: 24px;
}
:global(.menu__list) :global(.menu__list) {
overflow-y: hidden;
will-change: height;
transition: height var(--ifm-transition-fast) linear;
}
:global(.menu__list-item--collapsed) :global(.menu__list) {
height: 0 !important;
}

View File

@@ -0,0 +1,5 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 6.66669V10" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 13.3333H10.0088" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 554 B

5
www/docs/static/img/alert-hover.svg vendored Normal file
View File

@@ -0,0 +1,5 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 6.66669V10" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 13.3333H10.0088" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 563 B

5
www/docs/static/img/alert.svg vendored Normal file
View File

@@ -0,0 +1,5 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 6.66669V10" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 13.3333H10.0088" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 563 B

View File

@@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.0129 4.98792L4.93799 15.0628M15.0129 4.98792L7.93994 4.93713M15.0129 4.98792L15.0636 12.0608" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 292 B

View File

@@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.0129 4.98792L4.93799 15.0628M15.0129 4.98792L7.93994 4.93713M15.0129 4.98792L15.0636 12.0608" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 295 B

View File

@@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.0129 4.98792L4.93799 15.0628M15.0129 4.98792L7.93994 4.93713M15.0129 4.98792L15.0636 12.0608" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 295 B

View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="5" y="5" width="6" height="6" rx="3" fill="#fff"/>
</svg>

After

Width:  |  Height:  |  Size: 163 B

3
www/docs/static/img/circle-hover.svg vendored Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="5" y="5" width="6" height="6" rx="3" fill="#111827"/>
</svg>

After

Width:  |  Height:  |  Size: 166 B

3
www/docs/static/img/circle.svg vendored Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="5" y="5" width="6" height="6" rx="3" fill="#9CA3AF"/>
</svg>

After

Width:  |  Height:  |  Size: 166 B

5
www/docs/static/img/info.svg vendored Normal file
View File

@@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 10.6667V8" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 5.33337H8.0075" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 528 B

View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1176 7.00955L7.10774 4.80398C6.72377 4.52284 6.25883 4.54977 5.91806 4.77895C5.59155 4.99854 5.4001 5.3801 5.4001 5.79442V10.2058C5.4001 10.6201 5.59153 11.0017 5.91814 11.2212C6.25906 11.4504 6.72386 11.4772 7.10771 11.1959M7.10771 11.1959L10.1176 8.99062C10.4618 8.73849 10.6001 8.34329 10.6001 8.00009C10.6001 7.65689 10.4618 7.26168 10.1176 7.00955" fill="#fff"/>
</svg>

After

Width:  |  Height:  |  Size: 524 B

View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1176 7.00955L7.10774 4.80398C6.72377 4.52284 6.25883 4.54977 5.91806 4.77895C5.59155 4.99854 5.4001 5.3801 5.4001 5.79442V10.2058C5.4001 10.6201 5.59153 11.0017 5.91814 11.2212C6.25906 11.4504 6.72386 11.4772 7.10771 11.1959M7.10771 11.1959L10.1176 8.99062C10.4618 8.73849 10.6001 8.34329 10.6001 8.00009C10.6001 7.65689 10.4618 7.26168 10.1176 7.00955" fill="#111827"/>
</svg>

After

Width:  |  Height:  |  Size: 527 B

View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1176 7.00955L7.10774 4.80398C6.72377 4.52284 6.25883 4.54977 5.91806 4.77895C5.59155 4.99854 5.4001 5.3801 5.4001 5.79442V10.2058C5.4001 10.6201 5.59153 11.0017 5.91814 11.2212C6.25906 11.4504 6.72386 11.4772 7.10771 11.1959M7.10771 11.1959L10.1176 8.99062C10.4618 8.73849 10.6001 8.34329 10.6001 8.00009C10.6001 7.65689 10.4618 7.26168 10.1176 7.00955" fill="#9CA3AF"/>
</svg>

After

Width:  |  Height:  |  Size: 527 B