docs: redesigned documentation (#2539)
* docs: redesigned navigation bar (#2478) * docs: redesigned homepage (#2480) * docs: redesigned homepage * fixed link * docs: redesigned notes (#2491) * docs: Applied Typography redesign rules (#2516) * changes to typography * small changes and fixes * docs: redesigned table of content (#2518) * redesigning toc * finalized table of content design * docs: redesigned code blocks (#2519) * docs: redesigned code blocks * removed unused package * docs: redesigned survey and content footer (#2522) * fixes to inline code * redesigned doc footer * docs: redesigned footer (#2523) * docs: changed dark mode colors (#2524) * docs: redesigned sidebar (#2535) * docs: redesigned search modal (#2537) * docs: resolved loose ends (#2538) * added spacing for tabs * docs: added no-zoom class for deploy images * fix to tooltip design for inline code
This commit is contained in:
Shahed Nasser
@@ -16,7 +16,9 @@ If you’re not very familiar with Medusa’s architecture, you can learn more a
|
||||
|
||||
Instead of manually following this guide to install then later deploy the Medusa Admin, you can deploy the Medusa Admin to Netlify with this button:
|
||||
|
||||
[](https://app.netlify.com/start/deploy?repository=https://github.com/medusajs/admin)
|
||||
<a href="https://app.netlify.com/start/deploy?repository=https://github.com/medusajs/admin" class="img-url">
|
||||
<img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" class="no-zoom-img" />
|
||||
</a>
|
||||
|
||||
## Install the Admin
|
||||
|
||||
|
||||
@@ -60,7 +60,7 @@ The first step is to upload the CSV file to import prices from.
|
||||
|
||||
You can do that by sending the following request to the [Upload Files](https://docs.medusajs.com/api/admin/#tag/Upload/operation/PostUploads) endpoint:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -111,7 +111,7 @@ To start a new price import, you must create a batch job.
|
||||
|
||||
You can do that by sending the following request to the [Create a Batch Job](https://docs.medusajs.com/api/admin/#tag/Batch-Job/operation/PostBatchJobs) endpoint:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -196,7 +196,7 @@ After creating the batch job, it will be pre-processed. At this point, the CSV f
|
||||
|
||||
You can retrieve all the details of the batch job, including its status and the brief statistics related to the prices by sending the following request:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -255,7 +255,7 @@ A batch job can be confirmed only once the batch job has the status `pre_process
|
||||
|
||||
To confirm a batch job send the following request:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
|
||||
@@ -54,7 +54,7 @@ The first step is to upload the CSV file that you want to import products.
|
||||
|
||||
You can do that by sending the following request to the [Upload Files](https://docs.medusajs.com/api/admin/#tag/Upload/operation/PostUploads) endpoint:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -105,7 +105,7 @@ To start a new product import, you must create a batch job.
|
||||
|
||||
You can do that by sending the following request to the [Create a Batch Job](https://docs.medusajs.com/api/admin/#tag/Batch-Job/operation/PostBatchJobs) endpoint:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -184,7 +184,7 @@ After creating the batch job, it will be pre-processed. At this point, the CSV f
|
||||
|
||||
You can retrieve all the details of the batch job, including its status and the brief statistics related to the products by sending the following request:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -243,7 +243,7 @@ A batch job can be confirmed only once the batch job has the status `pre_process
|
||||
|
||||
To confirm a batch job send the following request:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
|
||||
@@ -39,7 +39,7 @@ You can learn more about [authenticating as an admin user in the API reference](
|
||||
|
||||
You can create a customer group by sending a request to the Create Customer Group endpoint:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -93,7 +93,7 @@ This request requires the `name` parameter and optionally accepts the `metadata`
|
||||
|
||||
You can get a list of all customer groups by sending a request to the List Customer Groups endpoint:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -135,7 +135,7 @@ You can also pass filters and other selection query parameters to the request. C
|
||||
|
||||
You can retrieve a single customer group by sending a request to the Get a Customer Group endpoint:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -175,7 +175,7 @@ This request accepts the ID of the customer group to retrieve as a path paramete
|
||||
|
||||
You can update a customer group’s data by sending a request to the Update Customer Group endpoint:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -235,7 +235,7 @@ This request accepts the ID of the customer group as a path parameter, and optio
|
||||
|
||||
You can delete a customer group by sending a request to the Delete a Customer Group endpoint:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -279,7 +279,7 @@ This request accepts the ID of the customer group to delete as a path parameter.
|
||||
|
||||
You can add a customer to a group by sending a request to the Customer Group’s Add Customer endpoint:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -343,7 +343,7 @@ This request accepts the ID of the customer group as a path parameter. In its bo
|
||||
|
||||
You can retrieve a list of all customers in a customer group using the List Customers endpoint:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -387,7 +387,7 @@ Removing customers from a group does not remove them entirely. They’ll still b
|
||||
|
||||
You can remove customers from a customer group by sending a request to the Remove Customers endpoint:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
|
||||
@@ -254,7 +254,7 @@ The first step is to create a batch job using the [Create Batch Job endpoint](ht
|
||||
|
||||
For example, this creates a batch job of the type `publish-products`:
|
||||
|
||||
<Tabs groupId="request-types">
|
||||
<Tabs groupId="request-types" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -314,7 +314,7 @@ Make sure to replace `<YOUR_SERVER>` with the server URL where applicable.
|
||||
|
||||
You can retrieve the batch job afterward to get its status and view details about the process in the `result` property:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -367,7 +367,7 @@ Based on the batch job strategy implemented in this documentation, the `result`
|
||||
|
||||
To process the batch job, send a request to [confirm the batch job](https://docs.medusajs.com/api/admin/#tag/Batch-Job/operation/PostBatchJobsBatchJobConfirmProcessing):
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
|
||||
@@ -63,7 +63,7 @@ You can learn more about what the conditions you can apply on a price list and i
|
||||
|
||||
For example, sending the following request creates a price list with two prices: one that is applied when the maximum quantity of the product variant in the cart is 3; another is applied when the minimum quantity of the same variant in the cart is 4:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -172,7 +172,7 @@ You can check the full list of request body parameters in the [API reference](ht
|
||||
|
||||
You can retrieve all of a price list’s details using the Get a Price List endpoint:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -212,7 +212,7 @@ After creating a price list, you can update all of its fields including its stat
|
||||
|
||||
For example, by sending the following request the end date of the price list will be updated:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -274,7 +274,7 @@ You can also set the `override` request body parameter to `true` to replace the
|
||||
|
||||
For example, sending the following request adds a new price to the price list:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -346,7 +346,7 @@ For a full list of request body parameters, check out the [API reference](https:
|
||||
|
||||
You can delete all the prices of a product’s variants using the [Delete Product Prices](https://docs.medusajs.com/api/admin/#tag/Price-List/operation/DeletePriceListsPriceListProductsProductPrices) endpoint:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -386,7 +386,7 @@ This request returns the IDs of the deleted prices.
|
||||
|
||||
You can delete all the prices of a variant using the [Delete Variant Prices](https://docs.medusajs.com/api/admin/#tag/Price-List/operation/DeletePriceListsPriceListVariantsVariantPrices) endpoint:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -428,7 +428,7 @@ This request returns the IDs of the deleted prices.
|
||||
|
||||
You can delete a price list, and subsequently all prices defined in it, using the [Delete Price List](https://docs.medusajs.com/api/admin/#tag/Price-List/operation/DeletePriceListsPriceList) endpoint:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
|
||||
@@ -52,7 +52,7 @@ You can learn more about [authenticating as an admin user in the API reference](
|
||||
|
||||
You can create a sales channel by sending a request to the Create a Sales Channel endpoint:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -111,7 +111,7 @@ It returns the created sales channel.
|
||||
|
||||
You can list all sales channels by sending a request to the List Sales Channels endpoint:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -151,7 +151,7 @@ This request returns an array of all sales channels in your store. You can also
|
||||
|
||||
You can retrieve a sales channel’s details by its ID using the Get Sales Channel endpoint:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -191,7 +191,7 @@ This request returns the sales channel with the specified ID.
|
||||
|
||||
You can update a Sales Channel’s details and attributes by sending a request to the Update Sales Channel endpoint:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -249,7 +249,7 @@ You can check out [the API Reference for a full list of body parameters](https:/
|
||||
|
||||
You can delete a sales channel by sending a request to the Delete Sales Channel endpoint with the ID of the sales channel to delete:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -293,7 +293,7 @@ The ID of the deleted sales channel is returned in the response.
|
||||
|
||||
To add a product to a sales channel, send a request to the Sales Channel’s Add Products endpoint:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -359,7 +359,7 @@ This request returns the sales channel.
|
||||
|
||||
You can list the products available in a sales channel by sending a request to the List Products endpoint and passing the `sales_channel_id` query parameter to filter by a specific sales channel:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -407,7 +407,7 @@ Deleting a product from a sales channel doesn't delete it completely. It only ma
|
||||
|
||||
You can delete a product from a sales channel by sending a request to the Sales Channel’s Delete Products endpoint:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -475,7 +475,7 @@ This request returns the sales channel.
|
||||
|
||||
You can filter orders by a specific sales channel by sending a request to the List Orders endpoint and passing the `sales_channel_id` query parameter to filter by a specific sales channel:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
---
|
||||
description: 'Actions Required for v.1.3.0'
|
||||
---
|
||||
|
||||
# v1.3.0
|
||||
|
||||
Version 1.3.0 of Medusa introduces new features including the addition of Line Item Adjustments and a more advanced Promotions API, as well as a change in loading environment variables into your Medusa server. The changes do not affect the public APIs and require only running necessary data migrations.
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
---
|
||||
description: 'Actions Required for v.1.3.0'
|
||||
---
|
||||
|
||||
# v1.3.6
|
||||
|
||||
Following the addition of feature flags in version v1.3.3 and the addition of the Sales Channels API in v1.3.5, v1.3.6 introduces a data migration script that moves all products into the Default Sales Channel.
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
---
|
||||
description: 'Actions Required for v.1.3.0'
|
||||
---
|
||||
|
||||
# v1.3.8
|
||||
|
||||
Updating your medusa server to version `1.3.8` may cause issues when using NPM. Please refer to this guide for more details on how to resolve it.
|
||||
|
||||
@@ -45,7 +45,7 @@ In this step, the customer generally enters their shipping info, then chooses th
|
||||
|
||||
After the customer enters their shipping address information, you must send a `POST` request to the [Update a Cart](https://docs.medusajs.com/api/store/#tag/Cart/operation/PostCartsCart) API endpoint:
|
||||
|
||||
<Tabs groupId="request-tyoe">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -111,7 +111,7 @@ After updating the cart with the customer’s address, the list of available [sh
|
||||
|
||||
You can retrieve the list of shipping options by sending a `GET` request to the [Retrieve Shipping Options for Cart API](https://docs.medusajs.com/api/store/#tag/Shipping-Option/operation/GetShippingOptionsCartId) endpoint:
|
||||
|
||||
<Tabs groupId="request-tyoe">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -141,7 +141,7 @@ The request accepts the ID of the cart as a path parameter. It returns the array
|
||||
|
||||
Once the customer chooses one of the available shipping options, send a `POST` request to the [Add a Shipping Method](https://docs.medusajs.com/api/store/#tag/Cart/operation/PostCartsCartShippingMethod) API endpoint. This will create a [shipping method](../backend/shipping/overview.md#shipping-method) based on the shipping option chosen and will associate it with the customer’s cart:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -189,7 +189,7 @@ When the page opens and before the payment providers are displayed to the custom
|
||||
|
||||
To initialize the payment sessions, send a `POST` request to the [Initialize Payment Sessions](https://docs.medusajs.com/api/store/#tag/Cart/operation/PostCartsCartPaymentSessions) API endpoint:
|
||||
|
||||
<Tabs groupId="request-tyoe">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -221,7 +221,7 @@ This endpoint accepts the ID of the cart as a path parameter. It returns the upd
|
||||
|
||||
When the customer chooses the payment provider they want to complete purchase with, you should select the payment session associated with that payment provider. To do that, send a `POST` request to the [Select a Payment Session](https://docs.medusajs.com/api/store/#tag/Cart/operation/PostCartsCartPaymentSession) API endpoint:
|
||||
|
||||
<Tabs groupId="request-tyoe">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -271,7 +271,7 @@ This step is optional and is only necessary for some payment providers. As menti
|
||||
|
||||
If you need to update that data at any point before the purchase is made, send a request to [Update a Payment Session](https://docs.medusajs.com/api/store/#tag/Cart/operation/PostCartsCartPaymentSessionUpdate) API endpoint:
|
||||
|
||||
<Tabs groupId="request-tyoe">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -323,7 +323,7 @@ The last step is to place the order by completing the cart. When you complete th
|
||||
|
||||
To complete a cart, send a `POST` request to the [Complete a Cart](https://docs.medusajs.com/api/store/#tag/Cart/operation/PostCartsCartComplete) API endpoint:
|
||||
|
||||
<Tabs groupId="request-tyoe">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
|
||||
@@ -29,7 +29,7 @@ If you follow the JS Client code blocks, it’s assumed you already have [Medusa
|
||||
|
||||
To filter products by a specific sales channel, pass the `sales_channel_id` query parameter to the List Products endpoint:
|
||||
|
||||
<Tabs groupId="request-tyoe">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -67,7 +67,7 @@ The request returns an array of products. These are the products that are availa
|
||||
|
||||
To associate a sales channel with a cart while creating it, you can pass the `sales_channel_id` request body parameter with the ID of the sales channel:
|
||||
|
||||
<Tabs groupId="request-tyoe">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
|
||||
@@ -108,7 +108,7 @@ The request returns the created cart.
|
||||
|
||||
You can update the sales channel of an existing cart by passing the `sales_channel_id` request body parameter with the ID of the sales channel:
|
||||
|
||||
<Tabs groupId="request-tyoe">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
|
||||
@@ -1,10 +1,16 @@
|
||||
---
|
||||
description: 'Learn step-by-step.'
|
||||
---
|
||||
|
||||
# Deploy Medusa Admin on Netlify
|
||||
|
||||
In this document, you’ll learn how to deploy the Medusa Admin on [Netlify](https://www.netlify.com/).
|
||||
|
||||
Alternatively, you can use this button to deploy the Medusa Admin to Netlify directly:
|
||||
|
||||
[](https://app.netlify.com/start/deploy?repository=https://github.com/medusajs/admin)
|
||||
<a href="https://app.netlify.com/start/deploy?repository=https://github.com/medusajs/admin" class="img-url">
|
||||
<img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" class="no-zoom-img" />
|
||||
</a>
|
||||
|
||||
## Prerequisites
|
||||
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
---
|
||||
hide_table_of_contents: true
|
||||
---
|
||||
|
||||
import DocCardList from '@theme/DocCardList';
|
||||
import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
|
||||
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
---
|
||||
description: 'Learn step-by-step.'
|
||||
---
|
||||
|
||||
# Deploy Your Medusa Server to DigitalOcean Apps
|
||||
|
||||
In this document, you'll learn how to deploy your Medusa server to a DigitalOcean App.
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
---
|
||||
description: 'Learn step-by-step.'
|
||||
---
|
||||
|
||||
import styles from '../deployment.module.css';
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
@@ -8,7 +12,9 @@ In this document, you'll learn how to deploy your Medusa server on Heroku. Herok
|
||||
|
||||
Alternatively, you can use this button to deploy the Medusa server to Heroku directly:
|
||||
|
||||
[](https://heroku.com/deploy?template=https://github.com/medusajs/medusa-starter-default/tree/feat/deploy-heroku)
|
||||
<a href="https://heroku.com/deploy?template=https://github.com/medusajs/medusa-starter-default/tree/feat/deploy-heroku" class="img-url">
|
||||
<img src="https://www.herokucdn.com/deploy/button.svg" alt="Deploy to Heroku" class="no-zoom-img" />
|
||||
</a>
|
||||
|
||||
<div>
|
||||
<video width="100%" height="100%" playsinline autoplay muted controls>
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
---
|
||||
description: 'Learn step-by-step.'
|
||||
---
|
||||
|
||||
# Deploy Your Medusa Server on Qovery
|
||||
|
||||
In this document, you'll learn how to deploy your Medusa server on Qovery with the help of Terraform.
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
---
|
||||
hide_table_of_contents: true
|
||||
---
|
||||
|
||||
import DocCardList from '@theme/DocCardList';
|
||||
import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
|
||||
|
||||
|
||||
@@ -1,10 +1,16 @@
|
||||
---
|
||||
description: 'Learn step-by-step.'
|
||||
---
|
||||
|
||||
# Deploy Gatsby Storefront on Netlify
|
||||
|
||||
In this document, you’ll learn how to deploy the Gatsby Storefront on [Netlify](https://www.netlify.com/).
|
||||
|
||||
Alternatively, you can use this button to deploy the Gatsby Storefront to Netlify directly:
|
||||
|
||||
[](https://app.netlify.com/start/deploy?repository=https://github.com/medusajs/gatsby-starter-medusa)
|
||||
<a href="https://app.netlify.com/start/deploy?repository=https://github.com/medusajs/gatsby-starter-medusa" class="img-url">
|
||||
<img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" class="no-zoom-img" />
|
||||
</a>
|
||||
|
||||
## Prerequisites
|
||||
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
---
|
||||
hide_table_of_contents: true
|
||||
---
|
||||
|
||||
import DocCardList from '@theme/DocCardList';
|
||||
import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
|
||||
|
||||
|
||||
@@ -39,7 +39,7 @@ If you follow the JS Client code blocks, it’s assumed you already have [Medusa
|
||||
|
||||
You can create a cart with the following code snippet:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -75,7 +75,7 @@ The cart by default will have a random region assigned to it. You can specify th
|
||||
|
||||
Otherwise, you can assign it a specific region during creation:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -127,7 +127,7 @@ Notice that in the previous code snippets, you set the cart’s ID in the local
|
||||
|
||||
You can retrieve the cart at any given point using its ID with the following code snippet:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -171,7 +171,7 @@ A cart has different data associated with it including the region, email, addres
|
||||
|
||||
You can use the following snippet to update any of the cart’s data:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -213,7 +213,7 @@ A customer might add items to their cart, then creates an account or log in. In
|
||||
|
||||
You can do that using the same update operation:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -251,7 +251,7 @@ In case the customer doesn't want to use their own account, you must at least as
|
||||
|
||||
You can do that using the same update operation:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -285,7 +285,7 @@ fetch(`<SERVER_URL>/store/carts/${cartId}`, {
|
||||
|
||||
To create a line item of a product and add it to a cart, you can use the following code snippet:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -333,7 +333,7 @@ If you’re using Sales Channels, make sure that the cart and the product belong
|
||||
|
||||
To update a line item's quantity in the cart, you can use the following code snippet:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
@@ -371,7 +371,7 @@ It returns the updated cart.
|
||||
|
||||
To delete a line item from the cart, you can use the following code snippet:
|
||||
|
||||
<Tabs groupId="request-type">
|
||||
<Tabs groupId="request-type" wrapperClassName="code-tabs">
|
||||
<TabItem value="client" label="Medusa JS Client" default>
|
||||
|
||||
```jsx
|
||||
|
||||
@@ -1,81 +0,0 @@
|
||||
---
|
||||
id: homepage
|
||||
title: Overview
|
||||
description: 'What is Medusa?'
|
||||
slug: /
|
||||
hide_table_of_contents: true
|
||||
---
|
||||
|
||||
Welcome to Medusa, the open source Shopify alternative!
|
||||
|
||||
Medusa is an open-source headless commerce engine that enables developers to create amazing digital commerce experiences.
|
||||
|
||||
:::tip
|
||||
|
||||
Get started with Medusa in a few minutes with the [Quickstart guide](./quickstart/quick-start.md)!
|
||||
|
||||
:::
|
||||
|
||||
## Features
|
||||
|
||||
Medusa comes with a set of building blocks that allow you to create unique digital commerce experiences, below is a list of some of the features that Medusa comes with out of the box:
|
||||
|
||||
- **Headless**: Medusa is a highly customizable commerce API which means that you may use any presentation layer such as a website, app, chatbots, etc.
|
||||
- **Regions** allow you to specify currencies, payment providers, shipping providers, tax rates, and more for one or more countries for truly international sales.
|
||||
- **Orders** come with all the functionality necessary to perform powerful customer service operations with ease.
|
||||
- **Carts** allow customers to collect products for purchase, add shipping details, and complete payments.
|
||||
- **Products** come with relevant fields for customs, stock keeping, and sales. Medusa supports multiple options and unlimited variants.
|
||||
- **Swaps** allow customers to exchange products after purchase (for example, for incorrect sizes). Accounting, payment, and fulfillment plugins handle all the tedious work for you for automated customer service.
|
||||
- **Claims** can be created if customers experience problems with one of their products. Plugins make sure to automate sending out replacements, handling refunds, and collecting valuable data for analysis.
|
||||
- **Returns** allow customers to send back products and can be configured to function in 100% automated flow-through accounting and payment plugins.
|
||||
- **Fulfillment API** makes it easy to integrate with any fulfillment provider by creating fulfillment plugins.
|
||||
- **Payments API** makes it easy to integrate with any payment provider by creating payment plugins, Medusa already supports Stripe, Paypal, and Klarna.
|
||||
- **Notification API** allows integrations with email providers, chatbots, Slack channels, etc.
|
||||
- **Customer Login** gives customers a way of managing their data, viewing their orders, and saving payment details.
|
||||
- **Shipping Options & Profiles** enable powerful rules for free shipping limits, multiple fulfillment methods, and more.
|
||||
- **Medusa's Plugin Architecture** makes it intuitive and easy to manage your integrations, switch providers and grow with ease.
|
||||
- **Customization** is supported for those special use cases that all the other e-commerce platforms can't accommodate.
|
||||
|
||||
## Where to Get Started
|
||||
|
||||
### The Medusa Server
|
||||
|
||||
You can follow the [quickstart guide](quickstart/quick-start.md) to install and run a Medusa server.
|
||||
|
||||
It's also recommended to learn how to [set up your development environment](tutorial/set-up-your-development-environment) with the required tools and services to run a Medusa server, then [configure your Medusa server](usage/configurations.md).
|
||||
|
||||
### The Medusa Admin
|
||||
|
||||
The Medusa Admin provides you with a lot of functionalities and configurations such as Product Management, Order Management, Discounts and Promotions, and more.
|
||||
|
||||
You can install the Medusa admin in two steps by following the [Medusa Admin quickstart guide](admin/quickstart.md).
|
||||
|
||||
### The Storefront
|
||||
|
||||
The final step is to set up a storefront to sell your products.
|
||||
|
||||
Medusa provides two starter storefronts, one built with [Next.js](./starters/nextjs-medusa-starter.md) and one with [Gatsby](./starters/gatsby-medusa-starter.md), that you can use to quickly set up your store and start selling.
|
||||
|
||||
Alternatively, you can build your own storefront with any frontend framework of your choice just by connecting to your server with the [Storefront REST APIs](https://docs.medusajs.com/api/store).
|
||||
|
||||
## What’s Next
|
||||
|
||||
- Customize your Medusa server by creating your own [endpoints](./advanced/backend/endpoints/add.md), [services](./advanced/backend/services/create-service.md), and [subscribers](./advanced/backend/subscribers/create-subscriber.md).
|
||||
- Check out guides under the Integrations section to install plugins for [CMS](./add-plugins/strapi.md), [Payment](./add-plugins/stripe.md), [Search Engines](./add-plugins/algolia.md), and more.
|
||||
- Deploy your Medusa server in seconds on [Heroku](deployments/server/deploying-on-heroku.mdx), [Qovery](deployments/server/deploying-on-qovery.md), or [Digital Ocean](deployments/server/deploying-on-digital-ocean.md).
|
||||
|
||||
## Open Source Contribution
|
||||
|
||||
As Medusa is an open source platform, contributions to improve it and its documentation are welcome. In the GitHub repository here’s where you’ll find the different components you can contribute to:
|
||||
|
||||
- The core of the Medusa server resides in [`packages/medusa`](https://github.com/medusajs/medusa/tree/master/packages/medusa).
|
||||
- You can also find all existing plugins under [the `packages` directory](https://github.com/medusajs/medusa/tree/master/packages).
|
||||
- The documentation content resides in [`docs/content`](https://github.com/medusajs/medusa/tree/master/docs/content). The code for the documentation website is in [`www/docs`](https://github.com/medusajs/medusa/tree/master/www/docs).
|
||||
|
||||
You can find more details about contributing in [CONTRIBUTING.md](https://github.com/medusajs/medusa/blob/master/CONTRIBUTING.md).
|
||||
|
||||
## Community & Support
|
||||
|
||||
If you need any support during your development with Medusa, you can join Medusa's [Discord Server](https://discord.gg/medusajs). You will get help directly from Medusa's core team as well as the community.
|
||||
|
||||
By joining the Discord Server, you’ll also have the chance to participate in many events such as Bug Hunts and showcase your work with Medusa.
|
||||
@@ -0,0 +1,170 @@
|
||||
---
|
||||
id: homepage
|
||||
title: Medusa Documentation
|
||||
description: "Get an overview of Medusa's features, integrations, and how to use them."
|
||||
slug: /
|
||||
hide_table_of_contents: true
|
||||
hide_footer: true
|
||||
---
|
||||
|
||||
import DocCardList from '@theme/DocCardList';
|
||||
|
||||
# Medusa Documentation
|
||||
|
||||
Get an overview of Medusa's features, integrations, and how to use them.
|
||||
|
||||
## Medusa basics
|
||||
|
||||
Learn about Medusa basic features and kickstart your ecommerce project.
|
||||
|
||||
<DocCardList colSize={4} items={[
|
||||
{
|
||||
type: 'link',
|
||||
href: '/quickstart/quick-start',
|
||||
label: 'Quickstart Guide',
|
||||
customProps: {
|
||||
image: '/img/quickstart-icon.svg',
|
||||
description: 'Create your first Medusa server.',
|
||||
className: 'card-highlight'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'link',
|
||||
href: '/tutorial/set-up-your-development-environment',
|
||||
label: 'Set up Dev Environment',
|
||||
customProps: {
|
||||
themedImage: {
|
||||
light: '/img/dev-env-icon.svg',
|
||||
dark: '/img/dev-env-icon-dark.svg'
|
||||
},
|
||||
description: 'Set up your dev environment.'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'link',
|
||||
href: '/usage/configurations',
|
||||
label: 'Configure your Server',
|
||||
customProps: {
|
||||
themedImage: {
|
||||
light: '/img/server-icon.svg',
|
||||
dark: '/img/server-icon-dark.svg'
|
||||
},
|
||||
description: 'Explore Medusa\'s configurations.'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'link',
|
||||
href: '/starters/nextjs-medusa-starter',
|
||||
label: 'Next.js Starter',
|
||||
customProps: {
|
||||
themedImage: {
|
||||
light: '/img/nextjs-icon.svg',
|
||||
dark: '/img/nextjs-icon-dark.svg'
|
||||
},
|
||||
description: 'Install Medusa\'s Next.js storefront.'
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'link',
|
||||
href: '/starters/gatsby-medusa-starter',
|
||||
label: 'Gatsby Starter',
|
||||
customProps: {
|
||||
themedImage: {
|
||||
light: '/img/gatsby-icon.svg',
|
||||
dark: '/img/gatsby-icon-dark.svg'
|
||||
},
|
||||
description: 'Install Medusa\'s Gatsby storefront.'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'link',
|
||||
href: '/admin/quickstart',
|
||||
label: 'Admin Quickstart Guide',
|
||||
customProps: {
|
||||
themedImage: {
|
||||
light: '/img/admin-icon.svg',
|
||||
dark: '/img/admin-icon-dark.svg'
|
||||
},
|
||||
description: 'Install Medusa\'s Admin to manage your store.'
|
||||
}
|
||||
}
|
||||
]} />
|
||||
|
||||
## Most popular
|
||||
|
||||
Best of the greatest.
|
||||
|
||||
<DocCardList colSize={4} items={[
|
||||
{
|
||||
type: 'link',
|
||||
href: '/advanced/backend/plugins/create',
|
||||
label: 'Create a Plugin',
|
||||
customProps: {
|
||||
themedImage: {
|
||||
light: '/img/terminal-icon.svg',
|
||||
dark: '/img/terminal-icon-dark.svg'
|
||||
},
|
||||
description: 'Create, test, and publish a plugins.'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'link',
|
||||
href: '/add-plugins/stripe',
|
||||
label: 'Integrate Stripe',
|
||||
customProps: {
|
||||
themedImage: {
|
||||
light: '/img/stripe-icon.svg',
|
||||
dark: '/img/stripe-icon-dark.svg'
|
||||
},
|
||||
description: 'Install Stripe on your Medusa server.'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'link',
|
||||
href: '/advanced/storefront/how-to-implement-checkout-flow',
|
||||
label: 'Implement Checkout',
|
||||
customProps: {
|
||||
themedImage: {
|
||||
light: '/img/cart-icon.svg',
|
||||
dark: '/img/cart-icon-dark.svg'
|
||||
},
|
||||
description: 'Implement the checkout flow in your storefront.'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'link',
|
||||
href: '/advanced/admin/import-products',
|
||||
label: 'Import Products',
|
||||
customProps: {
|
||||
themedImage: {
|
||||
light: '/img/tee-icon.svg',
|
||||
dark: '/img/tee-icon-dark.svg'
|
||||
},
|
||||
description: 'Bulk import products into Medusa.'
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'link',
|
||||
href: '/advanced/backend/shipping/overview',
|
||||
label: 'Shipping Overview',
|
||||
customProps: {
|
||||
themedImage: {
|
||||
light: '/img/fast-delivery-icon.svg',
|
||||
dark: '/img/fast-delivery-icon-dark.svg'
|
||||
},
|
||||
description: 'Learn how shipping works in Medusa.'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'link',
|
||||
href: '/advanced/backend/payment/overview',
|
||||
label: 'Payment Overview',
|
||||
customProps: {
|
||||
themedImage: {
|
||||
light: '/img/payment-accepted-icon.svg',
|
||||
dark: '/img/payment-accepted-icon-dark.svg'
|
||||
},
|
||||
description: 'Learn how payment works in Medusa'
|
||||
}
|
||||
}
|
||||
]} />
|
||||
@@ -8,7 +8,9 @@ This document guides you to install and set up the Gatsby Storefront for your Me
|
||||
|
||||
Instead of manually following this guide to install then later deploy the Gatsby Storefront, you can deploy the Gatsby Storefront to Netlify with this button:
|
||||
|
||||
[](https://app.netlify.com/start/deploy?repository=https://github.com/medusajs/gatsby-starter-medusa)
|
||||
<a href="https://app.netlify.com/start/deploy?repository=https://github.com/medusajs/gatsby-starter-medusa" class="img-url">
|
||||
<img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" class="no-zoom-img" />
|
||||
</a>
|
||||
|
||||
## Prerequisites
|
||||
|
||||
|
||||
@@ -8,7 +8,9 @@ This document guides you to install and set up the Next.js Storefront for your M
|
||||
|
||||
Instead of manually following this guide to install then later deploy the Next.js Storefront, you can deploy the Next.js Storefront to Netlify with this button:
|
||||
|
||||
[](https://app.netlify.com/start/deploy?repository=https://github.com/medusajs/nextjs-starter-medusa)
|
||||
<a href="https://app.netlify.com/start/deploy?repository=https://github.com/medusajs/nextjs-starter-medusa" class="img-url">
|
||||
<img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" class="no-zoom-img" />
|
||||
</a>
|
||||
|
||||
## Prerequisites
|
||||
|
||||
|
||||
@@ -25,7 +25,7 @@ command not found: medusa
|
||||
|
||||
You have to add Yarn’s install location to the PATH variable:
|
||||
|
||||
<Tabs groupId="operating-systems">
|
||||
<Tabs groupId="operating-systems" wrapperClassName="code-tabs">
|
||||
<TabItem value="unix" label="MacOS / Linux" default>
|
||||
|
||||
```bash
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
sidebar_position: 3
|
||||
---
|
||||
|
||||
import UiIcon from '@site/src/components/UiIcon';
|
||||
|
||||
# Manage Customer Groups
|
||||
|
||||
In this document, you’ll learn how to manage customer groups, including customers in these groups.
|
||||
|
||||
@@ -19,6 +19,7 @@ npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.yarn/*
|
||||
.yarn/install-state.gz
|
||||
!.yarn/patches
|
||||
!.yarn/plugins
|
||||
!.yarn/releases
|
||||
|
||||
Binary file not shown.
@@ -52,23 +52,17 @@ const config = {
|
||||
prism: {
|
||||
defaultLanguage: "js",
|
||||
plugins: ["line-numbers", "show-language"],
|
||||
theme: require("prism-react-renderer/themes/vsDark"),
|
||||
darkTheme: require("prism-react-renderer/themes/vsDark"),
|
||||
theme: require("./src/themes/medusaDocs"),
|
||||
},
|
||||
zoom: {
|
||||
selector: '.markdown img',
|
||||
background: {
|
||||
light: 'rgb(255, 255, 255)',
|
||||
dark: 'rgb(50, 50, 50)'
|
||||
}
|
||||
selector: '.markdown :not(.no-zoom-img) > img:not(.no-zoom-img)'
|
||||
},
|
||||
navbar: {
|
||||
hideOnScroll: true,
|
||||
hideOnScroll: false,
|
||||
logo: {
|
||||
alt: "Medusa",
|
||||
src: "img/logo.svg",
|
||||
srcDark: "img/logo-dark.svg",
|
||||
width: 100
|
||||
src: "img/logo.png",
|
||||
srcDark: "img/logo-dark.png"
|
||||
},
|
||||
items: [
|
||||
{
|
||||
@@ -82,42 +76,82 @@ const config = {
|
||||
label: "User Guide"
|
||||
},
|
||||
{
|
||||
type: 'dropdown',
|
||||
label: 'REST API Reference',
|
||||
items: [
|
||||
{
|
||||
type: 'html',
|
||||
value: `
|
||||
<a href="/api/store" target="_blank" rel="noopener noreferrer" class="dropdown__link">Store
|
||||
<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module">
|
||||
<path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path>
|
||||
</svg>
|
||||
</a>`
|
||||
},
|
||||
{
|
||||
type: 'html',
|
||||
value: `
|
||||
<a href="/api/admin" target="_blank" rel="noopener noreferrer" class="dropdown__link">Admin
|
||||
<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module">
|
||||
<path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path>
|
||||
</svg>
|
||||
</a>`
|
||||
},
|
||||
],
|
||||
href: "/api/store",
|
||||
label: "Store API",
|
||||
prependBaseUrlToHref: true,
|
||||
target: '_blank'
|
||||
},
|
||||
{
|
||||
href: "https://github.com/medusajs/medusa",
|
||||
className: "navbar-github-link",
|
||||
position: "right",
|
||||
href: "/api/admin",
|
||||
label: "Admin API",
|
||||
prependBaseUrlToHref: true,
|
||||
target: '_blank'
|
||||
},
|
||||
{
|
||||
type: "search",
|
||||
href: "https://github.com/medusajs/medusa/issues/new?assignees=&labels=type%3A+docs&template=docs.yml",
|
||||
position: "right",
|
||||
label: "Report an Issue",
|
||||
className: "right-divider"
|
||||
},
|
||||
],
|
||||
},
|
||||
footer: {
|
||||
logo: {
|
||||
alt: "Medusa",
|
||||
src: "img/logo.png",
|
||||
srcDark: "img/logo-dark.png"
|
||||
},
|
||||
links: [
|
||||
{
|
||||
title: 'Product',
|
||||
items: [
|
||||
{
|
||||
label: 'Get started',
|
||||
to: '/quickstart/quick-start'
|
||||
},
|
||||
{
|
||||
label: 'Docs',
|
||||
to: '/'
|
||||
},
|
||||
{
|
||||
label: 'Store API',
|
||||
to: '/api/store'
|
||||
},
|
||||
{
|
||||
label: 'Admin API',
|
||||
to: '/api/admin'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Company',
|
||||
items: [
|
||||
{
|
||||
label: 'Careers',
|
||||
href: 'https://medusajs.notion.site/Careers-at-Medusa-f986a1d41eb146d888f9590a360547d1'
|
||||
},
|
||||
{
|
||||
label: 'Pricing',
|
||||
href: 'https://medusajs.com/pricing/'
|
||||
},
|
||||
{
|
||||
label: 'Press Kit',
|
||||
href: 'https://medusajs.notion.site/Media-Kit-9d885bb679674b458bca316f841322b6'
|
||||
},
|
||||
{
|
||||
label: 'About',
|
||||
href: 'https://medusajs.notion.site/'
|
||||
},
|
||||
{
|
||||
label: 'Blog',
|
||||
href: 'https://medusajs.com/blog'
|
||||
},
|
||||
{
|
||||
label: 'Contact',
|
||||
href: 'https://medusajs.com/contact-us/'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Community",
|
||||
items: [
|
||||
@@ -125,52 +159,34 @@ const config = {
|
||||
label: "Stack Overflow",
|
||||
href: "https://stackoverflow.com/questions/tagged/medusa-commerce",
|
||||
},
|
||||
{
|
||||
label: "Discussions",
|
||||
href: "https://github.com/medusajs/medusa/discussions",
|
||||
},
|
||||
{
|
||||
label: "Discord",
|
||||
href: "https://discord.gg/medusajs",
|
||||
},
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "https://twitter.com/medusajs",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "More",
|
||||
items: [
|
||||
{
|
||||
label: "Medusa Home",
|
||||
href: "https://medusajs.com",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "https://ky5eo2x1u81.typeform.com/get-in-touch",
|
||||
},
|
||||
{
|
||||
label: "GitHub",
|
||||
href: "https://github.com/medusajs/medusa",
|
||||
},
|
||||
{
|
||||
label: "Integrations",
|
||||
href: "https://medusajs.notion.site/1a0ada9903874e0185d0b8ce0591b359?v=0631285851ba4021aa07c3b48dd4801a",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
copyright: `© ${new Date().getFullYear()} Medusa`,
|
||||
},
|
||||
sidebarFooter: [
|
||||
socialLinks: [
|
||||
{
|
||||
href: "https://github.com/medusajs/medusa/issues/new?assignees=&labels=type%3A+docs&template=docs.yml",
|
||||
label: 'Report an Issue',
|
||||
className: 'alert-icon',
|
||||
type: 'discord',
|
||||
href: 'https://discord.gg/medusajs'
|
||||
},
|
||||
{
|
||||
href: "https://medusajs.com/",
|
||||
label: 'Go to medusajs.com',
|
||||
className: 'topright-icon',
|
||||
type: 'twitter',
|
||||
href: 'https://twitter.com/medusajs'
|
||||
},
|
||||
{
|
||||
type: 'github',
|
||||
href: 'https://github.com/medusajs/medusa'
|
||||
},
|
||||
],
|
||||
reportCodeLinkPrefix: 'https://github.com/medusajs/medusa/issues/new?assignees=&labels=type%3A+docs&template=docs.yml'
|
||||
},
|
||||
presets: [
|
||||
[
|
||||
@@ -184,7 +200,8 @@ const config = {
|
||||
remarkPlugins: [
|
||||
[require('@docusaurus/remark-plugin-npm2yarn'), {sync: true}],
|
||||
],
|
||||
showLastUpdateTime: true
|
||||
showLastUpdateTime: true,
|
||||
breadcrumbs: false,
|
||||
},
|
||||
theme: {
|
||||
customCss: require.resolve("./src/css/custom.css")
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
|
||||
.feedback-container {
|
||||
padding-top: var(--ifm-base-margin-vertical);
|
||||
border-top: 1px solid var(--ifm-doc-footer-border-color);
|
||||
}
|
||||
|
||||
.inline-feedback {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -10,11 +16,6 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.inline-feedback span,
|
||||
.inline-question span {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.inline-feedback span {
|
||||
margin-right: 13px;
|
||||
}
|
||||
@@ -28,24 +29,21 @@
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
padding: 12px 16px;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
padding: 6px 16px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
background-color: transparent;
|
||||
border: 1px solid #E5E7EB;
|
||||
color: var(--ifm-font-color-base);
|
||||
background-color: var(--ifm-primary-btn-background-color);
|
||||
border: 1px solid var(--ifm-primary-btn-border-color);
|
||||
color: var(--ifm-primary-btn-color);
|
||||
}
|
||||
|
||||
.feedback-btn:focus {
|
||||
box-shadow: 0px 0px 0px 4px rgba(124, 58, 237, 0.1);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .feedback-btn:hover {
|
||||
background: #F3F4F6;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .feedback-btn:active,
|
||||
html:not([data-theme="dark"]) .feedback-btn:disabled {
|
||||
background: #E5E7EB;
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
.markdown p + .cards-grid {
|
||||
margin-top: var(--ifm-base-margin-vertical);
|
||||
}
|
||||
|
||||
.cards-grid {
|
||||
display: grid;
|
||||
column-gap: 16px;
|
||||
grid-auto-rows: 1fr;
|
||||
}
|
||||
|
||||
.cards-grid.grid-6 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.box-link,
|
||||
.box-link:hover {
|
||||
color: #0a3149;
|
||||
}
|
||||
|
||||
.card-highlight {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.card-highlight:after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
position:absolute;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
background: linear-gradient(90deg, rgba(146, 144, 254, 0) 0%, rgba(163, 219, 254, 0.4) 26.04%,
|
||||
#9290FE 53.65%, rgba(197, 145, 255, 0.4) 78.65%, rgba(201, 138, 255, 0) 100%);
|
||||
}
|
||||
|
||||
html:not([data-theme=dark]) .card {
|
||||
border: 1px solid #cbcbcb;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .card {
|
||||
border: 1px solid var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.cards-grid.grid-4 {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) and (min-width: 768px) {
|
||||
.cards-grid.grid-4 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.cards-grid.grid-4 {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
|
||||
.cards-grid.grid-6 {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,166 @@
|
||||
/* [data-theme="dark"] pre code {
|
||||
background-color: var(--ifm-code-background);
|
||||
} */
|
||||
|
||||
code {
|
||||
border: 1px solid var(--ifm-code-border-color);
|
||||
color: var(--ifm-code-color);
|
||||
}
|
||||
|
||||
.inline-code-copy {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
display: inline;
|
||||
color: var(--ifm-code-color)
|
||||
}
|
||||
|
||||
.docusaurus-highlight-code-line {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
display: block;
|
||||
margin: 0 calc(-1 * var(--ifm-pre-padding));
|
||||
padding: 0 var(--ifm-pre-padding);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .docusaurus-highlight-code-line {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.prism-code {
|
||||
background-color: none;
|
||||
word-break: break-word;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.prism-code div,
|
||||
.prism-code div:focus,
|
||||
.prism-code div:active {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .theme-doc-markdown a.card:hover {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.code-tabs {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.code-tabs .tabs,
|
||||
.code-header {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.code-header {
|
||||
background-color: #161616;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-radius: var(--ifm-code-border-radius) var(--ifm-code-border-radius) 0px 0px;
|
||||
}
|
||||
|
||||
.code-tabs .tabs {
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
overflow-x: auto;
|
||||
|
||||
backface-visibility: hidden;
|
||||
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
.code-tabs .tabs::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.code-tabs .tabs__item {
|
||||
color: #6F6F6F;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid transparent;
|
||||
white-space: nowrap;
|
||||
border-radius: 99999px;
|
||||
}
|
||||
|
||||
.code-tabs .tabs__item:not(:first-child) {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.code-tabs .tabs__item--active {
|
||||
border-color: #393939;
|
||||
background-color: var(--ifm-code-tabs-active-bg);
|
||||
color: var(--ifm-code-tabs-active-color);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.theme-code-block {
|
||||
border-radius: 0 0 var(--ifm-code-border-radius) var(--ifm-code-border-radius) !important;
|
||||
}
|
||||
|
||||
.code-action {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.code-action:hover {
|
||||
background-color: var(--ifm-code-action-hover-bg);
|
||||
}
|
||||
|
||||
.code-action:not(:first-child) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
a.code-action {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.code-action img {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.theme-code-block [class*=buttonGroup] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.copy-action {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .code-header,
|
||||
[data-theme="dark"] .theme-code-block {
|
||||
border: 1px solid var(--ifm-code-border-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .code-header {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .theme-code-block {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 568px) {
|
||||
.code-tabs .tabs {
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 567px) {
|
||||
.code-action {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.code-tabs .tabs {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
/* color mode button */
|
||||
.color-mode-tabs {
|
||||
background-color: var(--mode-tabs-bg);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-left: 2px !important;
|
||||
padding-right: 2px !important;
|
||||
}
|
||||
|
||||
.color-mode-tabs.mobile {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.pill-button {
|
||||
border-radius: 6px;
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
box-sizing: content-box;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
height: calc(100% - 8px);
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.pill-button:not(.active) {
|
||||
color: var(--mode-button-text-color);
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pill-button.active {
|
||||
color: var(--mode-button-active-text-color);
|
||||
background-color: var(--mode-button-active-bg);
|
||||
border: 1px solid var(--mode-button-active-border-color);
|
||||
}
|
||||
|
||||
/* some style rules for dark mode */
|
||||
|
||||
[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"] a:hover {
|
||||
color: var(--ifm-menu-active);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.color-mode-tabs {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.pill-button {
|
||||
width: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
.color-mode-tabs {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.pill-button {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,233 @@
|
||||
.DocSearch {
|
||||
--docsearch-searchbox-focus-background: var(--docsearch-searchbox-background);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .DocSearch {
|
||||
--ifm-search-bar-border-color: #E5E7EB;
|
||||
--docsearch-searchbox-background: #F9FAFB;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .DocSearch {
|
||||
--ifm-search-bar-border-color: #2D2D2D;
|
||||
--docsearch-searchbox-background: #222222;
|
||||
}
|
||||
|
||||
/* Search Modal */
|
||||
.DocSearch-Modal {
|
||||
border-radius: 8px !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* .DocSearch-Modal:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
background: var(--docsearch-modal-fade-bg);
|
||||
border-radius: 8px !important;
|
||||
z-index: 99;
|
||||
} */
|
||||
|
||||
.DocSearch-HitsFooter {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .DocSearch-Form {
|
||||
--docsearch-searchbox-focus-background: #2D2D2D;
|
||||
}
|
||||
|
||||
.DocSearch-Form {
|
||||
border-radius: 8px !important;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.DocSearch-MagnifierLabel, .DocSearch-Reset {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.DocSearch-LoadingIndicator svg, .DocSearch-MagnifierLabel svg {
|
||||
width: 15px !important;
|
||||
height: 15px !important;
|
||||
}
|
||||
|
||||
.DocSearch-Input {
|
||||
font-size: var(--ifm-font-size-base) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Input::placeholder,
|
||||
.DocSearch-Input:-ms-input-placeholder,
|
||||
.DocSearch-Input::-ms-input-placeholder {
|
||||
color: #9CA3AF;
|
||||
}
|
||||
|
||||
.DocSearch-Footer {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit {
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-icon {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-icon svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.DocSearch-Hit:not(.DocSearch-Hit--Child) .DocSearch-Hit-icon::before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: '';
|
||||
background-image: url('/img/search-hit.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-Container {
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit a {
|
||||
padding: 18px 16px !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 8px !important;
|
||||
border: 1px solid var(--docsearch-hit-border-color);
|
||||
}
|
||||
|
||||
.DocSearch-Hit-content-wrapper {
|
||||
margin: 0 16px !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-title,
|
||||
.DocSearch-Hit-title mark {
|
||||
color: var(--docsearch-hit-title-color) !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-title,
|
||||
.DocSearch-Hit-path,
|
||||
.DocSearch-Hit-source {
|
||||
font-size: var(--ifm-font-size-base) !important;
|
||||
line-height: var(--ifm-line-height-base);
|
||||
}
|
||||
|
||||
.DocSearch-Hit[aria-selected=true] a {
|
||||
background-color: var(--docsearch-hit-active-bg) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-action {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-action svg,
|
||||
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action svg {
|
||||
color: var(--docsearch-hit-icon-color) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit[aria-selected=true] span.DocSearch-Hit-path {
|
||||
color: var(--docsearch-highlight-color) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit[aria-selected=true] mark {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-source {
|
||||
margin-bottom: 12px !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hits:first-child .DocSearch-Hit-source {
|
||||
margin-top: 12px !important
|
||||
}
|
||||
|
||||
.DocSearch-Hits .DocSearch-Hit-source {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
/* Search Bar */
|
||||
|
||||
.DocSearch-Button {
|
||||
width: 100%;
|
||||
border-radius: 8px !important;
|
||||
border: 1px solid var(--ifm-search-bar-border-color) !important;
|
||||
padding: 8px !important;
|
||||
}
|
||||
|
||||
span.DocSearch-Button-Key {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.DocSearch-Container {
|
||||
z-index: 1001 !important;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .DocSearch-Button .DocSearch-Search-Icon {
|
||||
--docsearch-text-color: #9CA3AF;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .DocSearch-Button .DocSearch-Search-Icon {
|
||||
--docsearch-text-color: #737373;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Search-Icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.DocSearch-Button-Placeholder {
|
||||
font-size: 13px !important;
|
||||
color: var(--docsearch-placeholder-color);
|
||||
}
|
||||
|
||||
.DocSearch-Button-Key {
|
||||
box-shadow: none !important;
|
||||
border-radius: 4px !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: 12px !important;
|
||||
line-height: 20px !important;
|
||||
font-family: var(--ifm-font-family-base) !important;
|
||||
vertical-align: middle;
|
||||
padding: 2px !important;
|
||||
height: 20px !important;
|
||||
width: 20px !important;
|
||||
}
|
||||
|
||||
.DocSearch-Button:active, .DocSearch-Button:focus, .DocSearch-Button:hover,
|
||||
.DocSearch-Form, .DocSearch-Form {
|
||||
border-color: var(--docsearch-searchbox-border-color) !important;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.navbar__items [class*=searchBox] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Search-Icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
.DocSearch-Button-Keys, .DocSearch-Button-Placeholder {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.DocSearch-Button {
|
||||
border: none !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.DocSearch-Button:focus, .DocSearch-Button:hover {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
article {
|
||||
max-width: var(--ifm-docs-page-max-width);
|
||||
}
|
||||
|
||||
.padding-top--md {
|
||||
padding-top: 2rem !important;
|
||||
}
|
||||
|
||||
.pagination-nav {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: var(--ifm-docs-page-max-width);
|
||||
}
|
||||
|
||||
.col {
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
|
||||
details summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.reference-table th:nth-child(2),
|
||||
.reference-table td:nth-child(2) {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.reference-table th:nth-child(3),
|
||||
.reference-table td:nth-child(3) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.reference-table .theme-code-block span {
|
||||
max-width: 100%;
|
||||
word-break: break-word;
|
||||
white-space: break-spaces;
|
||||
}
|
||||
|
||||
.container:not(.footer-container) {
|
||||
padding-top: 38px !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.pagination-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* User Guide Styling */
|
||||
html[data-theme="dark"] kbd {
|
||||
--ifm-color-emphasis-0: var(--ifm-color-gray-200);
|
||||
}
|
||||
|
||||
kbd {
|
||||
--ifm-color-emphasis-800: var(--ifm-color-gray-800);
|
||||
|
||||
font: 100% var(--ifm-font-family-monospace) !important;
|
||||
}
|
||||
|
||||
.ui-icon {
|
||||
vertical-align: sub;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.markdown-doc-wrapper {
|
||||
margin: 0 auto;
|
||||
max-width: var(--ifm-container-width);
|
||||
padding: 0 var(--ifm-spacing-horizontal);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.markdown-doc-wrapper--fluid {
|
||||
max-width: inherit;
|
||||
}
|
||||
|
||||
.markdown-row {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.theme-doc-footer {
|
||||
margin-top: var(--ifm-base-margin-vertical) !important;
|
||||
border-top: 1px solid var(--ifm-doc-footer-border-color) !important;
|
||||
padding-top: var(--ifm-base-margin-vertical);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .doc-footer {
|
||||
--ifm-doc-footer-border-color: #E5E7EB;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .doc-footer {
|
||||
--ifm-doc-footer-border-color: #3E3F41;
|
||||
}
|
||||
|
||||
.theme-edit-this-page {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
padding: 6px 16px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
background-color: var(--ifm-primary-btn-background-color);
|
||||
border: 1px solid var(--ifm-primary-btn-border-color);
|
||||
}
|
||||
|
||||
.theme-edit-this-page:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.theme-edit-this-page,
|
||||
.theme-edit-this-page:hover {
|
||||
color: var(--ifm-primary-btn-color);
|
||||
}
|
||||
|
||||
.theme-last-updated {
|
||||
font-style: normal;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.theme-last-updated b {
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.medium-zoom-overlay {
|
||||
z-index: var(--ifm-z-index-overlay);
|
||||
}
|
||||
|
||||
.tabs-wrapper:not(.code-tabs) .tabs-container > div {
|
||||
padding-top: var(--ifm-base-margin-vertical);
|
||||
}
|
||||
|
||||
.medium-zoom-image--opened {
|
||||
z-index: var(--ifm-z-index-overlay);
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.markdown-doc-wrapper {
|
||||
max-width: var(--ifm-container-width-xl) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 966px) {
|
||||
[class*=docItemContainer] > article {
|
||||
margin-left: 50px;
|
||||
margin-right: 50px;
|
||||
max-width: none
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
.footer__title {
|
||||
font-weight: 600 !important;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.footer__item:not(:last-child) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
footer.footer {
|
||||
background-color: transparent !important;
|
||||
border-top: 1px solid var(--ifm-footer-border-color);
|
||||
padding-top: calc(var(--ifm-base-margin-vertical) * 2);
|
||||
padding-bottom: calc(var(--ifm-base-margin-vertical) * 3);
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer__copyright {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.footer__link-item {
|
||||
line-height: var(--ifm-line-height-base);
|
||||
font-size: var(--ifm-font-size-base);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .footer__item svg {
|
||||
color: #9CA3AF;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .footer__item svg {
|
||||
color: #737373;
|
||||
}
|
||||
|
||||
.social-logo-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.social-link:not(:first-child) {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.discord-icon {
|
||||
width: 18px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.twitter-icon {
|
||||
width: 18px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.github-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.social-logo-container {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
.footer-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
margin-bottom: var(--ifm-base-margin-vertical);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
html[data-theme="dark"] .navbar-github-link:before {
|
||||
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
|
||||
no-repeat;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
z-index: calc(var(--ifm-z-index-overlay) - 1);
|
||||
padding-top: var(--ifm-navbar-padding-top);
|
||||
padding-bottom: var(--ifm-navbar-padding-bottom);
|
||||
}
|
||||
|
||||
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
|
||||
.navbar:not(.navbar-sidebar--show) {
|
||||
background: none;
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-github-link:before {
|
||||
content: "";
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
|
||||
no-repeat;
|
||||
}
|
||||
|
||||
.navbar__link svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar__link {
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.navbar__item {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.navbar__items {
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.navbar__item.dropdown > .navbar__link,
|
||||
.external-link .navbar__item {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
.navbar__logo {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar__logo {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.navbar__link--active {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.navbar .right-divider {
|
||||
height: 100%;
|
||||
}
|
||||
.navbar .right-divider:after {
|
||||
content: '';
|
||||
height: 20px;
|
||||
width: 1px;
|
||||
margin-left: 12px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .navbar .right-divider:after {
|
||||
background-color: #D1D5DB;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .navbar .right-divider:after {
|
||||
background-color: #393939;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
.alert {
|
||||
padding: 16px;
|
||||
border: 1px solid var(--ifm-note-border-color) !important;
|
||||
background-color: var(--ifm-note-background);
|
||||
border-radius: 8px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.alert p > code {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.alert a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) [class*=alert--] {
|
||||
--ifm-code-background: #F9FAFB !important;
|
||||
--ifm-alert-background-color-highlight: #F9FAFB !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] [class*=alert--] {
|
||||
--ifm-code-background: #222222 !important;
|
||||
--ifm-alert-background-color-highlight: #222222 !important;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
html[data-theme="dark"] .redocusaurus .expanded + tr > td > div {
|
||||
background-color: var(--ifm-medusa-gray);
|
||||
}
|
||||
|
||||
.redocusaurus a {
|
||||
color: var(--ifm-link-color) !important;
|
||||
}
|
||||
|
||||
.redocusaurus [data-section-id] > div:nth-child(2) pre {
|
||||
background-color: transparent !important;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .redocusaurus h5 + svg {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .redocusaurus h2 + div + div > div + div {
|
||||
padding: 8px 9.6px;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
@@ -0,0 +1,239 @@
|
||||
.main-wrapper aside {
|
||||
z-index: var(--ifm-z-index-fixed);
|
||||
}
|
||||
|
||||
.sidebar-bg {
|
||||
height: 100%;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.sidebar-bg img {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
a.menu__link.menu__link--active.active {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
a.menu__link--sublist::after,
|
||||
.menu__caret:before {
|
||||
background: var(--ifm-menu-link-sublist-icon) 50% / 1rem 2rem;
|
||||
}
|
||||
|
||||
.menu__list-item > a {
|
||||
font-weight: 450;
|
||||
}
|
||||
|
||||
.react-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu__link,
|
||||
.redocusaurus .menu-content label {
|
||||
font-weight: 500 !important;
|
||||
font-size: 12px;
|
||||
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,
|
||||
.navbar-sidebar__item .menu__link:not(.navbar-github-link),
|
||||
[class*=theme-doc-sidebar-item-link-level-]:not(.theme-doc-sidebar-item-link-level-1) .menu__link {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.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: 16px;
|
||||
width: 16px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 6.8px;
|
||||
transition: transform var(--ifm-transition-fast) linear;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) a.menu__link--sublist::before,
|
||||
html:not([data-theme="dark"]) .redocusaurus .menu-content label[type=tag].-depth1::before {
|
||||
background-image: url('/img/triangle-right.png');
|
||||
}
|
||||
|
||||
[data-theme="dark"] a.menu__link--sublist::before,
|
||||
[data-theme="dark"] .redocusaurus .menu-content label[type=tag].-depth1::before {
|
||||
background-image: url('/img/triangle-right-dark.png');
|
||||
}
|
||||
|
||||
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.png');
|
||||
}
|
||||
|
||||
[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-dark-hover.png');
|
||||
}
|
||||
|
||||
.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):not(.navbar-github-link)::before {
|
||||
content: "";
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background-size: 6px;
|
||||
background-image: url('/img/circle.png');
|
||||
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.png');
|
||||
}
|
||||
|
||||
[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-dark-hover.png');
|
||||
}
|
||||
|
||||
[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,
|
||||
.navbar-sidebar__item .menu__link::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: 21%;
|
||||
}
|
||||
|
||||
.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: 19%;
|
||||
}
|
||||
|
||||
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: 19%;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.navbar-github-link {
|
||||
overflow: visible;
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
.theme-doc-toc-desktop .table-of-contents {
|
||||
border-left: none !important;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .theme-doc-toc-desktop .table-of-contents::before {
|
||||
background-image: url('/img/side-menu.svg');
|
||||
}
|
||||
|
||||
[data-theme="dark"] .theme-doc-toc-desktop .table-of-contents::before {
|
||||
background-image: url('/img/side-menu-dark.svg');
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents::before {
|
||||
background-repeat: no-repeat;
|
||||
background-size: 20px;
|
||||
background-position-x: -1px;
|
||||
padding-left: 28px;
|
||||
content: 'On this page';
|
||||
font-size: 13px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents .table-of-contents__link {
|
||||
padding-left: var(--ifm-toc-link-padding-left);
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents > li:first-child {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 40px;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background-color: var(--ifm-toc-divider-color);
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents__link {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents__link:hover,
|
||||
.theme-doc-toc-desktop .table-of-contents__link:hover code,
|
||||
.theme-doc-toc-desktop .table-of-contents__link--active,
|
||||
.theme-doc-toc-desktop .table-of-contents__link--active code {
|
||||
color: var(--ifm-toc-link-active);
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents__link--active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background-color: var(--ifm-toc-link-active);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .toc-wrapper {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .markdown-row {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents li {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents > li:not(:first-child),
|
||||
.theme-doc-toc-desktop .table-of-contents ul li {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents li:not(:last-child) {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents li:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.theme-doc-toc-desktop .table-of-contents, .table-of-contents ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.table-of-contents ul .table-of-contents__link {
|
||||
padding-left: calc(var(--ifm-toc-padding-horizontal) + var(--ifm-toc-link-padding-left)) !important;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1441px) {
|
||||
.col.toc-wrapper {
|
||||
--ifm-col-width: calc(2 / 12 * 100%)
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1440px) {
|
||||
.col.toc-wrapper {
|
||||
--ifm-col-width: calc(3 / 12 * 100%)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
.tooltip-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tooltip-box {
|
||||
position: absolute;
|
||||
top: calc(-100% - 17px);
|
||||
z-index: 100000;
|
||||
padding: 8px 16px;
|
||||
max-width: 170px;
|
||||
width: max-content;
|
||||
text-align: center;
|
||||
|
||||
background-color: var(--ifm-tooltip-background-color);
|
||||
border: 1px solid var(--ifm-tooltip-border-color);
|
||||
border-radius: 8px;
|
||||
color: var(--ifm-color-content);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
box-shadow: 0px 2px 16px var(--ifm-tooltip-box-shadow-color);
|
||||
|
||||
opacity: 0;
|
||||
transition: all .1s;
|
||||
}
|
||||
|
||||
.tooltip-box.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.inline-tooltip {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tooltip-container:not(.inline-tooltip) .tooltip-box {
|
||||
left: calc(-50% - 30px);
|
||||
}
|
||||
|
||||
.inline-tooltip .tooltip-box {
|
||||
left: 0;
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
h1 {
|
||||
font-size: var(--ifm-h1-font-size);
|
||||
line-height: var(--ifm-h1-line-height);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--ifm-h2-font-size);
|
||||
line-height: var(--ifm-h2-line-height);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--ifm-color-headers);
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.theme-doc-markdown a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.markdown h1:first-child {
|
||||
font-size: 30px !important;
|
||||
}
|
||||
|
||||
.markdown > h2 {
|
||||
font-size: 24px !important;
|
||||
}
|
||||
|
||||
.markdown > p {
|
||||
margin-bottom: calc(var(--ifm-base-margin-vertical) / 4);
|
||||
}
|
||||
|
||||
.markdown a,
|
||||
.markdown a:hover {
|
||||
color: var(--ifm-link-color);
|
||||
}
|
||||
|
||||
.markdown a:not(.hash-link) {
|
||||
font-weight: var(--ifm-link-weight);
|
||||
}
|
||||
|
||||
.markdown a:not(.hash-link):not(.card):not(.img-url):after {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
content: '';
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .markdown a:not(.hash-link):not(.card):not(.img-url):after {
|
||||
background-image: url('/img/link-icon.svg');
|
||||
}
|
||||
|
||||
[data-theme="dark"] .markdown a:not(.hash-link):not(.card):not(.img-url):after {
|
||||
background-image: url('/img/link-icon-dark.svg');
|
||||
}
|
||||
|
||||
.markdown p + h2,
|
||||
.markdown .alert + h2 {
|
||||
margin-top: calc(var(--ifm-base-margin-vertical) * 2);
|
||||
}
|
||||
|
||||
.markdown p + .alert {
|
||||
margin-top: var(--ifm-base-margin-vertical);
|
||||
}
|
||||
|
||||
.markdown {
|
||||
margin-bottom: calc(var(--ifm-base-margin-vertical) * 2);
|
||||
}
|
||||
|
||||
.markdown p + p > img:not(.ui-icon) {
|
||||
margin-top: var(--ifm-base-margin-vertical);
|
||||
}
|
||||
|
||||
p + img:not(.ui-icon) {
|
||||
margin-bottom: calc(var(--ifm-base-margin-vertical) * 2);
|
||||
}
|
||||
@@ -0,0 +1,220 @@
|
||||
/* You can override the default Infima variables here. */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
|
||||
|
||||
:root {
|
||||
/* Base Styles */
|
||||
--ifm-global-radius: 8px;
|
||||
--ifm-hr-background-color: #E5E7EB;
|
||||
--ifm-base-margin-vertical: 32px;
|
||||
--ifm-hr-margin-vertical: calc(var(--ifm-base-margin-vertical) * 2);
|
||||
|
||||
/* Colors */
|
||||
--ifm-color-primary: #111827;
|
||||
--ifm-medusa-gray: #f0f0f0;
|
||||
--ifm-color-content: #6B7280;
|
||||
|
||||
/* Fonts */
|
||||
--ifm-code-font-size: 14px;
|
||||
--ifm-font-family-base: "Inter",BlinkMacSystemFont,-apple-system,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif;
|
||||
--ifm-font-family-monospace: 'Roboto Mono',SFMono-Regular, Menlo, Monaco, Consolas,'Liberation Mono', 'Courier New', monospace;
|
||||
--ifm-font-size-base: 14px;
|
||||
--ifm-line-height-base: 24px;
|
||||
|
||||
/* Headings */
|
||||
--ifm-color-headers: #111827;
|
||||
--ifm-heading-font-weight: 600;
|
||||
--ifm-heading-line-height: 24px;
|
||||
--ifm-h1-font-size: 30px;
|
||||
--ifm-h1-line-height: 48px;
|
||||
--ifm-h2-font-size: 24px;
|
||||
--ifm-h2-line-height: 36px;
|
||||
--ifm-h4-font-size: 14px;
|
||||
|
||||
/* Links */
|
||||
--ifm-link-color: #4B5563;
|
||||
--ifm-link-weight: 600;
|
||||
|
||||
/* Sidebar */
|
||||
--doc-sidebar-width: 250px !important;
|
||||
--ifm-menu-active: #111827;
|
||||
|
||||
/* Docs Page */
|
||||
--ifm-docs-page-max-width: 850px;
|
||||
|
||||
/* Toc */
|
||||
--ifm-toc-border-color: #f0f0f0;
|
||||
--ifm-toc-link-color: #6B7280;
|
||||
--ifm-toc-padding-horizontal: 9px;
|
||||
--ifm-toc-link-active: #111827;
|
||||
--ifm-toc-divider-color: #E5E7EB;
|
||||
--ifm-toc-link-padding-left: 16px;
|
||||
|
||||
/* Navbar */
|
||||
--ifm-navbar-shadow: 0px 1px 0px 0px #E5E7EB;
|
||||
--ifm-navbar-padding-top: 16px;
|
||||
--ifm-navbar-padding-bottom: 17px;
|
||||
--ifm-navbar-padding-vertical: 16px;
|
||||
--ifm-navbar-padding-horizontal: 24px;
|
||||
--ifm-navbar-height: 57px;
|
||||
--ifm-navbar-link-hover-color: #111827;
|
||||
--ifm-navbar-link-color: #6B7280;
|
||||
|
||||
/* Color Mode toggler */
|
||||
--mode-tabs-bg: #F3F4F6;
|
||||
--mode-button-text-color: #6B7280;
|
||||
--mode-button-active-bg: #FFFFFF;
|
||||
--mode-button-active-border-color: #E5E7EB;
|
||||
--mode-button-active-text-color: #111827;
|
||||
|
||||
/* Screen Width */
|
||||
--ifm-container-width-xl: 960px;
|
||||
|
||||
/* Notes */
|
||||
--ifm-note-background: #F9FAFB;
|
||||
--ifm-note-border-color: #E5E7EB;
|
||||
--ifm-note-text-color: #4B5563;
|
||||
|
||||
/* Code */
|
||||
--ifm-code-border-radius: 8px;
|
||||
--ifm-code-padding-horizontal: 8px;
|
||||
--ifm-code-border-color: #E5E7EB;
|
||||
--ifm-code-background: #F9FAFB;
|
||||
--ifm-code-color: #4B5563;
|
||||
--ifm-code-tabs-active-bg: transparent;
|
||||
--ifm-code-tabs-active-color: #F4F4F4;
|
||||
--ifm-code-action-hover-bg: rgba(141, 141, 141, 0.16);
|
||||
|
||||
/* Tooltip */
|
||||
--ifm-tooltip-background-color: #fff;
|
||||
--ifm-tooltip-border-color: #E5E7EB;
|
||||
--ifm-tooltip-box-shadow-color: rgba(17, 24, 39, 0.08);
|
||||
|
||||
/* Buttons */
|
||||
--ifm-primary-btn-background-color: #fff;
|
||||
--ifm-primary-btn-color: #111827;
|
||||
--ifm-primary-btn-border-color: #E5E7EB;
|
||||
|
||||
/* Footer */
|
||||
--ifm-footer-border-color: #E5E7EB;
|
||||
--ifm-footer-logo-max-width: 24px;
|
||||
--ifm-footer-title-color: #111827;
|
||||
--ifm-footer-link-color: var(--ifm-color-content);
|
||||
|
||||
/* Search */
|
||||
--docsearch-searchbox-background: #F9FAFB !important;
|
||||
--docsearch-modal-background: #fff !important;
|
||||
--docsearch-modal-shadow: none !important;
|
||||
--docsearch-modal-fade-bg: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
|
||||
--docsearch-container-background: rgba(17, 24, 39, 0.4) !important;
|
||||
--docsearch-key-gradient: #E5E7EB !important;
|
||||
--docsearch-muted-color: #6B7280 !important;
|
||||
--docsearch-placeholder-color: #9CA3AF;
|
||||
--docsearch-searchbox-shadow: 0px 0px 0px 4px rgba(124, 58, 237, 0.1) !important;
|
||||
--docsearch-searchbox-border-color: #7C3AED;
|
||||
--docsearch-primary-color: var(--docsearch-searchbox-border-color);
|
||||
--docsearch-searchbox-height: 40px !important;
|
||||
--docsearch-spacing: 16px !important;
|
||||
--docsearch-highlight-color: #6B7280 !important;
|
||||
--docsearch-text-color: #111827 !important;
|
||||
--docsearch-hit-background: #FFFFFF !important;
|
||||
--docsearch-hit-height: auto !important;
|
||||
--docsearch-hit-active-color: var(--docsearch-text-color) !important;
|
||||
--docsearch-hit-active-bg: #F9FAFB;
|
||||
--docsearch-hit-icon-color: #9CA3AF;
|
||||
--docsearch-hit-border-color: #E5E7EB;
|
||||
--docsearch-hit-title-color: #000000;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
/* Base Styles */
|
||||
--ifm-hr-background-color: #2D2D2D;
|
||||
|
||||
/* Colors */
|
||||
--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: #161616;
|
||||
--ifm-background-surface-color: #161616;
|
||||
--ifm-medusa-gray: #292929;
|
||||
--ifm-color-content: #8A8A8A;
|
||||
|
||||
/* Headings */
|
||||
--ifm-color-headers: #F3F3F3;
|
||||
|
||||
/* Links */
|
||||
--ifm-link-color: #8A8A8A;
|
||||
|
||||
/* Sidebar */
|
||||
--ifm-menu-color: rgba(255, 255, 255, 0.5);
|
||||
--ifm-menu-active: #fff;
|
||||
|
||||
/* Toc */
|
||||
--ifm-toc-border-color: #333;
|
||||
--ifm-toc-link-active: #F3F3F3;
|
||||
--ifm-toc-link-color: #737373;
|
||||
--ifm-toc-divider-color: #393939;
|
||||
|
||||
/* Navbar */
|
||||
--ifm-navbar-background-color: #161616;
|
||||
--ifm-navbar-shadow: 0px 1px 0px 0px #2D2D2D;
|
||||
--ifm-navbar-link-hover-color: #F3F3F3;
|
||||
--ifm-navbar-link-color: #8A8A8A;
|
||||
|
||||
/* Color Mode toggler */
|
||||
--mode-tabs-bg: #222222;
|
||||
--mode-button-text-color: #8A8A8A;
|
||||
--mode-button-active-bg: #161616;
|
||||
--mode-button-active-border-color: #393939;
|
||||
--mode-button-active-text-color: #F3F3F3;
|
||||
|
||||
/* Notes */
|
||||
--ifm-note-background: #222222;
|
||||
--ifm-note-border-color: #393939;
|
||||
--ifm-note-text-color: #8A8A8A;
|
||||
|
||||
/* Code */
|
||||
--ifm-code-border-color: #393939;
|
||||
--ifm-code-background: #222222;
|
||||
--ifm-code-color: #8A8A8A;
|
||||
--ifm-code-tabs-active-bg: #222222;
|
||||
--ifm-code-tabs-active-color: #F3F3F3;
|
||||
--ifm-code-action-hover-bg: rgba(255, 255, 255, 0.05);
|
||||
|
||||
/* Tooltip */
|
||||
--ifm-tooltip-background-color: #222222;
|
||||
--ifm-tooltip-border-color: #393939;
|
||||
|
||||
/* Buttons */
|
||||
--ifm-primary-btn-background-color: #222222;
|
||||
--ifm-primary-btn-color: #F3F3F3;
|
||||
--ifm-primary-btn-border-color: #393939;
|
||||
|
||||
/* Footer */
|
||||
--ifm-footer-border-color: #3E3F41;
|
||||
--ifm-footer-title-color: #F3F3F3;
|
||||
--ifm-footer-link-color: var(--ifm-color-content);
|
||||
|
||||
/* Search */
|
||||
--docsearch-searchbox-background: #222222 !important;
|
||||
--docsearch-searchbox-focus-background: var(--docsearch-searchbox-background) !important;
|
||||
--docsearch-modal-background: #222222 !important;
|
||||
--docsearch-modal-fade-bg: linear-gradient(180deg, rgba(34, 34, 34, 0) 0%, #222222 100%);
|
||||
--docsearch-container-background: rgba(22, 22, 22, 0.7) !important;
|
||||
--docsearch-key-gradient: #393939 !important;
|
||||
--docsearch-muted-color: #8A8A8A !important;
|
||||
--docsearch-placeholder-color: #686868;
|
||||
--docsearch-searchbox-shadow: 0px 0px 0px 4px rgba(139, 92, 246, 0.2) !important;
|
||||
--docsearch-searchbox-border-color: #8B5CF6;
|
||||
--docsearch-highlight-color: #8A8A8A !important;
|
||||
--docsearch-text-color: #F3F3F3 !important;
|
||||
--docsearch-hit-background: #222222 !important;
|
||||
--docsearch-hit-active-color: var(--docsearch-text-color) !important;
|
||||
--docsearch-hit-active-bg: #2D2D2D;
|
||||
--docsearch-hit-icon-color: #737373;
|
||||
--docsearch-hit-border-color: #393939;
|
||||
--docsearch-hit-title-color: #F3F3F3;
|
||||
}
|
||||
+15
-586
@@ -6,589 +6,18 @@
|
||||
*/
|
||||
|
||||
/* You can override the default Infima variables here. */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;400;500;600;700&display=swap');
|
||||
|
||||
:root {
|
||||
/* Colors */
|
||||
--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 */
|
||||
--ifm-code-font-size: 80%;
|
||||
--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: 250px !important;
|
||||
|
||||
/* Docs Page */
|
||||
--ifm-docs-page-max-width: 850px;
|
||||
|
||||
/* Toc */
|
||||
--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"]) {
|
||||
/* Navbar */
|
||||
--ifm-navbar-shadow: 0px 1px 0px 0px #a6acb5;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
--ifm-navbar-background-color: rgba(5, 1, 13, 1);
|
||||
/* --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: 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 {
|
||||
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;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* DocSearch */
|
||||
|
||||
/* html[data-theme="light"] .DocSearch-Button {
|
||||
--docsearch-searchbox-background: #fff;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .DocSearch-Button {
|
||||
--docsearch-searchbox-background: #1f1f1f;
|
||||
} */
|
||||
|
||||
.DocSearch-Button {
|
||||
width: 100%;
|
||||
max-width: 175px;
|
||||
border-radius: 8px !important;
|
||||
--docsearch-container-background: #f5f6f7;
|
||||
}
|
||||
|
||||
span.DocSearch-Button-Key {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Navbar */
|
||||
|
||||
html[data-theme="dark"] .navbar-github-link:before {
|
||||
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
|
||||
no-repeat;
|
||||
}
|
||||
|
||||
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 var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
z-index: 1000;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.navbar-github-link:before {
|
||||
content: "";
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
|
||||
no-repeat;
|
||||
}
|
||||
|
||||
.navbar__link svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* DocsPage */
|
||||
|
||||
article {
|
||||
max-width: var(--ifm-docs-page-max-width);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 966px) {
|
||||
[class*=docItemContainer] > article {
|
||||
margin-left: 50px;
|
||||
margin-right: 50px;
|
||||
max-width: none
|
||||
}
|
||||
}
|
||||
|
||||
.docusaurus-highlight-code-line {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
display: block;
|
||||
margin: 0 calc(-1 * var(--ifm-pre-padding));
|
||||
padding: 0 var(--ifm-pre-padding);
|
||||
}
|
||||
|
||||
/* TOC */
|
||||
|
||||
.table-of-contents {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.table-of-contents::before {
|
||||
content: "ON THIS PAGE";
|
||||
display: inline-block;
|
||||
font-size: 0.85rem;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.table-of-contents .table-of-contents__link--active {
|
||||
border-left: 3px solid var(--ifm-link-color);
|
||||
color: var(--ifm-color-primary);
|
||||
font-weight: 500;
|
||||
margin-left: -14px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
|
||||
.main-wrapper aside {
|
||||
z-index: var(--ifm-z-index-fixed);
|
||||
}
|
||||
|
||||
.sidebar-bg {
|
||||
height: 100%;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.medium-zoom-overlay {
|
||||
z-index: var(--ifm-z-index-overlay);
|
||||
}
|
||||
|
||||
.medium-zoom-image--opened {
|
||||
z-index: var(--ifm-z-index-overlay);
|
||||
}
|
||||
|
||||
/* Medusa logo */
|
||||
.sidebar-bg img {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.padding-top--md {
|
||||
padding-top: 2rem !important;
|
||||
}
|
||||
|
||||
a.menu__link.menu__link--active.active {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
a.menu__link--sublist::after,
|
||||
.menu__caret:before {
|
||||
background: var(--ifm-menu-link-sublist-icon) 50% / 1rem 2rem;
|
||||
}
|
||||
|
||||
.menu__list-item > a {
|
||||
font-weight: 450;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
|
||||
.pagination-nav {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: var(--ifm-docs-page-max-width);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding-left: 32px;
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
.navbar {
|
||||
padding-left: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
|
||||
footer .footer__items svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 966px) {
|
||||
footer .footer__col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
footer .footer__items li {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
footer .footer__title {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) footer {
|
||||
background-color: #ffffff !important;
|
||||
border-top: 1px solid var(--ifm-toc-border-color);
|
||||
}
|
||||
|
||||
.react-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
|
||||
html:not([data-theme=dark]) .card {
|
||||
border: 1px solid #cbcbcb;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.col {
|
||||
margin-top: 10px !important;
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
.prism-code {
|
||||
background-color: none;
|
||||
word-break: break-word;
|
||||
font-size: 0.8rem;
|
||||
outline: none !important;
|
||||
}
|
||||
.prism-code div,
|
||||
.prism-code div:focus,
|
||||
.prism-code div:active {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
details summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .theme-doc-markdown a.card:hover {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.box-link,
|
||||
.box-link:hover {
|
||||
color: #0a3149;
|
||||
}
|
||||
|
||||
.theme-doc-markdown a:hover {
|
||||
color: #6e3eff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
[data-theme="dark"] a:hover {
|
||||
color: var(--ifm-menu-active);
|
||||
}
|
||||
|
||||
.DocSearch-Container {
|
||||
z-index: 1001 !important;
|
||||
}
|
||||
|
||||
.reference-table th:nth-child(2),
|
||||
.reference-table td:nth-child(2) {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.reference-table th:nth-child(3),
|
||||
.reference-table td:nth-child(3) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.reference-table .theme-code-block span {
|
||||
max-width: 100%;
|
||||
word-break: break-word;
|
||||
white-space: break-spaces;
|
||||
}
|
||||
|
||||
/* API Reference Styling */
|
||||
html[data-theme="dark"] .redocusaurus .expanded + tr > td > div {
|
||||
background-color: var(--ifm-medusa-gray);
|
||||
}
|
||||
|
||||
.redocusaurus a {
|
||||
color: var(--ifm-link-color) !important;
|
||||
}
|
||||
|
||||
.redocusaurus [data-section-id] > div:nth-child(2) pre {
|
||||
background-color: transparent !important;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .redocusaurus h5 + svg {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .redocusaurus h2 + div + div > div + div {
|
||||
padding: 8px 9.6px;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
kbd {
|
||||
--ifm-color-emphasis-800: var(--ifm-color-gray-800);
|
||||
|
||||
font: 100% var(--ifm-font-family-monospace) !important;
|
||||
}
|
||||
|
||||
.ui-icon {
|
||||
vertical-align: sub;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.menu__link,
|
||||
.redocusaurus .menu-content label {
|
||||
font-weight: 500 !important;
|
||||
font-size: 12px;
|
||||
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,
|
||||
.navbar-sidebar__item .menu__link:not(.navbar-github-link) {
|
||||
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):not(.navbar-github-link)::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,
|
||||
.navbar-sidebar__item .menu__link::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: 19%;
|
||||
}
|
||||
|
||||
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: 19%;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.navbar-github-link {
|
||||
overflow: visible;
|
||||
}
|
||||
@import url('./_variables.css');
|
||||
|
||||
@import url('./_card.css');
|
||||
@import url('./_code.css');
|
||||
@import url('./_dark.css');
|
||||
@import url('./_docsearch.css');
|
||||
@import url('./_docspage.css');
|
||||
@import url('./_footer.css');
|
||||
@import url('./_navbar.css');
|
||||
@import url('./_note.css');
|
||||
@import url('./_redocly.css');
|
||||
@import url('./_sidebar.css');
|
||||
@import url('./_toc.css');
|
||||
@import url('./_tooltip.css');
|
||||
@import url('./_typography.css');
|
||||
|
||||
@@ -0,0 +1,153 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import {ThemeClassNames} from '@docusaurus/theme-common';
|
||||
import Translate from '@docusaurus/Translate';
|
||||
import styles from './styles.module.css';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
|
||||
function NoteIcon() {
|
||||
return (
|
||||
<img src={useBaseUrl('/img/info-icon.png')} className="no-zoom-img" />
|
||||
);
|
||||
}
|
||||
function TipIcon() {
|
||||
return (
|
||||
<img src={useBaseUrl('/img/tip-icon.png')} height={16} width={12} className="no-zoom-img" />
|
||||
);
|
||||
}
|
||||
function DangerIcon() {
|
||||
return (
|
||||
<img src={useBaseUrl('/img/alert-icon.png')} className="no-zoom-img" />
|
||||
);
|
||||
}
|
||||
function InfoIcon() {
|
||||
return NoteIcon();
|
||||
}
|
||||
function CautionIcon() {
|
||||
return DangerIcon();
|
||||
}
|
||||
// eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
|
||||
const AdmonitionConfigs = {
|
||||
note: {
|
||||
infimaClassName: 'secondary',
|
||||
iconComponent: NoteIcon,
|
||||
label: (
|
||||
<Translate
|
||||
id="theme.admonition.note"
|
||||
description="The default label used for the Note admonition (:::note)">
|
||||
note
|
||||
</Translate>
|
||||
),
|
||||
},
|
||||
tip: {
|
||||
infimaClassName: 'success',
|
||||
iconComponent: TipIcon,
|
||||
label: (
|
||||
<Translate
|
||||
id="theme.admonition.tip"
|
||||
description="The default label used for the Tip admonition (:::tip)">
|
||||
tip
|
||||
</Translate>
|
||||
),
|
||||
},
|
||||
danger: {
|
||||
infimaClassName: 'danger',
|
||||
iconComponent: DangerIcon,
|
||||
label: (
|
||||
<Translate
|
||||
id="theme.admonition.danger"
|
||||
description="The default label used for the Danger admonition (:::danger)">
|
||||
danger
|
||||
</Translate>
|
||||
),
|
||||
},
|
||||
info: {
|
||||
infimaClassName: 'info',
|
||||
iconComponent: InfoIcon,
|
||||
label: (
|
||||
<Translate
|
||||
id="theme.admonition.info"
|
||||
description="The default label used for the Info admonition (:::info)">
|
||||
info
|
||||
</Translate>
|
||||
),
|
||||
},
|
||||
caution: {
|
||||
infimaClassName: 'warning',
|
||||
iconComponent: CautionIcon,
|
||||
label: (
|
||||
<Translate
|
||||
id="theme.admonition.caution"
|
||||
description="The default label used for the Caution admonition (:::caution)">
|
||||
caution
|
||||
</Translate>
|
||||
),
|
||||
},
|
||||
};
|
||||
// Legacy aliases, undocumented but kept for retro-compatibility
|
||||
const aliases = {
|
||||
secondary: 'note',
|
||||
important: 'info',
|
||||
success: 'tip',
|
||||
warning: 'danger',
|
||||
};
|
||||
function getAdmonitionConfig(unsafeType) {
|
||||
const type = aliases[unsafeType] ?? unsafeType;
|
||||
const config = AdmonitionConfigs[type];
|
||||
if (config) {
|
||||
return config;
|
||||
}
|
||||
console.warn(
|
||||
`No admonition config found for admonition type "${type}". Using Info as fallback.`,
|
||||
);
|
||||
return AdmonitionConfigs.info;
|
||||
}
|
||||
// Workaround because it's difficult in MDX v1 to provide a MDX title as props
|
||||
// See https://github.com/facebook/docusaurus/pull/7152#issuecomment-1145779682
|
||||
function extractMDXAdmonitionTitle(children) {
|
||||
const items = React.Children.toArray(children);
|
||||
const mdxAdmonitionTitle = items.find(
|
||||
(item) =>
|
||||
React.isValidElement(item) &&
|
||||
item.props?.mdxType === 'mdxAdmonitionTitle',
|
||||
);
|
||||
const rest = <>{items.filter((item) => item !== mdxAdmonitionTitle)}</>;
|
||||
return {
|
||||
mdxAdmonitionTitle,
|
||||
rest,
|
||||
};
|
||||
}
|
||||
function processAdmonitionProps(props) {
|
||||
const {mdxAdmonitionTitle, rest} = extractMDXAdmonitionTitle(props.children);
|
||||
return {
|
||||
...props,
|
||||
title: props.title ?? mdxAdmonitionTitle,
|
||||
children: rest,
|
||||
};
|
||||
}
|
||||
export default function Admonition(props) {
|
||||
const {children, type, title, icon: iconProp} = processAdmonitionProps(props);
|
||||
const typeConfig = getAdmonitionConfig(type);
|
||||
const titleLabel = title ?? typeConfig.label;
|
||||
const {iconComponent: IconComponent} = typeConfig;
|
||||
const icon = iconProp ?? <IconComponent />;
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
ThemeClassNames.common.admonition,
|
||||
ThemeClassNames.common.admonitionType(props.type),
|
||||
'alert',
|
||||
`alert--${typeConfig.infimaClassName}`,
|
||||
styles.admonition,
|
||||
)}>
|
||||
<div className={
|
||||
clsx(
|
||||
styles.admonitionContentContainer
|
||||
)
|
||||
}>
|
||||
<span className={styles.admonitionIcon}>{icon}</span>
|
||||
<div className={styles.admonitionContent}>{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
.admonition {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.admonitionIcon {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.admonitionIcon svg,
|
||||
.admonitionIcon img {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.admonitionIcon {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin-right: 16px;
|
||||
flex: 1;
|
||||
max-width: 20px;
|
||||
}
|
||||
|
||||
.admonitionIcon img {
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.admonitionContent {
|
||||
font-size: 14px;
|
||||
color: var(--ifm-note-text-color);
|
||||
flex: 1;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
.admonitionContent > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.admonitionContentContainer {
|
||||
display: flex;
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import React, {isValidElement} from 'react';
|
||||
import useIsBrowser from '@docusaurus/useIsBrowser';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import ElementContent from '@theme/CodeBlock/Content/Element';
|
||||
import StringContent from '@theme/CodeBlock/Content/String';
|
||||
import ThemedImage from '@theme/ThemedImage';
|
||||
import Tooltip from '../Tooltip';
|
||||
import CopyButton from '../CopyButton';
|
||||
import {useThemeConfig} from '@docusaurus/theme-common';
|
||||
|
||||
/**
|
||||
* Best attempt to make the children a plain string so it is copyable. If there
|
||||
* are react elements, we will not be able to copy the content, and it will
|
||||
* return `children` as-is; otherwise, it concatenates the string children
|
||||
* together.
|
||||
*/
|
||||
function maybeStringifyChildren(children) {
|
||||
if (React.Children.toArray(children).some((el) => isValidElement(el))) {
|
||||
return children;
|
||||
}
|
||||
// The children is now guaranteed to be one/more plain strings
|
||||
return Array.isArray(children) ? children.join('') : children;
|
||||
}
|
||||
export default function CodeBlock({children: rawChildren, ...props}) {
|
||||
// The Prism theme on SSR is always the default theme but the site theme can
|
||||
// be in a different mode. React hydration doesn't update DOM styles that come
|
||||
// from SSR. Hence force a re-render after mounting to apply the current
|
||||
// relevant styles.
|
||||
const isBrowser = useIsBrowser();
|
||||
const children = maybeStringifyChildren(rawChildren);
|
||||
const CodeBlockComp =
|
||||
typeof children === 'string' ? StringContent : ElementContent;
|
||||
const {reportCodeLinkPrefix} = useThemeConfig();
|
||||
|
||||
return (
|
||||
<div className='code-wrapper'>
|
||||
<div className='code-header'>
|
||||
<Tooltip text="Report Incorrect Code">
|
||||
<a href={`${reportCodeLinkPrefix}&title=${encodeURIComponent(`Docs(Code Issue): Code Issue in ${isBrowser ? document?.title : ''}`)}`} target="_blank" className='report-code code-action img-url'>
|
||||
<ThemedImage alt='Report Incorrect Code' sources={{
|
||||
light: useBaseUrl('/img/alert-code.png'),
|
||||
dark: useBaseUrl('/img/alert-code-dark.png')
|
||||
}} className="no-zoom-img" />
|
||||
</a>
|
||||
</Tooltip>
|
||||
<CopyButton buttonClassName='code-action' text={children}>
|
||||
<ThemedImage alt='Copy to Clipboard' sources={{
|
||||
light: useBaseUrl('/img/clipboard-copy.png'),
|
||||
dark: useBaseUrl('/img/clipboard-copy-dark.png')
|
||||
}} className="no-zoom-img" />
|
||||
</CopyButton>
|
||||
</div>
|
||||
<CodeBlockComp key={String(isBrowser)} {...props}>
|
||||
{children}
|
||||
</CodeBlockComp>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import clsx from 'clsx';
|
||||
import useIsBrowser from '@docusaurus/useIsBrowser';
|
||||
import {useColorMode} from '@docusaurus/theme-common';
|
||||
|
||||
const allowedModes = [
|
||||
'light',
|
||||
'dark',
|
||||
'auto'
|
||||
]
|
||||
|
||||
function ColorModeToggle({className, value, onChange}) {
|
||||
const isBrowser = useIsBrowser();
|
||||
const {colorMode} = useColorMode();
|
||||
const [storageColorMode, setStorageColorMode] = useState(colorMode)
|
||||
|
||||
useEffect(() => {
|
||||
if (isBrowser) {
|
||||
const previousSelected = window.localStorage.getItem('selected-color-mode')
|
||||
if (previousSelected && allowedModes.includes(previousSelected)) {
|
||||
setStorageColorMode(previousSelected)
|
||||
}
|
||||
}
|
||||
}, [isBrowser])
|
||||
|
||||
useEffect(() => {
|
||||
if (isBrowser && storageColorMode === 'auto') {
|
||||
|
||||
function userPreferenceChangedHandler(event) {
|
||||
onChange(event.matches ? "dark" : "light")
|
||||
}
|
||||
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', userPreferenceChangedHandler);
|
||||
|
||||
return () => {
|
||||
window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', userPreferenceChangedHandler);
|
||||
}
|
||||
}
|
||||
}, [storageColorMode, isBrowser])
|
||||
|
||||
function handleAutoOption () {
|
||||
if (isBrowser) {
|
||||
onChange(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
|
||||
}
|
||||
}
|
||||
|
||||
function handleColorModeChange(mode) {
|
||||
if (isBrowser) {
|
||||
window.localStorage.setItem('selected-color-mode', mode)
|
||||
setStorageColorMode(mode)
|
||||
}
|
||||
|
||||
if (mode === 'auto') {
|
||||
handleAutoOption();
|
||||
return;
|
||||
}
|
||||
|
||||
onChange(mode);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={clsx('color-mode-tabs', className)}>
|
||||
<button
|
||||
className={clsx(
|
||||
'pill-button',
|
||||
(colorMode === 'light' && storageColorMode === 'light') && 'active'
|
||||
)}
|
||||
onClick={() => handleColorModeChange('light')}
|
||||
disabled={!isBrowser}
|
||||
aria-label={'Light'}
|
||||
>
|
||||
Light
|
||||
</button>
|
||||
<button
|
||||
className={clsx(
|
||||
'pill-button',
|
||||
(colorMode === 'dark' && storageColorMode === 'dark') && 'active'
|
||||
)}
|
||||
onClick={() => handleColorModeChange('dark')}
|
||||
disabled={!isBrowser}
|
||||
aria-label={'Dark'}
|
||||
>
|
||||
Dark
|
||||
</button>
|
||||
<button
|
||||
className={clsx(
|
||||
'pill-button',
|
||||
storageColorMode === 'auto' && 'active'
|
||||
)}
|
||||
onClick={() => handleColorModeChange('auto')}
|
||||
disabled={!isBrowser}
|
||||
aria-label={'Auto'}
|
||||
>
|
||||
Auto
|
||||
</button>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default React.memo(ColorModeToggle);
|
||||
@@ -0,0 +1,28 @@
|
||||
/* .toggle {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.toggleButton {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
transition: background var(--ifm-transition-fast);
|
||||
}
|
||||
|
||||
.toggleButton:hover {
|
||||
background: var(--ifm-color-emphasis-200);
|
||||
}
|
||||
|
||||
[data-theme='light'] .darkToggleIcon,
|
||||
[data-theme='dark'] .lightToggleIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggleButtonDisabled {
|
||||
cursor: not-allowed;
|
||||
} */
|
||||
@@ -0,0 +1,26 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import copy from 'copy-text-to-clipboard';
|
||||
import Tooltip from '../Tooltip';
|
||||
|
||||
export default function CopyButton ({ children, buttonClassName, text, tooltipClassName }) {
|
||||
const [isCopied, setIsCopied] = useState(false);
|
||||
const copyTimeout = useRef(undefined);
|
||||
|
||||
const handleCopy = useCallback(() => {
|
||||
copy(text);
|
||||
setIsCopied(true);
|
||||
copyTimeout.current = window.setTimeout(() => {
|
||||
setIsCopied(false);
|
||||
}, 1000);
|
||||
}, [text]);
|
||||
|
||||
useEffect(() => () => window.clearTimeout(copyTimeout.current), []);
|
||||
|
||||
return (
|
||||
<Tooltip text={isCopied ? `Copied!` : `Copy to Clipboard`} tooltipClassName={tooltipClassName}>
|
||||
<button className={`copy-action ${buttonClassName}`} onClick={handleCopy}>
|
||||
{children}
|
||||
</button>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
@@ -9,29 +9,33 @@ import clsx from 'clsx';
|
||||
import isInternalUrl from '@docusaurus/isInternalUrl';
|
||||
import styles from './styles.module.css';
|
||||
import {translate} from '@docusaurus/Translate';
|
||||
import ThemedImage from '@theme/ThemedImage';
|
||||
|
||||
function CardContainer({href, children}) {
|
||||
function CardContainer({href, children, className}) {
|
||||
return (
|
||||
<Link
|
||||
href={href}
|
||||
className={clsx('card padding--lg', styles.cardContainer)}>
|
||||
className={clsx('card', styles.cardContainer, className)}>
|
||||
{children}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
function CardLayout({href, icon, title, description}) {
|
||||
function CardLayout({href, icon, title, description, containerClassName}) {
|
||||
return (
|
||||
<CardContainer href={href}>
|
||||
<h2 className={clsx('text--truncate', styles.cardTitle)} title={title}>
|
||||
{icon} {title}
|
||||
</h2>
|
||||
{description && (
|
||||
<p
|
||||
className={clsx('text--truncate', styles.cardDescription)}
|
||||
title={description}>
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
<CardContainer href={href} className={containerClassName}>
|
||||
{icon}
|
||||
<div className={clsx(styles.contentContainer)}>
|
||||
<h2 className={clsx(styles.cardTitle)} title={title}>
|
||||
{title}
|
||||
</h2>
|
||||
{description && (
|
||||
<p
|
||||
className={clsx(styles.cardDescription)}
|
||||
title={description}>
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</CardContainer>
|
||||
);
|
||||
}
|
||||
@@ -55,25 +59,45 @@ function CardCategory({item}) {
|
||||
},
|
||||
{count: item.items.length},
|
||||
)}
|
||||
containerClassName={item.customProps?.className}
|
||||
/>
|
||||
);
|
||||
}
|
||||
function CardLink({item}) {
|
||||
let icon;
|
||||
if (item.customProps && item.customProps.image) {
|
||||
icon = <img src={item.customProps.image} alt={item.label} width={24} height={24} />;
|
||||
if (item.customProps && item.customProps.themedImage) {
|
||||
icon = (
|
||||
<div className={clsx(styles.imageContainer, 'no-zoom-img')}>
|
||||
<ThemedImage alt={item.label} sources={{
|
||||
light: item.customProps.themedImage.light,
|
||||
dark: item.customProps.themedImage.dark
|
||||
}} />
|
||||
</div>
|
||||
)
|
||||
} else if (item.customProps && item.customProps.image) {
|
||||
icon = (
|
||||
<div className={clsx(styles.imageContainer, 'no-zoom-img')}>
|
||||
<img src={item.customProps.image} alt={item.label} />
|
||||
</div>
|
||||
);
|
||||
} else if (item.customProps && item.customProps.icon) {
|
||||
icon = item.customProps.icon;
|
||||
} else {
|
||||
icon = isInternalUrl(item.href) ? '📄️' : '🔗';
|
||||
icon = (
|
||||
<div className={clsx(styles.imageContainer, 'no-zoom-img')}>
|
||||
{isInternalUrl(item.href) ? '📄️' : '🔗'}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const doc = useDocById(item.docId ?? undefined);
|
||||
|
||||
return (
|
||||
<CardLayout
|
||||
href={item.href}
|
||||
icon={icon}
|
||||
title={item.label}
|
||||
description={doc?.description}
|
||||
description={item.customProps?.description || doc?.description}
|
||||
containerClassName={item.customProps?.className}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,100 +0,0 @@
|
||||
import {findFirstCategoryLink, useDocById} from '@docusaurus/theme-common';
|
||||
|
||||
import Link from '@docusaurus/Link';
|
||||
/**
|
||||
* 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';
|
||||
import clsx from 'clsx';
|
||||
import isInternalUrl from '@docusaurus/isInternalUrl';
|
||||
import styles from './styles.module.css';
|
||||
import {translate} from '@docusaurus/Translate';
|
||||
|
||||
function CardContainer({href, children}) {
|
||||
const className = clsx(
|
||||
'card margin-bottom--lg padding--lg',
|
||||
styles.cardContainer,
|
||||
href && styles.cardContainerLink,
|
||||
);
|
||||
return href ? (
|
||||
<Link href={href} className={className}>
|
||||
{children}
|
||||
</Link>
|
||||
) : (
|
||||
<div className={className}>{children}</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CardLayout({href, icon, title, description}) {
|
||||
return (
|
||||
<CardContainer href={href}>
|
||||
<h2 className={clsx('text--truncate', styles.cardTitle)} title={title}>
|
||||
{icon} {title}
|
||||
</h2>
|
||||
<div
|
||||
className={clsx('text--truncate', styles.cardDescription)}
|
||||
title={description}>
|
||||
{description}
|
||||
</div>
|
||||
</CardContainer>
|
||||
);
|
||||
}
|
||||
|
||||
function CardCategory({item}) {
|
||||
const href = findFirstCategoryLink(item);
|
||||
return (
|
||||
<CardLayout
|
||||
href={href}
|
||||
icon="🗃️"
|
||||
title={item.label}
|
||||
description={translate(
|
||||
{
|
||||
message: '{count} items',
|
||||
id: 'theme.docs.DocCard.categoryDescription',
|
||||
description:
|
||||
'The default description for a category card in the generated index about how many items this category includes',
|
||||
},
|
||||
{
|
||||
count: item.items.length,
|
||||
},
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CardLink({item}) {
|
||||
let icon;
|
||||
if (item.customProps && item.customProps.image) {
|
||||
icon = <img src={item.customProps.image} alt={item.label} width={24} height={24} />;
|
||||
} else if (item.customProps && item.customProps.icon) {
|
||||
icon = item.customProps.icon;
|
||||
} else {
|
||||
icon = isInternalUrl(item.href) ? '📄️' : '🔗';
|
||||
}
|
||||
|
||||
const doc = useDocById(item.docId ?? undefined);
|
||||
return (
|
||||
<CardLayout
|
||||
href={item.href}
|
||||
icon={icon}
|
||||
title={item.label}
|
||||
description={doc?.description}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DocCard({item}) {
|
||||
switch (item.type) {
|
||||
case 'link':
|
||||
return <CardLink item={item} />;
|
||||
|
||||
case 'category':
|
||||
return <CardCategory item={item} />;
|
||||
|
||||
default:
|
||||
throw new Error(`unknown item type ${JSON.stringify(item)}`);
|
||||
}
|
||||
}
|
||||
@@ -2,16 +2,31 @@
|
||||
--ifm-link-color: var(--ifm-color-emphasis-800);
|
||||
--ifm-link-hover-color: var(--ifm-color-emphasis-700);
|
||||
--ifm-link-hover-decoration: none;
|
||||
--ifm-background-color: #fff;
|
||||
--ifm-background-color-hover: #F9FAFB;
|
||||
--ifm-border-color: #E5E7EB;
|
||||
|
||||
box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%);
|
||||
border: 1px solid var(--ifm-color-emphasis-200);
|
||||
background-color: var(--ifm-background-color);
|
||||
border: 1px solid var(--ifm-border-color) !important;
|
||||
border-radius: 8px;
|
||||
box-shadow: none !important;
|
||||
transition: all var(--ifm-transition-fast) ease;
|
||||
transition-property: border, box-shadow;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 16px 24px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .cardContainer {
|
||||
--ifm-background-color-hover: #2D2D2D;
|
||||
--ifm-background-color: #222222;
|
||||
--ifm-border-color: #393939;
|
||||
}
|
||||
|
||||
.cardContainer:hover {
|
||||
border-color: var(--ifm-color-primary);
|
||||
box-shadow: 0 3px 6px 0 rgb(0 0 0 / 20%);
|
||||
background-color: var(--ifm-background-color-hover);
|
||||
}
|
||||
|
||||
.cardContainer *:last-child {
|
||||
@@ -19,15 +34,29 @@
|
||||
}
|
||||
|
||||
.cardTitle {
|
||||
font-size: 1.2rem;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.cardDescription {
|
||||
font-size: 0.8rem;
|
||||
min-height: 0.8rem;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
color: var(--ifm-color-content);
|
||||
}
|
||||
|
||||
.contentContainer {
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
|
||||
.cardTitle img {
|
||||
vertical-align: bottom;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 16px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import {
|
||||
useCurrentSidebarCategory,
|
||||
filterDocCardListItems,
|
||||
} from '@docusaurus/theme-common';
|
||||
import DocCard from '@theme/DocCard';
|
||||
function DocCardListForCurrentSidebarCategory({className}) {
|
||||
const category = useCurrentSidebarCategory();
|
||||
return <DocCardList items={category.items} className={className} />;
|
||||
}
|
||||
export default function DocCardList(props) {
|
||||
const {items, className} = props;
|
||||
if (!items) {
|
||||
return <DocCardListForCurrentSidebarCategory {...props} />;
|
||||
}
|
||||
const filteredItems = filterDocCardListItems(items);
|
||||
return (
|
||||
<section className={clsx('cards-grid', `grid-${props.colSize || '4'}`, className)}>
|
||||
{filteredItems.map((item, index) => (
|
||||
<article key={index} className={`card-wrapper margin-bottom--lg`}>
|
||||
<DocCard item={item} />
|
||||
</article>
|
||||
))}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,12 +1,19 @@
|
||||
import React from 'react';
|
||||
import Footer from '@theme-original/DocItem/Footer';
|
||||
import Feedback from '../../../components/Feedback';
|
||||
import { useDoc } from '@docusaurus/theme-common/internal';
|
||||
|
||||
export default function FooterWrapper(props) {
|
||||
const { metadata } = useDoc()
|
||||
|
||||
return (
|
||||
<div className='docusaurus-mt-lg'>
|
||||
<Feedback />
|
||||
<Footer {...props} />
|
||||
</div>
|
||||
<>
|
||||
{!metadata.frontMatter?.hide_footer && (
|
||||
<div className='docusaurus-mt-lg doc-footer'>
|
||||
<Feedback />
|
||||
<Footer {...props} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import {useWindowSize} from '@docusaurus/theme-common';
|
||||
import {useDoc} from '@docusaurus/theme-common/internal';
|
||||
import DocItemPaginator from '@theme/DocItem/Paginator';
|
||||
import DocVersionBanner from '@theme/DocVersionBanner';
|
||||
import DocVersionBadge from '@theme/DocVersionBadge';
|
||||
import DocItemFooter from '@theme/DocItem/Footer';
|
||||
import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
|
||||
import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
|
||||
import DocItemContent from '@theme/DocItem/Content';
|
||||
import DocBreadcrumbs from '@theme/DocBreadcrumbs';
|
||||
import styles from './styles.module.css';
|
||||
/**
|
||||
* Decide if the toc should be rendered, on mobile or desktop viewports
|
||||
*/
|
||||
function useDocTOC() {
|
||||
const {frontMatter, toc} = useDoc();
|
||||
const windowSize = useWindowSize();
|
||||
const hidden = frontMatter.hide_table_of_contents;
|
||||
const canRender = !hidden && toc.length > 0;
|
||||
const mobile = canRender ? <DocItemTOCMobile /> : undefined;
|
||||
const desktop =
|
||||
canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? (
|
||||
<DocItemTOCDesktop />
|
||||
) : undefined;
|
||||
return {
|
||||
hidden,
|
||||
mobile,
|
||||
desktop,
|
||||
};
|
||||
}
|
||||
export default function DocItemLayout({children}) {
|
||||
const docTOC = useDocTOC();
|
||||
return (
|
||||
<div className="row markdown-row">
|
||||
<div className={clsx('col', 'markdown-doc-wrapper', !docTOC.hidden && styles.docItemCol)}>
|
||||
<DocVersionBanner />
|
||||
<div className={styles.docItemContainer}>
|
||||
<article>
|
||||
<DocBreadcrumbs />
|
||||
<DocVersionBadge />
|
||||
{docTOC.mobile}
|
||||
<DocItemContent>{children}</DocItemContent>
|
||||
<DocItemFooter />
|
||||
</article>
|
||||
<DocItemPaginator />
|
||||
</div>
|
||||
</div>
|
||||
{docTOC.desktop && <div className="col toc-wrapper">{docTOC.desktop}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
.docItemContainer {
|
||||
margin-bottom: calc(var(--ifm-base-margin-vertical) * 3);
|
||||
}
|
||||
|
||||
.docItemContainer header + *,
|
||||
.docItemContainer article > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1441px) {
|
||||
.docItemCol {
|
||||
width: calc(10 / 12 * 100%);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1440px) {
|
||||
.docItemCol {
|
||||
width: calc(9 / 12 * 100%);
|
||||
}
|
||||
}
|
||||
@@ -6,6 +6,7 @@ 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';
|
||||
import SearchBar from '../../SearchBar'
|
||||
|
||||
function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
|
||||
const {
|
||||
@@ -24,16 +25,21 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
|
||||
isHidden && styles.sidebarHidden,
|
||||
)}>
|
||||
{hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
|
||||
<div className={styles.sidebarSearchContainer}>
|
||||
<SearchBar />
|
||||
</div>
|
||||
<Content path={path} sidebar={sidebar} />
|
||||
<ul className={
|
||||
clsx(
|
||||
styles.sidebarFooterList
|
||||
)
|
||||
}>
|
||||
{sidebarFooter.map((item, index) => (
|
||||
<DocSidebarItem key={index} item={item} index={index} level={1} />
|
||||
))}
|
||||
</ul>
|
||||
{sidebarFooter.length > 0 && (
|
||||
<ul className={
|
||||
clsx(
|
||||
styles.sidebarFooterList
|
||||
)
|
||||
}>
|
||||
{sidebarFooter.map((item, index) => (
|
||||
<DocSidebarItem key={index} item={item} index={index} level={1} />
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{hideable && <CollapseButton onClick={onCollapse} />}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -51,4 +51,8 @@
|
||||
|
||||
.sidebarFooterList li a {
|
||||
padding-left: 1.8em !important;
|
||||
}
|
||||
|
||||
.sidebarSearchContainer {
|
||||
margin: 24px 16px 24px;
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import SocialLinks from '../SocialLinks';
|
||||
import {useThemeConfig} from '@docusaurus/theme-common';
|
||||
|
||||
export default function FooterLayout({style, links, logo, copyright}) {
|
||||
const { socialLinks } = useThemeConfig()
|
||||
|
||||
return (
|
||||
<footer
|
||||
className={clsx('footer', {
|
||||
'footer--dark': style === 'dark',
|
||||
})}>
|
||||
<div className="container container-fluid footer-container">
|
||||
{(logo || copyright || socialLinks) && (
|
||||
<div className="text--center col col--6 social-logo-container">
|
||||
<div className='logo-container'>
|
||||
{logo && <div className="margin-bottom--sm">{logo}</div>}
|
||||
{copyright}
|
||||
</div>
|
||||
{socialLinks && <SocialLinks links={socialLinks} />}
|
||||
</div>
|
||||
)}
|
||||
<div className="col col--6">
|
||||
{links}
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import ThemedImage from '@theme/ThemedImage';
|
||||
|
||||
export default function SocialLinks ({ links = [] }) {
|
||||
const socialIcons = {
|
||||
twitter: {
|
||||
light: useBaseUrl('/img/twitter.png'),
|
||||
dark: useBaseUrl('/img/twitter-dark.png')
|
||||
},
|
||||
github: {
|
||||
light: useBaseUrl('/img/github.png'),
|
||||
dark: useBaseUrl('/img/github-dark.png')
|
||||
},
|
||||
discord: {
|
||||
light: useBaseUrl('/img/discord.png'),
|
||||
dark: useBaseUrl('/img/discord-dark.png')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='social-links'>
|
||||
{links.map((link) => (
|
||||
<a className='social-link' href={link.href} key={link.type}>
|
||||
<ThemedImage sources={socialIcons[link.type]} alt={link.type} className={`social-icon ${link.type}-icon`} />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconDiscord({width = 18, height = 14}) {
|
||||
return (
|
||||
<svg width={width} height={height} viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.9957 9.49648C11.1088 9.49648 10.3776 8.6825 10.3776 7.68228C10.3776 6.68206 11.0941 5.86809 11.9957 5.86809C12.8974 5.86809 13.6276 6.68994 13.6138 7.68228C13.6 8.67462 12.9043 9.49648 11.9957 9.49648ZM6.01412 9.49648C5.12723 9.49648 4.39603 8.6825 4.39603 7.68228C4.39603 6.68206 5.11245 5.86809 6.01412 5.86809C6.9158 5.86809 7.646 6.68994 7.63221 7.68228C7.61841 8.67462 6.91579 9.49648 6.0151 9.49648H6.01412ZM15.2368 1.27496C14.0698 0.739348 12.8383 0.357423 11.573 0.138751C11.5615 0.136467 11.5495 0.137909 11.5389 0.142871C11.5283 0.147833 11.5195 0.156056 11.5138 0.166343C11.3461 0.470858 11.1938 0.783637 11.0576 1.10349C9.69368 0.896352 8.30631 0.896352 6.9424 1.10349C6.80536 0.782831 6.65075 0.469974 6.47925 0.166343C6.47328 0.156357 6.46446 0.148389 6.45392 0.14347C6.44338 0.138551 6.4316 0.136908 6.42012 0.138751C5.15472 0.356967 3.9231 0.73891 2.75627 1.27496C2.74644 1.27927 2.73818 1.28649 2.73261 1.29565C0.399097 4.78214 -0.240452 8.18288 0.0719317 11.5442C0.0728266 11.5525 0.0753836 11.5605 0.079447 11.5678C0.0835103 11.5751 0.0889988 11.5815 0.0955842 11.5866C1.45426 12.5932 2.97408 13.3616 4.59016 13.859C4.60153 13.8624 4.61367 13.8622 4.62494 13.8585C4.63621 13.8548 4.64609 13.8478 4.65323 13.8383C5.00028 13.3658 5.30779 12.8655 5.57264 12.3424C5.57617 12.3352 5.57816 12.3274 5.57846 12.3194C5.57876 12.3114 5.57739 12.3034 5.57442 12.296C5.57144 12.2886 5.56694 12.2818 5.5612 12.2762C5.55547 12.2707 5.54862 12.2664 5.54111 12.2636C5.05609 12.078 4.58653 11.8543 4.13686 11.5945C4.12818 11.5898 4.12084 11.5829 4.11553 11.5746C4.11022 11.5663 4.10713 11.5567 4.10653 11.5468C4.10594 11.537 4.10788 11.5271 4.11215 11.5182C4.11642 11.5093 4.12289 11.5016 4.13095 11.4959C4.22949 11.425 4.32015 11.3521 4.40983 11.2772C4.4178 11.2705 4.42748 11.2662 4.43776 11.2649C4.44805 11.2635 4.45852 11.265 4.46797 11.2693C7.41344 12.6144 10.6033 12.6144 13.5143 11.2693C13.5238 11.2647 13.5344 11.2628 13.5449 11.2641C13.5553 11.2653 13.5652 11.2695 13.5734 11.2762C13.6631 11.3501 13.7577 11.425 13.8533 11.4949C13.8614 11.5006 13.8679 11.5082 13.8723 11.517C13.8766 11.5259 13.8786 11.5357 13.8781 11.5456C13.8777 11.5554 13.8747 11.565 13.8694 11.5734C13.8642 11.5818 13.857 11.5887 13.8483 11.5935C13.4014 11.8541 12.9333 12.0766 12.449 12.2587C12.4415 12.2615 12.4346 12.2659 12.4289 12.2716C12.4232 12.2773 12.4187 12.2842 12.4158 12.2917C12.4129 12.2992 12.4117 12.3073 12.4121 12.3154C12.4126 12.3234 12.4148 12.3313 12.4185 12.3385C12.6873 12.8589 12.9939 13.3588 13.3359 13.8344C13.3428 13.8441 13.3527 13.8515 13.364 13.8554C13.3753 13.8593 13.3875 13.8595 13.399 13.8561C15.0178 13.3602 16.5402 12.5917 17.9005 11.5836C17.9071 11.5788 17.9127 11.5726 17.9167 11.5655C17.9208 11.5583 17.9233 11.5504 17.9241 11.5422C18.2996 7.65961 17.2954 4.28646 15.2634 1.29369C15.2574 1.28462 15.2483 1.27799 15.2378 1.27496H15.2368Z" fill="currentColor"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import styles from './styles.module.css';
|
||||
import ThemedImage from '@theme/ThemedImage';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
|
||||
export default function IconEdit({className, ...restProps}) {
|
||||
return (
|
||||
<ThemedImage alt='Edit' sources={{
|
||||
light: useBaseUrl('/img/edit.png'),
|
||||
dark: useBaseUrl('/img/edit-dark.png')
|
||||
}} className={clsx(styles.iconEdit, className)} {...restProps} />
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
.iconEdit {
|
||||
margin-right: 8px;
|
||||
vertical-align: sub;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import React from 'react';
|
||||
import styles from './styles.module.css';
|
||||
export default function IconExternalLink({width = 16, height = 16}) {
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
className={styles.iconExternalLink}>
|
||||
<path d="M12.0099 3.99023L3.94995 12.0502" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M6.35156 3.94971L12.0098 3.9896L12.0505 9.64865" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
.iconExternalLink {
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconGitHub({width = 18, height = 18}) {
|
||||
return (
|
||||
<svg width={width} height={height} viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M9 0C4.0275 0 0 4.0275 0 9C0 12.9825 2.57625 16.3463 6.15375 17.5387C6.60375 17.6175 6.7725 17.3475 6.7725 17.1112C6.7725 16.8975 6.76125 16.1888 6.76125 15.435C4.5 15.8513 3.915 14.8837 3.735 14.3775C3.63375 14.1187 3.195 13.32 2.8125 13.1062C2.4975 12.9375 2.0475 12.5212 2.80125 12.51C3.51 12.4987 4.01625 13.1625 4.185 13.4325C4.995 14.7937 6.28875 14.4113 6.80625 14.175C6.885 13.59 7.12125 13.1962 7.38 12.9712C5.3775 12.7463 3.285 11.97 3.285 8.5275C3.285 7.54875 3.63375 6.73875 4.2075 6.10875C4.1175 5.88375 3.8025 4.96125 4.2975 3.72375C4.2975 3.72375 5.05125 3.4875 6.7725 4.64625C7.4925 4.44375 8.2575 4.3425 9.0225 4.3425C9.7875 4.3425 10.5525 4.44375 11.2725 4.64625C12.9938 3.47625 13.7475 3.72375 13.7475 3.72375C14.2425 4.96125 13.9275 5.88375 13.8375 6.10875C14.4113 6.73875 14.76 7.5375 14.76 8.5275C14.76 11.9812 12.6562 12.7463 10.6538 12.9712C10.98 13.2525 11.2613 13.7925 11.2613 14.6363C11.2613 15.84 11.25 16.8075 11.25 17.1112C11.25 17.3475 11.4187 17.6287 11.8688 17.5387C15.4237 16.3463 18 12.9712 18 9C18 4.0275 13.9725 0 9 0Z" fill="currentColor"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function IconTwitter({width = 18, height = 16}) {
|
||||
return (
|
||||
<svg width={width} height={height} viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.5921 2.33163C17.3093 2.45705 17.0186 2.5629 16.7215 2.64883C17.0732 2.25109 17.3414 1.78309 17.5051 1.27096C17.5417 1.15617 17.5037 1.03052 17.4094 0.95544C17.3151 0.880305 17.1842 0.871305 17.0804 0.932795C16.4496 1.30696 15.7689 1.57586 15.0553 1.7331C14.3364 1.03063 13.3599 0.630859 12.3506 0.630859C10.2199 0.630859 8.48642 2.36426 8.48642 4.49488C8.48642 4.66269 8.49705 4.82956 8.51807 4.99412C5.8741 4.76198 3.41606 3.46243 1.72813 1.39191C1.66797 1.31811 1.5753 1.27834 1.48042 1.28594C1.38549 1.29338 1.30019 1.34691 1.25223 1.42919C0.909882 2.01663 0.728895 2.68849 0.728895 3.37209C0.728895 4.30315 1.06131 5.18654 1.64852 5.87681C1.46997 5.81498 1.29671 5.73769 1.13134 5.64589C1.04256 5.59648 0.934211 5.59723 0.846011 5.64781C0.757753 5.69838 0.702418 5.7914 0.700096 5.89307C0.699689 5.9102 0.699689 5.92733 0.699689 5.94469C0.699689 7.33447 1.44768 8.5857 2.59125 9.26767C2.49301 9.25785 2.39482 9.24363 2.29727 9.22499C2.19671 9.20577 2.09329 9.24101 2.02547 9.31772C1.95754 9.39436 1.93507 9.5012 1.96637 9.59875C2.38966 10.9203 3.47947 11.8924 4.79695 12.1887C3.70423 12.8731 2.45463 13.2316 1.14284 13.2316C0.869121 13.2316 0.593838 13.2155 0.324418 13.1837C0.19058 13.1677 0.0626058 13.2468 0.0170252 13.374C-0.0285554 13.5014 0.0197542 13.6433 0.133619 13.7163C1.81882 14.7969 3.76741 15.368 5.7686 15.368C9.7027 15.368 12.1638 13.5128 13.5355 11.9565C15.2461 10.0159 16.2272 7.44734 16.2272 4.9094C16.2272 4.80338 16.2255 4.6963 16.2223 4.58958C16.8972 4.08111 17.4782 3.46574 17.951 2.75846C18.0229 2.65104 18.0151 2.50907 17.9319 2.41019C17.8488 2.31125 17.7103 2.27925 17.5921 2.33163Z" fill="currentColor"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import React, {isValidElement} from 'react';
|
||||
import CopyButton from '../CopyButton';
|
||||
|
||||
export default function MDXInlineCode(props) {
|
||||
|
||||
return (
|
||||
<CopyButton text={props.children} buttonClassName="inline-code-copy" tooltipClassName="inline-tooltip">
|
||||
<code {...props} />
|
||||
</CopyButton>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
// Import the original mapper
|
||||
import MDXComponents from '@theme-original/MDXComponents';
|
||||
import InlineCode from './InlineCode'
|
||||
|
||||
export default {
|
||||
// Re-use the default mapping
|
||||
...MDXComponents,
|
||||
// Map the "highlight" tag to our <Highlight /> component!
|
||||
// `Highlight` will receive all props that were passed to `highlight` in MDX
|
||||
inlineCode: InlineCode,
|
||||
};
|
||||
@@ -0,0 +1,62 @@
|
||||
import React from 'react';
|
||||
import {useThemeConfig} from '@docusaurus/theme-common';
|
||||
import {
|
||||
splitNavbarItems,
|
||||
useNavbarMobileSidebar,
|
||||
} from '@docusaurus/theme-common/internal';
|
||||
import NavbarItem from '@theme/NavbarItem';
|
||||
import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
|
||||
import SearchBar from '@theme/SearchBar';
|
||||
import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
|
||||
import NavbarLogo from '@theme/Navbar/Logo';
|
||||
import NavbarSearch from '@theme/Navbar/Search';
|
||||
import styles from './styles.module.css';
|
||||
function useNavbarItems() {
|
||||
// TODO temporary casting until ThemeConfig type is improved
|
||||
return useThemeConfig().navbar.items;
|
||||
}
|
||||
function NavbarItems({items}) {
|
||||
return (
|
||||
<>
|
||||
{items.map((item, i) => (
|
||||
<NavbarItem {...item} key={i} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
function NavbarContentLayout({left, right}) {
|
||||
return (
|
||||
<div className="navbar__inner">
|
||||
<div className="navbar__items">{left}</div>
|
||||
<div className="navbar__items navbar__items--right">{right}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default function NavbarContent() {
|
||||
const mobileSidebar = useNavbarMobileSidebar();
|
||||
const items = useNavbarItems();
|
||||
const [leftItems, rightItems] = splitNavbarItems(items);
|
||||
return (
|
||||
<NavbarContentLayout
|
||||
left={
|
||||
// TODO stop hardcoding items?
|
||||
<>
|
||||
{!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
|
||||
<NavbarLogo />
|
||||
<NavbarItems items={leftItems} />
|
||||
</>
|
||||
}
|
||||
right={
|
||||
// TODO stop hardcoding items?
|
||||
// Ask the user to add the respective navbar items => more flexible
|
||||
<>
|
||||
<NavbarItems items={rightItems} />
|
||||
<NavbarColorModeToggle className={styles.colorModeToggle} />
|
||||
<NavbarSearch>
|
||||
<SearchBar />
|
||||
</NavbarSearch>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
/*
|
||||
Hide color mode toggle in small viewports
|
||||
*/
|
||||
@media (max-width: 996px) {
|
||||
.colorModeToggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
|
||||
import IconClose from '@theme/Icon/Close';
|
||||
import NavbarLogo from '@theme/Navbar/Logo';
|
||||
function CloseButton() {
|
||||
const mobileSidebar = useNavbarMobileSidebar();
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="clean-btn navbar-sidebar__close"
|
||||
onClick={() => mobileSidebar.toggle()}>
|
||||
<IconClose color="var(--ifm-color-emphasis-600)" />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
export default function NavbarMobileSidebarHeader() {
|
||||
return (
|
||||
<div className="navbar-sidebar__brand">
|
||||
<NavbarLogo />
|
||||
<CloseButton />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
import {useThemeConfig} from '@docusaurus/theme-common';
|
||||
import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
|
||||
import NavbarItem from '@theme/NavbarItem';
|
||||
import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
|
||||
function useNavbarItems() {
|
||||
// TODO temporary casting until ThemeConfig type is improved
|
||||
return useThemeConfig().navbar.items;
|
||||
}
|
||||
// The primary menu displays the navbar items
|
||||
export default function NavbarMobilePrimaryMenu() {
|
||||
const mobileSidebar = useNavbarMobileSidebar();
|
||||
// TODO how can the order be defined for mobile?
|
||||
// Should we allow providing a different list of items?
|
||||
const items = useNavbarItems();
|
||||
return (
|
||||
<ul className="menu__list">
|
||||
{items.map((item, i) => (
|
||||
<NavbarItem
|
||||
mobile
|
||||
{...item}
|
||||
onClick={() => mobileSidebar.toggle()}
|
||||
key={i}
|
||||
/>
|
||||
))}
|
||||
<NavbarColorModeToggle className='mobile' />
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -1,11 +1,11 @@
|
||||
.searchQueryInput,
|
||||
.searchVersionInput {
|
||||
border-radius: var(--ifm-global-radius);
|
||||
border: 2px solid var(--ifm-toc-border-color);
|
||||
border: 1px solid var(--ifm-toc-border-color);
|
||||
font: var(--ifm-font-size-base) var(--ifm-font-family-base);
|
||||
padding: 0.8rem;
|
||||
width: 100%;
|
||||
background: var(--docsearch-searchbox-focus-background);
|
||||
background: var(--docsearch-searchbox-background);
|
||||
color: var(--docsearch-text-color);
|
||||
margin-bottom: 0.5rem;
|
||||
transition: border var(--ifm-transition-fast) ease;
|
||||
@@ -13,8 +13,9 @@
|
||||
|
||||
.searchQueryInput:focus,
|
||||
.searchVersionInput:focus {
|
||||
border-color: var(--docsearch-primary-color);
|
||||
border-color: var(--docsearch-searchbox-border-color);
|
||||
outline: none;
|
||||
box-shadow: var(--docsearch-searchbox-shadow);
|
||||
}
|
||||
|
||||
.searchQueryInput::placeholder {
|
||||
|
||||
@@ -1,8 +1,174 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import React, {useState, cloneElement, isValidElement, useEffect} from 'react';
|
||||
import clsx from 'clsx';
|
||||
import useIsBrowser from '@docusaurus/useIsBrowser';
|
||||
import {duplicates} from '@docusaurus/theme-common';
|
||||
import {
|
||||
useScrollPositionBlocker,
|
||||
useTabGroupChoice,
|
||||
} from '@docusaurus/theme-common/internal';
|
||||
import styles from './styles.module.css';
|
||||
// A very rough duck type, but good enough to guard against mistakes while
|
||||
// allowing customization
|
||||
function isTabItem(comp) {
|
||||
return 'value' in comp.props;
|
||||
}
|
||||
function TabsComponent(props) {
|
||||
const {
|
||||
lazy,
|
||||
block,
|
||||
defaultValue: defaultValueProp,
|
||||
values: valuesProp,
|
||||
groupId,
|
||||
className,
|
||||
} = props;
|
||||
const children = React.Children.map(props.children, (child) => {
|
||||
if (isValidElement(child) && isTabItem(child)) {
|
||||
return child;
|
||||
}
|
||||
// child.type.name will give non-sensical values in prod because of
|
||||
// minification, but we assume it won't throw in prod.
|
||||
throw new Error(
|
||||
`Docusaurus error: Bad <Tabs> child <${
|
||||
// @ts-expect-error: guarding against unexpected cases
|
||||
typeof child.type === 'string' ? child.type : child.type.name
|
||||
}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`,
|
||||
);
|
||||
});
|
||||
const values =
|
||||
valuesProp ??
|
||||
// Only pick keys that we recognize. MDX would inject some keys by default
|
||||
children.map(({props: {value, label, attributes}}) => ({
|
||||
value,
|
||||
label,
|
||||
attributes,
|
||||
}));
|
||||
const dup = duplicates(values, (a, b) => a.value === b.value);
|
||||
if (dup.length > 0) {
|
||||
throw new Error(
|
||||
`Docusaurus error: Duplicate values "${dup
|
||||
.map((a) => a.value)
|
||||
.join(', ')}" found in <Tabs>. Every value needs to be unique.`,
|
||||
);
|
||||
}
|
||||
// When defaultValueProp is null, don't show a default tab
|
||||
const defaultValue =
|
||||
defaultValueProp === null
|
||||
? defaultValueProp
|
||||
: defaultValueProp ??
|
||||
children.find((child) => child.props.default)?.props.value ??
|
||||
children[0].props.value;
|
||||
if (defaultValue !== null && !values.some((a) => a.value === defaultValue)) {
|
||||
throw new Error(
|
||||
`Docusaurus error: The <Tabs> has a defaultValue "${defaultValue}" but none of its children has the corresponding value. Available values are: ${values
|
||||
.map((a) => a.value)
|
||||
.join(
|
||||
', ',
|
||||
)}. If you intend to show no default tab, use defaultValue={null} instead.`,
|
||||
);
|
||||
}
|
||||
const {tabGroupChoices, setTabGroupChoices} = useTabGroupChoice();
|
||||
const [selectedValue, setSelectedValue] = useState(defaultValue);
|
||||
const tabRefs = [];
|
||||
const {blockElementScrollPositionUntilNextRender} =
|
||||
useScrollPositionBlocker();
|
||||
if (groupId != null) {
|
||||
const relevantTabGroupChoice = tabGroupChoices[groupId];
|
||||
if (
|
||||
relevantTabGroupChoice != null &&
|
||||
relevantTabGroupChoice !== selectedValue &&
|
||||
values.some((value) => value.value === relevantTabGroupChoice)
|
||||
) {
|
||||
setSelectedValue(relevantTabGroupChoice);
|
||||
}
|
||||
}
|
||||
const handleTabChange = (event) => {
|
||||
const newTab = event.currentTarget;
|
||||
const newTabIndex = tabRefs.indexOf(newTab);
|
||||
const newTabValue = values[newTabIndex].value;
|
||||
if (newTabValue !== selectedValue) {
|
||||
blockElementScrollPositionUntilNextRender(newTab);
|
||||
setSelectedValue(newTabValue);
|
||||
if (groupId != null) {
|
||||
setTabGroupChoices(groupId, String(newTabValue));
|
||||
}
|
||||
}
|
||||
};
|
||||
const handleKeydown = (event) => {
|
||||
let focusElement = null;
|
||||
switch (event.key) {
|
||||
case 'ArrowRight': {
|
||||
const nextTab = tabRefs.indexOf(event.currentTarget) + 1;
|
||||
focusElement = tabRefs[nextTab] ?? tabRefs[0];
|
||||
break;
|
||||
}
|
||||
case 'ArrowLeft': {
|
||||
const prevTab = tabRefs.indexOf(event.currentTarget) - 1;
|
||||
focusElement = tabRefs[prevTab] ?? tabRefs[tabRefs.length - 1];
|
||||
break;
|
||||
}
|
||||
default:
|
||||
break;
|
||||
}
|
||||
focusElement?.focus();
|
||||
};
|
||||
return (
|
||||
<div className={clsx('tabs-container', styles.tabList)}>
|
||||
<ul
|
||||
role="tablist"
|
||||
aria-orientation="horizontal"
|
||||
className={clsx(
|
||||
'tabs',
|
||||
{
|
||||
'tabs--block': block,
|
||||
},
|
||||
className,
|
||||
)}>
|
||||
{values.map(({value, label, attributes}) => (
|
||||
<li
|
||||
role="tab"
|
||||
tabIndex={selectedValue === value ? 0 : -1}
|
||||
aria-selected={selectedValue === value}
|
||||
key={value}
|
||||
ref={(tabControl) => tabRefs.push(tabControl)}
|
||||
onKeyDown={handleKeydown}
|
||||
onFocus={handleTabChange}
|
||||
onClick={handleTabChange}
|
||||
{...attributes}
|
||||
className={clsx(
|
||||
'tabs__item',
|
||||
styles.tabItem,
|
||||
attributes?.className,
|
||||
{
|
||||
'tabs__item--active': selectedValue === value,
|
||||
},
|
||||
)}>
|
||||
{label ?? value}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
import Tabs from '@theme-original/Tabs';
|
||||
{lazy ? (
|
||||
cloneElement(
|
||||
children.filter(
|
||||
(tabItem) => tabItem.props.value === selectedValue,
|
||||
)[0],
|
||||
)
|
||||
) : (
|
||||
<div>
|
||||
{children.map((tabItem, i) =>
|
||||
cloneElement(tabItem, {
|
||||
key: i,
|
||||
hidden: tabItem.props.value !== selectedValue,
|
||||
}),
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function TabsWrapper(props) {
|
||||
export default function Tabs(props) {
|
||||
const isBrowser = useIsBrowser();
|
||||
|
||||
useEffect(() => {
|
||||
if (!window.localStorage.getItem('docusaurus.tab.npm2yarn')) {
|
||||
@@ -12,8 +178,13 @@ export default function TabsWrapper(props) {
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className={`tabs-wrapper ${props.wrapperClassName}`}>
|
||||
<Tabs {...props} />
|
||||
<div className={`tabs-wrapper ${props.wrapperClassName || ''} ${props.groupId === 'npm2yarn' ? 'code-tabs' : ''}`}>
|
||||
<TabsComponent
|
||||
// Remount tabs after hydration
|
||||
// Temporary fix for https://github.com/facebook/docusaurus/issues/5653
|
||||
key={String(isBrowser)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
.tabList {
|
||||
margin-bottom: var(--ifm-leading);
|
||||
}
|
||||
|
||||
.tabItem {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function Tooltip ({ children, text, tooltipClassName, ...rest }) {
|
||||
const [show, setShow] = React.useState(false);
|
||||
|
||||
return (
|
||||
<div className={`tooltip-container ${tooltipClassName || ''}`}>
|
||||
<div className={show ? 'tooltip-box visible' : 'tooltip-box'}>
|
||||
{text}
|
||||
</div>
|
||||
<div
|
||||
onMouseEnter={() => setShow(true)}
|
||||
onMouseLeave={() => setShow(false)}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,11 @@
|
||||
const palenightTheme = require("prism-react-renderer/themes/palenight")
|
||||
|
||||
const theme = {
|
||||
...palenightTheme,
|
||||
plain: {
|
||||
color: palenightTheme.plain.color,
|
||||
backgroundColor: '#262626'
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = theme;
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.5 13.375V14.2142C6.50004 14.5426 6.43537 14.8678 6.30968 15.1712C6.184 15.4746 5.99976 15.7503 5.7675 15.9825L5.25 16.5H12.75L12.2325 15.9825C12.0002 15.7503 11.816 15.4746 11.6903 15.1712C11.5646 14.8678 11.5 14.5426 11.5 14.2142V13.375M16.5 3.375V11.5C16.5 11.9973 16.3025 12.4742 15.9508 12.8258C15.5992 13.1775 15.1223 13.375 14.625 13.375H3.375C2.87772 13.375 2.40081 13.1775 2.04917 12.8258C1.69754 12.4742 1.5 11.9973 1.5 11.5V3.375M16.5 3.375C16.5 2.87772 16.3025 2.40081 15.9508 2.04917C15.5992 1.69754 15.1223 1.5 14.625 1.5H3.375C2.87772 1.5 2.40081 1.69754 2.04917 2.04917C1.69754 2.40081 1.5 2.87772 1.5 3.375M16.5 3.375V9C16.5 9.49728 16.3025 9.97419 15.9508 10.3258C15.5992 10.6775 15.1223 10.875 14.625 10.875H3.375C2.87772 10.875 2.40081 10.6775 2.04917 10.3258C1.69754 9.97419 1.5 9.49728 1.5 9V3.375" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1020 B |
Vendored
+3
@@ -0,0 +1,3 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.5 13.375V14.2142C6.50004 14.5426 6.43537 14.8678 6.30968 15.1712C6.184 15.4746 5.99976 15.7503 5.7675 15.9825L5.25 16.5H12.75L12.2325 15.9825C12.0002 15.7503 11.816 15.4746 11.6903 15.1712C11.5646 14.8678 11.5 14.5426 11.5 14.2142V13.375M16.5 3.375V11.5C16.5 11.9973 16.3025 12.4742 15.9508 12.8258C15.5992 13.1775 15.1223 13.375 14.625 13.375H3.375C2.87772 13.375 2.40081 13.1775 2.04917 12.8258C1.69754 12.4742 1.5 11.9973 1.5 11.5V3.375M16.5 3.375C16.5 2.87772 16.3025 2.40081 15.9508 2.04917C15.5992 1.69754 15.1223 1.5 14.625 1.5H3.375C2.87772 1.5 2.40081 1.69754 2.04917 2.04917C1.69754 2.40081 1.5 2.87772 1.5 3.375M16.5 3.375V9C16.5 9.49728 16.3025 9.97419 15.9508 10.3258C15.5992 10.6775 15.1223 10.875 14.625 10.875H3.375C2.87772 10.875 2.40081 10.6775 2.04917 10.3258C1.69754 9.97419 1.5 9.49728 1.5 9V3.375" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1020 B |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 964 B |
+5
@@ -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="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 6.66675V10.0001" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 13.3333H10.0088" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 568 B |
Vendored
BIN
Binary file not shown.
|
After Width: | Height: | Size: 951 B |
Vendored
+5
@@ -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="#C6C6C6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 6.6665V9.99984" stroke="#C6C6C6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 13.3335H10.0088" stroke="#C6C6C6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 567 B |
Vendored
BIN
Binary file not shown.
|
After Width: | Height: | Size: 889 B |
+6
@@ -0,0 +1,6 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.70291 11.7848L4.18457 5.34766H16.6736C17.3175 5.34766 17.7893 5.89045 17.633 6.45189L16.2997 11.242C16.0969 11.9695 15.4084 12.5043 14.5776 12.579L7.83552 13.1848C6.83054 13.2745 5.91162 12.6713 5.70291 11.7848V11.7848Z" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M4.18418 5.34722L3.54123 2.68213H1.83594" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M14.2117 15.7988C13.7978 15.7988 13.4618 16.1349 13.4659 16.5488C13.4659 16.9628 13.8019 17.2988 14.2158 17.2988C14.6298 17.2988 14.9658 16.9628 14.9658 16.5488C14.9638 16.1349 14.6277 15.7988 14.2117 15.7988Z" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7.20104 15.7988C6.78655 15.7988 6.45003 16.1344 6.45414 16.5478C6.45003 16.9632 6.7886 17.2988 7.20309 17.2988C7.61758 17.2988 7.9541 16.9632 7.9541 16.5499C7.9541 16.1344 7.61758 15.7988 7.20104 15.7988Z" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
Vendored
+6
@@ -0,0 +1,6 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.70291 11.7848L4.18457 5.34766H16.6736C17.3175 5.34766 17.7893 5.89045 17.633 6.45189L16.2997 11.242C16.0969 11.9695 15.4084 12.5043 14.5776 12.579L7.83552 13.1848C6.83054 13.2745 5.91162 12.6713 5.70291 11.7848V11.7848Z" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M4.18418 5.34722L3.54123 2.68213H1.83594" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M14.2117 15.7988C13.7978 15.7988 13.4618 16.1349 13.4659 16.5488C13.4659 16.9628 13.8019 17.2988 14.2158 17.2988C14.6298 17.2988 14.9658 16.9628 14.9658 16.5488C14.9638 16.1349 14.6277 15.7988 14.2117 15.7988Z" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7.20104 15.7988C6.78655 15.7988 6.45003 16.1344 6.45414 16.5478C6.45003 16.9632 6.7886 17.2988 7.20309 17.2988C7.61758 17.2988 7.9541 16.9632 7.9541 16.5499C7.9541 16.1344 7.61758 15.7988 7.20104 15.7988Z" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 301 B |
Vendored
BIN
Binary file not shown.
|
After Width: | Height: | Size: 286 B |
Vendored
BIN
Binary file not shown.
|
After Width: | Height: | Size: 298 B |
Vendored
BIN
Binary file not shown.
|
After Width: | Height: | Size: 296 B |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 805 B |
+6
@@ -0,0 +1,6 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.917 4.16675H14.3753C14.7621 4.16675 15.133 4.32283 15.4065 4.60066C15.68 4.8785 15.8337 5.25532 15.8337 5.64823V8.33341M7.08366 4.16675H5.62533C5.23855 4.16675 4.86762 4.32283 4.59413 4.60066C4.32064 4.8785 4.16699 5.25532 4.16699 5.64823V16.0186C4.16699 16.4115 4.32064 16.7883 4.59413 17.0662C4.86762 17.344 5.23855 17.5001 5.62533 17.5001H14.3753C14.7621 17.5001 15.133 17.344 15.4065 17.0662C15.68 16.7883 15.8337 16.4115 15.8337 16.0186V15.0001" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M11.875 2.5H8.125C7.77982 2.5 7.5 2.8731 7.5 3.33333V5C7.5 5.46024 7.77982 5.83333 8.125 5.83333H11.875C12.2202 5.83333 12.5 5.46024 12.5 5V3.33333C12.5 2.8731 12.2202 2.5 11.875 2.5Z" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M17.5 11.6667H10" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12.5 9.16675L10 11.6667L12.5 14.1667" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 838 B |
+6
@@ -0,0 +1,6 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.917 4.16675H14.3753C14.7621 4.16675 15.133 4.32283 15.4065 4.60066C15.68 4.8785 15.8337 5.25532 15.8337 5.64823V8.33341M7.08366 4.16675H5.62533C5.23855 4.16675 4.86762 4.32283 4.59413 4.60066C4.32064 4.8785 4.16699 5.25532 4.16699 5.64823V16.0186C4.16699 16.4115 4.32064 16.7883 4.59413 17.0662C4.86762 17.344 5.23855 17.5001 5.62533 17.5001H14.3753C14.7621 17.5001 15.133 17.344 15.4065 17.0662C15.68 16.7883 15.8337 16.4115 15.8337 16.0186V15.0001" stroke="#C6C6C6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M11.875 2.5H8.125C7.77982 2.5 7.5 2.8731 7.5 3.33333V5C7.5 5.46024 7.77982 5.83333 8.125 5.83333H11.875C12.2202 5.83333 12.5 5.46024 12.5 5V3.33333C12.5 2.8731 12.2202 2.5 11.875 2.5Z" stroke="#C6C6C6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M17.5 11.6666H10" stroke="#C6C6C6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12.5 9.16663L10 11.6666L12.5 14.1666" stroke="#C6C6C6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
+3
@@ -0,0 +1,3 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.1775 12.2533L6.5 14.625L5.8225 12.2533C5.64739 11.6407 5.31908 11.0828 4.86855 10.6323C4.41802 10.1818 3.86012 9.85344 3.2475 9.67833L0.875 9L3.24667 8.3225C3.85928 8.14739 4.41718 7.81908 4.86772 7.36855C5.31825 6.91802 5.64656 6.36012 5.82167 5.7475L6.5 3.375L7.1775 5.74667C7.35261 6.35928 7.68092 6.91718 8.13145 7.36772C8.58198 7.81825 9.13988 8.14656 9.7525 8.32167L12.125 9L9.75333 9.6775C9.14072 9.85261 8.58282 10.1809 8.13228 10.6315C7.68175 11.082 7.35344 11.6399 7.17833 12.2525L7.1775 12.2533ZM14.2158 6.2625L14 7.125L13.7842 6.2625C13.6606 5.76799 13.405 5.31635 13.0447 4.95586C12.6843 4.59537 12.2328 4.33958 11.7383 4.21583L10.875 4L11.7383 3.78417C12.2328 3.66042 12.6843 3.40463 13.0447 3.04414C13.405 2.68365 13.6606 2.23201 13.7842 1.7375L14 0.875L14.2158 1.7375C14.3394 2.23211 14.5952 2.68382 14.9557 3.04432C15.3162 3.40482 15.7679 3.66056 16.2625 3.78417L17.125 4L16.2625 4.21583C15.7679 4.33944 15.3162 4.59518 14.9557 4.95568C14.5952 5.31618 14.3394 5.76789 14.2158 6.2625ZM13.0783 16.1392L12.75 17.125L12.4217 16.1392C12.3296 15.863 12.1745 15.6121 11.9687 15.4063C11.7629 15.2005 11.512 15.0454 11.2358 14.9533L10.25 14.625L11.2358 14.2967C11.512 14.2046 11.7629 14.0495 11.9687 13.8437C12.1745 13.6379 12.3296 13.387 12.4217 13.1108L12.75 12.125L13.0783 13.1108C13.1704 13.387 13.3255 13.6379 13.5313 13.8437C13.7371 14.0495 13.988 14.2046 14.2642 14.2967L15.25 14.625L14.2642 14.9533C13.988 15.0454 13.7371 15.2005 13.5313 15.4063C13.3255 15.6121 13.1704 15.863 13.0783 16.1392Z" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user