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

docs: refactor to use TypeScript, ESLint, and Tailwind CSS (#4136)

Browse Source 
* docs(refactoring): configured eslint and typescript (#3511)

* docs: configured eslint and typescript

* fixed yarn.lock

* docs(refactoring): migrate components directory to typescript (#3517)

* docs: migrate components directory to typescript

* removed vscode settings

* fix following merge

* docs: refactored QueryNote component (#3576)

* docs: refactored first batch of theme components (#3579)

* docs: refactored second batch of theme components (#3580)

* added missing badge styles

* fix after merge

* docs(refactoring): migrated remaining component to TypeScript (#3770)

* docs(refactoring): configured eslint and typescript (#3511)

* docs: configured eslint and typescript

* fixed yarn.lock

* docs(refactoring): migrate components directory to typescript (#3517)

* docs: migrate components directory to typescript

* removed vscode settings

* fix following merge

* docs: refactored QueryNote component (#3576)

* docs: refactored first batch of theme components (#3579)

* docs: refactored second batch of theme components (#3580)

* added missing badge styles

* docs: refactoring second batch of theme components

* fix after merge

* refactored icons and other components

* docs: refactored all components

* docs(refactoring): set up and configured Tailwind Css (#3841)

* docs: added tailwind config

* docs: added more tailwind configurations

* add includes option

* added more tailwind configurations

* fix to configurations

* docs(refactoring): use tailwind css (#4134)

* docs: added tailwind config

* docs: added more tailwind configurations

* add includes option

* added more tailwind configurations

* fix to configurations

* docs(refactoring): refactored all styles to use tailwind css (#4132)

* refactored Badge component to use tailwind css

* refactored Bordered component to use tailwind css

* updated to latest docusaurus

* refactored BorderedIcon component to use tailwind css

* refactored Feedback component to use tailwind css

* refactored icons and footersociallinks to tailwind css

* start refactoring of large card

* refactored large card styling

* refactored until admonitions

* refactored until codeblock

* refactored until Tabs

* refactored Tabs (without testing

* finished refactoring styles to tailwind css

* upgraded to version 2.4.1

* general fixes

* adjusted eslint configurations

* fixed ignore files

* fixes to large card

* fix search styling

* fix npx command

* updated tabs to use isCodeTabs prop

* fixed os tabs

* removed os-tabs class in favor of general styling

* improvements to buttons

* fix for searchbar

* fixed redocly download button

* chore: added eslint code action (#4135)

* small change in commerce modules page
This commit is contained in:
Shahed Nasser authored and GitHub committed 2023-05-19 14:56:48 +03:00
1 parent 29a88bbf98
commit 94907730d2
292 files changed
+11721 -42102
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

www/docs/.eslintignore
+5
View File
@@ -0,0 +1,5 @@
**/node_modules/*
**/.docusaurus/*
**/build/*
.eslintrc.js
babel.config.js
www/docs/.eslintrc.js
+120
View File
@@ -0,0 +1,120 @@
module.exports = {
root: true,
parser: "@babel/eslint-parser",
parserOptions: {
requireConfigFile: false,
ecmaFeatures: {
experimentalDecorators: true,
jsx: true
},
},
plugins: [
"prettier"
],
extends: [
"plugin:@docusaurus/recommended",
"eslint:recommended",
"google",
"plugin:prettier/recommended",
"plugin:react/recommended",
"plugin:react/jsx-runtime",
],
settings: {
react: {
version: "detect"
}
},
rules: {
curly: ["error", "all"],
"new-cap": "off",
"require-jsdoc": "off",
"no-unused-expressions": "off",
"no-unused-vars": "off",
camelcase: "off",
"no-invalid-this": "off",
"max-len": [
"error",
{
code: 80,
ignoreStrings: true,
ignoreRegExpLiterals: true,
ignoreComments: true,
ignoreTrailingComments: true,
ignoreUrls: true,
ignoreTemplateLiterals: true,
},
],
semi: ["error", "never"],
quotes: [
"error",
"double",
{
allowTemplateLiterals: true,
},
],
"comma-dangle": [
"error",
{
arrays: "always-multiline",
objects: "always-multiline",
imports: "always-multiline",
exports: "always-multiline",
functions: "never",
},
],
"object-curly-spacing": ["error", "always"],
"arrow-parens": ["error", "always"],
"linebreak-style": 0,
"no-confusing-arrow": [
"error",
{
allowParens: false,
},
],
"space-before-function-paren": [
"error",
{
anonymous: "always",
named: "never",
asyncArrow: "always",
},
],
"space-infix-ops": "error",
"eol-last": ["error", "always"],
},
env: {
es6: true,
node: true,
jest: true,
browser: true,
},
ignorePatterns: [],
overrides: [
{
files: ["*.ts", "*.tsx", "*.js", "*.jsx"],
plugins: ["@typescript-eslint/eslint-plugin"],
extends: ["plugin:@typescript-eslint/recommended", "plugin:react/recommended"],
parser: "@typescript-eslint/parser",
parserOptions: {
project: "./tsconfig.json",
},
rules: {
"valid-jsdoc": "off",
"@typescript-eslint/no-non-null-assertion": "off",
"@typescript-eslint/no-floating-promises": "error",
"@typescript-eslint/await-thenable": "error",
"@typescript-eslint/promise-function-async": "error",
"@typescript-eslint/keyword-spacing": "error",
"@typescript-eslint/space-before-function-paren": [
"error",
{
anonymous: "always",
named: "never",
asyncArrow: "always",
},
],
"@typescript-eslint/space-infix-ops": "error",
},
},
],
}
www/docs/.prettierrc
+8
View File
@@ -0,0 +1,8 @@
{
"endOfLine": "auto",
"semi": false,
"singleQuote": false,
"tabWidth": 2,
"trailingComma": "es5",
"arrowParens": "always"
}
www/docs/README.md
+13 -3
View File
@@ -4,8 +4,18 @@ This website is built using [Docusaurus 2](https://docusaurus.io/), a modern sta
## Note Before Development
If you have installed the dependencies in the root of this repository (i.e., if you have a `node_modules` directory at the root of this repository), this will cause an error when running this documentation website. This is because the content resides in `docs/content` and when that content is being imported from there, a mix up can happen between the dependencies which will cause an `invalid hook call` error.
If you have installed the dependencies in the root of this repository (in other words, if you have a `node_modules` directory at the root of this repository), this will cause an error when running this documentation website. This is because the content resides in `docs/content` and when that content is being imported from there, a mix up can happen between the dependencies which will cause an `invalid hook call` error.
For that reason, we added a `clean-node-modules` script that deletes the `node_modules` directory, and we call that script before the `start` and `build` scripts are ran.
For that reason, the `clean-node-modules` script was added that deletes the `node_modules` directory. The script is called that script before the `start` and `build` scripts are ran.
So, everytime you run these 2 scripts, the `node_modules` directory at the root will be deleted.
So, everytime you run these two scripts, the `node_modules` directory at the root will be deleted.
## Components and Theme
### Extended Theme Components
Components that extend themes from Docusaurus or other plugins are placed under `src/theme`.
### Medusa Docs Components
Components created specifically for the Medusa Docs are placed under the `src/componenets` directory.
www/docs/docusaurus.config.js
+13 -2
View File
@@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/no-var-requires */
require("dotenv").config()
const path = require("path")
const fs = require("fs")
@@ -10,7 +11,7 @@ const algoliaApiKey = process.env.ALGOLIA_API_KEY || "temp"
const announcementBar = JSON.parse(fs.readFileSync("./announcement.json"))
/** @type {import('@docusaurus/types').DocusaurusConfig} */
/** @type {import('@medusajs/docs').MedusaDocusaurusConfig} */
const config = {
title: "Medusa",
tagline: "Explore and learn how to use Medusa",
@@ -29,6 +30,17 @@ const config = {
},
],
require.resolve("docusaurus-plugin-image-zoom"),
async function tailwindPlugin() {
return {
name: "docusaurus-tailwindcss",
configurePostCss(postcssOptions) {
// Appends TailwindCSS and AutoPrefixer.
postcssOptions.plugins.push(require("tailwindcss"))
postcssOptions.plugins.push(require("autoprefixer"))
return postcssOptions
},
}
},
],
themeConfig: {
image: "img/docs-banner.jpg",
@@ -200,7 +212,6 @@ const config = {
disableSearch: true,
nativeScrollbars: true,
sortTagsAlphabetically: true,
hideDownloadButton: true,
expandResponses: "200,204",
generatedPayloadSamplesMaxDepth: 4,
showObjectSchemaExamples: true,
www/docs/package-lock.json
Generated
-33304
View File
File diff suppressed because it is too large. Load diff
www/docs/package.json
+19 -2
View File
@@ -14,9 +14,11 @@
"clear": "docusaurus clear",
"serve": "docusaurus serve",
"write-translations": "docusaurus write-translations",
"write-heading-ids": "docusaurus write-heading-ids"
"write-heading-ids": "docusaurus write-heading-ids",
"lint": "eslint --ignore-path .eslintignore --ext .js,.jsx,.ts,.tsx ."
},
"dependencies": {
"@babel/preset-react": "^7.18.6",
"@cloudinary/react": "^1.11.2",
"@cloudinary/url-gen": "^1.9.2",
"@docusaurus/core": "latest",
@@ -26,12 +28,14 @@
"@svgr/webpack": "6.2.1",
"algoliasearch-helper": "^3.11.3",
"animate.css": "^4.1.1",
"autoprefixer": "^10.4.14",
"clsx": "^1.1.1",
"docusaurus-plugin-image-zoom": "^0.1.1",
"docusaurus-plugin-segment": "^1.0.3",
"dotenv": "^16.0.3",
"file-loader": "^6.2.0",
"lodash": "^4.17.21",
"postcss": "^8.4.21",
"prism-react-renderer": "^1.3.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
@@ -39,6 +43,7 @@
"react-transition-group": "^4.4.5",
"react-uuid": "^2.0.0",
"redocusaurus": "^1.4.0",
"tailwindcss": "^3.3.2",
"url-loader": "^4.1.1"
},
"browserslist": {
@@ -54,6 +59,18 @@
]
},
"devDependencies": {
"prettier": "^2.3.2"
"@babel/eslint-parser": "^7.21.3",
"@docusaurus/eslint-plugin": "latest",
"@docusaurus/module-type-aliases": "latest",
"@tsconfig/docusaurus": "^1.0.7",
"@typescript-eslint/eslint-plugin": "^5.55.0",
"@typescript-eslint/parser": "^5.55.0",
"eslint": "^8.36.0",
"eslint-config-google": "^0.14.0",
"eslint-config-prettier": "^8.7.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.32.2",
"prettier": "^2.8.4",
"typescript": "^5.0.2"
}
}
www/docs/src/components/Badge/index.js
-20
View File
@@ -1,20 +0,0 @@
import React from "react"
import styles from "./styles.module.css"
import clsx from "clsx"
export default function Badge({ className, variant, children }) {
return (
<span
className={clsx(
styles.badge,
className,
variant === "purple" && styles.purpleBadge,
variant === "orange" && styles.orangeBadge,
variant === "green" && styles.greenBadge,
variant === "blue" && styles.blueBadge
)}
>
{children}
</span>
)
}
www/docs/src/components/Badge/index.tsx
+30
View File
@@ -0,0 +1,30 @@
import React from "react"
import clsx from "clsx"
export type BadgeProps = {
className?: string
variant: string
} & React.HTMLAttributes<HTMLSpanElement>
const Badge: React.FC<BadgeProps> = ({ className, variant, children }) => {
return (
<span
className={clsx(
"tw-text-label-x-small-plus tw-py-px tw-px-0.4 tw-rounded tw-border tw-border-solid tw-text-center",
variant === "purple" &&
"tw-bg-medusa-tag-purple-bg dark:tw-bg-medusa-tag-purple-bg-dark tw-text-medusa-tag-purple-text dark:tw-text-medusa-tag-purple-text-dark tw-border-medusa-tag-purple-border dark:tw-border-medusa-tag-purple-border-dark",
variant === "orange" &&
"tw-bg-medusa-tag-orange-bg dark:tw-bg-medusa-tag-orange-bg-dark tw-text-medusa-tag-orange-text dark:tw-text-medusa-tag-orange-text-dark tw-border-medusa-tag-orange-border dark:tw-border-medusa-tag-orange-border-dark",
variant === "green" &&
"tw-bg-medusa-tag-green-bg dark:tw-bg-medusa-tag-green-bg-dark tw-text-medusa-tag-green-text dark:tw-text-medusa-tag-green-text-dark tw-border-medusa-tag-green-border dark:tw-border-medusa-tag-green-border-dark",
variant === "blue" &&
"tw-bg-medusa-tag-blue-bg dark:tw-bg-medusa-tag-blue-bg-dark tw-text-medusa-tag-blue-text dark:tw-text-medusa-tag-blue-text-dark tw-border-medusa-tag-blue-border dark:tw-border-medusa-tag-blue-border-dark",
className
)}
>
{children}
</span>
)
}
export default Badge
www/docs/src/components/Badge/styles.module.css
-33
View File
@@ -1,33 +0,0 @@
.badge {
font-size: var(--medusa-label-x-small-plus-size);
line-height: var(--medusa-label-x-small-plus-line-height);
font-weight: var(--medusa-label-x-small-plus-font-weight);
padding: 1px 7px;
border-radius: var(--ifm-global-radius);
border: 1px solid;
text-align: center;
}
.purpleBadge {
background-color: var(--medusa-tag-purple-bg);
border-color: var(--medusa-tag-purple-border);
color: var(--medusa-tag-purple-text);
}
.orangeBadge {
background-color: var(--medusa-tag-orange-bg);
border-color: var(--medusa-tag-orange-border);
color: var(--medusa-tag-orange-text);
}
.greenBadge {
background-color: var(--medusa-tag-green-bg);
border-color: var(--medusa-tag-green-border);
color: var(--medusa-tag-green-text);
}
.blueBadge {
background-color: var(--medusa-tag-blue-bg);
border-color: var(--medusa-tag-blue-border);
color: var(--medusa-tag-blue-text);
}
www/docs/src/components/Bordered/index.js
-11
View File
@@ -1,11 +0,0 @@
import React from "react"
import clsx from 'clsx'
import styles from './styles.module.css'
export default function Bordered ({ wrapperClassName, children }) {
return (
<span className={clsx(styles.elementWrapper, 'no-zoom-img', wrapperClassName)}>
{children}
</span>
)
}
www/docs/src/components/Bordered/index.tsx
+22
View File
@@ -0,0 +1,22 @@
import React from "react"
import clsx from "clsx"
type BorderedProps = {
wrapperClassName?: string
} & React.HTMLAttributes<HTMLSpanElement>
const Bordered: React.FC<BorderedProps> = ({ wrapperClassName, children }) => {
return (
<span
className={clsx(
"tw-inline-flex tw-justify-center tw-items-center tw-rounded tw-p-[3px] tw-border tw-border-solid tw-border-medusa-border-strong dark:tw-border-medusa-border-strong-dark tw-mr-1 tw-w-fit tw-bg-docs-bg dark:tw-bg-docs-bg-dark",
"no-zoom-img",
wrapperClassName
)}
>
{children}
</span>
)
}
export default Bordered
www/docs/src/components/Bordered/styles.module.css
-11
View File
@@ -1,11 +0,0 @@
.elementWrapper {
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: var(--ifm-global-radius);
padding: var(--bordered-padding);
border: 1px solid var(--bordered-border-color);
margin-right: var(--bordered-margin-right);
width: fit-content;
background-color: var(--ifm-background-color);
}
www/docs/src/components/BorderedIcon/index.js
-21
View File
@@ -1,21 +0,0 @@
import React from "react"
import ThemedImage from '@theme/ThemedImage'
import clsx from 'clsx'
import styles from './styles.module.css'
import Bordered from "../Bordered"
export default function BorderedIcon ({ icon = null, IconComponent = null, wrapperClassName, iconWrapperClassName, iconClassName }) {
return (
<Bordered wrapperClassName={wrapperClassName}>
<span className={clsx(styles.borderedIconWrapper, iconWrapperClassName)}>
{!IconComponent && (
<ThemedImage sources={{
light: icon.light,
dark: icon.dark || icon.light
}} className={clsx(styles.icon, iconClassName, 'bordered-icon')} />
)}
{IconComponent && <IconComponent className={clsx(styles.icon, iconClassName, 'bordered-icon')} />}
</span>
</Bordered>
)
}
www/docs/src/components/BorderedIcon/index.tsx
+55
View File
@@ -0,0 +1,55 @@
import React from "react"
import ThemedImage from "@theme/ThemedImage"
import clsx from "clsx"
import Bordered from "../Bordered/index"
import { IconProps } from "@site/src/theme/Icon/index"
type BorderedIconProp = {
icon?: {
light: string
dark?: string
}
IconComponent?: React.FC<IconProps>
wrapperClassName?: string
iconWrapperClassName?: string
iconClassName?: string
iconColorClassName?: string
} & React.HTMLAttributes<HTMLSpanElement>
const BorderedIcon: React.FC<BorderedIconProp> = ({
icon = null,
IconComponent = null,
wrapperClassName,
iconWrapperClassName,
iconClassName,
iconColorClassName = "",
}) => {
return (
<Bordered wrapperClassName={wrapperClassName}>
<span
className={clsx(
"tw-inline-flex tw-justify-center tw-items-center tw-rounded-sm tw-p-[2px] tw-bg-medusa-bg-component dark:tw-bg-medusa-bg-component-dark",
iconWrapperClassName
)}
>
{!IconComponent && (
<ThemedImage
sources={{
light: icon.light,
dark: icon.dark || icon.light,
}}
className={clsx(iconClassName, "bordered-icon")}
/>
)}
{IconComponent && (
<IconComponent
className={clsx(iconClassName, "bordered-icon")}
iconColorClassName={iconColorClassName}
/>
)}
</span>
</Bordered>
)
}
export default BorderedIcon
www/docs/src/components/BorderedIcon/styles.module.css
-8
View File
@@ -1,8 +0,0 @@
.borderedIconWrapper {
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: calc(var(--ifm-global-radius) / 2);
padding: var(--bordered-inside-padding);
background-color: var(--medusa-bg-component);
}
www/docs/src/components/Button/index.tsx
+27
View File
@@ -0,0 +1,27 @@
import React from "react"
import clsx from "clsx"
type ButtonProps = {
className?: string
onClick?: React.MouseEventHandler<HTMLButtonElement>
disabled?: boolean
} & React.HTMLAttributes<HTMLButtonElement>
const Button: React.FC<ButtonProps> = ({
className = "",
onClick,
children,
...props
}) => {
return (
<button
className={clsx("btn-primary", className)}
onClick={onClick}
{...props}
>
{children}
</button>
)
}
export default Button
www/docs/src/components/CloudinaryImage/index.js
-78
View File
@@ -1,78 +0,0 @@
import React from "react"
import { useThemeConfig } from '@docusaurus/theme-common'
import { Cloudinary } from "@cloudinary/url-gen";
import MDXImg from '@theme/MDXComponents/Img';
import { pad, imaggaScale, imaggaCrop, crop, fit, minimumPad, fill, scale, limitFit, thumbnail, limitFill, minimumFit, limitPad, fillPad } from "@cloudinary/url-gen/actions/resize";
import { byRadius } from "@cloudinary/url-gen/actions/roundCorners";
const resizeActions = {
'pad': pad,
'imaggaScale': imaggaScale,
'imaggaCrop': imaggaCrop,
'crop': crop,
'fit': fit,
'minimumPad': minimumPad,
'fill': fill,
'scale': scale,
'limitFit': limitFit,
'thumbnail': thumbnail,
'limitFill': limitFill,
'minimumFit': minimumFit,
'limitPad': limitPad,
'fillPad': fillPad
}
const imageRegex = /^https:\/\/res.cloudinary.com\/.*\/upload\/v[0-9]+\/(?<imageId>.*)$/
export default function CloudinaryImage ({ src, ...props }) {
const { cloudinaryConfig } = useThemeConfig();
const matchingRegex = src.match(imageRegex)
if (!cloudinaryConfig || !cloudinaryConfig.cloudName || !matchingRegex?.groups || !matchingRegex.groups.imageId) {
// either cloudinary isn't configured or
// could not match url to a cloudinary url
// default to docusaurus's image component
return <MDXImg src={src} {...props} />
}
const cloudinary = new Cloudinary({
cloud: {
cloudName: cloudinaryConfig.cloudName
}
});
let image = cloudinary.image(matchingRegex.groups.imageId.replaceAll('%20', ' '))
cloudinaryConfig.flags?.forEach((flag) => image.addTransformation(flag))
if (cloudinaryConfig.roundCorners) {
image.roundCorners(byRadius(cloudinaryConfig.roundCorners))
}
if (cloudinaryConfig.resize) {
const action = resizeActions[cloudinaryConfig.resize.action]
let resizeAction = action()
if (props.width || props.height) {
if (props.width) {
resizeAction = resizeAction.width(props.width)
}
if (props.height) {
resizeAction = resizeAction.height(props.height)
}
} else if (cloudinaryConfig.resize.aspectRatio) {
resizeAction = resizeAction.aspectRatio(cloudinaryConfig.resize.aspectRatio)
} else {
if (cloudinaryConfig.resize.width) {
resizeAction = resizeAction.width(cloudinaryConfig.resize.width)
}
if (cloudinaryConfig.resize.height) {
resizeAction = resizeAction.height(cloudinaryConfig.resize.height)
}
}
image.resize(resizeAction)
}
return (
<MDXImg {...props} src={image.toURL()} />
)
}
www/docs/src/components/CloudinaryImage/index.tsx
+106
View File
@@ -0,0 +1,106 @@
import React from "react"
import { useThemeConfig } from "@docusaurus/theme-common"
// @ts-expect-error: wait until docusaurus uses type: module
import { Cloudinary } from "@cloudinary/url-gen"
import MDXImg, { Props as MDXImgProps } from "@theme/MDXComponents/Img"
import {
pad,
imaggaScale,
imaggaCrop,
crop,
fit,
minimumPad,
fill,
scale,
limitFit,
thumbnail,
limitFill,
minimumFit,
limitPad,
fillPad,
} from "@cloudinary/url-gen/actions/resize"
import { byRadius } from "@cloudinary/url-gen/actions/roundCorners"
import { ThemeConfig } from "@medusajs/docs"
const resizeActions = {
pad: pad,
imaggaScale: imaggaScale,
imaggaCrop: imaggaCrop,
crop: crop,
fit: fit,
minimumPad: minimumPad,
fill: fill,
scale: scale,
limitFit: limitFit,
thumbnail: thumbnail,
limitFill: limitFill,
minimumFit: minimumFit,
limitPad: limitPad,
fillPad: fillPad,
}
const imageRegex =
/^https:\/\/res.cloudinary.com\/.*\/upload\/v[0-9]+\/(?<imageId>.*)$/
type CloudinaryImageProps = MDXImgProps
const CloudinaryImage: React.FC<CloudinaryImageProps> = ({ src, ...props }) => {
const { cloudinaryConfig } = useThemeConfig() as ThemeConfig
const matchingRegex = src.match(imageRegex)
if (
!cloudinaryConfig ||
!matchingRegex?.groups ||
!matchingRegex.groups.imageId
) {
// either cloudinary isn't configured or
// could not match url to a cloudinary url
// default to docusaurus's image component
return <MDXImg src={src} {...props} />
}
const cloudinary = new Cloudinary({
cloud: {
cloudName: cloudinaryConfig.cloudName,
},
})
const image = cloudinary.image(
matchingRegex.groups.imageId.replaceAll("%20", " ")
)
cloudinaryConfig.flags?.forEach((flag) => image.addTransformation(flag))
if (cloudinaryConfig.roundCorners) {
image.roundCorners(byRadius(cloudinaryConfig.roundCorners))
}
if (cloudinaryConfig.resize) {
const action = resizeActions[cloudinaryConfig.resize.action]
let resizeAction = action()
if (props.width || props.height) {
if (props.width) {
resizeAction = resizeAction.width(props.width)
}
if (props.height) {
resizeAction = resizeAction.height(props.height)
}
} else if (cloudinaryConfig.resize.aspectRatio) {
resizeAction = resizeAction.aspectRatio(
cloudinaryConfig.resize.aspectRatio
)
} else {
if (cloudinaryConfig.resize.width) {
resizeAction = resizeAction.width(cloudinaryConfig.resize.width)
}
if (cloudinaryConfig.resize.height) {
resizeAction = resizeAction.height(cloudinaryConfig.resize.height)
}
}
image.resize(resizeAction)
}
return <MDXImg {...props} src={image.toURL()} />
}
export default CloudinaryImage
www/docs/src/components/CopyButton/index.tsx
+47
View File
@@ -0,0 +1,47 @@
import React, { useState, useEffect, useRef, useCallback } from "react"
// @ts-expect-error: wait until docusaurus uses type: module
import copy from "copy-text-to-clipboard"
import Tooltip from "@site/src/components/Tooltip"
import clsx from "clsx"
type CopyButtonProps = {
text: string
buttonClassName?: string
tooltipClassName?: string
} & React.HTMLAttributes<HTMLDivElement>
const CopyButton: React.FC<CopyButtonProps> = ({
text,
buttonClassName = "",
tooltipClassName = "",
children,
}) => {
const [isCopied, setIsCopied] = useState(false)
const copyTimeout = useRef(undefined)
const handleCopy = useCallback(() => {
copy(text)
setIsCopied(true)
copyTimeout.current = window.setTimeout(() => {
setIsCopied(false)
}, 1000)
}, [text])
useEffect(() => () => window.clearTimeout(copyTimeout.current), [])
return (
<Tooltip
text={isCopied ? `Copied!` : `Copy to Clipboard`}
tooltipClassName={tooltipClassName}
>
<span
className={clsx("tw-cursor-pointer", buttonClassName)}
onClick={handleCopy}
>
{children}
</span>
</Tooltip>
)
}
export default CopyButton
www/docs/src/components/DocSidebarItemIcon/index.tsx
+45
View File
@@ -0,0 +1,45 @@
import React from "react"
import icons from "@site/src/theme/Icon"
import BorderedIcon from "@site/src/components/BorderedIcon"
import clsx from "clsx"
type DocSidebarItemIconProps = {
icon?: string
is_title?: boolean
is_disabled?: boolean
} & React.HTMLAttributes<HTMLSpanElement>
const DocSidebarItemIcon: React.FC<DocSidebarItemIconProps> = ({
icon,
is_title,
is_disabled,
}) => {
const IconComponent = icons[icon]
return (
<>
{is_title && (
<BorderedIcon
icon={null}
IconComponent={IconComponent}
iconClassName={clsx("sidebar-item-icon")}
iconColorClassName={clsx(
is_disabled &&
"tw-stroke-medusa-icon-disabled dark:tw-stroke-medusa-icon-disabled-dark"
)}
/>
)}
{!is_title && (
<IconComponent
className={clsx("sidebar-item-icon")}
iconColorClassName={
is_disabled &&
"tw-stroke-medusa-icon-disabled dark:tw-stroke-medusa-icon-disabled-dark"
}
/>
)}
</>
)
}
export default DocSidebarItemIcon
www/docs/src/components/Feedback/Solutions/index.tsx
+92
View File
@@ -0,0 +1,92 @@
import React, { useEffect, useState } from "react"
import { request } from "@octokit/request"
// import "./index.css"
type SolutionsProps = {
feedback: boolean
message?: string
}
type GitHubSearchItem = {
url: string
html_url: string
title: string
[key: string]: unknown
}
const Solutions: React.FC<SolutionsProps> = ({ feedback, message }) => {
const [possibleSolutionsQuery, setPossibleSolutionsQuery] =
useState<string>("")
const [possibleSolutions, setPossibleSolutions] = useState<
GitHubSearchItem[]
>([])
function constructQuery(searchQuery: string) {
return `${searchQuery} repo:medusajs/medusa is:closed is:issue`
}
async function searchGitHub(query) {
return request(`GET /search/issues`, {
q: query,
sort: "updated",
per_page: 3,
})
}
useEffect(() => {
if (!feedback) {
let query = constructQuery(
// Github does not allow queries longer than 256 characters
message ? message.substring(0, 256) : document.title
)
searchGitHub(query)
.then(async (result) => {
if (!result.data.items.length && message) {
query = constructQuery(document.title)
result = await searchGitHub(query)
}
setPossibleSolutionsQuery(query)
setPossibleSolutions(result.data.items)
})
.catch((err) => console.error(err))
} else {
setPossibleSolutionsQuery("")
setPossibleSolutions([])
}
}, [feedback])
return (
<>
{possibleSolutions.length > 0 && (
<div className="tw-text-label-large-plus tw-font-normal">
<span className="tw-inline-block tw-my-1 tw-mx-0">
If you faced a problem, here are some possible solutions from
GitHub:
</span>
<ul>
{possibleSolutions.map((solution) => (
<li key={solution.url} className="tw-mb-0.5 last:tw-mb-0">
<a href={solution.html_url} target="_blank" rel="noreferrer">
{solution.title}
</a>
</li>
))}
</ul>
<span>
Explore more issues in{" "}
<a
href={`https://github.com/medusajs/medusa/issues?q=${possibleSolutionsQuery}`}
target="_blank"
rel="noreferrer"
>
the GitHub repository
</a>
</span>
</div>
)}
</>
)
}
export default Solutions
www/docs/src/components/Feedback/index.css
-139
View File
@@ -1,139 +0,0 @@
.feedback-container {
padding-top: var(--ifm-base-margin-vertical);
padding-bottom: var(--ifm-base-margin-vertical);
}
.doc-footer .feedback-container {
border-top: 1px solid var(--ifm-doc-footer-border-color);
}
.inline-feedback {
display: flex;
flex-direction: row;
align-items: center;
}
.inline-question,
.feedback-message {
display: flex;
flex-direction: column;
}
.inline-feedback span {
margin-right: 24px;
font-size: var(--medusa-body-regular-size);
line-height: var(--medusa-body-regular-line-height);
font-weight: var(--medusa-body-regular-font-weight);
}
.inline-question span {
margin-bottom: calc(var(--ifm-base-margin-vertical) / 2);
}
.feedback-btn {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 6px 12px;
border-radius: var(--ifm-global-radius);
cursor: pointer;
background-color: var(--ifm-secondary-btn-background-color);
border: 1px solid var(--ifm-secondary-btn-border-color);
color: var(--ifm-secondary-btn-color);
font-size: var(--medusa-label-small-plus-size);
line-height: var(--medusa-label-small-plus-line-height);
font-weight: var(--medusa-label-small-plus-font-weight);
}
.feedback-btn:hover {
background-color: var(--ifm-secondary-btn-hover-background-color);
}
.feedback-btn:focus {
box-shadow: var(--ifm-secondary-btn-focused-shadow);
}
.feedback-btn:not(:last-child) {
margin-right: calc(var(--ifm-base-spacing) / 2);
}
.inline-question .feedback-btn {
margin-top: calc(var(--ifm-base-margin-vertical) / 2);
width: fit-content;
}
.inline-question textarea {
border-radius: 4px;
background-color: transparent;
border: 1px solid var(--ifm-base-border-color);
padding: 8px;
font-family: var(--ifm-font-family-base);
}
.feedback-message,
.solutions-wrapper {
font-size: var(--medusa-label-large-plus-size);
line-height: var(--medusa-label-large-plus-line-height);
}
.feedback-message {
font-weight: var(--medusa-label-large-plus-font-weight);
}
.solutions-wrapper {
font-weight: 400;
}
.solutions-message {
display: inline-block;
margin: calc(var(--ifm-base-margin-vertical) / 2) 0;
}
.solutions-wrapper li:not(:last-child) {
margin-bottom: calc(var(--ifm-base-margin-vertical) / 4);
}
.fade-in {
-webkit-animation: fade-in .3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: fade-in .3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fade-out {
-webkit-animation: fade-out .3s ease-out both;
animation: fade-out .3s ease-out both;
}
@-webkit-keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
www/docs/src/components/Feedback/index.js
-174
View File
@@ -1,174 +0,0 @@
import React, { useRef, useState, useEffect } from 'react';
import { CSSTransition, SwitchTransition } from 'react-transition-group';
import './index.css';
import useIsBrowser from '@docusaurus/useIsBrowser';
import {useLocation} from '@docusaurus/router';
import uuid from 'react-uuid';
import { request } from "@octokit/request";
export default function Feedback ({
event,
question = 'Was this page helpful?',
positiveBtn = 'Yes',
negativeBtn = 'No',
positiveQuestion = 'What was most helpful?',
negativeQuestion = 'What can we improve?',
submitBtn = 'Submit',
submitMessage = 'Thank you for helping improve our documentation!',
showPossibleSolutions = true
}) {
const [showForm, setShowForm] = useState(false);
const [submittedFeedback, setSubmittedFeedback] = useState(false);
const [loading, setLoading] = useState(false);
const inlineFeedbackRef = useRef(null);
const inlineQuestionRef = useRef(null);
const inlineMessageRef = useRef(null)
const [positiveFeedback, setPositiveFeedback] = useState(false);
const [message, setMessage] = useState("");
const [id, setId] = useState(null);
const [possibleSolutionsQuery, setPossibleSolutionsQuery] = useState('')
const [possibleSolutions, setPossibleSolutions] = useState([]);
const nodeRef = submittedFeedback ? inlineMessageRef : (showForm ? inlineQuestionRef : inlineFeedbackRef);
const isBrowser = useIsBrowser();
const location = useLocation();
function handleFeedback (e) {
const feedback = e.target.classList.contains('positive');
submitFeedback(e, feedback)
setPositiveFeedback(feedback);
setShowForm(true);
}
function submitFeedback (e, feedback = null) {
if (isBrowser) {
if (window.analytics) {
if (showForm) {
setLoading(true);
}
window.analytics.track(event, {
url: location.pathname,
label: document.title,
feedback: (feedback !== null && feedback) || (feedback === null && positiveFeedback) ? 'yes' : 'no',
message: message?.length ? message : null,
uuid: id
}, function () {
if (showForm) {
setLoading(false);
checkAvailableSolutions(positiveFeedback, message);
resetForm();
}
})
} else {
if (showForm) {
resetForm();
}
}
}
}
function resetForm () {
setShowForm(false);
setSubmittedFeedback(true);
if (message) {
setId(null);
}
}
function constructQuery (searchQuery) {
return `${searchQuery} repo:medusajs/medusa is:closed is:issue`; //Github does not allow queries longer than 256 characters
}
function searchGitHub (query) {
return request(`GET /search/issues`, {
q: query,
sort: 'updated',
per_page: 3,
})
}
async function checkAvailableSolutions (feedback, message) {
if (showPossibleSolutions && !feedback) {
//fetch some possible solutions related to the answer.
let query = constructQuery(message ? message.substring(0, 256) : document.title)
let result = await searchGitHub(query);
if (!result.data.items.length && message) {
query = constructQuery(document.title)
result = await searchGitHub(query)
}
setPossibleSolutionsQuery(query);
setPossibleSolutions(result.data.items);
}
}
useEffect(() => {
if (!id) {
setId(uuid())
}
}, [id])
return (
<div className='feedback-container'>
<SwitchTransition mode="out-in">
<CSSTransition
key={showForm}
nodeRef={nodeRef}
timeout={300}
addEndListener={(done) => {
nodeRef.current.addEventListener("transitionend", done, false);
}}
classNames={{
enter: 'fade-in',
exit: 'fade-out'
}}
>
<>
{(!showForm && !submittedFeedback) && (
<div className='inline-feedback' ref={inlineFeedbackRef}>
<span>{question}</span>
<button className='positive feedback-btn' onClick={handleFeedback}>{positiveBtn}</button>
<button className='negative feedback-btn' onClick={handleFeedback}>{negativeBtn}</button>
</div>
)}
{(showForm && !submittedFeedback) && (
<div className='inline-question' ref={inlineQuestionRef}>
<span>{positiveFeedback ? positiveQuestion : negativeQuestion}</span>
<textarea rows={4} value={message} onChange={(e) => setMessage(e.target.value)}></textarea>
<button className='feedback-btn' onClick={submitFeedback} disabled={loading}>{submitBtn}</button>
</div>
)}
{submittedFeedback && (
<div className='feedback-message-wrapper'>
<div className='feedback-message' ref={inlineMessageRef}>
<span>{submitMessage}</span>
{possibleSolutions.length > 0 && (
<div className='solutions-wrapper'>
<span className='solutions-message'>If you faced a problem, here are some possible solutions from GitHub:</span>
<ul>
{possibleSolutions.map((solution) => (
<li key={solution.url}>
<a href={solution.html_url} target="_blank">{solution.title}</a>
</li>
))}
</ul>
<span>Explore more issues in <a
href={`https://github.com/medusajs/medusa/issues?q=${possibleSolutionsQuery}`}
target="_blank"
>
the GitHub repository
</a>
</span>
</div>
)}
</div>
</div>
)}
</>
</CSSTransition>
</SwitchTransition>
</div>
)
}
www/docs/src/components/Feedback/index.tsx
+187
View File
@@ -0,0 +1,187 @@
import React, { useRef, useState, useEffect } from "react"
import { CSSTransition, SwitchTransition } from "react-transition-group"
// import "./index.css"
import useIsBrowser from "@docusaurus/useIsBrowser"
import { useLocation } from "@docusaurus/router"
import uuid from "react-uuid"
import Solutions from "./Solutions/index"
import Button from "../Button"
type FeedbackProps = {
event?: string
question?: string
positiveBtn?: string
negativeBtn?: string
positiveQuestion?: string
negativeQuestion?: string
submitBtn?: string
submitMessage?: string
showPossibleSolutions?: boolean
className?: string
} & React.HTMLAttributes<HTMLDivElement>
const Feedback: React.FC<FeedbackProps> = ({
event,
question = "Was this page helpful?",
positiveBtn = "Yes",
negativeBtn = "No",
positiveQuestion = "What was most helpful?",
negativeQuestion = "What can we improve?",
submitBtn = "Submit",
submitMessage = "Thank you for helping improve our documentation!",
showPossibleSolutions = true,
className = "",
}) => {
const [showForm, setShowForm] = useState(false)
const [submittedFeedback, setSubmittedFeedback] = useState(false)
const [loading, setLoading] = useState(false)
const inlineFeedbackRef = useRef(null)
const inlineQuestionRef = useRef(null)
const inlineMessageRef = useRef(null)
const [positiveFeedback, setPositiveFeedback] = useState(false)
const [message, setMessage] = useState("")
const [id, setId] = useState(null)
const nodeRef = submittedFeedback
? inlineMessageRef
: showForm
? inlineQuestionRef
: inlineFeedbackRef
const isBrowser = useIsBrowser()
const location = useLocation()
function handleFeedback(e) {
const feedback = e.target.classList.contains("positive")
submitFeedback(e, feedback)
setPositiveFeedback(feedback)
setShowForm(true)
}
function submitFeedback(e, feedback = null) {
if (isBrowser) {
if (window.analytics) {
if (showForm) {
setLoading(true)
}
window.analytics.track(
event,
{
url: location.pathname,
label: document.title,
feedback:
(feedback !== null && feedback) ||
(feedback === null && positiveFeedback)
? "yes"
: "no",
message: message?.length ? message : null,
uuid: id,
},
function () {
if (showForm) {
setLoading(false)
resetForm()
}
}
)
} else {
if (showForm) {
resetForm()
}
}
}
}
function resetForm() {
setShowForm(false)
setSubmittedFeedback(true)
if (message) {
setId(null)
}
}
useEffect(() => {
if (!id) {
setId(uuid())
}
}, [id])
return (
<div className={`tw-py-2 ${className}`}>
<SwitchTransition mode="out-in">
<CSSTransition
key={showForm}
nodeRef={nodeRef}
timeout={300}
addEndListener={(done) => {
nodeRef.current.addEventListener("transitionend", done, false)
}}
classNames={{
enter: "animate__animated animate__fadeIn",
exit: "animate__animated animate__fadeOut",
}}
>
<>
{!showForm && !submittedFeedback && (
<div
className="tw-flex tw-flex-row tw-items-center"
ref={inlineFeedbackRef}
>
<span className="tw-mr-1.5 tw-text-body-regular">
{question}
</span>
<Button
onClick={handleFeedback}
className="tw-w-fit tw-mr-0.5 last:tw-mr-0"
>
{positiveBtn}
</Button>
<Button
onClick={handleFeedback}
className="tw-w-fit tw-mr-0.5 last:tw-mr-0"
>
{negativeBtn}
</Button>
</div>
)}
{showForm && !submittedFeedback && (
<div className="tw-flex tw-flex-col" ref={inlineQuestionRef}>
<span className="tw-mb-1">
{positiveFeedback ? positiveQuestion : negativeQuestion}
</span>
<textarea
rows={4}
value={message}
onChange={(e) => setMessage(e.target.value)}
className="tw-rounded-sm tw-bg-transparent tw-border tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark tw-p-1 tw-font-base"
></textarea>
<Button
onClick={submitFeedback}
disabled={loading}
className="tw-mt-1 tw-w-fit"
>
{submitBtn}
</Button>
</div>
)}
{submittedFeedback && (
<div>
<div
className="tw-flex tw-flex-col tw-text-label-large-plus"
ref={inlineMessageRef}
>
<span>{submitMessage}</span>
{showPossibleSolutions && (
<Solutions message={message} feedback={positiveFeedback} />
)}
</div>
</div>
)}
</>
</CSSTransition>
</SwitchTransition>
</div>
)
}
export default Feedback
www/docs/src/components/Footer/SocialLinks/index.tsx
+43
View File
@@ -0,0 +1,43 @@
import React from "react"
import IconTwitter from "@site/src/theme/Icon/Twitter"
import IconGitHub from "@site/src/theme/Icon/GitHub"
import IconDiscord from "@site/src/theme/Icon/Discord"
import IconLinkedIn from "@site/src/theme/Icon/LinkedIn"
import { SocialLink } from "@medusajs/docs"
type SocialLinksProps = {
links?: SocialLink[]
} & React.HTMLAttributes<HTMLDivElement>
const SocialLinks: React.FC<SocialLinksProps> = ({ links = [] }) => {
const socialIcons = {
twitter: (
<IconTwitter iconColorClassName="tw-fill-medusa-icon-placeholder dark:tw-fill-medusa-icon-placeholder-dark group-hover:tw-fill-medusa-icon-secondary dark:group-hover:tw-fill-medusa-icon-secondary-dark" />
),
github: (
<IconGitHub iconColorClassName="tw-fill-medusa-icon-placeholder dark:tw-fill-medusa-icon-placeholder-dark group-hover:tw-fill-medusa-icon-secondary dark:group-hover:tw-fill-medusa-icon-secondary-dark" />
),
discord: (
<IconDiscord iconColorClassName="tw-fill-medusa-icon-placeholder dark:tw-fill-medusa-icon-placeholder-dark group-hover:tw-fill-medusa-icon-secondary dark:group-hover:tw-fill-medusa-icon-secondary-dark" />
),
linkedin: (
<IconLinkedIn iconColorClassName="tw-fill-medusa-icon-placeholder dark:tw-fill-medusa-icon-placeholder-dark group-hover:tw-fill-medusa-icon-secondary dark:group-hover:tw-fill-medusa-icon-secondary-dark" />
),
}
return (
<div className="tw-flex tw-items-center">
{links.map((link) => (
<a
className="tw-group tw-ml-1 first:tw-ml-0"
href={link.href}
key={link.type}
>
{socialIcons[link.type]}
</a>
))}
</div>
)
}
export default SocialLinks
www/docs/src/components/LargeCard/index.css
-130
View File
@@ -1,130 +0,0 @@
.large-card {
background-color: var(--large-card-bg);
border: 1px solid var(--large-card-border-color);
border-radius: var(--ifm-global-radius);
padding: calc(var(--ifm-base-margin-vertical) * 3) var(--ifm-base-spacing) calc(var(--ifm-base-margin-vertical) / 2);
display: flex;
flex-direction: column;
justify-content: space-between;
margin-bottom: var(--ifm-base-margin-vertical);
position: relative;
}
.large-card:not(.large-card-soon):hover,
.large-card:not(.large-card-soon):hover:before {
background-color: var(--large-card-bg-hover);
}
.large-card-soon:hover a {
pointer-events: none;
}
.large-card-soon:hover .large-card-title,
.large-card-soon:hover .large-card-content {
color: var(--medusa-text-disabled);
}
.large-card:before,
.large-card:after {
content: '';
position: absolute;
left: 0;
width: 100%;
border-radius: var(--ifm-global-radius);
}
.large-card:before {
z-index: 1;
height: calc(var(--ifm-base-margin-vertical) * 4);
top: 0;
background-image: var(--large-card-bg-image);
background-color: var(--large-card-bg);
}
.large-card:nth-child(3n+1):before {
background-position-x: 2%;
background-position-y: 52%;
}
.large-card:nth-child(3n + 2):before {
background-position-x: 19%;
background-position-y: 16%;
}
.large-card:nth-child(3n + 3):before {
background-position-x: 17%;
background-position-y: 50%;
}
.large-card:after {
z-index: 2;
left: 0;
top: calc(var(--ifm-base-margin-vertical) * 2);
height: calc(var(--ifm-base-margin-vertical) * 2);
background: var(--large-card-fade-effect);
}
.large-card:not(.large-card-soon):hover:after {
background: var(--large-card-fade-effect-hover);
}
.large-card > * {
z-index: 3;
}
.large-card-bordered-icon-wrapper {
--bordered-padding: var(--large-card-icon-wrapper-padding);
margin-bottom: calc(var(--ifm-base-margin-vertical) / 2);
}
.large-card-icon-wrapper {
--bordered-inside-padding: var(--large-card-icon-inside-padding);
}
.large-card-icon {
width: var(--large-card-icon-size);
height: var(--large-card-icon-size);
}
.large-card-heading {
margin-bottom: calc(var(--ifm-base-margin-vertical) / 4);
}
.large-card-title {
color: var(--ifm-color-primary);
font-size: var(--medusa-label-regular-plus-size);
line-height: var(--medusa-label-regular-plus-line-height);
font-weight: var(--medusa-label-regular-plus-font-weight);
}
.large-card-content {
font-size: var(--medusa-body-regular-size);
line-height: var(--medusa-body-regular-line-height);
font-weight: var(--medusa-body-regular-font-weight);
}
.large-card-title,
.large-card-content {
transition: all var(--ifm-transition-fast) ease;
}
.large-card-content ul {
padding-left: var(--ifm-base-spacing);
}
.large-card-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 4;
border-radius: var(--ifm-global-radius);
}
.large-card-badge {
position: absolute;
top: calc(var(--ifm-base-margin-vertical) / 2);
right: var(--ifm-base-spacing);
}
www/docs/src/components/LargeCard/index.js
-43
View File
@@ -1,43 +0,0 @@
import React from "react"
import './index.css'
import BorderedIcon from "../BorderedIcon"
import clsx from 'clsx';
import Badge from "../Badge";
export default function LargeCard ({
Icon,
image,
title,
action: {
href
},
isSoon = false,
children
}) {
return (
<article className={clsx(
'large-card',
isSoon && 'large-card-soon'
)}>
<div>
{isSoon && <Badge variant={'purple'} className={'large-card-badge'}>Guide coming soon</Badge>}
{(Icon || image) && (
<BorderedIcon
IconComponent={Icon}
icon={image}
iconClassName='large-card-icon'
wrapperClassName='large-card-bordered-icon-wrapper'
iconWrapperClassName='large-card-icon-wrapper'
/>
)}
<div className="large-card-heading">
<span className="large-card-title">{title}</span>
</div>
<div className="large-card-content">
{children}
</div>
</div>
<a href={href} className="large-card-link"></a>
</article>
)
}
www/docs/src/components/LargeCard/index.tsx
+96
View File
@@ -0,0 +1,96 @@
import React from "react"
import BorderedIcon from "../BorderedIcon"
import clsx from "clsx"
import Badge from "../Badge"
import { IconProps } from "@site/src/theme/Icon/index"
type LargeCardProps = {
Icon: React.FC<IconProps>
image: {
light: string
dark?: string
}
title: string
action: {
href: string
}
isSoon?: boolean
} & React.HTMLAttributes<HTMLDivElement>
const LargeCard: React.FC<LargeCardProps> = ({
Icon,
image,
title,
action: { href },
isSoon = false,
children,
}) => {
return (
<article
className={clsx(
"tw-group tw-bg-docs-bg-surface dark:tw-bg-docs-bg-surface-dark",
"tw-border tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark tw-rounded",
"tw-pt-6 tw-pb-1 tw-px-1 tw-mb-2",
"tw-flex tw-flex-col tw-justify-between tw-relative",
"before:tw-content-[''] before:tw-absolute before:tw-left-0 before:tw-w-full before:tw-rounded before:tw-z-[1] before:tw-h-8 before:tw-top-0",
"before:tw-bg-large-card dark:before:tw-bg-large-card-dark before:tw-bg-docs-bg-surface dark:before:tw-bg-docs-bg-surface-dark",
"[&:nth-child(3n+1):before]:tw-bg-[2%_52%] [&:nth-child(3n+2):before]:tw-bg-[19%_16%] [&:nth-child(3n+3):before]:tw-bg-[17%_50%]",
"after:tw-content-[''] after:tw-absolute after:tw-left-0 after:tw-w-full after:tw-rounded",
"after:tw-z-[2] after:tw-left-0 after:tw-top-4 after:tw-height-4 after:tw-bg-large-card-fade dark:after:tw-bg-large-card-fade-dark",
!isSoon &&
"hover:after:tw-bg-large-card-fade-hover dark:hover:after:tw-bg-large-card-fade-hover",
!isSoon &&
"hover:tw-bg-medusa-bg-subtle-hover dark:hover:tw-bg-medusa-bg-base-hover-dark",
!isSoon &&
"hover:before:tw-bg-medusa-bg-subtle-hover dark:hover:before:tw-bg-medusa-bg-base-hover-dark"
)}
>
<div className={clsx("tw-z-[3]")}>
{isSoon && (
<Badge variant={"purple"} className="tw-absolute tw-top-1 tw-right-1">
Guide coming soon
</Badge>
)}
{(Icon || image) && (
<BorderedIcon
IconComponent={Icon}
icon={image}
iconClassName="tw-w-[20px] tw-h-[20px]"
wrapperClassName="tw-mb-1"
iconWrapperClassName="tw-p-[6px]"
/>
)}
<div className="tw-mb-0.5">
<span
className={clsx(
isSoon &&
"group-hover:tw-text-medusa-text-disabled dark:group-hover:tw-text-medusa-text-disabled-dark",
"tw-text-medusa-text-base dark:tw-text-medusa-text-base-dark tw-text-label-regular-plus",
"tw-transition-all tw-duration-200 tw-ease-ease"
)}
>
{title}
</span>
</div>
<div
className={clsx(
isSoon &&
"group-hover:tw-text-medusa-text-disabled dark:group-hover:tw-text-medusa-text-disabled-dark",
"tw-transition-all tw-duration-200 tw-ease-ease tw-text-body-regular"
)}
>
{children}
</div>
</div>
<a
href={href}
className={clsx(
"tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-z-[4] tw-rounded",
isSoon && "group-hover:tw-pointer-events-none"
)}
></a>
</article>
)
}
export default LargeCard
www/docs/src/components/LargeCardList/index.js
-10
View File
@@ -1,10 +0,0 @@
import React from "react"
import clsx from 'clsx'
export default function LargeCardList ({ colSize, className, children }) {
return (
<section className={clsx('cards-grid', `grid-${colSize || '4'}`, className)}>
{children}
</section>
)
}
www/docs/src/components/LargeCardList/index.tsx
+21
View File
@@ -0,0 +1,21 @@
import React from "react"
import clsx from "clsx"
type LargeCardListProps = {
colSize?: string
className?: string
} & React.HTMLAttributes<HTMLDivElement>
const LargeCardList: React.FC<LargeCardListProps> = ({
colSize = "4",
className,
children,
}) => {
return (
<section className={clsx("cards-grid", `grid-${colSize}`, className)}>
{children}
</section>
)
}
export default LargeCardList
www/docs/src/components/MDXComponents/InlineCode.tsx
+28
View File
@@ -0,0 +1,28 @@
import React from "react"
import CopyButton from "@site/src/components/CopyButton"
import type { Props } from "@theme/MDXComponents/Code"
import clsx from "clsx"
const MDXInlineCode: React.FC<Props> = (props) => {
return (
<CopyButton
text={props.children as string}
buttonClassName={clsx(
"tw-bg-transparent tw-border-0 tw-p-0 tw-inline tw-text-medusa-text-subtle dark:tw-text-medusa-text-subtle-dark",
"active:[&>code]:tw-bg-medusa-bg-subtle-pressed dark:active:[&>code]:tw-bg-medusa-bg-subtle-pressed-dark",
"focus:[&>code]:tw-bg-medusa-bg-subtle-pressed dark:focus:[&>code]:tw-bg-medusa-bg-subtle-pressed-dark",
"hover:[&>code]:tw-bg-medusa-bg-subtle-hover dark:hover:[&>code]:tw-bg-medusa-bg-base-hover-dark"
)}
>
<code
{...props}
className={clsx(
"tw-border tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark",
"tw-text-medusa-text-subtle dark:tw-text-medusa-text-subtle-dark tw-leading-6"
)}
/>
</CopyButton>
)
}
export default MDXInlineCode
www/docs/src/components/Navbar/Actions/index.tsx
+46
View File
@@ -0,0 +1,46 @@
import React from "react"
import Tooltip from "@site/src/components/Tooltip"
import { NavbarAction } from "@medusajs/docs"
import Icon from "@site/src/theme/Icon"
import clsx from "clsx"
type NavbarActionsProps = {
items: NavbarAction[]
} & React.HTMLAttributes<HTMLDivElement>
const NavbarActions: React.FC<NavbarActionsProps> = ({ items = [] }) => {
return (
<div className="lg:tw-block tw-hidden">
{items.map((item, index) => {
switch (item.type) {
case "link":
// eslint-disable-next-line no-case-declarations
const ItemIcon = item.icon ? Icon[item.icon] : null
return (
<Tooltip text={item.title} key={index}>
<a
href={item.href}
title={item.title}
// className={`${ItemIcon ? "navbar-link-icon" : ""} ${
// item.className || ""
// }`}
className={clsx(
ItemIcon &&
"tw-bg-medusa-button-secondary dark:tw-bg-medusa-button-secondary-dark tw-border tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark tw-rounded tw-w-2 tw-h-2 tw-flex tw-justify-center tw-items-center hover:tw-bg-medusa-button-secondary-hover dark:hover:tw-bg-medusa-button-secondary-hover-dark",
item.className
)}
>
{item.label}
{ItemIcon && <ItemIcon />}
</a>
</Tooltip>
)
default:
return <></>
}
})}
</div>
)
}
export default NavbarActions
www/docs/src/components/QueryNote/index.js
-25
View File
@@ -1,25 +0,0 @@
import React from "react";
import { useQueryStringValue } from "@docusaurus/theme-common/internal"
import Admonition from "@theme/Admonition"
export default function QueryNote ({
query: {
key,
value = ''
},
//admonition props
admonition,
children
}) {
const queryValue = useQueryStringValue(key)
return (
<>
{queryValue === value && (
<Admonition {...admonition}>
{children}
</Admonition>
)}
</>
)
}
www/docs/src/components/QueryNote/index.tsx
+29
View File
@@ -0,0 +1,29 @@
import Admonition, { Props as AdmonitionProps } from "@theme/Admonition"
import { useQueryStringValue } from "@docusaurus/theme-common/internal"
import React from "react"
type QueryNoteProps = {
query: {
key: string
value?: string
}
admonition: AdmonitionProps
} & React.HTMLAttributes<HTMLDivElement>
const QueryNote: React.FC<QueryNoteProps> = ({
query: { key, value = "" },
admonition,
children,
}) => {
const queryValue = useQueryStringValue(key)
return (
<>
{queryValue === value && (
<Admonition {...admonition}>{children}</Admonition>
)}
</>
)
}
export default QueryNote
www/docs/src/components/StructuredData/HowTo/index.tsx
+44
View File
@@ -0,0 +1,44 @@
import React from "react"
import Head from "@docusaurus/Head"
import { useLocation } from "@docusaurus/router"
import useDocusaurusContext from "@docusaurus/useDocusaurusContext"
import type { TOCItem } from "@docusaurus/mdx-loader"
type StructuredDataHowToProps = {
toc: readonly TOCItem[]
title: string
}
const StructuredDataHowTo: React.FC<StructuredDataHowToProps> = ({
toc,
title,
}) => {
const location = useLocation()
const {
siteConfig: { url },
} = useDocusaurusContext()
const mainUrl = `${url}/${location.pathname}`
return (
<Head>
<script type="application/ld+json">
{JSON.stringify({
"@context": "https://schema.org",
"@type": "HowTo",
name: title,
step: [
toc
.filter((item) => item.level === 2)
.map((item) => ({
"@type": "HowToStep",
text: item.value,
url: `${mainUrl}#${item.id}`,
})),
],
})}
</script>
</Head>
)
}
export default StructuredDataHowTo
www/docs/src/components/StructuredData/Searchbox/index.tsx
+33
View File
@@ -0,0 +1,33 @@
import React from "react"
import useDocusaurusContext from "@docusaurus/useDocusaurusContext"
import Head from "@docusaurus/Head"
type StructuredDataSearchboxProps = React.HTMLAttributes<HTMLScriptElement>
const StructuredDataSearchbox: React.FC<StructuredDataSearchboxProps> = () => {
const {
siteConfig: { url },
} = useDocusaurusContext()
return (
<Head>
<script type="application/ld+json">
{JSON.stringify({
"@context": "https://schema.org",
"@type": "WebSite",
url,
potentialAction: {
"@type": "SearchAction",
target: {
"@type": "EntryPoint",
urlTemplate: `${url}/search?q={search_term_string}`,
},
"query-input": "required name=search_term_string",
},
})}
</script>
</Head>
)
}
export default StructuredDataSearchbox
www/docs/src/theme/Tooltip/index.js → www/docs/src/components/Tooltip/index.tsx
+14 -1
View File
@@ -1,9 +1,20 @@
import React, { useState, useEffect } from "react"
import { Tooltip as ReactTooltip } from "react-tooltip"
import type { ITooltip } from "react-tooltip"
import uuid from "react-uuid"
import "react-tooltip/dist/react-tooltip.css"
export default function Tooltip({ children, text, tooltipClassName }) {
type TooltipProps = {
text: string
tooltipClassName?: string
} & React.HTMLAttributes<HTMLSpanElement> &
ITooltip
const Tooltip: React.FC<TooltipProps> = ({
text,
tooltipClassName = "",
children,
}) => {
const [elementId, setElementId] = useState(null)
useEffect(() => {
@@ -25,3 +36,5 @@ export default function Tooltip({ children, text, tooltipClassName }) {
</>
)
}
export default Tooltip
www/docs/src/components/UiIcon/index.js
-12
View File
@@ -1,12 +0,0 @@
import React from 'react';
import ThemedImage from '@theme/ThemedImage';
export default function UiIcon ({ lightIcon, darkIcon = '', alt = '' }) {
return (
<ThemedImage alt={alt} sources={{
light: lightIcon,
dark: darkIcon || lightIcon
}} className="ui-icon" />
)
}
www/docs/src/components/UiIcon/index.tsx
+27
View File
@@ -0,0 +1,27 @@
import React from "react"
import ThemedImage from "@theme/ThemedImage"
type UiIconProps = {
lightIcon: string
darkIcon?: string
alt?: string
}
const UiIcon: React.FC<UiIconProps> = ({
lightIcon,
darkIcon = "",
alt = "",
}) => {
return (
<ThemedImage
alt={alt}
sources={{
light: lightIcon,
dark: darkIcon || lightIcon,
}}
className="tw-align-sub tw-w-[20px] tw-h-[20px]"
/>
)
}
export default UiIcon
www/docs/src/components/close-icon.js
-18
View File
@@ -1,18 +0,0 @@
import React from "react"
const CloseIcon = ({ fill = "black" }) => (
<svg
width="15"
height="15"
viewBox="0 0 9 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.05 7.76L0.51 7.22L3.79 3.92L0.51 0.62L1.05 0.0799997L4.33 3.38L7.59 0.0799997L8.13 0.62L4.85 3.92L8.13 7.22L7.59 7.76L4.33 4.48L1.05 7.76Z"
fill={fill}
/>
</svg>
)
export default CloseIcon
www/docs/src/components/conf-logo.js
-48
View File
@@ -1,48 +0,0 @@
import React from "react"
const ConfLogo = ({ fill }) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 371.2226 96">
<title>medusa-logo-one-colour-rgb</title>
<g id="black-rgb">
<path
id="logoMark"
d="M77.8271,15.6225,56.08,3.0664a22.8877,22.8877,0,0,0-22.8877,0L11.4438,15.6225A22.8877,22.8877,0,0,0,0,35.4438V60.5562A22.8877,22.8877,0,0,0,11.4438,80.3775L33.1919,92.9336a22.8877,22.8877,0,0,0,22.8877,0L77.8271,80.3775A22.8876,22.8876,0,0,0,89.271,60.5562V35.4438A22.8876,22.8876,0,0,0,77.8271,15.6225ZM44.6357,70.3178A22.3178,22.3178,0,1,1,66.9531,48,22.3176,22.3176,0,0,1,44.6357,70.3178Z"
style="fill: #0a3149"
/>
<g id="type">
<path
id="type_CompoundPathItem_"
d="M163.5361,22.6571h14.1416V71.662H169.206V30.078L155.625,71.662h-8.8907l-13.581-41.0948V71.662h-8.4707V22.6571h14.2109l12.3906,39.2734Z"
style="fill: #0a3149"
/>
<path
id="type_CompoundPathItem_2"
d="M220.4453,60.6c-2.03,7.3516-8.2608,12.042-17.0118,12.042-10.9209,0-17.8525-7.3515-17.8525-18.4824s7.001-18.4814,18.0625-18.4814c12.3213,0,18.6914,9.24,15.332,20.7216H194.0517c.7012,5.8106,3.9209,9.2413,9.5215,9.2413,3.92,0,7.001-1.82,8.1914-5.0411Zm-26.253-9.871H211.414c.49-5.04-2.38-8.33-7.9111-8.33C198.2529,42.3993,195.0322,45.34,194.1923,50.7294Z"
style="fill: #0a3149"
/>
<path
id="type_CompoundPathItem_3"
d="M252.5742,22.6571h7.9814V71.662h-7.9814V66.4813a13.8489,13.8489,0,0,1-11.9014,6.1611c-9.24,0-15.752-7.3515-15.752-18.4824,0-11.06,6.4415-18.4814,15.752-18.4814a13.85,13.85,0,0,1,11.9014,6.16Zm.3506,31.5029c0-6.9306-3.9209-11.4814-9.8018-11.4814-5.95,0-9.87,4.5508-9.87,11.4814s3.92,11.4815,9.87,11.4815C249.0039,65.6415,252.9248,61.0907,252.9248,54.16Z"
style="fill: #0a3149"
/>
<path
id="type_CompoundPathItem_4"
d="M290.2333,36.6581h7.9805V71.662h-7.9805V65.3612c-2.4511,4.69-6.4414,7.1406-11.3417,7.1406-9.7305,0-11.2715-9.6611-11.2715-15.8916V36.6581h7.98V56.5409c0,4.62,1.0508,9.03,6.0918,9.03,5.18,0,8.541-4.62,8.541-11.0605Z"
style="fill: #0a3149"
/>
<path
id="type_CompoundPathItem_5"
d="M304.0888,59.1307H311.79c-.49,4.3408,2.7305,7.07,8.1914,7.07,4.2695,0,7.1406-1.68,7.1406-4.2,0-7.0009-22.5429-1.96-22.5429-15.0517,0-7,6.5107-11.27,14.9824-11.27,9.3808,0,16.1709,5.25,14.7011,13.1611h-7.7714c.98-3.99-2.17-6.7207-7-6.7207-4.0606,0-6.7207,1.82-6.7207,4.34,0,7.0713,22.6123,1.6807,22.6123,14.9825,0,7.07-6.3711,11.2011-15.4717,11.2011C310.04,72.6424,303.5292,67.6014,304.0888,59.1307Z"
style="fill: #0a3149"
/>
<path
id="type_CompoundPathItem_6"
d="M371.2226,51.78V71.662H363.872V65.5711a13.7856,13.7856,0,0,1-12.6015,7.0713c-7.42,0-12.0411-4.3408-12.0411-10.4316,0-7.07,6.16-11.3408,16.0313-11.3408a36.6377,36.6377,0,0,1,7.9814.91c0-5.3213-1.8906-9.1709-7.4912-9.1709-4.2,0-6.791,2.1-5.95,6.02H341.749c-1.89-7.77,4.9707-12.9511,14.0722-12.9511C366.0419,35.6786,371.2226,42.0487,371.2226,51.78Zm-7.7,6.0909a25.2,25.2,0,0,0-7.6308-1.19c-5.7413,0-8.5411,2.1006-8.5411,5.32,0,2.8008,2.1,4.27,5.53,4.27A10.8339,10.8339,0,0,0,363.5224,57.871Z"
style="fill: #0a3149"
/>
</g>
</g>
</svg>
)
export default ConfLogo
www/docs/src/css/_card.css
-111
View File
@@ -1,111 +0,0 @@
.card {
background-color: var(--ifm-card-bg);
border: 1px solid var(--ifm-card-bg-hover) !important;
border-radius: var(--ifm-global-radius);
}
img.card-icon {
width: var(--ifm-card-icon-size);
height: var(--ifm-card-icon-size);
}
.cards-grid {
display: grid;
column-gap: var(--ifm-base-spacing);
grid-auto-rows: 1fr;
}
.cards-grid.grid-6 {
grid-template-columns: repeat(2, 1fr);
}
.card-highlighted {
--bordered-inside-padding: 6px;
position: relative;
margin-bottom: calc(var(--ifm-base-margin-vertical) * 2);
}
.card-highlighted {
background-color: var(--ifm-card-bg);
}
/* html[data-theme="dark"] .card-highlighted::before,
html[data-theme="dark"] .card-highlighted::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
} */
/* html[data-theme="dark"] .card-highlighted::before {
z-index: -2;
background-color: var(--ifm-card-bg);
background-image: url('/img/stardust.png');
transition: all var(--ifm-transition-fast) ease;
}
html[data-theme="dark"] .card-highlighted::after {
z-index: -1;
background-image: url('/img/light-beam.png');
} */
.card-highlighted:hover {
background-color: var(--ifm-card-bg-hover);
}
.card + p {
margin-top: var(--ifm-base-margin-vertical);
}
.card-wrapper:hover > [class*=cardSoon] [class*=cardTitle],
.card-wrapper:hover > [class*=cardSoon] [class*=cardDescription] {
color: var(--medusa-text-disabled);
}
@media screen and (min-width: 992px) {
.cards-grid.grid-4 {
grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (max-width: 991px) and (min-width: 768px) {
.cards-grid.grid-4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 768px) {
.card-highlighted [class*=cardDescription] {
width: 50%;
}
.card-highlighted::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
}
.card-highlighted::before {
background-repeat: no-repeat;
background-size: cover;
background-image: var(--ifm-card-highlighted-bg-image);
}
}
@media screen and (max-width: 767px) {
.cards-grid.grid-4 {
grid-template-columns: repeat(1, 1fr);
}
.cards-grid.grid-6 {
grid-template-columns: repeat(1, 1fr);
}
}
www/docs/src/css/_code.css
-203
View File
@@ -1,203 +0,0 @@
code {
border: 1px solid var(--ifm-code-border-color);
color: var(--ifm-code-color);
line-height: var(--medusa-body-regular-line-height);
}
[data-tooltip-content]:hover code {
background-color: var(--ifm-code-background-hover);
}
[data-tooltip-content] > span:active > code,
[data-tooltip-content] > span:focus > code {
background-color: var(--ifm-code-background-pressed);
}
.inline-code-copy {
background-color: transparent;
border: none;
padding: 0;
display: inline;
color: var(--ifm-code-color)
}
.prism-code {
background-color: none;
word-break: break-word;
outline: none !important;
}
.prism-code div,
.prism-code div:focus,
.prism-code div:active {
outline: none !important;
}
.code-tabs {
position: relative;
}
.code-header {
padding: 12px var(--ifm-base-spacing);
background-color: var(--medusa-code-tabs-bg);
display: flex;
justify-content: space-between;
align-items: center;
border-radius: var(--ifm-code-border-radius) var(--ifm-code-border-radius) 0px 0px;
}
.code-tabs .tabs::-webkit-scrollbar {
display: none;
}
.code-tabs .tabs__item {
color: var(--ifm-code-tabs-color);
font-size: var(--medusa-label-small-plus-size);
font-weight: var(--medusa-label-small-plus-font-weight);
line-height: var(--medusa-label-small-plus-line-height);
padding: 4px 12px;
border: 1px solid transparent;
white-space: nowrap;
border-radius: 99999px;
}
.code-tabs .tabs__item:not(:first-child) {
margin-left: 4px;
}
.code-title {
font-size: var(--medusa-label-small-plus-size);
font-weight: var(--medusa-label-small-plus-font-weight);
line-height: var(--medusa-label-small-plus-line-height);
color: var(--ifm-code-title-color);
}
.code-tabs-ul-wrapper {
position: relative;
overflow: auto;
}
.code-tabs-ul-wrapper .tabs__item {
z-index: 2;
}
.code-tabs .tabs__item--active {
color: var(--ifm-code-tabs-active-color);
}
.theme-code-block:not(.no-header-block),
.code-tabs .theme-code-block {
border-radius: 0 0 var(--ifm-code-border-radius) var(--ifm-code-border-radius) !important;
}
.theme-code-block.no-header-block {
border-radius: var(--ifm-code-border-radius);
}
.code-action-copy {
display: flex;
}
.code-action {
--ifm-icon-color: var(--medusa-code-block-action);
background-color: transparent;
border: none;
padding: 4px;
cursor: pointer;
border-radius: var(--ifm-global-radius);
}
.code-action:hover,
.tabs__item:hover {
background-color: var(--ifm-code-action-hover-bg) !important;
}
.code-action:not(:first-child) {
margin-left: calc(var(--ifm-base-spacing) / 2);
}
a.code-action {
display: inline-flex;
justify-content: center;
align-items: center;
}
.copy-action {
cursor: pointer;
}
.code-header,
.theme-code-block {
border: 1px solid var(--ifm-code-block-border-color);
}
.code-header {
border-bottom: none;
}
.theme-code-block.no-header-block code:not(.thin-code),
.theme-code-block:not(.no-header-block) code {
padding: var(--ifm-pre-padding);
}
.theme-code-block.no-header-block .thin-code {
padding: calc(var(--ifm-pre-padding) / 2);
padding-left: var(--ifm-pre-padding);
}
[class*=codeLineNumber] {
color: var(--ifm-code-line-number-color);
padding-left: 0 !important;
}
@media screen and (min-width: 568px) {
.prism-code {
max-width: 90%;
}
.prism-code:after {
border-radius: var(--ifm-global-radius);
content: '';
position: absolute;
right: 0;
top: 0;
width: calc(10% + 24px);
height: 100%;
background: linear-gradient(90deg, var(--ifm-pre-background-transparent), var(--ifm-pre-background) 24px);
}
.prism-code:not(:hover)::-webkit-scrollbar-thumb,
.prism-code:not(:hover)::-webkit-scrollbar-track {
visibility: hidden;
}
.prism-code:hover::-webkit-scrollbar-thumb,
.prism-code:hover::-webkit-scrollbar-track {
opacity: 1;
}
.code-tabs-ul-wrapper .code-tab-selector {
position: absolute;
border: 1px solid var(--medusa-code-tab-border);
background-color: var(--ifm-code-tabs-active-bg);
transition: all var(--ifm-transition-fast) ease;
top: 0;
z-index: 1;
border-radius: 99999px;
}
}
@media screen and (max-width: 567px) {
.code-tabs .tabs__item--active {
border: 1px solid var(--medusa-code-tab-border);
background-color: var(--ifm-code-tabs-active-bg);
}
.code-action {
visibility: hidden;
}
.tablist-wrapper.code-header .code-title {
display: none;
}
}
www/docs/src/css/_docsearch.css
-383
View File
@@ -1,383 +0,0 @@
/* Search Modal */
.DocSearch-Modal {
border: 1px solid var(--docsearch-modal-border-color);
border-radius: var(--ifm-global-radius) !important;
position: relative;
}
.DocSearch-SearchBar {
padding: 0 !important
}
.DocSearch-Form {
--docsearch-spacing: var(--docsearch-spacing-x);
--docsearch-searchbox-height: var(--docsearch-modal-searchbox-height);
--docsearch-searchbox-shadow: var(--docsearch-modal-searchbox-focus-background);
--docsearch-searchbox-focus-background: var(--docsearch-modal-background);
border-radius: var(--ifm-global-radius) var(--ifm-global-radius) 0 0 !important;
border-bottom: 1px solid;
}
.DocSearch-LoadingIndicator svg, .DocSearch-MagnifierLabel svg {
width: 20px !important;
height: 20px !important;
}
.DocSearch-Input {
font-size: var(--medusa-body-regular-size) !important;
line-height: var(--medusa-body-regular-line-height) !important;
font-weight: var(--medusa-body-regular-font-weight) !important;
padding-left: var(--ifm-base-spacing) !important;
}
.DocSearch-Input::placeholder,
.DocSearch-Input:-ms-input-placeholder,
.DocSearch-Input::-ms-input-placeholder {
color: var(--docsearch-placeholder-color);
}
.DocSearch-Dropdown {
padding: 0 0 var(--docsearch-footer-height) 0 !important;
max-height: calc(var(--docsearch-modal-height) - var(--docsearch-modal-searchbox-height)) !important;
}
.DocSearch-Hit-source {
margin: 0 !important;
font-size: var(--medusa-label-small-plus-size) !important;
line-height: var(--medusa-label-small-plus-line-height) !important;
font-weight: var(--medusa-label-small-plus-font-weight) !important;
text-transform: uppercase;
color: var(--docsearch-source-color);
border-bottom: 1px solid var(--docsearch-hit-border-color);
padding: var(--docsearch-source-spacing) !important;
}
.DocSearch-Footer {
display: none !important;
}
.DocSearch-Hit {
padding: 0 !important;
}
.DocSearch-Hit:not(.DocSearch-Hit--Child) .DocSearch-Hit-icon {
width: 40px !important;
height: 40px !important;
padding: 2px;
border: 1px solid var(--medusa-border-strong);
border-radius: var(--ifm-global-radius);
display: flex;
justify-content: center;
align-items: center;
}
.DocSearch-Hit-icon svg {
display: none;
}
.DocSearch-Hit:not(.DocSearch-Hit--Child) .DocSearch-Hit-icon::before {
width: 32px;
height: 32px;
content: '';
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
[data-theme="dark"] .DocSearch-Hit:not(.DocSearch-Hit--Child) .DocSearch-Hit-icon::before {
background-image: url('/img/search-hit.svg');
}
html:not([data-theme="dark"]) .DocSearch-Hit:not(.DocSearch-Hit--Child) .DocSearch-Hit-icon::before {
background-image: url('/img/search-hit-light.svg');
}
.DocSearch-Hit--Child .DocSearch-Hit-icon {
display: none;
}
.DocSearch-Hit a {
padding: var(--docsearch-spacing) !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.DocSearch-Hit:not(:last-of-type) a {
border-bottom: 1px solid var(--docsearch-hit-border-color);
}
.DocSearch-Hit-content-wrapper {
margin: 0 16px !important;
}
.DocSearch-Hit-title,
.DocSearch-Hit-title mark {
color: var(--docsearch-hit-title-color) !important;
font-size: var(--medusa-label-small-plus-size) !important;
line-height: var(--medusa-label-small-plus-line-height) !important;
font-weight: var(--medusa-label-small-plus-font-weight) !important;
}
.DocSearch-Hit-path {
color: var(--docsearch-muted-color) !important;
font-size: var(--medusa-label-small-size) !important;
line-height: var(--medusa-label-small-line-height) !important;
font-weight: var(--medusa-label-small-font-weight) !important;
}
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path {
--docsearch-hit-active-color: var(--docsearch-muted-color);
}
.DocSearch-Hit[aria-selected=true] a {
background-color: var(--docsearch-hit-active-bg) !important;
}
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-content-wrapper + .DocSearch-Hit-action:last-child {
height: 24px;
width: 24px;
border: 1px solid var(--medusa-border-strong);
border-radius: var(--ifm-global-radius);
background-color: var(--docsearch-modal-background);
padding: 2px;
display: flex;
justify-content: center;
align-items: center;
}
.DocSearch-Hit-content-wrapper + .DocSearch-Hit-action:last-child svg,
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-content-wrapper + .DocSearch-Hit-action:last-child svg {
display: none;
}
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-content-wrapper + .DocSearch-Hit-action:last-child::before {
content: '';
height: 20px;
width: 20px;
background-image: url('/img/search-hit-arrow.svg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
[data-theme="dark"] .DocSearch-Hit[aria-selected=true] .DocSearch-Hit-content-wrapper + .DocSearch-Hit-action:last-child::before {
background-image: url('/img/search-hit-arrow.svg');
}
html:not([data-theme="dark"]) .DocSearch-Hit[aria-selected=true] .DocSearch-Hit-content-wrapper + .DocSearch-Hit-action:last-child::before {
background-image: url('/img/search-hit-arrow-light.svg');
}
.DocSearch-Hit[aria-selected=true] mark {
text-decoration: none !important;
}
.DocSearch-Hit-Tree {
color: var(--docsearch-tree-color);
}
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree {
color: var(--docsearch-tree-hover-color);
}
.DocSearch-HitsFooter {
z-index: 100;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: var(--docsearch-footer-height);
background-color: var(--docsearch-modal-background);
border-top: 1px solid var(--docsearch-modal-border-color);
}
.DocSearch-HitsFooter a {
border-bottom: none !important;
}
.DocSearch-Reset {
border-radius: var(--ifm-global-radius) !important;
transition: all var(--ifm-transition-fast) ease;
}
.DocSearch-Reset:hover {
background-color: var(--medusa-bg-base-hover);
}
.DocSearch-Hits:last-of-type {
margin-bottom: 0 !important;
}
/* Modal no results */
.DocSearch-NoResults .DocSearch-Screen-Icon {
width: 20px;
height: 20px;
padding: 0 !important;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto calc(var(--ifm-base-margin-vertical) / 2) auto;
}
.DocSearch-NoResults .DocSearch-Screen-Icon svg {
display: none;
}
.DocSearch-NoResults .DocSearch-Screen-Icon::before {
content: '';
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
[data-theme="dark"] .DocSearch-NoResults .DocSearch-Screen-Icon::before {
background-image: url('/img/search-no-result.svg');
}
html:not([data-theme="dark"]) .DocSearch-NoResults .DocSearch-Screen-Icon::before {
background-image: url('/img/search-no-result-light.svg');
}
.DocSearch-NoResults .DocSearch-Title {
font-size: var(--medusa-label-small-size) !important;
line-height: var(--medusa-label-small-line-height) !important;
font-weight: var(--medusa-label-small-font-weight) !important;
padding-left: var(--ifm-base-spacing) !important;
}
.DocSearch-NoResults-Prefill-List {
text-align: center;
font-size: var(--medusa-label-small-plus-size) !important;
line-height: var(--medusa-label-small-plus-line-height) !important;
font-weight: var(--medusa-label-small-plus-font-weight) !important;
padding-left: var(--ifm-base-spacing) !important;
}
.DocSearch-NoResults-Prefill-List li::marker {
content: '';
}
.DocSearch-NoResults-Prefill-List li button {
color: var(--ifm-link-color);
}
/* Search Bar */
.DocSearch-Button {
width: 100%;
height: 100% !important;
border-radius: var(--ifm-global-radius) !important;
border: 1px solid var(--docsearch-searchbox-border-color) !important;
padding: 6px 6px 6px 8px !important;
}
span.DocSearch-Button-Key {
display: none;
}
.DocSearch-Container {
z-index: 1001 !important;
}
.DocSearch-Button .DocSearch-Search-Icon {
visibility: hidden;
}
.DocSearch-Button {
position: relative;
}
.DocSearch-Button-Container:before {
content: '';
height: 20px;
width: 20px;
position: absolute;
left: 8px;
top: 5px;
background-image: url('/static/img/magnifying-glass.svg');
background-repeat: no-repeat;
}
.DocSearch-Button-Placeholder {
color: var(--docsearch-placeholder-color);
padding-left: calc(var(--ifm-base-spacing) / 2) !important;
font-size: var(--medusa-label-small-size) !important;
line-height: var(--medusa-label-small-line-height) !important;
font-weight: var(--medusa-label-small-font-weight) !important;
}
.DocSearch-Button-Keys {
width: fit-content;
min-width: unset !important;
}
.DocSearch-Button-Key {
box-shadow: none !important;
border-radius: 6px !important;
font-size: var(--medusa-label-x-small-plus-size) !important;
line-height: var(--medusa-label-x-small-plus-line-height) !important;
font-weight: var(--medusa-label-x-small-plus-font-weight) !important;
font-family: var(--ifm-font-family-base) !important;
vertical-align: middle;
padding: 2px !important;
border: 1px solid var(--medusa-border-strong) !important;
}
.DocSearch-Button-Key:not(:last-child) {
margin-right: 4px !important;
}
.DocSearch-Button-Key:last-child {
margin-right: 0 !important;
}
.DocSearch-Button:active, .DocSearch-Button:focus, .DocSearch-Button:hover,
.DocSearch-Form, .DocSearch-Form {
border-color: var(--docsearch-searchbox-border-color) !important;
}
/* Search Page */
.search-page-wrapper article[class*=searchResultItem] {
max-width: unset !important;
}
@media screen and (min-width: 992px) {
[class*=searchBox] {
width: var(--docsearch-searchbox-width);
max-width: var(--docsearch-searchbox-width);
height: var(--docsearch-searchbox-height) !important;
padding: 0 !important;
}
}
@media screen and (max-width: 991px) {
.DocSearch-Button-Keys, .DocSearch-Button-Placeholder {
display: none !important;
}
.DocSearch-Button {
border: none !important;
background-color: transparent !important;
}
.DocSearch-Button:focus, .DocSearch-Button:hover {
box-shadow: none !important;
}
}
@media screen and (min-width: 768px) {
.DocSearch-Modal {
margin: unset !important;
width: var(--docsearch-modal-width);
}
.DocSearch-Container {
display: flex;
justify-content: center;
align-items: center;
}
}
www/docs/src/css/_docspage.css
-225
View File
@@ -1,225 +0,0 @@
.main-wrapper {
max-width: var(--ifm-max-content-width);
margin-left: auto;
margin-right: auto;
}
.theme-doc-breadcrumbs {
display: none;
}
article {
max-width: var(--ifm-docs-page-max-width);
}
.padding-top--md {
padding-top: 48px !important;
}
.margin-bottom--lg {
margin-bottom: calc(var(--ifm-base-margin-vertical) / 2) !important;
}
.pagination-nav {
margin-left: auto;
margin-right: auto;
max-width: var(--ifm-docs-page-max-width);
}
details summary {
cursor: pointer;
}
.reference-table {
display: table !important;
table-layout: fixed;
width: 100%;
}
.reference-table p {
--ifm-paragraph-margin-bottom: 0;
}
.reference-table.table-col-4 th:nth-child(1),
.reference-table.table-col-4 td:nth-child(1) {
width: 20% !important;
}
.reference-table.table-col-4 th:nth-child(2),
.reference-table.table-col-4 td:nth-child(2) {
width: 20% !important;
}
.reference-table.table-col-4 th:nth-child(3),
.reference-table.table-col-4 td:nth-child(3) {
width: 40% !important;
}
.reference-table.table-col-4 th:nth-child(4),
.reference-table.table-col-4 td:nth-child(4) {
width: 20% !important;
}
.reference-table th:nth-child(1),
.reference-table td:nth-child(1) {
width: 30%;
}
.reference-table th:nth-child(2),
.reference-table td:nth-child(2) {
width: 30%;
}
.reference-table th:nth-child(3),
.reference-table td:nth-child(3) {
width: 40%;
}
.reference-table .tooltip-container code {
white-space: nowrap;
}
.reference-table .theme-code-block span {
max-width: 100%;
word-break: break-word;
white-space: break-spaces;
}
.reference-table [class*=codeBlockLinesWithNumbering] {
display: block !important;
}
.container:not(.footer-container) {
padding-top: 38px !important;
max-width: 100% !important;
}
.pagination-nav {
display: none;
}
/* User Guide Styling */
kbd {
font: 100% var(--ifm-font-family-monospace) !important;
background-color: var(--medusa-bg-component) !important;
color: var(--medusa-text-subtle) !important;
border-radius: 6px !important;
border-color: var(--medusa-border-strong) !important;
box-shadow: none !important;
}
.ui-icon {
vertical-align: sub;
width: 20px;
height: 20px;
}
.markdown-doc-wrapper {
margin: 0 auto;
max-width: var(--ifm-container-width);
width: 100%;
margin-left: auto !important;
}
.markdown-doc-wrapper--fluid {
max-width: inherit;
}
.markdown-row {
margin: 0;
}
.theme-doc-footer {
margin-top: 0 !important;
border-top: 1px solid var(--ifm-doc-footer-border-color) !important;
padding-top: var(--ifm-base-margin-vertical);
}
.theme-edit-this-page {
display: inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 6px 12px;
border-radius: var(--ifm-global-radius);
cursor: pointer;
background-color: var(--ifm-secondary-btn-background-color);
border: 1px solid var(--ifm-secondary-btn-border-color);
font-size: var(--medusa-label-small-plus-size);
line-height: var(--medusa-label-small-plus-line-height);
font-weight: var(--medusa-label-small-plus-font-weight);
}
.theme-edit-this-page:hover {
background-color: var(--ifm-secondary-btn-hover-background-color);
text-decoration: none;
}
.theme-edit-this-page,
.theme-edit-this-page:hover {
color: var(--ifm-secondary-btn-color);
}
.theme-edit-this-page:focus {
box-shadow: var(--ifm-secondary-btn-focused-shadow);
}
.theme-last-updated {
font-style: normal;
font-size: var(--medusa-label-small-plus-size);
line-height: var(--medusa-label-small-plus-line-height);
}
.theme-last-updated,
.theme-last-updated b {
font-weight: 400 !important;
}
.medium-zoom-overlay {
z-index: var(--ifm-z-index-overlay);
}
.tabs-wrapper:not(.code-tabs) > .tabs-container > div:not(.tablist-wrapper) {
padding-top: var(--ifm-base-margin-vertical);
}
.medium-zoom-image--opened {
z-index: var(--ifm-z-index-overlay);
}
details > div {
--docusaurus-details-decoration-color: transparent !important;
}
.row--justify-end {
justify-content: flex-end;
}
.docs-page-container {
padding-left: 0 !important;
padding-right: 0 !important;
}
@media screen and (min-width: 1419px) {
.main-wrapper {
min-width: var(--ifm-max-content-width);
}
}
@media screen and (max-width: 1418px) {
.main-wrapper {
width: 100%;
}
}
@media screen and (min-width: 992px) {
.markdown-doc-wrapper {
padding: 0 calc(var(--ifm-spacing-horizontal) * 4);
}
}
@media screen and (max-width: 991px) {
.markdown-doc-wrapper {
padding: 0 var(--ifm-spacing-horizontal);
}
}
www/docs/src/css/_docusaurus.css
+276
View File
@@ -0,0 +1,276 @@
/** This CSS file includes tailwind styling definitions for classes defined by docusaurus **/
html,
body {
@apply tw-h-full;
}
.cards-grid {
@apply tw-grid tw-gap-x-1 tw-auto-rows-fr;
}
.cards-grid.grid-6 {
@apply md:tw-grid-cols-2 tw-grid-cols-1;
}
.cards-grid.grid-4 {
@apply lg:tw-grid-cols-3 md:tw-grid-cols-2 tw-grid-cols-1;
}
h1 + .cards-grid,
h1 + .card-wrapper,
h2 + .cards-grid,
h2 + .card-wrapper,
h3 + .cards-grid,
h3 + .card-wrapper {
@apply tw-mt-1.5;
}
.markdown p + img,
.markdown .alert,
.markdown .code-wrapper {
@apply tw-mb-2;
}
.markdown h2,
.markdown h3,
.markdown p + .code-wrapper,
.markdown p + .tabs-wrapper,
.markdown p + .alert,
.markdown p + section,
video {
@apply tw-mt-2;
}
.theme-code-block {
@apply tw-border tw-border-solid tw-border-medusa-code-block-border;
}
.markdown p + .card-wrapper {
@apply tw-mt-1.5;
}
.card + p {
@apply tw-mt-2;
}
.card-highlighted {
@apply tw-relative tw-mb-4 tw-bg-medusa-bg-subtle dark:tw-bg-medusa-bg-base-dark hover:tw-bg-medusa-bg-subtle-hover dark:hover:tw-bg-medusa-bg-subtle-hover-dark;
}
.col.toc-wrapper {
--ifm-col-width: var(--ifm-toc-width);
}
.markdown-doc-wrapper--fluid {
@apply tw-max-w-[inherit];
}
:global(.docusaurus-mt-lg) {
@apply tw-mt-3;
}
:global(#__docusaurus) {
@apply tw-min-h-full tw-flex tw-flex-col;
}
.code-tabs .theme-code-block {
@apply !tw-rounded-t-none !tw-rounded-b
}
[class*=codeLineNumber] {
@apply tw-text-medusa-text-placeholder !tw-pl-0;
}
.prism-code {
@apply xs:tw-max-w-[90%] xs:after:tw-content-[''] xs:after:tw-rounded xs:after:tw-absolute;
@apply xs:after:tw-right-0 xs:after:tw-top-0 xs:after:tw-w-[calc(10%+24px)] xs:after:tw-h-full xs:after:tw-bg-code-fade;
}
.prism-code:not(:hover)::-webkit-scrollbar-thumb,
.prism-code:not(:hover)::-webkit-scrollbar-track {
@apply xs:tw-invisible;
}
.prism-code:hover::-webkit-scrollbar-thumb,
.prism-code:hover::-webkit-scrollbar-track {
@apply xs:tw-opacity-100
}
.prism-code {
@apply tw-bg-transparent tw-break-words !tw-outline-none;
}
.prism-code div {
@apply !tw-outline-none focus:!tw-outline-none active:!tw-outline-none;
}
.code-tabs {
@apply tw-relative;
}
.sidebar-desktop nav {
--ifm-scrollbar-track-background-color: transparent !important;
--ifm-scrollbar-thumb-background-color: transparent !important;
--ifm-scrollbar-thumb-hover-background-color: transparent !important;
}
.main-wrapper {
@apply tw-max-w-xl tw-mx-auto xl:tw-min-w-xl tw-w-full;
}
.theme-doc-breadcrumbs {
@apply tw-hidden;
}
article {
@apply tw-max-w-[960px];
}
.padding-top--md {
@apply !tw-pt-3;
}
.margin-bottom--lg {
@apply !tw-mb-1;
}
details summary {
@apply tw-cursor-pointer;
}
.reference-table {
@apply !tw-table tw-table-fixed tw-w-full;
}
.reference-table p {
--ifm-paragraph-margin-bottom: 0;
}
.reference-table.table-col-4 th,
.reference-table.table-col-4 td {
@apply [&:nth-child(1)]:!tw-w-1/5 [&:nth-child(2)]:!tw-w-1/5 [&:nth-child(3)]:!tw-w-2/5 [&:nth-child(4)]:!tw-w-1/5;
}
.reference-table th:nth-child(1),
.reference-table td:nth-child(1) {
@apply [&:nth-child(1)]:!tw-w-[30%] [&:nth-child(2)]:!tw-w-[30%] [&:nth-child(3)]:!tw-w-2/5;
}
.reference-table .tooltip-container code {
@apply tw-whitespace-nowrap;
}
.reference-table .theme-code-block span {
@apply !tw-max-w-full !tw-break-words !tw-whitespace-break-spaces;
}
.reference-table .code-block-numbering {
@apply !tw-block;
}
.container {
@apply !tw-pt-[38px] !tw-max-w-full;
}
.pagination-nav {
@apply tw-hidden;
}
.markdown kbd {
@apply !tw-font-monospace !tw-bg-medusa-bg-component dark:!tw-bg-medusa-bg-component-dark !tw-text-medusa-text-subtle dark:!tw-text-medusa-text-subtle-dark;
@apply !tw-rounded-md !tw-border-medusa-border-strong dark:!tw-border-medusa-border-strong-dark !tw-shadow-none;
}
.theme-doc-footer {
@apply !tw-mt-0 tw-border-0 !tw-border-t tw-border-solid !tw-border-medusa-border-base dark:!tw-border-medusa-border-base-dark;
@apply tw-pt-2;
}
.theme-last-updated {
@apply tw-font-normal tw-not-italic tw-text-label-small-plus;
}
.theme-last-updated,
.theme-last-updated b {
@apply !tw-font-normal;
}
.medium-zoom-overlay {
@apply tw-z-[400];
}
.medium-zoom-image--opened {
@apply tw-z-[400];
}
details > div {
--docusaurus-details-decoration-color: transparent !important;
}
.row--justify-end {
@apply tw-justify-end;
}
.docs-page-container {
@apply !tw-px-0;
}
.search-result-match {
@apply tw-text-medusa-text-base dark:tw-text-medusa-text-base-dark;
@apply tw-bg-medusa-bg-highlight dark:tw-bg-medusa-bg-highlight-dark tw-py-[4px] tw-px-0;
}
.navbar {
@apply tw-z-[399] tw-p-0;
}
html:not(.plugin-redoc) .navbar:not(.navbar-sidebar--show) {
@apply supports-[backdrop-filter]:tw-bg-transparent supports-[backdrop-filter]:tw-backdrop-blur-md;
}
.navbar__link {
@apply tw-text-label-small-plus;
}
.navbar__brand {
@apply tw-mr-2;
}
.navbar__logo {
@apply tw-w-[83px] tw-h-[20px] tw-flex tw-justify-center tw-items-center !tw-mr-0;
}
h1 {
@apply !tw-text-h1;
}
h2 {
@apply !tw-text-h2;
}
h3 {
@apply !tw-text-h3;
}
h1, h2, h3, h4, h5, h6 {
@apply tw-text-medusa-text-base dark:tw-text-medusa-text-base-dark;
}
.markdown > h1:first-child,
.markdown > h2,
.markdown > h3 {
@apply tw-mb-0.5;
}
.markdown > p {
@apply tw-mb-0.5;
}
.markdown > p img {
@apply tw-mt-0.5;
}
.markdown {
@apply tw-mb-0;
}
www/docs/src/css/_footer.css
-48
View File
@@ -1,48 +0,0 @@
footer.footer {
border-top: 1px solid var(--ifm-footer-border-color);
padding-top: 108px;
padding-bottom: calc(var(--ifm-base-margin-vertical) * 2);
margin-top: var(--ifm-base-margin-vertical);
}
.footer-container {
display: flex;
padding-left: 0 !important;
padding-right: 0 !important;
}
.footer-container .col {
padding-left: 0 !important;
padding-right: 0 !important;
}
footer .social-links {
--ifm-icon-color: var(--ifm-footer-social-icons-color);
}
footer .social-link:hover {
--ifm-icon-color: var(--ifm-footer-social-icons-color-hover);
}
.social-links {
display: flex;
align-items: center;
}
.social-link:not(:first-child) {
margin-left: var(--ifm-base-spacing);
}
@media screen and (max-width: 991px) {
.footer-container {
flex-direction: column;
}
.footer-container .row--justify-end {
justify-content: start;
}
.logo-container {
margin-bottom: var(--ifm-base-margin-vertical);
}
}
www/docs/src/css/_medusa.css
-227
View File
@@ -1,227 +0,0 @@
/** Light theme/default **/
:root {
/** Backgrounds **/
--medusa-bg-subtle: #F8F9FA;
--medusa-bg-subtle-hover: #F1F3F5;
--medusa-bg-subtle-pressed: #ECEEF0;
--medusa-bg-base: #FFFFFF;
--medusa-bg-base-hover: #F8F9FA;
--medusa-bg-base-pressed: #F1F3F5;
--medusa-bg-component: #F1F3F5;
--medusa-bg-field: #F8F9FA;
--medusa-bg-field-hover: #F1F3F5;
--medusa-bg-highlight: #EDE9FE;
--medusa-bg-toggle-off: #C1C8CD;
--medusa-bg-overlay: rgba(17, 24, 28, 0.4);
--medusa-bg-interactive: #6E56CF;
/** Borders **/
--medusa-border-base: #E6E8EB;
--medusa-border-strong: #D7DBDF;
--medusa-border-focus: #6E56CF;
--medusa-border-focus-inset: #FFFFFF;
--medusa-border-interactive: #6E56CF;
/** Text **/
--medusa-text-base: #11181C;
--medusa-text-subtle: #687076;
--medusa-text-placeholder: #889096;
--medusa-text-disabled: #C1C8CD;
--medusa-text-on-color: #FFFFFF;
--medusa-text-interactive: #6E56CF;
--medusa-text-interactive-hover: #644FC1;
--medusa-text-error: #E5484D;
/** Buttons **/
--medusa-button-primary: #6E56CF;
--medusa-button-primary-hover: #644FC1;
--medusa-button-primary-pressed: #5746AF;
--medusa-button-secondary: #FFFFFF;
--medusa-button-secondary-hover: #F8F9FA;
--medusa-button-secondary-pressed: #F1F3F5;
--medusa-button-danger: #E5484D;
--medusa-button-danger-hover: #DC3D43;
--medusa-button-danger-pressed: #CD2B31;
--medusa-button-danger-text: var(--medusa-text-on-color);
--medusa-button-success: #30A46C;
--medusa-button-success-text: var(--medusa-text-on-color);
/** Icons **/
--medusa-icon-primary: #11181C;
--medusa-icon-secondary: #687076;
--medusa-icon-placeholder: #889096;
--medusa-icon-disabled: #C1C8CD;
--medusa-icon-on-color: #FFFFFF;
--medusa-icon-interactive: #6E56CF;
--medusa-icon-interactive-hover: #644FC1;
--medusa-icon-error: #E5484D;
/** Support Info **/
--medusa-support-error: #E5484D;
--medusa-support-warning: #FFB224;
--medusa-support-success: #30A46C;
--medusa-support-info: #0091FF;
/** Code Block **/
--medusa-code-block: #1C1C1F;
--medusa-code-block-transparent: #1C1C1F00;
--medusa-code-block-border: #2E2E32;
--medusa-code-block-action: #706F78;
/** Code Tabs **/
--medusa-code-tabs-bg: #161616;
--medusa-code-tab: #1C1C1F;
--medusa-code-tab-hover: rgba(141, 141, 141, 0.16);
--medusa-code-tab-border: #3E3E44;
--medusa-code-tab-text: #7E7D86;
--medusa-code-tab-active-text: #EDEDEF;
--medusa-code-tab-title: #7E7D86;
/** Tooltip **/
--medusa-tooltip: var(--medusa-bg-base);
--medusa-tooltip-border: var(--medusa-border-base);
--medusa-tooltip-shadow: var(--medusa-shadow-overlay);
--medusa-tooltip-text: var(--medusa-text-subtle);
/** Shadow **/
--medusa-shadow-overlay: 0px 2px 16px rgba(0, 0, 0, 0.08);
--medusa-shadow-field-focused: 0px 0px 0px 4px #EDE9FE;
--medusa-shadow-button-focused: 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 4px #6E56CF;
/** Typography **/
--medusa-body-regular-plus-size: 14px;
--medusa-body-regular-plus-line-height: 24px;
--medusa-body-regular-plus-font-weight: 500;
--medusa-body-regular-size: 14px;
--medusa-body-regular-line-height: 24px;
--medusa-body-regular-font-weight: 400;
--medusa-h1-size: 32px;
--medusa-h1-line-height: 44px;
--medusa-h1-weight: 500;
--medusa-h2-size: 24px;
--medusa-h2-line-height: 32px;
--medusa-h2-weight: 500;
--medusa-h3-size: 18px;
--medusa-h3-line-height: 28px;
--medusa-h3-weight: 500;
--medusa-label-large-plus-size: 16px;
--medusa-label-large-plus-line-height: 20px;
--medusa-label-large-plus-font-weight: 500;
--medusa-label-regular-plus-size: 14px;
--medusa-label-regular-plus-line-height: 20px;
--medusa-label-regular-plus-font-weight: 500;
--medusa-label-regular-size: 14px;
--medusa-label-regular-line-height: 20px;
--medusa-label-regular-font-weight: 400;
--medusa-label-small-plus-size: 13px;
--medusa-label-small-plus-line-height: 20px;
--medusa-label-small-plus-font-weight: 500;
--medusa-label-small-size: 13px;
--medusa-label-small-line-height: 20px;
--medusa-label-small-font-weight: 400;
--medusa-label-x-small-plus-size: 12px;
--medusa-label-x-small-plus-line-height: 20px;
--medusa-label-x-small-plus-font-weight: 500;
/** Tags **/
--medusa-tag-purple-bg: #EDE9FE;
--medusa-tag-purple-bg-hover: #E4DEFC;
--medusa-tag-purple-text: #5746AF;
--medusa-tag-purple-icon: #6E56CF;
--medusa-tag-purple-border: #D7CFF9;
--medusa-tag-orange-bg: #FFECBC;
--medusa-tag-orange-bg-hover: #FFE3A2;
--medusa-tag-orange-text: #AD5700;
--medusa-tag-orange-icon: #FFB224;
--medusa-tag-orange-border: #FFD386;
--medusa-tag-green-bg: #DDF3E4;
--medusa-tag-green-bg-hover: #CCEBD7;
--medusa-tag-green-text: #18794E;
--medusa-tag-green-icon: #30A46C;
--medusa-tag-green-border: #B4DFC4;
--medusa-tag-blue-bg: #E1F0FF;
--medusa-tag-blue-bg-hover: #CEE7FE;
--medusa-tag-blue-text: #006ADC;
--medusa-tag-blue-icon: #0091FF;
--medusa-tag-blue-border: #B7D9F8;
}
/** Dark theme **/
html[data-theme="dark"] {
/** Backgrounds **/
--medusa-bg-subtle: #161618;
--medusa-bg-subtle-hover: #1C1C1F;
--medusa-bg-subtle-pressed: #232326;
--medusa-bg-base: #1C1C1F;
--medusa-bg-base-hover: #232326;
--medusa-bg-base-pressed: #28282C;
--medusa-bg-component: #2E2E32;
--medusa-bg-field: #232326;
--medusa-bg-field-hover: #28282C;
--medusa-bg-highlight: #2C2250;
--medusa-bg-toggle-off: #3E3E44;
--medusa-bg-overlay: rgba(22, 22, 24, 0.7);
--medusa-bg-interactive: #6E56CF;
/** Borders **/
--medusa-border-base: #2E2E32;
--medusa-border-strong: #3E3E44;
--medusa-border-focus: #6E56CF;
--medusa-border-focus-inset: #1C1C1F;
--medusa-border-interactive: #6E56CF;
/** Text **/
--medusa-text-base: #EDEDEF;
--medusa-text-subtle: #7E7D86;
--medusa-text-placeholder: #706F78;
--medusa-text-disabled: #504F57;
--medusa-text-on-color: #FFFFFF;
--medusa-text-interactive: #7C66DC;
--medusa-text-interactive-hover: #9E8CFC;
--medusa-text-error: #E5484D;
/** Buttons **/
--medusa-button-primary: #6E56CF;
--medusa-button-primary-hover: #7C66DC;
--medusa-button-primary-pressed: #9E8CFC;
--medusa-button-secondary: #232326;
--medusa-button-secondary-hover: #2E2E32;
--medusa-button-secondary-pressed: #2E2E32;
/** Icons **/
--medusa-icon-primary: #EDEDEF;
--medusa-icon-secondary: #7E7D86;
--medusa-icon-placeholder: #706F78;
--medusa-icon-disabled: #504F57;
--medusa-icon-on-color: #FFFFFF;
--medusa-icon-interactive: #7C66DC;
--medusa-icon-interactive-hover: #9E8CFC;
--medusa-icon-error: #E5484D;
/** Shadow **/
--medusa-shadow-overlay: 0px 2px 16px rgba(0, 0, 0, 0.32);
--medusa-shadow-field-focused: 0px 0px 0px 4px #2C2250;
--medusa-shadow-button-focused: 0px 0px 0px 2px #1C1C1F, 0px 0px 0px 4px #6E56CF;
/** Tags **/
--medusa-tag-purple-bg: #2C2250;
--medusa-tag-purple-bg-hover: #32275F;
--medusa-tag-purple-text: #9E8CFC;
--medusa-tag-purple-icon: #6E56CF;
--medusa-tag-purple-border: #392C72;
--medusa-tag-orange-bg: #3F2200;
--medusa-tag-orange-bg-hover: #4A2900;
--medusa-tag-orange-text: #F1A10D;
--medusa-tag-orange-icon: #FFB224;
--medusa-tag-orange-border: #573300;
--medusa-tag-green-bg: #113123;
--medusa-tag-green-bg-hover: #133929;
--medusa-tag-green-text: #4CC38A;
--medusa-tag-green-icon: #30A46C;
--medusa-tag-green-border: #164430;
--medusa-tag-blue-bg: #102A4C;
--medusa-tag-blue-bg-hover: #0F3058;
--medusa-tag-blue-text: #52A9FF;
--medusa-tag-blue-icon: #0091FF;
--medusa-tag-blue-border: #0D3868;
}
www/docs/src/css/_navbar.css
-88
View File
@@ -1,88 +0,0 @@
.navbar {
z-index: calc(var(--ifm-z-index-overlay) - 1);
padding: 0;
}
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
html:not(.plugin-redoc) .navbar:not(.navbar-sidebar--show) {
background: none;
backdrop-filter: blur(12px);
}
}
.navbar__link {
font-size: var(--medusa-label-small-plus-size);
line-height: var(--medusa-label-small-plus-line-height);
font-weight: var(--medusa-label-small-plus-font-weight);
}
.navbar__inner {
max-width: var(--ifm-max-content-width);
margin-left: auto;
margin-right: auto;
padding: var(--ifm-navbar-padding-vertical) var(--ifm-navbar-padding-horizontal);
}
.navbar__brand {
margin-right: calc(var(--ifm-base-spacing) * 2);
}
.navbar__logo {
height: var(--ifm-logo-height);
width: var(--ifm-logo-width);
display: flex;
justify-content: center;
align-items: center;
margin-right: 0 !important;
}
[class*=colorModeToggle],
.navbar-link-icon {
background-color: var(--medusa-button-secondary);
border: 1px solid var(--medusa-border-base);
border-radius: var(--ifm-global-radius);
width: 32px !important;
height: 32px !important;
}
[class*=toggleButton]:hover,
.navbar-link-icon:hover {
background-color: var(--medusa-button-secondary-hover) !important;
}
[class*=toggleButton] {
--ifm-icon-color: var(--ifm-color-mode-icon-color)
}
.navbar-link-icon {
display: flex;
justify-content: center;
align-items: center;
}
[class*=colorModeToggle] {
margin-left: var(--ifm-navbar-item-padding-horizontal);
margin-right: 12px;
}
[class*=toggleButton] {
border-radius: var(--ifm-global-radius) !important;
}
@media screen and (min-width: 992px) {
.navbar .divider {
height: 20px;
width: 1px;
margin-left: var(--ifm-navbar-item-padding-horizontal);
margin-right: var(--ifm-navbar-item-padding-horizontal);
display: inline-block;
vertical-align: middle;
background-color: var(--ifm-navbar-divider-color);
}
}
@media screen and (max-width: 991px) {
.navbar-actions {
display: none;
}
}
www/docs/src/css/_note.css
-24
View File
@@ -1,24 +0,0 @@
.alert {
padding: var(--ifm-base-spacing);
border: 1px solid var(--ifm-note-border-color) !important;
background-color: var(--ifm-note-background);
border-radius: var(--ifm-global-radius);
box-shadow: none;
}
.alert p > code {
padding-left: calc(var(--ifm-base-spacing) / 2);
padding-right: calc(var(--ifm-base-spacing) / 2);
font-size: 14px !important;
}
.alert a {
text-decoration: none;
}
[class*=alert--] {
--ifm-code-background: var(--medusa-bg-base) !important;
--ifm-alert-background-color-highlight: var(--ifm-background-surface-color) !important;
--ifm-link-color: var(--ifm-color-primary) !important;
--ifm-link-hover-color: var(--ifm-color-content) !important;
}
www/docs/src/css/_redocly.css
-133
View File
@@ -1,133 +0,0 @@
.redocusaurus .expanded + tr > td > div {
background-color: var(--ifm-background-surface-color) !important;
}
.redocusaurus table tbody tr table,
.redocusaurus table tbody tr table tbody tr {
background-color: transparent !important;
}
.redocusaurus a {
color: var(--ifm-link-color) !important;
}
.redocusaurus pre,
.redocusaurus .react-tabs__tab-panel--selected,
.redocusaurus [data-section-id] > div:nth-child(2) > div > button,
.redocusaurus div[id^='tag'] > div > div:nth-child(2) > div:nth-child(1) > div:nth-child(2) {
background-color: var(--medusa-code-block) !important;
}
[data-theme="dark"] .redocusaurus [data-section-id] > div:nth-child(2) > div > button,
.redocusaurus div[id^='tag'] > div > div:nth-child(2) > div:nth-child(1) > div:nth-child(2) > div > div:nth-child(2) > div {
border-color: var(--medusa-border-strong) !important;
}
.redocusaurus [data-section-id] > div:nth-child(2) > div > button {
border-radius: var(--ifm-global-radius) var(--ifm-global-radius) 0 0 !important;
}
.redocusaurus [data-section-id] > div:nth-child(2) > div > button + div > div > div > div {
color: var(--ifm-color-primary) !important;
}
.redocusaurus [data-section-id] > div:nth-child(2) .react-tabs__tab pre {
background-color: transparent !important;
margin-top: calc(var(--ifm-base-margin-vertical) / 2);
}
.redocusaurus h5 + svg {
fill: var(--ifm-icon-color);
}
.redocusaurus h2 + div + div > div + div {
padding: 8px 9.6px;
background-color: var(--ifm-background-surface-color);
}
.redocusaurus h2 + div + div {
border-bottom-color: var(--ifm-base-border-color);
}
.redocusaurus .menu-content,
.redocusaurus .menu-content label {
background-color: var(--ifm-background-color) !important;
}
.redoc-json code {
border: none !important;
}
.redocusaurus p {
color: var(--ifm-color-content);
}
.redocusaurus h2, .redocusaurus h3, .redocusaurus h4 {
color: var(--ifm-color-headers) !important;
}
.redocusaurus [data-section-id] [data-section-id] > div:nth-child(2) h2, .redocusaurus [data-section-id] [data-section-id] > div:nth-child(2) h3, .redocusaurus [data-section-id] [data-section-id] > div:nth-child(2) h4 {
--ifm-color-headers: var(--medusa-text-on-color);
}
.redocusaurus [data-section-id]:after {
border-color: transparent !important;
}
.redocusaurus .property-name + div {
color: var(--medusa-icon-error) !important;
}
.redocusaurus .react-tabs__tab:not(.react-tabs__tab--selected) {
background-color: var(--ifm-secondary-btn-background-color) !important;
border-color: var(--ifm-secondary-btn-border-color) !important;
color: var(--ifm-secondary-btn-color) !important;
}
.redocusaurus ul > li.react-tabs__tab--selected[aria-selected="true"]:not(.tab-error):not(.tab-success) {
background-color: var(--ifm-primary-btn-background-color) !important;
border-color: var(--ifm-primary-btn-border-color) !important;
color: var(--ifm-primary-btn-color) !important;
}
.redocusaurus ul > li.react-tabs__tab--selected.tab-success {
background-color: var(--medusa-button-success) !important;
border-color: var(--medusa-button-success) !important;
color: var(--medusa-button-success-text) !important;
}
.redocusaurus ul > li.react-tabs__tab--selected.tab-error {
background-color: var(--medusa-button-danger) !important;
border-color: var(--medusa-button-danger) !important;
color: var(--medusa-button-danger-text) !important;
}
.redocusaurus ul > li.react-tabs__tab--selected.tab-error:hover {
background-color: var(--medusa-button-danger-hover) !important;
border-color: var(--medusa-button-danger-hover) !important;
}
.redocusaurus .tab-error:not(.react-tabs__tab--selected) {
background-color: var(--ifm-secondary-btn-background-color) !important;
border-color: var(--ifm-secondary-btn-border-color) !important;
color: var(--medusa-support-error) !important;
}
.redocusaurus .tab-success:not(.react-tabs__tab--selected) {
background-color: var(--ifm-secondary-btn-background-color) !important;
border-color: var(--ifm-secondary-btn-border-color) !important;
color: var(--medusa-support-success) !important;
}
.redocusaurus [type=get] {
background-color: var(--medusa-support-success) !important;
}
.redocusaurus [type=delete] {
background-color: var(--medusa-support-error) !important;
}
.redocusaurus table th,
.redocusaurus table td {
border-color: var(--ifm-base-border-color) !important;
}
www/docs/src/css/_sidebar.css
-361
View File
@@ -1,361 +0,0 @@
/** General sidebar styles **/
.theme-doc-sidebar-container {
z-index: calc(var(--ifm-z-index-overlay) - 2);
border-right: 1px solid var(--ifm-toc-border-color);
}
.main-sidebar {
margin-top: 0 !important;
padding-top: 0 !important;
padding-left: var(--doc-sidebar-padding) !important;
padding-right: var(--doc-sidebar-padding) !important;
padding-bottom: calc(var(--ifm-base-margin-vertical) * 2) !important;
}
.theme-doc-sidebar-item-category-level-1 > .menu__list {
margin-bottom: calc(var(--ifm-base-spacing) / 4);
}
.menu__list:not(.theme-doc-sidebar-menu),
.theme-doc-sidebar-item-category-level-1 > .menu__list {
padding-left: 0 !important;
}
.menu__list-item:not(:first-child):not(.sidebar-title) {
margin-top: 0 !important;
}
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) [class*=theme-doc-sidebar-item-],
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) [class*=theme-doc-sidebar-item-] .menu__link--active {
position: relative;
}
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) [class*=theme-doc-sidebar-item-]:not(.theme-doc-sidebar-item-link-category)::before,
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) .theme-doc-sidebar-item-category .menu__list-item-collapsible .menu__link--active::before,
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) > .theme-doc-sidebar-item-link > .menu__link--active::before,
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) .theme-doc-sidebar-item-category > .menu__list-item-collapsible::before {
content: '';
height: 100%;
width: 1px;
position: absolute;
left: 8px;
top: 0;
z-index: 1;
}
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) [class*=theme-doc-sidebar-item-] .menu__link--active::before {
height: 20px !important;
}
.theme-doc-sidebar-item-category-level-1 > .menu__list > .menu__list-item:first-child::before,
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) .theme-doc-sidebar-item-category:first-child .menu__list-item-collapsible::before,
.theme-doc-sidebar-item-category-level-1 > .menu__list > .menu__list-item:last-child::before {
height: calc(var(--ifm-base-margin-vertical) - 4px) !important;
}
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) .theme-doc-sidebar-item-link:first-child::before,
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) .theme-doc-sidebar-item-category:first-child .menu__list-item-collapsible::before {
bottom: 0 !important;
top: unset !important;
}
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) .theme-doc-sidebar-item-category:first-child .menu__list-item-collapsible {
padding-bottom: var(--ifm-menu-link-padding-vertical) !important;
}
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) .theme-doc-sidebar-item-category:first-child .menu__list-item-collapsible .menu__link {
padding-bottom: 0 !important;
}
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) [class*=theme-doc-sidebar-item-]::before,
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) .theme-doc-sidebar-item-category:first-child .menu__list-item-collapsible::before {
background-color: var(--medusa-border-base);
}
.theme-doc-sidebar-item-category-level-2 > .menu__list-item-collapsible .menu__link--active::before,
.menu__list:not(.theme-doc-sidebar-menu) > .theme-doc-sidebar-item-link.theme-doc-sidebar-item-link-level-2 > .menu__link--active::before {
background-color: var(--medusa-icon-interactive);
z-index: 2 !important;
top: var(--ifm-menu-link-padding-vertical) !important;
}
.theme-doc-sidebar-item-category-level-2:only-child > .menu__list-item-collapsible .menu__link--active::before,
.menu__list:not(.theme-doc-sidebar-menu) > .theme-doc-sidebar-item-link.theme-doc-sidebar-item-link-level-2:only-child > .menu__link--active::before,
.menu__list:not(.theme-doc-sidebar-menu) > .theme-doc-sidebar-item-link.theme-doc-sidebar-item-link-level-2:first-child > .menu__link--active::before {
top: calc(var(--ifm-menu-link-padding-vertical) + 2px) !important;
}
.menu__list:not(.theme-doc-sidebar-menu) > .theme-doc-sidebar-item-link:last-child > .menu__link--active::before {
top: calc(var(--ifm-menu-link-padding-vertical) - 2px) !important;
}
.menu__list-item-collapsible .menu__caret {
display: none;
}
.menu__link--sublist-caret:after {
content: none;
}
.sidebar-desktop nav {
--ifm-scrollbar-track-background-color: transparent !important;
--ifm-scrollbar-thumb-background-color: transparent !important;
--ifm-scrollbar-thumb-hover-background-color: transparent !important;
}
.theme-doc-sidebar-item-link-level-1:not(.sidebar-title):not(.homepage-sidebar-item):not(.sidebar-back-link) {
margin-bottom: calc(var(--ifm-base-margin-vertical) / 2);
}
.theme-doc-sidebar-item-link-level-1:not(.sidebar-title):not(.homepage-sidebar-item):not(.sidebar-back-link) .menu__link {
padding-left: 0 !important;
}
.menu__list .menu__list {
margin-top: 0 !important;
}
/* .sidebar-desktop::before {
content: '';
width: 100%;
height: calc(var(--ifm-base-spacing) * 1.5);
display: block;
background-color: var(--ifm-background-color);
} */
/** Mobile Sidebar **/
.navbar-sidebar__back {
background: transparent;
width: fit-content;
top: unset;
padding-left: 0;
margin-left: 0;
margin-bottom: calc(var(--ifm-base-margin-vertical) / 2);
font-size: var(--medusa-label-small-plus-size);
line-height: var(--medusa-label-small-plus-line-height);
font-weight: var(--medusa-label-small-plus-font-weight);
}
/** Homepage Sidebar Design **/
.homepage-sidebar-item:is([class*="level-1"]):is([class*="theme-doc-sidebar-item"]) > .menu__link,
.homepage-sidebar-item:is([class*="level-1"]):is([class*="theme-doc-sidebar-item"]) > .menu__list-item-collapsible > .menu__link {
padding-left: calc(var(--ifm-base-spacing) / 2) !important;
}
/** General Sidebar items styles **/
.menu__list-item-collapsible {
border-radius: var(--ifm-global-radius) !important;
}
.menu__link {
cursor: pointer;
border-radius: var(--ifm-global-radius) !important;
font-size: var(--medusa-label-small-plus-size);
line-height: var(--medusa-label-small-plus-line-height);
font-weight: var(--medusa-label-small-plus-font-weight);
}
.theme-doc-sidebar-item-link {
display: flex;
align-items: center;
}
.menu__list-item-collapsible--active {
background-color: transparent !important;
}
[class*="level-2"]:is([class*="theme-doc-sidebar-item"]) .menu__link,
[class*="level-2"]:is([class*="theme-doc-sidebar-item"]).sidebar-group-divider,
[class*="level-3"]:is([class*="theme-doc-sidebar-item"]) .menu__link,
[class*="level-3"]:is([class*="theme-doc-sidebar-item"]).sidebar-group-divider,
[class*="level-4"]:is([class*="theme-doc-sidebar-item"]) .menu__link,
[class*="level-4"]:is([class*="theme-doc-sidebar-item"]).sidebar-group-divider {
padding-top: var(--ifm-menu-link-padding-vertical);
padding-bottom: var(--ifm-menu-link-padding-vertical);
}
[class*="level-2"]:is([class*="theme-doc-sidebar-item"]) .menu__link,
[class*="level-2"]:is([class*="theme-doc-sidebar-item"]).sidebar-group-divider {
padding-left: calc(var(--ifm-menu-link-padding-horizontal) * 2);
}
[class*="level-3"]:is([class*="theme-doc-sidebar-item"]) .menu__link,
[class*="level-3"]:is([class*="theme-doc-sidebar-item"]).sidebar-group-divider {
padding-left: calc(var(--ifm-menu-link-padding-horizontal) * 3);
}
[class*="level-4"]:is([class*="theme-doc-sidebar-item"]) .menu__link,
[class*="level-4"]:is([class*="theme-doc-sidebar-item"]).sidebar-group-divider {
padding-left: calc(var(--ifm-menu-link-padding-horizontal) * 4);
}
/** Sidebar title **/
.sidebar-title {
margin: 0 !important;
padding: calc(var(--ifm-base-margin-vertical) / 2) 0 !important;
}
.sidebar-title .menu__link,
.sidebar-title span {
--ifm-menu-link-padding-horizontal: 0;
font-size: var(--medusa-label-regular-plus-size) !important;
line-height: var(--medusa-label-regular-plus-line-height) !important;
font-weight: var(--medusa-label-regular-plus-font-weight) !important;
color: var(--medusa-text-base);
}
.sidebar-title .menu__link--active,
.sidebar-title .menu__link:hover {
background-color: transparent !important;
}
/** Group Headline **/
.sidebar-group-headline {
margin-top: calc(var(--ifm-base-margin-vertical) / 2);
padding: 6px 0;
}
.theme-doc-sidebar-item-category-level-1.sidebar-group-headline {
margin-bottom: calc(var(--ifm-base-margin-vertical) / 2);
}
.sidebar-group-headline:not(.theme-doc-sidebar-item-category-level-1) {
margin-bottom: 6px;
}
.sidebar-group-headline > .menu__list-item-collapsible > .menu__link {
color: var(--medusa-text-base);
padding: 0 !important;
}
.sidebar-group-headline > .menu__list-item-collapsible > .menu__link:not([href]) {
cursor: default;
}
.sidebar-group-headline > .menu__list-item-collapsible > .menu__link:hover,
.sidebar-group-headline .menu__list-item-collapsible:hover {
background-color: transparent !important;
}
.sidebar-group-headline > .menu__link,
.sidebar-group-headline > .menu__list-item-collapsible > .menu__link {
--medusa-label-small-plus-font-weight: 600;
}
/** Divider Line Item **/
.sidebar-divider-line {
height: 1px;
width: 100%;
background-color: var(--medusa-border-base);
margin: calc(var(--ifm-base-margin-vertical) / 2) 0;
}
/** Sidebar Group Divider **/
.sidebar-group-divider {
padding-bottom: 6px;
text-transform: uppercase;
color: var(--medusa-text-placeholder);
font-size: var(--medusa-label-x-small-plus-size);
line-height: var(--medusa-label-x-small-plus-line-height);
font-weight: var(--medusa-label-x-small-plus-font-weight);
}
.sidebar-group-divider:first-child {
padding-top: 6px !important;
}
.sidebar-group-divider:not(:first-child) {
padding-top: calc(var(--ifm-base-margin-vertical) / 2) !important;
}
/** Sidebar Item Icon **/
[class*="theme-doc-sidebar-item-"]:not(.sidebar-title) .sidebar-item-icon {
width: 20px;
height: 20px;
}
[class*="theme-doc-sidebar-item-"]:not(.sidebar-title):not(.sidebar-back-link) .sidebar-item-icon {
margin-right: calc(var(--ifm-base-margin-vertical) / 2);
}
/** Back Link **/
.sidebar-back-link {
cursor: pointer;
}
.sidebar-back-link .menu__link {
padding: 0 !important;
}
.sidebar-back-link .menu__link,
.sidebar-back-link span {
font-size: var(--medusa-label-small-plus-size);
line-height: var(--medusa-label-small-plus-line-height);
font-weight: var(--medusa-label-small-plus-font-weight);
}
.sidebar-back-link .menu__link:hover {
background-color: transparent !important;
color: var(--ifm-menu-color-active);
}
.sidebar-back-link .sidebar-item-icon {
margin-right: calc(var(--ifm-base-margin-vertical) / 4);
}
.menu__list-item-collapsible .menu__link--sublist:hover {
background-color: var(--ifm-menu-color-background-hover) !important;
}
/** Sidebar Soon Link **/
.sidebar-soon-link {
pointer-events: none;
}
.sidebar-soon-link * {
--ifm-icon-color: var(--medusa-icon-disabled);
color: var(--medusa-text-disabled);
}
/** Sidebar Badge **/
.sidebar-badge-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
/** Redocly sidebar **/
.redocusaurus .menu-content > div > ul > li > ul label:not([type=tag]):not(.active) {
color: var(--ifm-menu-color);
}
.redocusaurus .menu-content > div > ul > li > ul label:not([type=tag]).active,
.redocusaurus .menu-content > div > ul > li > ul label:not([type=tag]):not(.active):hover {
color: var(--ifm-menu-color-active);
}
/** Media Query **/
@media screen and (min-width: 992px) {
.sidebar-title,
.sidebar-back-link {
position: sticky;
background-color: var(--ifm-background-color);
z-index: 100;
}
.sidebar-title:first-child {
top: 0;
}
.sidebar-title:not(:first-child) {
top: var(--medusa-label-small-plus-line-height);
}
.sidebar-back-link {
top: 0;
}
}
www/docs/src/css/_toc.css
-108
View File
@@ -1,108 +0,0 @@
.theme-doc-toc-desktop {
padding-top: calc(var(--ifm-base-margin-vertical) * 1.5);
}
.theme-doc-toc-desktop .table-of-contents {
border-left: none !important;
padding: 0;
font-size: 12px;
position: relative;
overflow-y: hidden;
}
html:not([data-theme="dark"]) .theme-doc-toc-desktop .table-of-contents::before {
background-image: url('/img/side-menu-light.svg');
}
[data-theme="dark"] .theme-doc-toc-desktop .table-of-contents::before {
background-image: url('/img/side-menu.svg');
}
.theme-doc-toc-desktop .table-of-contents::before {
background-repeat: no-repeat;
background-size: 14px 10px;
background-position-y: center;
padding-left: 22px;
content: 'On this page';
padding-bottom: 0;
font-size: var(--medusa-label-small-plus-size);
line-height: var(--medusa-label-small-plus-line-height);
font-weight: var(--medusa-label-small-plus-font-weight);
}
.theme-doc-toc-desktop .table-of-contents .table-of-contents__link {
padding-left: var(--ifm-toc-link-padding-left);
}
.theme-doc-toc-desktop .table-of-contents > li:first-child {
margin-top: calc(var(--ifm-base-margin-vertical) / 2);
}
.theme-doc-toc-desktop .table-of-contents::after {
content: '';
position: absolute;
left: 0;
top: 40px;
height: 100%;
width: 1px;
background-color: var(--ifm-toc-divider-color);
}
.theme-doc-toc-desktop .table-of-contents li a + ul {
margin-top: 4px;
}
.theme-doc-toc-desktop .table-of-contents__link {
position: relative;
font-size: var(--medusa-label-x-small-plus-size);
line-height: var(--medusa-label-x-small-plus-line-height);
font-weight: var(--medusa-label-x-small-plus-font-weight);
}
.theme-doc-toc-desktop .table-of-contents__link:hover,
.theme-doc-toc-desktop .table-of-contents__link:hover code,
.theme-doc-toc-desktop .table-of-contents__link--active,
.theme-doc-toc-desktop .table-of-contents__link--active code {
color: var(--ifm-toc-link-active);
}
.theme-doc-toc-desktop .table-of-contents__link--active::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 1px;
background-color: var(--ifm-toc-link-active);
z-index: 1;
}
.theme-doc-toc-desktop .table-of-contents li {
margin-left: 0px;
margin-right: 0px;
}
.theme-doc-toc-desktop .table-of-contents > li:not(:first-child),
.theme-doc-toc-desktop .table-of-contents ul li {
margin-top: 0px;
}
.theme-doc-toc-desktop .table-of-contents li:not(:last-child) {
margin-bottom: 4px;
}
.theme-doc-toc-desktop .table-of-contents li:last-child {
margin-bottom: 0px;
}
.theme-doc-toc-desktop .table-of-contents, .table-of-contents ul {
padding-left: 0;
}
.table-of-contents ul .table-of-contents__link {
padding-left: calc(var(--ifm-toc-padding-horizontal) + var(--ifm-toc-link-padding-left)) !important;
}
.col.toc-wrapper {
--ifm-col-width: var(--ifm-toc-width);
}
www/docs/src/css/_tooltip.css
-19
View File
@@ -1,19 +0,0 @@
.react-tooltip {
border: 1px solid var(--ifm-tooltip-border-color) !important;
border-radius: var(--ifm-global-radius) !important;
font-size: var(--medusa-label-x-small-plus-size) !important;
line-height: var(--medusa-label-x-small-plus-line-height) !important;
font-weight: var(--medusa-label-x-small-plus-font-weight) !important;
box-shadow: var(--ifm-tooltip-box-shadow-color) !important;
padding: calc(var(--ifm-base-margin-vertical) / 4 - 1px) var(--ifm-base-spacing) !important;
}
.react-tooltip-arrow {
display: none;
}
@media screen and (max-width: 875px) {
.react-tooltip {
display: none;
}
}
www/docs/src/css/_typography.css
-96
View File
@@ -1,96 +0,0 @@
h1 {
font-size: var(--ifm-h1-font-size);
font-weight: var(--ifm-h1-weight);
line-height: var(--ifm-h1-line-height);
}
h2 {
font-size: var(--ifm-h2-font-size);
font-weight: var(--ifm-h2-weight);
line-height: var(--ifm-h2-line-height);
}
h3 {
font-size: var(--ifm-h3-font-size);
font-weight: var(--ifm-h3-weight);
line-height: var(--ifm-h3-line-height);
}
h1, h2, h3, h4, h5, h6 {
color: var(--ifm-color-headers);
}
.markdown > h1,
.markdown > h1:first-child {
--ifm-h1-font-size: var(--medusa-h1-size);
--ifm-h1-line-height: var(--medusa-h1-line-height);
--ifm-h1-weight: var(--medusa-h1-weight);
}
.markdown > h1:first-child,
.markdown > h2,
.markdown > h3 {
margin-bottom: calc(var(--ifm-base-margin-vertical) / 4);
}
.markdown > h2 {
--ifm-h2-font-size: var(--medusa-h2-size);
--ifm-h2-line-height: var(--medusa-h2-line-height);
--ifm-h2-weight: var(--medusa-h2-weight);
}
.markdown > h3 {
--ifm-h3-font-size: var(--medusa-h3-size);
--ifm-h3-line-height: var(--medusa-h3-line-height);
--ifm-h3-weight: var(--medusa-h3-weight);
}
p {
font-weight: var(--ifm-font-weight-base);
}
.markdown > p {
margin-bottom: calc(var(--ifm-base-margin-vertical) / 4);
}
.markdown > p img {
margin-top: calc(var(--ifm-base-margin-vertical) / 4);;
}
.markdown a:not(.hash-link),
.DocSearch-Prefill {
font-weight: var(--ifm-link-weight);
}
.markdown p + img,
.markdown .alert,
.markdown .code-wrapper {
margin-bottom: var(--ifm-base-margin-vertical);
}
.markdown h2,
.markdown h3,
.markdown p + .code-wrapper,
.markdown p + .tabs-wrapper,
.markdown p + .alert,
.markdown p + section,
video {
margin-top: var(--ifm-base-margin-vertical);
}
.markdown p + .card-wrapper {
margin-top: 24px;
}
.markdown {
margin-bottom: 0;
}
h1 + .cards-grid,
h1 + .card-wrapper,
h2 + .cards-grid,
h2 + .card-wrapper,
h3 + .cards-grid,
h3 + .card-wrapper {
margin-top: calc(var(--ifm-hr-margin-vertical) - 8px);
}
www/docs/src/css/_variables.css
+98 -196
View File
@@ -4,268 +4,170 @@
:root {
/* Base Styles */
--ifm-global-radius: 8px;
--ifm-hr-background-color: var(--medusa-border-base);
--ifm-base-spacing: 16px;
--ifm-global-spacing: var(--ifm-base-spacing);
--ifm-base-margin-vertical: 32px;
--ifm-hr-margin-vertical: var(--ifm-base-margin-vertical);
--ifm-leading: 24px;
--ifm-logo-width: 83px;
--ifm-logo-height: 20px;
--ifm-hr-margin-vertical: theme(margin.2);
--ifm-leading: theme(lineHeight.DEFAULT);
--ifm-list-left-padding: theme(spacing.1);
/* Colors */
--ifm-color-primary: var(--medusa-text-base);
--ifm-background-color: var(--medusa-bg-base);
--ifm-background-surface-color: var(--medusa-bg-subtle);
--ifm-color-content: var(--medusa-text-subtle) !important;
--ifm-color-content-secondary: var(--ifm-color-content) !important;
--ifm-primary-gradient: linear-gradient(90deg, rgba(146, 144, 254, 0) 0%, rgba(163, 219, 254, 0.4) 26.04%,
#9290FE 53.65%, rgba(197, 145, 255, 0.4) 78.65%, rgba(201, 138, 255, 0) 100%);
--ifm-base-border-color: var(--medusa-border-base);
--ifm-strong-border-color: var(--medusa-border-strong);
--ifm-focus-border-color: var(--medusa-border-focus);
--ifm-icon-color: var(--medusa-icon-secondary);
--ifm-color-primary: theme(colors.medusa.text.base.DEFAULT);
--ifm-background-color: theme(colors.medusa.bg.base.DEFAULT);
--ifm-background-surface-color: theme(colors.medusa.bg.subtle.DEFAULT);
--ifm-color-content: theme(colors.medusa.text.subtle.DEFAULT) !important;
--ifm-color-content-secondary: var(--ifm-color-content);
--ifm-base-border-color: theme(colors.medusa.border.base.DEFAULT);
--ifm-strong-border-color: theme(colors.medusa.border.strong.DEFAULT);
--ifm-hr-background-color: theme(colors.medusa.border.base.DEFAULT);
/* Fonts */
--ifm-code-font-size: var(--medusa-body-regular-size);
--ifm-font-family-base: "Inter",BlinkMacSystemFont,-apple-system,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif;
--ifm-font-family-monospace: 'Roboto Mono',SFMono-Regular, Menlo, Monaco, Consolas,'Liberation Mono', 'Courier New', monospace;
--ifm-font-size-base: var(--medusa-body-regular-size);
--ifm-line-height-base: var(--medusa-body-regular-line-height);
--ifm-font-weight-base: var(--medusa-body-regular-font-weight);
--ifm-code-font-size: theme(fontSize.body-regular[0]);
--ifm-font-family-base: theme(fontFamily.base);
--ifm-font-family-monospace: theme(fontFamily.monospace);
--ifm-font-size-base: theme(fontSize.body-regular[0]);
--ifm-line-height-base: theme(fontSize.body-regular[1].lineHeight);
--ifm-font-weight-base: theme(fontSize.body-regular[1].fontWeight);
/* Headings */
/** Due to how docusaurus styles headings, the variables are set again in _typography.css **/
/** Due to how docusaurus styles headings, the styles are applied on h1, h2, and h3 again in _docusaurus **/
--ifm-color-headers: var(--ifm-color-primary);
--ifm-h1-font-size: var(--medusa-h1-size);
--ifm-h1-line-height: var(--medusa-h1-line-height);
--ifm-h1-weight: var(--medusa-h1-weight);
--ifm-h2-font-size: var(--medusa-h2-size);
--ifm-h2-line-height: var(--medusa-h2-line-height);
--ifm-h2-weight: var(--medusa-h2-weight);
--ifm-h3-font-size: var(--medusa-h3-size);
--ifm-h3-line-height: var(--medusa-h3-line-height);
--ifm-h3-weight: var(--medusa-h3-weight);
--ifm-h1-font-size: theme(fontSize.h1[0]);
--ifm-h1-line-height: theme(fontSize.h1[1].lineHeight);
--ifm-h1-weight: theme(fontSize.h1[1].fontWeight);
--ifm-h2-font-size: theme(fontSize.h2[0]);
--ifm-h2-line-height: theme(fontSize.h2[1].lineHeight);
--ifm-h2-weight: theme(fontSize.h2[1].fontWeight);
--ifm-h3-font-size: theme(fontSize.h3[0]);
--ifm-h3-line-height: theme(fontSize.h3[1].lineHeight);
--ifm-h3-weight: theme(fontSize.h3[1].fontWeight);
--ifm-h4-font-size: var(--ifm-font-size-base);
/* Links */
--ifm-link-color: var(--ifm-color-primary);
--ifm-link-weight: var(--medusa-body-regular-plus-font-weight);
--ifm-link-hover-color: var(--ifm-color-content);
--ifm-link-decoration: none;
--ifm-link-hover-decoration: none;
/* Sidebar */
--doc-sidebar-width: 320px !important;
--doc-sidebar-padding: 24px;
--ifm-menu-link-padding-vertical: 6px;
--ifm-menu-link-padding-horizontal: 16px;
--ifm-menu-color: var(--medusa-text-subtle);
--ifm-menu-color-active: var(--medusa-text-base);
--ifm-menu-color-background-hover: var(--medusa-bg-base-hover);
--ifm-menu-color-background-active: var(--medusa-bg-base-pressed);
/* Docs Page */
--ifm-docs-page-max-width: var(--ifm-container-width-xl);
--ifm-max-content-width: 1419px;
--ifm-menu-link-padding-horizontal: theme(margin.1);
--ifm-menu-color: theme(colors.medusa.text.subtle.DEFAULT);
--ifm-menu-color-active: theme(colors.medusa.text.base.DEFAULT);
--ifm-menu-color-background-hover: theme(colors.medusa.bg.base.hover.DEFAULT);
--ifm-menu-color-background-active: theme(colors.medusa.bg.base.pressed.DEFAULT);
/* Toc */
--ifm-toc-border-color: var(--medusa-border-base);
--ifm-toc-link-color: var(--medusa-text-subtle);
--ifm-toc-padding-horizontal: 16px;
--ifm-toc-link-active: var(--medusa-text-base);
--ifm-toc-divider-color: var(--medusa-border-base);
--ifm-toc-link-padding-left: 11px;
--ifm-toc-border-color: theme(colors.medusa.border.base.DEFAULT);
--ifm-toc-link-color: theme(colors.medusa.text.subtle.DEFAULT);
--ifm-toc-padding-horizontal: theme(padding.1);
/* Navbar */
--ifm-navbar-background-color: var(--ifm-background-color);
--ifm-navbar-shadow: 0px 1px 0px 0px var(--medusa-border-base);
--ifm-navbar-shadow: theme(boxShadow.navbar);
--ifm-navbar-padding-vertical: 12px;
--ifm-navbar-padding-horizontal: 24px;
--ifm-navbar-padding-horizontal: theme(padding[1.5]);
--ifm-navbar-item-padding-vertical: 6px;
--ifm-navbar-item-padding-horizontal: 16px;
--ifm-navbar-height: 57px;
--ifm-navbar-link-hover-color: var(--medusa-text-base);
--ifm-navbar-link-color: var(--medusa-text-subtle);
--ifm-navbar-divider-color: var(--medusa-border-strong);
/* Color Mode toggler */
--ifm-color-mode-icon-color: var(--medusa-icon-secondary);
/* Screen Width */
--ifm-container-width-xl: 960px;
/* Notes */
--ifm-note-background: var(--ifm-background-surface-color);
--ifm-note-border-color: var(--medusa-border-base);
--ifm-note-text-color: var(--medusa-text-subtle);
--ifm-note-info-color: var(--medusa-support-info);
--ifm-note-warning-color: var(--medusa-support-error);
--ifm-note-tip-color: var(--medusa-support-warning);
--ifm-navbar-item-padding-horizontal: theme(padding[1]);
--ifm-navbar-height: theme(height.navbar);
--ifm-navbar-link-hover-color: theme(colors.medusa.text.base.DEFAULT);
--ifm-navbar-link-color: theme(colors.medusa.text.subtle.DEFAULT);
/* Inline Code */
--ifm-code-border-radius: 8px;
--ifm-code-padding-horizontal: 8px;
--ifm-code-border-color: var(--medusa-border-base);
--ifm-code-background: var(--medusa-bg-subtle) !important;
--ifm-code-background-hover: var(--medusa-bg-subtle-hover);
--ifm-code-background-pressed: var(--medusa-bg-subtle-pressed);
--ifm-code-color: var(--medusa-text-subtle);
--ifm-code-border-radius: theme(borderRadius.DEFAULT);
--ifm-code-padding-horizontal: theme(padding[0.5]);
--ifm-code-background: theme(colors.medusa.bg.subtle.DEFAULT) !important;
/* Code Blocks */
--ifm-pre-background: var(--medusa-code-block);
--ifm-pre-background-transparent: var(--medusa-code-block-transparent);
--ifm-code-tabs-color: var(--medusa-code-tab-text);
--ifm-code-tabs-active-bg: var(--medusa-code-tab);
--ifm-code-tabs-active-color: var(--medusa-code-tab-active-text);
--ifm-code-action-hover-bg: var(--medusa-code-tab-hover);
--ifm-pre-padding: 16px;
--ifm-code-title-color: var(--medusa-code-tab-title);
--ifm-code-line-number-color: var(--medusa-text-placeholder);
--ifm-code-block-border-color: var(--medusa-code-block-border);
--ifm-pre-background: theme(colors.medusa.code.block.bg);
--ifm-pre-padding: theme(padding.1);
/* Tabs */
--ifm-tabs-color-active: var(--ifm-color-primary);
/* Tooltip */
--ifm-tooltip-background-color: var(--medusa-tooltip);
--ifm-tooltip-border-color: var(--medusa-tooltip-border);
--ifm-tooltip-box-shadow-color: var(--medusa-tooltip-shadow);
--rt-opacity: 1 !important;
--rt-color-dark: var(--ifm-tooltip-background-color) !important;
--rt-opacity: theme(opacity.100) !important;
--rt-color-dark: theme(colors.medusa.bg.base.DEFAULT) !important;
--rt-color-white: var(--ifm-color-content) !important;
/* Buttons */
--ifm-primary-btn-background-color: var(--medusa-button-primary);
--ifm-primary-btn-hover-background-color: var(--medusa-button-primary-hover);
--ifm-primary-btn-color: var(--medusa-text-on-color);
--ifm-primary-btn-border-color: var(--medusa-button-primary);
--ifm-primary-btn-focused-shadow: var(--medusa-shadow-button-focused);
--ifm-secondary-btn-background-color: var(--medusa-button-secondary);
--ifm-secondary-btn-color: var(--ifm-color-primary);
--ifm-secondary-btn-border-color: var(--ifm-base-border-color);
--ifm-secondary-btn-hover-background-color: var(--medusa-button-secondary-hover);
--ifm-secondary-btn-focused-shadow: var(--ifm-primary-btn-focused-shadow);
/* Footer */
--ifm-footer-color: var(--medusa-text-placeholder);
--ifm-footer-color: theme(colors.medusa.text.placeholder.DEFAULT);
--ifm-footer-background-color: transparent;
--ifm-footer-padding-horizontal: 0;
--ifm-footer-social-icons-color: var(--medusa-icon-placeholder);
--ifm-footer-social-icons-color-hover: var(--medusa-icon-secondary);
--ifm-footer-border-color: var(--medusa-border-base);
--ifm-footer-link-color: var(--ifm-color-content);
--ifm-doc-footer-border-color: var(--medusa-border-base);
/* Search */
--docsearch-searchbox-width: 280px;
--docsearch-searchbox-height: 32px !important;
--docsearch-searchbox-background: var(--medusa-bg-field) !important;
--docsearch-searchbox-focus-background: var(--medusa-bg-field-hover) !important;
--docsearch-searchbox-border-color: var(--medusa-border-base);
--docsearch-searchbox-background: theme(colors.medusa.bg.field.DEFAULT) !important;
--docsearch-searchbox-focus-background: theme(colors.medusa.bg.field.hover.DEFAULT) !important;
--docsearch-searchbox-shadow: none !important;
--docsearch-modal-height: 472px !important;
--docsearch-modal-background: var(--medusa-bg-base) !important;
--docsearch-modal-border-color: var(--medusa-border-base);
--docsearch-modal-shadow: var(--medusa-shadow-overlay) !important;
--docsearch-modal-fade-bg: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%); /* TODO */
--docsearch-modal-searchbox-height: 56px;
--docsearch-modal-searchbox-focus-background: none;
--docsearch-container-background: var(--medusa-bg-overlay) !important;
--docsearch-key-gradient: var(--medusa-bg-component) !important;
--docsearch-muted-color: var(--medusa-text-subtle) !important;
--docsearch-placeholder-color: var(--medusa-text-placeholder);
--docsearch-primary-color: var(--ifm-color-primary);
--docsearch-source-color: var(--medusa-text-placeholder);
--docsearch-spacing-y: 12px;
--docsearch-spacing-x: 24px;
--docsearch-spacing: var(--docsearch-spacing-y) var(--docsearch-spacing-x) !important;
--docsearch-source-spacing: 10px 24px;
--docsearch-highlight-color: var(--medusa-text-placeholder) !important;
--docsearch-modal-background: theme(colors.medusa.bg.base.DEFAULT) !important;
--docsearch-modal-shadow: theme(boxShadow.overlay) !important;
--docsearch-container-background: theme(colors.medusa.bg.overlay.DEFAULT) !important;
--docsearch-key-gradient: theme(colors.medusa.bg.component.DEFAULT) !important;
--docsearch-muted-color: theme(colors.medusa.text.subtle.DEFAULT) !important;
--docsearch-spacing: 12px theme(spacing[1.5]) !important;
--docsearch-highlight-color: theme(colors.medusa.text.placeholder.DEFAULT) !important;
--docsearch-text-color: var(--ifm-color-primary) !important;
--docsearch-hit-background: var(--docsearch-modal-background) !important;
--docsearch-hit-height: auto !important;
--docsearch-hit-active-color: var(--docsearch-text-color) !important;
--docsearch-hit-active-bg: var(--medusa-bg-base-hover);
--docsearch-hit-icon-color: var(--medusa-icon-placeholder);
--docsearch-icon-color: var(--medusa-icon-placeholder);
--docsearch-hit-border-color: var(--medusa-border-base);
--docsearch-hit-title-color: var(--docsearch-primary-color);
--docsearch-tree-color: var(--medusa-border-base);
--docsearch-tree-hover-color: var(--medusa-border-strong);
--docsearch-footer-height: 40px !important;
/* Announcement Bar */
--docusaurus-announcement-bar-height: auto !important;
--ifm-announcement-bar-bg: var(--ifm-background-surface-color);
--ifm-announcement-bar-border-color: var(--ifm-base-border-color);
--ifm-announcement-bar-hover-bg: var(--medusa-bg-subtle-hover);
--ifm-announcement-bar-icon-bg: url('/img/announcement-bg.svg');
--ifm-announcement-bar-icon-color: var(--medusa-icon-on-color);
--ifm-announcement-bar-title-color: var(--ifm-color-primary);
--ifm-announcement-bar-text-color: var(--ifm-color-content);
--ifm-announcement-bar-close-icon-color: var(--medusa-icon-placeholder);
/* Cards */
--ifm-card-bg: var(--ifm-background-surface-color);
--ifm-card-bg-hover: var(--medusa-bg-subtle-hover);
--ifm-card-border-color: var(--ifm-background-surface-color);
--ifm-card-icon-size: 20px;
--ifm-card-highlighted-bg-image: url('/img/small-squares-bg-light.svg');
/* Large Card */
--large-card-bg: var(--ifm-background-surface-color);
--large-card-bg-hover: var(--medusa-bg-subtle-hover);
--large-card-border-color: var(--ifm-base-border-color);
--large-card-bg-image: url('/img/squares-bg-light.svg');
--large-card-fade-effect: linear-gradient(transparent, var(--large-card-bg));
--large-card-fade-effect-hover: linear-gradient(transparent, var(--large-card-bg-hover));
--large-card-icon-size: 20px;
--large-card-icon-inside-padding: 6px;
--large-card-icon-wrapper-padding: var(--bordered-padding);
--large-card-icon-wrapper-border-color: var(--ifm-strong-border-color);
--large-card-title-color: var(--ifm-color-primary);
/* Bordered Element */
--bordered-border-color: var(--medusa-border-strong);
--bordered-padding: 3px;
--bordered-inside-padding: 2px;
--bordered-margin-right: calc(var(--ifm-base-margin-vertical) / 2);
/** Tables **/
--ifm-table-border-color: var(--medusa-border-base);
/* Tables */
--ifm-table-border-color: theme(colors.medusa.border.base.DEFAULT);
--ifm-table-head-background: var(--ifm-background-surface-color);
--ifm-table-head-color: var(--ifm-color-primary);
--ifm-table-head-font-weight: var(--medusa-body-regular-plus-font-weight);
--ifm-table-head-font-weight: theme(fontSize.body-regular-plus[1].fontWeight);
--ifm-table-stripe-background: var(--ifm-background-surface-color) !important;
}
html[data-theme="dark"] {
/* Colors */
--ifm-background-color: theme(colors.medusa.bg.subtle.dark);
--ifm-background-surface-color: theme(colors.medusa.bg.base.dark);
--ifm-hr-background-color: theme(colors.medusa.border.base.dark);
--ifm-color-primary: theme(colors.medusa.text.base.dark);
--ifm-color-content: theme(colors.medusa.text.subtle.dark) !important;
--ifm-base-border-color: theme(colors.medusa.border.base.dark);
--ifm-strong-border-color: theme(colors.medusa.border.strong.dark);
/* Sidebar */
--ifm-menu-color-background-hover: var(--medusa-bg-subtle-hover);
--ifm-menu-color-background-active: var(--medusa-bg-subtle-pressed);
--ifm-menu-color: theme(colors.medusa.text.subtle.dark);
--ifm-menu-color-active: theme(colors.medusa.text.base.dark);
--ifm-menu-color-background-hover: theme(colors.medusa.bg.subtle.hover.dark);
--ifm-menu-color-background-active: theme(colors.medusa.bg.subtle.pressed.dark);
/* Colors */
--ifm-background-color: var(--medusa-bg-subtle);
--ifm-background-surface-color: var(--medusa-bg-base);
/* Toc */
--ifm-toc-border-color: theme(colors.medusa.border.base.dark);
--ifm-toc-link-color: theme(colors.medusa.text.subtle.dark);
/* Navbar */
--ifm-navbar-shadow: theme(boxShadow.navbar-dark);
--ifm-navbar-link-hover-color: theme(colors.medusa.text.base.dark);
--ifm-navbar-link-color: theme(colors.medusa.text.subtle.dark);
/* Inline Code */
--ifm-code-background: var(--medusa-bg-base) !important;
--ifm-code-background-hover: var(--medusa-bg-base-hover);
--ifm-code-background-pressed: var(--medusa-bg-base-pressed);
--ifm-code-background: theme(colors.medusa.bg.base.dark) !important;
/* Cards */
--ifm-card-bg-hover: var(--medusa-bg-base-hover);
--ifm-card-highlighted-bg-image: url('/img/small-squares-bg.svg');
/* Tooltip */
--rt-color-dark: theme(colors.medusa.bg.base.dark) !important;
/* Announcement Bar */
--ifm-announcement-bar-hover-bg: var(--medusa-bg-base-hover);
/* Footer */
--ifm-footer-color: theme(colors.medusa.text.placeholder.dark);
/* Large Card */
--large-card-bg-hover: var(--medusa-bg-base-hover);
--large-card-bg-image: url('/img/squares-bg.svg');
/* Search */
--docsearch-searchbox-background: theme(colors.medusa.bg.field.dark) !important;
--docsearch-searchbox-focus-background: theme(colors.medusa.bg.field.hover.dark) !important;
--docsearch-modal-background: theme(colors.medusa.bg.base.dark) !important;
--docsearch-modal-shadow: theme(boxShadow.overlay-dark) !important;
--docsearch-container-background: theme(colors.medusa.bg.overlay.dark) !important;
--docsearch-key-gradient: theme(colors.medusa.bg.component.dark) !important;
--docsearch-muted-color: theme(colors.medusa.text.subtle.dark) !important;
--docsearch-highlight-color: theme(colors.medusa.text.placeholder.dark) !important;
/* Tables */
--ifm-table-border-color: theme(colors.medusa.border.base.dark);
}
@media screen and (min-width: 1441px) {
www/docs/src/css/components/docsearch.css
+197
View File
@@ -0,0 +1,197 @@
.DocSearch-Modal {
@apply tw-border tw-border-solid !tw-border-medusa-border-base dark:!tw-border-medusa-border-base-dark;
@apply !tw-rounded !tw-relative;
@apply md:!tw-m-[unset] md:tw-w-[560px];
}
.DocSearch-SearchBar {
@apply !tw-p-0;
}
.DocSearch-Form {
--docsearch-spacing: theme(margin[1.5]);
--docsearch-searchbox-height: 56px;
--docsearch-searchbox-focus-background: var(--docsearch-modal-background) !important;
@apply !tw-rounded-t !tw-rounded-b-none tw-border-0 tw-border-b tw-border-solid !tw-border-medusa-border-base dark:!tw-border-medusa-border-base-dark;
}
.DocSearch-LoadingIndicator svg, .DocSearch-MagnifierLabel svg {
@apply !tw-w-[20px] !tw-h-[20px];
}
.DocSearch-Input {
@apply !tw-text-body-regular !tw-pl-1;
@apply placeholder:tw-text-medusa-text-placeholder dark:placeholder:tw-text-medusa-text-placeholder-dark;
}
.DocSearch-Dropdown {
@apply !tw-pt-0 !tw-pb-[40px] !tw-px-0;
@apply !tw-max-h-[416px];
}
.DocSearch-Hit-source {
@apply !tw-m-0 !tw-text-label-small-plus tw-uppercase tw-text-medusa-text-placeholder dark:tw-text-medusa-text-placeholder-dark;
@apply tw-border-0 tw-border-b tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark;
@apply !tw-py-[10px] !tw-px-1.5;
}
.DocSearch-Footer {
@apply !tw-hidden;
}
.DocSearch-Hit {
@apply !tw-p-0;
}
.DocSearch-Hit:not(.DocSearch-Hit--Child) .DocSearch-Hit-icon {
@apply !tw-w-[40px] !tw-h-[40px] tw-p-[2px] tw-border tw-border-solid tw-border-medusa-border-strong dark:tw-border-medusa-border-strong-dark;
@apply tw-rounded tw-flex tw-justify-center tw-items-center;
@apply before:tw-content-[''] before:tw-w-2 before:tw-h-2 before:tw-bg-no-repeat before:tw-bg-center before:tw-bg-contain before:tw-bg-search-hit dark:before:tw-bg-search-hit-dark;
}
.DocSearch-Hit-icon svg {
@apply tw-hidden;
}
.DocSearch-Hit--Child .DocSearch-Hit-icon {
@apply tw-hidden;
}
.DocSearch-Hit a {
@apply !tw-py-[12px] !tw-px-1.5 !tw-shadow-none !tw-rounded-none;
}
.DocSearch-Hit:not(:last-of-type) a {
@apply tw-border-0 tw-border-b tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark;
}
.DocSearch-Hit-content-wrapper {
@apply !tw-mt-0 !tw-mx-1;
}
.DocSearch-Hit-title,
.DocSearch-Hit-title mark {
@apply !tw-text-medusa-text-base dark:!tw-text-medusa-text-base-dark;
@apply !tw-text-label-small-plus;
}
.DocSearch-Hit-path {
@apply !tw-text-medusa-text-subtle dark:!tw-text-medusa-text-subtle-dark !tw-text-label-small;
}
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path {
--docsearch-hit-active-color: theme(colors.medusa.text.subtle.DEFAULT);
}
html[data-theme="dark"] .DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path {
--docsearch-hit-active-color: theme(colors.medusa.text.subtle.dark);
}
.DocSearch-Hit[aria-selected=true] a {
@apply !tw-bg-medusa-bg-base-hover dark:!tw-bg-medusa-bg-base-hover-dark;
}
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-content-wrapper + .DocSearch-Hit-action:last-child {
@apply tw-h-1.5 tw-w-1.5 tw-border tw-border-solid tw-border-medusa-border-strong dark:tw-border-medusa-border-strong-dark;
@apply tw-rounded tw-bg-medusa-bg-base dark:tw-bg-medusa-bg-base-dark tw-p-[2px] tw-flex tw-justify-center tw-items-center;
@apply before:tw-content-[''] before:tw-w-[20px] before:tw-h-[20px] before:tw-bg-search-arrow dark:before:tw-bg-search-arrow-dark before:tw-bg-no-repeat before:tw-bg-center;
}
.DocSearch-Hit-content-wrapper + .DocSearch-Hit-action:last-child svg,
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-content-wrapper + .DocSearch-Hit-action:last-child svg {
@apply tw-hidden;
}
.DocSearch-Hit[aria-selected=true] mark {
@apply !tw-no-underline;
}
.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree {
@apply tw-text-medusa-border-strong dark:tw-text-medusa-border-strong-dark;
}
.DocSearch-Hit-Tree {
@apply tw-text-medusa-border-base dark:tw-text-medusa-border-base-dark;
}
.DocSearch-HitsFooter {
@apply tw-z-[100] tw-absolute tw-bottom-0 tw-left-0 tw-w-full tw-h-[40px] !tw-bg-medusa-bg-base dark:!tw-bg-medusa-bg-base-dark;
@apply tw-border-0 tw-border-t tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark;
}
.DocSearch-HitsFooter a {
@apply !tw-border-b-0;
}
.DocSearch-Reset {
@apply !tw-rounded tw-transition-all tw-duration-200 tw-ease-ease;
@apply hover:tw-bg-medusa-bg-base-hover dark:hover:tw-bg-medusa-bg-base-hover-dark;
}
.DocSearch-NoResults .DocSearch-Screen-Icon {
@apply tw-w-[20px] tw-h-[20px] !tw-p-0 tw-flex tw-justify-center tw-items-center tw-mt-0 tw-mb-1 tw-mx-auto;
@apply before:tw-content-[''] before:tw-w-full before:tw-h-full before:tw-bg-no-repeat before:tw-bg-center before:tw-bg-contain;
@apply before:tw-bg-search-no-result dark:before:tw-bg-search-no-result-dark;
}
.DocSearch-NoResults .DocSearch-Screen-Icon svg {
@apply tw-hidden;
}
.DocSearch-NoResults .DocSearch-Title {
@apply !tw-text-label-small !tw-pl-1;
}
.DocSearch-NoResults-Prefill-List {
@apply tw-text-center !tw-text-label-small-plus !tw-pl-1;
}
.DocSearch-NoResults-Prefill-List li::marker {
@apply tw-content-[''];
}
.DocSearch-NoResults-Prefill-List li button {
@apply tw-text-medusa-text-base dark:tw-text-medusa-text-base-dark;
}
.DocSearch-Button {
@apply tw-w-full !tw-h-full !tw-rounded lg:!tw-border lg:!tw-border-solid lg:!tw-border-medusa-border-base lg:dark:!tw-border-medusa-border-base-dark tw-border-0;
@apply lg:!tw-bg-medusa-bg-field lg:dark:!tw-bg-medusa-bg-field-dark !tw-bg-transparent;
@apply lg:hover:!tw-bg-medusa-bg-field-hover lg:dark:hover:!tw-bg-medusa-bg-field-hover-dark;
@apply !tw-py-[6px] !tw-pl-0.5 tw-relative;
@apply hover:!tw-border-medusa-border-base hover:dark:!tw-border-medusa-border-base-dark;
@apply active:!tw-border-medusa-border-base active:dark:!tw-border-medusa-border-base-dark;
@apply focus:!tw-border-medusa-border-base focus:dark:!tw-border-medusa-border-base-dark;
}
.DocSearch-Container {
@apply !tw-z-[1001] md:tw-flex md:tw-justify-center md:tw-items-center;
}
.DocSearch-Button .DocSearch-Search-Icon {
@apply tw-invisible;
}
.DocSearch-Button-Container {
@apply before:tw-content-[''] before:tw-h-[20px] before:tw-w-[20px] before:tw-absolute before:tw-left-0.5 before:tw-top-[5px];
@apply before:tw-bg-magnifying-glass before:tw-bg-no-repeat;
}
.DocSearch-Button-Placeholder {
@apply tw-text-medusa-text-placeholder dark:tw-text-medusa-text-placeholder-dark;
@apply !tw-pl-0.5 !tw-text-label-small lg:!tw-block !tw-hidden;
}
.DocSearch-Button-Keys {
@apply tw-w-fit !tw-min-w-[unset] lg:!tw-flex !tw-hidden;
}
.DocSearch-Button-Key {
@apply !tw-shadow-none !tw-rounded-md !tw-text-label-x-small-plus !tw-font-base tw-align-middle !tw-p-[2px];
@apply !tw-border !tw-border-solid !tw-border-medusa-border-strong dark:!tw-border-medusa-border-strong-dark;
@apply [&span]:tw-hidden [&:not(:last-child)]:!tw-mr-[4px] last:!tw-mr-0;
}
[class*=searchBox] {
@apply lg:tw-w-[280px] lg:tw-max-w-[280px] lg:!tw-h-2 lg:!tw-p-0;
}
www/docs/src/css/components/redocly.css
+152
View File
@@ -0,0 +1,152 @@
.redocusaurus .expanded + tr > td > div {
@apply !tw-bg-medusa-bg-subtle dark:!tw-bg-medusa-bg-base-dark;
}
.redocusaurus table tbody tr table,
.redocusaurus table tbody tr table tbody tr {
@apply !tw-bg-transparent;
}
.redocusaurus a {
@apply !tw-text-medusa-text-base dark:!tw-text-medusa-text-base-dark;
}
.redocusaurus pre {
@apply !tw-p-1;
}
.redocusaurus .react-tabs__tab-panel > div > pre {
@apply !tw-p-0;
}
.redocusaurus pre,
.redocusaurus .react-tabs__tab-panel--selected,
.redocusaurus [data-section-id] > div:nth-child(2) > div > button,
.redocusaurus div[id^='tag'] > div > div:nth-child(2) > div:nth-child(1) > div:nth-child(2) {
@apply !tw-bg-medusa-code-block-bg;
}
.redocusaurus [data-section-id] > div:nth-child(2) > div > button {
@apply dark:!tw-border-medusa-border-strong-dark;
}
.redocusaurus div[id^='tag'] > div > div:nth-child(2) > div:nth-child(1) > div:nth-child(2) > div > div:nth-child(2) > div {
@apply !tw-border-medusa-border-strong;
}
.redocusaurus [data-section-id] > div:nth-child(2) > div > button {
@apply !tw-rounded-t !tw-rounded-b-none;
}
.redocusaurus [data-section-id] > div:nth-child(2) > div > button + div > div > div > div {
@apply !tw-text-medusa-text-base dark:!tw-text-medusa-text-base-dark;
}
.redocusaurus h5 + svg {
@apply tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark;
}
.redocusaurus h2 + div + div > div + div {
@apply tw-p-1 tw-bg-medusa-bg-subtle dark:tw-bg-medusa-bg-base-dark;
}
.redocusaurus h2 + div + div {
@apply tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark;
}
.redocusaurus .menu-content,
.redocusaurus .menu-content label {
@apply !tw-bg-medusa-bg-base dark:!tw-bg-medusa-bg-subtle-dark;
}
.redoc-json code {
@apply !tw-border-0;
}
.redocusaurus p {
@apply tw-text-medusa-text-subtle dark:tw-text-medusa-text-subtle-dark;
}
.redocusaurus h2, .redocusaurus h3, .redocusaurus h4 {
@apply !tw-text-medusa-text-base dark:!tw-text-medusa-text-base-dark;
}
.redocusaurus [data-section-id] [data-section-id] > div:nth-child(2) h2, .redocusaurus [data-section-id] [data-section-id] > div:nth-child(2) h3, .redocusaurus [data-section-id] [data-section-id] > div:nth-child(2) h4 {
@apply !tw-text-medusa-text-on-color dark:!tw-text-medusa-text-on-color-dark;
}
.redocusaurus [data-section-id] {
@apply after:!tw-border-transparent;
}
.redocusaurus .property-name + div {
@apply !tw-text-medusa-icon-error dark:!tw-text-medusa-icon-error-dark;
}
.redocusaurus .react-tabs__tab:not(.react-tabs__tab--selected) {
@apply !tw-bg-medusa-button-secondary dark:!tw-bg-medusa-button-secondary-dark;
@apply !tw-border-medusa-border-base dark:!tw-border-medusa-border-base-dark;
@apply !tw-text-medusa-text-base dark:!tw-text-medusa-text-base-dark;
}
.redocusaurus ul > li.react-tabs__tab--selected[aria-selected="true"]:not(.tab-error):not(.tab-success) {
@apply !tw-bg-medusa-button-primary dark:!tw-bg-medusa-button-primary-dark;
@apply !tw-border-medusa-button-primary dark:!tw-border-medusa-button-primary-dark;
@apply !tw-text-medusa-text-on-color dark:!tw-text-medusa-text-on-color-dark;
}
.redocusaurus ul > li.react-tabs__tab--selected.tab-success {
@apply !tw-bg-medusa-button-success dark:!tw-bg-medusa-button-success-dark;
@apply !tw-border-medusa-button-success dark:!tw-border-medusa-button-success-dark;
@apply !tw-text-medusa-text-on-color dark:!tw-text-medusa-text-on-color-dark;
}
.redocusaurus ul > li.react-tabs__tab--selected.tab-error {
@apply !tw-bg-medusa-button-danger dark:!tw-bg-medusa-button-danger-dark;
@apply !tw-border-medusa-button-danger dark:!tw-border-medusa-button-danger-dark;
@apply !tw-text-medusa-text-on-color dark:!tw-text-medusa-text-on-color-dark;
@apply hover:!tw-bg-medusa-button-danger-hover dark:hover:!tw-bg-medusa-button-danger-hover-dark;
@apply hover:!tw-border-medusa-button-danger-hover dark:hover:!tw-border-medusa-button-danger-hover-dark;
}
.redocusaurus .tab-error:not(.react-tabs__tab--selected) {
@apply !tw-bg-medusa-button-secondary dark:!tw-bg-medusa-button-secondary-dark;
@apply !tw-border-medusa-border-base dark:!tw-border-medusa-border-base-dark;
@apply !tw-text-medusa-support-error dark:!tw-text-medusa-support-error-dark;
}
.redocusaurus .tab-success:not(.react-tabs__tab--selected) {
@apply !tw-bg-medusa-button-secondary dark:!tw-bg-medusa-button-secondary-dark;
@apply !tw-border-medusa-border-base dark:!tw-border-medusa-border-base-dark;
@apply !tw-text-medusa-support-success dark:!tw-text-medusa-support-success-dark;
}
.redocusaurus [type=get] {
@apply !tw-bg-medusa-support-success dark:!tw-bg-medusa-support-success-dark;
}
.redocusaurus [type=delete] {
@apply !tw-bg-medusa-support-error dark:!tw-bg-medusa-support-error-dark;
}
.redocusaurus table th,
.redocusaurus table td {
@apply !tw-border-medusa-border-base dark:!tw-border-medusa-border-base-dark;
}
.redocusaurus [download] {
@apply !tw-inline-flex tw-flex-row tw-justify-center tw-items-center;
@apply !tw-py-[6px] !tw-px-[12px] !tw-rounded !tw-cursor-pointer;
@apply !tw-bg-medusa-button-secondary dark:!tw-bg-medusa-button-secondary-dark;
@apply hover:!tw-bg-medusa-button-secondary-hover dark:hover:!tw-bg-medusa-button-secondary-hover-dark hover:tw-no-underline;
@apply !tw-border !tw-border-solid !tw-border-medusa-border-base dark:!tw-border-medusa-border-base-dark;
@apply !tw-text-label-small-plus !tw-text-medusa-text-base dark:!tw-text-medusa-text-base-dark;
@apply hover:!tw-text-medusa-text-base dark:hover:!tw-text-medusa-text-base-dark;
@apply focus:!tw-shadow-button-focused dark:focus:!tw-shadow-button-focused-dark;
}
.redocusaurus [role=menuitem] {
@apply hover:!tw-text-medusa-text-subtle dark:hover:!tw-text-medusa-text-subtle-dark;
}
www/docs/src/css/components/sidebar.css
+169
View File
@@ -0,0 +1,169 @@
.theme-doc-sidebar-container {
--animate-duration: 0.2s;
clip-path: inset(0);
}
.sidebar-desktop nav {
--ifm-scrollbar-track-background-color: transparent !important;
--ifm-scrollbar-thumb-background-color: transparent !important;
--ifm-scrollbar-thumb-hover-background-color: transparent !important;
}
.menu__list-item:not(:first-child):not(.sidebar-title) {
margin-top: 0 !important;
}
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) [class*=theme-doc-sidebar-item-],
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) [class*=theme-doc-sidebar-item-] .menu__link--active {
@apply tw-relative;
}
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) [class*=theme-doc-sidebar-item-]:not(.theme-doc-sidebar-item-link-category)::before,
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) .theme-doc-sidebar-item-category .menu__list-item-collapsible .menu__link--active::before,
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) > .theme-doc-sidebar-item-link > .menu__link--active::before,
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) .theme-doc-sidebar-item-category > .menu__list-item-collapsible::before {
@apply tw-content-[''] tw-h-full tw-w-[1px] tw-absolute tw-left-[8px] tw-top-0 tw-z-[1];
}
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) [class*=theme-doc-sidebar-item-] .menu__link--active::before {
@apply !tw-h-[20px];
}
.theme-doc-sidebar-item-category-level-1 > .menu__list > .menu__list-item:first-child::before,
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) .theme-doc-sidebar-item-category:first-child .menu__list-item-collapsible::before,
.theme-doc-sidebar-item-category-level-1 > .menu__list > .menu__list-item:last-child::before {
@apply !tw-h-[28px];
}
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) .theme-doc-sidebar-item-link:first-child::before,
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) .theme-doc-sidebar-item-category:first-child .menu__list-item-collapsible::before {
@apply !tw-bottom-0 !tw-top-[unset];
}
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) .theme-doc-sidebar-item-category:first-child .menu__list-item-collapsible {
@apply !tw-pb-[6px];
}
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) .theme-doc-sidebar-item-category:first-child .menu__list-item-collapsible .menu__link {
@apply !tw-pb-0;
}
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) [class*=theme-doc-sidebar-item-]::before,
.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) .theme-doc-sidebar-item-category:first-child .menu__list-item-collapsible::before {
@apply tw-bg-medusa-border-base dark:tw-bg-medusa-border-base-dark;
}
.theme-doc-sidebar-item-category-level-2 > .menu__list-item-collapsible .menu__link--active::before,
.menu__list:not(.theme-doc-sidebar-menu) > .theme-doc-sidebar-item-link.theme-doc-sidebar-item-link-level-2 > .menu__link--active::before {
@apply tw-bg-medusa-icon-interactive dark:tw-bg-medusa-icon-interactive-dark !tw-z-[2] !tw-top-[6px];
}
.theme-doc-sidebar-item-category-level-2:only-child > .menu__list-item-collapsible .menu__link--active::before,
.menu__list:not(.theme-doc-sidebar-menu) > .theme-doc-sidebar-item-link.theme-doc-sidebar-item-link-level-2:only-child > .menu__link--active::before,
.menu__list:not(.theme-doc-sidebar-menu) > .theme-doc-sidebar-item-link.theme-doc-sidebar-item-link-level-2:first-child > .menu__link--active::before {
@apply !tw-top-0.5;
}
.theme-doc-sidebar-item-link-level-1:not(.sidebar-title):not(.homepage-sidebar-item):not(.sidebar-back-link) {
@apply tw-mb-1;
}
.theme-doc-sidebar-item-link-level-1:not(.sidebar-title):not(.homepage-sidebar-item):not(.sidebar-back-link) .menu__link {
@apply !tw-pl-0;
}
.theme-doc-sidebar-item-category-level-1.sidebar-group-headline {
@apply tw-mb-1;
}
[class*="level-2"]:is([class*="theme-doc-sidebar-item"]) .menu__link,
[class*="level-2"]:is([class*="theme-doc-sidebar-item"]).sidebar-group-divider,
[class*="level-3"]:is([class*="theme-doc-sidebar-item"]) .menu__link,
[class*="level-3"]:is([class*="theme-doc-sidebar-item"]).sidebar-group-divider,
[class*="level-4"]:is([class*="theme-doc-sidebar-item"]) .menu__link,
[class*="level-4"]:is([class*="theme-doc-sidebar-item"]).sidebar-group-divider {
@apply tw-py-[6px];
}
[class*="level-2"]:is([class*="theme-doc-sidebar-item"]) .menu__link,
[class*="level-2"]:is([class*="theme-doc-sidebar-item"]).sidebar-group-divider {
@apply tw-pl-2;
}
[class*="level-3"]:is([class*="theme-doc-sidebar-item"]) .menu__link,
[class*="level-3"]:is([class*="theme-doc-sidebar-item"]).sidebar-group-divider {
@apply tw-pl-3;
}
[class*="level-4"]:is([class*="theme-doc-sidebar-item"]) .menu__link,
[class*="level-4"]:is([class*="theme-doc-sidebar-item"]).sidebar-group-divider {
@apply tw-pl-4;
}
.homepage-sidebar-item:is([class*="level-1"]):is([class*="theme-doc-sidebar-item"]) > .menu__link,
.homepage-sidebar-item:is([class*="level-1"]):is([class*="theme-doc-sidebar-item"]) > .menu__list-item-collapsible > .menu__link {
@apply !tw-pl-0.5;
}
.menu__list-item-collapsible {
@apply !tw-rounded;
}
.menu__list-item-collapsible--active {
@apply !tw-bg-transparent;
}
.menu__list-item-collapsible .menu__link--sublist:hover {
@apply !tw-bg-medusa-bg-base-hover dark:!tw-bg-medusa-bg-subtle-hover-dark;
}
.menu__list:not(.theme-doc-sidebar-menu) > .theme-doc-sidebar-item-link:last-child > .menu__link--active::before {
@apply !tw-top-[4px];
}
.menu__link--sublist-caret:after {
@apply tw-content-none;
}
.menu__link {
@apply tw-cursor-pointer !tw-rounded tw-text-label-small-plus;
}
.theme-doc-sidebar-item-category-level-1 > .menu__list {
@apply tw-mb-[4px];
}
.menu__list:not(.theme-doc-sidebar-menu),
.theme-doc-sidebar-item-category-level-1 > .menu__list {
@apply !tw-pl-0;
}
.menu__list .menu__list {
@apply !tw-mt-0;
}
/** General sidebar styles **/
.theme-doc-sidebar-container {
@apply tw-z-[398] tw-border-0 tw-border-r tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark;
}
/** Mobile Sidebar **/
.navbar-sidebar__back {
@apply tw-bg-transparent tw-w-fit tw-top-[unset] tw-pl-0 tw-ml-0 tw-mb-1 tw-text-label-small-plus;
}
.theme-doc-sidebar-item-link {
@apply tw-flex tw-items-center;
}
/** Redocly sidebar **/
.redocusaurus .menu-content > div > ul > li > ul label:not([type=tag]):not(.active) {
@apply tw-text-medusa-text-subtle dark:tw-text-medusa-text-subtle-dark;
@apply hover:tw-text-medusa-text-base dark:hover:tw-text-medusa-text-base-dark;
}
.redocusaurus .menu-content > div > ul > li > ul label:not([type=tag]).active {
@apply tw-text-medusa-text-base dark:tw-text-medusa-text-base-dark;
}
www/docs/src/css/components/toc.css
+60
View File
@@ -0,0 +1,60 @@
.theme-doc-toc-desktop {
@apply tw-pt-3;
}
.theme-doc-toc-desktop .table-of-contents {
@apply !tw-border-l-0 !tw-p-0 tw-text-[12px] tw-relative tw-overflow-y-hidden;
@apply before:tw-bg-toc dark:before:tw-bg-toc-dark;
@apply before:tw-bg-no-repeat before:tw-bg-[length:14px_10px] before:tw-bg-[center_left];
@apply before:tw-pl-[22px] before:tw-content-['On_this_page'] before:tw-pb-0 tw-text-label-small-plus;
@apply after:tw-content-[''] after:tw-absolute after:tw-left-0 after:tw-top-[40px];
@apply after:tw-h-full after:tw-w-[1px] after:tw-bg-medusa-border-base dark:after:tw-bg-medusa-border-base-dark;
}
.theme-doc-toc-desktop .table-of-contents .table-of-contents__link {
@apply tw-pl-[11px];
}
.theme-doc-toc-desktop .table-of-contents > li {
@apply first:tw-mt-1 [&:not(:first-child)]:tw-mt-0 last:tw-mb-0 [&:not(:last-child)]:tw-mb-[4px];
}
.theme-doc-toc-desktop .table-of-contents li a + ul {
@apply tw-mt-[4px];
}
.theme-doc-toc-desktop .table-of-contents__link {
@apply tw-relative tw-text-label-x-small-plus;
@apply hover:tw-text-medusa-text-base dark:hover:tw-text-medusa-text-base-dark;
}
.theme-doc-toc-desktop .table-of-contents__link:hover code {
@apply tw-text-medusa-text-base dark:tw-text-medusa-text-base-dark;
}
.theme-doc-toc-desktop .table-of-contents__link--active {
@apply tw-text-medusa-text-base dark:tw-text-medusa-text-base-dark;
@apply after:tw-content-[''] after:tw-absolute after:tw-left-0 after:tw-top-0;
@apply after:tw-h-full after:tw-w-[1px] after:tw-bg-medusa-text-base dark:after:tw-bg-medusa-text-base-dark;
@apply tw-z-[1];
}
.theme-doc-toc-desktop .table-of-contents__link--active code {
@apply tw-text-medusa-text-base dark:tw-text-medusa-text-base-dark;
}
.theme-doc-toc-desktop .table-of-contents li {
@apply tw-mx-0;
}
.theme-doc-toc-desktop .table-of-contents ul li {
@apply tw-mt-0;
}
.table-of-contents ul {
@apply tw-pl-0;
}
.table-of-contents ul .table-of-contents__link {
@apply !tw-pl-[27px];
}
www/docs/src/css/components/tooltip.css
+10
View File
@@ -0,0 +1,10 @@
.react-tooltip {
@apply !tw-border !tw-border-solid !tw-border-medusa-border-base dark:!tw-border-medusa-border-base-dark;
@apply !tw-rounded !tw-text-label-x-small-plus !tw-shadow-overlay dark:!tw-shadow-overlay-dark;
@apply !tw-py-0.4 !tw-px-1 lg:tw-block tw-hidden;
}
.react-tooltip-arrow {
@apply tw-hidden;
}
www/docs/src/css/custom.css
+132 -13
View File
@@ -1,15 +1,134 @@
@import url('./_medusa.css');
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.sidebar-title {
@apply !tw-m-0 !tw-py-1 !tw-px-0;
@apply lg:first:tw-top-0 lg:[&:not(:first-child)]:tw-top-[20px];
}
.sidebar-title .menu__link {
@apply !tw-px-0;
}
.sidebar-title .menu__link,
.sidebar-title span {
@apply !tw-text-label-regular-plus tw-text-medusa-text-base dark:tw-text-medusa-text-base-dark;
}
.sidebar-title .menu__link--active,
.sidebar-title .menu__link:hover {
@apply !tw-bg-transparent;
}
.sidebar-group-headline {
@apply tw-mt-1 tw-py-[6px] tw-px-0;
}
.sidebar-group-headline:not(.theme-doc-sidebar-item-category-level-1) {
@apply tw-mb-[6px];
}
.sidebar-group-headline > .menu__list-item-collapsible > .menu__link {
@apply tw-text-medusa-text-base dark:tw-text-medusa-text-base-dark !tw-p-0;
}
.sidebar-group-headline > .menu__list-item-collapsible > .menu__link:not([href]) {
@apply tw-cursor-default
}
.sidebar-group-headline > .menu__list-item-collapsible > .menu__link:hover,
.sidebar-group-headline .menu__list-item-collapsible:hover {
@apply !tw-bg-transparent;
}
.sidebar-group-headline > .menu__link,
.sidebar-group-headline > .menu__list-item-collapsible > .menu__link {
@apply tw-font-semibold;
}
.sidebar-group-divider {
@apply tw-pb-[6px] tw-uppercase tw-text-medusa-text-placeholder dark:tw-text-medusa-text-placeholder-dark tw-text-label-x-small-plus;
@apply first:tw-pt-[6px] [&:not(:first-child)]:!tw-pt-1;
}
.sidebar-divider-line {
@apply tw-h-[1px] tw-w-full tw-bg-medusa-border-base dark:tw-bg-medusa-border-base-dark tw-my-1 tw-mx-0;
}
.sidebar-back-link {
@apply tw-cursor-pointer lg:tw-top-0;
}
.sidebar-back-link,
.sidebar-title {
@apply lg:tw-sticky lg:tw-bg-medusa-bg-base dark:lg:tw-bg-medusa-bg-subtle-dark lg:tw-z-[100];
}
.sidebar-back-link .menu__link {
@apply !tw-p-0 hover:!tw-bg-transparent hover:tw-text-medusa-text-base dark:hover:tw-text-medusa-text-base-dark;
}
.sidebar-back-link .menu__link,
.sidebar-back-link span {
@apply tw-text-label-small-plus;
}
.sidebar-back-link .sidebar-item-icon {
@apply tw-mr-0.5;
}
.sidebar-soon-link {
@apply tw-pointer-events-none [&_*]:tw-text-medusa-text-disabled dark:[&_*]:tw-text-medusa-text-disabled-dark;
}
.sidebar-badge-wrapper {
@apply tw-flex tw-justify-between tw-items-center;
}
.search-page-input {
@apply tw-rounded tw-border tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark;
@apply tw-font-base tw-text-body-regular tw-p-[12px] tw-w-full tw-bg-medusa-bg-field dark:tw-bg-medusa-bg-field-dark;
@apply tw-text-medusa-text-base dark:tw-text-medusa-text-base-dark tw-mb-1;
@apply tw-transition-[border] tw-duration-200 tw-ease-ease;
@apply focus:tw-border-medusa-border-base dark:focus:tw-border-medusa-border-base-dark;
@apply focus:tw-outline-none !tw-shadow-none;
}
.code-header {
@apply tw-py-[12px] tw-px-1 tw-bg-medusa-code-tabs-bg;
@apply tw-flex tw-justify-between tw-items-center;
@apply tw-rounded-tl tw-rounded-tr tw-rounded-br-none tw-rounded-bl-none tw-border-b-0;
@apply tw-border tw-border-solid tw-border-medusa-code-block-border tw-border-b-0;
}
.no-scrollbar::-webkit-scrollbar {
@apply tw-hidden;
}
.animate__fastest {
--animate-duration: 0.2s;
}
.btn-primary {
@apply tw-inline-flex tw-flex-row tw-justify-center tw-items-center;
@apply tw-py-[6px] tw-px-[12px] tw-rounded tw-cursor-pointer;
@apply tw-bg-medusa-button-secondary dark:tw-bg-medusa-button-secondary-dark;
@apply hover:tw-bg-medusa-button-secondary-hover dark:hover:tw-bg-medusa-button-secondary-hover-dark hover:tw-no-underline;
@apply tw-border tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark;
@apply tw-text-label-small-plus tw-text-medusa-text-base dark:tw-text-medusa-text-base-dark;
@apply hover:tw-text-medusa-text-base dark:hover:tw-text-medusa-text-base-dark;
@apply focus:tw-shadow-button-focused dark:focus:tw-shadow-button-focused-dark;
}
}
@import url('./_variables.css');
@import url('./_card.css');
@import url('./_code.css');
@import url('./_docsearch.css');
@import url('./_docspage.css');
@import url('./_footer.css');
@import url('./_navbar.css');
@import url('./_note.css');
@import url('./_redocly.css');
@import url('./_sidebar.css');
@import url('./_toc.css');
@import url('./_tooltip.css');
@import url('./_typography.css');
@import url('./_docusaurus.css');
@import url('./components/docsearch.css');
@import url('./components/redocly.css');
@import url('./components/sidebar.css');
@import url('./components/toc.css');
@import url('./components/tooltip.css');
www/docs/src/theme/Admonition/index.js → www/docs/src/theme/Admonition/index.tsx
+141 -78
View File
@@ -1,168 +1,231 @@
import React from 'react';
import clsx from 'clsx';
import {ThemeClassNames} from '@docusaurus/theme-common';
import Translate from '@docusaurus/Translate';
import styles from './styles.module.css';
import useBaseUrl from '@docusaurus/useBaseUrl';
import React, { type ReactNode } from "react"
import clsx from "clsx"
import Translate from "@docusaurus/Translate"
import type { Props } from "@theme/Admonition"
function NoteIcon() {
return (
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd"
d="M18 10C18 12.1217 17.1571 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84285 14.1566 2 12.1217 2 10C2 7.87827 2.84285 5.84344 4.34315 4.34315C5.84344 2.84285 7.87827 2 10 2C12.1217 2 14.1566 2.84285 15.6569 4.34315C17.1571 5.84344 18 7.87827 18 10ZM11 6C11 6.26522 10.8946 6.51957 10.7071 6.70711C10.5196 6.89464 10.2652 7 10 7C9.73478 7 9.48043 6.89464 9.29289 6.70711C9.10536 6.51957 9 6.26522 9 6C9 5.73478 9.10536 5.48043 9.29289 5.29289C9.48043 5.10536 9.73478 5 10 5C10.2652 5 10.5196 5.10536 10.7071 5.29289C10.8946 5.48043 11 5.73478 11 6ZM9 9C8.80109 9 8.61032 9.07902 8.46967 9.21967C8.32902 9.36032 8.25 9.55109 8.25 9.75C8.25 9.94891 8.32902 10.1397 8.46967 10.2803C8.61032 10.421 8.80109 10.5 9 10.5H9.253C9.29041 10.5 9.32734 10.5084 9.36106 10.5246C9.39479 10.5408 9.42445 10.5643 9.44787 10.5935C9.47128 10.6227 9.48785 10.6567 9.49636 10.6932C9.50486 10.7296 9.50508 10.7675 9.497 10.804L9.038 12.87C8.98108 13.1259 8.98237 13.3913 9.04179 13.6466C9.10121 13.902 9.21723 14.1407 9.38129 14.3452C9.54535 14.5496 9.75325 14.7146 9.98963 14.828C10.226 14.9413 10.4848 15.0001 10.747 15H11C11.1989 15 11.3897 14.921 11.5303 14.7803C11.671 14.6397 11.75 14.4489 11.75 14.25C11.75 14.0511 11.671 13.8603 11.5303 13.7197C11.3897 13.579 11.1989 13.5 11 13.5H10.747C10.7096 13.5 10.6727 13.4916 10.6389 13.4754C10.6052 13.4592 10.5755 13.4357 10.5521 13.4065C10.5287 13.3773 10.5121 13.3433 10.5036 13.3068C10.4951 13.2704 10.4949 13.2325 10.503 13.196L10.962 11.13C11.0189 10.8741 11.0176 10.6087 10.9582 10.3534C10.8988 10.098 10.7828 9.8593 10.6187 9.65483C10.4547 9.45036 10.2468 9.28536 10.0104 9.17201C9.77398 9.05867 9.51515 8.99989 9.253 9H9Z"
fill="var(--ifm-note-info-color)"
<svg
width={20}
height={20}
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="tw-inline-block tw-mr-[2px]"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M18 10C18 12.1217 17.1571 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84285 14.1566 2 12.1217 2 10C2 7.87827 2.84285 5.84344 4.34315 4.34315C5.84344 2.84285 7.87827 2 10 2C12.1217 2 14.1566 2.84285 15.6569 4.34315C17.1571 5.84344 18 7.87827 18 10ZM11 6C11 6.26522 10.8946 6.51957 10.7071 6.70711C10.5196 6.89464 10.2652 7 10 7C9.73478 7 9.48043 6.89464 9.29289 6.70711C9.10536 6.51957 9 6.26522 9 6C9 5.73478 9.10536 5.48043 9.29289 5.29289C9.48043 5.10536 9.73478 5 10 5C10.2652 5 10.5196 5.10536 10.7071 5.29289C10.8946 5.48043 11 5.73478 11 6ZM9 9C8.80109 9 8.61032 9.07902 8.46967 9.21967C8.32902 9.36032 8.25 9.55109 8.25 9.75C8.25 9.94891 8.32902 10.1397 8.46967 10.2803C8.61032 10.421 8.80109 10.5 9 10.5H9.253C9.29041 10.5 9.32734 10.5084 9.36106 10.5246C9.39479 10.5408 9.42445 10.5643 9.44787 10.5935C9.47128 10.6227 9.48785 10.6567 9.49636 10.6932C9.50486 10.7296 9.50508 10.7675 9.497 10.804L9.038 12.87C8.98108 13.1259 8.98237 13.3913 9.04179 13.6466C9.10121 13.902 9.21723 14.1407 9.38129 14.3452C9.54535 14.5496 9.75325 14.7146 9.98963 14.828C10.226 14.9413 10.4848 15.0001 10.747 15H11C11.1989 15 11.3897 14.921 11.5303 14.7803C11.671 14.6397 11.75 14.4489 11.75 14.25C11.75 14.0511 11.671 13.8603 11.5303 13.7197C11.3897 13.579 11.1989 13.5 11 13.5H10.747C10.7096 13.5 10.6727 13.4916 10.6389 13.4754C10.6052 13.4592 10.5755 13.4357 10.5521 13.4065C10.5287 13.3773 10.5121 13.3433 10.5036 13.3068C10.4951 13.2704 10.4949 13.2325 10.503 13.196L10.962 11.13C11.0189 10.8741 11.0176 10.6087 10.9582 10.3534C10.8988 10.098 10.7828 9.8593 10.6187 9.65483C10.4547 9.45036 10.2468 9.28536 10.0104 9.17201C9.77398 9.05867 9.51515 8.99989 9.253 9H9Z"
className="tw-fill-medusa-support-info dark:tw-fill-medusa-support-info-dark"
/>
</svg>
);
)
}
function TipIcon() {
return (
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0002 1.81238C8.6789 1.81208 7.39444 2.24761 6.34586 3.05146C5.29727 3.85532 4.54312 4.9826 4.20028 6.2586C3.85744 7.5346 3.94507 8.88806 4.44958 10.1092C4.95409 11.3303 5.84731 12.351 6.99079 13.0129C7.49005 13.3026 7.80226 13.7465 7.81609 14.1941C7.81991 14.314 7.86311 14.4293 7.93901 14.5221C8.01492 14.615 8.1193 14.6803 8.23602 14.7079C8.4922 14.7683 8.75274 14.8156 9.01766 14.8498C9.25273 14.8797 9.45432 14.6912 9.45432 14.4539V11.0617C9.22435 11.0364 8.99647 10.9948 8.77239 10.9373C8.70296 10.9194 8.63773 10.888 8.58042 10.8449C8.52311 10.8019 8.47485 10.7479 8.43839 10.6862C8.40193 10.6244 8.37798 10.5561 8.36792 10.4851C8.35786 10.4142 8.36189 10.3419 8.37976 10.2724C8.39763 10.203 8.429 10.1378 8.47209 10.0805C8.51517 10.0232 8.56912 9.9749 8.63085 9.93844C8.69259 9.90198 8.7609 9.87804 8.83189 9.86798C8.90288 9.85792 8.97515 9.86194 9.04458 9.87981C9.67139 10.0414 10.3289 10.0414 10.9557 9.87981C11.0259 9.8596 11.0993 9.85366 11.1718 9.86235C11.2443 9.87103 11.3143 9.89416 11.3776 9.93037C11.441 9.96658 11.4965 10.0151 11.5408 10.0731C11.585 10.1312 11.6172 10.1975 11.6354 10.2682C11.6536 10.3388 11.6575 10.4124 11.6468 10.4846C11.636 10.5568 11.6109 10.6261 11.5729 10.6885C11.5349 10.7508 11.4848 10.8048 11.4255 10.8474C11.3663 10.8901 11.2991 10.9204 11.2279 10.9365C11.0039 10.9944 10.776 11.0362 10.546 11.0617V14.4532C10.546 14.6912 10.7476 14.8797 10.9827 14.8498C11.2476 14.8156 11.5081 14.7683 11.7643 14.7079C11.881 14.6803 11.9854 14.615 12.0613 14.5221C12.1372 14.4293 12.1804 14.314 12.1842 14.1941C12.1988 13.7465 12.5103 13.3026 13.0095 13.0129C14.153 12.351 15.0462 11.3303 15.5507 10.1092C16.0552 8.88806 16.1429 7.5346 15.8 6.2586C15.4572 4.9826 14.703 3.85532 13.6545 3.05146C12.6059 2.24761 11.3214 1.81208 10.0002 1.81238Z"
fill="var(--ifm-note-tip-color)"/>
<path fillRule="evenodd" clipRule="evenodd"
d="M7.82589 15.7493C7.83925 15.6788 7.86637 15.6117 7.90568 15.5517C7.94499 15.4918 7.99573 15.4401 8.05501 15.3998C8.11428 15.3594 8.18092 15.3312 8.25112 15.3166C8.32132 15.302 8.39371 15.3014 8.46415 15.3148C9.47884 15.5073 10.5207 15.5073 11.5354 15.3148C11.6067 15.2991 11.6804 15.2978 11.7522 15.3111C11.824 15.3244 11.8923 15.352 11.9533 15.3922C12.0142 15.4324 12.0665 15.4844 12.107 15.5452C12.1474 15.6059 12.1753 15.6742 12.189 15.7459C12.2026 15.8176 12.2017 15.8914 12.1863 15.9627C12.171 16.0341 12.1414 16.1017 12.0995 16.1614C12.0576 16.2212 12.0041 16.2719 11.9422 16.3106C11.8803 16.3493 11.8112 16.3752 11.7392 16.3868C10.5898 16.6049 9.40971 16.6049 8.26037 16.3868C8.11825 16.3598 7.99266 16.2775 7.91119 16.1579C7.82973 16.0384 7.79904 15.8914 7.82589 15.7493ZM8.36517 17.5279C8.37262 17.4566 8.39404 17.3875 8.42821 17.3245C8.46238 17.2615 8.50863 17.2058 8.56432 17.1606C8.62001 17.1155 8.68404 17.0818 8.75277 17.0614C8.82149 17.041 8.89357 17.0343 8.96486 17.0418C9.65293 17.1137 10.3466 17.1137 11.0347 17.0418C11.1787 17.0267 11.3227 17.0695 11.4352 17.1607C11.5477 17.2518 11.6193 17.384 11.6344 17.5279C11.6494 17.6719 11.6067 17.816 11.5155 17.9285C11.4243 18.0409 11.2922 18.1126 11.1482 18.1276C10.3847 18.2076 9.61487 18.2076 8.85133 18.1276C8.78003 18.1202 8.7109 18.0988 8.64787 18.0646C8.58485 18.0304 8.52918 17.9842 8.48404 17.9285C8.43889 17.8728 8.40516 17.8088 8.38476 17.74C8.36437 17.6713 8.35771 17.5992 8.36517 17.5279Z"
fill="var(--ifm-note-tip-color)"/>
<svg
width={20}
height={20}
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="tw-inline-block tw-mr-[2px]"
>
<path
d="M10.0002 1.81238C8.6789 1.81208 7.39444 2.24761 6.34586 3.05146C5.29727 3.85532 4.54312 4.9826 4.20028 6.2586C3.85744 7.5346 3.94507 8.88806 4.44958 10.1092C4.95409 11.3303 5.84731 12.351 6.99079 13.0129C7.49005 13.3026 7.80226 13.7465 7.81609 14.1941C7.81991 14.314 7.86311 14.4293 7.93901 14.5221C8.01492 14.615 8.1193 14.6803 8.23602 14.7079C8.4922 14.7683 8.75274 14.8156 9.01766 14.8498C9.25273 14.8797 9.45432 14.6912 9.45432 14.4539V11.0617C9.22435 11.0364 8.99647 10.9948 8.77239 10.9373C8.70296 10.9194 8.63773 10.888 8.58042 10.8449C8.52311 10.8019 8.47485 10.7479 8.43839 10.6862C8.40193 10.6244 8.37798 10.5561 8.36792 10.4851C8.35786 10.4142 8.36189 10.3419 8.37976 10.2724C8.39763 10.203 8.429 10.1378 8.47209 10.0805C8.51517 10.0232 8.56912 9.9749 8.63085 9.93844C8.69259 9.90198 8.7609 9.87804 8.83189 9.86798C8.90288 9.85792 8.97515 9.86194 9.04458 9.87981C9.67139 10.0414 10.3289 10.0414 10.9557 9.87981C11.0259 9.8596 11.0993 9.85366 11.1718 9.86235C11.2443 9.87103 11.3143 9.89416 11.3776 9.93037C11.441 9.96658 11.4965 10.0151 11.5408 10.0731C11.585 10.1312 11.6172 10.1975 11.6354 10.2682C11.6536 10.3388 11.6575 10.4124 11.6468 10.4846C11.636 10.5568 11.6109 10.6261 11.5729 10.6885C11.5349 10.7508 11.4848 10.8048 11.4255 10.8474C11.3663 10.8901 11.2991 10.9204 11.2279 10.9365C11.0039 10.9944 10.776 11.0362 10.546 11.0617V14.4532C10.546 14.6912 10.7476 14.8797 10.9827 14.8498C11.2476 14.8156 11.5081 14.7683 11.7643 14.7079C11.881 14.6803 11.9854 14.615 12.0613 14.5221C12.1372 14.4293 12.1804 14.314 12.1842 14.1941C12.1988 13.7465 12.5103 13.3026 13.0095 13.0129C14.153 12.351 15.0462 11.3303 15.5507 10.1092C16.0552 8.88806 16.1429 7.5346 15.8 6.2586C15.4572 4.9826 14.703 3.85532 13.6545 3.05146C12.6059 2.24761 11.3214 1.81208 10.0002 1.81238Z"
className="tw-fill-medusa-support-warning dark:tw-fill-medusa-support-warning-dark"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M7.82589 15.7493C7.83925 15.6788 7.86637 15.6117 7.90568 15.5517C7.94499 15.4918 7.99573 15.4401 8.05501 15.3998C8.11428 15.3594 8.18092 15.3312 8.25112 15.3166C8.32132 15.302 8.39371 15.3014 8.46415 15.3148C9.47884 15.5073 10.5207 15.5073 11.5354 15.3148C11.6067 15.2991 11.6804 15.2978 11.7522 15.3111C11.824 15.3244 11.8923 15.352 11.9533 15.3922C12.0142 15.4324 12.0665 15.4844 12.107 15.5452C12.1474 15.6059 12.1753 15.6742 12.189 15.7459C12.2026 15.8176 12.2017 15.8914 12.1863 15.9627C12.171 16.0341 12.1414 16.1017 12.0995 16.1614C12.0576 16.2212 12.0041 16.2719 11.9422 16.3106C11.8803 16.3493 11.8112 16.3752 11.7392 16.3868C10.5898 16.6049 9.40971 16.6049 8.26037 16.3868C8.11825 16.3598 7.99266 16.2775 7.91119 16.1579C7.82973 16.0384 7.79904 15.8914 7.82589 15.7493ZM8.36517 17.5279C8.37262 17.4566 8.39404 17.3875 8.42821 17.3245C8.46238 17.2615 8.50863 17.2058 8.56432 17.1606C8.62001 17.1155 8.68404 17.0818 8.75277 17.0614C8.82149 17.041 8.89357 17.0343 8.96486 17.0418C9.65293 17.1137 10.3466 17.1137 11.0347 17.0418C11.1787 17.0267 11.3227 17.0695 11.4352 17.1607C11.5477 17.2518 11.6193 17.384 11.6344 17.5279C11.6494 17.6719 11.6067 17.816 11.5155 17.9285C11.4243 18.0409 11.2922 18.1126 11.1482 18.1276C10.3847 18.2076 9.61487 18.2076 8.85133 18.1276C8.78003 18.1202 8.7109 18.0988 8.64787 18.0646C8.58485 18.0304 8.52918 17.9842 8.48404 17.9285C8.43889 17.8728 8.40516 17.8088 8.38476 17.74C8.36437 17.6713 8.35771 17.5992 8.36517 17.5279Z"
className="tw-fill-medusa-support-warning dark:tw-fill-medusa-support-warning-dark"
/>
</svg>
);
)
}
function DangerIcon() {
return (
<svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd"
d="M18 10C18 12.1217 17.1571 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84285 14.1566 2 12.1217 2 10C2 7.87827 2.84285 5.84344 4.34315 4.34315C5.84344 2.84285 7.87827 2 10 2C12.1217 2 14.1566 2.84285 15.6569 4.34315C17.1571 5.84344 18 7.87827 18 10ZM10 5C10.1989 5 10.3897 5.07902 10.5303 5.21967C10.671 5.36032 10.75 5.55109 10.75 5.75V10.25C10.75 10.4489 10.671 10.6397 10.5303 10.7803C10.3897 10.921 10.1989 11 10 11C9.80109 11 9.61032 10.921 9.46967 10.7803C9.32902 10.6397 9.25 10.4489 9.25 10.25V5.75C9.25 5.55109 9.32902 5.36032 9.46967 5.21967C9.61032 5.07902 9.80109 5 10 5ZM10 15C10.2652 15 10.5196 14.8946 10.7071 14.7071C10.8946 14.5196 11 14.2652 11 14C11 13.7348 10.8946 13.4804 10.7071 13.2929C10.5196 13.1054 10.2652 13 10 13C9.73478 13 9.48043 13.1054 9.29289 13.2929C9.10536 13.4804 9 13.7348 9 14C9 14.2652 9.10536 14.5196 9.29289 14.7071C9.48043 14.8946 9.73478 15 10 15Z"
fill="var(--ifm-note-warning-color)"/>
<svg
width={20}
height={20}
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="tw-inline-block tw-mr-[2px]"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M18 10C18 12.1217 17.1571 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84285 14.1566 2 12.1217 2 10C2 7.87827 2.84285 5.84344 4.34315 4.34315C5.84344 2.84285 7.87827 2 10 2C12.1217 2 14.1566 2.84285 15.6569 4.34315C17.1571 5.84344 18 7.87827 18 10ZM10 5C10.1989 5 10.3897 5.07902 10.5303 5.21967C10.671 5.36032 10.75 5.55109 10.75 5.75V10.25C10.75 10.4489 10.671 10.6397 10.5303 10.7803C10.3897 10.921 10.1989 11 10 11C9.80109 11 9.61032 10.921 9.46967 10.7803C9.32902 10.6397 9.25 10.4489 9.25 10.25V5.75C9.25 5.55109 9.32902 5.36032 9.46967 5.21967C9.61032 5.07902 9.80109 5 10 5ZM10 15C10.2652 15 10.5196 14.8946 10.7071 14.7071C10.8946 14.5196 11 14.2652 11 14C11 13.7348 10.8946 13.4804 10.7071 13.2929C10.5196 13.1054 10.2652 13 10 13C9.73478 13 9.48043 13.1054 9.29289 13.2929C9.10536 13.4804 9 13.7348 9 14C9 14.2652 9.10536 14.5196 9.29289 14.7071C9.48043 14.8946 9.73478 15 10 15Z"
className="tw-fill-medusa-support-error dark:tw-fill-medusa-support-error-dark"
/>
</svg>
);
)
}
function InfoIcon() {
return NoteIcon();
return NoteIcon()
}
function CautionIcon() {
return DangerIcon();
return DangerIcon()
}
type AdmonitionConfig = {
iconComponent: React.ComponentType
infimaClassName: string
label: ReactNode
}
// eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
const AdmonitionConfigs = {
const AdmonitionConfigs: Record<Props["type"], AdmonitionConfig> = {
note: {
infimaClassName: 'secondary',
infimaClassName: "secondary",
iconComponent: NoteIcon,
label: (
<Translate
id="theme.admonition.note"
description="The default label used for the Note admonition (:::note)">
description="The default label used for the Note admonition (:::note)"
>
note
</Translate>
),
},
tip: {
infimaClassName: 'success',
infimaClassName: "success",
iconComponent: TipIcon,
label: (
<Translate
id="theme.admonition.tip"
description="The default label used for the Tip admonition (:::tip)">
description="The default label used for the Tip admonition (:::tip)"
>
tip
</Translate>
),
},
danger: {
infimaClassName: 'danger',
infimaClassName: "danger",
iconComponent: DangerIcon,
label: (
<Translate
id="theme.admonition.danger"
description="The default label used for the Danger admonition (:::danger)">
description="The default label used for the Danger admonition (:::danger)"
>
danger
</Translate>
),
},
info: {
infimaClassName: 'info',
infimaClassName: "info",
iconComponent: InfoIcon,
label: (
<Translate
id="theme.admonition.info"
description="The default label used for the Info admonition (:::info)">
description="The default label used for the Info admonition (:::info)"
>
info
</Translate>
),
},
caution: {
infimaClassName: 'warning',
infimaClassName: "warning",
iconComponent: CautionIcon,
label: (
<Translate
id="theme.admonition.caution"
description="The default label used for the Caution admonition (:::caution)">
description="The default label used for the Caution admonition (:::caution)"
>
caution
</Translate>
),
},
};
}
// Legacy aliases, undocumented but kept for retro-compatibility
const aliases = {
secondary: 'note',
important: 'info',
success: 'tip',
warning: 'danger',
};
function getAdmonitionConfig(unsafeType) {
const type = aliases[unsafeType] ?? unsafeType;
const config = AdmonitionConfigs[type];
secondary: "note",
important: "info",
success: "tip",
warning: "danger",
} as const
function getAdmonitionConfig(unsafeType: string): AdmonitionConfig {
const type =
(aliases as { [key: string]: Props["type"] })[unsafeType] ?? unsafeType
const config = (AdmonitionConfigs as { [key: string]: AdmonitionConfig })[
type
]
if (config) {
return config;
return config
}
console.warn(
`No admonition config found for admonition type "${type}". Using Info as fallback.`,
);
return AdmonitionConfigs.info;
`No admonition config found for admonition type "${type}". Using Info as fallback.`
)
return AdmonitionConfigs.info
}
// Workaround because it's difficult in MDX v1 to provide a MDX title as props
// See https://github.com/facebook/docusaurus/pull/7152#issuecomment-1145779682
function extractMDXAdmonitionTitle(children) {
const items = React.Children.toArray(children);
function extractMDXAdmonitionTitle(children: ReactNode): {
mdxAdmonitionTitle: ReactNode | undefined
rest: ReactNode
} {
const items = React.Children.toArray(children)
const mdxAdmonitionTitle = items.find(
(item) =>
React.isValidElement(item) &&
item.props?.mdxType === 'mdxAdmonitionTitle',
);
const rest = <>{items.filter((item) => item !== mdxAdmonitionTitle)}</>;
(item.props as { mdxType: string } | null)?.mdxType ===
"mdxAdmonitionTitle"
)
const rest = <>{items.filter((item) => item !== mdxAdmonitionTitle)}</>
return {
mdxAdmonitionTitle,
rest,
};
}
}
function processAdmonitionProps(props) {
const {mdxAdmonitionTitle, rest} = extractMDXAdmonitionTitle(props.children);
function processAdmonitionProps(props: Props): Props {
const { mdxAdmonitionTitle, rest } = extractMDXAdmonitionTitle(props.children)
return {
...props,
title: props.title ?? mdxAdmonitionTitle,
children: rest,
};
}
}
export default function Admonition(props) {
const {children, type, title, icon: iconProp} = processAdmonitionProps(props);
const typeConfig = getAdmonitionConfig(type);
const titleLabel = title ?? typeConfig.label;
const {iconComponent: IconComponent} = typeConfig;
const icon = iconProp ?? <IconComponent />;
export default function Admonition(props: Props): JSX.Element {
const { children, type, icon: iconProp } = processAdmonitionProps(props)
const typeConfig = getAdmonitionConfig(type)
const { iconComponent: IconComponent } = typeConfig
const icon = iconProp ?? <IconComponent />
return (
<div
className={clsx(
ThemeClassNames.common.admonition,
ThemeClassNames.common.admonitionType(props.type),
'alert',
`alert--${typeConfig.infimaClassName}`,
styles.admonition,
)}>
<div className={
clsx(
styles.admonitionContentContainer
)
}>
<span className={styles.admonitionIcon}>{icon}</span>
<div className={styles.admonitionContent}>{children}</div>
"tw-p-1 tw-border tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark tw-rounded",
"tw-bg-medusa-bg-subtle dark:tw-bg-medusa-bg-base-dark tw-shadow-none",
"[&_a]:tw-no-underline [&_a]:tw-text-medusa-text-base dark:[&_a]:tw-text-medusa-text-base-dark hover:[&_a]:tw-text-medusa-text-subtle dark:hover:[&_a]:tw-text-medusa-text-subtle-dark",
"tw-mb-2 alert"
)}
>
<div className={clsx("tw-flex")}>
<span className={clsx("tw-inline-block tw-h-1.5 tw-w-1.5 tw-mr-1")}>
{icon}
</span>
<div
className={clsx(
"tw-text-medusa-text-subtle dark:tw-text-medusa-text-subtle-dark",
"tw-text-body-regular tw-flex-1 [&>*:last-child]:tw-mb-0",
"[&>p>code]:tw-px-0.5 [&>p>code]:tw-text-[14px]"
)}
>
{children}
</div>
</div>
</div>
);
)
}
www/docs/src/theme/Admonition/styles.module.css
-40
View File
@@ -1,40 +0,0 @@
.admonition {
margin-bottom: var(--ifm-base-margin-vertical);
}
.admonitionIcon {
display: inline-block;
}
.admonitionIcon svg,
.admonitionIcon img {
display: inline-block;
margin-top: 2px;
}
.admonitionIcon {
height: 24px;
width: 24px;
margin-right: var(--ifm-base-spacing);
}
.admonitionIcon img {
max-height: 100%;
}
.admonitionContent {
color: var(--ifm-note-text-color);
font-size: var(--medusa-body-regular-size) !important;
line-height: var(--medusa-body-regular-line-height) !important;
font-weight: var(--medusa-body-regular-font-weight) !important;
flex: 1;
width: calc(100% - 40px);
}
.admonitionContent > :last-child {
margin-bottom: 0;
}
.admonitionContentContainer {
display: flex;
}
www/docs/src/theme/AnnouncementBar/CloseButton/index.js
-20
View File
@@ -1,20 +0,0 @@
import React from 'react';
import clsx from 'clsx';
import {translate} from '@docusaurus/Translate';
import IconClose from '@theme/Icon/Close';
import styles from './styles.module.css';
export default function AnnouncementBarCloseButton(props) {
return (
<button
type="button"
aria-label={translate({
id: 'theme.AnnouncementBar.closeButtonAriaLabel',
message: 'Close',
description: 'The ARIA label for close button of announcement bar',
})}
{...props}
className={clsx('clean-btn close', styles.closeButton, props.className)}>
<IconClose width={20} height={20} strokeWidth={1.5} />
</button>
);
}
www/docs/src/theme/AnnouncementBar/CloseButton/index.tsx
+33
View File
@@ -0,0 +1,33 @@
import React from "react"
import clsx from "clsx"
import { translate } from "@docusaurus/Translate"
import IconClose from "../../Icon/Close"
import type { Props } from "@theme/AnnouncementBar/CloseButton"
export default function AnnouncementBarCloseButton(
props: Props
): JSX.Element | null {
return (
<button
type="button"
aria-label={translate({
id: "theme.AnnouncementBar.closeButtonAriaLabel",
message: "Close",
description: "The ARIA label for close button of announcement bar",
})}
{...props}
className={clsx(
"tw-p-0 tw-leading-[0] tw-self-start tw-opacity-100 hover:tw-opacity-100",
"tw-bg-transparent tw-border-0 tw-cursor-pointer",
props.className
)}
>
<IconClose
width={20}
height={20}
strokeWidth={1.5}
iconColorClassName="tw-stroke-medusa-icon-placeholder dark:tw-stroke-medusa-icon-placeholder-dark"
/>
</button>
)
}
www/docs/src/theme/AnnouncementBar/CloseButton/styles.module.css
-12
View File
@@ -1,12 +0,0 @@
.closeButton {
--ifm-icon-color: var(--ifm-announcement-bar-close-icon-color);
padding: 0;
line-height: 0;
align-self: flex-start;
}
.closeButton,
.closeButton:hover {
opacity: 1 !important;
}
www/docs/src/theme/AnnouncementBar/Content/index.js
-21
View File
@@ -1,21 +0,0 @@
import React from 'react';
import clsx from 'clsx';
import {useThemeConfig} from '@docusaurus/theme-common';
import styles from './styles.module.css';
export default function AnnouncementBarContent(props) {
const {announcementBar} = useThemeConfig();
const {content} = announcementBar;
return (
<div
className={clsx(styles.contentWrapper, props.className)}>
<div
{...props}
className={clsx(styles.contentTitle)}
// Developer provided the HTML, so assume it's safe.
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{__html: content}}
/>
<span className={styles.moreText}>Read more</span>
</div>
);
}
www/docs/src/theme/AnnouncementBar/Content/index.tsx
+31
View File
@@ -0,0 +1,31 @@
import React from "react"
import clsx from "clsx"
import { useThemeConfig } from "@docusaurus/theme-common"
import type { Props } from "@theme/AnnouncementBar/Content"
export default function AnnouncementBarContent(
props: Props
): JSX.Element | null {
const { announcementBar } = useThemeConfig()
const { content } = announcementBar!
return (
<div
className={clsx(
"tw-text-medusa-text-subtle dark:tw-text-medusa-text-subtle-dark",
"tw-text-label-x-small-plus",
props.className
)}
>
<div
{...props}
className={clsx(
"tw-text-medusa-text-base dark:tw-text-medusa-text-base-dark"
)}
// Developer provided the HTML, so assume it's safe.
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{ __html: content }}
/>
<span>Read more</span>
</div>
)
}
www/docs/src/theme/AnnouncementBar/Content/styles.module.css
-10
View File
@@ -1,10 +0,0 @@
.contentWrapper {
color: var(--ifm-announcement-bar-text-color);
font-size: var(--medusa-label-x-small-plus-size);
line-height: var(--medusa-label-x-small-plus-line-height);
font-weight: var(--medusa-label-x-small-plus-font-weight);
}
.contentTitle {
color: var(--ifm-announcement-bar-title-color);
}
www/docs/src/theme/AnnouncementBar/index.js
-37
View File
@@ -1,37 +0,0 @@
import React from 'react';
import {useThemeConfig} from '@docusaurus/theme-common';
import {useAnnouncementBar} from '@docusaurus/theme-common/internal';
import AnnouncementBarCloseButton from '@theme/AnnouncementBar/CloseButton';
import AnnouncementBarContent from '@theme/AnnouncementBar/Content';
import styles from './styles.module.css';
import IconBell from '../Icon/Bell';
import Bordered from '../../components/Bordered';
export default function AnnouncementBar() {
const {announcementBar} = useThemeConfig();
const {isActive, close} = useAnnouncementBar();
if (!isActive) {
return null;
}
const {backgroundColor, textColor, isCloseable, id} = announcementBar;
return (
<div
className={styles.announcementBar}
style={{backgroundColor, color: textColor}}>
<Bordered>
<div
className={styles.announcementBarIconWrapper}>
<IconBell />
</div>
</Bordered>
<AnnouncementBarContent className={styles.announcementBarContent} />
{isCloseable && (
<AnnouncementBarCloseButton
onClick={close}
className={styles.announcementBarClose}
/>
)}
<a href={id} className={styles.announcementBarLink} />
</div>
);
}
www/docs/src/theme/AnnouncementBar/index.tsx
+53
View File
@@ -0,0 +1,53 @@
import React from "react"
import { useThemeConfig } from "@docusaurus/theme-common"
import { useAnnouncementBar } from "@docusaurus/theme-common/internal"
import AnnouncementBarCloseButton from "@theme/AnnouncementBar/CloseButton"
import AnnouncementBarContent from "@theme/AnnouncementBar/Content"
import Bordered from "@site/src/components/Bordered"
import IconBell from "@site/src/theme/Icon/Bell/index"
import clsx from "clsx"
export default function AnnouncementBar(): JSX.Element | null {
const { announcementBar } = useThemeConfig()
const { isActive, close } = useAnnouncementBar()
if (!isActive) {
return null
}
const { isCloseable, id } = announcementBar!
return (
<div
className={clsx(
"tw-relative tw-flex tw-items-center tw-h-auto tw-bg-medusa-bg-subtle dark:tw-bg-medusa-bg-base-dark tw-p-[12px]",
"tw-border tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark tw-rounded tw-mx-1.5 tw-mb-1",
"tw-transition-all tw-duration-200 tw-ease-ease",
"hover:tw-bg-medusa-bg-subtle-hover dark:hover:tw-bg-medusa-bg-base-hover-dark",
"print:tw-hidden"
)}
>
<Bordered wrapperClassName="tw-mr-[12px]">
<div
className={clsx(
"tw-p-[6px] tw-flex tw-justify-center tw-items-center",
"tw-bg-announcement-bg tw-bg-cover tw-rounded-sm"
)}
>
<IconBell iconColorClassName="tw-fill-medusa-icon-on-color dark:tw-fill-medusa-icon-on-color-dark" />
</div>
</Bordered>
<AnnouncementBarContent className={clsx("tw-flex-1")} />
{isCloseable && (
<AnnouncementBarCloseButton
onClick={close}
className={clsx("tw-z-[101] tw-text-right lg:tw-basis-[50px]")}
/>
)}
<a
href={id}
className={clsx(
"tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-z-[100]"
)}
/>
</div>
)
}
www/docs/src/theme/AnnouncementBar/styles.module.css
-69
View File
@@ -1,69 +0,0 @@
.announcementBar {
--bordered-margin-right: 12px;
position: relative;
display: flex;
align-items: center;
height: var(--docusaurus-announcement-bar-height);
background-color: var(--ifm-announcement-bar-bg);
padding: 12px;
border: 1px solid var(--ifm-announcement-bar-border-color);
border-radius: var(--ifm-global-radius);
margin: 0 var(--doc-sidebar-padding) calc(var(--ifm-base-margin-vertical) / 2) var(--doc-sidebar-padding);
transition: all var(--ifm-transition-fast) ease;
}
.announcementBar:hover {
background-color: var(--ifm-announcement-bar-hover-bg);
}
html[data-announcement-bar-initially-dismissed='true'] .announcementBar {
display: none;
}
.announcementBarContent {
flex: 1;
}
.announcementBarClose {
z-index: 101;
text-align: right;
}
.announcementBarClose svg g {
stroke-width: 1.5px !important;
}
.announcementBarIconWrapper {
--ifm-icon-color: var(--ifm-announcement-bar-icon-color);
padding: 6px;
display: flex;
justify-content: center;
align-items: center;
background: var(--ifm-announcement-bar-icon-bg);
background-size: cover;
border-radius: calc(var(--ifm-global-radius) / 2);
}
.announcementBarLink {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
@media print {
.announcementBar {
display: none;
}
}
@media (min-width: 997px) {
.announcementBarPlaceholder,
.announcementBarClose {
flex-basis: 50px;
}
}
www/docs/src/theme/CodeBlock/Content/String.js
-111
View File
@@ -1,111 +0,0 @@
import Highlight, {defaultProps} from 'prism-react-renderer';
import React from 'react';
import {
containsLineNumbers,
parseCodeBlockTitle,
parseLanguage,
parseLines,
useCodeWordWrap,
} from '@docusaurus/theme-common/internal';
import {usePrismTheme, useThemeConfig} from '@docusaurus/theme-common';
import Container from '@theme/CodeBlock/Container';
import CopyButton from '../../CopyButton';
import Line from '@theme/CodeBlock/Line';
import Tooltip from '../../Tooltip';
import clsx from 'clsx';
import styles from './styles.module.css';
import useIsBrowser from '@docusaurus/useIsBrowser';
import IconAlert from '../../Icon/Alert';
import IconCopy from '../../Icon/Copy';
export default function CodeBlockString({
children,
className: blockClassName = '',
metastring,
title: titleProp,
showLineNumbers: showLineNumbersProp = true,
language: languageProp,
noReport = false,
noCopy = false
}) {
const {
prism: {defaultLanguage, magicComments},
reportCodeLinkPrefix
} = useThemeConfig();
const language =
languageProp ?? parseLanguage(blockClassName) ?? defaultLanguage;
const prismTheme = usePrismTheme();
const wordWrap = useCodeWordWrap();
const isBrowser = useIsBrowser();
// We still parse the metastring in case we want to support more syntax in the
// future. Note that MDX doesn't strip quotes when parsing metastring:
// "title=\"xyz\"" => title: "\"xyz\""
const title = parseCodeBlockTitle(metastring) || titleProp;
const {lineClassNames, code} = parseLines(children, {
metastring,
language,
magicComments,
});
const showLineNumbers =
showLineNumbersProp ?? containsLineNumbers(metastring);
return (
<Container
as="div"
className={clsx(
blockClassName,
language &&
!blockClassName.includes(`language-${language}`) &&
`language-${language}`,
)}>
{title && <div className={styles.codeBlockTitle}>{title}</div>}
<div className={styles.codeBlockContent}>
<Highlight
{...defaultProps}
theme={prismTheme}
code={code}
language={language ?? 'text'}>
{({className, tokens, getLineProps, getTokenProps}) => (
<pre
/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
tabIndex={0}
ref={wordWrap.codeBlockRef}
className={clsx(className, styles.codeBlock, 'thin-scrollbar', tokens.length === 1 ? styles.thinCodeWrapper : '')}>
<code
className={clsx(
styles.codeBlockLines,
showLineNumbers && tokens.length > 1 && styles.codeBlockLinesWithNumbering,
tokens.length === 1 ? 'thin-code' : ''
)}>
{tokens.map((line, i) => (
<Line
key={i}
line={line}
getLineProps={getLineProps}
getTokenProps={getTokenProps}
classNames={lineClassNames[i]}
showLineNumbers={showLineNumbers && tokens.length > 1}
/>
))}
</code>
</pre>
)}
</Highlight>
<div className={styles.buttonGroup}>
{!noReport && (
<Tooltip text="Report Incorrect Code">
<a href={`${reportCodeLinkPrefix}&title=${encodeURIComponent(`Docs(Code Issue): Code Issue in ${isBrowser ? location.pathname : ''}`)}`} target="_blank" className='report-code code-action img-url'>
<IconAlert />
</a>
</Tooltip>
)}
{!noCopy && (
<CopyButton buttonClassName='code-action code-action-copy' text={code}>
<IconCopy />
</CopyButton>
)}
</div>
</div>
</Container>
);
}
www/docs/src/theme/CodeBlock/Content/String.tsx
+148
View File
@@ -0,0 +1,148 @@
import React from "react"
import clsx from "clsx"
import { useThemeConfig, usePrismTheme } from "@docusaurus/theme-common"
import {
parseCodeBlockTitle,
parseLanguage,
parseLines,
containsLineNumbers,
useCodeWordWrap,
} from "@docusaurus/theme-common/internal"
import Highlight, { defaultProps, type Language } from "prism-react-renderer"
import Line from "@theme/CodeBlock/Line"
import Container from "@theme/CodeBlock/Container"
import type { Props } from "@theme/CodeBlock/Content/String"
import CopyButton from "@site/src/components//CopyButton"
import useIsBrowser from "@docusaurus/useIsBrowser"
import { ThemeConfig } from "@medusajs/docs"
import Tooltip from "@site/src/components/Tooltip"
import IconAlert from "@site/src/theme/Icon/Alert"
import IconCopy from "@site/src/theme/Icon/Copy"
export default function CodeBlockString({
children,
className: blockClassName = "",
metastring,
title: titleProp,
showLineNumbers: showLineNumbersProp,
language: languageProp,
noReport = false,
noCopy = false,
}: Props): JSX.Element {
const {
prism: { defaultLanguage, magicComments },
reportCodeLinkPrefix = "",
} = useThemeConfig() as ThemeConfig
const language =
languageProp ?? parseLanguage(blockClassName) ?? defaultLanguage
const prismTheme = usePrismTheme()
const wordWrap = useCodeWordWrap()
const isBrowser = useIsBrowser()
// We still parse the metastring in case we want to support more syntax in the
// future. Note that MDX doesn't strip quotes when parsing metastring:
// "title=\"xyz\"" => title: "\"xyz\""
const title = parseCodeBlockTitle(metastring) || titleProp
const { lineClassNames, code } = parseLines(children, {
metastring,
language,
magicComments,
})
const showLineNumbers = showLineNumbersProp ?? containsLineNumbers(metastring)
return (
<Container
as="div"
className={clsx(
blockClassName,
language &&
!blockClassName.includes(`language-${language}`) &&
`language-${language}`
)}
>
{title && <div>{title}</div>}
<div className={clsx("tw-relative tw-rounded-[inherit]")}>
<Highlight
{...defaultProps}
theme={prismTheme}
code={code}
language={(language ?? "text") as Language}
>
{({ className, tokens, getLineProps, getTokenProps }) => (
<>
<pre
tabIndex={0}
ref={wordWrap.codeBlockRef}
className={clsx("tw-m-0 tw-p-0", "thin-scrollbar", className)}
>
<code
className={clsx(
"tw-font-[inherit] tw-float-left tw-min-w-full print:tw-whitespace-pre-wrap",
showLineNumbers &&
tokens.length > 1 &&
"tw-table tw-p-1 code-block-numbering",
title && "tw-p-1",
!title && tokens.length > 1 && "tw-p-1",
!title &&
tokens.length === 1 &&
"tw-py-0.5 tw-pr-0.5 tw-pl-1"
)}
>
{tokens.map((line, i) => (
<Line
key={i}
line={line}
getLineProps={getLineProps}
getTokenProps={getTokenProps}
classNames={lineClassNames[i]}
showLineNumbers={showLineNumbers && tokens.length > 1}
/>
))}
</code>
</pre>
<div
className={clsx(
"tw-flex tw-gap-x-[2px] tw-absolute tw-right-1",
tokens.length === 1 && "tw-top-[4px]",
tokens.length > 1 && "tw-top-1"
)}
>
{!noReport && (
<Tooltip text="Report Incorrect Code">
<a
href={`${reportCodeLinkPrefix}&title=${encodeURIComponent(
`Docs(Code Issue): Code Issue in ${
isBrowser ? location.pathname : ""
}`
)}`}
target="_blank"
className={clsx(
"tw-bg-transparent tw-border-none tw-p-[4px] tw-cursor-pointer tw-rounded",
"hover:tw-bg-medusa-code-tab-hover [&:not(:first-child)]:tw-ml-0.5",
"tw-inline-flex tw-justify-center tw-items-center tw-invisible xs:tw-visible"
)}
rel="noreferrer"
>
<IconAlert iconColorClassName="tw-fill-medusa-code-block-action" />
</a>
</Tooltip>
)}
{!noCopy && (
<CopyButton
buttonClassName={clsx(
"tw-flex tw-bg-transparent tw-border-none tw-p-[4px] tw-cursor-pointer tw-rounded"
)}
text={code}
>
<IconCopy iconColorClassName="tw-fill-medusa-code-block-action" />
</CopyButton>
)}
</div>
</>
)}
</Highlight>
</div>
</Container>
)
}
www/docs/src/theme/CodeBlock/Content/styles.module.css
-55
View File
@@ -1,55 +0,0 @@
.codeBlockContent {
position: relative;
/* rtl:ignore */
direction: ltr;
border-radius: inherit;
}
.codeBlock {
--ifm-pre-background: var(--prism-background-color);
margin: 0;
padding: 0;
}
.codeBlockStandalone {
padding: 0;
}
.codeBlockLines {
font: inherit;
/* rtl:ignore */
float: left;
min-width: 100%;
}
.codeBlockLinesWithNumbering {
display: table;
padding: var(--ifm-pre-padding) 0;
}
@media print {
.codeBlockLines {
white-space: pre-wrap;
}
}
.buttonGroup {
display: flex;
column-gap: 2px;
position: absolute;
right: var(--ifm-pre-padding);
top: var(--ifm-pre-padding);
}
.buttonGroup button:focus-visible,
.buttonGroup button:hover {
opacity: 1 !important;
}
.thinCodeWrapper + .buttonGroup {
top: calc(var(--ifm-pre-padding) / 4 - 2px) !important;
}
:global(.theme-code-block:hover) .buttonGroup button {
opacity: 0.4;
}
www/docs/src/theme/CodeBlock/index.js
-50
View File
@@ -1,50 +0,0 @@
import React, {isValidElement} from 'react';
import ElementContent from '@theme/CodeBlock/Content/Element';
import StringContent from '@theme/CodeBlock/Content/String';
import useIsBrowser from '@docusaurus/useIsBrowser';
/**
* Best attempt to make the children a plain string so it is copyable. If there
* are react elements, we will not be able to copy the content, and it will
* return `children` as-is; otherwise, it concatenates the string children
* together.
*/
function maybeStringifyChildren(children) {
if (React.Children.toArray(children).some((el) => isValidElement(el))) {
return children;
}
// The children is now guaranteed to be one/more plain strings
return Array.isArray(children) ? children.join('') : children;
}
export default function CodeBlock({children: rawChildren, noReport = false, noCopy = false, ...props}) {
// The Prism theme on SSR is always the default theme but the site theme can
// be in a different mode. React hydration doesn't update DOM styles that come
// from SSR. Hence force a re-render after mounting to apply the current
// relevant styles.
const isBrowser = useIsBrowser();
const children = maybeStringifyChildren(rawChildren);
const CodeBlockComp =
typeof children === 'string' ? StringContent : ElementContent;
const title = props.title;
delete props.title;
return (
<div className='code-wrapper'>
{title && (
<div className='code-header'>
{title}
</div>
)}
<CodeBlockComp
key={String(isBrowser)}
noReport={noReport}
noCopy={noCopy}
{...props}
className={`${props.className} ${title ? '' : 'no-header-block'}`}>
{children}
</CodeBlockComp>
</div>
);
}
www/docs/src/theme/CodeBlock/index.tsx
+59
View File
@@ -0,0 +1,59 @@
import React, { isValidElement, type ReactNode } from "react"
import useIsBrowser from "@docusaurus/useIsBrowser"
import ElementContent from "@theme/CodeBlock/Content/Element"
import StringContent from "@theme/CodeBlock/Content/String"
import type { Props } from "@theme/CodeBlock"
import clsx from "clsx"
/**
* Best attempt to make the children a plain string so it is copyable. If there
* are react elements, we will not be able to copy the content, and it will
* return `children` as-is; otherwise, it concatenates the string children
* together.
*/
function maybeStringifyChildren(children: ReactNode): ReactNode {
if (React.Children.toArray(children).some((el) => isValidElement(el))) {
return children
}
// The children is now guaranteed to be one/more plain strings
return Array.isArray(children) ? children.join("") : (children as string)
}
export default function CodeBlock({
children: rawChildren,
noReport = false,
noCopy = false,
...props
}: Props): JSX.Element {
// The Prism theme on SSR is always the default theme but the site theme can
// be in a different mode. React hydration doesn't update DOM styles that come
// from SSR. Hence force a re-render after mounting to apply the current
// relevant styles.
const isBrowser = useIsBrowser()
const children = maybeStringifyChildren(rawChildren)
const CodeBlockComp =
typeof children === "string" ? StringContent : ElementContent
const title = props.title
delete props.title
return (
<div className="code-wrapper">
{title && <div className="code-header">{title}</div>}
<CodeBlockComp
key={String(isBrowser)}
noReport={noReport}
noCopy={noCopy}
{...props}
className={clsx(
!title && "tw-rounded",
title && "!tw-rounded-t-none !tw-rounded-b",
props.className
)}
showLineNumbers={true}
>
{children as string}
</CodeBlockComp>
</div>
)
}
www/docs/src/theme/CopyButton/index.js
-33
View File
@@ -1,33 +0,0 @@
import React, { useCallback, useEffect, useRef, useState } from 'react';
import Tooltip from '../Tooltip';
import copy from 'copy-text-to-clipboard';
export default function CopyButton ({ children, buttonClassName, text, tooltipClassName }) {
const [isCopied, setIsCopied] = useState(false);
const copyTimeout = useRef(undefined);
const handleCopy = useCallback(() => {
copy(text);
setIsCopied(true);
copyTimeout.current = window.setTimeout(() => {
setIsCopied(false);
}, 1000);
}, [text]);
useEffect(() => () => window.clearTimeout(copyTimeout.current), []);
return (
<Tooltip
text={isCopied ? `Copied!` : `Copy to Clipboard`}
tooltipClassName={tooltipClassName}
>
<span
className={`copy-action ${buttonClassName}`}
onClick={handleCopy}
>
{children}
</span>
</Tooltip>
)
}
www/docs/src/theme/DocCard/index.js
-146
View File
@@ -1,146 +0,0 @@
import {
findFirstCategoryLink,
useDocById,
} from '@docusaurus/theme-common/internal';
import Link from '@docusaurus/Link';
import React from 'react';
import clsx from 'clsx';
import isInternalUrl from '@docusaurus/isInternalUrl';
import styles from './styles.module.css';
import {translate} from '@docusaurus/Translate';
import BorderedIcon from '../../components/BorderedIcon';
import Badge from '../../components/Badge';
import Icons from '../Icon';
function CardContainer({href, children, className}) {
return (
<article className={`card-wrapper margin-bottom--lg`}>
<Link
href={href}
className={clsx('card', styles.cardContainer, className)}>
{children}
</Link>
</article>
);
}
function CardLayout({href, icon, title, description, html, containerClassName, isSoon = false, badge}) {
return (
<CardContainer href={href} className={clsx(containerClassName, isSoon && styles.cardSoon)}>
<div className={clsx(styles.cardIconContainer)}>
{icon}
{isSoon && <Badge variant={'purple'}>Guide coming soon</Badge>}
{badge && <Badge {...badge} />}
</div>
<div className={clsx(styles.contentContainer)}>
<span className={clsx(styles.cardTitle)} title={title}>
{title}
</span>
{description && (
<p
className={clsx(styles.cardDescription)}
title={description}>
{description}
</p>
)}
{html && (
<p
className={clsx(styles.cardDescription)}
dangerouslySetInnerHTML={{
__html: html
}}
></p>
)}
</div>
</CardContainer>
);
}
function getCardIcon (item) {
if (item.customProps?.themedImage) {
return (
<BorderedIcon icon={{
light: item.customProps.themedImage.light,
dark: item.customProps.themedImage.dark
}} wrapperClassName='card-icon-wrapper' iconClassName={'card-icon'} />
)
} else if (item.customProps?.image) {
return (
<BorderedIcon icon={{
light: item.customProps.image
}} wrapperClassName='card-icon-wrapper' iconClassName={'card-icon'} />
);
} else if (item.customProps?.icon) {
return <BorderedIcon
IconComponent={item.customProps.icon}
wrapperClassName='card-icon-wrapper' iconClassName={'card-icon'} />;
} else if (item.customProps?.iconName && Icons.hasOwnProperty(item.customProps?.iconName)) {
return <BorderedIcon
IconComponent={Icons[item.customProps?.iconName]}
wrapperClassName='card-icon-wrapper' iconClassName={'card-icon'} />;
} else {
return (
<div className={clsx('card-icon-wrapper', 'no-zoom-img')}>
{isInternalUrl(item.href) ? '📄️' : '🔗'}
</div>
);
}
}
function CardCategory({item}) {
const href = findFirstCategoryLink(item);
const icon = getCardIcon(item);
// Unexpected: categories that don't have a link have been filtered upfront
if (!href) {
return null;
}
return (
<CardLayout
href={href}
icon={icon}
title={item.label}
description={translate(
{
message: item.customProps?.description || '{count} items',
id: 'theme.docs.DocCard.categoryDescription',
description:
'The default description for a category card in the generated index about how many items this category includes',
},
{count: item.items.length},
)}
containerClassName={item.customProps?.className}
isSoon={item.customProps?.isSoon}
badge={item.customProps?.badge}
/>
);
}
function CardLink({item}) {
const icon = getCardIcon(item);
const doc = useDocById(item.docId ?? undefined);
return (
<CardLayout
href={item.href}
icon={icon}
title={item.label}
description={item.customProps?.description || doc?.description}
html={item.customProps?.html}
containerClassName={item.customProps?.className}
isSoon={item.customProps?.isSoon}
badge={item.customProps?.badge}
/>
);
}
export default function DocCard({item}) {
switch (item.type) {
case 'link':
return <CardLink item={item} />;
case 'category':
return <CardCategory item={item} />;
default:
throw new Error(`unknown item type ${JSON.stringify(item)}`);
}
}
www/docs/src/theme/DocCard/index.tsx
+287
View File
@@ -0,0 +1,287 @@
import React, { type ReactNode } from "react"
import clsx from "clsx"
import Link from "@docusaurus/Link"
import {
findFirstCategoryLink,
useDocById,
} from "@docusaurus/theme-common/internal"
import isInternalUrl from "@docusaurus/isInternalUrl"
import { translate } from "@docusaurus/Translate"
import BorderedIcon from "@site/src/components/BorderedIcon"
import Badge, { BadgeProps } from "@site/src/components/Badge"
import Icons from "@site/src/theme/Icon"
import {
ModifiedPropSidebarItemCategory,
ModifiedPropSidebarItemLink,
ModifiedSidebarItem,
} from "@medusajs/docs"
type ModifiedProps = {
item: ModifiedSidebarItem
}
function CardContainer({
href,
children,
className,
}: {
href: string
children: ReactNode
className?: string
}): JSX.Element {
return (
<article className={`card-wrapper margin-bottom--lg`}>
<Link
href={href}
className={clsx(
"card",
"tw-bg-medusa-bg-subtle dark:tw-bg-medusa-bg-base-dark",
"tw-rounded tw-border tw-border-solid tw-border-medusa-bg-subtle-hover dark:tw-border-medusa-bg-base-hover-dark",
"tw-shadow-none tw-transition-all tw-duration-200 tw-ease-ease",
"tw-flex tw-p-1 tw-h-full",
className
)}
>
{children}
</Link>
</article>
)
}
function CardLayout({
href,
icon,
title,
description,
html,
containerClassName,
isSoon = false,
badge,
}: {
href: string
icon: ReactNode
title: string
description?: string
html?: string
containerClassName?: string
isSoon?: boolean
badge?: BadgeProps
}): JSX.Element {
const isHighlighted = containerClassName?.includes("card-highlighted")
return (
<CardContainer
href={href}
className={clsx(
containerClassName,
!isSoon &&
"hover:tw-bg-medusa-bg-subtle-hover dark:hover:tw-bg-medusa-bg-base-hover-dark",
isSoon && "tw-pointer-events-none",
isHighlighted &&
"md:before:tw-content-[''] md:before:tw-absolute md:before:tw-top-0 before:tw-right-0 md:before:tw-w-1/2 md:before:tw-h-full md:before:tw-bg-no-repeat md:before:tw-bg-cover md:before:tw-bg-card-highlighted dark:md:before:tw-bg-card-highlighted-dark"
)}
>
<div
className={clsx("tw-mb-1 tw-flex tw-justify-between tw-items-center")}
>
{icon}
{isSoon && <Badge variant={"purple"}>Guide coming soon</Badge>}
{badge && <Badge {...badge} />}
</div>
<div className={clsx("tw-w-[calc(100%-20px)] [&>*:last-child]:tw-mb-0")}>
<span
className={clsx(
"tw-text-label-regular-plus tw-text-medusa-text-base dark:tw-text-medusa-text-base-dark",
"tw-mb-0.5 tw-block",
"tw-transition-all tw-duration-200 tw-ease-ease",
isSoon &&
"group-hover:tw-text-medusa-text-disabled dark:group-hover:tw-text-medusa-text-disabled-dark"
)}
title={title}
>
{title}
</span>
{description && (
<p
className={clsx(
"tw-text-label-regular tw-text-medusa-text-subtle dark:tw-text-medusa-text-subtle-dark",
"tw-transition-all tw-duration-200 tw-ease-ease",
isSoon &&
"group-hover:tw-text-medusa-text-disabled dark:group-hover:tw-text-medusa-text-disabled-dark",
isHighlighted && "md:tw-w-1/2"
)}
title={description}
>
{description}
</p>
)}
{html && (
<p
className={clsx(
"tw-text-label-regular tw-text-medusa-text-subtle dark:tw-text-medusa-text-subtle-dark",
"tw-transition-all tw-duration-200 tw-ease-ease",
isSoon &&
"group-hover:tw-text-medusa-text-disabled dark:group-hover:tw-text-medusa-text-disabled-dark",
isHighlighted && "md:tw-w-1/2"
)}
dangerouslySetInnerHTML={{
__html: html,
}}
></p>
)}
</div>
</CardContainer>
)
}
function getCardIcon(item: ModifiedSidebarItem): JSX.Element {
if (item.customProps?.themedImage) {
return (
<BorderedIcon
icon={{
light: item.customProps.themedImage.light,
dark: item.customProps.themedImage.dark,
}}
wrapperClassName={
clsx()
// "card-icon-wrapper",
}
iconWrapperClassName={clsx(
item.customProps?.className?.includes("card-highlighted") &&
"tw-p-[6px]"
)}
iconClassName={clsx("tw-h-[20px] tw-w-[20px]")}
/>
)
} else if (item.customProps?.image) {
return (
<BorderedIcon
icon={{
light: item.customProps.image,
}}
wrapperClassName={
clsx()
// "card-icon-wrapper",
}
iconWrapperClassName={clsx(
item.customProps?.className?.includes("card-highlighted") &&
"tw-p-[6px]"
)}
iconClassName={clsx("tw-h-[20px] tw-w-[20px]")}
/>
)
} else if (item.customProps?.icon) {
return (
<BorderedIcon
IconComponent={item.customProps.icon}
wrapperClassName={
clsx()
// "card-icon-wrapper",
}
iconWrapperClassName={clsx(
item.customProps?.className?.includes("card-highlighted") &&
"tw-p-[6px]"
)}
iconClassName={clsx("tw-h-[20px] tw-w-[20px]")}
/>
)
} else if (
item.customProps?.iconName &&
Object.hasOwn(Icons, item.customProps?.iconName)
) {
return (
<BorderedIcon
IconComponent={Icons[item.customProps?.iconName]}
wrapperClassName={
clsx()
// "card-icon-wrapper",
}
iconWrapperClassName={clsx(
item.customProps?.className?.includes("card-highlighted") &&
"tw-p-[6px]"
)}
iconClassName={clsx("tw-h-[20px] tw-w-[20px]")}
/>
)
} else {
return (
<div
className={clsx(
// "card-icon-wrapper",
"no-zoom-img"
)}
>
{isInternalUrl(
"href" in item ? item.href : "value" in item ? item.value : "#"
)
? "📄️"
: "🔗"}
</div>
)
}
}
function CardCategory({
item,
}: {
item: ModifiedPropSidebarItemCategory
}): JSX.Element | null {
const href = findFirstCategoryLink(item)
const icon = getCardIcon(item)
// Unexpected: categories that don't have a link have been filtered upfront
if (!href) {
return null
}
return (
<CardLayout
href={href}
icon={icon}
title={item.label}
// eslint-disable-next-line @docusaurus/string-literal-i18n-messages
description={translate(
{
message: item.customProps?.description || "{count} items",
id: "theme.docs.DocCard.categoryDescription",
description:
"The default description for a category card in the generated index about how many items this category includes",
},
{ count: item.items.length }
)}
containerClassName={item.customProps?.className}
isSoon={item.customProps?.isSoon}
badge={item.customProps?.badge}
/>
)
}
function CardLink({
item,
}: {
item: ModifiedPropSidebarItemLink
}): JSX.Element {
const icon = getCardIcon(item)
const doc = useDocById(item.docId ?? undefined)
return (
<CardLayout
href={item.href}
icon={icon}
title={item.label}
description={item.customProps?.description || doc?.description}
html={item.customProps?.html}
containerClassName={item.customProps?.className}
isSoon={item.customProps?.isSoon}
badge={item.customProps?.badge}
/>
)
}
export default function DocCard({ item }: ModifiedProps): JSX.Element {
switch (item.type) {
case "link":
return <CardLink item={item} />
case "category":
return <CardCategory item={item} />
default:
throw new Error(`unknown item type ${JSON.stringify(item)}`)
}
}
www/docs/src/theme/DocCard/styles.module.css
-51
View File
@@ -1,51 +0,0 @@
.cardContainer {
box-shadow: none !important;
transition: all var(--ifm-transition-fast) ease;
display: flex;
padding: var(--ifm-base-spacing);
height: 100%;
}
.cardContainer *:last-child {
margin-bottom: 0;
}
.cardContainer:not(.cardSoon):hover {
background-color: var(--ifm-card-bg-hover);
}
.cardIconContainer {
margin-bottom: calc(var(--ifm-base-margin-vertical) / 2);
display: flex;
justify-content: space-between;
align-items: center;
}
.cardTitle {
font-size: var(--medusa-label-regular-plus-size);
line-height: var(--medusa-label-regular-plus-line-height);
font-weight: var(--medusa-label-regular-plus-font-weight);
color: var(--ifm-color-primary);
margin-bottom: calc(var(--ifm-base-margin-vertical) / 4);
display: block;
}
.cardDescription {
font-size: var(--medusa-label-regular-size);
line-height: var(--medusa-label-regular-line-height);
font-weight: var(--medusa-label-regular-font-weight);
color: var(--ifm-color-content);
}
.cardTitle,
.cardDescription {
transition: all var(--ifm-transition-fast) ease;
}
.contentContainer {
width: calc(100% - 20px);
}
.cardSoon {
pointer-events: none;
}
www/docs/src/theme/DocCardList/index.js
-25
View File
@@ -1,25 +0,0 @@
import React from 'react';
import clsx from 'clsx';
import {
useCurrentSidebarCategory,
filterDocCardListItems,
} from '@docusaurus/theme-common';
import DocCard from '@theme/DocCard';
function DocCardListForCurrentSidebarCategory({className}) {
const category = useCurrentSidebarCategory();
return <DocCardList items={category.items} className={className} />;
}
export default function DocCardList(props) {
const {items, className} = props;
if (!items) {
return <DocCardListForCurrentSidebarCategory {...props} />;
}
const filteredItems = filterDocCardListItems(items);
return (
<section className={clsx('cards-grid', `grid-${props.colSize || '4'}`, className)}>
{filteredItems.map((item, index) => (
<DocCard item={item} key={index} />
))}
</section>
);
}
www/docs/src/theme/DocCardList/index.tsx
+34
View File
@@ -0,0 +1,34 @@
import React from "react"
import clsx from "clsx"
import {
useCurrentSidebarCategory,
filterDocCardListItems,
} from "@docusaurus/theme-common"
import DocCard from "@theme/DocCard"
import type { Props } from "@theme/DocCardList"
function DocCardListForCurrentSidebarCategory({ className }: Props) {
const category = useCurrentSidebarCategory()
return <DocCardList items={category.items} className={className} />
}
type ModifiedProps = {
colSize?: string
} & Props
export default function DocCardList(props: ModifiedProps): JSX.Element {
const { items, className } = props
if (!items) {
return <DocCardListForCurrentSidebarCategory {...props} />
}
const filteredItems = filterDocCardListItems(items)
return (
<section
className={clsx("cards-grid", `grid-${props.colSize || "4"}`, className)}
>
{filteredItems.map((item, index) => (
<DocCard item={item} key={index} />
))}
</section>
)
}
www/docs/src/theme/DocItem/Footer/index.js
-21
View File
@@ -1,21 +0,0 @@
import React from 'react';
import Footer from '@theme-original/DocItem/Footer';
import Feedback from '../../../components/Feedback';
import { useDoc } from '@docusaurus/theme-common/internal';
import {useThemeConfig} from '@docusaurus/theme-common';
export default function FooterWrapper(props) {
const { metadata } = useDoc()
const { footerFeedback = { event: '' } } = useThemeConfig();
return (
<>
{!metadata.frontMatter?.hide_footer && (
<div className='docusaurus-mt-lg doc-footer'>
<Feedback {...footerFeedback} />
<Footer {...props} />
</div>
)}
</>
);
}
www/docs/src/theme/DocItem/Footer/index.tsx
+29
View File
@@ -0,0 +1,29 @@
import React from "react"
import Footer from "@theme-original/DocItem/Footer"
import type FooterType from "@theme/DocItem/Footer"
import type { WrapperProps } from "@docusaurus/types"
import Feedback from "@site/src/components/Feedback/index"
import { useDoc } from "@docusaurus/theme-common/internal"
import { useThemeConfig } from "@docusaurus/theme-common"
import { ThemeConfig } from "@medusajs/docs"
type Props = WrapperProps<typeof FooterType>
export default function FooterWrapper(props: Props): JSX.Element {
const { metadata } = useDoc()
const { footerFeedback = { event: "" } } = useThemeConfig() as ThemeConfig
return (
<>
{!metadata.frontMatter?.hide_footer && (
<div className="tw-mt-[42px]">
<Feedback
{...footerFeedback}
className="tw-border-0 tw-border-t tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark"
/>
<Footer {...props} />
</div>
)}
</>
)
}
www/docs/src/theme/DocItem/Layout/index.js
-55
View File
@@ -1,55 +0,0 @@
import React from 'react';
import clsx from 'clsx';
import {useWindowSize} from '@docusaurus/theme-common';
import {useDoc} from '@docusaurus/theme-common/internal';
import DocItemPaginator from '@theme/DocItem/Paginator';
import DocVersionBanner from '@theme/DocVersionBanner';
import DocVersionBadge from '@theme/DocVersionBadge';
import DocItemFooter from '@theme/DocItem/Footer';
import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
import DocItemContent from '@theme/DocItem/Content';
import DocBreadcrumbs from '@theme/DocBreadcrumbs';
import styles from './styles.module.css';
import Footer from '@theme/Footer';
/**
* Decide if the toc should be rendered, on mobile or desktop viewports
*/
function useDocTOC() {
const {frontMatter, toc} = useDoc();
const windowSize = useWindowSize();
const hidden = frontMatter.hide_table_of_contents;
const canRender = !hidden && toc.length > 0;
const mobile = canRender ? <DocItemTOCMobile /> : undefined;
const desktop =
canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? (
<DocItemTOCDesktop />
) : undefined;
return {
hidden,
mobile,
desktop,
};
}
export default function DocItemLayout({children}) {
const docTOC = useDocTOC();
return (
<div className="row markdown-row">
<div className={clsx('col', 'markdown-doc-wrapper', !docTOC.hidden && styles.docItemCol)}>
<DocVersionBanner />
<div className={styles.docItemContainer}>
<article>
<DocBreadcrumbs />
<DocVersionBadge />
{docTOC.mobile}
<DocItemContent>{children}</DocItemContent>
<DocItemFooter />
</article>
<DocItemPaginator />
<Footer />
</div>
</div>
{docTOC.desktop && <div className="col toc-wrapper">{docTOC.desktop}</div>}
</div>
);
}
www/docs/src/theme/DocItem/Layout/index.tsx
+69
View File
@@ -0,0 +1,69 @@
import React from "react"
import clsx from "clsx"
import { useWindowSize } from "@docusaurus/theme-common"
import { useDoc } from "@docusaurus/theme-common/internal"
import DocItemPaginator from "@theme/DocItem/Paginator"
import DocVersionBanner from "@theme/DocVersionBanner"
import DocVersionBadge from "@theme/DocVersionBadge"
import DocItemFooter from "@theme/DocItem/Footer"
import DocItemTOCMobile from "@theme/DocItem/TOC/Mobile"
import DocItemTOCDesktop from "@theme/DocItem/TOC/Desktop"
import DocItemContent from "@theme/DocItem/Content"
import DocBreadcrumbs from "@theme/DocBreadcrumbs"
import type { Props } from "@theme/DocItem/Layout"
import Footer from "@theme/Footer"
/**
* Decide if the toc should be rendered, on mobile or desktop viewports
*/
function useDocTOC() {
const { frontMatter, toc } = useDoc()
const windowSize = useWindowSize()
const hidden = frontMatter.hide_table_of_contents
const canRender = !hidden && toc.length > 0
const mobile = canRender ? <DocItemTOCMobile /> : undefined
const desktop =
canRender && (windowSize === "desktop" || windowSize === "ssr") ? (
<DocItemTOCDesktop />
) : undefined
return {
hidden,
mobile,
desktop,
}
}
export default function DocItemLayout({ children }: Props): JSX.Element {
const docTOC = useDocTOC()
return (
<div className="row tw-m-0">
<div
className={clsx(
"col",
"tw-my-0 tw-mx-auto tw-max-w-main-content tw-w-full tw-ml-auto lg:tw-py-0 lg:tw-px-4 tw-py-0 tw-px-1",
!docTOC.hidden && "xxl:tw-w-10/12 tw-w-9/12"
)}
>
<DocVersionBanner />
<div>
<article className={clsx("[&>*:first-child]:tw-mt-0")}>
<DocBreadcrumbs />
<DocVersionBadge />
{docTOC.mobile}
<DocItemContent>{children}</DocItemContent>
<DocItemFooter />
</article>
<DocItemPaginator />
<Footer />
</div>
</div>
{docTOC.desktop && (
<div className="col toc-wrapper">{docTOC.desktop}</div>
)}
</div>
)
}
www/docs/src/theme/DocItem/Layout/styles.module.css
-16
View File
@@ -1,16 +0,0 @@
.docItemContainer header + *,
.docItemContainer article > *:first-child {
margin-top: 0;
}
@media screen and (min-width: 1441px) {
.docItemCol {
width: calc(10 / 12 * 100%);
}
}
@media screen and (min-width: 1440px) {
.docItemCol {
width: calc(9 / 12 * 100%);
}
}
www/docs/src/theme/DocPage/Layout/Main/index.js
-24
View File
@@ -1,24 +0,0 @@
import React from 'react';
import clsx from 'clsx';
import {useDocsSidebar} from '@docusaurus/theme-common/internal';
import styles from './styles.module.css';
export default function DocPageLayoutMain({hiddenSidebarContainer, children}) {
const sidebar = useDocsSidebar();
return (
<main
className={clsx(
styles.docMainContainer,
(hiddenSidebarContainer || !sidebar) && styles.docMainContainerEnhanced,
)}>
<div
className={clsx(
'container padding-top--md docs-page-container',
styles.docItemWrapper,
hiddenSidebarContainer && styles.docItemWrapperEnhanced,
)}>
{children}
</div>
</main>
);
}
www/docs/src/theme/DocPage/Layout/Main/index.tsx
+28
View File
@@ -0,0 +1,28 @@
import React from "react"
import clsx from "clsx"
import { useDocsSidebar } from "@docusaurus/theme-common/internal"
import type { Props } from "@theme/DocPage/Layout/Main"
export default function DocPageLayoutMain({
hiddenSidebarContainer,
children,
}: Props): JSX.Element {
const sidebar = useDocsSidebar()
return (
<main
className={clsx(
"tw-flex tw-flex-col tw-w-full lg:tw-flex-grow lg:tw-max-w-[calc(100%-320px)]",
(hiddenSidebarContainer || !sidebar) && "lg:tw-max-w-[calc(100%-30px)]"
)}
>
<div
className={clsx(
"container padding-top--md tw-px-0",
hiddenSidebarContainer && "lg:tw-max-w-main-content-hidden-sidebar"
)}
>
{children}
</div>
</main>
)
}
www/docs/src/theme/DocPage/Layout/Main/styles.module.css
-22
View File
@@ -1,22 +0,0 @@
.docMainContainer {
display: flex;
flex-direction: column;
width: 100%;
}
@media (min-width: 997px) {
.docMainContainer {
flex-grow: 1;
max-width: calc(100% - var(--doc-sidebar-width));
}
.docMainContainerEnhanced {
max-width: calc(100% - var(--doc-sidebar-hidden-width));
}
.docItemWrapperEnhanced {
max-width: calc(
var(--ifm-container-width) + var(--doc-sidebar-width)
) !important;
}
}
www/docs/src/theme/DocPage/Layout/Sidebar/index.js
-84
View File
@@ -1,84 +0,0 @@
import React, {useState, useCallback, useRef} from 'react';
import clsx from 'clsx';
import {ThemeClassNames} from '@docusaurus/theme-common';
import {useDocsSidebar} from '@docusaurus/theme-common/internal';
import {useLocation} from '@docusaurus/router';
import DocSidebar from '@theme/DocSidebar';
import ExpandButton from '@theme/DocPage/Layout/Sidebar/ExpandButton';
import styles from './styles.module.css';
import { SwitchTransition, CSSTransition } from 'react-transition-group';
// Reset sidebar state when sidebar changes
// Use React key to unmount/remount the children
// See https://github.com/facebook/docusaurus/issues/3414
function ResetOnSidebarChange({children}) {
const sidebar = useDocsSidebar();
return (
<React.Fragment key={sidebar?.name ?? 'noSidebar'}>
{children}
</React.Fragment>
);
}
export default function DocPageLayoutSidebar({
sidebar,
hiddenSidebarContainer,
setHiddenSidebarContainer,
}) {
const {pathname} = useLocation();
const [hiddenSidebar, setHiddenSidebar] = useState(false);
const toggleSidebar = useCallback(() => {
if (hiddenSidebar) {
setHiddenSidebar(false);
}
setHiddenSidebarContainer((value) => !value);
}, [setHiddenSidebarContainer, hiddenSidebar]);
const {name} = useDocsSidebar()
const sidebarRef = useRef(null)
return (
<aside
className={clsx(
ThemeClassNames.docs.docSidebarContainer,
styles.docSidebarContainer,
hiddenSidebarContainer && styles.docSidebarContainerHidden,
)}
onTransitionEnd={(e) => {
if (!e.currentTarget.classList.contains(styles.docSidebarContainer)) {
return;
}
if (hiddenSidebarContainer) {
setHiddenSidebar(true);
}
}}>
<SwitchTransition>
<CSSTransition
key={name}
nodeRef={sidebarRef}
classNames={{
enter: 'animate__animated animate__fadeInLeft',
exit: 'animate__animated animate__fadeOutLeft'
}}
timeout={200}
>
<div
className={styles.sidebarViewportWrapper}
ref={sidebarRef}>
<ResetOnSidebarChange>
<div
className={clsx(
styles.sidebarViewport,
hiddenSidebar && styles.sidebarViewportHidden,
)}>
<DocSidebar
sidebar={sidebar}
path={pathname}
onCollapse={toggleSidebar}
isHidden={hiddenSidebar}
/>
{hiddenSidebar && <ExpandButton toggleSidebar={toggleSidebar} />}
</div>
</ResetOnSidebarChange>
</div>
</CSSTransition>
</SwitchTransition>
</aside>
);
}
www/docs/src/theme/DocPage/Layout/Sidebar/index.tsx
+96
View File
@@ -0,0 +1,96 @@
import React, { type ReactNode, useState, useCallback, useRef } from "react"
import clsx from "clsx"
import { ThemeClassNames } from "@docusaurus/theme-common"
import { useDocsSidebar } from "@docusaurus/theme-common/internal"
import { useLocation } from "@docusaurus/router"
import DocSidebar from "@theme/DocSidebar"
import ExpandButton from "@theme/DocPage/Layout/Sidebar/ExpandButton"
import type { Props } from "@theme/DocPage/Layout/Sidebar"
import { SwitchTransition, CSSTransition } from "react-transition-group"
// Reset sidebar state when sidebar changes
// Use React key to unmount/remount the children
// See https://github.com/facebook/docusaurus/issues/3414
function ResetOnSidebarChange({ children }: { children: ReactNode }) {
const sidebar = useDocsSidebar()
return (
<React.Fragment key={sidebar?.name ?? "noSidebar"}>
{children}
</React.Fragment>
)
}
export default function DocPageLayoutSidebar({
sidebar,
hiddenSidebarContainer,
setHiddenSidebarContainer,
}: Props): JSX.Element {
const { pathname } = useLocation()
const [hiddenSidebar, setHiddenSidebar] = useState(false)
const toggleSidebar = useCallback(() => {
if (hiddenSidebar) {
setHiddenSidebar(false)
}
setHiddenSidebarContainer((value) => !value)
}, [setHiddenSidebarContainer, hiddenSidebar])
const { name } = useDocsSidebar()
const sidebarRef = useRef(null)
return (
<aside
className={clsx(
ThemeClassNames.docs.docSidebarContainer,
"lg:tw-block lg:tw-w-sidebar lg:tw-will-change-[width] lg:tw-transition-[width] lg:tw-ease-ease tw-clip tw-hidden tw-duration-200",
hiddenSidebarContainer && "lg:tw-w-sidebar-hidden lg:tw-cursor-pointer"
)}
onTransitionEnd={(e) => {
if (
!e.currentTarget.classList.contains(
ThemeClassNames.docs.docSidebarContainer
)
) {
return
}
if (hiddenSidebarContainer) {
setHiddenSidebar(true)
}
}}
>
<SwitchTransition>
<CSSTransition
key={name}
nodeRef={sidebarRef}
classNames={{
enter: "animate__animated animate__fadeInLeft animate__fastest",
exit: "animate__animated animate__fadeOutLeft animate__fastest",
}}
timeout={200}
>
<div
className={clsx(
"lg:tw-top-[57px] lg:tw-sticky lg:tw-max-h-screen lg:[&>div]:tw-max-h-screen"
)}
ref={sidebarRef}
>
<ResetOnSidebarChange>
<div>
<DocSidebar
sidebar={sidebar}
path={pathname}
onCollapse={toggleSidebar}
isHidden={hiddenSidebar}
/>
{hiddenSidebar && (
<ExpandButton toggleSidebar={toggleSidebar} />
)}
</div>
</ResetOnSidebarChange>
</div>
</CSSTransition>
</SwitchTransition>
</aside>
)
}
www/docs/src/theme/DocPage/Layout/Sidebar/styles.module.css
-36
View File
@@ -1,36 +0,0 @@
:root {
--doc-sidebar-width: 300px;
--doc-sidebar-hidden-width: 30px;
}
.docSidebarContainer {
display: none;
--animate-duration: 0.2s;
}
@media (min-width: 997px) {
.docSidebarContainer {
display: block;
width: var(--doc-sidebar-width);
/* margin-top: calc(-1 * var(--ifm-navbar-height)); */
will-change: width;
transition: width var(--ifm-transition-fast) ease;
clip-path: inset(0);
}
.docSidebarContainerHidden {
width: var(--doc-sidebar-hidden-width);
cursor: pointer;
}
.sidebarViewportWrapper {
top: var(--ifm-navbar-height);
position: sticky;
}
.sidebarViewportWrapper,
.sidebarViewportWrapper > div {
max-height: 100vh;
}
}
www/docs/src/theme/DocPage/index.js → www/docs/src/theme/DocPage/index.tsx
+24 -21
View File
@@ -1,28 +1,30 @@
import React from 'react';
import clsx from 'clsx';
import React from "react"
import clsx from "clsx"
import {
HtmlClassNameProvider,
ThemeClassNames,
PageMetadata,
} from '@docusaurus/theme-common';
} from "@docusaurus/theme-common"
import {
docVersionSearchTag,
DocsSidebarProvider,
DocsVersionProvider,
useDocRouteMetadata,
} from '@docusaurus/theme-common/internal';
import DocPageLayout from '@theme/DocPage/Layout';
import NotFound from '@theme/NotFound';
import SearchMetadata from '@theme/SearchMetadata';
function DocPageMetadata(props) {
const {versionMetadata} = props;
} from "@docusaurus/theme-common/internal"
import DocPageLayout from "@theme/DocPage/Layout"
import NotFound from "@theme/NotFound"
import SearchMetadata from "@theme/SearchMetadata"
import type { Props } from "@theme/DocPage"
function DocPageMetadata(props: Props): JSX.Element {
const { versionMetadata } = props
return (
<>
<SearchMetadata
version={versionMetadata.version}
tag={docVersionSearchTag(
versionMetadata.pluginId,
versionMetadata.version,
versionMetadata.version
)}
/>
<PageMetadata>
@@ -31,16 +33,16 @@ function DocPageMetadata(props) {
)}
</PageMetadata>
</>
);
)
}
export default function DocPage(props) {
const {versionMetadata} = props;
const currentDocRouteMetadata = useDocRouteMetadata(props);
export default function DocPage(props: Props): JSX.Element {
const { versionMetadata } = props
const currentDocRouteMetadata = useDocRouteMetadata(props)
if (!currentDocRouteMetadata) {
return <NotFound />;
return <NotFound />
}
const {docElement, sidebarName, sidebarItems} = currentDocRouteMetadata;
const { docElement, sidebarName, sidebarItems } = currentDocRouteMetadata
return (
<>
<DocPageMetadata {...props} />
@@ -49,9 +51,10 @@ export default function DocPage(props) {
// TODO: it should be removed from here
ThemeClassNames.wrapper.docsPages,
ThemeClassNames.page.docsDocPage,
props.versionMetadata.className,
sidebarName && 'doc-has-sidebar'
)}>
props.versionMetadata.className
// sidebarName && "doc-has-sidebar"
)}
>
<DocsVersionProvider version={versionMetadata}>
<DocsSidebarProvider name={sidebarName} items={sidebarItems}>
<DocPageLayout>{docElement}</DocPageLayout>
@@ -59,5 +62,5 @@ export default function DocPage(props) {
</DocsVersionProvider>
</HtmlClassNameProvider>
</>
);
)
}
www/docs/src/theme/DocSidebar/Desktop/index.js
-87
View File
@@ -1,87 +0,0 @@
import React, { useEffect, useRef } from 'react';
import clsx from 'clsx';
import {useThemeConfig} from '@docusaurus/theme-common';
import CollapseButton from '@theme/DocSidebar/Desktop/CollapseButton';
import Content from '@theme/DocSidebar/Desktop/Content';
import styles from './styles.module.css';
import useIsBrowser from '@docusaurus/useIsBrowser';
import AnnouncementBar from '@theme/AnnouncementBar';
import {useLocation} from '@docusaurus/router';
function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
const {
navbar: {hideOnScroll},
docs: {
sidebar: {hideable},
},
} = useThemeConfig();
const isBrowser = useIsBrowser()
const sidebarRef = useRef(null)
const location = useLocation();
useEffect(() => {
if (isBrowser && sidebarRef.current) {
function handleScroll () {
if (!sidebarRef.current?.classList.contains('scrolling')) {
sidebarRef.current?.classList.add('scrolling');
const intervalId = setInterval(() => {
if (!sidebarRef.current?.matches(':hover')) {
sidebarRef.current?.classList.remove('scrolling');
clearInterval(intervalId);
}
}, 300)
}
}
const navElement = sidebarRef.current.querySelector('.main-sidebar');
navElement.addEventListener('scroll', handleScroll);
return () => {
navElement?.removeEventListener('scroll', handleScroll);
}
}
}, [isBrowser, sidebarRef.current])
useEffect(() => {
const navElement = sidebarRef.current.querySelector('.main-sidebar'),
navElementBoundingRect = navElement.getBoundingClientRect();
//logic to scroll to current active item
const activeItem = document.querySelector('.sidebar-desktop [aria-current=page]')
if (!activeItem) {
return
}
const activeItemBoundingReact = activeItem.getBoundingClientRect(),
//the extra 160 is due to the sticky elements in the sidebar
isActiveItemVisible = activeItemBoundingReact.top >= 0 && activeItemBoundingReact.bottom + 160 <= navElementBoundingRect.height
if (!isActiveItemVisible) {
const elementToScrollTo = activeItem,
elementBounding = elementToScrollTo.getBoundingClientRect()
//scroll to element
navElement.scroll({
//the extra 160 is due to the sticky elements in the sidebar
top: elementBounding.top - navElementBoundingRect.top + navElement.scrollTop - 160,
behaviour: 'smooth'
})
}
}, [location])
return (
<div
className={clsx(
styles.sidebar,
'sidebar-desktop',
hideOnScroll && styles.sidebarWithHideableNavbar,
isHidden && styles.sidebarHidden,
)}
ref={sidebarRef}>
<AnnouncementBar />
<Content path={path} sidebar={sidebar} className="main-sidebar" />
{hideable && <CollapseButton onClick={onCollapse} />}
</div>
);
}
export default React.memo(DocSidebarDesktop);
www/docs/src/theme/DocSidebar/Desktop/index.tsx
+105
View File
@@ -0,0 +1,105 @@
import React, { useEffect, useRef } from "react"
import clsx from "clsx"
import { useThemeConfig } from "@docusaurus/theme-common"
import CollapseButton from "@theme/DocSidebar/Desktop/CollapseButton"
import Content from "@theme/DocSidebar/Desktop/Content"
import type { Props } from "@theme/DocSidebar/Desktop"
import useIsBrowser from "@docusaurus/useIsBrowser"
import { useLocation } from "@docusaurus/router"
import AnnouncementBar from "../../AnnouncementBar/index"
function DocSidebarDesktop({ path, sidebar, onCollapse, isHidden }: Props) {
const {
navbar: { hideOnScroll },
docs: {
sidebar: { hideable },
},
} = useThemeConfig()
const isBrowser = useIsBrowser()
const sidebarRef = useRef(null)
const location = useLocation()
useEffect(() => {
function handleScroll() {
if (!sidebarRef.current?.classList.contains("scrolling")) {
sidebarRef.current?.classList.add("scrolling")
const intervalId = setInterval(() => {
if (!sidebarRef.current?.matches(":hover")) {
sidebarRef.current?.classList.remove("scrolling")
clearInterval(intervalId)
}
}, 300)
}
}
if (isBrowser && sidebarRef.current) {
const navElement = sidebarRef.current.querySelector(".main-sidebar")
navElement.addEventListener("scroll", handleScroll)
return () => {
navElement?.removeEventListener("scroll", handleScroll)
}
}
}, [isBrowser, sidebarRef.current])
useEffect(() => {
const navElement = sidebarRef.current.querySelector(".main-sidebar")
const navElementBoundingRect = navElement.getBoundingClientRect()
// logic to scroll to current active item
const activeItem = document.querySelector(
".sidebar-desktop [aria-current=page]"
)
if (!activeItem) {
return
}
const activeItemBoundingReact = activeItem.getBoundingClientRect()
// the extra 160 is due to the sticky elements in the sidebar
const isActiveItemVisible =
activeItemBoundingReact.top >= 0 &&
activeItemBoundingReact.bottom + 160 <= navElementBoundingRect.height
if (!isActiveItemVisible) {
const elementToScrollTo = activeItem
const elementBounding = elementToScrollTo.getBoundingClientRect()
// scroll to element
navElement.scroll({
// the extra 160 is due to the sticky elements in the sidebar
top:
elementBounding.top -
navElementBoundingRect.top +
navElement.scrollTop -
160,
behaviour: "smooth",
})
}
}, [location])
return (
<div
className={clsx(
"lg:tw-flex lg:tw-flex-col lg:tw-max-h-screen lg:tw-h-full lg:tw-sticky lg:tw-top-0 lg:tw-transition-opacity lg:tw-duration-[50ms] lg:tw-ease-ease lg:tw-pt-1.5",
"sidebar-desktop",
hideOnScroll && "lg:tw-pt-0",
isHidden &&
"lg:tw-opacity-0 lg:tw-h-0 lg:tw-overflow-hidden lg:tw-invisible"
)}
ref={sidebarRef}
>
<AnnouncementBar />
<Content
path={path}
sidebar={sidebar}
className={clsx(
"main-sidebar",
"!tw-mt-0 !tw-pt-0 !tw-px-1.5 !tw-pb-4"
)}
/>
{hideable && <CollapseButton onClick={onCollapse} />}
</div>
)
}
export default React.memo(DocSidebarDesktop)
www/docs/src/theme/DocSidebar/Desktop/styles.module.css
-38
View File
@@ -1,38 +0,0 @@
@media (min-width: 997px) {
.sidebar {
display: flex;
flex-direction: column;
max-height: 100vh;
height: 100%;
position: sticky;
top: 0;
transition: opacity 50ms ease;
padding-top: calc(var(--ifm-base-spacing) * 1.5);
}
.sidebarWithHideableNavbar {
padding-top: 0;
}
.sidebarHidden {
opacity: 0;
height: 0;
overflow: hidden;
visibility: hidden;
}
.sidebarLogo {
display: flex !important;
align-items: center;
margin: 18px 0;
color: inherit !important;
text-decoration: none !important;
width: fit-content;
padding-left: var(--doc-sidebar-padding);
padding-right: var(--doc-sidebar-padding);
}
.sidebarLogo img {
height: var(--ifm-logo-height);
}
}
Loaded 100 of 292 files, more files were not shown because too many files have changed in this diff. Show more