chore: move docs into the config-sync repo
Boaz Poolman
parent
10ef97a4d4
commit
6c65d64b81
|
|
@ -0,0 +1,52 @@
|
|||
name: Deploy
|
||||
|
||||
on:
|
||||
workflow_dispatch:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
|
||||
jobs:
|
||||
deploy:
|
||||
name: Deploy
|
||||
runs-on: ubuntu-latest
|
||||
environment:
|
||||
name: docs.pluginpal.io
|
||||
url: https://docs.pluginpal.io
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- name: Set up Docker
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: '14'
|
||||
|
||||
- name: Build a Docker image
|
||||
run: |
|
||||
docker build \
|
||||
-t pluginpal-docs:latest .
|
||||
docker save -o pluginpal-docs-latest.tar pluginpal-docs:latest
|
||||
|
||||
- name: Transfer the Docker image to the Dokku server
|
||||
uses: appleboy/scp-action@v0.1.3
|
||||
with:
|
||||
host: ${{ secrets.SSH_HOST }}
|
||||
username: ${{ secrets.SSH_CI_USERNAME }}
|
||||
password: ${{ secrets.SSH_CI_PASSWORD }}
|
||||
source: pluginpal-docs-latest.tar
|
||||
target: /var/lib/dokku/data/storage/docs/docker-images
|
||||
|
||||
- name: Deploy the Dokku app based on the Docker image
|
||||
uses: appleboy/ssh-action@v0.1.10
|
||||
with:
|
||||
host: ${{ secrets.SSH_HOST }}
|
||||
username: ${{ secrets.SSH_CI_USERNAME }}
|
||||
password: ${{ secrets.SSH_CI_PASSWORD }}
|
||||
script_stop: true
|
||||
script: |
|
||||
sudo docker load -i /var/lib/dokku/data/storage/docs/docker-images/pluginpal-docs-latest.tar
|
||||
DOCS_LATEST_IMAGE=$(sudo docker images --format "{{.ID}}" pluginpal-docs:latest)
|
||||
sudo docker tag pluginpal-docs:latest pluginpal-docs:$DOCS_LATEST_IMAGE
|
||||
dokku git:from-image docs pluginpal-docs:$DOCS_LATEST_IMAGE
|
||||
sudo docker system prune --all --force
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
# Dependencies
|
||||
/node_modules
|
||||
|
||||
# Production
|
||||
/build
|
||||
|
||||
# Generated files
|
||||
.docusaurus
|
||||
.cache-loader
|
||||
|
||||
# Misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
# syntax=docker/dockerfile:1
|
||||
|
||||
# Stage 1: Base image.
|
||||
## Start with a base image containing NodeJS so we can build Docusaurus.
|
||||
FROM node:lts as base
|
||||
## Disable colour output from yarn to make logs easier to read.
|
||||
ENV FORCE_COLOR=0
|
||||
## Enable corepack.
|
||||
RUN corepack enable
|
||||
## Set the working directory to `/opt/docusaurus`.
|
||||
WORKDIR /opt/docusaurus
|
||||
|
||||
# Stage 2b: Production build mode.
|
||||
FROM base as prod
|
||||
## Set the working directory to `/opt/docusaurus`.
|
||||
WORKDIR /opt/docusaurus
|
||||
## Copy over the source code.
|
||||
COPY . /opt/docusaurus/
|
||||
## Install dependencies with `--immutable` to ensure reproducibility.
|
||||
RUN yarn install --immutable
|
||||
## Build the static site.
|
||||
RUN yarn build
|
||||
|
||||
# Stage 3a: Serve with `docusaurus serve`.
|
||||
FROM prod as serve
|
||||
## Expose the port that Docusaurus will run on.
|
||||
EXPOSE 3000
|
||||
## Run the production server.
|
||||
CMD ["yarn", "serve", "--host", "0.0.0.0", "--no-open"]
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
# Website
|
||||
|
||||
This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
|
||||
|
||||
### Installation
|
||||
|
||||
```
|
||||
$ yarn
|
||||
```
|
||||
|
||||
### Local Development
|
||||
|
||||
```
|
||||
$ yarn start
|
||||
```
|
||||
|
||||
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
|
||||
|
||||
### Build
|
||||
|
||||
```
|
||||
$ yarn build
|
||||
```
|
||||
|
||||
This command generates static content into the `build` directory and can be served using any static contents hosting service.
|
||||
|
||||
### Deployment
|
||||
|
||||
Using SSH:
|
||||
|
||||
```
|
||||
$ USE_SSH=true yarn deploy
|
||||
```
|
||||
|
||||
Not using SSH:
|
||||
|
||||
```
|
||||
$ GIT_USER=<Your GitHub username> yarn deploy
|
||||
```
|
||||
|
||||
If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
module.exports = {
|
||||
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
|
||||
};
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
slug: first-blog-post
|
||||
title: First Blog Post
|
||||
authors: [slorber, yangshun]
|
||||
tags: [hola, docusaurus]
|
||||
---
|
||||
|
||||
Lorem ipsum dolor sit amet...
|
||||
|
||||
<!-- truncate -->
|
||||
|
||||
...consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
---
|
||||
slug: long-blog-post
|
||||
title: Long Blog Post
|
||||
authors: yangshun
|
||||
tags: [hello, docusaurus]
|
||||
---
|
||||
|
||||
This is the summary of a very long blog post,
|
||||
|
||||
Use a `<!--` `truncate` `-->` comment to limit blog post size in the list view.
|
||||
|
||||
<!-- truncate -->
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
---
|
||||
slug: mdx-blog-post
|
||||
title: MDX Blog Post
|
||||
authors: [slorber]
|
||||
tags: [docusaurus]
|
||||
---
|
||||
|
||||
Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).
|
||||
|
||||
:::tip
|
||||
|
||||
Use the power of React to create interactive blog posts.
|
||||
|
||||
:::
|
||||
|
||||
{/* truncate */}
|
||||
|
||||
For example, use JSX to create an interactive button:
|
||||
|
||||
```js
|
||||
<button onClick={() => alert('button clicked!')}>Click me!</button>
|
||||
```
|
||||
|
||||
<button onClick={() => alert('button clicked!')}>Click me!</button>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
|
|
@ -0,0 +1,29 @@
|
|||
---
|
||||
slug: welcome
|
||||
title: Welcome
|
||||
authors: [slorber, yangshun]
|
||||
tags: [facebook, hello, docusaurus]
|
||||
---
|
||||
|
||||
[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).
|
||||
|
||||
Here are a few tips you might find useful.
|
||||
|
||||
<!-- truncate -->
|
||||
|
||||
Simply add Markdown files (or folders) to the `blog` directory.
|
||||
|
||||
Regular blog authors can be added to `authors.yml`.
|
||||
|
||||
The blog post date can be extracted from filenames, such as:
|
||||
|
||||
- `2019-05-30-welcome.md`
|
||||
- `2019-05-30-welcome/index.md`
|
||||
|
||||
A blog post folder can be convenient to co-locate blog post images:
|
||||
|
||||
|
||||
|
||||
The blog supports tags as well!
|
||||
|
||||
**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
yangshun:
|
||||
name: Yangshun Tay
|
||||
title: Front End Engineer @ Facebook
|
||||
url: https://github.com/yangshun
|
||||
image_url: https://github.com/yangshun.png
|
||||
page: true
|
||||
socials:
|
||||
x: yangshunz
|
||||
github: yangshun
|
||||
|
||||
slorber:
|
||||
name: Sébastien Lorber
|
||||
title: Docusaurus maintainer
|
||||
url: https://sebastienlorber.com
|
||||
image_url: https://github.com/slorber.png
|
||||
page:
|
||||
# customize the url of the author page at /blog/authors/<permalink>
|
||||
permalink: '/all-sebastien-lorber-articles'
|
||||
socials:
|
||||
x: sebastienlorber
|
||||
linkedin: sebastienlorber
|
||||
github: slorber
|
||||
newsletter: https://thisweekinreact.com
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
facebook:
|
||||
label: Facebook
|
||||
permalink: /facebook
|
||||
description: Facebook tag description
|
||||
|
||||
hello:
|
||||
label: Hello
|
||||
permalink: /hello
|
||||
description: Hello tag description
|
||||
|
||||
docusaurus:
|
||||
label: Docusaurus
|
||||
permalink: /docusaurus
|
||||
description: Docusaurus tag description
|
||||
|
||||
hola:
|
||||
label: Hola
|
||||
permalink: /hola
|
||||
description: Hola tag description
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
---
|
||||
sidebar_label: 'Plugin config types'
|
||||
displayed_sidebar: configSyncSidebar
|
||||
slug: /api/plugin-config-types
|
||||
---
|
||||
|
||||
# Plugin config types
|
||||
|
||||
When you're writing a plugin, which registers a content type, you might want to consider that content type as a config type as defined in the Config Sync specification.
|
||||
|
||||
## Register a config type programatically
|
||||
|
||||
You can register a config type by adding some code to the register function of your plugin.
|
||||
|
||||
```md title="register.js"
|
||||
// Register the config type when using the config-sync plugin.
|
||||
if (strapi.plugin('config-sync')) {
|
||||
if (!strapi.plugin('config-sync').pluginTypes) {
|
||||
strapi.plugin('config-sync').pluginTypes = [];
|
||||
}
|
||||
|
||||
strapi.plugin('config-sync').pluginTypes.push({
|
||||
configName: 'url-pattern',
|
||||
queryString: 'plugin::webtools.url-pattern',
|
||||
uid: 'code',
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
If you want to read more about what the different values of a config type actually mean please read the in depth [custom types](/config-sync/config-types#custom-types) docs
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
sidebar_label: 'Custom types'
|
||||
displayed_sidebar: configSyncSidebar
|
||||
slug: /configuration/custom-types
|
||||
---
|
||||
|
||||
# Custom types
|
||||
|
||||
With this setting you can register your own custom config types. This is an array which expects objects with at least the `configName`, `queryString` and `uid` properties. Read more about registering custom types in the [Custom config types](/config-sync/config-types#custom-types) documentation.
|
||||
|
||||
| Name | Details |
|
||||
| ---- | ------- |
|
||||
| Key | `customTypes` |
|
||||
| Required | false |
|
||||
| Type | array |
|
||||
| Default | `[]` |
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
sidebar_label: 'Excluded config'
|
||||
displayed_sidebar: configSyncSidebar
|
||||
slug: /configuration/excluded-config
|
||||
---
|
||||
|
||||
# Excluded config
|
||||
|
||||
Specify the names of configs you want to exclude from the syncing process. By default the API tokens for users-permissions, which are stored in core_store, are excluded. This setting expects the config names to comply with the naming convention.
|
||||
|
||||
| Name | Details |
|
||||
| ---- | ------- |
|
||||
| Key | `excludedConfig` |
|
||||
| Required | false |
|
||||
| Type | array |
|
||||
| Default | `['core-store.plugin_users-permissions_grant', 'core-store.plugin_upload_metrics', 'core-store.strapi_content_types_schema', 'core-store.ee_information',]` |
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
---
|
||||
sidebar_label: 'Excluded types'
|
||||
displayed_sidebar: configSyncSidebar
|
||||
slug: /configuration/excluded-types
|
||||
---
|
||||
|
||||
# Excluded types
|
||||
|
||||
This setting will exclude all the config from a given type from the syncing process. The config types are specified by the `configName` of the type.
|
||||
|
||||
For example:
|
||||
|
||||
```
|
||||
excludedTypes: ['admin-role']
|
||||
```
|
||||
|
||||
| Name | Details |
|
||||
| ---- | ------- |
|
||||
| Key | `excludedTypes` |
|
||||
| Required | false |
|
||||
| Type | array |
|
||||
| Default | `[]` |
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
---
|
||||
sidebar_label: 'Import on bootstrap'
|
||||
displayed_sidebar: configSyncSidebar
|
||||
slug: /configuration/import-on-bootstrap
|
||||
---
|
||||
|
||||
# Import on bootstrap
|
||||
|
||||
Allows you to let the config be imported automaticly when strapi is bootstrapping (on `strapi start`).
|
||||
|
||||
:::danger
|
||||
This setting can't be used locally and should be handled very carefully as it can unintendedly overwrite the changes in your database. **PLEASE USE WITH CARE**.
|
||||
:::
|
||||
|
||||
| Name | Details |
|
||||
| ---- | ------- |
|
||||
| Key | `importOnBootstrap` |
|
||||
| Required | false |
|
||||
| Type | bool |
|
||||
| Default | `false` |
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
---
|
||||
sidebar_label: 'Introduction'
|
||||
displayed_sidebar: configSyncSidebar
|
||||
slug: /configuration
|
||||
---
|
||||
|
||||
# 🔧 Configuration
|
||||
The settings of the plugin can be overridden in the `config/plugins.js` file.
|
||||
In the example below you can see how, and also what the default settings are.
|
||||
|
||||
```md title="config/plugins.js"
|
||||
module.exports = ({ env }) => ({
|
||||
// ...
|
||||
'config-sync': {
|
||||
enabled: true,
|
||||
config: {
|
||||
syncDir: "config/sync/",
|
||||
minify: false,
|
||||
soft: false,
|
||||
importOnBootstrap: false,
|
||||
customTypes: [],
|
||||
excludedTypes: [],
|
||||
excludedConfig: [
|
||||
"core-store.plugin_users-permissions_grant",
|
||||
"core-store.plugin_upload_metrics",
|
||||
"core-store.strapi_content_types_schema",
|
||||
"core-store.ee_information",
|
||||
],
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
sidebar_label: 'Minify'
|
||||
displayed_sidebar: configSyncSidebar
|
||||
slug: /configuration/minify
|
||||
---
|
||||
|
||||
# Minify
|
||||
|
||||
When enabled all the exported JSON files will be minified.
|
||||
|
||||
| Name | Details |
|
||||
| ---- | ------- |
|
||||
| Key | `minify` |
|
||||
| Required | false |
|
||||
| Type | bool |
|
||||
| Default | `false` |
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
sidebar_label: 'Soft'
|
||||
displayed_sidebar: configSyncSidebar
|
||||
slug: /configuration/soft
|
||||
---
|
||||
|
||||
# Soft
|
||||
|
||||
When enabled the import action will be limited to only create new entries. Entries to be deleted, or updated will be skipped from the import process and will remain in it's original state.
|
||||
|
||||
| Name | Details |
|
||||
| ---- | ------- |
|
||||
| Key | `soft` |
|
||||
| Required | false |
|
||||
| Type | bool |
|
||||
| Default | `false` |
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
sidebar_label: 'Sync dir'
|
||||
displayed_sidebar: configSyncSidebar
|
||||
slug: /configuration/sync-dir
|
||||
---
|
||||
|
||||
# Sync dir
|
||||
|
||||
The path for reading and writing the sync files.
|
||||
|
||||
| Name | Details |
|
||||
| ---- | ------- |
|
||||
| Key | `syncDir` |
|
||||
| Required | true |
|
||||
| Type | string |
|
||||
| Default | `config/sync/` |
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
sidebar_label: 'Admin GUI'
|
||||
displayed_sidebar: configSyncSidebar
|
||||
slug: /admin-gui
|
||||
---
|
||||
|
||||
# 🖥️ Admin panel (GUI)
|
||||
This plugin ships with a React app which can be accessed from the settings page in Strapi admin panel. On this page you can pretty much do the same as you can from the CLI. You can import, export and see the difference between the config as found in the sync directory, and the config as found in the database.
|
||||
|
||||
**Pro tip:**
|
||||
By clicking on one of the items in the diff table you can see the exact difference between sync dir and database in a git-style diff viewer.
|
||||
|
||||
<img src="/img/assets/config-sync/admin-diff-viewer.png" alt="Config diff in admin" />
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
---
|
||||
sidebar_label: 'CLI'
|
||||
displayed_sidebar: configSyncSidebar
|
||||
slug: /cli
|
||||
---
|
||||
|
||||
# 🔌 Command line interface (CLI)
|
||||
|
||||
Add the `config-sync` command as a script to the `package.json` of your Strapi project:
|
||||
|
||||
```
|
||||
"scripts": {
|
||||
// ...
|
||||
"cs": "config-sync"
|
||||
},
|
||||
```
|
||||
|
||||
You can now run all the `config-sync` commands like this:
|
||||
|
||||
<Tabs groupId="yarn-npm">
|
||||
<TabItem value="yarn" label="Yarn">
|
||||
```
|
||||
yarn cs --help
|
||||
```
|
||||
</TabItem>
|
||||
<TabItem value="npm" label="NPM">
|
||||
```
|
||||
npm run cs -- --help
|
||||
```
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
## ⬆️ Import ⬇️ Export
|
||||
|
||||
> _Command:_ `import` _Alias:_ `i`
|
||||
>
|
||||
> _Command:_ `export` _Alias:_ `e`
|
||||
|
||||
These commands are used to sync the config in your Strapi project.
|
||||
|
||||
_Example:_
|
||||
|
||||
<Tabs groupId="yarn-npm">
|
||||
<TabItem value="yarn" label="Yarn">
|
||||
```
|
||||
yarn cs import
|
||||
yarn cs export
|
||||
```
|
||||
</TabItem>
|
||||
<TabItem value="npm" label="NPM">
|
||||
```
|
||||
npm run cs import
|
||||
npm run cs export
|
||||
```
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
:::info
|
||||
When you're using `npm` to run these commands, please note that you need an extra `--` to forward the flags to the script.
|
||||
More information about this topic can be found on the <a href="https://docs.npmjs.com/cli/commands/npm-run-script">NPM documentation</a>.
|
||||
|
||||
Example:
|
||||
```
|
||||
npm run cs import -- --yes
|
||||
```
|
||||
:::
|
||||
|
||||
### Flag: `-y`, `--yes`
|
||||
|
||||
Use this flag to skip the confirm prompt and go straight to syncing the config.
|
||||
|
||||
```bash
|
||||
[command] --yes
|
||||
```
|
||||
|
||||
### Flag: `-t`, `--type`
|
||||
|
||||
Use this flag to specify the type of config you want to sync.
|
||||
|
||||
```bash
|
||||
[command] --type user-role
|
||||
```
|
||||
|
||||
### Flag: `-p`, `--partial`
|
||||
|
||||
Use this flag to sync a specific set of configs by giving the CLI a comma-separated string of config names.
|
||||
|
||||
```bash
|
||||
[command] --partial user-role.public,i18n-locale.en
|
||||
```
|
||||
|
||||
### Flag: `-f`, `--force`
|
||||
|
||||
If you're using the soft setting to gracefully import config, you can use this flag to ignore the setting for the current command and forcefully import all changes anyway.
|
||||
|
||||
```bash
|
||||
[command] --force
|
||||
```
|
||||
|
||||
## ↔️ Diff
|
||||
|
||||
> _Command:_ `diff` | _Alias:_ `d`
|
||||
|
||||
This command is used to see the difference between the config as found in the sync directory, and the config as found in the database.
|
||||
|
||||
_Example:_
|
||||
|
||||
<Tabs groupId="yarn-npm">
|
||||
<TabItem value="yarn" label="Yarn">
|
||||
```
|
||||
yarn cs diff
|
||||
```
|
||||
</TabItem>
|
||||
<TabItem value="npm" label="NPM">
|
||||
```
|
||||
npm run cs diff
|
||||
```
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
### Argument: `<single>`
|
||||
|
||||
Add a single config name as the argument of the `diff` command to see the difference of that single file in a git-style diff viewer.
|
||||
|
||||
_Example:_
|
||||
|
||||
<Tabs groupId="yarn-npm">
|
||||
<TabItem value="yarn" label="Yarn">
|
||||
```
|
||||
yarn cs diff user-role.public
|
||||
```
|
||||
</TabItem>
|
||||
<TabItem value="npm" label="NPM">
|
||||
```
|
||||
npm run cs diff user-role.public
|
||||
```
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
---
|
||||
sidebar_label: 'Config Types'
|
||||
displayed_sidebar: configSyncSidebar
|
||||
slug: /config-types
|
||||
---
|
||||
|
||||
# 🚀 Config types
|
||||
|
||||
By default the plugin will track 4 (official) types.
|
||||
|
||||
To track your own custom types you can register them by setting some plugin config.
|
||||
|
||||
## Default types
|
||||
|
||||
These 4 types are by default registered in the sync process.
|
||||
|
||||
### Admin role
|
||||
|
||||
> Config name: `admin-role` | UID: `code` | Query string: `admin::role`
|
||||
|
||||
### User role
|
||||
|
||||
> Config name: `user-role` | UID: `type` | Query string: `plugin::users-permissions.role`
|
||||
|
||||
### Core store
|
||||
|
||||
> Config name: `core-store` | UID: `key` | Query string: `strapi::core-store`
|
||||
|
||||
### I18n locale
|
||||
|
||||
> Config name: `i18n-locale` | UID: `code` | Query string: `plugin::i18n.locale`
|
||||
|
||||
## Custom types
|
||||
|
||||
Your custom types can be registered through the `customTypes` plugin config. This is a setting that can be set in the `config/plugins.js` file in your project.
|
||||
|
||||
_Read more about the `config/plugins.js` file [here](/config-sync/configuration)._
|
||||
|
||||
You can register a type by giving the `customTypes` array an object which contains at least the following 3 properties:
|
||||
|
||||
```
|
||||
customTypes: [{
|
||||
configName: 'webhook',
|
||||
queryString: 'webhook',
|
||||
uid: 'name',
|
||||
}],
|
||||
```
|
||||
|
||||
_The example above will register the Strapi webhook type._
|
||||
|
||||
### Config name
|
||||
|
||||
The name of the config type. This value will be used as the first part of the filename for all config of this type. It should be unique from the other types and is preferably written in kebab-case.
|
||||
|
||||
##### Key: `configName`
|
||||
|
||||
> `required:` YES | `type:` string
|
||||
|
||||
### Query string
|
||||
|
||||
This is the query string of the type. Each type in Strapi has its own query string you can use to programatically preform CRUD actions on the entries of the type. Often for custom types in Strapi the format is something like `api::custom-api.custom-type`.
|
||||
|
||||
##### Key: `queryString`
|
||||
|
||||
> `required:` YES | `type:` string
|
||||
|
||||
### UID
|
||||
|
||||
The UID represents a field on the registered type. The value of this field will act as a unique identifier to identify the entries across environments. Therefore it should be unique and preferably un-editable after initial creation.
|
||||
|
||||
Mind that you can not use an auto-incremental value like the `id` as auto-increment does not play nice when you try to match entries across different databases.
|
||||
|
||||
If you do not have a single unique value, you can also pass in an array of keys for a combined uid key. This is for example the case for all content types which use i18n features (An example config would be `uid: ['productId', 'locale']`).
|
||||
|
||||
##### Key: `uid`
|
||||
|
||||
> `required:` YES | `type:` string | string[]
|
||||
|
||||
### Relations
|
||||
|
||||
The relations array specifies the relations you want to include in the sync process.
|
||||
This feature is used to sync the relations between `roles` and `permissions`. See https://github.com/boazpoolman/strapi-plugin-config-sync/blob/master/server/config/types.js#L16.
|
||||
|
||||
Example:
|
||||
```
|
||||
{
|
||||
configName: 'admin-role',
|
||||
queryString: 'admin::role',
|
||||
uid: 'code',
|
||||
relations: [{
|
||||
queryString: 'admin::permission',
|
||||
relationName: 'permissions',
|
||||
parentName: 'role',
|
||||
relationSortFields: ['action', 'subject'],
|
||||
}],
|
||||
},
|
||||
```
|
||||
|
||||
##### Key: `relations`
|
||||
|
||||
> `required:` NO | `type:` array
|
||||
|
||||
### Components
|
||||
|
||||
This property can accept an array of component names from the type. Strapi Components can be included in the export/import process. With "." nested components can also be included in the process.
|
||||
```
|
||||
customTypes: [{
|
||||
configName: 'webhook',
|
||||
queryString: 'webhook',
|
||||
uid: 'name',
|
||||
components: ['ParentComponentA', 'ParentComponentA.ChildComponent', 'ParentComponentB']
|
||||
}],
|
||||
```
|
||||
|
||||
##### Key: `components`
|
||||
|
||||
> `required:` NO | `type:` array
|
||||
|
||||
### JSON fields
|
||||
|
||||
This property can accept an array of field names from the type. It is meant to specify the JSON fields on the type so the plugin can better format the field values when calculating the config difference.
|
||||
|
||||
##### Key: `jsonFields`
|
||||
|
||||
> `required:` NO | `type:` array
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
---
|
||||
sidebar_label: 'Installation'
|
||||
displayed_sidebar: configSyncSidebar
|
||||
slug: /
|
||||
---
|
||||
|
||||
# ⏳ Installation
|
||||
|
||||
:::prerequisites
|
||||
Complete installation requirements are the exact same as for Strapi itself and can be found in the Strapi documentation.
|
||||
|
||||
**Supported Strapi versions:**
|
||||
|
||||
Strapi v5 use `strapi-plugin-config-sync@^3`
|
||||
|
||||
Strapi v4 use `strapi-plugin-config-sync@^1`
|
||||
|
||||
:::
|
||||
|
||||
Install the plugin in your Strapi project.
|
||||
|
||||
<Tabs groupId="yarn-npm">
|
||||
<TabItem value="yarn" label="Yarn">
|
||||
```
|
||||
yarn add strapi-plugin-config-sync
|
||||
```
|
||||
</TabItem>
|
||||
<TabItem value="npm" label="NPM">
|
||||
```
|
||||
npm install strapi-plugin-config-sync --save
|
||||
```
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
Add the export path to the `watchIgnoreFiles` list in the `config/admin.js` file.
|
||||
This way your app won't reload when you export the config in development.
|
||||
|
||||
```md title="config/admin.js"
|
||||
module.exports = ({ env }) => ({
|
||||
// ...
|
||||
watchIgnoreFiles: [
|
||||
'**/config/sync/**',
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
After successful installation you have to rebuild the admin UI so it'll include this plugin. To rebuild and restart Strapi run:
|
||||
|
||||
<Tabs groupId="yarn-npm">
|
||||
<TabItem value="yarn" label="Yarn">
|
||||
```
|
||||
yarn build
|
||||
yarn develop
|
||||
```
|
||||
</TabItem>
|
||||
<TabItem value="npm" label="NPM">
|
||||
```
|
||||
npm run build
|
||||
npm run develop
|
||||
```
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
The **Config Sync** plugin should now appear in the **Settings** section of your Strapi app.
|
||||
|
||||
To start tracking your config changes you have to make the first export. This will dump all your configuration data to the `/config/sync` directory. You can export either through [the CLI](/config-sync/cli) or [Strapi admin panel](/config-sync/admin-gui)
|
||||
|
||||
Enjoy 🎉
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
---
|
||||
sidebar_label: 'Motivation'
|
||||
displayed_sidebar: configSyncSidebar
|
||||
slug: /motivation
|
||||
---
|
||||
|
||||
# 💡 Motivation
|
||||
|
||||
In Strapi we come across what I would call config types. These are models of which the records are stored in our database, just like content types. Though the big difference here is that your code ofter relies on the database records of these types.
|
||||
|
||||
Having said that, it makes sense that these records can be exported, added to git, and be migrated across environments. This way we can make sure we have all the data our code relies on, on each environment.
|
||||
|
||||
Examples of these types are:
|
||||
|
||||
- Admin roles _(admin::role)_
|
||||
- User roles _(plugin::users-permissions.role)_
|
||||
- Admin settings _(strapi::core-store)_
|
||||
- I18n locale _(plugin::i18n.locale)_
|
||||
|
||||
This plugin gives you the tools to sync this data. You can export the data as JSON files on one env, and import them on every other env. By writing this data as JSON files you can easily track them in your version control system (git).
|
||||
|
||||
_With great power comes great responsibility - Uncle Ben_
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
sidebar_label: 'Naming convention'
|
||||
displayed_sidebar: configSyncSidebar
|
||||
slug: /naming-convention
|
||||
---
|
||||
|
||||
# 🔍 Naming convention
|
||||
All the config files written in the sync directory have the same naming convention. It goes as follows:
|
||||
|
||||
[config-type].[identifier].json
|
||||
|
||||
- `config-type` - Corresponds to the `configName` of the config type.
|
||||
- `identifier` - Corresponds to the value of the `uid` field of the config type.
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
---
|
||||
sidebar_label: 'Workflow'
|
||||
displayed_sidebar: configSyncSidebar
|
||||
slug: /workflow
|
||||
---
|
||||
|
||||
# ⌨️ Usage / Workflow
|
||||
This plugin works best when you use `git` for the version control of your Strapi project.
|
||||
|
||||
_The following workflows are assuming you're using `git`._
|
||||
|
||||
### Intro
|
||||
All database records tracked with this plugin will be exported to JSON files. Once exported each change to the file or the record will be tracked. Meaning you can now do one of two things:
|
||||
|
||||
- Change the file(s), and run an import. You have now imported from filesystem -> database.
|
||||
- Change the record(s), and run an export. You have now exported from database -> filesystem.
|
||||
|
||||
### Local development
|
||||
When building a new feature locally for your Strapi project you'd use the following workflow:
|
||||
|
||||
- Build the feature.
|
||||
- Export the config.
|
||||
- Commit and push the files to git.
|
||||
|
||||
### Deployment
|
||||
When deploying the newly created feature - to either a server, or a co-worker's machine - you'd use the following workflow:
|
||||
|
||||
- Pull the latest file changes to the environment.
|
||||
- (Re)start your Strapi instance.
|
||||
- Import the config.
|
||||
|
||||
## Production deployment
|
||||
The production deployment will be the same as a regular deployment. You just have to be careful before running the import. Ideally making sure the are no open changes before you pull the new code to the environment.
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
sidebar_label: 'Generic update'
|
||||
displayed_sidebar: configSyncSidebar
|
||||
slug: /upgrading/generic-update
|
||||
---
|
||||
|
||||
# Updating Config Sync
|
||||
|
||||
We are always working to make Config Sync better by fixing bugs and introducing new features. These changes will be released as minor or patch versions as defined in the Semantic Versioning specification.
|
||||
|
||||
## Bump a minor/patch version
|
||||
|
||||
When you're updating Config Sync you'll have to follow these steps:
|
||||
|
||||
1. Make sure there are no config changes before starting. Either export or import all staged changes.
|
||||
2. Update the version of the `strapi-plugin-config-sync` package in your `package.json` using your package manager of choice (yarn/npm/pnpm)
|
||||
3. After you've bumped the version make sure to export any new changes that are now shown. It is possible that new configs are introduced, or old ones are updated/removed.
|
||||
4. You're now ready to push these changes an commit them to your source control!
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
import {themes as prismThemes} from 'prism-react-renderer';
|
||||
import type {Config} from '@docusaurus/types';
|
||||
import type * as Preset from '@docusaurus/preset-classic';
|
||||
|
||||
const config: Config = {
|
||||
title: 'Pluginpal Documentation',
|
||||
tagline: "All of Pluginpal's plugin documentation in one place",
|
||||
favicon: 'img/favicon.jpg',
|
||||
|
||||
plugins: [
|
||||
'docusaurus-plugin-sass',
|
||||
],
|
||||
|
||||
// Set the production url of your site here
|
||||
url: 'https://docs.pluginpal.io',
|
||||
// Set the /<baseUrl>/ pathname under which your site is served
|
||||
// For GitHub pages deployment, it is often '/<projectName>/'
|
||||
baseUrl: '/',
|
||||
|
||||
// GitHub pages deployment config.
|
||||
// If you aren't using GitHub pages, you don't need these.
|
||||
organizationName: 'pluginpal', // Usually your GitHub org/user name.
|
||||
|
||||
onBrokenLinks: 'throw',
|
||||
onBrokenMarkdownLinks: 'warn',
|
||||
|
||||
// Even if you don't use internationalization, you can use this field to set
|
||||
// useful metadata like html lang. For example, if your site is Chinese, you
|
||||
// may want to replace "en" with "zh-Hans".
|
||||
i18n: {
|
||||
defaultLocale: 'en',
|
||||
locales: ['en'],
|
||||
},
|
||||
|
||||
// themes: ['@docusaurus/theme-live-codeblock', '@docusaurus/theme-mermaid'],
|
||||
|
||||
presets: [
|
||||
[
|
||||
'classic',
|
||||
{
|
||||
docs: {
|
||||
routeBasePath: '/',
|
||||
sidebarPath: './sidebars.ts',
|
||||
// Please change this to your repo.
|
||||
// Remove this to remove the "edit this page" links.
|
||||
editUrl:
|
||||
'https://github.com/pluginpal/docs/tree/main/',
|
||||
admonitions: {
|
||||
keywords: [
|
||||
// Admonitions defaults
|
||||
'note',
|
||||
'tip',
|
||||
'info',
|
||||
'caution',
|
||||
'danger',
|
||||
|
||||
// Admonitions custom
|
||||
'callout',
|
||||
'prerequisites',
|
||||
'strapi',
|
||||
'warning',
|
||||
],
|
||||
},
|
||||
},
|
||||
blog: false,
|
||||
sitemap: {
|
||||
lastmod: 'date',
|
||||
changefreq: 'weekly',
|
||||
priority: 0.6,
|
||||
// ignorePatterns: ['/tags/**'],
|
||||
filename: 'sitemap.xml',
|
||||
createSitemapItems: async (params) => {
|
||||
const {defaultCreateSitemapItems, ...rest} = params;
|
||||
const items = await defaultCreateSitemapItems(rest);
|
||||
return items;
|
||||
},
|
||||
},
|
||||
theme: {
|
||||
customCss: './src/scss/__index.scss',
|
||||
},
|
||||
} satisfies Preset.Options,
|
||||
],
|
||||
],
|
||||
|
||||
themeConfig: {
|
||||
// Replace with your project's social card
|
||||
// image: 'img/docusaurus-social-card.jpg',
|
||||
navbar: {
|
||||
title: 'PluginPal Docs',
|
||||
logo: {
|
||||
alt: 'PluginPal logo',
|
||||
src: 'img/logo.png',
|
||||
},
|
||||
items: [
|
||||
{
|
||||
href: 'https://github.com/pluginpal',
|
||||
label: 'GitHub',
|
||||
position: 'right',
|
||||
},
|
||||
],
|
||||
},
|
||||
footer: {
|
||||
style: 'dark',
|
||||
links: [
|
||||
{
|
||||
title: 'Community',
|
||||
items: [
|
||||
{
|
||||
label: 'Discord',
|
||||
href: 'https://discord.com/invite/strapi',
|
||||
},
|
||||
{
|
||||
label: 'Forum',
|
||||
href: 'https://forum.strapi.io/',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'More',
|
||||
items: [
|
||||
{
|
||||
label: 'Website',
|
||||
href: 'https://www.pluginpal.io',
|
||||
},
|
||||
{
|
||||
label: 'GitHub',
|
||||
href: 'https://github.com/pluginpal',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
algolia: {
|
||||
appId: '8VTVGK458K',
|
||||
apiKey: '2f311b65edaffdd986645eb42d4afa51',
|
||||
indexName: 'pluginpal',
|
||||
},
|
||||
|
||||
prism: {
|
||||
theme: prismThemes.github,
|
||||
darkTheme: prismThemes.dracula,
|
||||
},
|
||||
} satisfies Preset.ThemeConfig,
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
{
|
||||
"name": "pluginpal-docs",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"docusaurus": "docusaurus",
|
||||
"start": "docusaurus start",
|
||||
"build": "docusaurus build",
|
||||
"swizzle": "docusaurus swizzle",
|
||||
"deploy": "docusaurus deploy",
|
||||
"clear": "docusaurus clear",
|
||||
"serve": "docusaurus serve",
|
||||
"write-translations": "docusaurus write-translations",
|
||||
"write-heading-ids": "docusaurus write-heading-ids",
|
||||
"typecheck": "tsc"
|
||||
},
|
||||
"dependencies": {
|
||||
"@docusaurus/core": "3.5.2",
|
||||
"@docusaurus/plugin-sitemap": "^3.5.2",
|
||||
"@docusaurus/preset-classic": "3.5.2",
|
||||
"@docusaurus/theme-live-codeblock": "^3.5.2",
|
||||
"@docusaurus/theme-mermaid": "^3.5.2",
|
||||
"@docusaurus/theme-search-algolia": "^3.5.2",
|
||||
"@mdx-js/react": "^3.0.0",
|
||||
"classnames": "^2.5.1",
|
||||
"clsx": "^2.0.0",
|
||||
"docusaurus-plugin-sass": "^0.2.5",
|
||||
"prism-react-renderer": "^2.3.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"sass": "^1.78.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@docusaurus/module-type-aliases": "3.5.2",
|
||||
"@docusaurus/tsconfig": "3.5.2",
|
||||
"@docusaurus/types": "3.5.2",
|
||||
"typescript": "~5.5.2"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.5%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 3 chrome version",
|
||||
"last 3 firefox version",
|
||||
"last 5 safari version"
|
||||
]
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
/**
|
||||
- create an ordered group of docs
|
||||
- render a sidebar for each doc of that group
|
||||
- provide next/previous navigation
|
||||
|
||||
The sidebars can be generated from the filesystem, or explicitly defined here.
|
||||
|
||||
Create as many sidebars as you want.
|
||||
*/
|
||||
|
||||
// @ts-check
|
||||
|
||||
/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
|
||||
const sidebars = {
|
||||
// By default, Docusaurus generates a sidebar from the docs folder structure
|
||||
// tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
|
||||
|
||||
// But you can create a sidebar manually
|
||||
configSyncSidebar: [
|
||||
{
|
||||
type: "category",
|
||||
collapsed: false,
|
||||
label: "🚀 Getting Started",
|
||||
items: [
|
||||
"getting-started/installation",
|
||||
"getting-started/motivation",
|
||||
"getting-started/cli",
|
||||
"getting-started/admin-gui",
|
||||
"getting-started/config-types",
|
||||
"getting-started/workflow",
|
||||
"getting-started/naming-convention",
|
||||
// "dev-docs/usage-information",
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
collapsed: false,
|
||||
label: "⚙️ Configuration",
|
||||
items: [
|
||||
"configuration/introduction",
|
||||
"configuration/sync-dir",
|
||||
"configuration/minify",
|
||||
"configuration/import-on-bootstrap",
|
||||
"configuration/custom-types",
|
||||
"configuration/soft",
|
||||
"configuration/excluded-types",
|
||||
"configuration/excluded-config",
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
collapsed: false,
|
||||
label: "📦 API",
|
||||
items: [
|
||||
"api/plugin-config-types",
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
collapsed: false,
|
||||
label: "♻️ Upgrading",
|
||||
items: [
|
||||
"upgrading/generic-update",
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
module.exports = sidebars;
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
|
||||
export default function ApiCall({
|
||||
children,
|
||||
noSideBySide = false,
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
'api-call',
|
||||
(noSideBySide && 'api-call--no-side-by-side'),
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
|
||||
export default function Badge({
|
||||
children,
|
||||
className,
|
||||
link = '',
|
||||
noLink = false,
|
||||
variant = '',
|
||||
...rest
|
||||
}) {
|
||||
const variantNormalized = variant.toLowerCase().replace(/\W/g, '');
|
||||
|
||||
return (
|
||||
<span
|
||||
className={clsx(
|
||||
'badge',
|
||||
'badge--feature',
|
||||
(variantNormalized && `badge--${variantNormalized.toLowerCase()}`),
|
||||
)}
|
||||
{...rest}
|
||||
>
|
||||
{(noLink || !link) ? (
|
||||
<>
|
||||
{variant}
|
||||
</>
|
||||
) : (
|
||||
<a className="badge__link" href={link}>
|
||||
{variant}
|
||||
</a>
|
||||
)}
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export function AlphaBadge(props) {
|
||||
return (
|
||||
<Badge
|
||||
variant="Alpha"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function BetaBadge(props) {
|
||||
return (
|
||||
<Badge
|
||||
variant="Beta"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function FutureBadge(props) {
|
||||
return (
|
||||
<Badge
|
||||
variant="Future"
|
||||
link="/dev-docs/configurations/features"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function EnterpriseBadge(props) {
|
||||
return (
|
||||
<Badge
|
||||
variant="Enterprise"
|
||||
link="https://strapi.io/pricing-self-hosted"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function CloudProBadge(props) {
|
||||
return (
|
||||
<Badge
|
||||
variant="Strapi Cloud Pro"
|
||||
link="https://strapi.io/pricing-cloud"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function CloudTeamBadge(props) {
|
||||
return (
|
||||
<Badge
|
||||
variant="Strapi Cloud Team"
|
||||
link="https://strapi.io/pricing-cloud"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
export function CloudDevBadge(props) {
|
||||
return (
|
||||
<Badge
|
||||
variant="Strapi Cloud Dev"
|
||||
link="https://strapi.io/pricing-cloud"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function NewBadge(props) {
|
||||
return (
|
||||
<Badge
|
||||
variant="New ✨"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export function UpdatedBadge(props) {
|
||||
return (
|
||||
<Badge
|
||||
variant="Updated ️🖌"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import Link from '@docusaurus/Link';
|
||||
import styles from './button.module.scss';
|
||||
|
||||
export function Button({
|
||||
href,
|
||||
to,
|
||||
children,
|
||||
className,
|
||||
decorative,
|
||||
size = '',
|
||||
variant = 'primary',
|
||||
...rest
|
||||
}) {
|
||||
const ButtonElement = (to ? Link : (href ? 'a' : 'button'));
|
||||
|
||||
return (
|
||||
<ButtonElement
|
||||
{...rest}
|
||||
{...(!href ? {} : { href, target: '_blank' })}
|
||||
{...(!to ? {} : { to })}
|
||||
className={clsx(
|
||||
'button',
|
||||
(variant && styles[`button--${variant}`]),
|
||||
(size && styles[`button--${size}`]),
|
||||
styles.button,
|
||||
styles[variant],
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
{decorative && (
|
||||
<span className={styles.button__decorative}>
|
||||
{decorative}
|
||||
</span>
|
||||
)}
|
||||
</ButtonElement>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
/** Component: Button */
|
||||
|
||||
@import '../../scss/_mixins.scss';
|
||||
|
||||
.button {
|
||||
--strapi-button-background-color: var(--strapi-primary-600);
|
||||
--strapi-button-border-color: var(--strapi-primary-600);
|
||||
--strapi-button-border-radius: 4px;
|
||||
--strapi-button-box-shadow: 0 0 0 transparent;
|
||||
--strapi-button-color: #fff;
|
||||
--strapi-button-font-size: 12px;
|
||||
--strapi-button-font-weight: 600;
|
||||
--strapi-button-line-height: 16px;
|
||||
--strapi-button-position: relative;
|
||||
--strapi-button-py: 7px;
|
||||
--strapi-button-px: 15px;
|
||||
--strapi-button-transition-property: color, background, border-color, box-shadow;
|
||||
|
||||
--strapi-button-hover-background-color: var(--strapi-primary-700);
|
||||
--strapi-button-hover-border-color: var(--strapi-primary-700);
|
||||
--strapi-button-hover-box-shadow: 0px 9px 10px rgba(44, 56, 148, 0.2475);
|
||||
--strapi-button-hover-color: #fff;
|
||||
|
||||
--ifm-button-color: var(--strapi-button-color);
|
||||
--ifm-button-background-color: var(--strapi-button-background-color);
|
||||
--ifm-button-border-color: var(--strapi-button-border-color);
|
||||
--ifm-button-border-radius: var(--strapi-button-border-radius);
|
||||
--ifm-button-font-weight: var(--strapi-button-font-weight);
|
||||
--ifm-button-padding-horizontal: var(--strapi-button-px);
|
||||
--ifm-button-padding-vertical: var(--strapi-button-py);
|
||||
--ifm-button-size-multiplier: 1;
|
||||
|
||||
--ifm-color-primary-darker: var(--strapi-primary-200);
|
||||
|
||||
--ifm-link-hover-color: var(--strapi-button-color);
|
||||
--ifm-link-hover-decoration: none;
|
||||
|
||||
position: var(--strapi-button-position);
|
||||
font-size: var(--strapi-button-font-size);
|
||||
line-height: var(--strapi-button-line-height);
|
||||
box-shadow: var(--strapi-button-box-shadow);
|
||||
transition-property: var(--strapi-button-transition-property);
|
||||
|
||||
&__decorative {
|
||||
position: absolute;
|
||||
font-size: 32px;
|
||||
line-height: 32px;
|
||||
bottom: -16px;
|
||||
right: -8px;
|
||||
}
|
||||
|
||||
&:not(:disabled),
|
||||
&:not([aria-disabled="true"]) {
|
||||
&:focus, &:hover {
|
||||
--strapi-button-box-shadow: var(--strapi-button-hover-box-shadow);
|
||||
--strapi-button-background-color: var(--strapi-button-hover-background-color);
|
||||
--strapi-button-border-color: var(--strapi-button-hover-border-color);
|
||||
--strapi-button-color: var(--strapi-button-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
/** Sizes */
|
||||
&--huge {
|
||||
--strapi-button-border-radius: 6px;
|
||||
--strapi-button-font-size: 15px;
|
||||
--strapi-button-line-height: 23px;
|
||||
--strapi-button-py: 11px;
|
||||
--strapi-button-px: 71px;
|
||||
}
|
||||
|
||||
/** Variants */
|
||||
&--secondary {
|
||||
--strapi-button-background-color: #f0f0ff;
|
||||
--strapi-button-border-color: #d9d8ff;
|
||||
--strapi-button-color: var(--strapi-primary-600);
|
||||
|
||||
--strapi-button-hover-background-color: var(--strapi-neutral-0);
|
||||
--strapi-button-hover-border-color: #d9d8ff;
|
||||
--strapi-button-hover-box-shadow: none;
|
||||
--strapi-button-hover-color: var(--strapi-primary-600);
|
||||
}
|
||||
}
|
||||
|
||||
/** Dark mode */
|
||||
@include dark {
|
||||
.button {
|
||||
/** Dark mode Variants */
|
||||
&--secondary {
|
||||
--strapi-button-background-color: var(--strapi-neutral-100);
|
||||
--strapi-button-border-color: var(--strapi-neutral-200);
|
||||
|
||||
--strapi-button-hover-background-color: var(--strapi-neutral-0);
|
||||
--strapi-button-hover-border-color: var(--strapi-neutral-200);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import Link from '@docusaurus/Link';
|
||||
import styles from './card.module.scss';
|
||||
import IconArrow from '@site/static/img/assets/icons/arrow-right.svg';
|
||||
|
||||
export function CardTitle({
|
||||
as,
|
||||
children,
|
||||
className,
|
||||
withArrow,
|
||||
...rest
|
||||
}) {
|
||||
const TitleElement = (as || 'h3');
|
||||
|
||||
return (
|
||||
<TitleElement
|
||||
className={clsx(
|
||||
styles.card__title,
|
||||
className,
|
||||
)}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
{withArrow && (
|
||||
<span className={styles.card__title__arrow}>
|
||||
<IconArrow />
|
||||
</span>
|
||||
)}
|
||||
</TitleElement>
|
||||
);
|
||||
}
|
||||
|
||||
export function CardDescription({
|
||||
as,
|
||||
className,
|
||||
...rest
|
||||
}) {
|
||||
const DescriptionElement = (as || 'div');
|
||||
|
||||
return (
|
||||
<DescriptionElement
|
||||
className={clsx(
|
||||
styles.card__description,
|
||||
className,
|
||||
)}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function CardImgBg({
|
||||
className,
|
||||
...rest
|
||||
}) {
|
||||
return (
|
||||
<img
|
||||
className={clsx(
|
||||
styles['card__img-bg'],
|
||||
className,
|
||||
)}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function CardImg({
|
||||
className,
|
||||
...rest
|
||||
}) {
|
||||
return (
|
||||
<img
|
||||
className={clsx(
|
||||
styles['card__img'],
|
||||
className,
|
||||
)}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function Card({
|
||||
className,
|
||||
href,
|
||||
isContentDelimited,
|
||||
to,
|
||||
variant,
|
||||
...rest
|
||||
}) {
|
||||
const asCallToAction = !!(href || to);
|
||||
const CardElement = (to ? Link : (href ? 'a' : 'div'));
|
||||
|
||||
return (
|
||||
<CardElement
|
||||
{...(!href ? {} : { href, target: '_blank' })}
|
||||
{...(!to ? {} : { to })}
|
||||
className={clsx(
|
||||
styles.card,
|
||||
(asCallToAction && styles['card--cta']),
|
||||
(isContentDelimited && styles['card--content-delimited']),
|
||||
(variant && styles[`card--${variant}`]),
|
||||
className,
|
||||
)}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,182 @@
|
|||
/** Component: Card */
|
||||
|
||||
@import '../../scss/_mixins.scss';
|
||||
|
||||
:root {
|
||||
--strapi-card-background: var(--strapi-neutral-0);
|
||||
--strapi-card-border-color: #EDEDFF;
|
||||
--strapi-card-border-radius: 10px;
|
||||
--strapi-card-box-shadow: 0 0 0 transparent;
|
||||
--strapi-card-content-delimited: 395px;
|
||||
--strapi-card-img-border-width: 5px;
|
||||
--strapi-card-img-border-radius: 5px 5px 0 0;
|
||||
--strapi-card-img-bg-scale: 1;
|
||||
--strapi-card-justify-content: center;
|
||||
--strapi-card-position: relative;
|
||||
--strapi-card-overflow: hidden;
|
||||
--strapi-card-text-align: center;
|
||||
--strapi-card-gap: var(--strapi-spacing-2);
|
||||
--strapi-card-px: var(--strapi-spacing-6);
|
||||
--strapi-card-py: var(--strapi-spacing-6);
|
||||
--strapi-card-title-arrow-left: var(--strapi-card-gap);
|
||||
--strapi-card-title-color: #1D1B84;
|
||||
--strapi-card-title-font-size: 17px;
|
||||
--strapi-card-title-font-weight: 700;
|
||||
--strapi-card-title-line-height: 26px;
|
||||
--strapi-card-description-color: #4E6294;
|
||||
--strapi-card-description-font-size: 15px;
|
||||
--strapi-card-description-line-height: 24px;
|
||||
--strapi-card-hover-border-color: #D6D6FF;
|
||||
--strapi-card-hover-img-bg-scale: 1.15;
|
||||
}
|
||||
|
||||
.card {
|
||||
position: var(--strapi-card-position);
|
||||
overflow: var(--strapi-card-overflow);
|
||||
background: var(--strapi-card-background);
|
||||
border-radius: var(--strapi-card-border-radius);
|
||||
border: 1px solid var(--strapi-card-border-color);
|
||||
box-shadow: var(--strapi-card-box-shadow);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--strapi-card-gap);
|
||||
align-items: stretch;
|
||||
justify-content: var(--strapi-card-justify-content);
|
||||
text-align: var(--strapi-card-text-align);
|
||||
padding: var(--strapi-card-py) var(--strapi-card-px);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:focus, &:hover {
|
||||
--strapi-card-border-color: var(--strapi-card-hover-border-color);
|
||||
--strapi-card-title-arrow-left: var(--strapi-spacing-3);
|
||||
--strapi-card-img-bg-scale: var(--strapi-card-hover-img-bg-scale);
|
||||
}
|
||||
|
||||
&__title {
|
||||
display: block;
|
||||
color: var(--strapi-card-title-color);
|
||||
font-size: var(--strapi-card-title-font-size);
|
||||
font-weight: var(--strapi-card-title-font-weight);
|
||||
line-height: var(--strapi-card-title-line-height);
|
||||
margin: 0;
|
||||
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
&__arrow {
|
||||
display: inline-block;
|
||||
line-height: 0;
|
||||
margin-left: var(--strapi-card-title-arrow-left);
|
||||
transition: margin-left 0.1s ease;
|
||||
}
|
||||
}
|
||||
|
||||
&__description {
|
||||
--ifm-link-color: var(--strapi-card-description-color);
|
||||
--ifm-link-decoration: underline;
|
||||
|
||||
color: var(--strapi-card-description-color);
|
||||
opacity: 0.8;
|
||||
font-size: var(--strapi-card-description-font-size);
|
||||
line-height: var(--strapi-card-description-line-height);
|
||||
}
|
||||
|
||||
&__img {
|
||||
border-bottom: none;
|
||||
box-shadow: 0 1px 10px 0 #7A78B61A;
|
||||
}
|
||||
|
||||
&--cta {
|
||||
--ifm-link-color: currentColor;
|
||||
--strapi-card-background:
|
||||
linear-gradient(
|
||||
310deg,
|
||||
rgba(168, 166, 255, 0.15) 1.16%,
|
||||
rgba(226, 225, 255, 0.15) 69.23%
|
||||
),
|
||||
#FFFFFF
|
||||
;
|
||||
--strapi-card-text-align: left;
|
||||
--strapi-card-gap: var(--strapi-spacing-2);
|
||||
--strapi-card-title-font-size: 21px;
|
||||
--strapi-card-title-font-weight: 600;
|
||||
--strapi-card-title-line-height: 28px;
|
||||
--ifm-link-decoration: none;
|
||||
--ifm-link-hover-decoration: none;
|
||||
}
|
||||
|
||||
&--content-delimited {
|
||||
.card {
|
||||
&__title,
|
||||
&__description {
|
||||
width: 100%;
|
||||
max-width: var(--strapi-card-content-delimited);
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Responsive */
|
||||
@include medium-up {
|
||||
:root {
|
||||
--strapi-card-px: var(--strapi-spacing-8);
|
||||
--strapi-card-py: var(--strapi-spacing-9);
|
||||
}
|
||||
|
||||
.card {
|
||||
&__title {
|
||||
&__arrow {
|
||||
transition: margin-left 0.2s ease;
|
||||
will-change: margin-left;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus, &:hover {
|
||||
&.card--cta {
|
||||
--strapi-card-border-color: #D6D6FF;
|
||||
--strapi-card-box-shadow: 0px 1px 4px rgba(33, 33, 52, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&--cta {
|
||||
transition: all 0.2s ease;
|
||||
will-change: border-color, box-shadow, color;
|
||||
|
||||
.card {
|
||||
&__img {
|
||||
transition: all 0.2s ease;
|
||||
will-change: border-radius, transform;
|
||||
transform:
|
||||
scale(var(--strapi-card-img-scale, 1))
|
||||
translate(var(--strapi-card-img-translate, '0, 0'))
|
||||
;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Dark mode */
|
||||
@include dark {
|
||||
--strapi-card-border-color: var(--strapi-neutral-150);
|
||||
--strapi-card-title-color: var(--strapi-netral-1000);
|
||||
--strapi-card-description-color: var(--strapi-netral-1000);
|
||||
--strapi-card-img-border-color: rgba(255, 255, 255, 0.5);
|
||||
--strapi-card-hover-border-color: #49494D;
|
||||
|
||||
.card {
|
||||
&--cta {
|
||||
--strapi-card-background: var(--strapi-neutral-0);
|
||||
|
||||
&:focus, &:hover {
|
||||
--strapi-card-border-color: #49494D;
|
||||
--strapi-card-color: var(--strapi-neutral-1000);
|
||||
|
||||
--ifm-link-hover-color: var(--strapi-neutral-1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import styles from './container.module.scss';
|
||||
|
||||
export function Container({ className, ...rest }) {
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
styles.container,
|
||||
className,
|
||||
)}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
/** Component: Container */
|
||||
|
||||
:root {
|
||||
--strapi-container-px: var(--ifm-spacing-horizontal);
|
||||
--strapi-container-mw: calc(863px + calc(var(--strapi-container-px) * 2));
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: var(--strapi-container-px);
|
||||
padding-left: var(--strapi-container-px);
|
||||
max-width: var(--strapi-container-mw);
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import React from 'react'
|
||||
import classNames from 'classnames';
|
||||
|
||||
export default function CustomDocCard(props) {
|
||||
const { title, description, link, emoji, small = false } = props;
|
||||
const linkClasses = classNames({
|
||||
card: true,
|
||||
cardContainer: true,
|
||||
'padding--lg': !small,
|
||||
'padding--md': small,
|
||||
});
|
||||
const cardClasses = classNames({
|
||||
'custom-doc-card': true,
|
||||
'margin-bottom--lg': !small,
|
||||
'margin-bottom--sm': small,
|
||||
'custom-doc-card--small': small,
|
||||
});
|
||||
return (
|
||||
<article className={ cardClasses }>
|
||||
<a className={ linkClasses }
|
||||
href={ link }
|
||||
>
|
||||
<h2 className="text--truncate cardTitle" title={title}>
|
||||
{emoji ? emoji : '📄️'} {title}
|
||||
</h2>
|
||||
<p className="text--truncate cardDescription" title={ description }>
|
||||
{description}
|
||||
</p>
|
||||
</a>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import React from 'react';
|
||||
|
||||
export default function CustomDocCardsWrapper({ children }) {
|
||||
return (
|
||||
<div className="custom-cards-wrapper">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import styles from './features-list.module.scss';
|
||||
import { LinkWithArrow } from '../LinkWithArrow/LinkWithArrow';
|
||||
|
||||
export function FeatureListItem({
|
||||
children,
|
||||
className,
|
||||
href,
|
||||
icon: Icon,
|
||||
iconColor,
|
||||
label,
|
||||
to,
|
||||
...rest
|
||||
}) {
|
||||
const ContentElement = ((href || to) ? LinkWithArrow : 'span');
|
||||
const IconElement = ((href || to) ? 'a' : 'span');
|
||||
|
||||
return (
|
||||
<li
|
||||
className={clsx(
|
||||
styles['features-list__item'],
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{Icon && (
|
||||
<IconElement
|
||||
className={clsx(
|
||||
styles['features-list__item__icon'],
|
||||
(iconColor && styles[`features-list__item__icon--${iconColor}`]),
|
||||
)}
|
||||
href={href}
|
||||
to={to}
|
||||
{...(IconElement === 'a' ? { href: to || href } : {})}
|
||||
>
|
||||
<Icon />
|
||||
</IconElement>
|
||||
)}
|
||||
<ContentElement
|
||||
className={styles['features-list__item__content']}
|
||||
href={href}
|
||||
to={to}
|
||||
{...rest}
|
||||
>
|
||||
{children || label}
|
||||
</ContentElement>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
export function FeaturesList({
|
||||
className,
|
||||
id,
|
||||
icon,
|
||||
iconColor,
|
||||
items,
|
||||
...rest
|
||||
}) {
|
||||
const defaultId = `featureListItem${Math.random()}`;
|
||||
|
||||
return (
|
||||
<ul
|
||||
className={clsx(
|
||||
styles['features-list'],
|
||||
className,
|
||||
)}
|
||||
{...rest}
|
||||
>
|
||||
{items?.map((featureListItem, featureListItemIndex) => {
|
||||
return (
|
||||
<FeatureListItem
|
||||
key={`${id || defaultId}${featureListItemIndex}`}
|
||||
icon={icon}
|
||||
iconColor={iconColor}
|
||||
{...featureListItem}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
/** Component: Features List */
|
||||
|
||||
@import '../../scss/_mixins.scss';
|
||||
|
||||
:root {
|
||||
--strapi-features-list-gap: var(--strapi-spacing-2);
|
||||
--strapi-features-list-margin: 0;
|
||||
--strapi-features-list-py: var(--ifm-spacing-horizontal);
|
||||
--strapi-features-list-px: 0;
|
||||
|
||||
--strapi-features-list-item-inner-gap: 8px;
|
||||
--strapi-features-list-item-icon-background-color: var(--strapi-secondary-100);
|
||||
--strapi-features-list-item-icon-border-color: #D4EDFF;
|
||||
--strapi-features-list-item-icon-color: var(--strapi-secondary-500);
|
||||
--strapi-features-list-item-icon-border-radius: 7px;
|
||||
--strapi-features-list-item-icon-area: 32px;
|
||||
--strapi-features-list-item-icon-size: 16px;
|
||||
}
|
||||
|
||||
.features-list {
|
||||
margin: var(--strapi-features-list-margin);
|
||||
padding: var(--strapi-features-list-py) var(--strapi-features-list-px);
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
gap: var(--strapi-features-list-gap);
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--strapi-features-list-item-inner-gap);
|
||||
|
||||
&__icon {
|
||||
background-color: var(--strapi-features-list-item-icon-background-color);
|
||||
border: 1px solid var(--strapi-features-list-item-icon-border-color);
|
||||
border-radius: var(--strapi-features-list-item-icon-border-radius);
|
||||
color: var(--strapi-features-list-item-icon-color);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: var(--strapi-features-list-item-icon-area);
|
||||
width: var(--strapi-features-list-item-icon-area);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&--green {
|
||||
--strapi-features-list-item-icon-background-color: var(--strapi-success-100);
|
||||
--strapi-features-list-item-icon-border-color: #DAF0D8;
|
||||
--strapi-features-list-item-icon-color: var(--strapi-success-500);
|
||||
}
|
||||
|
||||
svg {
|
||||
height: var(--strapi-features-list-item-icon-size);
|
||||
width: var(--strapi-features-list-item-icon-size);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Responsive */
|
||||
@include medium-up {
|
||||
:root {
|
||||
--strapi-features-list-py: calc(var(--ifm-spacing-horizontal) * 2);
|
||||
--strapi-features-list-px: var(--ifm-spacing-horizontal);
|
||||
|
||||
--strapi-features-list-item-inner-gap: 20px;
|
||||
--strapi-features-list-item-icon-area: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
/** Dark mode */
|
||||
@include dark {
|
||||
--strapi-features-list-item-icon-background-color: var(--strapi-secondary-500);
|
||||
--strapi-features-list-item-icon-border-color: var(--strapi-secondary-600);
|
||||
|
||||
.features-list {
|
||||
&__item {
|
||||
&__icon {
|
||||
--strapi-features-list-item-icon-color: #fff;
|
||||
|
||||
&--green {
|
||||
--strapi-features-list-item-icon-background-color: var(--strapi-success-500);
|
||||
--strapi-features-list-item-icon-border-color: var(--strapi-success-600);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import styles from './hero.module.scss';
|
||||
|
||||
export function HeroTitle({
|
||||
className,
|
||||
...rest
|
||||
}) {
|
||||
return (
|
||||
<h1
|
||||
className={clsx(
|
||||
styles.hero__title,
|
||||
className,
|
||||
)}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function HeroDescription({
|
||||
className,
|
||||
...rest
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
styles.hero__description,
|
||||
className,
|
||||
)}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function Hero({
|
||||
className,
|
||||
...rest
|
||||
}) {
|
||||
return (
|
||||
<header
|
||||
className={clsx(
|
||||
styles.hero,
|
||||
className,
|
||||
)}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
/** Component: Hero */
|
||||
|
||||
@import '../../scss/_mixins.scss';
|
||||
|
||||
:root {
|
||||
--strapi-hero-py: var(--strapi-spacing-6);
|
||||
--strapi-hero-gap: var(--strapi-spacing-4);
|
||||
|
||||
--strapi-hero-title-color: #1D1B84;
|
||||
--strapi-hero-title-font-size: var(--strapi-font-size-xl);
|
||||
--strapi-hero-title-line-height: 1.25;
|
||||
|
||||
--strapi-hero-description-color: #4E6294;
|
||||
--strapi-hero-description-font-size: var(--strapi-font-size-lg);
|
||||
--strapi-hero-description-line-height: 1.25;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding-top: var(--strapi-hero-py);
|
||||
padding-bottom: var(--strapi-hero-py);
|
||||
text-align: center;
|
||||
|
||||
&__title {
|
||||
color: var(--strapi-hero-title-color);
|
||||
font-weight: 700;
|
||||
font-size: var(--strapi-hero-title-font-size);
|
||||
line-height: var(--strapi-hero-title-line-height);
|
||||
letter-spacing: 0.4px;
|
||||
margin: 0 0 var(--strapi-hero-gap);
|
||||
}
|
||||
|
||||
&__description {
|
||||
color: var(--strapi-hero-description-color);
|
||||
font-size: var(--strapi-hero-description-font-size);
|
||||
line-height: var(--strapi-hero-description-line-height);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/** Responsive */
|
||||
@include medium-up {
|
||||
:root {
|
||||
--strapi-hero-py: 40px;
|
||||
--strapi-hero-title-font-size: 43px;
|
||||
--strapi-hero-title-line-height: 56px;
|
||||
--strapi-hero-description-font-size: 21px;
|
||||
--strapi-hero-description-line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
/** Dark mode */
|
||||
@include dark {
|
||||
--strapi-hero-title-color: white;
|
||||
--strapi-hero-description-color: white;
|
||||
}
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
import clsx from 'clsx';
|
||||
import Heading from '@theme/Heading';
|
||||
import styles from './styles.module.css';
|
||||
|
||||
type FeatureItem = {
|
||||
title: string;
|
||||
Svg: React.ComponentType<React.ComponentProps<'svg'>>;
|
||||
description: JSX.Element;
|
||||
};
|
||||
|
||||
const FeatureList: FeatureItem[] = [
|
||||
{
|
||||
title: 'Easy to Use',
|
||||
Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
|
||||
description: (
|
||||
<>
|
||||
Docusaurus was designed from the ground up to be easily installed and
|
||||
used to get your website up and running quickly.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Focus on What Matters',
|
||||
Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
|
||||
description: (
|
||||
<>
|
||||
Docusaurus lets you focus on your docs, and we'll do the chores. Go
|
||||
ahead and move your docs into the <code>docs</code> directory.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Powered by React',
|
||||
Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
|
||||
description: (
|
||||
<>
|
||||
Extend or customize your website layout by reusing React. Docusaurus can
|
||||
be extended while reusing the same header and footer.
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
function Feature({title, Svg, description}: FeatureItem) {
|
||||
return (
|
||||
<div className={clsx('col col--4')}>
|
||||
<div className="text--center">
|
||||
<Svg className={styles.featureSvg} role="img" />
|
||||
</div>
|
||||
<div className="text--center padding-horiz--md">
|
||||
<Heading as="h3">{title}</Heading>
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function HomepageFeatures(): JSX.Element {
|
||||
return (
|
||||
<section className={styles.features}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
{FeatureList.map((props, idx) => (
|
||||
<Feature key={idx} {...props} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
.features {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.featureSvg {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import Link from '@docusaurus/Link';
|
||||
import IconArrow from '@site/static/img/assets/icons/arrow-right.svg';
|
||||
import styles from './link-with-arrow.module.scss';
|
||||
|
||||
export function LinkWithArrow({
|
||||
apart = false,
|
||||
children,
|
||||
className,
|
||||
href,
|
||||
to,
|
||||
...rest
|
||||
}) {
|
||||
const LinkElement = (to ? Link : 'a');
|
||||
|
||||
return (
|
||||
<LinkElement
|
||||
className={clsx(
|
||||
styles.lwa,
|
||||
(apart && styles['lwa--apart']),
|
||||
className,
|
||||
)}
|
||||
{...(href && { href, target: '_blank' })}
|
||||
{...(to && { to })}
|
||||
{...rest}
|
||||
>
|
||||
<span className={styles.lwa__content}>
|
||||
{children}
|
||||
</span>
|
||||
<IconArrow
|
||||
className={styles.lwa__icon}
|
||||
/>
|
||||
</LinkElement>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
/** Component: Link with Arrow */
|
||||
|
||||
@import '../../scss/_mixins.scss';
|
||||
|
||||
:root {
|
||||
--strapi-lwa-icon-ml: var(--strapi-spacing-2);
|
||||
--strapi-lwa-font-size: 14px;
|
||||
--strapi-lwa-font-weight: 500;
|
||||
--strapi-lwa-line-height: 20px;
|
||||
--strapi-lwa-hover-icon-ml: var(--strapi-spacing-3);
|
||||
}
|
||||
|
||||
.lwa {
|
||||
--ifm-link-color: #1D1B84;
|
||||
--ifm-link-decoration: none;
|
||||
--ifm-link-hover-color: #2825B8;
|
||||
--ifm-link-hover-decoration: none;
|
||||
|
||||
font-size: var(--strapi-lwa-font-size);
|
||||
font-weight: var(--strapi-lwa-font-weight);
|
||||
line-height: var(--strapi-lwa-line-height);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:focus, &:hover {
|
||||
--strapi-lwa-icon-ml: var(--strapi-lwa-hover-icon-ml);
|
||||
}
|
||||
|
||||
&__icon {
|
||||
display: inline-block;
|
||||
line-height: 0;
|
||||
margin-left: var(--strapi-lwa-icon-ml);
|
||||
transition: margin-left 0.1s ease;
|
||||
}
|
||||
|
||||
&--apart {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.lwa {
|
||||
&__content {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Dark mode */
|
||||
@include dark {
|
||||
.lwa {
|
||||
--ifm-link-color: var(--strapi-neutral-1000);
|
||||
--ifm-link-hover-color: var(--strapi-neutral-500);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import React from 'react'
|
||||
|
||||
export default function Request({
|
||||
children,
|
||||
title = 'Example request',
|
||||
}) {
|
||||
return (
|
||||
<div className="api-call__request">
|
||||
<div className="api-call__request__heading">{title}</div>
|
||||
<div className="api-call__request__content">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import React from 'react'
|
||||
|
||||
export default function Response({
|
||||
children,
|
||||
title = 'Example response',
|
||||
}) {
|
||||
return (
|
||||
<div className="api-call__response">
|
||||
<div className="api-call__response__heading">{title}</div>
|
||||
<div className="api-call__response__content">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import React from 'react';
|
||||
|
||||
export default function SubtleCallout({
|
||||
children,
|
||||
title,
|
||||
emoji = '🤓',
|
||||
}) {
|
||||
return (
|
||||
<div className="theme-admonition theme-admonition--callout theme-admonition--subtle">
|
||||
<div className="theme-admonition__heading">
|
||||
<span style={{fontWeight: 300}} className="theme-admonition__heading__icon">{ emoji } </span>{ title }
|
||||
</div>
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
export * from './Button/Button';
|
||||
export * from './Card/Card';
|
||||
export * from './Container/Container';
|
||||
export * from './HomepageFeatures';
|
||||
export * from './FeaturesList/FeaturesList';
|
||||
export * from './Hero/Hero';
|
||||
export * from './LinkWithArrow/LinkWithArrow';
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
/**
|
||||
* Any CSS included here will be global.
|
||||
* The classic template bundles Infima by default.
|
||||
* Infima is a CSS framework designed to work well for content-centric websites.
|
||||
*/
|
||||
|
||||
/** Core */
|
||||
@import '_mixins.scss';
|
||||
@import '_tokens.scss';
|
||||
@import '_tokens-overrides.scss';
|
||||
|
||||
/** Base */
|
||||
@import '_fonts.scss';
|
||||
@import '_base.scss';
|
||||
|
||||
/** Components */
|
||||
@import 'admonition.scss';
|
||||
@import 'api-call.scss';
|
||||
@import 'badge.scss';
|
||||
@import 'breadcrumbs.scss';
|
||||
@import 'card.scss';
|
||||
@import 'columns.scss';
|
||||
@import 'container.scss';
|
||||
@import 'custom-doc-cards.scss';
|
||||
@import 'details.scss';
|
||||
@import 'footer.scss';
|
||||
@import 'grid.scss';
|
||||
@import 'images.scss';
|
||||
@import 'markdown.scss';
|
||||
@import 'medium-zoom.scss';
|
||||
@import 'navbar.scss';
|
||||
@import 'pagination-nav.scss';
|
||||
@import 'search.scss';
|
||||
@import 'scene.scss';
|
||||
@import 'sidebar.scss';
|
||||
@import 'table.scss';
|
||||
@import 'tabs.scss';
|
||||
@import 'table-of-contents.scss';
|
||||
@import 'typography.scss';
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
/** Base: General Styles */
|
||||
|
||||
:root {
|
||||
--custom-selection-background-color: var(--strapi-primary-600);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: var(--custom-selection-background-color);
|
||||
color: var(--custom-selection-color, var(--strapi-neutral-0));
|
||||
}
|
||||
|
||||
main {
|
||||
article:first-child:not(.col):not(.custom-doc-card),
|
||||
article:first-child:not(.col) + nav {
|
||||
--custom-main-px: var(--strapi-spacing-0);
|
||||
--custom-main-width: 683px;
|
||||
|
||||
max-width: calc(var(--custom-main-width) + calc(var(--strapi-spacing-4) * 2));
|
||||
padding-left: var(--custom-main-px) !important;
|
||||
padding-right: var(--custom-main-px) !important;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/** Responsive */
|
||||
@include medium-up {
|
||||
main {
|
||||
article:first-child:not(.col),
|
||||
article:first-child:not(.col) + nav {
|
||||
--custom-main-px: var(--strapi-spacing-4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Dark mode */
|
||||
@include dark {
|
||||
.container img[width="16"] {
|
||||
/* 'Temporary' fix while we figure a way to display white icons in dark mode 😅 */
|
||||
background-color: white;
|
||||
border-radius: 2px;
|
||||
padding: 1px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
/** Fonts */
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
|
||||
|
||||
.font-poppins,
|
||||
.font-poppins button,
|
||||
.font-poppins input {
|
||||
--custom-font-family: "Poppins", sans-serif;
|
||||
--ifm-heading-font-family: "Poppins", sans-serif;
|
||||
|
||||
font-family: var(--custom-font-family);
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
/** Core: Sass Mixins */
|
||||
|
||||
/** Mixin: Responsive */
|
||||
@mixin small-up {
|
||||
@media (min-width: 769px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/** Mixin: Responsive */
|
||||
@mixin medium-up {
|
||||
@media (min-width: 997px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/** Mixin: Responsive */
|
||||
@mixin large-up {
|
||||
@media (min-width: 1536px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/** Mixin: Dark mode */
|
||||
@mixin dark {
|
||||
html[data-theme='dark'] {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/** Mixin: Light mode */
|
||||
@mixin light {
|
||||
html[data-theme='light'] {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/** Mixin: Transition */
|
||||
@mixin transition {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/** Mixin: Flex */
|
||||
@mixin flex-row(
|
||||
$gap: var(--strapi-spacing-2),
|
||||
$align-items: center,
|
||||
$justify-content: null
|
||||
) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: $gap;
|
||||
align-items: $align-items;
|
||||
justify-content: $justify-content;
|
||||
}
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
/** Core: Docusaurus/Infima Style Tokens Overrides */
|
||||
|
||||
:root {
|
||||
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
|
||||
|
||||
--ifm-background-color: var(--strapi-neutral-0);
|
||||
--ifm-color-content: var(--strapi-neutral-800);
|
||||
--ifm-font-color-base: var(--strapi-neutral-800);
|
||||
|
||||
--ifm-color-content-secondary: var(--strapi-neutral-600);
|
||||
--ifm-color-emphasis-100: var(--strapi-neutral-100);
|
||||
--ifm-color-emphasis-200: var(--strapi-neutral-150);
|
||||
--ifm-color-emphasis-300: var(--strapi-neutral-200);
|
||||
--ifm-color-emphasis-400: var(--strapi-neutral-300);
|
||||
--ifm-color-emphasis-500: var(--strapi-neutral-400);
|
||||
--ifm-color-emphasis-600: var(--strapi-neutral-500);
|
||||
--ifm-color-emphasis-700: var(--strapi-neutral-600);
|
||||
--ifm-color-emphasis-800: var(--strapi-neutral-700);
|
||||
--ifm-color-emphasis-900: var(--strapi-neutral-800);
|
||||
--ifm-color-emphasis-1000: var(--strapi-neutral-1000);
|
||||
|
||||
--ifm-color-primary: var(--strapi-primary-600);
|
||||
--ifm-color-primary-dark: var(--strapi-primary-700);
|
||||
--ifm-color-primary-darker: var(--strapi-primary-800);
|
||||
--ifm-color-primary-darkest: var(--strapi-primary-900);
|
||||
--ifm-color-primary-light: var(--strapi-primary-500);
|
||||
--ifm-color-primary-lighter: var(--strapi-primary-400);
|
||||
--ifm-color-primary-lightest: var(--strapi-primary-300);
|
||||
|
||||
--ifm-link-color: var(--strapi-primary-600);
|
||||
--ifm-link-decoration: none;
|
||||
// --ifm-link-hover-decoration: none;
|
||||
|
||||
--ifm-paragraph-margin-bottom: var(--strapi-spacing-4);
|
||||
|
||||
--ifm-scrollbar-track-background-color: var(--strapi-neutral-100);
|
||||
--ifm-scrollbar-thumb-background-color: var(--strapi-neutral-200);
|
||||
--ifm-scrollbar-thumb-hover-background-color: var(--strapi-neutral-300);
|
||||
|
||||
--ifm-table-stripe-background: #DCDCE43E;
|
||||
--ifm-toc-border-color: var(--strapi-neutral-150);
|
||||
}
|
||||
|
||||
/* Dark mode */
|
||||
@include dark {
|
||||
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
|
||||
|
||||
--ifm-background-color: var(--strapi-neutral-0);
|
||||
--ifm-color-content: var(--strapi-neutral-800);
|
||||
--ifm-font-color-base: var(--strapi-neutral-800);
|
||||
|
||||
--ifm-color-emphasis-100: var(--strapi-neutral-100);
|
||||
--ifm-color-emphasis-200: var(--strapi-neutral-150);
|
||||
--ifm-color-emphasis-300: var(--strapi-neutral-200);
|
||||
--ifm-color-emphasis-400: var(--strapi-neutral-300);
|
||||
--ifm-color-emphasis-500: var(--strapi-neutral-400);
|
||||
--ifm-color-emphasis-600: var(--strapi-neutral-500);
|
||||
--ifm-color-emphasis-700: var(--strapi-neutral-600);
|
||||
--ifm-color-emphasis-800: var(--strapi-neutral-700);
|
||||
--ifm-color-emphasis-900: var(--strapi-neutral-800);
|
||||
--ifm-color-emphasis-1000: var(--strapi-neutral-1000);
|
||||
|
||||
--ifm-color-primary: var(--strapi-primary-600);
|
||||
--ifm-color-primary-dark: var(--strapi-primary-700);
|
||||
--ifm-color-primary-darker: var(--strapi-primary-800);
|
||||
--ifm-color-primary-darkest: var(--strapi-primary-900);
|
||||
--ifm-color-primary-light: var(--strapi-primary-500);
|
||||
--ifm-color-primary-lighter: var(--strapi-primary-400);
|
||||
--ifm-color-primary-lightest: var(--strapi-primary-300);
|
||||
|
||||
--ifm-link-color: var(--strapi-primary-500);
|
||||
|
||||
--ifm-navbar-background-color: #212134;
|
||||
|
||||
--ifm-scrollbar-track-background-color: var(--strapi-neutral-100);
|
||||
--ifm-scrollbar-thumb-background-color: var(--strapi-neutral-150);
|
||||
--ifm-scrollbar-thumb-hover-background-color: var(--strapi-neutral-200);
|
||||
|
||||
--ifm-toc-border-color: var(--strapi-neutral-150);
|
||||
}
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
/** Core: Strapi Design System Tokens */
|
||||
|
||||
:root {
|
||||
/** Spacing */
|
||||
--strapi-spacing-0: 0; // 0px
|
||||
--strapi-spacing-1: 0.25rem; // 4px
|
||||
--strapi-spacing-2: 0.5rem; // 8px
|
||||
--strapi-spacing-3: 0.75rem; // 12px
|
||||
--strapi-spacing-4: 1rem; // 16px
|
||||
--strapi-spacing-5: 1.25rem; // 20px
|
||||
--strapi-spacing-6: 1.5rem; // 24px
|
||||
--strapi-spacing-7: 2rem; // 32px
|
||||
--strapi-spacing-8: 2.5rem; // 40px
|
||||
--strapi-spacing-9: 3rem; // 48px
|
||||
--strapi-spacing-10: 3.5rem; // 56px
|
||||
--strapi-spacing-11: 3.75rem; // 64px
|
||||
|
||||
/** Fonts */
|
||||
--strapi-font-size-tiny: 0.625rem; // 10px
|
||||
--strapi-font-size-xxs: 0.6875rem; // 11px
|
||||
--strapi-font-size-xs: 0.75rem; // 12px
|
||||
--strapi-font-size-ssm: 0.8125rem; // 13px
|
||||
--strapi-font-size-sm: 0.875rem; // 14px
|
||||
--strapi-font-size-md: 1rem; // 16px
|
||||
--strapi-font-size-lg: 1.125rem; // 18px
|
||||
--strapi-font-size-xl: 2rem; // 32px
|
||||
|
||||
/** Color: Neutral */
|
||||
--strapi-neutral-1000: #181826;
|
||||
--strapi-neutral-900: #212134;
|
||||
--strapi-neutral-800: #32324D;
|
||||
--strapi-neutral-700: #4A4A6A;
|
||||
--strapi-neutral-600: #666687;
|
||||
--strapi-neutral-500: #8E8EA9;
|
||||
--strapi-neutral-400: #A5A5BA;
|
||||
--strapi-neutral-300: #C0C0CF;
|
||||
--strapi-neutral-200: #DCDCE4;
|
||||
--strapi-neutral-150: #EAEAEF;
|
||||
--strapi-neutral-100: #F6F6F9;
|
||||
--strapi-neutral-0: #FFFFFF;
|
||||
|
||||
/** Color: Primary */
|
||||
--strapi-primary-700: #271FE0;
|
||||
--strapi-primary-600: #4945FF;
|
||||
--strapi-primary-500: #7B79FF;
|
||||
--strapi-primary-200: #D9D8FF;
|
||||
--strapi-primary-100: #F0F0FF;
|
||||
|
||||
/** Color: Secondary */
|
||||
--strapi-secondary-700: #006096;
|
||||
--strapi-secondary-600: #0C75AF;
|
||||
--strapi-secondary-500: #66B7F1;
|
||||
--strapi-secondary-200: #B8E1FF;
|
||||
--strapi-secondary-100: #EAF5FF;
|
||||
|
||||
/** Color: Success */
|
||||
--strapi-success-700: #2F6846;
|
||||
--strapi-success-600: #328048;
|
||||
--strapi-success-500: #5CB176;
|
||||
--strapi-success-300: #BBEFB5; /* not in Figma, used for code blocks */
|
||||
--strapi-success-200: #C6F0C2;
|
||||
--strapi-success-100: #EAFBE7;
|
||||
|
||||
/** Color: Danger */
|
||||
--strapi-danger-800: #4B1113; /* not actually existing in Figma */
|
||||
--strapi-danger-700: #B72B1A;
|
||||
--strapi-danger-600: #D02B20;
|
||||
--strapi-danger-500: #EE5E52;
|
||||
--strapi-danger-200: #F5C0B8;
|
||||
--strapi-danger-100: #FCECEA;
|
||||
|
||||
/** Color: Warning */
|
||||
--strapi-warning-700: #BE5D01;
|
||||
--strapi-warning-600: #D9822F;
|
||||
--strapi-warning-500: #F29D41;
|
||||
--strapi-warning-200: #FAE7B9;
|
||||
--strapi-warning-100: #FDF4DC;
|
||||
|
||||
/** Color: Alternative */
|
||||
--strapi-alternative-600: #9736E8;
|
||||
--strapi-alternative-500: #AC73E6;
|
||||
--strapi-alternative-200: #E0C1F4;
|
||||
--strapi-alternative-100: #F6ECFC;
|
||||
|
||||
/** Color: Code */
|
||||
--strapi-code-fluo-green: #50FA7B;
|
||||
--strapi-code-green: #50FA7B;
|
||||
--strapi-code-rose: #FF79C6;
|
||||
--strapi-code-purple: #BD93F9;
|
||||
--strapi-code-dark-blue: #6272A4;
|
||||
|
||||
/** Components */
|
||||
--strapi-input-border-color: var(--strapi-neutral-200);
|
||||
--strapi-input-border-width: 1px;
|
||||
--strapi-input-border-style: solid;
|
||||
--strapi-input-border:
|
||||
var(--strapi-input-border-width)
|
||||
var(--strapi-input-border-style)
|
||||
var(--strapi-input-border-color)
|
||||
;
|
||||
}
|
||||
|
||||
/** Dark mode */
|
||||
@include dark {
|
||||
/** Dark Color: Neutral */
|
||||
--strapi-neutral-1000: #FFFFFF; /* both 800 and 900 identical in Figma */
|
||||
--strapi-neutral-900: #FFFFFF; /* both 800 and 900 identical in Figma */
|
||||
--strapi-neutral-800: #FFFFFF;
|
||||
--strapi-neutral-700: #EAEAEF;
|
||||
--strapi-neutral-600: #666687;
|
||||
--strapi-neutral-500: #c0c0cf;
|
||||
--strapi-neutral-400: #A5A5BA; /* incorrecly named in Figma */
|
||||
--strapi-neutral-300: #666687;
|
||||
--strapi-neutral-200: #4A4A6A;
|
||||
--strapi-neutral-150: #32324D;
|
||||
--strapi-neutral-100: #181826;
|
||||
--strapi-neutral-0: #212134;
|
||||
|
||||
/** Dark Color: Primary */
|
||||
--strapi-primary-600: #7B79FF;
|
||||
}
|
||||
|
|
@ -0,0 +1,189 @@
|
|||
/** Component: Alert */
|
||||
|
||||
.theme-admonition {
|
||||
--custom-admonition-background-color: var(--strapi-neutral-100);
|
||||
--custom-admonition-border-color: var(--strapi-neutral-500);
|
||||
--custom-admonition-border-radius: var(--strapi-spacing-0);
|
||||
--custom-admonition-color: var(--strapi-neutral-800);
|
||||
--custom-admonition-heading-color: var(--strapi-neutral-700);
|
||||
--custom-admonition-heading-mb: var(--strapi-spacing-2);
|
||||
--custom-admonition-mb: var(--strapi-spacing-4);
|
||||
--custom-admonition-px: var(--strapi-spacing-4);
|
||||
--custom-admonition-py: var(--strapi-spacing-4);
|
||||
|
||||
--ifm-link-decoration: none;
|
||||
--ifm-link-color: var(--custom-admonition-heading-color);
|
||||
--ifm-link-hover-color: var(--custom-admonition-heading-color);
|
||||
|
||||
background-color: var(--custom-admonition-background-color);
|
||||
border-left: 4px solid var(--custom-admonition-border-color);
|
||||
border-radius: var(--custom-admonition-border-radius);
|
||||
color: var(--custom-admonition-color);
|
||||
margin: 0 0 var(--custom-admonition-mb);
|
||||
padding: var(--custom-admonition-py) var(--custom-admonition-px);
|
||||
|
||||
/** Alert Title element */
|
||||
&__heading {
|
||||
color: var(--custom-admonition-heading-color);
|
||||
font-weight: var(--custom-admonition-heading-font-weight, 600);
|
||||
margin-bottom: var(--custom-admonition-heading-mb);
|
||||
}
|
||||
|
||||
h1, h2, h3, li, p, table {
|
||||
code,
|
||||
a code {
|
||||
--custom-code-border-color: transparent;
|
||||
--custom-code-background-color: var(--custom-admonition-code-background-color);
|
||||
--custom-code-color: var(--custom-admonition-heading-color);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
*:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&--info,
|
||||
&--callout,
|
||||
&--prerequisites {
|
||||
--custom-admonition-background-color: var(--strapi-neutral-100);
|
||||
--custom-admonition-border-color: var(--strapi-neutral-500);
|
||||
--custom-admonition-code-background-color: var(--strapi-neutral-200);
|
||||
--custom-admonition-code-color: var(--strapi-primary-600);
|
||||
--custom-admonition-heading-color: var(--strapi-neutral-700);
|
||||
|
||||
--custom-selection-background-color: var(--strapi-neutral-700);
|
||||
--custom-selection-color: var(--strapi-neutral-100);
|
||||
|
||||
--ifm-link-color: var(--strapi-primary-600);
|
||||
--ifm-link-hover-color: var(--strapi-primary-600);
|
||||
}
|
||||
|
||||
&--note {
|
||||
--custom-admonition-background-color: var(--strapi-secondary-100);
|
||||
--custom-admonition-border-color: var(--strapi-secondary-500);
|
||||
--custom-admonition-code-background-color: var(--strapi-secondary-200);
|
||||
--custom-admonition-code-color: var(--strapi-secondary-600);
|
||||
--custom-admonition-heading-color: var(--strapi-secondary-700);
|
||||
|
||||
--custom-selection-background-color: var(--strapi-secondary-700);
|
||||
--custom-selection-color: var(--strapi-secondary-100);
|
||||
}
|
||||
|
||||
&--tip,
|
||||
&--success {
|
||||
--custom-admonition-background-color: var(--strapi-success-100);
|
||||
--custom-admonition-border-color: var(--strapi-success-500);
|
||||
--custom-admonition-code-background-color: var(--strapi-success-200);
|
||||
--custom-admonition-code-color: var(--strapi-success-600);
|
||||
--custom-admonition-heading-color: var(--strapi-success-700);
|
||||
|
||||
--custom-selection-background-color: var(--strapi-success-700);
|
||||
--custom-selection-color: var(--strapi-success-100);
|
||||
}
|
||||
|
||||
&--caution {
|
||||
--custom-admonition-background-color: var(--strapi-warning-100);
|
||||
--custom-admonition-border-color: var(--strapi-warning-500);
|
||||
--custom-admonition-code-background-color: var(--strapi-warning-200);
|
||||
--custom-admonition-code-color: var(--strapi-warning-600);
|
||||
--custom-admonition-heading-color: var(--strapi-warning-700);
|
||||
|
||||
--custom-selection-background-color: var(--strapi-warning-700);
|
||||
--custom-selection-color: var(--strapi-warning-100);
|
||||
}
|
||||
|
||||
&--danger,
|
||||
&--warning {
|
||||
--custom-admonition-background-color: var(--strapi-danger-100);
|
||||
--custom-admonition-border-color: var(--strapi-danger-500);
|
||||
--custom-admonition-code-background-color: var(--strapi-danger-200);
|
||||
--custom-admonition-code-color: var(--strapi-danger-600);
|
||||
--custom-admonition-heading-color: var(--strapi-danger-700);
|
||||
|
||||
--custom-selection-background-color: var(--strapi-danger-700);
|
||||
--custom-selection-color: var(--strapi-danger-100);
|
||||
}
|
||||
|
||||
&--strapi {
|
||||
--custom-admonition-background-color: var(--strapi-primary-100);
|
||||
--custom-admonition-border-color: var(--strapi-primary-500);
|
||||
--custom-admonition-code-background-color: var(--strapi-primary-200);
|
||||
--custom-admonition-code-color: var(--strapi-primary-600);
|
||||
--custom-admonition-heading-color: var(--strapi-primary-700);
|
||||
|
||||
--custom-selection-background-color: var(--strapi-primary-700);
|
||||
--custom-selection-color: var(--strapi-primary-100);
|
||||
}
|
||||
|
||||
&--subtle {
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
border: solid 1px var(--strapi-neutral-500);
|
||||
font-size: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 997px) {
|
||||
[class*="sbs-column"]:nth-of-type(2) .theme-admonition--subtle {
|
||||
margin-left: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
/** Dark mode */
|
||||
@include dark {
|
||||
.theme-admonition {
|
||||
// --custom-admonition-color: var(--strapi-neutral-150);
|
||||
--custom-admonition-background-color: var(--strapi-neutral-100);
|
||||
--custom-admonition-code-background-color: var(--strapi-neutral-200);
|
||||
|
||||
&--info,
|
||||
&--callout,
|
||||
&--prerequisites {
|
||||
--custom-admonition-code-color: var(--strapi-primary-500);
|
||||
--custom-admonition-heading-color: var(--strapi-neutral-500);
|
||||
}
|
||||
|
||||
&--note {
|
||||
--custom-admonition-code-color: var(--strapi-secondary-500);
|
||||
--custom-admonition-heading-color: var(--strapi-secondary-500);
|
||||
}
|
||||
|
||||
&--tip,
|
||||
&--success {
|
||||
--custom-admonition-code-color: var(--strapi-success-500);
|
||||
--custom-admonition-heading-color: var(--strapi-success-500);
|
||||
}
|
||||
|
||||
&--caution,
|
||||
&--warning {
|
||||
--custom-admonition-code-color: var(--strapi-warning-500);
|
||||
--custom-admonition-heading-color: var(--strapi-warning-500);
|
||||
}
|
||||
|
||||
&--danger {
|
||||
--custom-admonition-code-color: var(--strapi-danger-500);
|
||||
--custom-admonition-heading-color: var(--strapi-danger-500);
|
||||
}
|
||||
|
||||
&--strapi {
|
||||
--custom-admonition-code-color: var(--strapi-primary-500);
|
||||
--custom-admonition-heading-color: var(--strapi-primary-500);
|
||||
}
|
||||
|
||||
code,
|
||||
a code {
|
||||
--custom-code-border-color: transparent;
|
||||
--custom-code-background-color: var(--custom-admonition-code-background-color);
|
||||
--custom-code-color: var(--custom-admonition-code-color);
|
||||
}
|
||||
|
||||
.strapi-iqb {
|
||||
--strapi-iqb-background-color: var(--strapi-neutral-0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
/** Component: API Call / Request / Response */
|
||||
|
||||
:root {
|
||||
--custom-api-call-gap: var(--strapi-spacing-4);
|
||||
--custom-api-call-heading-font-size: var(--strapi-font-size-sm);
|
||||
--custom-api-call-heading-font-weight: 700;
|
||||
--custom-api-call-heading-py: var(--strapi-spacing-2);
|
||||
--custom-api-call-heading-px: var(--strapi-spacing-4);
|
||||
--custom-api-call-radius: var(--strapi-spacing-2);
|
||||
--custom-api-call-response-heading-background-color: var(--strapi-neutral-200);
|
||||
--custom-api-call-response-content-background-color: var(--strapi-neutral-300);
|
||||
--custom-api-call-request-heading-background-color: var(--strapi-neutral-100);
|
||||
--custom-api-call-request-content-background-color: var(--strapi-neutral-150);
|
||||
}
|
||||
|
||||
.api-call {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: var(--custom-api-call-gap);
|
||||
margin-bottom: var(--custom-api-call-gap);
|
||||
|
||||
&__request__content,
|
||||
&__request__heading,
|
||||
&__response__content,
|
||||
&__response__heading {
|
||||
background-color: var(--custom-api-call-background-color);
|
||||
color: var(--custom-api-call-color);
|
||||
}
|
||||
|
||||
&__request,
|
||||
&__response {
|
||||
border-radius: var(--custom-api-call-radius);
|
||||
|
||||
&__heading,
|
||||
&__content {
|
||||
*:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__heading {
|
||||
border-top-left-radius: var(--custom-api-call-radius);
|
||||
border-top-right-radius: var(--custom-api-call-radius);
|
||||
font-size: var(--custom-api-call-heading-font-size);
|
||||
font-weight: var(--custom-api-call-heading-font-weight);
|
||||
padding: var(--custom-api-call-heading-py) var(--custom-api-call-heading-px);
|
||||
}
|
||||
|
||||
&__content {
|
||||
border-bottom-left-radius: var(--custom-api-call-radius);
|
||||
border-bottom-right-radius: var(--custom-api-call-radius);
|
||||
padding: var(--custom-api-call-content-py) var(--custom-api-call-content-px);
|
||||
}
|
||||
}
|
||||
|
||||
&__request {
|
||||
&__heading {
|
||||
--custom-api-call-background-color: var(--custom-api-call-request-heading-background-color);
|
||||
}
|
||||
|
||||
&__content {
|
||||
--custom-api-call-background-color: var(--custom-api-call-request-content-background-color);
|
||||
--custom-api-call-content-py: var(--custom-api-call-heading-px);
|
||||
--custom-api-call-content-px: var(--custom-api-call-heading-px);
|
||||
|
||||
--custom-code-block-background-color: var(--custom-api-call-response-heading-background-color);
|
||||
|
||||
--custom-code-background-color: var(--custom-api-call-response-heading-background-color);
|
||||
--custom-code-border-color: transparent;
|
||||
--custom-code-color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
&__response {
|
||||
&__heading {
|
||||
--custom-api-call-background-color: var(--custom-api-call-request-content-background-color);
|
||||
}
|
||||
|
||||
&__content {
|
||||
--custom-api-call-background-color: var(--custom-api-call-request-content-background-color);
|
||||
|
||||
--custom-code-block-background-color: var(--custom-api-call-response-content-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
.theme-code-block {
|
||||
border-radius: var(--custom-api-call-radius);
|
||||
}
|
||||
}
|
||||
|
||||
/** Dark mode */
|
||||
@include dark {
|
||||
--custom-api-call-color: var(--strapi-neutral-1000);
|
||||
|
||||
--custom-api-call-request-heading-background-color: var(--strapi-neutral-300);
|
||||
--custom-api-call-request-content-background-color: var(--strapi-neutral-200);
|
||||
|
||||
--custom-api-call-response-heading-background-color: var(--strapi-neutral-150);
|
||||
--custom-api-call-response-content-background-color: var(--strapi-neutral-100);
|
||||
|
||||
.api-call {
|
||||
&__request {
|
||||
&__content {
|
||||
pre {
|
||||
--custom-code-block-background-color: var(--custom-api-call-response-heading-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__response {
|
||||
&__content {
|
||||
pre {
|
||||
--custom-code-block-background-color: var(--custom-api-call-response-content-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
/** Component: Feature Badges (alpha, beta) */
|
||||
|
||||
.badge {
|
||||
--custom-badge-background-color: var(--strapi-neutral-200);
|
||||
--custom-badge-color: var(--strapi-neutral-800);
|
||||
--custom-badge-font-size: var(--strapi-font-size-sm);
|
||||
|
||||
--custom-selection-background-color: var(--custom-badge-color);
|
||||
|
||||
--ifm-badge-background-color: var(--custom-badge-background-color);
|
||||
--ifm-badge-color: var(--custom-badge-color);
|
||||
--ifm-badge-border-radius: var(--strapi-spacing-1);
|
||||
--ifm-badge-padding-horizontal: var(--strapi-spacing-2);
|
||||
--ifm-badge-padding-vertical: var(--strapi-spacing-2);
|
||||
|
||||
--ifm-font-weight-bold: var(--strapi-font-size-sm);
|
||||
--ifm-link-color: var(--ifm-badge-color);
|
||||
--ifm-link-hover-color: var(--ifm-badge-color);
|
||||
|
||||
position: relative;
|
||||
top: var(--custom-badge-inside-titles-top);
|
||||
font-size: var(--custom-badge-font-size);
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.3px;
|
||||
text-align: center;
|
||||
|
||||
&-link {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&--alpha {
|
||||
--custom-badge-background-color: rgb(255,230,228);
|
||||
--custom-badge-color: rgb(219, 0, 22);
|
||||
}
|
||||
|
||||
&--beta {
|
||||
--custom-badge-background-color: rgb(246, 228, 253);
|
||||
--custom-badge-color: rgb(160,25,240);
|
||||
}
|
||||
|
||||
&--future {
|
||||
--custom-badge-background-color: var(--strapi-danger-200);
|
||||
--custom-badge-color: rgb(219, 0, 22);
|
||||
}
|
||||
|
||||
&--enterprise {
|
||||
--custom-badge-background-color: rgb(255, 241, 209);
|
||||
--custom-badge-color: rgb(229, 136, 41);
|
||||
}
|
||||
|
||||
&--strapicloudpro {
|
||||
--custom-badge-background-color: rgb(55, 34, 254);
|
||||
--custom-badge-color: #fff;
|
||||
}
|
||||
|
||||
&--strapicloudteam {
|
||||
--custom-badge-background-color: rgb(154, 53, 242);
|
||||
--custom-badge-color: #fff;
|
||||
}
|
||||
&--strapiclouddev {
|
||||
--custom-badge-background-color: rgb(44,170,73);
|
||||
--custom-badge-color: #fff;
|
||||
}
|
||||
|
||||
&--new {
|
||||
--custom-badge-background-color: var(--strapi-warning-100);
|
||||
--custom-badge-border-color: var(--strapi-warning-200);
|
||||
--custom-badge-color: var(--strapi-warning-700);
|
||||
|
||||
--ifm-badge-padding-horizontal: 2px;
|
||||
--ifm-badge-padding-vertical: 2px;
|
||||
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
letter-spacing: -0.5px;
|
||||
text-transform: uppercase;
|
||||
min-width: 52px;
|
||||
border: 1px solid var(--custom-badge-border-color);
|
||||
}
|
||||
|
||||
|
||||
&--updated {
|
||||
--custom-badge-background-color: var(--strapi-secondary-100);
|
||||
--custom-badge-border-color: var(--strapi-secondary-200);
|
||||
--custom-badge-color: var(--strapi-secondary-600);
|
||||
|
||||
--ifm-badge-padding-horizontal: 2px;
|
||||
--ifm-badge-padding-vertical: 2px;
|
||||
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
letter-spacing: -0.5px;
|
||||
text-transform: uppercase;
|
||||
min-width: 52px;
|
||||
border: 1px solid var(--custom-badge-border-color);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h1 .badge {
|
||||
--custom-badge-inside-titles-top: -.4em;
|
||||
}
|
||||
|
||||
h2 .badge {
|
||||
--custom-badge-inside-titles-top: -.3em;
|
||||
}
|
||||
|
||||
/** Dark mode */
|
||||
@include dark {
|
||||
.badge {
|
||||
&--new {
|
||||
--custom-badge-background-color: var(--strapi-neutral-100);
|
||||
--custom-badge-border-color: var(--strapi-warning-500);
|
||||
--custom-badge-color: var(--strapi-warning-500);
|
||||
}
|
||||
&--updated {
|
||||
--custom-badge-background-color: var(--strapi-neutral-100);
|
||||
--custom-badge-border-color: var(--strapi-secondary-500);
|
||||
--custom-badge-color: var(--strapi-secondary-500);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
/** Component: Breadcrumbs */
|
||||
|
||||
.breadcrumbs {
|
||||
--ifm-breadcrumb-item-background-active: transparent;
|
||||
--ifm-breadcrumb-border-radius: var(--strapi-spacing-1);
|
||||
--ifm-breadcrumb-color-active: var(--strapi-neutral-800);
|
||||
--ifm-link-hover-color: var(--strapi-neutral-700);
|
||||
|
||||
--custom-breadcrumbs-font-size: var(--strapi-font-size-xs);
|
||||
--custom-breadcrumbs-pt: var(--strapi-spacing-4);
|
||||
--custom-breadcrumbs-item-caret-mx: var(--strapi-spacing-1);
|
||||
|
||||
padding: var(--custom-breadcrumbs-pt) 0 0;
|
||||
|
||||
&__item {
|
||||
&:after {
|
||||
--ifm-breadcrumb-spacing: var(--custom-breadcrumbs-item-caret-mx);
|
||||
}
|
||||
|
||||
&--active {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
background-color: transparent;
|
||||
font-size: var(--custom-breadcrumbs-font-size);
|
||||
|
||||
@include transition;
|
||||
|
||||
&:any-link:hover {
|
||||
--ifm-breadcrumb-item-background-active: var(--strapi-neutral-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include medium-up {
|
||||
.breadcrumbs {
|
||||
--custom-breadcrumbs-pt: var(--strapi-spacing-6);
|
||||
--custom-breadcrumbs-item-caret-mx: var(--strapi-spacing-3);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
/** Component: Card */
|
||||
|
||||
:root body {
|
||||
--custom-card-border-color: var(--strapi-neutral-200);
|
||||
|
||||
--ifm-card-background-color: var(--strapi-neutral-0);
|
||||
--ifm-card-border-radius: var(--strapi-spacing-1);
|
||||
}
|
||||
|
||||
.card {
|
||||
--ifm-color-emphasis-200: var(--custom-card-border-color);
|
||||
|
||||
border: 1px solid var(--custom-card-border-color);
|
||||
box-shadow: 0px 1px 4px rgba(33, 33, 52, 0.1) !important;
|
||||
@include transition;
|
||||
|
||||
&[href] {
|
||||
color: var(--strapi-neutral-600);
|
||||
|
||||
&:hover {
|
||||
--ifm-color-primary: var(--strapi-neutral-300);
|
||||
|
||||
box-shadow: 0px 2px 15px rgba(33, 33, 52, 0.1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
--ifm-h2-font-size: var(--strapi-font-size-md);
|
||||
margin-bottom: var(--strapi-spacing-2);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: var(--strapi-font-size-sm);
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Dark mode */
|
||||
@include dark {
|
||||
.card {
|
||||
&[href] {
|
||||
color: var(--strapi-neutral-700);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
/** Components: Columns */
|
||||
|
||||
.column {
|
||||
&__title {
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--strapi-spacing-1);
|
||||
}
|
||||
}
|
||||
|
||||
/** Responsive */
|
||||
@include medium-up {
|
||||
.columns {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--strapi-spacing-4);
|
||||
|
||||
> .column {
|
||||
flex: 1;
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
/** Component: Container */
|
||||
|
||||
.container {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
/** Component: CustomDocCardWrapper */
|
||||
|
||||
.custom-cards-wrapper {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
max-width: 715px;
|
||||
justify-content: flex-start;
|
||||
|
||||
.custom-doc-card {
|
||||
max-width: 320px;
|
||||
width: 320px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 20px;
|
||||
|
||||
a {
|
||||
height: 170px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/** Component: CustomDocCard */
|
||||
.custom-doc-card {
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
.cardTitle {
|
||||
color: var(--strapi-primary-600);
|
||||
}
|
||||
}
|
||||
|
||||
.text--truncate.cardDescription {
|
||||
// cancel --truncate styles since we can't remove the' class
|
||||
overflow: auto;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-doc-card--small {
|
||||
.cardTitle {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
/** Component: Details/Accordion */
|
||||
|
||||
details.alert {
|
||||
--docusaurus-details-decoration-color: var(--strapi-neutral-800);
|
||||
|
||||
--ifm-alert-background-color: var(--strapi-neutral-150);
|
||||
--ifm-alert-background-color-highlight: var(--strapi-neutral-500);
|
||||
--ifm-alert-border-radius: var(--strapi-spacing-1);
|
||||
--ifm-alert-foreground-color: var( --ifm-color-info-contrast-foreground );
|
||||
--ifm-alert-border-color: transparent;
|
||||
|
||||
--ifm-tabs-color-active: var(--ifm-color-primary);
|
||||
--ifm-tabs-color-active-border: var(--ifm-color-primary);
|
||||
|
||||
summary {
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/** Content element */
|
||||
> div > div {
|
||||
--docusaurus-details-decoration-color: transparent;
|
||||
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--custom-code-color);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: var(--ifm-link-decoration);
|
||||
}
|
||||
}
|
||||
|
||||
@include dark {
|
||||
details a {
|
||||
color: var(--strapi-primary-500);
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
/** Component: Footer */
|
||||
|
||||
.footer {
|
||||
a {
|
||||
@include transition;
|
||||
font-weight: 400;
|
||||
|
||||
&:hover {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
&.footer--dark {
|
||||
--ifm-footer-background-color: var(--strapi-neutral-700);
|
||||
--ifm-footer-link-hover-color: var(--strapi-neutral-0);
|
||||
}
|
||||
}
|
||||
|
||||
/** Dark mode */
|
||||
@include dark {
|
||||
.footer {
|
||||
&.footer--dark {
|
||||
--ifm-footer-background-color: var(--strapi-neutral-150);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
/** Component: Grid */
|
||||
|
||||
.row {
|
||||
--custom-grid-spacing: var(--strapi-spacing-2);
|
||||
--ifm-spacing-horizontal: var(--custom-grid-spacing);
|
||||
|
||||
.col {
|
||||
&.margin-bottom--lg {
|
||||
margin-bottom: calc(var(--custom-grid-spacing) * 2) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Responsive */
|
||||
@include medium-up {
|
||||
.row {
|
||||
&--huge {
|
||||
--custom-grid-spacing: var(--strapi-spacing-4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
/** General: Images */
|
||||
|
||||
/** Dark Mode images border */
|
||||
.theme-doc-markdown.markdown [class*="themedImage--dark"] {
|
||||
border: 0.125rem solid var(--strapi-neutral-200);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
/** Component: Markdown */
|
||||
|
||||
$selector-markdown: ".theme-doc-markdown.markdown";
|
||||
|
||||
#{$selector-markdown} {
|
||||
--custom-markdown-pt: var(--strapi-spacing-0);
|
||||
--custom-markdown-pb: var(--strapi-spacing-2);
|
||||
|
||||
--markdown-link-color: var(--strapi-primary-600);
|
||||
|
||||
font-weight: 400;
|
||||
padding: var(--custom-markdown-pt) 0 var(--custom-markdown-pb);
|
||||
}
|
||||
|
||||
/** Dark mode */
|
||||
@include dark {
|
||||
#{$selector-markdown} {
|
||||
--markdown-link-color: var(--strapi-primary-600);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
/** Component: Medium Zoom */
|
||||
|
||||
.medium-zoom {
|
||||
&-overlay {
|
||||
background: var(--strapi-neutral-150) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/** Responsive */
|
||||
@include medium-up {
|
||||
.medium-zoom {
|
||||
&-image {
|
||||
&--opened {
|
||||
margin-top: var(--ifm-navbar-height) !important;
|
||||
margin-bottom: var(--ifm-navbar-height) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
/** Component: Navbar */
|
||||
|
||||
$selector-color-mode-toggle-button: 'button[class*="ColorModeToggle"]';
|
||||
$selector-color-mode-toggle-wrapper: 'div[class*="ColorModeToggle"]';
|
||||
|
||||
:root body {
|
||||
--docsearch-searchbox-background: var(--strapi-neutral-150);
|
||||
--docsearch-searchbox-shadow: 0 0 0 2px var(--strapi-primary-600);
|
||||
--docsearch-muted-color: var(--strapi-neutral-400);
|
||||
--docsearch-text-color: var(--strapi-neutral-400);
|
||||
|
||||
--ifm-navbar-height: 56px;
|
||||
--ifm-navbar-padding-vertical: var(--strapi-spacing-1);
|
||||
--ifm-navbar-padding-horizontal: var(--strapi-spacing-2);
|
||||
--ifm-navbar-shadow: 0 1px 0 0 var(--strapi-neutral-150);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
--custom-navbar-brand-mr: 0;
|
||||
--custom-navbar-icon-color: var(--strapi-neutral-500);
|
||||
--custom-navbar-icon-button-size: 36px;
|
||||
--custom-navbar-icon-button-hover-background: var(--strapi-neutral-100);
|
||||
--custom-navbar-items-font-size: var(--strapi-font-size-sm);
|
||||
--custom-navbar-items-gap: var(--strapi-spacing-3);
|
||||
--custom-navbar-logo-img-width: 150px;
|
||||
--custom-navbar-toggle-mr: var(--strapi-spacing-1);
|
||||
--custom-navbar-transition: all 0.2s ease;
|
||||
|
||||
--ifm-navbar-padding-horizontal: var(--custom-navbar-items-gap);
|
||||
|
||||
transition: var(--custom-navbar-transition);
|
||||
|
||||
&__items {
|
||||
max-width: var(--custom-navbar-items-width);
|
||||
gap: var(--strapi-spacing-2);
|
||||
}
|
||||
|
||||
&__brand,
|
||||
&__logo {
|
||||
height: auto;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
&__brand {
|
||||
margin-right: var(--custom-navbar-brand-mr);
|
||||
}
|
||||
|
||||
&__toggle {
|
||||
margin-right: var(--custom-navbar-toggle-mr);
|
||||
}
|
||||
|
||||
&__logo {
|
||||
margin-right: 0;
|
||||
|
||||
img {
|
||||
height: var(--custom-navbar-logo-img-height);
|
||||
width: var(--custom-navbar-logo-img-width);
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
--ifm-font-weight-semibold: 500;
|
||||
--ifm-navbar-link-hover-color: var(--strapi-neutral-800);
|
||||
|
||||
font-size: var(--custom-navbar-items-font-size);
|
||||
|
||||
&--active {
|
||||
--ifm-font-weight-semibold: 700;
|
||||
}
|
||||
}
|
||||
|
||||
&__link svg,
|
||||
.navbar-sidebar__close,
|
||||
.DocSearch-Button,
|
||||
#{$selector-color-mode-toggle-button} {
|
||||
color: var(--custom-navbar-icon-color);
|
||||
}
|
||||
|
||||
.navbar-sidebar__close,
|
||||
.DocSearch-Button,
|
||||
#{$selector-color-mode-toggle-button} {
|
||||
--ifm-color-emphasis-600: currentColor;
|
||||
|
||||
background: transparent;
|
||||
border-radius: 50%;
|
||||
|
||||
&:hover {
|
||||
background: var(--custom-navbar-icon-button-hover-background);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar__toggle,
|
||||
.navbar-sidebar__close,
|
||||
#{$selector-color-mode-toggle-wrapper} {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: var(--custom-navbar-icon-button-size);
|
||||
width: var(--custom-navbar-icon-button-size);
|
||||
}
|
||||
|
||||
.DocSearch-Button {
|
||||
width: var(--custom-navbar-search-button-width);
|
||||
}
|
||||
}
|
||||
|
||||
/** Responsive */
|
||||
@include small-up {
|
||||
.navbar {
|
||||
.DocSearch-Button {
|
||||
--custom-navbar-icon-button-hover-background: var(--strapi-neutral-0);
|
||||
|
||||
color: var(--strapi-neutral-400);
|
||||
border: var(--strapi-input-border);
|
||||
border-radius: 6px;
|
||||
font-family: var(--ifm-font-family-base);
|
||||
height: 40px;
|
||||
padding: 0 var(--strapi-spacing-3);
|
||||
background-color: var(--custom-navbar-icon-button-hover-background);
|
||||
|
||||
svg path {
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
&-Container {
|
||||
gap: var(--strapi-spacing-1);
|
||||
}
|
||||
|
||||
&-Placeholder,
|
||||
&-Key {
|
||||
font-size: var(--custom-navbar-items-font-size);
|
||||
}
|
||||
|
||||
&-Key {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
font-weight: 600;
|
||||
line-height: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:first-of-type {
|
||||
font-size: 150%;
|
||||
}
|
||||
}
|
||||
|
||||
&-Keys {
|
||||
padding: 2px 0 0;
|
||||
justify-content: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Responsive */
|
||||
@include medium-up {
|
||||
.navbar {
|
||||
--custom-navbar-brand-mr: 60px;
|
||||
--custom-navbar-items-gap: var(--strapi-spacing-4);
|
||||
--custom-navbar-search-button-width: 266px;
|
||||
|
||||
--ifm-navbar-padding-horizontal: var(--custom-navbar-items-gap);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
/** Component: Pagination Nav */
|
||||
|
||||
.pagination-nav {
|
||||
--ifm-spacing-horizontal: var(--strapi-spacing-4);
|
||||
|
||||
&__link {
|
||||
&:hover {
|
||||
--ifm-pagination-nav-color-hover: var(--custom-card-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
/** Component: Scene */
|
||||
|
||||
#scene {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
/** Component: Search */
|
||||
|
||||
:root body {
|
||||
--docsearch-hit-height: 56px;
|
||||
--docsearch-searchbox-height: 40px;
|
||||
--docsearch-spacing: var(--strapi-spacing-4);
|
||||
}
|
||||
|
||||
body .DocSearch {
|
||||
--custom-search-hit-pb: var(--strapi-spacing-2);
|
||||
|
||||
&-SearchBar {
|
||||
padding-bottom: var(--strapi-spacing-1);
|
||||
}
|
||||
|
||||
&-Input {
|
||||
--docsearch-text-color: var(--strapi-neutral-800);
|
||||
}
|
||||
|
||||
&-Input,
|
||||
&-Cancel {
|
||||
font-size: var(--strapi-font-size-md);
|
||||
}
|
||||
|
||||
&-Hit {
|
||||
padding-bottom: var(--custom-search-hit-pb);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,221 @@
|
|||
/** Component: Sidebar / Menu */
|
||||
|
||||
$selector-color-mode-toggle-button: 'button[class*="ColorModeToggle"]';
|
||||
$selector-color-mode-toggle-wrapper: 'div[class*="ColorModeToggle"]';
|
||||
|
||||
:root body {
|
||||
--doc-sidebar-width: 290px;
|
||||
}
|
||||
|
||||
.navbar-sidebar {
|
||||
--ifm-navbar-background-color: var(--strapi-neutral-0);
|
||||
|
||||
&__brand {
|
||||
--custom-navbar-sidebar-horizontal-padding: calc(var(--custom-navbar-items-gap) * 2);
|
||||
--ifm-navbar-padding-horizontal:
|
||||
var(--custom-navbar-items-gap)
|
||||
var(--ifm-navbar-padding-vertical)
|
||||
var(--custom-navbar-sidebar-horizontal-padding)
|
||||
;
|
||||
}
|
||||
|
||||
&__back {
|
||||
--ifm-menu-color-background-active: var(--strapi-neutral-100);
|
||||
top: -0.95rem;
|
||||
margin-bottom: -0.45rem;
|
||||
}
|
||||
|
||||
.navbar__brand {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.navbar-sidebar__close,
|
||||
#{$selector-color-mode-toggle-wrapper} {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.navbar-sidebar__close {
|
||||
margin-left: initial;
|
||||
padding: 9px;
|
||||
}
|
||||
|
||||
#{$selector-color-mode-toggle-wrapper} {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
--custom-sidebar-caret-size: 1.25rem;
|
||||
--custom-sidebar-menu-font-weight: 400;
|
||||
--custom-sidebar-menu-padding-y: var(--strapi-spacing-4);
|
||||
|
||||
--ifm-menu-color-background-active: transparent;
|
||||
--ifm-menu-color-background-hover: var(--strapi-neutral-100);
|
||||
--ifm-menu-link-padding-vertical: var(--strapi-spacing-1);
|
||||
|
||||
font-weight: var(--custom-sidebar-menu-font-weight);
|
||||
padding-top: var(--custom-sidebar-menu-padding-y) !important;
|
||||
|
||||
&__caret {
|
||||
margin: 0 0 0 3px;
|
||||
padding: 0;
|
||||
|
||||
&:before {
|
||||
background-size: var(--custom-sidebar-caret-size);
|
||||
}
|
||||
}
|
||||
|
||||
&__caret,
|
||||
&__caret:before {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
&__list {
|
||||
&-item {
|
||||
font-size: var(--custom-sidebar-menu-list-item-font-size, --strapi-font-size-md);
|
||||
|
||||
&-collapsible {
|
||||
&:hover {
|
||||
background-color: var(--ifm-menu-color-background-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
font-weight: 500;
|
||||
min-height: var(--custom-menu-item-link-min-height, 24px);
|
||||
@include transition;
|
||||
|
||||
&:hover {
|
||||
--ifm-menu-color: var(--strapi-neutral-800);
|
||||
}
|
||||
|
||||
&--active {
|
||||
--ifm-menu-color-active: var(--strapi-neutral-700);
|
||||
|
||||
font-weight: 700;
|
||||
|
||||
&:not(.menu__link--sublist) {
|
||||
--ifm-menu-color-active: var(--strapi-primary-600);
|
||||
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: " ";
|
||||
width: 5px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: var(--custom-sidebar-menu-list-item-link-active-left, -8px);
|
||||
background-color: var(--strapi-primary-600);
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--sublist-caret {
|
||||
--ifm-menu-color: var(--strapi-neutral-800);
|
||||
--ifm-menu-color-active: var(--strapi-neutral-800);
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&--sublist {
|
||||
&.menu__link--with-badge {
|
||||
--custom-menu-link-content-mw: calc(100% - 84px);
|
||||
}
|
||||
}
|
||||
|
||||
&--with-badge {
|
||||
max-width: 100%;
|
||||
|
||||
.menu__link__content {
|
||||
max-width: var(--custom-menu-link-content-mw, calc(100% - 56px));
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__link__content {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
margin: -1px 0 -1px auto;
|
||||
}
|
||||
|
||||
.theme-doc-sidebar {
|
||||
&-item {
|
||||
&-category {
|
||||
&-level-1 {
|
||||
--custom-sidebar-menu-list-item-py: var(--strapi-spacing-1);
|
||||
|
||||
padding-top: var(--custom-sidebar-menu-list-item-py);
|
||||
padding-bottom: var(--custom-sidebar-menu-list-item-py);
|
||||
|
||||
> .menu__list-item-collapsible {
|
||||
font-weight: 700;
|
||||
font-size: var(--strapi-font-size-md);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-category, &-link {
|
||||
&-level {
|
||||
&-1 {
|
||||
--custom-sidebar-menu-list-item-font-size: var(--strapi-font-size-md);
|
||||
}
|
||||
|
||||
&-2 {
|
||||
--custom-sidebar-menu-list-item-font-size: var(--strapi-font-size-sm); // next levels will have this same value
|
||||
--custom-sidebar-menu-list-item-link-active-left: -30px;
|
||||
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
&-3 {
|
||||
--custom-sidebar-menu-list-item-link-active-left: -42px;
|
||||
}
|
||||
|
||||
&-4 {
|
||||
--custom-sidebar-menu-list-item-link-active-left: -54px;
|
||||
}
|
||||
|
||||
&-5 {
|
||||
--custom-sidebar-menu-list-item-link-active-left: -66px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.theme-doc-sidebar-container {
|
||||
--docusaurus-collapse-button-bg: var(--strapi-neutral-0);
|
||||
--docusaurus-collapse-button-bg-hover: var(--strapi-neutral-100);
|
||||
}
|
||||
|
||||
/** Dark mode */
|
||||
@include dark {
|
||||
--ifm-menu-color: var(--strapi-neutral-1000);
|
||||
|
||||
.theme-doc-sidebar-container {
|
||||
.menu {
|
||||
--ifm-menu-color-background-hover: var(--strapi-neutral-100);
|
||||
|
||||
&__link--active {
|
||||
--ifm-menu-color-active: var(--strapi-neutral-800);
|
||||
|
||||
&:not(.menu__link--sublist) {
|
||||
--ifm-menu-color-active: var(--strapi-primary-500);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
/** Component: Table of Contents */
|
||||
|
||||
.table-of-contents {
|
||||
--custom-toc-py: var(--strapi-spacing-1);
|
||||
--custom-toc-items-py: var(--strapi-spacing-0);
|
||||
|
||||
--ifm-toc-padding-vertical: var(--custom-toc-py);
|
||||
|
||||
font-size: var(--strapi-font-size-xs);
|
||||
|
||||
> li {
|
||||
margin: 0 var(--ifm-toc-padding-horizontal);
|
||||
padding-top: var(--custom-toc-items-py);
|
||||
padding-bottom: var(--custom-toc-items-py);
|
||||
}
|
||||
|
||||
&__link {
|
||||
--custom-table-of-contents-link-active-before-left: -16px;
|
||||
|
||||
position: relative;
|
||||
font-weight: 400;
|
||||
|
||||
@include transition;
|
||||
|
||||
&:hover {
|
||||
font-weight: 500;
|
||||
|
||||
&:not(.table-of-contents__link--active) {
|
||||
--ifm-color-primary: var(--strapi-neutral-900);
|
||||
}
|
||||
}
|
||||
|
||||
&--active {
|
||||
font-weight: 500;
|
||||
|
||||
&:before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: var(--custom-table-of-contents-link-active-before-left);
|
||||
width: 3px;
|
||||
border-radius: 0 2px 2px 0;
|
||||
background-color: var(--strapi-primary-600);
|
||||
}
|
||||
}
|
||||
|
||||
+ ul li .table-of-contents {
|
||||
&__link {
|
||||
--custom-table-of-contents-link-active-before-left: -32px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
max-width: 22px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Responsive */
|
||||
@include medium-up {
|
||||
.table-of-contents {
|
||||
--custom-toc-items-py: var(--strapi-spacing-2);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
/** Component: Table */
|
||||
table {
|
||||
min-width: 100%;
|
||||
overflow: auto;
|
||||
|
||||
thead {
|
||||
--ifm-table-background: transparent;
|
||||
--ifm-table-stripe-background: transparent;
|
||||
|
||||
tr {
|
||||
border-bottom-width: 1px;
|
||||
|
||||
th {
|
||||
--ifm-table-head-background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
/** Component: Tab */
|
||||
|
||||
:root body {
|
||||
--custom-tabs-px: var(--strapi-spacing-5);
|
||||
--custom-tabs-py: var(--strapi-spacing-2);
|
||||
|
||||
--ifm-tabs-padding-horizontal: var(--custom-tabs-px);
|
||||
--ifm-tabs-padding-vertical: var(--custom-tabs-py);
|
||||
}
|
||||
|
||||
.tabs {
|
||||
&__item {
|
||||
border-top: 2px solid transparent;
|
||||
}
|
||||
|
||||
/** Tabs inside Tabs */
|
||||
+ div {
|
||||
[role="tabpanel"] {
|
||||
.tabs {
|
||||
font-size: var(--strapi-font-size-ssm);
|
||||
|
||||
&__item {
|
||||
&--active {
|
||||
--ifm-tabs-color-active-border: transparent;
|
||||
|
||||
background-color: var(--ifm-hover-overlay);
|
||||
}
|
||||
}
|
||||
|
||||
+ [class*="margin-top"] {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Tabs inside Details component */
|
||||
details {
|
||||
.tabs {
|
||||
--ifm-tabs-color-active-border: var(--strapi-)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
/** General: Typography */
|
||||
|
||||
:root {
|
||||
--custom-heading-decorative-line-color: var(--strapi-neutral-150);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
--ifm-heading-color: var(--strapi-neutral-900);
|
||||
--ifm-heading-font-weight: 600;
|
||||
--ifm-code-font-size: 70%;
|
||||
}
|
||||
|
||||
h1, .markdown h1:first-child {
|
||||
--ifm-h1-font-size: 35px;
|
||||
// --ifm-heading-line-height: 24px; // not good
|
||||
}
|
||||
|
||||
h2, .markdown > h2 {
|
||||
--ifm-h2-font-size: 26px;
|
||||
// --ifm-heading-line-height: 24px; // not good
|
||||
}
|
||||
|
||||
h3, .markdown > h3 {
|
||||
--ifm-h3-font-size: var(--strapi-font-size-lg);
|
||||
@include flex-row;
|
||||
}
|
||||
|
||||
h2 {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -10px;
|
||||
height: 1px;
|
||||
background-color: var(--custom-heading-decorative-line-color);
|
||||
}
|
||||
}
|
||||
|
||||
p, ul {
|
||||
img {
|
||||
display: inline-block;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
}
|
||||
|
||||
/** Dark mode */
|
||||
@include dark {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
--ifm-heading-color: var(--strapi-neutral-900);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import { ThemeClassNames } from '@docusaurus/theme-common';
|
||||
|
||||
const defaultClassName = ThemeClassNames.common.admonition;
|
||||
const customDefaultProps = {
|
||||
note: {
|
||||
icon: '✏️',
|
||||
title: 'Note',
|
||||
},
|
||||
tip: {
|
||||
icon: '💡',
|
||||
title: 'Tip',
|
||||
},
|
||||
info: {
|
||||
icon: '👀',
|
||||
title: 'Info',
|
||||
},
|
||||
caution: {
|
||||
icon: '✋',
|
||||
title: 'Caution',
|
||||
},
|
||||
warning: {
|
||||
icon: '⚠️',
|
||||
title: 'Warning',
|
||||
},
|
||||
danger: {
|
||||
icon: '❗️',
|
||||
title: 'Warning',
|
||||
},
|
||||
strapi: {
|
||||
icon: '🤓',
|
||||
},
|
||||
prerequisites: {
|
||||
icon: '☑️',
|
||||
title: 'Prerequisites',
|
||||
},
|
||||
};
|
||||
|
||||
export default function CustomAdmonition({
|
||||
children,
|
||||
className,
|
||||
icon: propIcon,
|
||||
title: propTitle,
|
||||
type,
|
||||
...rest
|
||||
}) {
|
||||
const { icon: defaultIcon, title: defaultTitle } = (customDefaultProps[type] || {});
|
||||
const icon = (propIcon || defaultIcon);
|
||||
const title = (propTitle || defaultTitle);
|
||||
const shouldRenderHeading = !!(icon || title);
|
||||
|
||||
return (
|
||||
<div
|
||||
{...rest}
|
||||
className={clsx(
|
||||
defaultClassName,
|
||||
(type && `${defaultClassName}--${type}`),
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{shouldRenderHeading && (
|
||||
<div className={`${defaultClassName}__heading`}>
|
||||
{icon && (
|
||||
<span className={`${defaultClassName}__heading__icon`}>
|
||||
{icon}{' '}
|
||||
</span>
|
||||
)}
|
||||
{title}
|
||||
</div>
|
||||
)}
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
import React from 'react';
|
||||
// Import the original mapper
|
||||
import MDXComponents from '@theme-original/MDXComponents';
|
||||
/** Import built-in Docusaurus components at the global level
|
||||
* so we don't have to re-import them in every file
|
||||
*/
|
||||
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
|
||||
// Import custom components, globally as well
|
||||
import Request from '../components/Request';
|
||||
import Response from '../components/Response';
|
||||
import ApiCall from '../components/ApiCall';
|
||||
import SubtleCallout from '../components/SubtleCallout';
|
||||
import CustomDocCard from '../components/CustomDocCard';
|
||||
import CustomDocCardsWrapper from '../components/CustomDocCardsWrapper';
|
||||
|
||||
export default {
|
||||
// Re-use the default mapping
|
||||
...MDXComponents,
|
||||
|
||||
/**
|
||||
* Components below are imported within the global scope,
|
||||
* meaning you don't have to insert the typical 'import SomeStuff from '/path/to/stuff' line
|
||||
* at the top of a Markdown file before being able to use these components
|
||||
* — see https://docusaurus.io/docs/next/markdown-features/react#mdx-component-scope
|
||||
*/
|
||||
Request,
|
||||
Response,
|
||||
ApiCall,
|
||||
Tabs,
|
||||
TabItem,
|
||||
SubtleCallout,
|
||||
CustomDocCard,
|
||||
CustomDocCardsWrapper,
|
||||
};
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 164 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="16" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M30.5 6.99998V13C30.5 13.3978 30.342 13.7793 30.0607 14.0606C29.7794 14.3419 29.3978 14.5 29 14.5H23C22.6022 14.5 22.2207 14.3419 21.9394 14.0606C21.6581 13.7793 21.5 13.3978 21.5 13C21.5 12.6022 21.6581 12.2206 21.9394 11.9393C22.2207 11.658 22.6022 11.5 23 11.5H25.1375L22.7625 9.32748C22.7463 9.31248 22.73 9.29748 22.715 9.28123C21.6138 8.18068 20.259 7.36764 18.7697 6.91365C17.2805 6.45967 15.7025 6.37865 14.1746 6.67773C12.6467 6.97681 11.2157 7.64682 10.0076 8.6288C8.79944 9.61079 7.85115 10.8747 7.24616 12.3092C6.64117 13.7437 6.39801 15.305 6.53809 16.8555C6.67817 18.4061 7.19719 19.8985 8.04949 21.2014C8.90178 22.5043 10.0612 23.5777 11.4258 24.3273C12.7904 25.0769 14.3183 25.4796 15.875 25.5H16C18.4249 25.5058 20.7591 24.5784 22.5188 22.91C22.808 22.6366 23.194 22.4894 23.5918 22.5007C23.9896 22.5119 24.3667 22.6807 24.64 22.97C24.9134 23.2592 25.0606 23.6452 25.0493 24.043C25.0381 24.4408 24.8693 24.8179 24.58 25.0912C22.2636 27.2867 19.1916 28.5073 16 28.5H15.8288C13.7826 28.4711 11.7748 27.9404 9.98163 26.9543C8.18848 25.9682 6.66486 24.557 5.54454 22.8445C4.42423 21.132 3.74148 19.1706 3.55626 17.1326C3.37103 15.0946 3.68899 13.0423 4.48222 11.1559C5.27545 9.26953 6.51969 7.60673 8.10567 6.31352C9.69166 5.02032 11.5709 4.13628 13.5784 3.73902C15.5858 3.34176 17.6601 3.44343 19.6191 4.03511C21.5781 4.62679 23.3619 5.69037 24.8138 7.13248L27.5 9.58998V6.99998C27.5 6.60216 27.6581 6.22062 27.9394 5.93932C28.2207 5.65802 28.6022 5.49998 29 5.49998C29.3978 5.49998 29.7794 5.65802 30.0607 5.93932C30.342 6.22062 30.5 6.60216 30.5 6.99998Z" fill="#32324D"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="16" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M27.4874 5.33643H9.48737C8.95693 5.33643 8.44823 5.54714 8.07315 5.92221C7.69808 6.29728 7.48737 6.80599 7.48737 7.33643V9.33643H5.48737C4.95693 9.33643 4.44822 9.54714 4.07315 9.92221C3.69808 10.2973 3.48737 10.806 3.48737 11.3364V25.3364C3.48737 25.8669 3.69808 26.3756 4.07315 26.7506C4.44822 27.1257 4.95693 27.3364 5.48737 27.3364H23.4874C24.0178 27.3364 24.5265 27.1257 24.9016 26.7506C25.2767 26.3756 25.4874 25.8669 25.4874 25.3364V23.3364H27.4874C28.0178 23.3364 28.5265 23.1257 28.9016 22.7506C29.2767 22.3756 29.4874 21.8669 29.4874 21.3364V7.33643C29.4874 6.80599 29.2767 6.29728 28.9016 5.92221C28.5265 5.54714 28.0178 5.33643 27.4874 5.33643ZM23.4874 11.3364V13.3364H5.48737V11.3364H23.4874ZM27.4874 21.3364H25.4874V11.3364C25.4874 10.806 25.2767 10.2973 24.9016 9.92221C24.5265 9.54714 24.0178 9.33643 23.4874 9.33643H9.48737V7.33643H27.4874V21.3364Z" fill="#32324D"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 996 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM7.04153 8.62273L10.7723 5L12 6.16311L7.04153 10.9502L4.06641 8.21687L5.29347 7.05313L7.04153 8.62273Z" fill="#328048"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 381 B |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<ellipse cx="8" cy="8" rx="8" ry="8" fill="#D9822F"/>
|
||||
<path d="M8.63995 3.20508H7.19995V8.96508L11.2352 10.9891L11.96 9.80828L8.63995 8.24508V3.20508Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 270 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="16" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M28 6H4C3.46957 6 2.96086 6.21071 2.58579 6.58579C2.21071 6.96086 2 7.46957 2 8V24C2 24.5304 2.21071 25.0391 2.58579 25.4142C2.96086 25.7893 3.46957 26 4 26H28C28.5304 26 29.0391 25.7893 29.4142 25.4142C29.7893 25.0391 30 24.5304 30 24V8C30 7.46957 29.7893 6.96086 29.4142 6.58579C29.0391 6.21071 28.5304 6 28 6ZM17 22H15C14.7348 22 14.4804 21.8946 14.2929 21.7071C14.1054 21.5196 14 21.2652 14 21C14 20.7348 14.1054 20.4804 14.2929 20.2929C14.4804 20.1054 14.7348 20 15 20H17C17.2652 20 17.5196 20.1054 17.7071 20.2929C17.8946 20.4804 18 20.7348 18 21C18 21.2652 17.8946 21.5196 17.7071 21.7071C17.5196 21.8946 17.2652 22 17 22ZM25 22H21C20.7348 22 20.4804 21.8946 20.2929 21.7071C20.1054 21.5196 20 21.2652 20 21C20 20.7348 20.1054 20.4804 20.2929 20.2929C20.4804 20.1054 20.7348 20 21 20H25C25.2652 20 25.5196 20.1054 25.7071 20.2929C25.8946 20.4804 26 20.7348 26 21C26 21.2652 25.8946 21.5196 25.7071 21.7071C25.5196 21.8946 25.2652 22 25 22ZM4 11V8H28V11H4Z" fill="#32324D"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="8" cy="8" r="8" fill="#D02B20"/>
|
||||
<path d="M11.125 5.46136C11.2129 5.54923 11.2129 5.69169 11.125 5.77956L8.9046 8L11.125 10.2204C11.2129 10.3083 11.2129 10.4508 11.125 10.5386L10.5455 11.1182C10.4576 11.2061 10.3151 11.2061 10.2273 11.1182L8.00683 8.89777L5.78639 11.1182C5.69852 11.2061 5.55606 11.2061 5.46819 11.1182L4.88862 10.5386C4.80075 10.4508 4.80075 10.3083 4.88862 10.2204L7.10906 8L4.88862 5.77956C4.80075 5.69169 4.80075 5.54923 4.88862 5.46136L5.46819 4.88179C5.55606 4.79392 5.69852 4.79392 5.78639 4.88179L8.00683 7.10223L10.2273 4.88179C10.3151 4.79392 10.4576 4.79392 10.5455 4.88179L11.125 5.46136Z" fill="#F6F6F9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 751 B |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.0557 24H16.9619C17.5449 24 18.0176 23.5273 18.0176 22.9443V7.02757C18.0176 6.44451 17.5449 5.97185 16.9619 5.97185H1.0557C0.472645 5.97185 -1.71661e-05 6.44451 -1.71661e-05 7.02757V22.9443C-1.71661e-05 23.5273 0.472645 24 1.0557 24Z" fill="#181826"/>
|
||||
<path d="M8.09384 2.11142H21.8886V15.9061H20.7625V18.0176H22.9443C23.2243 18.0176 23.4928 17.9064 23.6908 17.7084C23.8888 17.5104 24 17.2419 24 16.9619V1.0557C24 0.775707 23.8888 0.507181 23.6908 0.309195C23.4928 0.11121 23.2243 -1.71661e-05 22.9443 -1.71661e-05H7.03812C6.75813 -1.71661e-05 6.4896 0.11121 6.29162 0.309195C6.09363 0.507181 5.9824 0.775707 5.9824 1.0557V3.3079H8.09384V2.11142Z" fill="#181826"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 779 B |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.2009 12.0008C15.2009 13.7681 13.7682 15.2007 12.0009 15.2007C10.2336 15.2007 8.8009 13.7681 8.8009 12.0008C8.8009 10.2335 10.2336 8.80078 12.0009 8.80078C13.7682 8.80078 15.2009 10.2335 15.2009 12.0008Z" fill="#181826"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.7794 6.10349C20.7034 7.34598 22.4198 9.08396 23.7428 11.13C23.9099 11.3888 23.9991 11.6901 24 11.9982C24.0009 12.3063 23.9134 12.6081 23.7478 12.8679C22.4298 14.9309 20.7169 16.6754 18.7939 17.9139C16.6744 19.2784 14.3194 19.9999 11.9839 19.9999C9.59593 19.9999 7.30095 19.2999 5.16846 17.9184C3.27447 16.6929 1.57499 14.9524 0.254495 12.8859C0.0830549 12.6199 -0.00543899 12.309 0.000258814 11.9926C0.00595662 11.6762 0.105589 11.3686 0.286495 11.109C1.88898 8.81147 3.73397 7.02698 5.77046 5.80549C7.76744 4.6075 9.85793 4 11.9839 4C14.3009 4 16.6509 4.7275 18.7794 6.10349ZM9.33419 15.991C10.1235 16.5184 11.0516 16.7999 12.0009 16.7999C13.2735 16.7985 14.4935 16.2923 15.3934 15.3924C16.2932 14.4926 16.7994 13.2725 16.8009 11.9999C16.8009 11.0506 16.5194 10.1226 15.9919 9.33323C15.4645 8.54387 14.7149 7.92865 13.8378 7.56535C12.9607 7.20206 11.9956 7.107 11.0645 7.29221C10.1334 7.47742 9.27811 7.93457 8.60682 8.60586C7.93554 9.27714 7.47838 10.1324 7.29318 11.0635C7.10797 11.9946 7.20302 12.9597 7.56632 13.8368C7.92962 14.7139 8.54484 15.4635 9.33419 15.991Z" fill="#181826"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="16" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17 15V27C17 27.2652 16.8946 27.5196 16.7071 27.7071C16.5196 27.8946 16.2652 28 16 28C15.7348 28 15.4804 27.8946 15.2929 27.7071C15.1054 27.5196 15 27.2652 15 27V15C15 14.7348 15.1054 14.4804 15.2929 14.2929C15.4804 14.1054 15.7348 14 16 14C16.2652 14 16.5196 14.1054 16.7071 14.2929C16.8946 14.4804 17 14.7348 17 15ZM25 24C24.7348 24 24.4804 24.1054 24.2929 24.2929C24.1054 24.4804 24 24.7348 24 25V27C24 27.2652 24.1054 27.5196 24.2929 27.7071C24.4804 27.8946 24.7348 28 25 28C25.2652 28 25.5196 27.8946 25.7071 27.7071C25.8946 27.5196 26 27.2652 26 27V25C26 24.7348 25.8946 24.4804 25.7071 24.2929C25.5196 24.1054 25.2652 24 25 24ZM28 18H26V5C26 4.73478 25.8946 4.48043 25.7071 4.29289C25.5196 4.10536 25.2652 4 25 4C24.7348 4 24.4804 4.10536 24.2929 4.29289C24.1054 4.48043 24 4.73478 24 5V18H22C21.7348 18 21.4804 18.1054 21.2929 18.2929C21.1054 18.4804 21 18.7348 21 19V21C21 21.2652 21.1054 21.5196 21.2929 21.7071C21.4804 21.8946 21.7348 22 22 22H28C28.2652 22 28.5196 21.8946 28.7071 21.7071C28.8946 21.5196 29 21.2652 29 21V19C29 18.7348 28.8946 18.4804 28.7071 18.2929C28.5196 18.1054 28.2652 18 28 18ZM7 20C6.73478 20 6.48043 20.1054 6.29289 20.2929C6.10536 20.4804 6 20.7348 6 21V27C6 27.2652 6.10536 27.5196 6.29289 27.7071C6.48043 27.8946 6.73478 28 7 28C7.26522 28 7.51957 27.8946 7.70711 27.7071C7.89464 27.5196 8 27.2652 8 27V21C8 20.7348 7.89464 20.4804 7.70711 20.2929C7.51957 20.1054 7.26522 20 7 20ZM10 14H8V5C8 4.73478 7.89464 4.48043 7.70711 4.29289C7.51957 4.10536 7.26522 4 7 4C6.73478 4 6.48043 4.10536 6.29289 4.29289C6.10536 4.48043 6 4.73478 6 5V14H4C3.73478 14 3.48043 14.1054 3.29289 14.2929C3.10536 14.4804 3 14.7348 3 15V17C3 17.2652 3.10536 17.5196 3.29289 17.7071C3.48043 17.8946 3.73478 18 4 18H10C10.2652 18 10.5196 17.8946 10.7071 17.7071C10.8946 17.5196 11 17.2652 11 17V15C11 14.7348 10.8946 14.4804 10.7071 14.2929C10.5196 14.1054 10.2652 14 10 14ZM19 8H17V5C17 4.73478 16.8946 4.48043 16.7071 4.29289C16.5196 4.10536 16.2652 4 16 4C15.7348 4 15.4804 4.10536 15.2929 4.29289C15.1054 4.48043 15 4.73478 15 5V8H13C12.7348 8 12.4804 8.10536 12.2929 8.29289C12.1054 8.48043 12 8.73478 12 9V11C12 11.2652 12.1054 11.5196 12.2929 11.7071C12.4804 11.8946 12.7348 12 13 12H19C19.2652 12 19.5196 11.8946 19.7071 11.7071C19.8946 11.5196 20 11.2652 20 11V9C20 8.73478 19.8946 8.48043 19.7071 8.29289C19.5196 8.10536 19.2652 8 19 8Z" fill="#32324D"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="16" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.5 16C3.23478 16 2.98043 15.8946 2.79289 15.7071C2.60536 15.5196 2.5 15.2652 2.5 15C2.5 14.7348 2.60536 14.4804 2.79289 14.2929C2.98043 14.1054 3.23478 14 3.5 14H7C7.26522 14 7.51957 13.8946 7.70711 13.7071C7.89464 13.5196 8 13.2652 8 13C8 12.7348 7.89464 12.4804 7.70711 12.2929C7.51957 12.1054 7.26522 12 7 12H5C4.20435 12 3.44129 11.6839 2.87868 11.1213C2.31607 10.5587 2 9.79565 2 9C2 8.20435 2.31607 7.44129 2.87868 6.87868C3.44129 6.31607 4.20435 6 5 6C5 5.73478 5.10536 5.48043 5.29289 5.29289C5.48043 5.10536 5.73478 5 6 5C6.26522 5 6.51957 5.10536 6.70711 5.29289C6.89464 5.48043 7 5.73478 7 6H8C8.26522 6 8.51957 6.10536 8.70711 6.29289C8.89464 6.48043 9 6.73478 9 7C9 7.26522 8.89464 7.51957 8.70711 7.70711C8.51957 7.89464 8.26522 8 8 8H5C4.73478 8 4.48043 8.10536 4.29289 8.29289C4.10536 8.48043 4 8.73478 4 9C4 9.26522 4.10536 9.51957 4.29289 9.70711C4.48043 9.89464 4.73478 10 5 10H7C7.79565 10 8.55871 10.3161 9.12132 10.8787C9.68393 11.4413 10 12.2044 10 13C10 13.7956 9.68393 14.5587 9.12132 15.1213C8.55871 15.6839 7.79565 16 7 16C7 16.2652 6.89464 16.5196 6.70711 16.7071C6.51957 16.8946 6.26522 17 6 17C5.73478 17 5.48043 16.8946 5.29289 16.7071C5.10536 16.5196 5 16.2652 5 16H3.5ZM28 6H12C11.7348 6 11.4804 6.10536 11.2929 6.29289C11.1054 6.48043 11 6.73478 11 7C11 7.26522 11.1054 7.51957 11.2929 7.70711C11.4804 7.89464 11.7348 8 12 8H27V12H13C12.7348 12 12.4804 12.1054 12.2929 12.2929C12.1054 12.4804 12 12.7348 12 13C12 13.2652 12.1054 13.5196 12.2929 13.7071C12.4804 13.8946 12.7348 14 13 14H20V18H10C9.73478 18 9.48043 18.1054 9.29289 18.2929C9.10536 18.4804 9 18.7348 9 19C9 19.2652 9.10536 19.5196 9.29289 19.7071C9.48043 19.8946 9.73478 20 10 20H20V24H5V19C5 18.7348 4.89464 18.4804 4.70711 18.2929C4.51957 18.1054 4.26522 18 4 18C3.73478 18 3.48043 18.1054 3.29289 18.2929C3.10536 18.4804 3 18.7348 3 19V24C3 24.5304 3.21071 25.0391 3.58579 25.4142C3.96086 25.7893 4.46957 26 5 26H27C27.5304 26 28.0391 25.7893 28.4142 25.4142C28.7893 25.0391 29 24.5304 29 24V7C29 6.73478 28.8946 6.48043 28.7071 6.29289C28.5196 6.10536 28.2652 6 28 6Z" fill="#32324D"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="16" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M28.615 6.21115C28.4952 6.11781 28.3557 6.05298 28.2072 6.02157C28.0586 5.99017 27.9048 5.99301 27.7575 6.0299L20.1162 7.9399L12.4475 4.1049C12.2338 3.99832 11.9891 3.97172 11.7575 4.0299L3.7575 6.0299C3.54116 6.08397 3.3491 6.20881 3.21185 6.38456C3.0746 6.56031 3.00003 6.7769 3 6.9999V24.9999C3.00002 25.1518 3.03467 25.3018 3.10132 25.4384C3.16797 25.5749 3.26486 25.6945 3.38463 25.788C3.50441 25.8815 3.64392 25.9465 3.79256 25.978C3.94121 26.0095 4.09508 26.0067 4.2425 25.9699L11.8837 24.0599L19.5525 27.8949C19.6917 27.9635 19.8448 27.9994 20 27.9999C20.0818 27.9998 20.1632 27.9898 20.2425 27.9699L28.2425 25.9699C28.4588 25.9158 28.6509 25.791 28.7881 25.6152C28.9254 25.4395 29 25.2229 29 24.9999V6.9999C29 6.8478 28.9654 6.6977 28.8987 6.56102C28.8319 6.42434 28.7349 6.30468 28.615 6.21115ZM12 21.9999C11.9182 21.9999 11.8368 22.01 11.7575 22.0299L5 23.7186V7.78115L11.8837 6.0599L12 6.1174V21.9999ZM27 24.2186L20.1162 25.9399L20 25.8824V9.9999C20.0817 10.0003 20.1631 9.9906 20.2425 9.97114L27 8.28115V24.2186Z" fill="#32324D"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M19 8.88889C19 9.12963 18.9134 9.33796 18.7402 9.51389L12.6152 15.7361C12.4421 15.912 12.237 16 12 16C11.763 16 11.5579 15.912 11.3848 15.7361L5.25977 9.51389C5.08659 9.33796 5 9.12963 5 8.88889C5 8.64815 5.08659 8.43981 5.25977 8.26389C5.43294 8.08796 5.63802 8 5.875 8H18.125C18.362 8 18.5671 8.08796 18.7402 8.26389C18.9134 8.43981 19 8.64815 19 8.88889Z" fill="#181826"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 528 B |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue