chore(docs): remove unused files from www directory (#2722)
This commit is contained in:
Patrick
GitHub
7
www/.gitignore
vendored
7
www/.gitignore
vendored
@@ -1,7 +0,0 @@
|
||||
build
|
||||
.yarn/*
|
||||
!.yarn/patches
|
||||
!.yarn/plugins
|
||||
!.yarn/releases
|
||||
!.yarn/sdks
|
||||
!.yarn/versions
|
||||
Binary file not shown.
@@ -1,3 +0,0 @@
|
||||
https://www.docs.medusa-commerce.com/* https://www.docs.medusajs.com/:splat 301!
|
||||
https://docs.medusa-commerce.com/* https://docs.medusajs.com/:splat 301!
|
||||
https://tender-goodall-28ca2e.netlify.app/* https://www.docs.medusajs.com/:splat 301!
|
||||
@@ -1,43 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
const execa = require("execa")
|
||||
|
||||
const installDeps = async () => {
|
||||
await execa("yarn", ["install"], {
|
||||
cwd: "./reference",
|
||||
stdio: "inherit",
|
||||
})
|
||||
|
||||
await execa("yarn", ["install"], {
|
||||
cwd: "./docs",
|
||||
stdio: "inherit",
|
||||
})
|
||||
}
|
||||
|
||||
const buildGatsby = async () => {
|
||||
await execa("./node_modules/.bin/gatsby", ["build"], {
|
||||
cwd: "./reference",
|
||||
stdio: "inherit",
|
||||
})
|
||||
}
|
||||
|
||||
const buildDocusaurus = async () => {
|
||||
await execa("./node_modules/.bin/docusaurus", ["build"], {
|
||||
cwd: "./docs",
|
||||
stdio: "inherit",
|
||||
})
|
||||
}
|
||||
|
||||
const buildSite = async () => {
|
||||
await installDeps()
|
||||
await buildGatsby()
|
||||
await buildDocusaurus()
|
||||
|
||||
await execa("rm", ["-rf", "build"])
|
||||
await execa("mkdir", ["build"])
|
||||
await execa("cp", ["_redirects", "build/_redirects"])
|
||||
await execa("cp", ["-a", `reference/public/.`, `build/`])
|
||||
await execa("cp", ["-a", `docs/build/.`, `build/`])
|
||||
}
|
||||
|
||||
buildSite()
|
||||
@@ -1,11 +0,0 @@
|
||||
{
|
||||
"name": "www",
|
||||
"version": "0.0.0",
|
||||
"description": "Medusa documentation site",
|
||||
"main": "index.js",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"execa": "^5.1.1",
|
||||
"gatsby-cli": "^3.11.0"
|
||||
}
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
{
|
||||
"presets": [
|
||||
[
|
||||
"babel-preset-gatsby",
|
||||
{
|
||||
"reactRuntime": "automatic",
|
||||
"targets": {
|
||||
"browsers": [">0.25%", "not dead"]
|
||||
}
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
75
www/reference/.gitignore
vendored
75
www/reference/.gitignore
vendored
@@ -1,75 +0,0 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (http://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# Typescript v1 declaration files
|
||||
typings/
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# dotenv environment variable files
|
||||
.env*
|
||||
|
||||
# gatsby files
|
||||
.cache/
|
||||
public
|
||||
|
||||
# Mac files
|
||||
.DS_Store
|
||||
|
||||
# Yarn
|
||||
yarn-error.log
|
||||
.pnp/
|
||||
.pnp.js
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
.yarn/*
|
||||
!.yarn/patches
|
||||
!.yarn/plugins
|
||||
!.yarn/releases
|
||||
!.yarn/sdks
|
||||
!.yarn/versions
|
||||
@@ -1,4 +0,0 @@
|
||||
.cache
|
||||
package.json
|
||||
package-lock.json
|
||||
public
|
||||
Binary file not shown.
@@ -1,14 +0,0 @@
|
||||
The BSD Zero Clause License (0BSD)
|
||||
|
||||
Copyright (c) 2020 Medusa Commerce
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
@@ -1,3 +0,0 @@
|
||||
# Medusa Docs
|
||||
|
||||
Visit: docs.medusajs.com to browse docs.
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,16 +0,0 @@
|
||||
import React from "react"
|
||||
import { NavigationProvider } from "./src/context/navigation-context"
|
||||
|
||||
export const onServiceWorkerUpdateReady = () => {
|
||||
const answer = window.confirm(
|
||||
"We have updated the docs site. Reload to display the latest version?"
|
||||
)
|
||||
|
||||
if (answer) {
|
||||
window.location.reload()
|
||||
}
|
||||
}
|
||||
|
||||
export const wrapPageElement = ({ element }) => {
|
||||
return <NavigationProvider>{element}</NavigationProvider>
|
||||
}
|
||||
@@ -1,99 +0,0 @@
|
||||
module.exports = {
|
||||
siteMetadata: {
|
||||
title: "Medusa",
|
||||
description: "Open-source headless commerce engine",
|
||||
author: "Medusa core team",
|
||||
siteUrl: "https://docs.medusajs.com/api"
|
||||
},
|
||||
plugins: [
|
||||
`gatsby-plugin-react-helmet`,
|
||||
`gatsby-plugin-dark-mode`,
|
||||
{
|
||||
resolve: `gatsby-plugin-anchor-links`,
|
||||
options: {
|
||||
offset: -100,
|
||||
duration: 1000,
|
||||
},
|
||||
},
|
||||
`gatsby-transformer-json`,
|
||||
`gatsby-plugin-emotion`,
|
||||
|
||||
{
|
||||
resolve: `gatsby-source-filesystem`,
|
||||
options: {
|
||||
name: "store-api",
|
||||
path: `${__dirname}/../../docs/api/store-spec3.json`,
|
||||
},
|
||||
},
|
||||
{
|
||||
resolve: `gatsby-source-filesystem`,
|
||||
options: {
|
||||
name: "admin-api",
|
||||
path: `${__dirname}/../../docs/api/admin-spec3.json`,
|
||||
},
|
||||
},
|
||||
{
|
||||
resolve: `gatsby-source-filesystem`,
|
||||
options: {
|
||||
name: `docs`,
|
||||
path: `${__dirname}/../../docs/content/`,
|
||||
},
|
||||
},
|
||||
{
|
||||
resolve: `gatsby-source-filesystem`,
|
||||
options: {
|
||||
path: `${__dirname}/../../docs/pages`,
|
||||
name: `pages`,
|
||||
},
|
||||
},
|
||||
{
|
||||
resolve: `gatsby-transformer-remark`,
|
||||
options: {
|
||||
plugins: [
|
||||
{
|
||||
resolve: `gatsby-remark-autolink-headers`,
|
||||
options: {
|
||||
elements: [`h2`, `h3`, `h4`],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
`gatsby-plugin-theme-ui`,
|
||||
{
|
||||
resolve: `gatsby-plugin-env-variables`,
|
||||
options: {
|
||||
allowList: ["ALGOLIA_API_KEY", "ALGOLIA_APP_ID"],
|
||||
},
|
||||
},
|
||||
{
|
||||
resolve: `gatsby-plugin-segment-js`,
|
||||
options: {
|
||||
prodKey: process.env.SEGMENT_API_KEY,
|
||||
devKey: process.env.SEGMENT_API_KEY_DEV,
|
||||
trackPage: true,
|
||||
}
|
||||
},
|
||||
{
|
||||
resolve: `gatsby-plugin-sitemap`,
|
||||
options: {
|
||||
output: '/api/sitemap'
|
||||
}
|
||||
},
|
||||
// `gatsby-plugin-preact`,
|
||||
// {
|
||||
// resolve: `gatsby-source-openapi-aggregate`,
|
||||
// options: {
|
||||
// specs: [
|
||||
// {
|
||||
// name: "admin-spec",
|
||||
// resolve: () =>
|
||||
// fromJson(``
|
||||
// path.resolve(__dirname, "../../docs/api/admin-spec3.json")
|
||||
// ),
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// },
|
||||
],
|
||||
}
|
||||
@@ -1,565 +0,0 @@
|
||||
const path = require(`path`)
|
||||
const { createFilePath } = require(`gatsby-source-filesystem`)
|
||||
const fixtures = require("../../docs/api/fixtures.json")
|
||||
|
||||
const convertToKebabCase = string => {
|
||||
return string
|
||||
.replace(/\s+/g, "-")
|
||||
.replace("'", "")
|
||||
.replace(".", "")
|
||||
.replace('"', "")
|
||||
.toLowerCase()
|
||||
}
|
||||
|
||||
const createCustomNode = ({ name, node, createNode }) => {
|
||||
const tags = node.tags
|
||||
const nodePaths = Object.entries(node.paths).map(([path, values]) => {
|
||||
return {
|
||||
name: path,
|
||||
methods: Object.entries(values).map(([method, values]) => {
|
||||
let requestBodyValues = undefined
|
||||
|
||||
if (values.requestBody && values.requestBody.content) {
|
||||
requestBodyValues = values.requestBody.content.hasOwnProperty("application/json") ?
|
||||
values.requestBody.content["application/json"].schema :
|
||||
values.requestBody.content["multipart/form-data"].schema
|
||||
}
|
||||
|
||||
return {
|
||||
method: method,
|
||||
...values,
|
||||
requestBody: {
|
||||
required: requestBodyValues
|
||||
? requestBodyValues.required
|
||||
: undefined,
|
||||
type: requestBodyValues ? requestBodyValues.type : undefined,
|
||||
properties: Object.entries(
|
||||
requestBodyValues ? requestBodyValues.properties : {}
|
||||
).map(([property, values]) => {
|
||||
let ref = null
|
||||
let component_id = null
|
||||
let nestedModelNode = null
|
||||
const { items, anyOf, oneOf, ...rest } = values
|
||||
if (items || anyOf || oneOf) {
|
||||
if (items && items.anyOf) {
|
||||
component_id = items.anyOf[0]["$ref"].substring(
|
||||
items.anyOf[0]["$ref"].lastIndexOf("/") + 1
|
||||
)
|
||||
ref = node.components.schemas[component_id]
|
||||
} else if (items) {
|
||||
const refPath = items["$ref"]
|
||||
if (refPath) {
|
||||
component_id = refPath.substring(
|
||||
items["$ref"].lastIndexOf("/") + 1
|
||||
)
|
||||
ref = node.components.schemas[component_id]
|
||||
}
|
||||
} else if (anyOf) {
|
||||
component_id = anyOf[0]["$ref"].substring(
|
||||
anyOf[0]["$ref"].lastIndexOf("/") + 1
|
||||
)
|
||||
ref = node.components.schemas[component_id]
|
||||
} else if (oneOf) {
|
||||
component_id = oneOf[0]["$ref"].substring(
|
||||
oneOf[0]["$ref"].lastIndexOf("/") + 1
|
||||
)
|
||||
ref = node.components.schemas[component_id]
|
||||
}
|
||||
}
|
||||
if (ref) {
|
||||
const { properties, ...rest } = ref
|
||||
let nestedModelProperties = []
|
||||
if (properties) {
|
||||
Object.entries(properties).map(([key, values]) => {
|
||||
nestedModelProperties.push({
|
||||
property: key,
|
||||
...values,
|
||||
})
|
||||
})
|
||||
nestedModelNode = {
|
||||
properties: nestedModelProperties,
|
||||
...rest,
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
property: property,
|
||||
nestedModel: nestedModelNode,
|
||||
...rest,
|
||||
}
|
||||
}),
|
||||
},
|
||||
|
||||
responses: Object.entries(values.responses).map(
|
||||
([response, values]) => {
|
||||
let properties = undefined
|
||||
|
||||
if (values && values.content) {
|
||||
properties =
|
||||
values.content["application/json"].schema.properties
|
||||
}
|
||||
|
||||
return {
|
||||
status: response,
|
||||
content: properties
|
||||
? Object.entries(properties).map(([property, values]) => {
|
||||
const toSet = {}
|
||||
let concept
|
||||
if (values.items && values.items["$ref"]) {
|
||||
const [, ...path] = values.items["$ref"].split("/")
|
||||
concept = path[path.length - 1]
|
||||
if (values.type === "array") {
|
||||
if (concept in fixtures.resources) {
|
||||
//make the array key plural
|
||||
let prop
|
||||
if (property.slice(-1) !== "s") {
|
||||
prop = property + "s"
|
||||
} else {
|
||||
prop = property
|
||||
}
|
||||
|
||||
toSet[prop] = [fixtures.resources[concept]]
|
||||
}
|
||||
} else if (concept in fixtures.resources) {
|
||||
toSet[property] = fixtures.resources[concept]
|
||||
}
|
||||
} else {
|
||||
if (fixtures.resources[property]) {
|
||||
toSet[property] = fixtures.resources[property]
|
||||
} else if (values["$ref"]) {
|
||||
const [, ...path] = values["$ref"].split("/")
|
||||
toSet[property] =
|
||||
fixtures.resources[path[path.length - 1]]
|
||||
}
|
||||
}
|
||||
|
||||
const json =
|
||||
Object.keys(toSet).length > 0
|
||||
? JSON.stringify(toSet, undefined, 2)
|
||||
: null
|
||||
|
||||
return {
|
||||
property: property,
|
||||
json: json,
|
||||
...values,
|
||||
}
|
||||
})
|
||||
: null,
|
||||
description: values.description,
|
||||
}
|
||||
}
|
||||
),
|
||||
}
|
||||
}),
|
||||
}
|
||||
})
|
||||
|
||||
const nodeSections = nodePaths.reduce((acc, current) => {
|
||||
// Not bulleproof and kind of naive
|
||||
const section = current.methods.find(method => method.tags).tags[0]
|
||||
|
||||
if (!section) {
|
||||
return acc
|
||||
}
|
||||
|
||||
const existingSection = acc.find(s => s.section.section_name === section)
|
||||
|
||||
//Because section_name does not always equal the resourceId
|
||||
const tag = tags.find(
|
||||
tag => tag.name.toLowerCase() === section.toLowerCase()
|
||||
)
|
||||
|
||||
let resourceId
|
||||
if (tag) resourceId = tag["x-resourceId"]
|
||||
|
||||
const schema =
|
||||
node.components.schemas[section.toLowerCase()] ||
|
||||
node.components.schemas[resourceId] ||
|
||||
null
|
||||
|
||||
//Create a schemaNode so we can access descriptions and attributes of objects
|
||||
let schemaNode
|
||||
if (schema) {
|
||||
let props = []
|
||||
|
||||
Object.entries(schema.properties).map(([key, values]) => {
|
||||
let ref = null
|
||||
let component_id = null
|
||||
let nestedModelNode = null
|
||||
|
||||
let { items, anyOf, oneOf, ...rest } = values
|
||||
if (items || anyOf || oneOf) {
|
||||
if (items && items.anyOf) {
|
||||
component_id = items.anyOf[0]["$ref"].substring(
|
||||
items.anyOf[0]["$ref"].lastIndexOf("/") + 1
|
||||
)
|
||||
ref = node.components.schemas[component_id]
|
||||
} else if (items) {
|
||||
const refPath = items["$ref"]
|
||||
if (refPath) {
|
||||
component_id = refPath.substring(
|
||||
items["$ref"].lastIndexOf("/") + 1
|
||||
)
|
||||
ref = node.components.schemas[component_id]
|
||||
}
|
||||
} else if (anyOf) {
|
||||
component_id = anyOf[0]["$ref"].substring(
|
||||
anyOf[0]["$ref"].lastIndexOf("/") + 1
|
||||
)
|
||||
ref = node.components.schemas[component_id]
|
||||
}
|
||||
if (ref) {
|
||||
const { properties, ...rest } = ref
|
||||
let nestedModelProperties = []
|
||||
if (properties) {
|
||||
Object.entries(properties).map(([key, values]) => {
|
||||
nestedModelProperties.push({
|
||||
property: key,
|
||||
...values,
|
||||
})
|
||||
})
|
||||
nestedModelNode = {
|
||||
properties: nestedModelProperties,
|
||||
...rest,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
props.push({
|
||||
property: key,
|
||||
nestedModel: nestedModelNode,
|
||||
...rest,
|
||||
})
|
||||
})
|
||||
|
||||
let object = fixtures.resources[resourceId] || null
|
||||
|
||||
if (object) object = JSON.stringify(object, undefined, 2)
|
||||
|
||||
schemaNode = {
|
||||
object: object,
|
||||
description: schema.description,
|
||||
properties: props,
|
||||
}
|
||||
}
|
||||
|
||||
/** We want the query to return the following:
|
||||
*
|
||||
* sections [
|
||||
* section: {
|
||||
* section_name: Orders
|
||||
* paths: [<array-of-paths>]
|
||||
* }
|
||||
* ]
|
||||
*
|
||||
* The reason that we wrap it in a section is so the query returns Section type, the alternative is
|
||||
* sections [
|
||||
* Order: {...},
|
||||
* Customer: {...}
|
||||
* ...
|
||||
* ]
|
||||
*
|
||||
* Which isn't structured as a reuseable type
|
||||
*/
|
||||
if (!existingSection) {
|
||||
acc.push({
|
||||
section: {
|
||||
section_name: section,
|
||||
paths: [{ ...current }],
|
||||
schema: schemaNode,
|
||||
},
|
||||
})
|
||||
} else {
|
||||
existingSection.section.paths.push({ ...current })
|
||||
}
|
||||
|
||||
//acc[section].section[current.name] = { ...current }
|
||||
|
||||
return acc
|
||||
}, [])
|
||||
|
||||
const result = {
|
||||
name: name,
|
||||
paths: nodePaths,
|
||||
sections: nodeSections,
|
||||
rawNode: node,
|
||||
|
||||
// required fields
|
||||
id: name,
|
||||
parent: null, // or null if it's a source node without a parent
|
||||
children: [],
|
||||
internal: {
|
||||
type: name,
|
||||
contentDigest: `store-api-${node.internal.contentDigest}`,
|
||||
mediaType: node.internal.mediaType, // optional
|
||||
content: node.internal.content, // optional
|
||||
description: `A cleaned version of file-system-api json files`, // optional
|
||||
},
|
||||
}
|
||||
|
||||
createNode(result)
|
||||
}
|
||||
|
||||
exports.onCreateNode = ({ node, getNode, actions }) => {
|
||||
const { createNodeField, createNode } = actions
|
||||
if (node.internal.type === `MarkdownRemark`) {
|
||||
const slug = createFilePath({ node, getNode })
|
||||
createNodeField({
|
||||
node,
|
||||
name: `slug`,
|
||||
value: slug,
|
||||
})
|
||||
}
|
||||
|
||||
if (node.internal.type === "ApiJson" && node.components) {
|
||||
if (node.info.title === "Medusa Storefront API") {
|
||||
createCustomNode({ name: "Store", node: node, createNode: createNode })
|
||||
}
|
||||
if (node.info.title === "Medusa Admin API") {
|
||||
createCustomNode({ name: "Admin", node: node, createNode: createNode })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const createAllPages = (sections, api, siteData, createPage, template) => {
|
||||
sections.forEach(edge => {
|
||||
const baseURL = convertToKebabCase(edge.section.section_name)
|
||||
createPage({
|
||||
path: `api/${api}/${baseURL}`,
|
||||
component: template,
|
||||
context: {
|
||||
data: siteData.data[api],
|
||||
api: api,
|
||||
title: edge.section.section_name,
|
||||
description: edge.section.schema ? edge.section.schema.description : "",
|
||||
to: { section: baseURL, method: null, sectionObj: edge.section },
|
||||
},
|
||||
})
|
||||
edge.section.paths.forEach(p => {
|
||||
p.methods.forEach(method => {
|
||||
const methodURL = convertToKebabCase(method.summary)
|
||||
createPage({
|
||||
path: `api/${api}/${baseURL}/${methodURL}`,
|
||||
component: template,
|
||||
context: {
|
||||
data: siteData.data[api],
|
||||
api: api,
|
||||
title: method.summary,
|
||||
description: method.description || "",
|
||||
to: { section: baseURL, method: methodURL, sectionObj: edge.section },
|
||||
},
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
exports.createPages = ({ graphql, actions }) => {
|
||||
const { createPage } = actions
|
||||
const template = path.resolve(`src/templates/reference-page.js`)
|
||||
// Query for markdown nodes to use in creating pages.
|
||||
// You can query for whatever data you want to create pages for e.g.
|
||||
// products, portfolio items, landing pages, etc.
|
||||
// Variables can be added as the second function parameter
|
||||
return graphql(
|
||||
`
|
||||
query Pages {
|
||||
admin {
|
||||
sections {
|
||||
section {
|
||||
section_name
|
||||
paths {
|
||||
name
|
||||
methods {
|
||||
tags
|
||||
summary
|
||||
description
|
||||
method
|
||||
operationId
|
||||
responses {
|
||||
status
|
||||
description
|
||||
content {
|
||||
_ref
|
||||
type
|
||||
property
|
||||
description
|
||||
json
|
||||
items {
|
||||
type
|
||||
_ref
|
||||
}
|
||||
}
|
||||
}
|
||||
requestBody {
|
||||
type
|
||||
required
|
||||
properties {
|
||||
description
|
||||
enum
|
||||
format
|
||||
property
|
||||
type
|
||||
nestedModel {
|
||||
title
|
||||
properties {
|
||||
property
|
||||
type
|
||||
description
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
parameters {
|
||||
description
|
||||
in
|
||||
name
|
||||
required
|
||||
schema {
|
||||
type
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
schema {
|
||||
object
|
||||
description
|
||||
properties {
|
||||
property
|
||||
type
|
||||
description
|
||||
format
|
||||
nestedModel {
|
||||
title
|
||||
properties {
|
||||
property
|
||||
type
|
||||
description
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
store {
|
||||
sections {
|
||||
section {
|
||||
section_name
|
||||
paths {
|
||||
name
|
||||
methods {
|
||||
tags
|
||||
summary
|
||||
description
|
||||
method
|
||||
operationId
|
||||
responses {
|
||||
status
|
||||
description
|
||||
content {
|
||||
_ref
|
||||
property
|
||||
description
|
||||
json
|
||||
items {
|
||||
_ref
|
||||
}
|
||||
}
|
||||
}
|
||||
requestBody {
|
||||
type
|
||||
required
|
||||
properties {
|
||||
description
|
||||
property
|
||||
type
|
||||
nestedModel {
|
||||
title
|
||||
properties {
|
||||
property
|
||||
type
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
parameters {
|
||||
description
|
||||
in
|
||||
name
|
||||
required
|
||||
schema {
|
||||
type
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
schema {
|
||||
object
|
||||
description
|
||||
properties {
|
||||
property
|
||||
type
|
||||
description
|
||||
format
|
||||
nestedModel {
|
||||
title
|
||||
properties {
|
||||
property
|
||||
type
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
{ limit: 1000 }
|
||||
).then(result => {
|
||||
if (result.errors) {
|
||||
throw result.errors
|
||||
}
|
||||
|
||||
//create entrypoint
|
||||
createPage({
|
||||
path: `api`,
|
||||
component: template,
|
||||
context: {
|
||||
data: result.data.store,
|
||||
api: "store",
|
||||
title: "Store",
|
||||
description: "Storefront API",
|
||||
},
|
||||
})
|
||||
|
||||
const apis = [
|
||||
{ title: "Store", description: "Storefront API", slug: "store" },
|
||||
{ title: "Admin", description: "Admin API", slug: "admin" },
|
||||
]
|
||||
|
||||
apis.forEach(api => {
|
||||
//create main page for API
|
||||
createPage({
|
||||
path: `api/${api.slug}`,
|
||||
component: template,
|
||||
context: {
|
||||
data: result.data[api.slug],
|
||||
api: api.slug,
|
||||
title: api.title,
|
||||
description: api.description,
|
||||
},
|
||||
})
|
||||
//create pages for all sections and methods
|
||||
createAllPages(
|
||||
result.data[api.slug].sections,
|
||||
api.slug,
|
||||
result,
|
||||
createPage,
|
||||
template
|
||||
)
|
||||
})
|
||||
})
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
import React from "react"
|
||||
import { NavigationProvider } from "./src/context/navigation-context"
|
||||
|
||||
export const wrapPageElement = ({ element }) => {
|
||||
return <NavigationProvider>{element}</NavigationProvider>
|
||||
}
|
||||
@@ -1,62 +0,0 @@
|
||||
{
|
||||
"name": "medusa-commerce-docs",
|
||||
"private": true,
|
||||
"description": "Docs engine for Medusa docs",
|
||||
"version": "0.1.0",
|
||||
"license": "0BSD",
|
||||
"scripts": {
|
||||
"build": "gatsby build",
|
||||
"develop": "gatsby clean && gatsby develop",
|
||||
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
|
||||
"start": "npm run develop",
|
||||
"serve": "gatsby serve",
|
||||
"clean": "gatsby clean",
|
||||
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@docsearch/react": "^3.0.0-alpha.40",
|
||||
"@emotion/react": "^11.1.2",
|
||||
"@emotion/styled": "^11.0.0",
|
||||
"@rebass/forms": "^4.0.6",
|
||||
"copy-to-clipboard": "^3.3.1",
|
||||
"emotion-theming": "^10.0.27",
|
||||
"gatsby": "^3.9.1",
|
||||
"gatsby-plugin-algolia-docsearch": "^1.0.5",
|
||||
"gatsby-plugin-anchor-links": "^1.1.1",
|
||||
"gatsby-plugin-dark-mode": "^1.1.2",
|
||||
"gatsby-plugin-emotion": "^5.0.0",
|
||||
"gatsby-plugin-env-variables": "^2.1.0",
|
||||
"gatsby-plugin-preact": "^5.9.0",
|
||||
"gatsby-plugin-react-helmet": "^3.3.12",
|
||||
"gatsby-plugin-segment-js": "^3.7.1",
|
||||
"gatsby-plugin-sitemap": "^5.15.0",
|
||||
"gatsby-plugin-theme-ui": "^0.10.1",
|
||||
"gatsby-remark-autolink-headers": "^4.6.0",
|
||||
"gatsby-source-filesystem": "^3.9.0",
|
||||
"gatsby-source-openapi-aggregate": "^0.3.0",
|
||||
"gatsby-transformer-json": "^3.0.0",
|
||||
"gatsby-transformer-remark": "^4.6.0",
|
||||
"gatsby-transformer-yaml": "^2.4.13",
|
||||
"lodash.throttle": "^4.1.1",
|
||||
"preact": "^10.5.14",
|
||||
"preact-render-to-string": "^5.1.19",
|
||||
"prismjs": "^1.24.1",
|
||||
"react": "^16.12.0",
|
||||
"react-collapsible": "^2.8.1",
|
||||
"react-dom": "^16.12.0",
|
||||
"react-helmet": "^6.1.0",
|
||||
"react-highlight.js": "^1.0.7",
|
||||
"react-intersection-observer": "^8.29.0",
|
||||
"react-markdown": "^5.0.3",
|
||||
"react-tooltip": "^4.2.10",
|
||||
"react-virtualized": "^9.22.3",
|
||||
"theme-ui": "^0.10.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"prettier": "2.1.2"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/medusajs/medusa"
|
||||
}
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<svg height="10" width="10" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" fill="#fff" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<title>Clipboard</title>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M435.2,51.2H384v102.4H128V51.2H76.8c-15.36,0-25.6,10.24-25.6,25.6v409.6c0,15.36,10.24,25.6,25.6,25.6h358.4
|
||||
c15.36,0,25.6-10.24,25.6-25.6V76.8C460.8,61.44,450.56,51.2,435.2,51.2z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M307.2,0H204.8c-15.36,0-25.6,10.24-25.6,25.6v76.8h153.6V25.6C332.8,10.24,322.56,0,307.2,0z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 707 B |
@@ -1,9 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="33px" height="33px" viewBox="0 0 33 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>GitHub</title>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="GitHub-Mark" transform="translate(-136.000000, -331.000000)" fill="#fff">
|
||||
<path d="M152.608,331.455 C143.614,331.455 136.32,338.748 136.32,347.745 C136.32,354.942 140.987,361.047 147.46,363.201 C148.275,363.351 148.572,362.848 148.572,362.416 C148.572,362.029 148.558,361.005 148.55,359.646 C144.019,360.63 143.063,357.462 143.063,357.462 C142.322,355.58 141.254,355.079 141.254,355.079 C139.775,354.069 141.366,354.089 141.366,354.089 C143.001,354.204 143.861,355.768 143.861,355.768 C145.314,358.257 147.674,357.538 148.602,357.121 C148.75,356.069 149.171,355.351 149.636,354.944 C146.019,354.533 142.216,353.135 142.216,346.893 C142.216,345.115 142.851,343.66 143.893,342.522 C143.725,342.11 143.166,340.453 144.053,338.211 C144.053,338.211 145.42,337.773 148.532,339.881 C149.831,339.519 151.225,339.339 152.61,339.332 C153.994,339.339 155.387,339.519 156.688,339.881 C159.798,337.773 161.163,338.211 161.163,338.211 C162.052,340.453 161.493,342.11 161.326,342.522 C162.37,343.66 163,345.115 163,346.893 C163,353.151 159.191,354.528 155.563,354.931 C156.147,355.434 156.668,356.428 156.668,357.947 C156.668,360.125 156.648,361.882 156.648,362.416 C156.648,362.852 156.942,363.359 157.768,363.2 C164.236,361.041 168.899,354.94 168.899,347.745 C168.899,338.748 161.605,331.455 152.608,331.455" id="Fill-51"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
@@ -1,9 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="33px" height="33px" viewBox="0 0 33 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>GitHub</title>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="GitHub-Mark" transform="translate(-136.000000, -331.000000)" fill="#000">
|
||||
<path d="M152.608,331.455 C143.614,331.455 136.32,338.748 136.32,347.745 C136.32,354.942 140.987,361.047 147.46,363.201 C148.275,363.351 148.572,362.848 148.572,362.416 C148.572,362.029 148.558,361.005 148.55,359.646 C144.019,360.63 143.063,357.462 143.063,357.462 C142.322,355.58 141.254,355.079 141.254,355.079 C139.775,354.069 141.366,354.089 141.366,354.089 C143.001,354.204 143.861,355.768 143.861,355.768 C145.314,358.257 147.674,357.538 148.602,357.121 C148.75,356.069 149.171,355.351 149.636,354.944 C146.019,354.533 142.216,353.135 142.216,346.893 C142.216,345.115 142.851,343.66 143.893,342.522 C143.725,342.11 143.166,340.453 144.053,338.211 C144.053,338.211 145.42,337.773 148.532,339.881 C149.831,339.519 151.225,339.339 152.61,339.332 C153.994,339.339 155.387,339.519 156.688,339.881 C159.798,337.773 161.163,338.211 161.163,338.211 C162.052,340.453 161.493,342.11 161.326,342.522 C162.37,343.66 163,345.115 163,346.893 C163,353.151 159.191,354.528 155.563,354.931 C156.147,355.434 156.668,356.428 156.668,357.947 C156.668,360.125 156.648,361.882 156.648,362.416 C156.648,362.852 156.942,363.359 157.768,363.2 C164.236,361.041 168.899,354.94 168.899,347.745 C168.899,338.748 161.605,331.455 152.608,331.455" id="Fill-51"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
@@ -1,15 +0,0 @@
|
||||
<svg width="408" height="96" viewBox="0 0 408 96" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M160.04 69H151V45.56C151 42.9466 150.36 40.8933 149.08 39.4C147.8 37.8533 146.04 37.08 143.8 37.08C141.24 37.08 139.24 37.9333 137.8 39.64C136.413 41.3467 135.72 43.6933 135.72 46.68V69H126.6V29.8H135.56V33.24C138.013 30.3066 141.4 28.84 145.72 28.84C150.573 28.84 154.226 30.5466 156.68 33.96C159.72 30.5466 163.8 28.84 168.92 28.84C174.04 28.84 177.906 30.3333 180.52 33.32C183.186 36.2533 184.52 40.5466 184.52 46.2V69H175.4V45.56C175.4 42.9466 174.76 40.8933 173.48 39.4C172.2 37.8533 170.44 37.08 168.2 37.08C165.64 37.08 163.64 37.96 162.2 39.72C160.76 41.4266 160.04 43.7467 160.04 46.68V69Z" fill="white"/>
|
||||
<path d="M228.886 48.92L228.806 52.12H202.006C202.22 55.0533 203.26 57.3733 205.126 59.08C206.993 60.7866 209.393 61.64 212.326 61.64C216.54 61.64 219.9 59.8 222.406 56.12L228.566 61.88C224.406 67.2133 218.993 69.88 212.326 69.88C206.406 69.88 201.66 68.0133 198.086 64.28C194.46 60.4933 192.646 55.6133 192.646 49.64C192.646 43.8267 194.3 38.8933 197.606 34.84C200.966 30.84 205.42 28.84 210.966 28.84C216.886 28.84 221.34 30.8133 224.326 34.76C227.366 38.7067 228.886 43.4267 228.886 48.92ZM211.046 37.16C208.753 37.16 206.86 37.88 205.366 39.32C203.926 40.76 202.966 42.6 202.486 44.84H219.206C219.153 42.6533 218.433 40.84 217.046 39.4C215.66 37.9067 213.66 37.16 211.046 37.16Z" fill="white"/>
|
||||
<path d="M255.751 28.84C260.124 28.84 263.778 30.12 266.711 32.68V12.92H275.831V69H266.871V65.48C264.098 68.4133 260.391 69.88 255.751 69.88C250.204 69.88 245.618 67.96 241.991 64.12C238.418 60.2267 236.631 55.32 236.631 49.4C236.631 43.48 238.418 38.5733 241.991 34.68C245.564 30.7867 250.151 28.84 255.751 28.84ZM264.071 40.44C262.204 38.0933 259.644 36.92 256.391 36.92C253.138 36.92 250.578 38.0933 248.711 40.44C246.844 42.7866 245.911 45.7733 245.911 49.4C245.911 53.0267 246.844 56.0133 248.711 58.36C250.578 60.7067 253.138 61.88 256.391 61.88C259.644 61.88 262.204 60.7067 264.071 58.36C265.938 56.0133 266.871 53.0267 266.871 49.4C266.871 45.7733 265.938 42.7866 264.071 40.44Z" fill="white"/>
|
||||
<path d="M285.872 29.8H294.992V53.24C294.992 55.8533 295.632 57.9333 296.912 59.48C298.192 60.9733 300.005 61.72 302.352 61.72C304.859 61.72 306.832 60.84 308.272 59.08C309.765 57.2667 310.512 54.8666 310.512 51.88V29.8H319.632V69H310.672V65.8C308.165 68.52 304.779 69.88 300.512 69.88C296.032 69.88 292.459 68.36 289.792 65.32C287.179 62.2267 285.872 57.9866 285.872 52.6V29.8Z" fill="white"/>
|
||||
<path d="M346.658 54.2L341.458 52.92C333.512 51.0533 329.538 46.92 329.538 40.52C329.538 37 330.872 34.1733 333.538 32.04C336.205 29.9067 339.645 28.84 343.858 28.84C349.512 28.84 354.445 31.0266 358.658 35.4L352.818 41.64C350.418 38.3333 347.352 36.68 343.618 36.68C342.018 36.68 340.712 37.0533 339.698 37.8C338.738 38.4933 338.258 39.3467 338.258 40.36C338.258 42.1733 339.538 43.4 342.098 44.04L348.258 45.48C356.258 47.2933 360.258 51.3733 360.258 57.72C360.258 61.3467 358.872 64.28 356.098 66.52C353.378 68.76 349.592 69.88 344.738 69.88C337.912 69.88 332.498 67.3466 328.498 62.28L334.258 56.36C337.138 60.1467 340.872 62.04 345.458 62.04C349.458 62.04 351.458 60.7067 351.458 58.04C351.458 56.3333 349.858 55.0533 346.658 54.2Z" fill="white"/>
|
||||
<path d="M379.911 69.88C376.124 69.88 372.978 68.8133 370.471 66.68C367.964 64.4933 366.711 61.5867 366.711 57.96C366.711 53.8 368.204 50.5733 371.191 48.28C374.178 45.9866 378.124 44.84 383.031 44.84C385.484 44.84 388.124 45.2933 390.951 46.2V43.56C390.951 41.64 390.231 40.0933 388.791 38.92C387.351 37.6933 385.511 37.08 383.271 37.08C379.164 37.08 376.071 38.9733 373.991 42.76L367.831 37C369.271 34.3867 371.378 32.3867 374.151 31C376.978 29.56 380.044 28.84 383.351 28.84C388.524 28.84 392.604 30.12 395.591 32.68C398.578 35.24 400.071 38.8933 400.071 43.64V69H391.111V65.96C388.178 68.5733 384.444 69.88 379.911 69.88ZM375.831 57.32C375.831 58.6533 376.338 59.7467 377.351 60.6C378.418 61.4533 379.884 61.88 381.751 61.88C385.591 61.88 388.658 60.76 390.951 58.52V54.04C388.071 52.9733 385.351 52.44 382.791 52.44C380.658 52.44 378.951 52.8666 377.671 53.72C376.444 54.5733 375.831 55.7733 375.831 57.32Z" fill="white"/>
|
||||
<path d="M77.707 15.5831L56.0329 3.0766C48.9414 -1.02553 40.2518 -1.02553 33.1603 3.0766L11.3864 15.5831C4.39474 19.6853 0 27.2892 0 35.3934V60.5065C0 68.7108 4.39474 76.2147 11.3864 80.3168L33.0604 92.9234C40.1519 97.0255 48.8415 97.0255 55.933 92.9234L77.6071 80.3168C84.6986 76.2147 88.9935 68.7108 88.9935 60.5065V35.3934C89.1932 27.2892 84.7985 19.6853 77.707 15.5831ZM44.5467 70.3116C32.2614 70.3116 22.2733 60.3064 22.2733 48C22.2733 35.6936 32.2614 25.6884 44.5467 25.6884C56.832 25.6884 66.9199 35.6936 66.9199 48C66.9199 60.3064 56.9318 70.3116 44.5467 70.3116Z" fill="url(#paint0_linear_593_870)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_593_870" x1="0" y1="96" x2="107.4" y2="66.105" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#7C53FF"/>
|
||||
<stop offset="1" stop-color="#F796FF"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 4.9 KiB |
@@ -1,9 +0,0 @@
|
||||
<svg width="602" height="122" viewBox="0 0 602 122" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="602" height="122" fill="none"/>
|
||||
<path d="M95.0625 0H129.431V119.437H108.713V18.0375L75.5625 119.437H53.8688L20.7188 19.2562V119.437H0V0H34.6125L64.8375 95.7937L95.0625 0Z" fill="#89959C"/>
|
||||
<path d="M233.756 92.3826C228.881 110.42 213.525 121.633 192.319 121.633C165.75 121.633 148.688 103.595 148.688 76.5388C148.688 49.4826 165.75 31.4451 192.806 31.4451C222.788 31.4451 238.387 53.8701 230.1 81.9014H169.406C171.112 96.0389 178.913 104.326 192.562 104.326C202.069 104.326 209.625 99.9389 212.55 92.1389H233.756V92.3826ZM169.894 68.2514H211.819C213.037 56.0639 205.969 48.0201 192.562 48.0201C179.888 48.0201 171.844 55.0889 169.894 68.2514Z" fill="#89959C"/>
|
||||
<path d="M312.244 0.000396729H331.744V119.438H312.244V106.763C305.663 116.269 295.669 121.875 283.238 121.875C260.813 121.875 244.725 103.838 244.725 76.7816C244.725 49.7254 260.325 31.6879 283.238 31.6879C295.669 31.6879 305.663 37.0504 312.244 46.8004V0.000396729V0.000396729ZM312.975 76.7816C312.975 59.9629 303.469 48.7504 289.088 48.7504C274.463 48.7504 264.956 59.9629 264.956 76.7816C264.956 93.6004 274.463 104.813 289.088 104.813C303.469 104.569 312.975 93.6004 312.975 76.7816Z" fill="#89959C"/>
|
||||
<path d="M403.894 34.1264H423.394V119.439H403.894V104.083C397.8 115.539 388.294 121.389 376.35 121.389C352.706 121.389 348.806 97.7451 348.806 82.6326V33.8826H368.306V82.3889C368.306 93.6014 370.987 104.326 383.175 104.326C395.85 104.326 403.894 93.1139 403.894 77.2701V34.1264Z" fill="#89959C"/>
|
||||
<path d="M437.775 88.7263H456.544C455.325 99.2076 463.125 106.033 476.531 106.033C487.013 106.033 493.838 101.889 493.838 95.7951C493.838 78.7326 438.994 90.9201 438.994 58.9889C438.994 41.9264 454.838 31.4451 475.556 31.4451C498.469 31.4451 515.044 44.1201 511.387 63.6201H492.375C494.813 53.8701 487.013 47.2888 475.313 47.2888C465.319 47.2888 458.981 51.6764 458.981 57.7701C458.981 75.0764 514.069 61.9139 514.069 94.3326C514.069 111.639 498.469 121.633 476.287 121.633C452.156 121.633 436.313 109.445 437.775 88.7263Z" fill="#89959C"/>
|
||||
<path d="M601.331 70.9316V119.438H583.293V104.569C576.956 115.538 566.475 121.875 552.581 121.875C534.544 121.875 523.331 111.394 523.331 96.5254C523.331 79.2191 538.444 68.9816 562.331 68.9816C568.912 68.9816 575.737 69.7129 581.831 71.1754C581.831 58.2566 577.2 48.7504 563.55 48.7504C553.312 48.7504 546.975 53.8691 548.925 63.3754H529.181C524.55 44.3629 541.369 31.6879 563.55 31.6879C588.656 31.6879 601.331 47.0441 601.331 70.9316ZM582.562 85.8004C576.956 83.8504 570.131 82.8754 564.037 82.8754C550.144 82.8754 543.319 87.9941 543.319 95.7941C543.319 102.619 548.437 106.275 556.725 106.275C569.156 106.275 579.394 98.2316 582.562 85.8004Z" fill="#89959C"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.7 KiB |
@@ -1,15 +0,0 @@
|
||||
<svg width="204" height="49" viewBox="0 0 204 49" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M81.4167 35.7292H76.8178V23.765C76.8178 22.4311 76.4922 21.383 75.841 20.6208C75.1898 19.8314 74.2945 19.4366 73.1549 19.4366C71.8526 19.4366 70.8351 19.8722 70.1025 20.7433C69.3971 21.6144 69.0444 22.8122 69.0444 24.3367V35.7292H64.4048V15.7208H68.963V17.4766C70.2111 15.9794 71.934 15.2308 74.1317 15.2308C76.6007 15.2308 78.4592 16.1019 79.7073 17.8441C81.2539 16.1019 83.3295 15.2308 85.9342 15.2308C88.5389 15.2308 90.5059 15.993 91.8354 17.5175C93.192 19.0147 93.8703 21.2061 93.8703 24.0916V35.7292H89.2307V23.765C89.2307 22.4311 88.9051 21.383 88.254 20.6208C87.6028 19.8314 86.7074 19.4366 85.5679 19.4366C84.2655 19.4366 83.2481 19.8858 82.5155 20.7841C81.7829 21.6553 81.4167 22.8394 81.4167 24.3367V35.7292Z" fill="#111827"/>
|
||||
<path d="M116.441 25.48L116.4 27.1133H102.766C102.875 28.6105 103.404 29.7947 104.354 30.6658C105.303 31.5369 106.524 31.9725 108.016 31.9725C110.16 31.9725 111.869 31.0333 113.144 29.155L116.278 32.095C114.162 34.8172 111.408 36.1783 108.016 36.1783C105.005 36.1783 102.59 35.2255 100.772 33.32C98.9272 31.3872 98.0047 28.8964 98.0047 25.8475C98.0047 22.8803 98.8458 20.3622 100.528 18.2933C102.237 16.2516 104.503 15.2308 107.325 15.2308C110.336 15.2308 112.602 16.238 114.121 18.2525C115.668 20.2669 116.441 22.6761 116.441 25.48ZM107.365 19.4775C106.199 19.4775 105.235 19.845 104.476 20.58C103.743 21.315 103.255 22.2542 103.011 23.3975H111.517C111.489 22.2814 111.123 21.3558 110.418 20.6208C109.712 19.8586 108.695 19.4775 107.365 19.4775Z" fill="#111827"/>
|
||||
<path d="M130.108 15.2308C132.332 15.2308 134.191 15.8841 135.683 17.1908V7.10498H140.323V35.7292H135.765V33.9325C134.354 35.4297 132.468 36.1783 130.108 36.1783C127.286 36.1783 124.953 35.1983 123.108 33.2383C121.29 31.2511 120.381 28.7467 120.381 25.725C120.381 22.7033 121.29 20.1989 123.108 18.2116C124.925 16.2244 127.259 15.2308 130.108 15.2308ZM134.34 21.1516C133.391 19.9539 132.088 19.355 130.433 19.355C128.778 19.355 127.476 19.9539 126.526 21.1516C125.577 22.3494 125.102 23.8739 125.102 25.725C125.102 27.5761 125.577 29.1005 126.526 30.2983C127.476 31.4961 128.778 32.095 130.433 32.095C132.088 32.095 133.391 31.4961 134.34 30.2983C135.29 29.1005 135.765 27.5761 135.765 25.725C135.765 23.8739 135.29 22.3494 134.34 21.1516Z" fill="#111827"/>
|
||||
<path d="M145.431 15.7208H150.071V27.685C150.071 29.0189 150.396 30.0805 151.048 30.87C151.699 31.6322 152.621 32.0133 153.815 32.0133C155.09 32.0133 156.094 31.5642 156.827 30.6658C157.586 29.7403 157.966 28.5153 157.966 26.9908V15.7208H162.606V35.7292H158.048V34.0958C156.772 35.4842 155.05 36.1783 152.879 36.1783C150.6 36.1783 148.782 35.4025 147.425 33.8508C146.096 32.2719 145.431 30.1078 145.431 27.3583V15.7208Z" fill="#111827"/>
|
||||
<path d="M176.355 28.175L173.709 27.5217C169.667 26.5689 167.645 24.4592 167.645 21.1925C167.645 19.3958 168.324 17.953 169.68 16.8642C171.037 15.7753 172.787 15.2308 174.93 15.2308C177.806 15.2308 180.316 16.3469 182.46 18.5791L179.489 21.7642C178.268 20.0764 176.708 19.2325 174.808 19.2325C173.994 19.2325 173.33 19.423 172.814 19.8041C172.326 20.158 172.082 20.5936 172.082 21.1108C172.082 22.0364 172.733 22.6625 174.035 22.9892L177.169 23.7242C181.239 24.6497 183.274 26.7322 183.274 29.9717C183.274 31.8228 182.568 33.32 181.157 34.4633C179.774 35.6067 177.847 36.1783 175.378 36.1783C171.905 36.1783 169.151 34.8853 167.116 32.2992L170.047 29.2775C171.512 31.2103 173.411 32.1767 175.744 32.1767C177.779 32.1767 178.797 31.4961 178.797 30.135C178.797 29.2639 177.983 28.6105 176.355 28.175Z" fill="#111827"/>
|
||||
<path d="M193.271 36.1783C191.345 36.1783 189.744 35.6339 188.469 34.545C187.194 33.4289 186.556 31.9453 186.556 30.0942C186.556 27.9708 187.316 26.3239 188.835 25.1533C190.355 23.9828 192.362 23.3975 194.859 23.3975C196.107 23.3975 197.45 23.6289 198.888 24.0916V22.7442C198.888 21.7642 198.521 20.9747 197.789 20.3758C197.056 19.7497 196.12 19.4366 194.981 19.4366C192.892 19.4366 191.318 20.403 190.26 22.3358L187.126 19.3958C187.858 18.0619 188.93 17.0411 190.341 16.3333C191.779 15.5983 193.339 15.2308 195.021 15.2308C197.653 15.2308 199.729 15.8841 201.248 17.1908C202.768 18.4975 203.527 20.3622 203.527 22.785V35.7292H198.969V34.1775C197.477 35.5114 195.578 36.1783 193.271 36.1783ZM191.196 29.7675C191.196 30.448 191.453 31.0061 191.969 31.4417C192.512 31.8772 193.258 32.095 194.207 32.095C196.161 32.095 197.721 31.5233 198.888 30.38V28.0933C197.423 27.5489 196.039 27.2767 194.736 27.2767C193.651 27.2767 192.783 27.4944 192.132 27.93C191.508 28.3655 191.196 28.978 191.196 29.7675Z" fill="#111827"/>
|
||||
<path d="M39.5317 7.95388L28.5055 1.57035C24.8979 -0.52345 20.4772 -0.52345 16.8696 1.57035L5.79257 7.95388C2.23573 10.0477 0 13.9289 0 18.0654V30.8835C0 35.0711 2.23573 38.9013 5.79257 40.9951L16.8188 47.4297C20.4264 49.5234 24.8471 49.5234 28.4547 47.4297L39.4809 40.9951C43.0886 38.9013 45.2735 35.0711 45.2735 30.8835V18.0654C45.3751 13.9289 43.1394 10.0477 39.5317 7.95388ZM22.6621 35.8882C16.4123 35.8882 11.3311 30.7814 11.3311 24.5C11.3311 18.2186 16.4123 13.1118 22.6621 13.1118C28.912 13.1118 34.044 18.2186 34.044 24.5C34.044 30.7814 28.9628 35.8882 22.6621 35.8882Z" fill="url(#paint0_linear_107_5)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_107_5" x1="-1.75721e-09" y1="24.5" x2="45.2768" y2="24.5" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#7C53FF"/>
|
||||
<stop offset="1" stop-color="#F796FF"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 5.4 KiB |
@@ -1,17 +0,0 @@
|
||||
.dark-mode-toggler {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
margin-left: 5px;
|
||||
color: var(--theme-ui-colors-text)
|
||||
}
|
||||
|
||||
.dark-mode-toggler:hover {
|
||||
background-color: #00000010;
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
import "./index.css"
|
||||
|
||||
import DarkMode from "../icons/dark-mode"
|
||||
import LightMode from "../icons/light-mode"
|
||||
import React from 'react'
|
||||
import { ThemeToggler } from 'gatsby-plugin-dark-mode'
|
||||
import { useColorMode } from 'theme-ui'
|
||||
|
||||
const isBrowser = typeof window !== "undefined"
|
||||
|
||||
export default function ColorModeToggler () {
|
||||
const [, setColorMode] = useColorMode()
|
||||
|
||||
function checkLocalStorage (currentTheme, toggleTheme) {
|
||||
//check that theme local storage values are set correctly
|
||||
if (!isBrowser) {
|
||||
return currentTheme;
|
||||
}
|
||||
let themeUiColorMode = window.localStorage.getItem('theme-ui-color-mode');
|
||||
let theme = window.localStorage.getItem('theme')
|
||||
if (!themeUiColorMode) {
|
||||
themeUiColorMode = theme || currentTheme
|
||||
window.localStorage.setItem('theme-ui-color-mode', themeUiColorMode);
|
||||
setColorMode(themeUiColorMode);
|
||||
}
|
||||
if (!theme) {
|
||||
theme = themeUiColorMode || currentTheme
|
||||
window.localStorage.setItem('theme', theme);
|
||||
toggleTheme(theme)
|
||||
}
|
||||
|
||||
return theme || themeUiColorMode || currentTheme;
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeToggler>
|
||||
{({ theme, toggleTheme }) => {
|
||||
const currentTheme = checkLocalStorage(theme, toggleTheme);
|
||||
return (
|
||||
<button onClick={() => {
|
||||
const mode = currentTheme === 'dark' ? 'light' : 'dark';
|
||||
toggleTheme(mode);
|
||||
setColorMode(mode);
|
||||
}} className="dark-mode-toggler">
|
||||
{currentTheme === "light" && <LightMode />}
|
||||
{currentTheme === "dark" && <DarkMode />}
|
||||
</button>
|
||||
);
|
||||
}}
|
||||
</ThemeToggler>
|
||||
)
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
import { Box, Text } from "theme-ui"
|
||||
import React, { useState } from "react"
|
||||
|
||||
import Clipboard from '../icons/clipboard'
|
||||
import ReactTooltip from "react-tooltip"
|
||||
import copy from 'copy-to-clipboard'
|
||||
import styled from "@emotion/styled"
|
||||
|
||||
const StyledTooltip = ({id, text}) => {
|
||||
const StyledTooltip = styled(ReactTooltip)`
|
||||
box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.08),
|
||||
0px 0px 0px 1px rgba(136, 152, 170, 0.1),
|
||||
0px 4px 4px 0px rgba(136, 152, 170, 0.1) !important;
|
||||
padding: 8px 12px;
|
||||
&:after {
|
||||
margin-right: 4px;
|
||||
}
|
||||
&.show {
|
||||
opacity: 1;
|
||||
}
|
||||
`
|
||||
return(
|
||||
<StyledTooltip
|
||||
place="top"
|
||||
backgroundColor='#FFF'
|
||||
textColor='black'
|
||||
effect="solid"
|
||||
id={id}
|
||||
sx={{ boxShadow: `0px 5px 15px 0px rgba(0, 0, 0, 0.08),
|
||||
0px 0px 0px 1px rgba(136, 152, 170, 0.1),
|
||||
0px 4px 4px 0px rgba(136, 152, 170, 0.1) !important`,
|
||||
padding: `8px 12px`
|
||||
}}
|
||||
>
|
||||
<Text>{text}</Text>
|
||||
</StyledTooltip>
|
||||
)
|
||||
}
|
||||
|
||||
const CopyToClipboard = ({text, copyText, tooltipText}) => {
|
||||
const [copied, setCopied] = useState(false)
|
||||
const id = (Math.random()*1000000).toString()
|
||||
const forceTooltipRemount = copied ? "content-1" : "content-2"
|
||||
|
||||
const onCopyClicked = () => {
|
||||
copy(copyText || tooltipText, {format: 'text/plain'})
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
mr={1}
|
||||
onMouseLeave={() => {setCopied(false)}}
|
||||
onClick={() => {
|
||||
setCopied(true)
|
||||
onCopyClicked()
|
||||
}}
|
||||
data-for={id}
|
||||
data-tip={forceTooltipRemount}
|
||||
key={forceTooltipRemount}
|
||||
sx={{cursor: 'pointer'}}
|
||||
>
|
||||
{
|
||||
text && (
|
||||
<Text variant="small" mr={2} sx={{ fontWeight: "300" }}>
|
||||
{text.toUpperCase()}
|
||||
</Text>)
|
||||
}
|
||||
<Clipboard/>
|
||||
{copied ?
|
||||
<StyledTooltip id={id} text={"Copied!"} />
|
||||
:
|
||||
<StyledTooltip id={id} text={tooltipText} />
|
||||
}
|
||||
</Box>)
|
||||
}
|
||||
|
||||
export default CopyToClipboard
|
||||
@@ -1,72 +0,0 @@
|
||||
import { Box, Flex, Text } from "theme-ui"
|
||||
|
||||
import CopyToClipboard from "../CopyToClipboard"
|
||||
import React from "react"
|
||||
|
||||
const CodeBox = ({ header, children, shell, content, allowCopy }) => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
background: "fadedContrast",
|
||||
borderRadius: "small",
|
||||
boxShadow: "0 0 0 1px var(--theme-ui-colors-primaryLight)",
|
||||
alignSelf: "flex-start",
|
||||
marginLeft: "auto",
|
||||
marginRight: "auto",
|
||||
width: "100%",
|
||||
mb: "4",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
bg: "primary",
|
||||
p: "8px 10px",
|
||||
letterSpacing: "0.01em",
|
||||
borderRadius: "8px 8px 0 0",
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
sx={{
|
||||
height: "100%",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "baseline",
|
||||
}}
|
||||
>
|
||||
<Text variant="small" sx={{ fontWeight: "400", color: "light" }}>
|
||||
{header.toUpperCase()}
|
||||
</Text>
|
||||
{allowCopy ? (
|
||||
<CopyToClipboard
|
||||
copyText={content}
|
||||
tooltipText={"Copy to clipboard"}
|
||||
/>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</Flex>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
boxSizing: "content-box",
|
||||
maxHeight: "calc(90vh - 20px)",
|
||||
minHeight: "10px",
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: "column",
|
||||
position: "relative",
|
||||
minHeight: "inherit",
|
||||
maxHeight: "inherit",
|
||||
overflowY: "auto",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Flex>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default CodeBox
|
||||
@@ -1,130 +0,0 @@
|
||||
import React, { useState } from "react"
|
||||
import Collapsible from "react-collapsible"
|
||||
import { Flex, Box, Text, Heading } from "theme-ui"
|
||||
import Markdown from "react-markdown"
|
||||
import Description from "./description"
|
||||
|
||||
const NestedCollapsible = ({ properties, title }) => {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
return (
|
||||
<Box
|
||||
mt={2}
|
||||
sx={{
|
||||
"& .child-attrs": {
|
||||
cursor: "pointer",
|
||||
fontSize: "12px",
|
||||
p: "6px 10px",
|
||||
boxSizing: "border-box",
|
||||
width: "max-content",
|
||||
borderRadius: "small",
|
||||
border: "1px solid",
|
||||
borderColor: "faded",
|
||||
},
|
||||
|
||||
"& .child-attrs.is-open": {
|
||||
width: "100%",
|
||||
borderBottom: "none",
|
||||
borderBottomLeftRadius: "0",
|
||||
borderBottomRightRadius: "0",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Collapsible
|
||||
transitionTime={50}
|
||||
triggerClassName={"child-attrs"}
|
||||
triggerOpenedClassName={"child-attrs"}
|
||||
triggerTagName="div"
|
||||
trigger={
|
||||
<Flex
|
||||
sx={{
|
||||
alignItems: "baseline",
|
||||
fontSize: "13px",
|
||||
fontWeight: "400",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
mr={1}
|
||||
className={isOpen ? "rotated" : null}
|
||||
sx={{
|
||||
userSelect: "none",
|
||||
transition: "all 0.2s ease",
|
||||
transform: "rotate(45deg)",
|
||||
"&.rotated": {
|
||||
transform: "rotate(0deg)",
|
||||
},
|
||||
}}
|
||||
>
|
||||
×
|
||||
</Box>{" "}
|
||||
<Text
|
||||
sx={{ fontSize: "0", fontFamily: "body", userSelect: "none" }}
|
||||
>{`${isOpen ? "Hide" : "Show"} child attributes`}</Text>
|
||||
</Flex>
|
||||
}
|
||||
onTriggerOpening={() => setIsOpen(true)}
|
||||
onTriggerClosing={() => setIsOpen(false)}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
padding: "2",
|
||||
borderRadius: "small",
|
||||
borderTopLeftRadius: 0,
|
||||
borderTopRightRadius: 0,
|
||||
border: "hairline",
|
||||
borderColor: "faded",
|
||||
}}
|
||||
mb="2"
|
||||
>
|
||||
<Heading as="h3" p={2} sx={{ fontFamily: "body", fontWeight: "500" }}>
|
||||
{title}
|
||||
</Heading>
|
||||
{properties.map((param, i) => {
|
||||
return (
|
||||
<Box
|
||||
p={2}
|
||||
sx={{
|
||||
borderTop: "hairline",
|
||||
}}
|
||||
key={i}
|
||||
>
|
||||
<Flex
|
||||
sx={{
|
||||
fontSize: "0",
|
||||
alignItems: "baseline",
|
||||
pb: "1",
|
||||
fontFamily: "monospace",
|
||||
}}
|
||||
>
|
||||
<Box mr={2} fontSize={"12px"}>
|
||||
{param.property}
|
||||
</Box>
|
||||
<Text color={"gray"} fontSize={"10px"}>
|
||||
{param.type}
|
||||
</Text>
|
||||
{param.required && (
|
||||
<Text ml={1} fontSize={"10px"} variant="labels.required">
|
||||
required
|
||||
</Text>
|
||||
)}
|
||||
</Flex>
|
||||
<Description>
|
||||
<Text
|
||||
sx={{
|
||||
fontSize: "0",
|
||||
lineHeight: "26px",
|
||||
fontFamily: "body",
|
||||
}}
|
||||
>
|
||||
<Markdown>{param.description}</Markdown>
|
||||
</Text>
|
||||
</Description>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
</Collapsible>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default NestedCollapsible
|
||||
@@ -1,20 +0,0 @@
|
||||
import React from "react"
|
||||
import { Box } from "theme-ui"
|
||||
|
||||
const Description = ({ children }) => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
code: {
|
||||
backgroundColor: "faded",
|
||||
borderRadius: "4px",
|
||||
p: "3px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default Description
|
||||
@@ -1,45 +0,0 @@
|
||||
import React from "react"
|
||||
import { Flex, Text } from "theme-ui"
|
||||
import CodeBox from "./code-box"
|
||||
|
||||
const EndpointContainer = ({ endpoints }) => {
|
||||
if (!endpoints) return null
|
||||
|
||||
return (
|
||||
<CodeBox header="ENDPOINTS">
|
||||
<Flex
|
||||
py={2}
|
||||
sx={{
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
{endpoints.map((e, i) => {
|
||||
const method = e.method.toUpperCase()
|
||||
const endpoint = e.endpoint
|
||||
return (
|
||||
<Flex
|
||||
key={i}
|
||||
sx={{ fontSize: "0", fontFamily: "monospace", px: "3", py: "2" }}
|
||||
>
|
||||
<Text
|
||||
variant={`labels.${method}`}
|
||||
sx={{
|
||||
width: "55px",
|
||||
textAlign: "right",
|
||||
}}
|
||||
mr={2}
|
||||
>
|
||||
{method}
|
||||
</Text>
|
||||
<Text sx={{ color: "dark" }}>
|
||||
{endpoint.replace(/{(.*?)}/g, ":$1")}
|
||||
</Text>
|
||||
</Flex>
|
||||
)
|
||||
})}
|
||||
</Flex>
|
||||
</CodeBox>
|
||||
)
|
||||
}
|
||||
|
||||
export default EndpointContainer
|
||||
@@ -1,30 +0,0 @@
|
||||
import { Box, Flex } from "theme-ui"
|
||||
|
||||
import React from "react"
|
||||
import Section from "./section"
|
||||
import Topbar from "../topbar"
|
||||
|
||||
const Content = ({ data, currentSection, api }) => {
|
||||
return (
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<Topbar data={data} api={api} />
|
||||
<Box
|
||||
sx={{
|
||||
maxHeight: "calc(100vh - 50px)",
|
||||
overflowY: "scroll",
|
||||
"@media screen and (max-width: 848px)": {
|
||||
mt: "50px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Section data={currentSection} api={api} />
|
||||
</Box>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
|
||||
export default Content
|
||||
@@ -1,42 +0,0 @@
|
||||
import React, { useRef, useEffect } from "react"
|
||||
import { Box } from "theme-ui"
|
||||
import "../../medusa-plugin-themes/prism/theme.css"
|
||||
import Prism from "prismjs"
|
||||
import "prismjs/components/prism-json"
|
||||
import CodeBox from "./code-box"
|
||||
|
||||
const JsonContainer = ({ json, header, language, allowCopy }) => {
|
||||
const jsonRef = useRef()
|
||||
|
||||
const codeClass = language
|
||||
? language === "shell"
|
||||
? "language-shell"
|
||||
: "language-json"
|
||||
: "language-json"
|
||||
|
||||
//INVESTIGATE: @theme-ui/prism might be a better solution
|
||||
useEffect(() => {
|
||||
if (jsonRef.current) {
|
||||
Prism.highlightAllUnder(jsonRef.current)
|
||||
}
|
||||
}, [])
|
||||
|
||||
if (typeof json !== "string" || json === "{}") return null
|
||||
|
||||
return (
|
||||
<Box ref={jsonRef} sx={{ position: "sticky", top: "20px" }}>
|
||||
<CodeBox
|
||||
allowCopy={allowCopy}
|
||||
content={json}
|
||||
shell={language === "shell"}
|
||||
header={header}
|
||||
>
|
||||
<pre>
|
||||
<code className={codeClass}>{json}</code>
|
||||
</pre>
|
||||
</CodeBox>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default JsonContainer
|
||||
@@ -1,244 +0,0 @@
|
||||
import { Box, Flex, Heading, Text } from "theme-ui"
|
||||
import React, { useContext, useEffect, useRef } from "react"
|
||||
|
||||
import Description from "./description"
|
||||
import JsonContainer from "./json-container"
|
||||
import Markdown from "react-markdown"
|
||||
import NavigationContext from "../../context/navigation-context"
|
||||
import Parameters from "./parameters"
|
||||
import ResponsiveContainer from "./responsive-container"
|
||||
import Route from "./route"
|
||||
import { convertToKebabCase } from "../../utils/convert-to-kebab-case"
|
||||
import { formatMethodParams } from "../../utils/format-parameters"
|
||||
import { formatRoute } from "../../utils/format-route"
|
||||
import useInView from "../../hooks/use-in-view"
|
||||
|
||||
const Method = ({ data, section, sectionData, pathname, api }) => {
|
||||
const { parameters, requestBody, description, method, summary } = data
|
||||
const jsonResponse = data.responses[0].content?.[0].json
|
||||
const { updateHash, updateMetadata } = useContext(NavigationContext)
|
||||
const methodRef = useRef(null)
|
||||
const [containerRef, isInView] = useInView({
|
||||
root: null,
|
||||
rootMargin: "0px 0px -80% 0px",
|
||||
threshold: 0,
|
||||
})
|
||||
const formattedParameters = formatMethodParams({ parameters, requestBody })
|
||||
|
||||
useEffect(() => {
|
||||
if (isInView) {
|
||||
updateHash(section, convertToKebabCase(summary), sectionData)
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isInView])
|
||||
|
||||
const handleMetaChange = () => {
|
||||
updateMetadata({
|
||||
title: summary,
|
||||
description: description,
|
||||
})
|
||||
if (methodRef.current) {
|
||||
methodRef.current.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const getExampleValues = (type, defaultExample) => {
|
||||
switch (type) {
|
||||
case "integer":
|
||||
return 1000
|
||||
case "boolean":
|
||||
return false
|
||||
case "object":
|
||||
return {}
|
||||
default:
|
||||
return defaultExample
|
||||
}
|
||||
}
|
||||
|
||||
// extract required properties or a non-required property from a json object
|
||||
// based on the extraction method "getPropertyFromObject"
|
||||
const getPropertiesFromObject = (
|
||||
requiredProperties,
|
||||
properties,
|
||||
obj,
|
||||
res,
|
||||
getPropertyFromObject
|
||||
) => {
|
||||
for (const element of requiredProperties) {
|
||||
try {
|
||||
res[element.property] = getPropertyFromObject(obj, element.property)
|
||||
} catch (err) {}
|
||||
}
|
||||
|
||||
// if (Object.keys(res) === requiredProperties.map((p) => p.property)) {
|
||||
// return res
|
||||
// }
|
||||
|
||||
for (const element of properties) {
|
||||
try {
|
||||
res[element.property] = getPropertyFromObject(obj, element.property)
|
||||
break
|
||||
} catch (err) {}
|
||||
}
|
||||
|
||||
return res
|
||||
}
|
||||
|
||||
const getCurlJson = (properties, prefix, bodyParameters) => {
|
||||
if (!properties[0] || !jsonResponse) {
|
||||
return
|
||||
}
|
||||
const jsonObject = JSON.parse(jsonResponse)
|
||||
const pathParts = pathname.split("/")
|
||||
const requiredProperties = bodyParameters.filter((p) => p.required)
|
||||
|
||||
let res = {}
|
||||
|
||||
// if the endpoint is for a relation i.e. /orders/:id/shipment drill down into the properties of the json object
|
||||
if (pathParts.length > 3) {
|
||||
const propertyIndex = pathParts[2].match(/{[A-Za-z_]+}/) ? 3 : 2
|
||||
|
||||
try {
|
||||
const obj =
|
||||
jsonObject[pathParts[propertyIndex].replace("-", "_")] ||
|
||||
jsonObject[Object.keys(jsonObject)[0]][
|
||||
pathParts[propertyIndex].replace("-", "_")
|
||||
]
|
||||
|
||||
res = getPropertiesFromObject(
|
||||
requiredProperties,
|
||||
properties,
|
||||
obj,
|
||||
res,
|
||||
(obj, property) =>
|
||||
Array.isArray(obj)
|
||||
? obj.find((o) => o[property])[property]
|
||||
: obj[property]
|
||||
)
|
||||
} catch (err) {}
|
||||
}
|
||||
|
||||
// if nothing was found drilling down look at the top level properties
|
||||
if (JSON.stringify(res) === "{}") {
|
||||
res = getPropertiesFromObject(
|
||||
requiredProperties,
|
||||
properties,
|
||||
jsonObject,
|
||||
res,
|
||||
(jsonObject, property) =>
|
||||
jsonObject[property] ||
|
||||
jsonObject[Object.keys(jsonObject)[0]][property]
|
||||
)
|
||||
}
|
||||
|
||||
// Last resort, set the first property to an example
|
||||
if (JSON.stringify(res) === "{}") {
|
||||
res[properties[0].property] = getExampleValues(properties[0].type, `${prefix}_${properties[0].property}`)
|
||||
}
|
||||
|
||||
// Add values to 'undefined' properties before returning due to JSON.stringify removing 'undefined' but not 'null'
|
||||
return requiredProperties.reduce((prev, curr) => {
|
||||
if(prev[curr.property] === undefined){
|
||||
prev[curr.property] = getExampleValues(curr.type, `${prefix}_${curr.property}`)
|
||||
}
|
||||
return prev
|
||||
}, res)
|
||||
}
|
||||
|
||||
const getCurlCommand = (requestBody) => {
|
||||
const body = JSON.stringify(
|
||||
getCurlJson(
|
||||
requestBody.properties,
|
||||
`example_${section}`,
|
||||
formattedParameters.body
|
||||
)
|
||||
)
|
||||
return `curl -X ${data.method.toUpperCase()} https://medusa-url.com/${api}${formatRoute(
|
||||
pathname
|
||||
)} \\
|
||||
--header "Authorization: Bearer <ACCESS TOKEN>" ${
|
||||
data.method.toUpperCase() === "POST" && requestBody.properties?.length > 0
|
||||
? `\\
|
||||
--header "content-type: application/json" \\
|
||||
--data '${body}'`
|
||||
: ""
|
||||
}`
|
||||
}
|
||||
|
||||
return (
|
||||
<Flex
|
||||
py={"5vw"}
|
||||
sx={{
|
||||
borderTop: "hairline",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
id={convertToKebabCase(summary)}
|
||||
ref={methodRef}
|
||||
>
|
||||
<Flex>
|
||||
<Heading
|
||||
as="h2"
|
||||
mb={4}
|
||||
sx={{
|
||||
fontSize: "4",
|
||||
fontWeight: "500",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
ref={containerRef}
|
||||
onClick={() => handleMetaChange()}
|
||||
>
|
||||
{summary}
|
||||
</Heading>
|
||||
</Flex>
|
||||
<ResponsiveContainer>
|
||||
<Flex
|
||||
className="info"
|
||||
sx={{
|
||||
flexDirection: "column",
|
||||
pr: "5",
|
||||
"@media screen and (max-width: 848px)": {
|
||||
pr: "0",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Route path={pathname} method={method} />
|
||||
<Description>
|
||||
<Text
|
||||
sx={{
|
||||
lineHeight: "26px",
|
||||
}}
|
||||
mt={3}
|
||||
>
|
||||
<Markdown>{description}</Markdown>
|
||||
</Text>
|
||||
</Description>
|
||||
<Box mt={2}>
|
||||
<Parameters params={formattedParameters} type={"Parameters"} />
|
||||
</Box>
|
||||
</Flex>
|
||||
<Box className="code">
|
||||
<Box>
|
||||
<JsonContainer
|
||||
json={getCurlCommand(requestBody)}
|
||||
header={"cURL Example"}
|
||||
language={"shell"}
|
||||
allowCopy={true}
|
||||
method={convertToKebabCase(summary)}
|
||||
/>
|
||||
</Box>
|
||||
<Box>
|
||||
<JsonContainer
|
||||
json={jsonResponse}
|
||||
header={"RESPONSE"}
|
||||
method={convertToKebabCase(summary)}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</ResponsiveContainer>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
|
||||
export default Method
|
||||
@@ -1,84 +0,0 @@
|
||||
import { Box, Flex, Text } from "theme-ui"
|
||||
|
||||
import Description from "./description"
|
||||
import Markdown from "react-markdown"
|
||||
import NestedCollapsible from "./collapsible"
|
||||
import React from "react"
|
||||
|
||||
const Parameters = ({ params, type }) => {
|
||||
const getDescriptions = (title, items) => {
|
||||
return (
|
||||
<>
|
||||
{items?.length > 0 && (
|
||||
<>
|
||||
<Text
|
||||
sx={{ borderLeft: "2px solid gray", alignItems: "center" }}
|
||||
my={3}
|
||||
pl={2}
|
||||
py={1}
|
||||
>
|
||||
{title === "attr" ? "Attributes" : title}
|
||||
</Text>
|
||||
{items.map((prop, i) => {
|
||||
const nested = prop.nestedModel || prop.items?.properties || null
|
||||
return (
|
||||
<Box
|
||||
py={2}
|
||||
pl={2}
|
||||
sx={{
|
||||
borderTop: "hairline",
|
||||
fontFamily: "monospace",
|
||||
fontSize: "0",
|
||||
}}
|
||||
key={i}
|
||||
>
|
||||
<Flex sx={{ alignItems: "baseline", fontSize: "0" }}>
|
||||
<Text mr={2}>{prop.property || prop.name}</Text>
|
||||
<Text color={"#707070"}>
|
||||
{prop.type || prop.schema?.type || nested?.title}
|
||||
</Text>
|
||||
{prop.required ? (
|
||||
<Text ml={1} variant="labels.required">
|
||||
required
|
||||
</Text>
|
||||
) : null}
|
||||
</Flex>
|
||||
<Description>
|
||||
<Text
|
||||
sx={{
|
||||
fontSize: "0",
|
||||
lineHeight: "26px",
|
||||
fontFamily: "body",
|
||||
}}
|
||||
>
|
||||
<Markdown>{prop.description}</Markdown>
|
||||
</Text>
|
||||
</Description>
|
||||
{nested?.properties && (
|
||||
<NestedCollapsible
|
||||
properties={nested.properties}
|
||||
title={nested.title}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
{getDescriptions(type, params.properties)}
|
||||
{getDescriptions("Request body", params.body)}
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
|
||||
export default Parameters
|
||||
@@ -1,29 +0,0 @@
|
||||
import React from "react"
|
||||
import styled from "@emotion/styled"
|
||||
import { Flex } from "theme-ui"
|
||||
|
||||
const ResponsiveFlex = styled(Flex)`
|
||||
.info {
|
||||
width: 55%;
|
||||
}
|
||||
|
||||
.code {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 848px) {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.info,
|
||||
.code {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const ResponsiveContainer = ({ children }) => {
|
||||
return <ResponsiveFlex>{children}</ResponsiveFlex>
|
||||
}
|
||||
|
||||
export default ResponsiveContainer
|
||||
@@ -1,17 +0,0 @@
|
||||
import React from "react"
|
||||
import { Flex, Text } from "theme-ui"
|
||||
import { formatRoute } from "../../utils/format-route"
|
||||
|
||||
const Route = ({ method, path }) => {
|
||||
const fixedMethod = method.toUpperCase()
|
||||
return (
|
||||
<Flex sx={{ fontFamily: "monospace" }}>
|
||||
<Text variant={`labels.${fixedMethod}`} mr={1}>
|
||||
{fixedMethod}
|
||||
</Text>
|
||||
<Text>{formatRoute(path)}</Text>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
|
||||
export default Route
|
||||
@@ -1,213 +0,0 @@
|
||||
import { Box, Button, Flex, Heading, Text } from "theme-ui"
|
||||
import React, { useContext, useEffect, useRef, useState } from "react"
|
||||
|
||||
import ChevronDown from "../icons/chevron-down"
|
||||
import Description from "./description"
|
||||
import EndpointContainer from "./endpoint-container"
|
||||
import JsonContainer from "./json-container"
|
||||
import Markdown from "react-markdown"
|
||||
import Method from "./method"
|
||||
import NavigationContext from "../../context/navigation-context"
|
||||
import Parameters from "./parameters"
|
||||
import ResponsiveContainer from "./responsive-container"
|
||||
import { convertToKebabCase } from "../../utils/convert-to-kebab-case"
|
||||
import useInView from "../../hooks/use-in-view"
|
||||
|
||||
const Section = ({ data, api }) => {
|
||||
const section = data;
|
||||
const [isExpanded, setIsExpanded] = useState(false)
|
||||
const { openSections, updateSection, updateMetadata, updateHash } = useContext(
|
||||
NavigationContext
|
||||
)
|
||||
|
||||
const endpoints = section.paths
|
||||
.map((p) => {
|
||||
let path = p.name
|
||||
let ep = []
|
||||
|
||||
p.methods.forEach((m) => {
|
||||
ep.push({ method: m.method, endpoint: path })
|
||||
})
|
||||
|
||||
return ep
|
||||
})
|
||||
.flat()
|
||||
|
||||
const sectionRef = useRef(null)
|
||||
|
||||
const scrollIntoView = () => {
|
||||
if (sectionRef.current) {
|
||||
sectionRef.current.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const handleExpand = () => {
|
||||
updateMetadata({
|
||||
title: section.section_name,
|
||||
description: section.schema?.description,
|
||||
})
|
||||
setIsExpanded(true)
|
||||
scrollIntoView()
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const shouldOpen = openSections.includes(
|
||||
convertToKebabCase(section.section_name)
|
||||
)
|
||||
|
||||
if (shouldOpen) {
|
||||
setIsExpanded(true)
|
||||
}
|
||||
}, [section.section_name, openSections, openSections.length])
|
||||
|
||||
useEffect(() => {
|
||||
if (section.section_name) {
|
||||
updateHash(convertToKebabCase(section.section_name), section.paths && section.paths.length ? (section.paths[0].methods[0].path || '') : '', section)
|
||||
}
|
||||
}, [section.section_name])
|
||||
|
||||
const [containerRef, isInView] = useInView({
|
||||
root: null,
|
||||
rootMargin: "0px 0px -80% 0px",
|
||||
threshold: 1.0,
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
const handleInView = () => {
|
||||
if (isInView) {
|
||||
updateSection({id: convertToKebabCase(section.section_name), section})
|
||||
}
|
||||
}
|
||||
handleInView()
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isInView])
|
||||
|
||||
return (
|
||||
<section ref={sectionRef} id={convertToKebabCase(section.section_name)}>
|
||||
<Box
|
||||
sx={{
|
||||
borderBottom: "hairline",
|
||||
padding: "5vw",
|
||||
backgroundColor: isExpanded ? "transparent" : "fadedContrast",
|
||||
}}
|
||||
>
|
||||
<Flex>
|
||||
<Heading
|
||||
as="h1"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "22",
|
||||
mb: "3",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
ref={containerRef}
|
||||
className={`header-${convertToKebabCase(section.section_name)}`}
|
||||
onClick={handleExpand}
|
||||
>
|
||||
{section.section_name}
|
||||
</Heading>
|
||||
</Flex>
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<ResponsiveContainer>
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: "column",
|
||||
lineHeight: "26px",
|
||||
pr: "5",
|
||||
"@media screen and (max-width: 848px)": {
|
||||
pr: "0",
|
||||
},
|
||||
}}
|
||||
className="info"
|
||||
>
|
||||
<Description>
|
||||
<Text mb={4}>
|
||||
<Markdown>{section.schema?.description}</Markdown>
|
||||
</Text>
|
||||
</Description>
|
||||
{isExpanded && section.schema ? (
|
||||
<Parameters params={section.schema} type={"attr"} />
|
||||
) : null}
|
||||
</Flex>
|
||||
<Flex
|
||||
className="code"
|
||||
sx={{
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<EndpointContainer endpoints={endpoints} />
|
||||
{isExpanded ? (
|
||||
<JsonContainer
|
||||
json={section.schema?.object}
|
||||
header={`${section.section_name.toUpperCase()} OBJECT`}
|
||||
/>
|
||||
) : null}
|
||||
</Flex>
|
||||
</ResponsiveContainer>
|
||||
{!isExpanded && (
|
||||
<Flex
|
||||
sx={{
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "100%",
|
||||
}}
|
||||
mt={4}
|
||||
>
|
||||
<Button
|
||||
onClick={handleExpand}
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
borderRadius: "24px",
|
||||
bg: "light",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
>
|
||||
SHOW <ChevronDown fill={"dark"} styles={{ mr: "-10px" }} />
|
||||
</Button>
|
||||
</Flex>
|
||||
)}
|
||||
<Box
|
||||
id="method-container"
|
||||
mt={4}
|
||||
sx={{
|
||||
display: isExpanded ? "block" : "none",
|
||||
}}
|
||||
>
|
||||
{section.paths.map((p, i) => {
|
||||
return (
|
||||
<Flex
|
||||
key={i}
|
||||
sx={{
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
{p.methods.map((m, i) => {
|
||||
return (
|
||||
<Method
|
||||
api={api}
|
||||
key={i}
|
||||
data={m}
|
||||
section={convertToKebabCase(section.section_name)}
|
||||
sectionData={section}
|
||||
pathname={p.name}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</Flex>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
</Flex>
|
||||
</Box>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Section
|
||||
@@ -1,24 +0,0 @@
|
||||
import React from "react"
|
||||
import { Box } from "theme-ui"
|
||||
|
||||
const ChevronDown = ({ fill = "darkContrast", styles }) => {
|
||||
return (
|
||||
<Box
|
||||
as="svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
sx={{
|
||||
...styles,
|
||||
alignSelf: "center",
|
||||
pointerEvents: "none",
|
||||
fill: `${fill}`,
|
||||
}}
|
||||
>
|
||||
<path d="M7.41 7.84l4.59 4.58 4.59-4.58 1.41 1.41-6 6-6-6z" />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChevronDown
|
||||
@@ -1,18 +0,0 @@
|
||||
import { Image } from "@theme-ui/components"
|
||||
import Logo from "../../assets/clipboard.svg"
|
||||
import React from "react"
|
||||
|
||||
const Clipboard = () => {
|
||||
return (
|
||||
<Image
|
||||
src={Logo}
|
||||
sx={{
|
||||
height: "100%",
|
||||
fill: "light",
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default Clipboard
|
||||
@@ -1,20 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
|
||||
export default function DarkMode(props) {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" width={24} height={24} {...props}>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
import { Image } from "@theme-ui/components"
|
||||
import Logo from "../../assets/github.svg"
|
||||
import LogoLight from "../../assets/github-light.svg"
|
||||
import React from "react"
|
||||
import { useColorMode } from 'theme-ui'
|
||||
|
||||
const GitHub = () => {
|
||||
const [colorMode,] = useColorMode()
|
||||
|
||||
return (
|
||||
<Image
|
||||
src={colorMode === 'light' ? Logo : LogoLight}
|
||||
sx={{
|
||||
height: "24px",
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default GitHub
|
||||
@@ -1,20 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
|
||||
export default function LightMode(props) {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" width={24} height={24} {...props}>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,47 +0,0 @@
|
||||
import { Box, Flex } from "theme-ui"
|
||||
|
||||
import React from "react"
|
||||
import Sidebar from "./side-bar"
|
||||
import styled from "@emotion/styled"
|
||||
|
||||
const LayoutContainer = styled(Flex)`
|
||||
--side-bar-width: 220px;
|
||||
|
||||
@media screen and (min-width: 1680px) {
|
||||
--side-bar-width: 280px;
|
||||
}
|
||||
`
|
||||
|
||||
const ContentBox = styled(Box)`
|
||||
@media screen and (min-width: 849px) {
|
||||
width: calc(100% - var(--side-bar-width));
|
||||
}
|
||||
|
||||
@media screen and (max-width: 848px) {
|
||||
width: 100%;
|
||||
}
|
||||
`
|
||||
|
||||
const Layout = ({ data, api, children }) => {
|
||||
return (
|
||||
<LayoutContainer sx={{ p: "0", m: "0", overflow: "hidden" }}>
|
||||
<Flex
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
fontFamily: "body",
|
||||
flexGrow: "1",
|
||||
}}
|
||||
className="layout-container"
|
||||
>
|
||||
<Sidebar data={data} api={api} />
|
||||
<ContentBox>{children}</ContentBox>
|
||||
</Flex>
|
||||
</LayoutContainer>
|
||||
)
|
||||
}
|
||||
|
||||
export default Layout
|
||||
@@ -1,101 +0,0 @@
|
||||
import React, { useContext } from "react"
|
||||
|
||||
import NavigationContext from "../../context/navigation-context"
|
||||
import { convertToKebabCase } from "../../utils/convert-to-kebab-case"
|
||||
import { navigate } from "gatsby"
|
||||
|
||||
const HitComponent = ({ hit, children, data }) => {
|
||||
const { goTo, api } = useContext(NavigationContext)
|
||||
let { url, type, hierarchy } = hit
|
||||
|
||||
/** Get the API that is not currently being viewed, so we can create
|
||||
* an URL that goes to the other API.
|
||||
*/
|
||||
const getOtherAPI = () => {
|
||||
if (api === "store") return "admin"
|
||||
if (api === "admin") return "store"
|
||||
}
|
||||
|
||||
/** If result is part of currently viewed API then we scroll to the
|
||||
* concept/method, and update the pages metadata.
|
||||
*/
|
||||
const goToHierarchy = e => {
|
||||
e.preventDefault()
|
||||
//find section
|
||||
let section = data.sections.find((s) => s.section.section_name == hierarchy.lvl1);
|
||||
section = section ? section.section : {}
|
||||
if (hierarchy.lvl2) {
|
||||
goTo({
|
||||
section: convertToKebabCase(hierarchy.lvl1),
|
||||
method: convertToKebabCase(hierarchy.lvl2),
|
||||
sectionObj: section
|
||||
})
|
||||
} else {
|
||||
goTo({ section: convertToKebabCase(hierarchy.lvl1), sectionObj: section })
|
||||
}
|
||||
}
|
||||
|
||||
/** If result is NOT part of currently viewed API, but still a part of
|
||||
* the Gatsby site, then we use Gatsby's navigate function for improved
|
||||
* linking.
|
||||
*/
|
||||
const navigateHierarchy = e => {
|
||||
e.preventDefault()
|
||||
if (hierarchy.lvl2) {
|
||||
navigate(
|
||||
`/api/${getOtherAPI()}/${convertToKebabCase(
|
||||
hierarchy.lvl1
|
||||
)}/${convertToKebabCase(hierarchy.lvl2)}`
|
||||
)
|
||||
} else {
|
||||
navigate(`/api/${getOtherAPI()}/${convertToKebabCase(hierarchy.lvl1)}`)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* If result is part of the API reference then we want to strip
|
||||
* the #'s from the URL's. If the result is of LVL2 then we want
|
||||
* to add the LVL1 to the URL: '/store/#create-cart' -> '/store/cart/create-cart'
|
||||
*/
|
||||
const formatURL = () => {
|
||||
url = url.replace("#", "/")
|
||||
if (type === "lvl2") {
|
||||
const index = url.lastIndexOf("/")
|
||||
url =
|
||||
url.substring(0, index) +
|
||||
`/${convertToKebabCase(hierarchy.lvl1)}` +
|
||||
url.substring(index)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* If the result is part of the currently viewed API
|
||||
*/
|
||||
if (url.includes(`api/${api}`)) {
|
||||
formatURL()
|
||||
return (
|
||||
<a href={url} onClick={goToHierarchy}>
|
||||
{children}
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* If the result is NOT part of the currently viewed API
|
||||
*/
|
||||
if (url.includes(`api/${getOtherAPI()}`)) {
|
||||
formatURL()
|
||||
return (
|
||||
<a href={url} onClick={navigateHierarchy}>
|
||||
{children}
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* If the result is part of the Docasaurus docs
|
||||
*/
|
||||
return <a href={url}>{children}</a>
|
||||
}
|
||||
|
||||
export default HitComponent
|
||||
@@ -1,110 +0,0 @@
|
||||
import "../../medusa-plugin-themes/docsearch/theme.css"
|
||||
|
||||
import React, { useContext } from "react"
|
||||
|
||||
import { DocSearch } from "@docsearch/react"
|
||||
import HitComponent from "./hit-component"
|
||||
import NavigationContext from "../../context/navigation-context"
|
||||
import { convertToKebabCase } from "../../utils/convert-to-kebab-case"
|
||||
import { navigate } from "gatsby-link"
|
||||
|
||||
const algoliaApiKey = process.env.ALGOLIA_API_KEY || "temp"
|
||||
const algoliaAppId = process.env.ALGOLIA_APP_ID || "temp"
|
||||
|
||||
const Search = ({data}) => {
|
||||
const { goTo, api } = useContext(NavigationContext)
|
||||
|
||||
const getOtherAPI = () => {
|
||||
if (api === "store") return "admin"
|
||||
if (api === "admin") return "store"
|
||||
}
|
||||
|
||||
const replaceUrl = item => {
|
||||
let { url, hierarchy } = item
|
||||
if (url.includes("api/store") || url.includes("/api/admin")) {
|
||||
url = url.replace("#", "")
|
||||
if (hierarchy.lvl2) {
|
||||
const index = url.lastIndexOf("/")
|
||||
url =
|
||||
url.substring(0, index) +
|
||||
`/${convertToKebabCase(hierarchy.lvl1)}` +
|
||||
url.substring(index)
|
||||
}
|
||||
}
|
||||
return url
|
||||
}
|
||||
|
||||
/** If result is part of currently viewed API then we scroll to the
|
||||
* concept/method, and update the pages metadata.
|
||||
*/
|
||||
const goToHierarchy = item => {
|
||||
const { hierarchy } = item
|
||||
//find section
|
||||
let section = data.sections.find((s) => s.section.section_name == hierarchy.lvl1);
|
||||
section = section ? section.section : {}
|
||||
if (hierarchy.lvl2) {
|
||||
goTo({
|
||||
section: convertToKebabCase(hierarchy.lvl1),
|
||||
method: convertToKebabCase(hierarchy.lvl2),
|
||||
sectionObj: section
|
||||
})
|
||||
} else {
|
||||
goTo({ section: convertToKebabCase(hierarchy.lvl1), sectionObj: section })
|
||||
}
|
||||
}
|
||||
|
||||
/** If result is NOT part of currently viewed API, but still a part of
|
||||
* the Gatsby site, then we use Gatsby's navigate function for improved
|
||||
* linking.
|
||||
*/
|
||||
const navigateHierarchy = item => {
|
||||
const { hierarchy } = item
|
||||
if (hierarchy.lvl2) {
|
||||
navigate(
|
||||
`/api/${getOtherAPI()}/${convertToKebabCase(
|
||||
hierarchy.lvl1
|
||||
)}/${convertToKebabCase(hierarchy.lvl2)}`
|
||||
)
|
||||
} else {
|
||||
navigate(`/api/${getOtherAPI()}/${convertToKebabCase(hierarchy.lvl1)}`)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<DocSearch
|
||||
apiKey={algoliaApiKey}
|
||||
appId={algoliaAppId}
|
||||
indexName="medusa-commerce"
|
||||
hitComponent={({hit, children}) => <HitComponent data={data} hit={hit} children={children} />}
|
||||
navigator={{
|
||||
navigate({ item }) {
|
||||
if (item.url.includes(`api/${api}`)) {
|
||||
goToHierarchy(item)
|
||||
} else if (item.url.includes(`api/${getOtherAPI()}`)) {
|
||||
navigateHierarchy(item)
|
||||
} else {
|
||||
window.location = item.url
|
||||
}
|
||||
},
|
||||
|
||||
navigateNewTab({ item }) {
|
||||
const url = replaceUrl(item)
|
||||
|
||||
const windowReference = window.open(url, "_blank", "noopener")
|
||||
|
||||
if (windowReference) {
|
||||
windowReference.focus()
|
||||
}
|
||||
},
|
||||
|
||||
navigateNewWindow({ item }) {
|
||||
const url = replaceUrl(item)
|
||||
|
||||
window.open(url, "_blank", "noopener")
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default Search
|
||||
@@ -1,106 +0,0 @@
|
||||
import { Box, Flex, Image } from "theme-ui"
|
||||
import React, { useEffect, useState } from "react"
|
||||
|
||||
import Logo from "../../assets/logo.svg"
|
||||
import LogoDark from "../../assets/logo-dark.svg"
|
||||
import SideBarItem from "./sidebar-item"
|
||||
import SideBarSelector from "./sidebar-selector"
|
||||
import { navigate } from "gatsby"
|
||||
import styled from "@emotion/styled"
|
||||
import { useColorMode } from 'theme-ui'
|
||||
|
||||
const SideBarContainer = styled(Flex)`
|
||||
@media screen and (max-width: 848px) {
|
||||
display: none;
|
||||
}
|
||||
`
|
||||
|
||||
const SideBarFade = styled(Box)`
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: calc(var(--side-bar-width) - 1px);
|
||||
height: 50px;
|
||||
pointer-events: none;
|
||||
box-shadow: inset 0 50px 25px calc(-1 * 25px) white;
|
||||
`
|
||||
|
||||
const Sidebar = ({ data, api }) => {
|
||||
const [scrollPos, setScrollPos] = useState(0)
|
||||
const [colorMode,] = useColorMode()
|
||||
|
||||
useEffect(() => {
|
||||
const nav = document.querySelector("#nav")
|
||||
|
||||
const handleScroll = e => {
|
||||
const pos = e.srcElement.scrollTop / 50
|
||||
if (pos < 1) {
|
||||
setScrollPos(pos)
|
||||
}
|
||||
}
|
||||
nav.addEventListener("scroll", handleScroll)
|
||||
return () => nav.removeEventListener("scroll", handleScroll)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<SideBarContainer
|
||||
sx={{
|
||||
position: "sticky",
|
||||
top: "0",
|
||||
bottom: "0",
|
||||
height: "100vh",
|
||||
backgroundColor: "var(--theme-ui-colors-background)",
|
||||
boxShadow: "sidebarShadow",
|
||||
minWidth: "var(--side-bar-width)",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
className="sidebar-container"
|
||||
>
|
||||
<Flex
|
||||
sx={{
|
||||
px: "4",
|
||||
pt: "3",
|
||||
background: "var(--theme-ui-colors-background)",
|
||||
width: "calc(var(--side-bar-width) - 1px)",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<Flex>
|
||||
<Image
|
||||
src={colorMode === 'light' ? Logo : LogoDark}
|
||||
alt="Medusa logo"
|
||||
onClick={() => navigate("/")}
|
||||
sx={{
|
||||
height: "32px",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
/>
|
||||
</Flex>
|
||||
<Flex py={4}>
|
||||
<SideBarSelector api={api} />
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex
|
||||
id="nav"
|
||||
sx={{
|
||||
flex: 1,
|
||||
position: "relative",
|
||||
px: "3",
|
||||
pb: "3",
|
||||
mr: "1px",
|
||||
flexDirection: "column",
|
||||
overflowY: "scroll",
|
||||
pr: "6px",
|
||||
scrollbarColor: "faded light",
|
||||
}}
|
||||
>
|
||||
<SideBarFade opacity={scrollPos} />
|
||||
{data.sections.map((s, i) => {
|
||||
return <SideBarItem item={s} key={i} />
|
||||
})}
|
||||
</Flex>
|
||||
</SideBarContainer>
|
||||
)
|
||||
}
|
||||
|
||||
export default Sidebar
|
||||
@@ -1,148 +0,0 @@
|
||||
import { Box, Flex, Text } from "theme-ui"
|
||||
import React, { useContext, useEffect, useState } from "react"
|
||||
|
||||
import ChevronDown from "../icons/chevron-down"
|
||||
import Collapsible from "react-collapsible"
|
||||
import NavigationContext from "../../context/navigation-context"
|
||||
import { convertToKebabCase } from "../../utils/convert-to-kebab-case"
|
||||
import styled from "@emotion/styled"
|
||||
|
||||
const StyledCollapsible = styled(Collapsible)`
|
||||
margin-bottom: 10px;
|
||||
`
|
||||
|
||||
const Container = styled(Box)`
|
||||
div.Collapsible span.Collapsible__trigger.is-open {
|
||||
svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const SideBarItem = ({ item }) => {
|
||||
const {
|
||||
openSection,
|
||||
openSections,
|
||||
currentHash,
|
||||
currentSection,
|
||||
goTo,
|
||||
} = useContext(NavigationContext)
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const { section } = item
|
||||
const subItems = section.paths
|
||||
.map(p => {
|
||||
return p.methods
|
||||
})
|
||||
.reduce((pre, cur) => {
|
||||
return pre.concat(cur)
|
||||
})
|
||||
.map(m => {
|
||||
return {
|
||||
title: m.summary,
|
||||
path: convertToKebabCase(m.summary),
|
||||
}
|
||||
})
|
||||
|
||||
const handleClick = () => {
|
||||
const id = convertToKebabCase(section.section_name)
|
||||
const element = document.querySelector(`#${id}`)
|
||||
if (element) {
|
||||
element.scrollIntoView()
|
||||
if (!openSections.includes(id)) {
|
||||
openSection({id, section})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubClick = path => {
|
||||
const id = convertToKebabCase(section.section_name)
|
||||
goTo({ section: id, method: path, sectionObj: section })
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setIsOpen(currentSection === convertToKebabCase(section.section_name) ||
|
||||
openSections.includes(convertToKebabCase(section.section_name)));
|
||||
}, [section.section_name, currentSection, openSections])
|
||||
|
||||
return (
|
||||
<Container id={`nav-${convertToKebabCase(section.section_name)}`}>
|
||||
<StyledCollapsible
|
||||
trigger={
|
||||
<Flex
|
||||
sx={{
|
||||
fontSize: "1",
|
||||
pl: "16px",
|
||||
pr: "10px",
|
||||
alignItems: "center",
|
||||
borderRadius: "small",
|
||||
cursor: "pointer",
|
||||
mr: "4px",
|
||||
mb: "5px",
|
||||
height: "25px",
|
||||
justifyContent: "space-between",
|
||||
"&:hover, &.active": {
|
||||
backgroundColor: "primary",
|
||||
color: "light"
|
||||
},
|
||||
"&:hover svg, &.active svg": {
|
||||
color: "light"
|
||||
}
|
||||
}}
|
||||
className={
|
||||
currentSection === convertToKebabCase(section.section_name)
|
||||
? "active"
|
||||
: null
|
||||
}
|
||||
>
|
||||
{section.section_name} <ChevronDown fill={"light"} />
|
||||
</Flex>
|
||||
}
|
||||
open={isOpen}
|
||||
onTriggerOpening={handleClick}
|
||||
transitionTime={1}
|
||||
>
|
||||
{subItems.map((si, i) => {
|
||||
const path = convertToKebabCase(si.path)
|
||||
return (
|
||||
<Flex
|
||||
key={i}
|
||||
className={currentHash === path ? "active" : null}
|
||||
onClick={() => handleSubClick(path)}
|
||||
id={`nav-${path}`}
|
||||
sx={{
|
||||
ml: "10px",
|
||||
pl: "10px",
|
||||
pr: "10px",
|
||||
alignItems: "center",
|
||||
borderRadius: "small",
|
||||
cursor: "pointer",
|
||||
mb: "8px",
|
||||
textDecoration: "none",
|
||||
color: "text",
|
||||
height: "25px",
|
||||
"&:hover": {
|
||||
backgroundColor: "primary",
|
||||
color: "light"
|
||||
},
|
||||
"&.active": {
|
||||
backgroundColor: "primary",
|
||||
color: "light"
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
sx={{
|
||||
fontSize: "0",
|
||||
}}
|
||||
>
|
||||
{si.title}
|
||||
</Text>
|
||||
</Flex>
|
||||
)
|
||||
})}
|
||||
</StyledCollapsible>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
export default SideBarItem
|
||||
@@ -1,57 +0,0 @@
|
||||
import { Flex, Select } from "theme-ui"
|
||||
import React, { useContext } from "react"
|
||||
|
||||
import ChevronDown from "../icons/chevron-down"
|
||||
import NavigationContext from "../../context/navigation-context"
|
||||
import { navigate } from "gatsby-link"
|
||||
|
||||
const SideBarSelector = ({ api }) => {
|
||||
const { reset } = useContext(NavigationContext)
|
||||
|
||||
const handleSelect = e => {
|
||||
reset()
|
||||
navigate(`/api/${e.target.value}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<Flex
|
||||
sx={{
|
||||
marginLeft: "-16px",
|
||||
marginRight: "-10px",
|
||||
width: "calc(100% + 26px)",
|
||||
"& div": {
|
||||
width: "100%",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Select
|
||||
arrow={<ChevronDown fill={"dark"} styles={{ ml: "-28px" }} />}
|
||||
sx={{
|
||||
paddingLeft: "16px",
|
||||
marginRight: "-5px",
|
||||
borderRadius: "small",
|
||||
borderColor: "faded",
|
||||
width: "100%",
|
||||
fontSize: "1",
|
||||
fontFamily: "body",
|
||||
transition: "all .1s ease-in-out",
|
||||
"&:focus": {
|
||||
outline: "none !important",
|
||||
},
|
||||
boxShadow: "ctaBoxShadow",
|
||||
|
||||
"&:hover": {
|
||||
boxShadow: "buttonBoxShadowHover",
|
||||
},
|
||||
}}
|
||||
value={api}
|
||||
onChange={handleSelect}
|
||||
>
|
||||
<option value="admin">Admin</option>
|
||||
<option value="store">Storefront</option>
|
||||
</Select>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
|
||||
export default SideBarSelector
|
||||
@@ -1,124 +0,0 @@
|
||||
import { Box, Flex, Link, Select } from "@theme-ui/components"
|
||||
import React, { useContext } from "react"
|
||||
|
||||
import ChevronDown from "./icons/chevron-down"
|
||||
import ColorModeToggler from "./ColorModeToggler"
|
||||
import GitHub from "../components/icons/github"
|
||||
import NavigationContext from "../context/navigation-context"
|
||||
import Search from "./search"
|
||||
import { convertToKebabCase } from "../utils/convert-to-kebab-case"
|
||||
import { navigate } from "gatsby-link"
|
||||
|
||||
const Topbar = ({ data, api }) => {
|
||||
const { goTo, reset, currentSection } = useContext(NavigationContext)
|
||||
|
||||
const handleChange = e => {
|
||||
const parts = e.target.value.split(" ")
|
||||
|
||||
if (parts[0] === api) {
|
||||
//find section
|
||||
let sectionObj = data.sections.find((s) => convertToKebabCase(s.section.section_name) === parts[1]);
|
||||
sectionObj = sectionObj ? sectionObj.section : {};
|
||||
goTo({ section: parts[1], sectionObj })
|
||||
} else {
|
||||
reset()
|
||||
navigate(`/api/${api === "admin" ? "store" : "admin"}`)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Flex
|
||||
sx={{
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
width: "100%",
|
||||
px: "5vw",
|
||||
height: "headerHeight",
|
||||
boxShadow: "topbarShadow",
|
||||
"@media screen and (max-width: 848px)": {
|
||||
position: "fixed",
|
||||
top: "0",
|
||||
left: "0",
|
||||
right: "0",
|
||||
zIndex: "100",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "none",
|
||||
alignItems: "center",
|
||||
"@media screen and (max-width: 848px)": {
|
||||
display: "block",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Select
|
||||
arrow={<ChevronDown fill={"dark"} />}
|
||||
sx={{
|
||||
border: "none",
|
||||
width: "100%",
|
||||
fontSize: "2",
|
||||
fontFamily: "body",
|
||||
fontWeight: "500",
|
||||
flexGrow: "1",
|
||||
px: "0",
|
||||
transition: "all .1s ease-in-out",
|
||||
"&:focus": {
|
||||
outline: "none !important",
|
||||
},
|
||||
}}
|
||||
onChange={handleChange}
|
||||
value={`${api} ${currentSection}`}
|
||||
>
|
||||
<optgroup label={`${api.slice(0, 1).toUpperCase()}${api.slice(1)}`}>
|
||||
{data.sections.map((s, i) => {
|
||||
return (
|
||||
<option
|
||||
key={i}
|
||||
value={`${api} ${convertToKebabCase(
|
||||
s.section.section_name
|
||||
)}`}
|
||||
>
|
||||
{s.section.section_name}
|
||||
</option>
|
||||
)
|
||||
})}
|
||||
</optgroup>
|
||||
<optgroup label={api === "admin" ? "Store" : "Admin"}>
|
||||
<option>{`Go to ${
|
||||
api === "admin" ? "Storefront API" : "Admin API"
|
||||
}`}</option>
|
||||
</optgroup>
|
||||
</Select>
|
||||
</Box>
|
||||
</Box>
|
||||
<Flex
|
||||
sx={{
|
||||
alignItems: "center",
|
||||
maxWidth: "400px",
|
||||
flexGrow: "1",
|
||||
justifyContent: "flex-end",
|
||||
}}
|
||||
>
|
||||
<Link variant="topbar" mr={3} href="https://docs.medusajs.com">
|
||||
Docs
|
||||
</Link>
|
||||
<Link
|
||||
sx={{
|
||||
pt: "4px",
|
||||
}}
|
||||
variant="topbar"
|
||||
href="https://github.com/medusajs/medusa"
|
||||
>
|
||||
<GitHub />
|
||||
</Link>
|
||||
<Search data={data} />
|
||||
<ColorModeToggler />
|
||||
</Flex>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
|
||||
export default Topbar
|
||||
@@ -1,183 +0,0 @@
|
||||
import React, { useReducer } from "react"
|
||||
|
||||
import { checkDisplay } from "../utils/check-display"
|
||||
import scrollParent from "../utils/scroll-parent"
|
||||
import types from "./types"
|
||||
|
||||
export const defaultNavigationContext = {
|
||||
api: "null",
|
||||
setApi: () => {},
|
||||
currentSection: null,
|
||||
currentSectionObj: {
|
||||
section_name: "",
|
||||
paths: [],
|
||||
schema: {}
|
||||
},
|
||||
updateSection: () => {},
|
||||
currentHash: null,
|
||||
updateHash: () => {},
|
||||
openSections: [],
|
||||
openSection: () => {},
|
||||
metadata: null,
|
||||
updateMetadata: () => {},
|
||||
reset: () => {},
|
||||
}
|
||||
|
||||
const NavigationContext = React.createContext(defaultNavigationContext)
|
||||
export default NavigationContext
|
||||
|
||||
const reducer = (state, action) => {
|
||||
let obj = []
|
||||
switch (action.type) {
|
||||
case types.SET_API: {
|
||||
return {
|
||||
...state,
|
||||
api: action.payload,
|
||||
}
|
||||
}
|
||||
case types.UPDATE_HASH:
|
||||
obj.push(action.payload.section)
|
||||
return {
|
||||
...state,
|
||||
openSections: obj,
|
||||
currentSection: action.payload.section,
|
||||
currentHash: action.payload.method,
|
||||
currentSectionObj: action.payload.sectionObj
|
||||
}
|
||||
case types.UPDATE_SECTION:
|
||||
obj.push(action.payload.id)
|
||||
return {
|
||||
...state,
|
||||
openSections: obj,
|
||||
currentSection: action.payload.id,
|
||||
currentHash: null,
|
||||
currentSectionObj: action.payload.section
|
||||
}
|
||||
case types.OPEN_SECTION:
|
||||
obj.push(action.payload.id)
|
||||
return {
|
||||
...state,
|
||||
openSections: obj,
|
||||
currentSection: action.payload.id,
|
||||
currentSectionObj: action.payload.section
|
||||
}
|
||||
case types.RESET:
|
||||
return {
|
||||
...state,
|
||||
openSections: [],
|
||||
currentSection: null,
|
||||
currentHash: null,
|
||||
currentSectionObj: {
|
||||
section_name: "",
|
||||
paths: [],
|
||||
schema: {}
|
||||
}
|
||||
}
|
||||
case types.UPDATE_METADATA:
|
||||
return {
|
||||
...state,
|
||||
metadata: {
|
||||
title: action.payload.title,
|
||||
description: action.payload.description,
|
||||
},
|
||||
}
|
||||
default:
|
||||
return state
|
||||
}
|
||||
}
|
||||
|
||||
const scrollNav = id => {
|
||||
const nav = document.querySelector("#nav")
|
||||
if (nav) {
|
||||
const element = nav.querySelector(`#nav-${id}`)
|
||||
if (element) {
|
||||
scrollParent(nav, element)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const scrollToElement = async id => {
|
||||
const element = document.querySelector(`#${id}`)
|
||||
if (element) {
|
||||
if (checkDisplay(element)) {
|
||||
element.scrollIntoView({
|
||||
block: "start",
|
||||
inline: "nearest",
|
||||
})
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
scrollToElement(id)
|
||||
}, 100)
|
||||
}
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
scrollToElement(id)
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
|
||||
export const NavigationProvider = ({ children }) => {
|
||||
const [state, dispatch] = useReducer(reducer, defaultNavigationContext)
|
||||
|
||||
const setApi = api => {
|
||||
dispatch({ type: types.SET_API, payload: api })
|
||||
}
|
||||
|
||||
const updateMetadata = metadata => {
|
||||
dispatch({ type: types.UPDATE_METADATA, payload: metadata })
|
||||
}
|
||||
|
||||
const updateHash = (section, method, sectionObj) => {
|
||||
dispatch({
|
||||
type: types.UPDATE_HASH,
|
||||
payload: { method: method, section: section, sectionObj },
|
||||
})
|
||||
window.history.replaceState(
|
||||
null,
|
||||
"",
|
||||
`/api/${state.api}/${section}/${method}`
|
||||
)
|
||||
scrollNav(method)
|
||||
}
|
||||
|
||||
const updateSection = ({id, section}) => {
|
||||
dispatch({ type: types.UPDATE_SECTION, payload: {id, section} })
|
||||
window.history.replaceState(null, "", `/api/${state.api}/${id}`)
|
||||
scrollNav(id)
|
||||
}
|
||||
|
||||
const openSection = ({id, section}) => {
|
||||
dispatch({ type: types.OPEN_SECTION, payload: {id, section} })
|
||||
}
|
||||
|
||||
const goTo = to => {
|
||||
const { section, method, sectionObj } = to
|
||||
|
||||
if (!state.openSections.includes(section)) {
|
||||
openSection({id: section, section: sectionObj})
|
||||
}
|
||||
scrollToElement(method || section)
|
||||
}
|
||||
|
||||
const reset = () => {
|
||||
dispatch({ type: types.RESET })
|
||||
}
|
||||
|
||||
return (
|
||||
<NavigationContext.Provider
|
||||
value={{
|
||||
...state,
|
||||
openSection,
|
||||
updateSection,
|
||||
updateHash,
|
||||
setApi,
|
||||
goTo,
|
||||
reset,
|
||||
updateMetadata,
|
||||
dispatch,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</NavigationContext.Provider>
|
||||
)
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
const types = {
|
||||
SET_API: "SET_API",
|
||||
UPDATE_HASH: "UPDATE_HASH",
|
||||
UPDATE_SECTION: "UPDATE_SECTION",
|
||||
OPEN_SECTION: "OPEN_SECTION",
|
||||
RESET: "RESET",
|
||||
UPDATE_METADATA: "UPDATE_METADATA",
|
||||
}
|
||||
|
||||
export default types
|
||||
Binary file not shown.
Binary file not shown.
@@ -1,4 +0,0 @@
|
||||
@font-face {
|
||||
font-family: "Medusa";
|
||||
src: url("./Montserrat-Medium.ttf");
|
||||
}
|
||||
@@ -1,2 +0,0 @@
|
||||
// eslint-disable-next-line import/no-anonymous-default-export
|
||||
export default ["40em", "52em", "64em"]
|
||||
@@ -1,174 +0,0 @@
|
||||
export const buttons = {
|
||||
pillActive: {
|
||||
cursor: "pointer",
|
||||
backgroundColor: "transparent",
|
||||
color: "dark",
|
||||
height: "40px",
|
||||
outline: 0,
|
||||
borderRadius: "3px",
|
||||
paddingTop: "3px",
|
||||
paddingBottom: "3px",
|
||||
boxShadow: "pillActive",
|
||||
"&:focus": {
|
||||
boxShadow: "pillActiveFocus",
|
||||
},
|
||||
},
|
||||
pill: {
|
||||
cursor: "pointer",
|
||||
backgroundColor: "transparent",
|
||||
color: "dark",
|
||||
height: "40px",
|
||||
outline: 0,
|
||||
borderRadius: "3px",
|
||||
paddingTop: "3px",
|
||||
paddingBottom: "3px",
|
||||
boxShadow: "pill",
|
||||
"&:focus": {
|
||||
boxShadow: "buttonBoxShadowActive",
|
||||
},
|
||||
},
|
||||
danger: {
|
||||
minHeight: "28px",
|
||||
fontWeight: "500",
|
||||
color: "light",
|
||||
fontSize: "14px",
|
||||
lineHeight: "14px",
|
||||
backgroundColor: "danger",
|
||||
border: 0,
|
||||
outline: 0,
|
||||
paddingTop: "3px",
|
||||
paddingBottom: "3px",
|
||||
cursor: "pointer",
|
||||
borderRadius: "3px",
|
||||
boxShadow: "buttonBoxShadow",
|
||||
"&:hover": {
|
||||
color: "darkest",
|
||||
boxShadow: "buttonBoxShadowHover",
|
||||
},
|
||||
"&:active": {
|
||||
boxShadow: "buttonBoxShadowActive",
|
||||
},
|
||||
},
|
||||
primary: {
|
||||
minHeight: "24px",
|
||||
height: "28px",
|
||||
fontWeight: "500",
|
||||
color: "dark",
|
||||
fontSize: "14px",
|
||||
lineHeight: "14px",
|
||||
backgroundColor: "lightest",
|
||||
border: 0,
|
||||
outline: 0,
|
||||
paddingTop: "3px",
|
||||
paddingBottom: "3px",
|
||||
cursor: "pointer",
|
||||
borderRadius: "3px",
|
||||
boxShadow: "buttonBoxShadow",
|
||||
"&:hover": {
|
||||
color: "darkest",
|
||||
boxShadow: "buttonBoxShadowHover",
|
||||
},
|
||||
"&:active": {
|
||||
boxShadow: "buttonBoxShadowActive",
|
||||
},
|
||||
"&:disabled": {
|
||||
cursor: "not-allowed",
|
||||
pointerEvents: "none",
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
green: {
|
||||
height: "30px",
|
||||
color: "lightest",
|
||||
backgroundColor: "#53725D",
|
||||
border: 0,
|
||||
outline: 0,
|
||||
paddingTop: "3px",
|
||||
paddingBottom: "3px",
|
||||
cursor: "pointer",
|
||||
borderRadius: "3px",
|
||||
"&:focus": {
|
||||
boxShadow: "buttonBoxShadowFocus",
|
||||
},
|
||||
"&:active": {
|
||||
boxShadow: "buttonBoxShadowActive",
|
||||
},
|
||||
},
|
||||
secondary: {
|
||||
height: "30px",
|
||||
color: "light",
|
||||
backgroundColor: "dark",
|
||||
border: 0,
|
||||
outline: 0,
|
||||
paddingTop: "3px",
|
||||
paddingBottom: "3px",
|
||||
cursor: "pointer",
|
||||
borderRadius: "3px",
|
||||
"&:focus": {
|
||||
boxShadow: "buttonBoxShadowFocus",
|
||||
},
|
||||
"&:active": {
|
||||
boxShadow: "buttonBoxShadowActive",
|
||||
},
|
||||
},
|
||||
cta: {
|
||||
height: "30px",
|
||||
color: "white",
|
||||
backgroundColor: "medusaGreen",
|
||||
fontWeight: 600,
|
||||
fontSize: "14px",
|
||||
lineHeight: "14px",
|
||||
|
||||
border: 0,
|
||||
outline: 0,
|
||||
|
||||
paddingTop: "3px",
|
||||
paddingBottom: "3px",
|
||||
|
||||
cursor: "pointer",
|
||||
|
||||
borderRadius: "3px",
|
||||
boxShadow: "ctaBoxShadow",
|
||||
|
||||
"&:hover": {
|
||||
boxShadow: "ctaBoxShadowHover",
|
||||
},
|
||||
|
||||
"&:disabled": {
|
||||
cursor: "not-allowed",
|
||||
pointerEvents: "none",
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
delete: {
|
||||
height: "30px",
|
||||
color: "white",
|
||||
backgroundColor: "#b02b13",
|
||||
fontWeight: 600,
|
||||
fontSize: "14px",
|
||||
lineHeight: "14px",
|
||||
|
||||
border: 0,
|
||||
outline: 0,
|
||||
|
||||
paddingTop: "3px",
|
||||
paddingBottom: "3px",
|
||||
|
||||
cursor: "pointer",
|
||||
|
||||
borderRadius: "3px",
|
||||
boxShadow: "ctaBoxShadow",
|
||||
|
||||
"&:hover": {
|
||||
boxShadow: "ctaBoxShadowHover",
|
||||
},
|
||||
},
|
||||
trigger: {
|
||||
bg: "faded",
|
||||
alignItems: "baseline",
|
||||
fontSize: "13px",
|
||||
fontWeight: "400",
|
||||
},
|
||||
}
|
||||
|
||||
export default buttons
|
||||
@@ -1,11 +0,0 @@
|
||||
export default {
|
||||
primary: "#7C53FF",
|
||||
secondary: "#79B28A",
|
||||
medusaGreen: "#3ecf8e",
|
||||
lightest: "#fefefe",
|
||||
light: "#f0f0f0",
|
||||
gray: "#a3acb9",
|
||||
dark: "#454545",
|
||||
darkest: "#212121",
|
||||
placeholder: "#a3acb9",
|
||||
}
|
||||
@@ -1,93 +0,0 @@
|
||||
// eslint-disable-next-line import/no-anonymous-default-export
|
||||
export default {
|
||||
invalidInput: {
|
||||
color: "dark",
|
||||
backgroundColor: "lightest",
|
||||
|
||||
border: 0,
|
||||
outline: 0,
|
||||
|
||||
cursor: "text",
|
||||
transition: "all 0.2s ease",
|
||||
|
||||
borderRadius: "3px",
|
||||
boxShadow: "invalidBoxShadow",
|
||||
"&.tag__focus": {
|
||||
boxShadow: "inputBoxShadowHover",
|
||||
},
|
||||
"&:focus": {
|
||||
boxShadow: "inputBoxShadowHover",
|
||||
},
|
||||
"&::placeholder": {
|
||||
color: "danger",
|
||||
},
|
||||
},
|
||||
input: {
|
||||
color: "dark",
|
||||
backgroundColor: "lightest",
|
||||
|
||||
border: 0,
|
||||
outline: 0,
|
||||
|
||||
cursor: "text",
|
||||
transition: "all 0.2s ease",
|
||||
|
||||
borderRadius: "3px",
|
||||
boxShadow: "inputBoxShadow",
|
||||
"&.tag__focus": {
|
||||
boxShadow: "inputBoxShadowHover",
|
||||
},
|
||||
"&:focus": {
|
||||
boxShadow: "inputBoxShadowHover",
|
||||
},
|
||||
"&::placeholder": {
|
||||
color: "placeholder",
|
||||
},
|
||||
},
|
||||
textarea: {
|
||||
color: "dark",
|
||||
backgroundColor: "lightest",
|
||||
|
||||
border: 0,
|
||||
outline: 0,
|
||||
|
||||
cursor: "text",
|
||||
transition: "all 0.2s ease",
|
||||
|
||||
borderRadius: "3px",
|
||||
boxShadow: "inputBoxShadow",
|
||||
"&.tag__focus": {
|
||||
boxShadow: "inputBoxShadowHover",
|
||||
},
|
||||
"&:focus": {
|
||||
boxShadow: "inputBoxShadowHover",
|
||||
},
|
||||
"&::placeholder": {
|
||||
color: "placeholder",
|
||||
},
|
||||
},
|
||||
dropdown: {
|
||||
color: "dark",
|
||||
backgroundColor: "lightest",
|
||||
|
||||
border: 0,
|
||||
outline: 0,
|
||||
|
||||
paddingTop: "3px",
|
||||
paddingBottom: "3px",
|
||||
|
||||
cursor: "pointer",
|
||||
|
||||
borderRadius: "3px",
|
||||
boxShadow: "buttonPrimaryBoxShadow",
|
||||
|
||||
"&:hover": {
|
||||
color: "darkest",
|
||||
boxShadow: "buttonPrimaryBoxShadowHover",
|
||||
},
|
||||
|
||||
"&:active": {
|
||||
boxShadow: "buttonPrimaryBoxShadowActive",
|
||||
},
|
||||
},
|
||||
}
|
||||
@@ -1,154 +0,0 @@
|
||||
import "../fonts/index.css"
|
||||
|
||||
import breakpoints from "./breakpoints"
|
||||
import buttons from "./buttons"
|
||||
import forms from "./forms"
|
||||
import labels from "./labels"
|
||||
import shadows from "./shadows"
|
||||
import spacing from "./spacing"
|
||||
|
||||
// eslint-disable-next-line import/no-anonymous-default-export
|
||||
export default {
|
||||
config: {
|
||||
initialColorModeName: 'light',
|
||||
},
|
||||
sizes: {
|
||||
headerHeight: "50px",
|
||||
},
|
||||
links: {
|
||||
topbar: {
|
||||
fontFamily: "body",
|
||||
fontSize: "2",
|
||||
textDecoration: "none",
|
||||
color: "dark",
|
||||
},
|
||||
},
|
||||
text: {
|
||||
labels,
|
||||
largest: {
|
||||
fontFamily: "body",
|
||||
fontSize: "22px",
|
||||
fontweight: "300",
|
||||
lineHeight: "1.5",
|
||||
letterSpacing: "normal",
|
||||
},
|
||||
large: {
|
||||
fontFamily: "body",
|
||||
fontSize: "18px",
|
||||
fontWeight: "300",
|
||||
lineHeight: "1.22",
|
||||
letterSpacing: "-0.5px",
|
||||
},
|
||||
medium: {
|
||||
fontFamily: "body",
|
||||
fontSize: "16px",
|
||||
fontWeight: "300",
|
||||
lineHeight: "1.22",
|
||||
letterSpacing: "normal",
|
||||
},
|
||||
base: {
|
||||
fontFamily: "body",
|
||||
fontsize: "14px",
|
||||
fontWeight: "300",
|
||||
lineHeight: "1.22",
|
||||
letterSpacing: "-0.25px",
|
||||
},
|
||||
small: {
|
||||
fontFamily: "body",
|
||||
fontSize: "12px",
|
||||
fontWeight: "300",
|
||||
lineHeight: "12px",
|
||||
letterSpacing: "0px",
|
||||
},
|
||||
},
|
||||
colors: {
|
||||
primary: "#7C53FF",
|
||||
primaryLight: "#7c53ff4a",
|
||||
secondary: "#79B28A",
|
||||
danger: "#FF7675",
|
||||
placeholder: "#a3acb9",
|
||||
dark: "#0a3149",
|
||||
darkContrast: "#0a314940",
|
||||
selectBg: "rgba(9, 10, 17, 0.8)",
|
||||
light: "#ffffff",
|
||||
faded: "#eef0f5",
|
||||
fadedContrast: "#eef0f540",
|
||||
text: '#000',
|
||||
background: '#fff',
|
||||
inverseText: '#000',
|
||||
separator: "#eef0f5",
|
||||
codeBoxShadow: "rgb(0 0 0 / 7%)",
|
||||
sectionSeparator: "#E3E8EE",
|
||||
modes: {
|
||||
dark: {
|
||||
text: '#fff',
|
||||
background: "#242526",
|
||||
inverseText: '#000',
|
||||
dark: "#eef0f5",
|
||||
separator: "#eef0f540",
|
||||
codeBoxShadow: "#d2d2d22b",
|
||||
sectionSeparator: "#404244",
|
||||
selectBg: "rgba(9, 10, 17, 0.8)"
|
||||
}
|
||||
}
|
||||
},
|
||||
borders: {
|
||||
hairline: "1px solid var(--theme-ui-colors-sectionSeparator)",
|
||||
},
|
||||
fontSizes: [12, 14, 16, 18, 22],
|
||||
fonts: {
|
||||
body:
|
||||
"-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Ubuntu, sans-serif",
|
||||
heading: "system-ui, sans-serif",
|
||||
monospace: "Menlo, monospace",
|
||||
},
|
||||
breakpoints,
|
||||
spacing,
|
||||
mediaQueries: {
|
||||
small: `@media screen and (min-width: ${breakpoints[0]})`,
|
||||
medium: `@media screen and (min-width: ${breakpoints[1]})`,
|
||||
large: `@media screen and (min-width: ${breakpoints[2]})`,
|
||||
},
|
||||
grid: {
|
||||
selectedShadow: `
|
||||
inset rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
inset rgba(206, 208, 190, 0.56) 0px 0px 0px 2px,
|
||||
inset rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
inset rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
|
||||
inset rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
inset rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
inset rgba(0, 0, 0, 0) 0px 0px 0px 0px;
|
||||
`,
|
||||
header: {
|
||||
padding: 2,
|
||||
fontSize: 1,
|
||||
fontFamily: "body",
|
||||
},
|
||||
data: {
|
||||
padding: 2,
|
||||
fontSize: 1,
|
||||
fontFamily: "body",
|
||||
},
|
||||
},
|
||||
shadows,
|
||||
variants: {
|
||||
loginCard: {
|
||||
boxShadow: "buttonBoxShadow",
|
||||
borderRadius: "3px",
|
||||
},
|
||||
badge: {
|
||||
fontSize: "0",
|
||||
color: "dark",
|
||||
backgroundColor: "lightest",
|
||||
boxShadow: "buttonBoxShadow",
|
||||
borderRadius: "3px",
|
||||
minWidth: "unset",
|
||||
px: "1",
|
||||
},
|
||||
},
|
||||
forms,
|
||||
buttons,
|
||||
radii: {
|
||||
small: "8px",
|
||||
},
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
export const labels = {
|
||||
required: {
|
||||
color: "danger",
|
||||
fontSize: 0,
|
||||
},
|
||||
GET: {
|
||||
color: "#1b7cb8",
|
||||
},
|
||||
POST: {
|
||||
color: "#0e8761",
|
||||
},
|
||||
DELETE: {
|
||||
color: "#bf3030",
|
||||
},
|
||||
}
|
||||
|
||||
export default labels
|
||||
@@ -1,119 +0,0 @@
|
||||
// eslint-disable-next-line import/no-anonymous-default-export
|
||||
export default {
|
||||
pill: `
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0.12) 0px 1px 1px 0px,
|
||||
rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(60, 66, 87, 0.08) 0px 0px 5px 0px;
|
||||
`,
|
||||
pillActive: `
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(83, 114, 93, 0.8) 0px 0px 0px 2px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px
|
||||
`,
|
||||
pillActiveFocus: `
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(206, 208, 190, 0.36) 0px 0px 0px 4px,
|
||||
rgba(83, 114, 93, 0.8) 0px 0px 0px 2px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px
|
||||
`,
|
||||
invalidBoxShadow: `
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(255, 66, 87, 0.8) 0px 0px 0px 1px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px;
|
||||
`,
|
||||
inputBoxShadow: `
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px;
|
||||
`,
|
||||
inputBoxShadowHover: `
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(206, 208, 190, 0.36) 0px 0px 0px 4px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px;
|
||||
`,
|
||||
buttonBoxShadow: `
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0.12) 0px 1px 1px 0px,
|
||||
rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
|
||||
`,
|
||||
buttonBoxShadowHover: `
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(0, 0, 0, 0.12) 0px 1px 1px 0px,
|
||||
rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(60, 66, 87, 0.08) 0px 3px 9px 0px,
|
||||
rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
|
||||
`,
|
||||
buttonBoxShadowActive: `
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(206, 208, 190, 0.36) 0px 0px 0px 4px,
|
||||
rgba(0, 0, 0, 0.12) 0px 1px 1px 0px,
|
||||
rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(60, 66, 87, 0.08) 0px 3px 9px 0px;
|
||||
rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
|
||||
`,
|
||||
tagBoxShadow: `
|
||||
rgba(0,0,0,0) 0px 0px 0px 0px,
|
||||
rgb(190, 191, 208) 0px 0px 0px 2px,
|
||||
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
||||
rgba(60, 62, 87, 0.22) 0px 0px 0px 2px,
|
||||
rgba(0,0,0,0) 0px 0px 0px 0px,
|
||||
rgba(0,0,0,0) 0px 0px 0px 0px,
|
||||
rgba(0,0,0,0) 0px 0px 0px 0px;
|
||||
`,
|
||||
ctaBoxShadow: `
|
||||
rgba(0,0,0,0) 0px 0px 0px 0px,
|
||||
rgba(0,0,0,0) 0px 0px 0px 0px,
|
||||
rgba(0,0,0,0.12) 0px 1px 1px 0px,
|
||||
rgba(62, 207, 142, 0) 0px 0px 0px 1px,
|
||||
rgba(0,0,0,0) 0px 0px 0px 0px,
|
||||
rgba(0,0,0,0) 0px 0px 0px 0px,
|
||||
rgba(60,66,87,0.08) 0px 2px 5px 0px;
|
||||
`,
|
||||
ctaBoxShadowHover: `
|
||||
rgba(0,0,0,0) 0px 0px 0px 0px,
|
||||
rgba(0,0,0,0) 0px 0px 0px 0px,
|
||||
rgba(0,0,0,0.12) 0px 1px 1px 0px,
|
||||
rgba(62, 207, 142, 0) 0px 0px 0px 1px,
|
||||
rgba(0,0,0,0) 0px 0px 0px 0px,
|
||||
rgba(62, 207, 142, 0.25) 0px 3px 9px 0px;
|
||||
rgba(62, 207, 142, 0.25) 0px 2px 5px 0px;
|
||||
`,
|
||||
|
||||
sidebarShadow: `
|
||||
inset -1px 0 0 0 var(--theme-ui-colors-separator)
|
||||
`,
|
||||
topbarShadow: `
|
||||
0 2px 5px 0 rgb(59 65 94 / 10%), 0 1px 1px 0 rgb(0 0 0 / 7%)
|
||||
`,
|
||||
}
|
||||
@@ -1,2 +0,0 @@
|
||||
// eslint-disable-next-line import/no-anonymous-default-export
|
||||
export default [0, 4, 8, 16, 32, 64]
|
||||
@@ -1,29 +0,0 @@
|
||||
import { useEffect, useRef, useState } from "react"
|
||||
|
||||
const useInView = options => {
|
||||
const containerRef = useRef(null)
|
||||
const [isInView, setIsInView] = useState(false)
|
||||
|
||||
const callback = entries => {
|
||||
const [entry] = entries
|
||||
setIsInView(entry.isIntersecting)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const ref = containerRef.current
|
||||
const observer = new IntersectionObserver(callback, options)
|
||||
if (ref) {
|
||||
observer.observe(ref)
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (ref) {
|
||||
observer.unobserve(ref)
|
||||
}
|
||||
}
|
||||
}, [containerRef, options])
|
||||
|
||||
return [containerRef, isInView]
|
||||
}
|
||||
|
||||
export default useInView
|
||||
@@ -1,746 +0,0 @@
|
||||
:root {
|
||||
--docsearch-primary-color: #7C53FF;
|
||||
/*dark*/
|
||||
--docsearch-secondary-color: #eef0f5;
|
||||
/*faded*/
|
||||
--docsearch-text-color: rgb(28, 30, 33);
|
||||
--docsearch-spacing: 12px;
|
||||
--docsearch-icon-stroke-width: 1.4;
|
||||
--docsearch-highlight-color: var(--docsearch-primary-color);
|
||||
--docsearch-muted-color: rgb(150, 159, 175);
|
||||
--docsearch-container-background: #eef0f575;
|
||||
--docsearch-logo-color: rgba(84, 104, 255);
|
||||
--docsearch-key-border: 1px solid rgba(0, 0, 0, .05);
|
||||
/* modal */
|
||||
--docsearch-modal-width: 560px;
|
||||
--docsearch-modal-height: 600px;
|
||||
--docsearch-modal-background: white;
|
||||
--docsearch-modal-shadow: 0 15px 35px 0 rgb(59 65 94 / 10%);
|
||||
/* searchbox */
|
||||
--docsearch-searchbox-height: 56px;
|
||||
--docsearch-searchbox-background: rgb(235, 237, 240);
|
||||
--docsearch-searchbox-focus-background: #fff;
|
||||
--docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
|
||||
/* hit */
|
||||
--docsearch-hit-height: 56px;
|
||||
--docsearch-hit-color: rgb(68, 73, 80);
|
||||
--docsearch-hit-active-color: #fff;
|
||||
--docsearch-hit-background: #fff;
|
||||
--docsearch-hit-shadow: 0 1px 3px 0 rgb(212, 217, 225);
|
||||
/* key */
|
||||
--docsearch-key-gradient: linear-gradient( -225deg, rgb(213, 219, 228) 0%, rgb(248, 248, 248) 100%);
|
||||
--docsearch-key-shadow: inset 0 -2px 0 0 rgb(205, 205, 230), inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4);
|
||||
/* footer */
|
||||
--docsearch-footer-height: 44px;
|
||||
--docsearch-footer-background: #fff;
|
||||
--docsearch-footer-shadow: 0 -1px 0 0 rgb(224, 227, 232), 0 -3px 6px 0 rgba(69, 98, 155, 0.12);
|
||||
}
|
||||
|
||||
/* Darkmode */
|
||||
|
||||
.dark {
|
||||
--docsearch-secondary-color: rgb(127, 132, 151);
|
||||
--docsearch-text-color: rgb(245, 246, 247);
|
||||
--docsearch-container-background: rgba(9, 10, 17, 0.8);
|
||||
--docsearch-modal-background: rgb(21, 23, 42);
|
||||
--docsearch-modal-shadow: inset 1px 1px 0 0 rgb(44, 46, 64), 0 3px 8px 0 rgb(0, 3, 9);
|
||||
--docsearch-searchbox-background: rgb(9, 10, 17);
|
||||
--docsearch-searchbox-focus-background: var(--docsearch-modal-background);
|
||||
--docsearch-hit-color: rgb(190, 195, 201);
|
||||
--docsearch-hit-shadow: none;
|
||||
--docsearch-hit-background: rgb(9, 10, 17);
|
||||
--docsearch-key-gradient: linear-gradient( -26.5deg, rgb(86, 88, 114) 0%, rgb(49, 53, 91) 100%);
|
||||
--docsearch-key-shadow: inset 0 -2px 0 0 rgb(40, 45, 85), inset 0 0 1px 1px rgb(81, 87, 125), 0 2px 2px 0 rgba(3, 4, 9, 0.3);
|
||||
--docsearch-footer-background: rgb(30, 33, 54);
|
||||
--docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5), 0 -4px 8px 0 rgba(0, 0, 0, 0.2);
|
||||
--docsearch-logo-color: rgb(255, 255, 255);
|
||||
--docsearch-muted-color: #d7d7d7;
|
||||
}
|
||||
|
||||
/* Body modifier */
|
||||
|
||||
.DocSearch--active {
|
||||
/*
|
||||
* We need to mark it as important because some websites override the
|
||||
* `style` attribute (e.g. Docusaurus).
|
||||
*/
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* Container & Modal */
|
||||
|
||||
.DocSearch-Container, .DocSearch-Container * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.DocSearch-Container {
|
||||
background-color: var(--docsearch-container-background);
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
.DocSearch-Container a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.DocSearch-Link {
|
||||
appearance: none;
|
||||
background: none;
|
||||
border: 0;
|
||||
color: var(--docsearch-highlight-color);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.DocSearch-Modal {
|
||||
background: var(--docsearch-modal-background);
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--docsearch-modal-shadow);
|
||||
flex-direction: column;
|
||||
margin: 60px auto auto;
|
||||
max-width: var(--docsearch-modal-width);
|
||||
position: relative;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Ubuntu, sans-serif;
|
||||
}
|
||||
|
||||
/* Modal Searchbox */
|
||||
|
||||
.DocSearch-SearchBar {
|
||||
display: flex;
|
||||
padding: var(--docsearch-spacing) var(--docsearch-spacing) 0;
|
||||
}
|
||||
|
||||
.DocSearch-Form {
|
||||
align-items: center;
|
||||
background: var(--docsearch-searchbox-focus-background);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
height: var(--docsearch-searchbox-height);
|
||||
padding: 0 var(--docsearch-spacing);
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.DocSearch-Input {
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: var(--docsearch-text-color);
|
||||
flex: 1;
|
||||
font: inherit;
|
||||
font-size: 1em;
|
||||
height: 100%;
|
||||
outline: none;
|
||||
padding: 0 0 0 8px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.DocSearch-Input::placeholder {
|
||||
color: var(--docsearch-muted-color);
|
||||
opacity: 1;
|
||||
/* Firefox */
|
||||
}
|
||||
|
||||
.DocSearch-Input::-webkit-search-cancel-button, .DocSearch-Input::-webkit-search-decoration, .DocSearch-Input::-webkit-search-results-button, .DocSearch-Input::-webkit-search-results-decoration {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.DocSearch-LoadingIndicator, .DocSearch-MagnifierLabel, .DocSearch-Reset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.DocSearch-MagnifierLabel, .DocSearch-Reset {
|
||||
align-items: center;
|
||||
color: var(--docsearch-highlight-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.DocSearch-Container--Stalled .DocSearch-MagnifierLabel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.DocSearch-LoadingIndicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.DocSearch-Container--Stalled .DocSearch-LoadingIndicator {
|
||||
align-items: center;
|
||||
color: var(--docsearch-highlight-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media screen and (prefers-reduced-motion: reduce) {
|
||||
.DocSearch-Reset {
|
||||
animation: none;
|
||||
appearance: none;
|
||||
background: none;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
color: var(--docsearch-icon-color);
|
||||
cursor: pointer;
|
||||
right: 0;
|
||||
stroke-width: var(--docsearch-icon-stroke-width);
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Reset {
|
||||
animation: fade-in 0.1s ease-in forwards;
|
||||
appearance: none;
|
||||
background: none;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
color: var(--docsearch-icon-color);
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
right: 0;
|
||||
stroke-width: var(--docsearch-icon-stroke-width);
|
||||
}
|
||||
|
||||
.DocSearch-Reset[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.DocSearch-Reset:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.DocSearch-Reset:hover {
|
||||
color: var(--docsearch-highlight-color);
|
||||
}
|
||||
|
||||
.DocSearch-LoadingIndicator svg, .DocSearch-MagnifierLabel svg {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
.DocSearch-Cancel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Modal Dropdown */
|
||||
|
||||
.DocSearch-Dropdown {
|
||||
max-height: calc( var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));
|
||||
overflow-y: auto;
|
||||
/* firefox */
|
||||
overflow-y: overlay;
|
||||
padding: 0 var(--docsearch-spacing);
|
||||
scrollbar-color: var(--docsearch-muted-color) var(--docsearch-modal-background);
|
||||
scrollbar-width: thin;
|
||||
border-top: 1px solid var(--docsearch-secondary-color)
|
||||
}
|
||||
|
||||
.DocSearch-Dropdown::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.DocSearch-Dropdown::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.DocSearch-Dropdown::-webkit-scrollbar-thumb {
|
||||
background-color: var(--docsearch-muted-color);
|
||||
border: 3px solid var(--docsearch-modal-background);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.DocSearch-Dropdown ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.DocSearch-Label {
|
||||
color: var(--docsearch-muted-color);
|
||||
font-size: 0.75em;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
.DocSearch-Help {
|
||||
color: var(--docsearch-muted-color);
|
||||
font-size: 0.9em;
|
||||
margin: 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.DocSearch-Title {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.DocSearch-Logo a {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.DocSearch-Logo svg {
|
||||
color: var(--docsearch-logo-color);
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
/* Hit */
|
||||
|
||||
.DocSearch-Hits:last-of-type {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.DocSearch-Hits mark {
|
||||
background: none;
|
||||
color: var(--docsearch-highlight-color);
|
||||
}
|
||||
|
||||
.DocSearch-HitsFooter {
|
||||
color: var(--docsearch-muted-color);
|
||||
display: flex;
|
||||
font-size: 0.85em;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--docsearch-spacing);
|
||||
padding: var(--docsearch-spacing);
|
||||
}
|
||||
|
||||
.DocSearch-HitsFooter a {
|
||||
border-bottom: 1px solid;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.DocSearch-Hit {
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
padding-bottom: 4px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media screen and (prefers-reduced-motion: reduce) {
|
||||
.DocSearch-Hit--deleting {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Hit--deleting {
|
||||
opacity: 0;
|
||||
transition: all 250ms linear;
|
||||
}
|
||||
|
||||
@media screen and (prefers-reduced-motion: reduce) {
|
||||
.DocSearch-Hit--favoriting {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Hit--favoriting {
|
||||
transform: scale(0);
|
||||
transform-origin: top center;
|
||||
transition: all 250ms linear;
|
||||
transition-delay: 250ms;
|
||||
}
|
||||
|
||||
.DocSearch-Hit a {
|
||||
background: var(--docsearch-hit-background);
|
||||
border-radius: 4px;
|
||||
box-shadow: var(--docsearch-hit-shadow);
|
||||
display: block;
|
||||
padding-left: var(--docsearch-spacing);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-source {
|
||||
background: var(--docsearch-modal-background);
|
||||
color: var(--docsearch-highlight-color);
|
||||
font-size: 0.85em;
|
||||
font-weight: 600;
|
||||
line-height: 32px;
|
||||
margin: 0 -4px;
|
||||
padding: 8px 4px 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-Tree {
|
||||
color: var(--docsearch-muted-color);
|
||||
height: var(--docsearch-hit-height);
|
||||
opacity: 0.5;
|
||||
stroke-width: var(--docsearch-icon-stroke-width);
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.DocSearch-Hit[aria-selected='true'] a {
|
||||
background-color: var(--docsearch-highlight-color);
|
||||
}
|
||||
|
||||
.DocSearch-Hit[aria-selected='true'] mark {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-Container {
|
||||
align-items: center;
|
||||
color: var(--docsearch-hit-color);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: var(--docsearch-hit-height);
|
||||
padding: 0 var(--docsearch-spacing) 0 0;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-icon {
|
||||
color: var(--docsearch-muted-color);
|
||||
height: 20px;
|
||||
stroke-width: var(--docsearch-icon-stroke-width);
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-action {
|
||||
align-items: center;
|
||||
color: var(--docsearch-muted-color);
|
||||
display: flex;
|
||||
height: 22px;
|
||||
stroke-width: var(--docsearch-icon-stroke-width);
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-action svg {
|
||||
display: block;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-action+.DocSearch-Hit-action {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-action-button {
|
||||
appearance: none;
|
||||
background: none;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
svg.DocSearch-Hit-Select-Icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-Select-Icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-action-button:hover, .DocSearch-Hit-action-button:focus {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
transition: background-color 0.1s ease-in;
|
||||
}
|
||||
|
||||
@media screen and (prefers-reduced-motion: reduce) {
|
||||
.DocSearch-Hit-action-button:hover, .DocSearch-Hit-action-button:focus {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Hit-action-button:hover path, .DocSearch-Hit-action-button:focus path {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-content-wrapper {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
font-weight: 500;
|
||||
justify-content: center;
|
||||
line-height: 1.2em;
|
||||
margin: 0 8px;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-title {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-path {
|
||||
color: var(--docsearch-muted-color);
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-title, .DocSearch-Hit[aria-selected='true'] mark, .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-text, .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-path, .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-icon, .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-action, .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-Tree {
|
||||
color: var(--docsearch-hit-active-color) !important;
|
||||
}
|
||||
|
||||
@media screen and (prefers-reduced-motion: reduce) {
|
||||
.DocSearch-Hit-action-button:hover, .DocSearch-Hit-action-button:focus {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* No Results - Start Screen - Error Screen */
|
||||
|
||||
.DocSearch-NoResults, .DocSearch-StartScreen, .DocSearch-ErrorScreen {
|
||||
font-size: 0.9em;
|
||||
margin: 0 auto;
|
||||
padding: 36px 0;
|
||||
text-align: center;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.DocSearch-Screen-Icon {
|
||||
color: var(--docsearch-muted-color);
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.DocSearch-NoResults-Prefill-List {
|
||||
display: inline-block;
|
||||
padding-bottom: 24px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.DocSearch-NoResults-Prefill-List ul {
|
||||
display: inline-block;
|
||||
padding: 8px 0 0;
|
||||
}
|
||||
|
||||
.DocSearch-NoResults-Prefill-List li {
|
||||
list-style-position: inside;
|
||||
list-style-type: '» ';
|
||||
}
|
||||
|
||||
.DocSearch-Prefill {
|
||||
appearance: none;
|
||||
background: none;
|
||||
border: 0;
|
||||
border-radius: 1em;
|
||||
color: var(--docsearch-highlight-color);
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 1em;
|
||||
font-weight: 700;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.DocSearch-Prefill:hover, .DocSearch-Prefill:focus {
|
||||
outline: none;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Modal Footer */
|
||||
|
||||
.DocSearch-Footer {
|
||||
align-items: center;
|
||||
background: var(--docsearch-footer-background);
|
||||
border-radius: 0 0 8px 8px;
|
||||
border-top: 1px solid var(--docsearch-secondary-color);
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
flex-shrink: 0;
|
||||
height: var(--docsearch-footer-height);
|
||||
justify-content: space-between;
|
||||
padding: 0 var(--docsearch-spacing);
|
||||
position: relative;
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
z-index: 300;
|
||||
}
|
||||
|
||||
.DocSearch-Commands {
|
||||
color: var(--docsearch-muted-color);
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.DocSearch-Commands li {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.DocSearch-Commands li:not(:last-of-type) {
|
||||
margin-right: 0.8em;
|
||||
}
|
||||
|
||||
.DocSearch-Commands-Key {
|
||||
align-items: center;
|
||||
/* background: var(--docsearch-key-gradient); */
|
||||
border-radius: 2px;
|
||||
/* box-shadow: var(--docsearch-key-shadow); */
|
||||
display: flex;
|
||||
height: 18px;
|
||||
justify-content: center;
|
||||
margin-right: 0.4em;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
|
||||
@media screen and (max-width: 848px) {
|
||||
:root {
|
||||
--docsearch-spacing: 10px;
|
||||
--docsearch-footer-height: 40px;
|
||||
}
|
||||
.DocSearch-Dropdown {
|
||||
height: 100%;
|
||||
}
|
||||
.DocSearch-Container {
|
||||
height: 100vh;
|
||||
height: -webkit-fill-available;
|
||||
position: absolute;
|
||||
}
|
||||
.DocSearch-Footer {
|
||||
border-radius: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
}
|
||||
.DocSearch-Hit-content-wrapper {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 80%;
|
||||
}
|
||||
.DocSearch-Modal {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
height: 100vh;
|
||||
height: -webkit-fill-available;
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.DocSearch-Cancel {
|
||||
appearance: none;
|
||||
background: none;
|
||||
border: 0;
|
||||
color: var(--docsearch-highlight-color);
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
flex: none;
|
||||
font: inherit;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
margin-left: var(--docsearch-spacing);
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.DocSearch-Commands {
|
||||
display: none;
|
||||
}
|
||||
.DocSearch-Hit-Tree {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--docsearch-container-background);
|
||||
border: 0;
|
||||
border-radius: 36px;
|
||||
color: var(--docsearch-muted-color);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-weight: 500;
|
||||
height: 38px;
|
||||
justify-content: space-between;
|
||||
padding: 0 8px;
|
||||
user-select: none;
|
||||
flex-grow: 1;
|
||||
max-width: 200px;
|
||||
margin-left: 12px;
|
||||
border: 2px solid transparent;
|
||||
transition: all .1s;
|
||||
}
|
||||
|
||||
.DocSearch-Button:hover, .DocSearch-Button:active, .DocSearch-Button:focus {
|
||||
border-color: var(--docsearch-primary-color);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.DocSearch-Button-Container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.DocSearch-Search-Icon {
|
||||
stroke-width: 1.6;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Search-Icon {
|
||||
color: var(--docsearch-muted-color);
|
||||
}
|
||||
|
||||
.DocSearch-Button-Placeholder {
|
||||
font-size: 1em;
|
||||
padding: 0 12px 0 6px;
|
||||
}
|
||||
|
||||
.DocSearch-Button-Keys {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: var(--docsearch-key-border);
|
||||
background-color: var(--docsearch-secondary-color);
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
margin-right: 4px;
|
||||
font-size: .85em;
|
||||
}
|
||||
|
||||
.DocSearch-Button-Key {
|
||||
align-items: center;
|
||||
border-radius: 3px;
|
||||
color: var(--docsearch-muted-color);
|
||||
display: flex;
|
||||
height: 10px;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.DocSearch-Button-Key:last-of-type {
|
||||
margin-left: 2px;
|
||||
padding-top: 1px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 848px) {
|
||||
.DocSearch-Button-Keys, .DocSearch-Button-Placeholder {
|
||||
display: none;
|
||||
}
|
||||
.DocSearch-Button {
|
||||
width: 30px;
|
||||
max-width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
background-color: var(--docsearch-container-background);
|
||||
border: none;
|
||||
}
|
||||
.DocSearch-Button .DocSearch-Search-Icon {
|
||||
color: var(--docsearch-primary-color);
|
||||
}
|
||||
.DocSearch-Search-Icon {
|
||||
stroke-width: 2.4;
|
||||
height: 1em;
|
||||
}
|
||||
}
|
||||
@@ -1,122 +0,0 @@
|
||||
code[class*="language-"], pre[class*="language-"] {
|
||||
color: #0a3149;
|
||||
background: none;
|
||||
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
.dark code[class*="language-"], .dark pre[class*="language-"] {
|
||||
color: #249feb;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
|
||||
:not(pre)>code[class*="language-"], pre[class*="language-"] {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
|
||||
:not(pre)>code[class*="language-"] {
|
||||
padding: 0.1em;
|
||||
border-radius: 0.3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.dark :not(pre)>code {
|
||||
background-color: #515151;
|
||||
}
|
||||
|
||||
.token.comment, .token.prolog, .token.doctype, .token.cdata {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #0a3149;
|
||||
}
|
||||
|
||||
.token.namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.token.property, .token.tag, .token.constant, .token.symbol, .token.deleted {
|
||||
color: #0a3149;
|
||||
}
|
||||
|
||||
.dark .token.property, .dark .token.tag, .dark .token.constant, .dark .token.symbol, .dark .token.deleted,
|
||||
.dark .token.punctuation {
|
||||
color: #249feb;
|
||||
}
|
||||
|
||||
.token.number {
|
||||
color: #e56f4a;
|
||||
}
|
||||
|
||||
.token.boolean {
|
||||
color: #3a97d4;
|
||||
}
|
||||
|
||||
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted {
|
||||
color: #10c38d;
|
||||
}
|
||||
|
||||
.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string, .token.variable {
|
||||
color: #0a3149;
|
||||
}
|
||||
|
||||
.dark .token.operator, .dark .token.entity, .dark .token.url, .dark .language-css .token.string, .dark .style .token.string,
|
||||
.dark .token.variable {
|
||||
color: #249feb;
|
||||
}
|
||||
|
||||
.token.atrule, .token.attr-value, .token.function, .token.class-name {
|
||||
color: #e6db74;
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: #3a97d4;
|
||||
}
|
||||
|
||||
.token.keyword.null {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.dark .token.keyword.null {
|
||||
color: rgb(184, 184, 184);
|
||||
}
|
||||
|
||||
.token.regex, .token.important {
|
||||
color: #fd971f;
|
||||
}
|
||||
|
||||
.token.important, .token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
import React, { useContext, useEffect, useState } from "react"
|
||||
|
||||
import Content from "../components/content"
|
||||
import { Helmet } from "react-helmet"
|
||||
import Layout from "../components/layout"
|
||||
import NavigationContext from "../context/navigation-context"
|
||||
import { convertToKebabCase } from "../utils/convert-to-kebab-case"
|
||||
|
||||
export default function ReferencePage({
|
||||
pageContext: { data, api, title, description, to },
|
||||
}) {
|
||||
const { setApi, goTo, metadata, currentSectionObj } = useContext(NavigationContext)
|
||||
const [siteData, setSiteData] = useState({
|
||||
title: title,
|
||||
description: description,
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
setApi(api)
|
||||
if (to) {
|
||||
goTo(to)
|
||||
} else if (data.sections && data.sections.length) {
|
||||
//go to the first section
|
||||
const firstSection = data.sections[0].section;
|
||||
goTo({
|
||||
section: convertToKebabCase(firstSection.section_name),
|
||||
method: firstSection.paths && firstSection.paths.length ? firstSection.paths[0].methods[0].method : '',
|
||||
sectionObj: firstSection
|
||||
})
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (metadata) {
|
||||
setSiteData({
|
||||
title: metadata.title,
|
||||
description: metadata.description,
|
||||
})
|
||||
}
|
||||
}, [metadata])
|
||||
|
||||
return (
|
||||
<Layout data={data} api={api}>
|
||||
<Helmet>
|
||||
<title>{`API | Medusa API Reference`}</title>
|
||||
<meta name="description" content={siteData.description} />
|
||||
</Helmet>
|
||||
<Content data={data} currentSection={currentSectionObj} api={api} />
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
export const checkDisplay = element => {
|
||||
const mc = element.closest("#method-container")
|
||||
|
||||
//if no closest method container exists then it is a section and we can scroll
|
||||
if (!mc) return true
|
||||
|
||||
const style = getComputedStyle(mc)
|
||||
if (style.display === "none") {
|
||||
return false
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
export const convertToKebabCase = string => {
|
||||
return string
|
||||
.replace(/\s+/g, "-")
|
||||
.replace("'", "")
|
||||
.replace(".", "")
|
||||
.replace('"', "")
|
||||
.toLowerCase()
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
export const formatMethodParams = (method) => {
|
||||
const { parameters, requestBody } = method
|
||||
|
||||
const params = []
|
||||
const body = []
|
||||
if (parameters && parameters.length > 0) {
|
||||
parameters.map((p) => {
|
||||
return params.push({
|
||||
property: p.name,
|
||||
description: p.description,
|
||||
required: p.required,
|
||||
type: p.schema.type,
|
||||
})
|
||||
})
|
||||
}
|
||||
if (requestBody) {
|
||||
const { required, properties } = requestBody
|
||||
properties.map((p) => {
|
||||
return body.push({
|
||||
property: p.property,
|
||||
description: p.description,
|
||||
required: required ? required.some((req) => req === p.property) : false,
|
||||
type: p.type,
|
||||
nestedModel: p.nestedModel,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
return { properties: params, body }
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
export const formatRoute = string => {
|
||||
return string.replace(/{(.*?)}/g, ":$1")
|
||||
}
|
||||
@@ -1,215 +0,0 @@
|
||||
import { graphql } from "gatsby"
|
||||
|
||||
export const StoreSections = graphql`
|
||||
fragment StoreSections on StoreSections {
|
||||
sections {
|
||||
...StoreSection
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const StoreSection = graphql`
|
||||
fragment StoreSection on StoreSectionsSection {
|
||||
section_name
|
||||
paths {
|
||||
...StorePath
|
||||
}
|
||||
schema {
|
||||
object
|
||||
description
|
||||
properties {
|
||||
property
|
||||
type
|
||||
description
|
||||
format
|
||||
nestedModel {
|
||||
title
|
||||
properties {
|
||||
property
|
||||
type
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const StorePath = graphql`
|
||||
fragment StorePath on StoreSectionsSectionPaths {
|
||||
name
|
||||
methods {
|
||||
...StoreMethod
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const StoreMethod = graphql`
|
||||
fragment StoreMethod on StoreSectionsSectionPathsMethods {
|
||||
tags
|
||||
summary
|
||||
description
|
||||
method
|
||||
operationId
|
||||
responses {
|
||||
...StoreResponse
|
||||
}
|
||||
requestBody {
|
||||
...StoreRequestBody
|
||||
}
|
||||
|
||||
parameters {
|
||||
description
|
||||
in
|
||||
name
|
||||
required
|
||||
schema {
|
||||
type
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const StoreResponse = graphql`
|
||||
fragment StoreResponse on StoreSectionsSectionPathsMethodsResponses {
|
||||
status
|
||||
description
|
||||
content {
|
||||
_ref
|
||||
property
|
||||
description
|
||||
json
|
||||
items {
|
||||
_ref
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const StoreRequestBody = graphql`
|
||||
fragment StoreRequestBody on StoreSectionsSectionPathsMethodsRequestBody {
|
||||
type
|
||||
required
|
||||
properties {
|
||||
description
|
||||
property
|
||||
type
|
||||
nestedModel {
|
||||
title
|
||||
properties {
|
||||
property
|
||||
type
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const AdminSections = graphql`
|
||||
fragment AdminSections on AdminSections {
|
||||
sections {
|
||||
...AdminSection
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const AdminSection = graphql`
|
||||
fragment AdminSection on AdminSectionsSection {
|
||||
section_name
|
||||
paths {
|
||||
...AdminPath
|
||||
}
|
||||
schema {
|
||||
object
|
||||
description
|
||||
properties {
|
||||
property
|
||||
type
|
||||
description
|
||||
format
|
||||
nestedModel {
|
||||
title
|
||||
properties {
|
||||
property
|
||||
type
|
||||
description
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const AdminPath = graphql`
|
||||
fragment AdminPath on AdminSectionsSectionPaths {
|
||||
name
|
||||
methods {
|
||||
...AdminMethod
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const AdminMethod = graphql`
|
||||
fragment AdminMethod on AdminSectionsSectionPathsMethods {
|
||||
tags
|
||||
summary
|
||||
description
|
||||
method
|
||||
operationId
|
||||
responses {
|
||||
...AdminResponse
|
||||
}
|
||||
requestBody {
|
||||
...AdminRequestBody
|
||||
}
|
||||
|
||||
parameters {
|
||||
description
|
||||
in
|
||||
name
|
||||
required
|
||||
schema {
|
||||
type
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const AdminResponse = graphql`
|
||||
fragment AdminResponse on AdminSectionsSectionPathsMethodsResponses {
|
||||
status
|
||||
description
|
||||
content {
|
||||
_ref
|
||||
type
|
||||
property
|
||||
description
|
||||
json
|
||||
items {
|
||||
type
|
||||
_ref
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const AdminRequestBody = graphql`
|
||||
fragment AdminRequestBody on AdminSectionsSectionPathsMethodsRequestBody {
|
||||
type
|
||||
required
|
||||
properties {
|
||||
description
|
||||
enum
|
||||
format
|
||||
property
|
||||
type
|
||||
nestedModel {
|
||||
title
|
||||
properties {
|
||||
property
|
||||
type
|
||||
description
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
@@ -1,20 +0,0 @@
|
||||
const scrollParent = (parent, child) => {
|
||||
const parentRect = parent.getBoundingClientRect()
|
||||
|
||||
const parentViewableArea = {
|
||||
height: parent.clientHeight,
|
||||
width: parent.clientWidth,
|
||||
}
|
||||
|
||||
const childRect = child.getBoundingClientRect()
|
||||
const isViewable =
|
||||
childRect.top >= parentRect.top &&
|
||||
childRect.top <= parentRect.top + parentViewableArea.height
|
||||
|
||||
if (!isViewable) {
|
||||
const pos = childRect.top + parent.scrollTop - parentRect.top
|
||||
parent.scrollTop = pos > 0 ? pos : 0
|
||||
}
|
||||
}
|
||||
|
||||
export default scrollParent
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
16631
www/reference/yarn.lock
16631
www/reference/yarn.lock
File diff suppressed because it is too large
Load Diff
6028
www/yarn.lock
6028
www/yarn.lock
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user