chore: merge docs from master to develop (#3650)
* Fix issue on fixed total amount discount when using includes tax (#3472) The calculation of the fixed discount amount breaks when having includes_tax setting active, due to the line item totals are incorrect and returning everything as 0, thus the totalItemPercentage will be Infinitiy due to the division by a subtotal of 0 * chore: Add missing changeset for @medusajs/medusa * feat(medusa): Improve performance of Products domain (#3417) * feat(medusa): Improve product update performances * fix tests and update * update mock repo * improve repo * cleanup * fix * cleanup + bulk emit + unit test fix * improvements * improve * fix unit tests * fix export * fix product update handler * enhance mock repo * fix import integration * fix end point tests * revert mock repo product variant * fix unit * cleanup * cleanup * address feedback * fix quotes in tests * address feedback * Create new-tips-mate.md * use types * chore: Remove integration-tests from changeset * chore(release): v1.7.14 * chore(docs): Generated Docs Announcement Bar (automated) (#3489) Co-authored-by: olivermrbl <olivermrbl@users.noreply.github.com> * fix(medusa): EventBusService.emit using Redis mock (#3491) * Fix eventBusService.emit using redis mock * revert gitignore * enqueuer * unit test add redis_url * fix test * chore(docs): Generated Services Reference (automated) (#3490) Co-authored-by: olivermrbl <olivermrbl@users.noreply.github.com> * docs: publish restructure (#3496) * docs: added features and guides overview page * added image * added version 2 * added version 3 * added version 4 * docs: implemented new color scheme * docs: redesigned sidebar (#3193) * docs: redesigned navbar for restructure (#3199) * docs: redesigned footer (#3209) * docs: redesigned cards (#3230) * docs: redesigned admonitions (#3231) * docs: redesign announcement bar (#3236) * docs: redesigned large cards (#3239) * docs: redesigned code blocks (#3253) * docs: redesigned search modal and page (#3264) * docs: redesigned doc footer (#3268) * docs: added new sidebars + refactored css and assets (#3279) * docs: redesigned api reference sidebar * docs: refactored css * docs: added code tabs transition * docs: added new sidebars * removed unused assets * remove unusued assets * Fix deploy errors * fix incorrect link * docs: fixed code responsivity + missing icons (#3283) * docs: changed icons (#3296) * docs: design fixes to the sidebar (#3297) * redesign fixes * docs: small design fixes * docs: several design fixes after restructure (#3299) * docs: bordered icon fixes * docs: desgin fixes * fixes to code blocks and sidebar scroll * design adjustments * docs: restructured homepage (#3305) * docs: restructured homepage * design fixes * fixed core concepts icon * docs: added core concepts page (#3318) * docs: restructured homepage * design fixes * docs: added core concepts page * changed text of different components * docs: added architecture link * added missing prop for user guide * docs: added regions overview page (#3327) * docs: added regions overview * moved region pages to new structure * docs: fixed description of regions architecture page * small changes * small fix * docs: added customers overview page (#3331) * docs: added regions overview * moved region pages to new structure * docs: fixed description of regions architecture page * small changes * small fix * docs: added customers overview page * fix link * resolve link issues * docs: updated regions architecture image * docs: second-iteration fixes (#3347) * docs: redesigned document * design fixes * docs: added products overview page (#3354) * docs: added carts overview page (#3363) * docs: added orders overview (#3364) * docs: added orders overview * added links in overview * docs: added vercel redirects * docs: added soon badge for cards (#3389) * docs: resolved feedback changes + organized troubleshooting pages (#3409) * docs: resolved feedback changes * added extra line * docs: changed icons for restructure (#3421) * docs: added taxes overview page (#3422) * docs: added taxes overview page * docs: fix sidebar label * added link to taxes overview page * fixed link * docs: fixed sidebar scroll (#3429) * docs: added discounts overview (#3432) * docs: added discounts overview * fixed links * docs: added gift cards overview (#3433) * docs: added price lists overview page (#3440) * docs: added price lists overview page * fixed links * docs: added sales channels overview page (#3441) * docs: added sales overview page * fixed links * docs: added users overview (#3443) * docs: fixed sidebar border height (#3444) * docs: fixed sidebar border height * fixed svg markup * docs: added possible solutions to feedback component (#3449) * docs: added several overview pages + restructured files (#3463) * docs: added several overview pages * fixed links * docs: added feature flags + PAK overview pages (#3464) * docs: added feature flags + PAK overview pages * fixed links * fix link * fix link * fixed links colors * docs: added strategies overview page (#3468) * docs: automated upgrade guide (#3470) * docs: automated upgrade guide * fixed vercel redirect * docs: restructured files in docs codebase (#3475) * docs: restructured files * docs: fixed eslint exception * docs: finished restructure loose-ends (#3493) * fixed uses of backend * docs: finished loose ends * eslint fixes * fixed links * merged master * added update instructions for v1.7.12 * docs: fixed discount details (#3499) * docs: fix trailing slash causing 404 (#3508) * docs: fix error during navigation (#3509) * docs: removed the gatsby storefront guide (#3527) * docs: removed the gatsby storefront guide * docs: fixed query value * chore(docs): Removed Docs Announcement Bar (automated) (#3536) Co-authored-by: shahednasser <shahednasser@users.noreply.github.com> * fix(medusa): Variant update should include the id for the listeners to be able to identify the entity (#3539) * fix(medusa): Variant update should include the id for the listeners to be able to identify the entity * fix unit tests * Create brave-seahorses-film.md * docs: fix admin redirects (#3548) * chore(release): v1.7.15 * chore(docs): Generated Docs Announcement Bar (automated) (#3550) Co-authored-by: olivermrbl <olivermrbl@users.noreply.github.com> * chore(docs): Generated Services Reference (automated) (#3551) Automated changes by [create-pull-request](https://github.com/peter-evans/create-pull-request) GitHub action Co-authored-by: Oliver Windall Juhl <59018053+olivermrbl@users.noreply.github.com> * chore: updated READMEs of plugins (#3546) * chore: updated READMEs of plugins * added notice to plugins * docs: added a deploy guide for next.js storefront (#3558) * docs: added a deploy next.js guide * docs: fix image zoom * docs: fixes to next.js deployment guide to vercel (#3562) * chore(workflows): Enable manual workflow in pre-release mode (#3566) * chore(docs): Removed Docs Announcement Bar (automated) (#3598) Co-authored-by: shahednasser <shahednasser@users.noreply.github.com> * fix(medusa): Rounding issues on line item adjustments (#3446) * chores(medusa): Attempt to fix discount rounding issues * add migration * update entities * apply multipler factor properly * fix discount service * WIP * fix rounding issues in discounts * fix some tests * Exclude raw_discount_total from responses * fix adjustments * cleanup response * fix * fix draft order integration * fix order integration * fix order integration * address feedback * fix test * Create .changeset/polite-llamas-sit.md * remove comment --------- Co-authored-by: Oliver Windall Juhl <59018053+olivermrbl@users.noreply.github.com> * chore(workflows): Add release notification (#3629) --------- Co-authored-by: pepijn-vanvlaanderen <pepijn@webbers.com> Co-authored-by: olivermrbl <oliver@mrbltech.com> Co-authored-by: Adrien de Peretti <adrien.deperetti@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: olivermrbl <olivermrbl@users.noreply.github.com> Co-authored-by: Carlos R. L. Rodrigues <37986729+carlos-r-l-rodrigues@users.noreply.github.com> Co-authored-by: shahednasser <shahednasser@users.noreply.github.com> Co-authored-by: Oliver Windall Juhl <59018053+olivermrbl@users.noreply.github.com>
This commit is contained in:
Shahed Nasser
co-authored by
olivermrbl
shahednasser
Oliver Windall Juhl
pepijn-vanvlaanderen
olivermrbl
Adrien de Peretti
github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Carlos R. L. Rodrigues
olivermrbl
shahednasser
Oliver Windall Juhl
pepijn-vanvlaanderen
olivermrbl
Adrien de Peretti
github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Carlos R. L. Rodrigues
parent
e6b5859af2
commit
6f1b49af03
@@ -0,0 +1,16 @@
|
||||
import React from "react"
|
||||
import styles from './styles.module.css'
|
||||
import clsx from 'clsx';
|
||||
|
||||
export default function Badge ({ className, variant, children }) {
|
||||
return (
|
||||
<span className={clsx(
|
||||
styles.badge,
|
||||
className,
|
||||
variant === 'purple' && styles.purpleBadge,
|
||||
variant === 'orange' && styles.orangeBadge
|
||||
)}>
|
||||
{children}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
.badge {
|
||||
font-size: var(--medusa-label-x-small-plus-size);
|
||||
line-height: var(--medusa-label-x-small-plus-line-height);
|
||||
font-weight: var(--medusa-label-x-small-plus-font-weight);
|
||||
padding: 1px 7px;
|
||||
border-radius: var(--ifm-global-radius);
|
||||
border: 1px solid;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.purpleBadge {
|
||||
background-color: var(--medusa-tag-purple-bg);
|
||||
border-color: var(--medusa-tag-purple-border);
|
||||
color: var(--medusa-tag-purple-text);
|
||||
}
|
||||
|
||||
.orangeBadge {
|
||||
background-color: var(--medusa-tag-orange-bg);
|
||||
border-color: var(--medusa-tag-orange-border);
|
||||
color: var(--medusa-tag-orange-text);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import React from "react"
|
||||
import clsx from 'clsx'
|
||||
import styles from './styles.module.css'
|
||||
|
||||
export default function Bordered ({ wrapperClassName, children }) {
|
||||
return (
|
||||
<span className={clsx(styles.elementWrapper, 'no-zoom-img', wrapperClassName)}>
|
||||
{children}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
.elementWrapper {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: var(--ifm-global-radius);
|
||||
padding: var(--bordered-padding);
|
||||
border: 1px solid var(--bordered-border-color);
|
||||
margin-right: var(--bordered-margin-right);
|
||||
width: fit-content;
|
||||
background-color: var(--ifm-background-color);
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import React from "react"
|
||||
import ThemedImage from '@theme/ThemedImage'
|
||||
import clsx from 'clsx'
|
||||
import styles from './styles.module.css'
|
||||
import Bordered from "../Bordered"
|
||||
|
||||
export default function BorderedIcon ({ icon = null, IconComponent = null, wrapperClassName, iconWrapperClassName, iconClassName }) {
|
||||
return (
|
||||
<Bordered wrapperClassName={wrapperClassName}>
|
||||
<span className={clsx(styles.borderedIconWrapper, iconWrapperClassName)}>
|
||||
{!IconComponent && (
|
||||
<ThemedImage sources={{
|
||||
light: icon.light,
|
||||
dark: icon.dark || icon.light
|
||||
}} className={clsx(styles.icon, iconClassName, 'bordered-icon')} />
|
||||
)}
|
||||
{IconComponent && <IconComponent className={clsx(styles.icon, iconClassName, 'bordered-icon')} />}
|
||||
</span>
|
||||
</Bordered>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
.borderedIconWrapper {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: calc(var(--ifm-global-radius) / 2);
|
||||
padding: var(--bordered-inside-padding);
|
||||
background-color: var(--medusa-bg-component);
|
||||
}
|
||||
@@ -1,4 +1,3 @@
|
||||
|
||||
.feedback-container {
|
||||
padding-top: var(--ifm-base-margin-vertical);
|
||||
padding-bottom: var(--ifm-base-margin-vertical);
|
||||
@@ -18,11 +17,14 @@
|
||||
}
|
||||
|
||||
.inline-feedback span {
|
||||
margin-right: 13px;
|
||||
margin-right: 24px;
|
||||
font-size: var(--medusa-body-regular-size);
|
||||
line-height: var(--medusa-body-regular-line-height);
|
||||
font-weight: var(--medusa-body-regular-font-weight);
|
||||
}
|
||||
|
||||
.inline-question span {
|
||||
margin-bottom: 13px;
|
||||
margin-bottom: calc(var(--ifm-base-margin-vertical) / 2);
|
||||
}
|
||||
|
||||
.feedback-btn {
|
||||
@@ -30,51 +32,63 @@
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
padding: 6px 16px;
|
||||
border-radius: 8px;
|
||||
padding: 6px 12px;
|
||||
border-radius: var(--ifm-global-radius);
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
background-color: var(--ifm-primary-btn-background-color);
|
||||
border: 1px solid var(--ifm-primary-btn-border-color);
|
||||
color: var(--ifm-primary-btn-color);
|
||||
background-color: var(--ifm-secondary-btn-background-color);
|
||||
border: 1px solid var(--ifm-secondary-btn-border-color);
|
||||
color: var(--ifm-secondary-btn-color);
|
||||
font-size: var(--medusa-label-small-plus-size);
|
||||
line-height: var(--medusa-label-small-plus-line-height);
|
||||
font-weight: var(--medusa-label-small-plus-font-weight);
|
||||
}
|
||||
|
||||
.feedback-btn:hover {
|
||||
background-color: var(--ifm-secondary-btn-hover-background-color);
|
||||
}
|
||||
|
||||
.feedback-btn:focus {
|
||||
box-shadow: 0px 0px 0px 4px rgba(124, 58, 237, 0.1);
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .feedback-btn:active,
|
||||
html:not([data-theme="dark"]) .feedback-btn:disabled {
|
||||
background: #E5E7EB;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .feedback-btn,
|
||||
[data-theme="dark"] .inline-question textarea {
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
box-shadow: var(--ifm-secondary-btn-focused-shadow);
|
||||
}
|
||||
|
||||
.feedback-btn:not(:last-child) {
|
||||
margin-right: 13px;
|
||||
margin-right: calc(var(--ifm-base-spacing) / 2);
|
||||
}
|
||||
|
||||
.inline-question .feedback-btn {
|
||||
margin-top: 13px;
|
||||
margin-top: calc(var(--ifm-base-margin-vertical) / 2);
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.inline-question textarea {
|
||||
border-radius: 4px;
|
||||
background-color: transparent;
|
||||
border: 1px solid #E5E7EB;
|
||||
border: 1px solid var(--ifm-base-border-color);
|
||||
padding: 8px;
|
||||
font-family: var(--ifm-font-family-base);
|
||||
}
|
||||
|
||||
.feedback-message,
|
||||
.solutions-wrapper {
|
||||
font-size: var(--medusa-label-large-plus-size);
|
||||
line-height: var(--medusa-label-large-plus-line-height);
|
||||
}
|
||||
|
||||
.feedback-message {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-weight: var(--medusa-label-large-plus-font-weight);
|
||||
}
|
||||
|
||||
.solutions-wrapper {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.solutions-message {
|
||||
display: inline-block;
|
||||
margin: calc(var(--ifm-base-margin-vertical) / 2) 0;
|
||||
}
|
||||
|
||||
.solutions-wrapper li:not(:last-child) {
|
||||
margin-bottom: calc(var(--ifm-base-margin-vertical) / 4);
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
|
||||
@@ -5,6 +5,7 @@ import './index.css';
|
||||
import useIsBrowser from '@docusaurus/useIsBrowser';
|
||||
import {useLocation} from '@docusaurus/router';
|
||||
import uuid from 'react-uuid';
|
||||
import { request } from "@octokit/request";
|
||||
|
||||
export default function Feedback ({
|
||||
event,
|
||||
@@ -14,7 +15,8 @@ export default function Feedback ({
|
||||
positiveQuestion = 'What was most helpful?',
|
||||
negativeQuestion = 'What can we improve?',
|
||||
submitBtn = 'Submit',
|
||||
submitMessage = 'Thank you for helping improve our documentation!'
|
||||
submitMessage = 'Thank you for helping improve our documentation!',
|
||||
showPossibleSolutions = true
|
||||
}) {
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [submittedFeedback, setSubmittedFeedback] = useState(false);
|
||||
@@ -24,7 +26,9 @@ export default function Feedback ({
|
||||
const inlineMessageRef = useRef(null)
|
||||
const [positiveFeedback, setPositiveFeedback] = useState(false);
|
||||
const [message, setMessage] = useState("");
|
||||
const [id, setId] = useState(null)
|
||||
const [id, setId] = useState(null);
|
||||
const [possibleSolutionsQuery, setPossibleSolutionsQuery] = useState('')
|
||||
const [possibleSolutions, setPossibleSolutions] = useState([]);
|
||||
const nodeRef = submittedFeedback ? inlineMessageRef : (showForm ? inlineQuestionRef : inlineFeedbackRef);
|
||||
|
||||
const isBrowser = useIsBrowser();
|
||||
@@ -52,6 +56,7 @@ export default function Feedback ({
|
||||
}, function () {
|
||||
if (showForm) {
|
||||
setLoading(false);
|
||||
checkAvailableSolutions(positiveFeedback, message);
|
||||
resetForm();
|
||||
}
|
||||
})
|
||||
@@ -71,6 +76,34 @@ export default function Feedback ({
|
||||
}
|
||||
}
|
||||
|
||||
function constructQuery (searchQuery) {
|
||||
return `${searchQuery} repo:medusajs/medusa is:closed is:issue`; //Github does not allow queries longer than 256 characters
|
||||
}
|
||||
|
||||
function searchGitHub (query) {
|
||||
return request(`GET /search/issues`, {
|
||||
q: query,
|
||||
sort: 'updated',
|
||||
per_page: 3,
|
||||
})
|
||||
}
|
||||
|
||||
async function checkAvailableSolutions (feedback, message) {
|
||||
if (showPossibleSolutions && !feedback) {
|
||||
//fetch some possible solutions related to the answer.
|
||||
let query = constructQuery(message ? message.substring(0, 256) : document.title)
|
||||
let result = await searchGitHub(query);
|
||||
|
||||
if (!result.data.items.length && message) {
|
||||
query = constructQuery(document.title)
|
||||
result = await searchGitHub(query)
|
||||
}
|
||||
|
||||
setPossibleSolutionsQuery(query);
|
||||
setPossibleSolutions(result.data.items);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) {
|
||||
setId(uuid())
|
||||
@@ -108,8 +141,29 @@ export default function Feedback ({
|
||||
</div>
|
||||
)}
|
||||
{submittedFeedback && (
|
||||
<div className='feedback-message' ref={inlineMessageRef}>
|
||||
{submitMessage}
|
||||
<div className='feedback-message-wrapper'>
|
||||
<div className='feedback-message' ref={inlineMessageRef}>
|
||||
<span>{submitMessage}</span>
|
||||
{possibleSolutions.length > 0 && (
|
||||
<div className='solutions-wrapper'>
|
||||
<span className='solutions-message'>If you faced a problem, here are some possible solutions from GitHub:</span>
|
||||
<ul>
|
||||
{possibleSolutions.map((solution) => (
|
||||
<li key={solution.url}>
|
||||
<a href={solution.html_url} target="_blank">{solution.title}</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<span>Explore more issues in <a
|
||||
href={`https://github.com/medusajs/medusa/issues?q=${possibleSolutionsQuery}`}
|
||||
target="_blank"
|
||||
>
|
||||
the GitHub repository
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
|
||||
@@ -1,50 +0,0 @@
|
||||
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
|
||||
@@ -1 +0,0 @@
|
||||
export { default as Intro } from "./Intro"
|
||||
@@ -1,17 +0,0 @@
|
||||
.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,130 @@
|
||||
.large-card {
|
||||
background-color: var(--large-card-bg);
|
||||
border: 1px solid var(--large-card-border-color);
|
||||
border-radius: var(--ifm-global-radius);
|
||||
padding: calc(var(--ifm-base-margin-vertical) * 3) var(--ifm-base-spacing) calc(var(--ifm-base-margin-vertical) / 2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--ifm-base-margin-vertical);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.large-card:not(.large-card-soon):hover,
|
||||
.large-card:not(.large-card-soon):hover:before {
|
||||
background-color: var(--large-card-bg-hover);
|
||||
}
|
||||
|
||||
.large-card-soon:hover a {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.large-card-soon:hover .large-card-title,
|
||||
.large-card-soon:hover .large-card-content {
|
||||
color: var(--medusa-text-disabled);
|
||||
}
|
||||
|
||||
.large-card:before,
|
||||
.large-card:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-radius: var(--ifm-global-radius);
|
||||
}
|
||||
|
||||
.large-card:before {
|
||||
z-index: 1;
|
||||
height: calc(var(--ifm-base-margin-vertical) * 4);
|
||||
top: 0;
|
||||
background-image: var(--large-card-bg-image);
|
||||
background-color: var(--large-card-bg);
|
||||
}
|
||||
|
||||
.large-card:nth-child(3n+1):before {
|
||||
background-position-x: 2%;
|
||||
background-position-y: 52%;
|
||||
}
|
||||
|
||||
.large-card:nth-child(3n + 2):before {
|
||||
background-position-x: 19%;
|
||||
background-position-y: 16%;
|
||||
}
|
||||
|
||||
.large-card:nth-child(3n + 3):before {
|
||||
background-position-x: 17%;
|
||||
background-position-y: 50%;
|
||||
}
|
||||
|
||||
.large-card:after {
|
||||
z-index: 2;
|
||||
left: 0;
|
||||
top: calc(var(--ifm-base-margin-vertical) * 2);
|
||||
height: calc(var(--ifm-base-margin-vertical) * 2);
|
||||
background: var(--large-card-fade-effect);
|
||||
}
|
||||
|
||||
.large-card:not(.large-card-soon):hover:after {
|
||||
background: var(--large-card-fade-effect-hover);
|
||||
}
|
||||
|
||||
.large-card > * {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.large-card-bordered-icon-wrapper {
|
||||
--bordered-padding: var(--large-card-icon-wrapper-padding);
|
||||
|
||||
margin-bottom: calc(var(--ifm-base-margin-vertical) / 2);
|
||||
}
|
||||
|
||||
.large-card-icon-wrapper {
|
||||
--bordered-inside-padding: var(--large-card-icon-inside-padding);
|
||||
}
|
||||
|
||||
.large-card-icon {
|
||||
width: var(--large-card-icon-size);
|
||||
height: var(--large-card-icon-size);
|
||||
}
|
||||
|
||||
.large-card-heading {
|
||||
margin-bottom: calc(var(--ifm-base-margin-vertical) / 4);
|
||||
}
|
||||
|
||||
.large-card-title {
|
||||
color: var(--ifm-color-primary);
|
||||
font-size: var(--medusa-label-regular-plus-size);
|
||||
line-height: var(--medusa-label-regular-plus-line-height);
|
||||
font-weight: var(--medusa-label-regular-plus-font-weight);
|
||||
}
|
||||
|
||||
.large-card-content {
|
||||
font-size: var(--medusa-body-regular-size);
|
||||
line-height: var(--medusa-body-regular-line-height);
|
||||
font-weight: var(--medusa-body-regular-font-weight);
|
||||
}
|
||||
|
||||
.large-card-title,
|
||||
.large-card-content {
|
||||
transition: all var(--ifm-transition-fast) ease;
|
||||
}
|
||||
|
||||
.large-card-content ul {
|
||||
padding-left: var(--ifm-base-spacing);
|
||||
}
|
||||
|
||||
.large-card-link {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 4;
|
||||
border-radius: var(--ifm-global-radius);
|
||||
}
|
||||
|
||||
.large-card-badge {
|
||||
position: absolute;
|
||||
top: calc(var(--ifm-base-margin-vertical) / 2);
|
||||
right: var(--ifm-base-spacing);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import React from "react"
|
||||
import './index.css'
|
||||
import BorderedIcon from "../BorderedIcon"
|
||||
import clsx from 'clsx';
|
||||
import Badge from "../Badge";
|
||||
|
||||
export default function LargeCard ({
|
||||
Icon,
|
||||
image,
|
||||
title,
|
||||
action: {
|
||||
href
|
||||
},
|
||||
isSoon = false,
|
||||
children
|
||||
}) {
|
||||
return (
|
||||
<article className={clsx(
|
||||
'large-card',
|
||||
isSoon && 'large-card-soon'
|
||||
)}>
|
||||
<div>
|
||||
{isSoon && <Badge variant={'purple'} className={'large-card-badge'}>Guide coming soon</Badge>}
|
||||
{(Icon || image) && (
|
||||
<BorderedIcon
|
||||
IconComponent={Icon}
|
||||
icon={image}
|
||||
iconClassName='large-card-icon'
|
||||
wrapperClassName='large-card-bordered-icon-wrapper'
|
||||
iconWrapperClassName='large-card-icon-wrapper'
|
||||
/>
|
||||
)}
|
||||
<div className="large-card-heading">
|
||||
<span className="large-card-title">{title}</span>
|
||||
</div>
|
||||
<div className="large-card-content">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
<a href={href} className="large-card-link"></a>
|
||||
</article>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import React from "react"
|
||||
import clsx from 'clsx'
|
||||
|
||||
export default function LargeCardList ({ colSize, className, children }) {
|
||||
return (
|
||||
<section className={clsx('cards-grid', `grid-${colSize || '4'}`, className)}>
|
||||
{children}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import React from "react";
|
||||
import { useQueryStringValue } from "@docusaurus/theme-common/internal"
|
||||
import Admonition from "@theme/Admonition"
|
||||
|
||||
export default function QueryNote ({
|
||||
query: {
|
||||
key,
|
||||
value = ''
|
||||
},
|
||||
//admonition props
|
||||
admonition,
|
||||
children
|
||||
}) {
|
||||
const queryValue = useQueryStringValue(key)
|
||||
|
||||
return (
|
||||
<>
|
||||
{queryValue === value && (
|
||||
<Admonition {...admonition}>
|
||||
{children}
|
||||
</Admonition>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user