feat: Documentation and API reference (#348)
Co-authored-by: Vadim Smirnov <smirnou.vadzim@gmail.com> Co-authored-by: zakariasaad <zakaria.elas@gmail.com> Co-authored-by: Vilfred Sikker <vilfredsikker@gmail.com> Co-authored-by: Kasper <kasper@medusa-commerce.com> Co-authored-by: Sebastian Rindom <skrindom@gmail.com> Co-authored-by: Kasper Fabricius Kristensen <45367945+kasperkristensen@users.noreply.github.com>
This commit is contained in:
Oliver Windall Juhl
co-authored by
Vadim Smirnov
zakariasaad
Vilfred Sikker
Kasper
Sebastian Rindom
Kasper Fabricius Kristensen
Vadim Smirnov
zakariasaad
Vilfred Sikker
Kasper
Sebastian Rindom
Kasper Fabricius Kristensen
parent
5d63b0c8d2
commit
f76aa816a5
@@ -0,0 +1,55 @@
|
||||
import React, { useEffect, useState } from "react"
|
||||
import CloseIcon from "../close-icon"
|
||||
import styles from "./banner.module.css"
|
||||
import clsx from "clsx"
|
||||
import useThemeContext from "@theme/hooks/useThemeContext"
|
||||
import ConfLogo from "../../../static/img/logo.svg"
|
||||
|
||||
const Banner = (props) => {
|
||||
const [isBannerVisible, setIsBannerVisible] = useState(true)
|
||||
const { isDarkTheme } = useThemeContext()
|
||||
|
||||
const handleDismissBanner = () => {
|
||||
setIsBannerVisible(false)
|
||||
if (localStorage) {
|
||||
localStorage.setItem("mc::banner", false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (localStorage) {
|
||||
const shouldShow = localStorage.getItem("mc::banner")
|
||||
if (!shouldShow) {
|
||||
setIsBannerVisible(true)
|
||||
}
|
||||
|
||||
if (shouldShow === "false") {
|
||||
setIsBannerVisible(false)
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
isBannerVisible && (
|
||||
<div className={clsx(styles.bannerContainer, "margin-top--lg")}>
|
||||
<div
|
||||
className={clsx(styles.banner, "padding--sm", "padding-right--md")}
|
||||
>
|
||||
<div className="padding" sx={{ marginLeft: "10px" }}>
|
||||
<ConfLogo />
|
||||
<p className="padding-left--md">
|
||||
We are still working on building out our documentation and guides,
|
||||
but if you are interested in learning more please reach out - we
|
||||
would love to jump on a call with you and help you get set up!
|
||||
</p>
|
||||
</div>
|
||||
{/* <div style={{ cursor: "pointer" }} onClick={handleDismissBanner}>
|
||||
<CloseIcon fill={isDarkTheme ? "white" : "black"} />
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
export default Banner
|
||||
@@ -0,0 +1,18 @@
|
||||
.bannerContainer {
|
||||
height: 100%;
|
||||
padding: 10px 0px;
|
||||
margin-bottom: 20px;
|
||||
background-color: var(--ifm-medusa-gray);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.bannerContainer svg {
|
||||
max-width: 100px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.banner {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export { default as Banner } from "./Banner"
|
||||
@@ -0,0 +1,50 @@
|
||||
import React from "react"
|
||||
import Link from "@docusaurus/Link"
|
||||
import CodeBlock from "@theme/CodeBlock"
|
||||
import styles from "./intro.module.css"
|
||||
|
||||
const Intro = ({ title, desc }) => {
|
||||
return (
|
||||
<div>
|
||||
<h1 className="margin-bottom--xs margin-top--lg">Documentation</h1>
|
||||
<p className={styles.title}>{title}</p>
|
||||
<h2 className="margin-top--lg margin-bottom--sm">Quickstart</h2>
|
||||
<p className={styles.description}>{desc}</p>
|
||||
<CodeBlock>
|
||||
{`yarn global add @medusajs/medusa-cli
|
||||
medusa new my-awesome-store`}
|
||||
</CodeBlock>
|
||||
<div>
|
||||
<Link
|
||||
to="quickstart/quick-start"
|
||||
className="margin-top--md margin-bottom--sm button button--lg button--primary"
|
||||
>
|
||||
Quickstart Guide →
|
||||
</Link>
|
||||
</div>
|
||||
<div className={` margin-top--md`}>
|
||||
<Link
|
||||
to="tutorial/set-up-your-development-environment"
|
||||
className={`${styles.docsLink}`}
|
||||
>
|
||||
Set up your own local environment →
|
||||
</Link>
|
||||
</div>
|
||||
<div className={`margin-top--md`}>
|
||||
<Link
|
||||
to="tutorial/creating-your-medusa-server"
|
||||
className={`${styles.docsLink}`}
|
||||
>
|
||||
Create your very own Medusa server →
|
||||
</Link>
|
||||
</div>
|
||||
<div className={`margin-top--md margin-bottom--xl`}>
|
||||
<Link to="how-to/plugins" className={`${styles.docsLink}`}>
|
||||
Explore plugins →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Intro
|
||||
@@ -0,0 +1 @@
|
||||
export { default as Intro } from "./Intro"
|
||||
@@ -0,0 +1,17 @@
|
||||
.title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.docsLink {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 966px) {
|
||||
.docsLink {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import React from "react"
|
||||
import RootLayout from "@theme/Layout"
|
||||
|
||||
const Layout = ({ children, ...props }) => {
|
||||
return (
|
||||
<RootLayout {...props}>
|
||||
<div className="container">{children}</div>
|
||||
</RootLayout>
|
||||
)
|
||||
}
|
||||
|
||||
export default Layout
|
||||
@@ -0,0 +1 @@
|
||||
export { default as Layout } from "./Layout"
|
||||
@@ -0,0 +1,19 @@
|
||||
import React from "react"
|
||||
import styles from "./tab.module.css"
|
||||
|
||||
const TabItem = ({ title, isOverviewCard, items }) => {
|
||||
const overviewModeList = () =>
|
||||
items.map((item) => <p className="margin-bottom--xs">{item.title}</p>)
|
||||
return (
|
||||
<div className="col col--4 padding-right--md padding-bottom--md">
|
||||
<div className={styles.card}>
|
||||
<div className={styles.cardContent}>
|
||||
<h3>{title}</h3>
|
||||
<div>{isOverviewCard && overviewModeList()}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TabItem
|
||||
@@ -0,0 +1 @@
|
||||
export { default as TabItem } from "./TabItem"
|
||||
@@ -0,0 +1,18 @@
|
||||
.card {
|
||||
background-color: var(--ifm-medusa-gray);
|
||||
min-height: 257px;
|
||||
border-radius: 5px;
|
||||
padding: 20px 13px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cardContent {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.cardContent p {
|
||||
font-size: 18px;
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import clsx from "clsx"
|
||||
import React, { useState } from "react"
|
||||
import { TabItem } from "./TabItem/"
|
||||
|
||||
const BUTTONS_DATA = [
|
||||
{ buttonTitle: "Overview", value: "overview" },
|
||||
{ buttonTitle: "Tutorial", value: "tutorial" },
|
||||
{ buttonTitle: "Guides", value: "guide" },
|
||||
{ buttonTitle: "Reference", value: "reference" },
|
||||
]
|
||||
|
||||
const OVERVIEW_DATA = ["Tutorial", "Guides", "Reference"]
|
||||
|
||||
const TabsPanel = ({ items }) => {
|
||||
const [sort, setSort] = useState("overview")
|
||||
|
||||
const buttons = BUTTONS_DATA.map((item) => (
|
||||
// <button
|
||||
// className={clsx(
|
||||
// { [styles.buttonActive]: sort === item.value },
|
||||
// styles.button
|
||||
// )}
|
||||
// onClick={() => setSort(item.value)}
|
||||
// >
|
||||
// {item.buttonTitle}
|
||||
// </button>
|
||||
<li
|
||||
className={clsx("tabs__item", {
|
||||
"tabs__item--active": sort === item.value,
|
||||
})}
|
||||
onClick={() => setSort(item.value)}
|
||||
>
|
||||
{item.buttonTitle}
|
||||
</li>
|
||||
))
|
||||
|
||||
const getOverviewCardItemsSet = (currentCard) =>
|
||||
items.filter((item) => item.key === currentCard.toLowerCase())
|
||||
|
||||
const overviewCardsSet = () =>
|
||||
OVERVIEW_DATA.map((item) => (
|
||||
<TabItem
|
||||
isOverviewCard
|
||||
title={item}
|
||||
items={getOverviewCardItemsSet(item)}
|
||||
/>
|
||||
))
|
||||
|
||||
const getSortedArray = () => {
|
||||
return items.filter((entry) => entry.type === sort)
|
||||
}
|
||||
|
||||
const renderTabItems = () => {
|
||||
if (sort === "overview") return overviewCardsSet()
|
||||
return getSortedArray().length > 0 ? (
|
||||
getSortedArray().map((item) => {
|
||||
return <TabItem title={item.title} />
|
||||
})
|
||||
) : (
|
||||
<p>hold tight! we are building these things</p>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="padding-bottom--xl">
|
||||
{/* <Box sx={{ borderBottom: "1px solid black", marginBottom: "50px" }}>
|
||||
{buttons}
|
||||
</Box> */}
|
||||
<ul class="tabs margin-bottom--lg">{buttons}</ul>
|
||||
<div className="container padding--none">
|
||||
<div className="row row--no-gutters">{renderTabItems()}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TabsPanel
|
||||
@@ -0,0 +1 @@
|
||||
export { default as TabsPanel } from "./TabsPanel"
|
||||
@@ -0,0 +1,15 @@
|
||||
.button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
height: 30px;
|
||||
font-size: 16px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.buttonActive {
|
||||
color: var(--ifm-color-primary);
|
||||
border-bottom: 3px solid var(--ifm-color-primary) !important;
|
||||
font-weight: 500;
|
||||
transition: ;
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import React from "react"
|
||||
|
||||
const CloseIcon = ({ fill = "black" }) => (
|
||||
<svg
|
||||
width="15"
|
||||
height="15"
|
||||
viewBox="0 0 9 8"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M1.05 7.76L0.51 7.22L3.79 3.92L0.51 0.62L1.05 0.0799997L4.33 3.38L7.59 0.0799997L8.13 0.62L4.85 3.92L8.13 7.22L7.59 7.76L4.33 4.48L1.05 7.76Z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default CloseIcon
|
||||
@@ -0,0 +1,48 @@
|
||||
import React from "react"
|
||||
|
||||
const ConfLogo = ({ fill }) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 371.2226 96">
|
||||
<title>medusa-logo-one-colour-rgb</title>
|
||||
<g id="black-rgb">
|
||||
<path
|
||||
id="logoMark"
|
||||
d="M77.8271,15.6225,56.08,3.0664a22.8877,22.8877,0,0,0-22.8877,0L11.4438,15.6225A22.8877,22.8877,0,0,0,0,35.4438V60.5562A22.8877,22.8877,0,0,0,11.4438,80.3775L33.1919,92.9336a22.8877,22.8877,0,0,0,22.8877,0L77.8271,80.3775A22.8876,22.8876,0,0,0,89.271,60.5562V35.4438A22.8876,22.8876,0,0,0,77.8271,15.6225ZM44.6357,70.3178A22.3178,22.3178,0,1,1,66.9531,48,22.3176,22.3176,0,0,1,44.6357,70.3178Z"
|
||||
style="fill: #0a3149"
|
||||
/>
|
||||
<g id="type">
|
||||
<path
|
||||
id="type_CompoundPathItem_"
|
||||
d="M163.5361,22.6571h14.1416V71.662H169.206V30.078L155.625,71.662h-8.8907l-13.581-41.0948V71.662h-8.4707V22.6571h14.2109l12.3906,39.2734Z"
|
||||
style="fill: #0a3149"
|
||||
/>
|
||||
<path
|
||||
id="type_CompoundPathItem_2"
|
||||
d="M220.4453,60.6c-2.03,7.3516-8.2608,12.042-17.0118,12.042-10.9209,0-17.8525-7.3515-17.8525-18.4824s7.001-18.4814,18.0625-18.4814c12.3213,0,18.6914,9.24,15.332,20.7216H194.0517c.7012,5.8106,3.9209,9.2413,9.5215,9.2413,3.92,0,7.001-1.82,8.1914-5.0411Zm-26.253-9.871H211.414c.49-5.04-2.38-8.33-7.9111-8.33C198.2529,42.3993,195.0322,45.34,194.1923,50.7294Z"
|
||||
style="fill: #0a3149"
|
||||
/>
|
||||
<path
|
||||
id="type_CompoundPathItem_3"
|
||||
d="M252.5742,22.6571h7.9814V71.662h-7.9814V66.4813a13.8489,13.8489,0,0,1-11.9014,6.1611c-9.24,0-15.752-7.3515-15.752-18.4824,0-11.06,6.4415-18.4814,15.752-18.4814a13.85,13.85,0,0,1,11.9014,6.16Zm.3506,31.5029c0-6.9306-3.9209-11.4814-9.8018-11.4814-5.95,0-9.87,4.5508-9.87,11.4814s3.92,11.4815,9.87,11.4815C249.0039,65.6415,252.9248,61.0907,252.9248,54.16Z"
|
||||
style="fill: #0a3149"
|
||||
/>
|
||||
<path
|
||||
id="type_CompoundPathItem_4"
|
||||
d="M290.2333,36.6581h7.9805V71.662h-7.9805V65.3612c-2.4511,4.69-6.4414,7.1406-11.3417,7.1406-9.7305,0-11.2715-9.6611-11.2715-15.8916V36.6581h7.98V56.5409c0,4.62,1.0508,9.03,6.0918,9.03,5.18,0,8.541-4.62,8.541-11.0605Z"
|
||||
style="fill: #0a3149"
|
||||
/>
|
||||
<path
|
||||
id="type_CompoundPathItem_5"
|
||||
d="M304.0888,59.1307H311.79c-.49,4.3408,2.7305,7.07,8.1914,7.07,4.2695,0,7.1406-1.68,7.1406-4.2,0-7.0009-22.5429-1.96-22.5429-15.0517,0-7,6.5107-11.27,14.9824-11.27,9.3808,0,16.1709,5.25,14.7011,13.1611h-7.7714c.98-3.99-2.17-6.7207-7-6.7207-4.0606,0-6.7207,1.82-6.7207,4.34,0,7.0713,22.6123,1.6807,22.6123,14.9825,0,7.07-6.3711,11.2011-15.4717,11.2011C310.04,72.6424,303.5292,67.6014,304.0888,59.1307Z"
|
||||
style="fill: #0a3149"
|
||||
/>
|
||||
<path
|
||||
id="type_CompoundPathItem_6"
|
||||
d="M371.2226,51.78V71.662H363.872V65.5711a13.7856,13.7856,0,0,1-12.6015,7.0713c-7.42,0-12.0411-4.3408-12.0411-10.4316,0-7.07,6.16-11.3408,16.0313-11.3408a36.6377,36.6377,0,0,1,7.9814.91c0-5.3213-1.8906-9.1709-7.4912-9.1709-4.2,0-6.791,2.1-5.95,6.02H341.749c-1.89-7.77,4.9707-12.9511,14.0722-12.9511C366.0419,35.6786,371.2226,42.0487,371.2226,51.78Zm-7.7,6.0909a25.2,25.2,0,0,0-7.6308-1.19c-5.7413,0-8.5411,2.1006-8.5411,5.32,0,2.8008,2.1,4.27,5.53,4.27A10.8339,10.8339,0,0,0,363.5224,57.871Z"
|
||||
style="fill: #0a3149"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default ConfLogo
|
||||
Reference in New Issue
Block a user