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

docs: add routing page (#9550)

Browse Source 
- Add a new homepage to `book` project for the routing page
- Move all main doc pages to be under `/v2/learn` (and added redirects + fixed links across docs)
- Other: add admin components to resources dropdown + fixes to search on mobile.

Closes DX-955

Preview: https://docs-v2-git-docs-router-page-medusajs.vercel.app/v2
This commit is contained in:
Shahed Nasser
2024-10-18 11:24:34 +03:00
committed by GitHub
parent 7a47f5211d
commit 0a37675f0e
223 changed files with 2549 additions and 696 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
www/packages/docs-ui/src/components/CodeBlock/Line/index.tsx
View File

@@ -24,6 +24,7 @@ type CodeBlockLineProps = {
lineNumberColorClassName: string
lineNumberBgClassName: string
isTerminal: boolean
animateTokenHighlights?: boolean
} & Pick<RenderProps, "getLineProps" | "getTokenProps">
export const CodeBlockLine = ({
@@ -36,6 +37,7 @@ export const CodeBlockLine = ({
lineNumberColorClassName,
lineNumberBgClassName,
isTerminal,
animateTokenHighlights = false,
}: CodeBlockLineProps) => {
const lineProps = getLineProps({ line, key: lineNumber })
@@ -94,6 +96,16 @@ export const CodeBlockLine = ({
if (currentPositionInHighlightedText === highlight.text!.length) {
// matching text was found, break loop
endIndex = tokenIndex
const trimmedContent = token.content.trimEnd()
const endingSpacesLength =
token.content.length - trimmedContent.length
if (endingSpacesLength) {
line.splice(tokenIndex + 1, 0, {
content: new Array(endingSpacesLength).fill(" ").join(""),
types: ["plain"],
})
token.content = trimmedContent
}
return true
}
})
@@ -197,19 +209,26 @@ export const CodeBlockLine = ({
const getTokensElm = ({
tokens,
isTokenHighlighted,
isLineHighlighted,
offset,
}: {
tokens: Token[]
isTokenHighlighted: boolean
isLineHighlighted: boolean
offset: number
}) => (
<span
className={clsx(
isTokenHighlighted && "lg:bg-medusa-contrast-border-base cursor-default"
<span className={clsx(isTokenHighlighted && "relative")}>
{isTokenHighlighted && (
<span
className={clsx(
animateTokenHighlights && [
"animate-fast animate-growWidth animation-fill-forwards",
],
!animateTokenHighlights && "w-full",
"absolute left-0 top-0 h-full z-0",
"lg:bg-medusa-alpha-white-alpha-6 lg:border lg:border-medusa-alpha-white-alpha-12",
"lg:rounded-docs_xs scale-x-[1.05]"
)}
/>
)}
>
{tokens.map((token, key) => {
const tokenKey = offset + key
const { className: tokenClassName, ...rest } = getTokenProps({
@@ -221,8 +240,7 @@ export const CodeBlockLine = ({
key={tokenKey}
className={clsx(
tokenClassName,
(isTokenHighlighted || isLineHighlighted) &&
"!text-medusa-contrast-fg-primary"
isTokenHighlighted && "relative z-[1]"
)}
{...rest}
/>
@@ -242,7 +260,7 @@ export const CodeBlockLine = ({
{...lineProps}
className={clsx(
"table-row",
isHighlightedLine && "bg-medusa-contrast-border-base",
isHighlightedLine && "bg-medusa-alpha-white-alpha-6",
lineProps.className
)}
>
@@ -287,7 +305,6 @@ export const CodeBlockLine = ({
tokens,
isTokenHighlighted: isHighlighted,
offset,
isLineHighlighted: isHighlightedLine,
})}
</Tooltip>
)}
@@ -296,7 +313,6 @@ export const CodeBlockLine = ({
tokens,
isTokenHighlighted: isHighlighted,
offset,
isLineHighlighted: isHighlightedLine,
})}
</React.Fragment>
)

133
www/packages/docs-ui/src/components/CodeBlock/index.tsx
View File

@@ -47,11 +47,23 @@ export type CodeBlockStyle = "loud" | "subtle" | "inline"
export type CodeBlockProps = {
source: string
lang?: string
wrapperClassName?: string
innerClassName?: string
className?: string
collapsed?: boolean
blockStyle?: CodeBlockStyle
children?: React.ReactNode
style?: React.HTMLAttributes<HTMLDivElement>["style"]
forceNoTitle?: boolean
animateTokenHighlights?: boolean
overrideColors?: {
bg?: string
innerBg?: string
lineNumbersBg?: string
border?: string
innerBorder?: string
boxShadow?: string
}
} & CodeBlockMetaFields &
Omit<HighlightProps, "code" | "language" | "children">
@@ -59,7 +71,10 @@ export const CodeBlock = ({
source,
hasTabs = false,
lang = "",
wrapperClassName,
innerClassName,
className,
overrideColors = {},
collapsed = false,
title = "",
highlights = [],
@@ -73,6 +88,8 @@ export const CodeBlock = ({
expandButtonLabel,
isTerminal,
style,
forceNoTitle = false,
animateTokenHighlights,
...rest
}: CodeBlockProps) => {
if (!source && typeof children === "string") {
@@ -94,6 +111,10 @@ export const CodeBlock = ({
: isTerminal
}, [isTerminal, lang])
const codeTitle = useMemo(() => {
if (forceNoTitle) {
return ""
}
if (title) {
return title
}
@@ -107,7 +128,7 @@ export const CodeBlock = ({
}
return "Code"
}, [title, isTerminalCode, hasTabs])
}, [title, isTerminalCode, hasTabs, forceNoTitle])
const hasInnerCodeBlock = useMemo(
() => hasTabs || codeTitle.length > 0,
[hasTabs, codeTitle]
@@ -123,72 +144,90 @@ export const CodeBlock = ({
const bgColor = useMemo(
() =>
clsx(
blockStyle === "loud" && "bg-medusa-contrast-bg-base",
blockStyle === "subtle" && [
colorMode === "light" && "bg-medusa-bg-subtle",
colorMode === "dark" && "bg-medusa-code-bg-base",
overrideColors.bg,
!overrideColors.bg && [
blockStyle === "loud" && "bg-medusa-contrast-bg-base",
blockStyle === "subtle" && [
colorMode === "light" && "bg-medusa-bg-subtle",
colorMode === "dark" && "bg-medusa-code-bg-base",
],
]
),
[blockStyle, colorMode]
[blockStyle, colorMode, overrideColors]
)
const lineNumbersColor = useMemo(
() =>
clsx(
blockStyle === "loud" && "text-medusa-contrast-fg-secondary",
blockStyle === "subtle" && [
colorMode === "light" && "text-medusa-fg-muted",
colorMode === "dark" && "text-medusa-contrast-fg-secondary",
overrideColors.lineNumbersBg,
!overrideColors.lineNumbersBg && [
blockStyle === "loud" && "text-medusa-contrast-fg-secondary",
blockStyle === "subtle" && [
colorMode === "light" && "text-medusa-fg-muted",
colorMode === "dark" && "text-medusa-contrast-fg-secondary",
],
]
),
[blockStyle, colorMode]
[blockStyle, colorMode, overrideColors]
)
const borderColor = useMemo(
() =>
clsx(
blockStyle === "loud" && "border-0",
blockStyle === "subtle" && [
colorMode === "light" && "border-medusa-border-base",
colorMode === "dark" && "border-medusa-code-border",
overrideColors.border,
!overrideColors.border && [
blockStyle === "loud" && "border-0",
blockStyle === "subtle" && [
colorMode === "light" && "border-medusa-border-base",
colorMode === "dark" && "border-medusa-code-border",
],
]
),
[blockStyle, colorMode]
[blockStyle, colorMode, overrideColors]
)
const boxShadow = useMemo(
() =>
clsx(
blockStyle === "loud" &&
"shadow-elevation-code-block dark:shadow-elevation-code-block-dark",
blockStyle === "subtle" && "shadow-none"
overrideColors.boxShadow,
!overrideColors.boxShadow && [
blockStyle === "loud" &&
"shadow-elevation-code-block dark:shadow-elevation-code-block-dark",
blockStyle === "subtle" && "shadow-none",
]
),
[blockStyle]
[blockStyle, overrideColors]
)
const innerBgColor = useMemo(
() =>
clsx(
blockStyle === "loud" && [
hasInnerCodeBlock && "bg-medusa-contrast-bg-subtle",
!hasInnerCodeBlock && "bg-medusa-contrast-bg-base",
],
blockStyle === "subtle" && bgColor
overrideColors.innerBg,
!overrideColors.innerBg && [
blockStyle === "loud" && [
hasInnerCodeBlock && "bg-medusa-contrast-bg-subtle",
!hasInnerCodeBlock && "bg-medusa-contrast-bg-base",
],
blockStyle === "subtle" && bgColor,
]
),
[blockStyle, bgColor, hasInnerCodeBlock]
[blockStyle, bgColor, hasInnerCodeBlock, overrideColors]
)
const innerBorderClasses = useMemo(
() =>
clsx(
blockStyle === "loud" && [
hasInnerCodeBlock &&
"border border-solid border-medusa-contrast-border-bot rounded-docs_DEFAULT",
!hasInnerCodeBlock && "border-transparent rounded-docs_DEFAULT",
],
blockStyle === "subtle" && "border-transparent rounded-docs_DEFAULT"
overrideColors.innerBorder,
!overrideColors.innerBorder && [
blockStyle === "loud" && [
hasInnerCodeBlock &&
"border border-solid border-medusa-contrast-border-bot rounded-docs_DEFAULT",
!hasInnerCodeBlock && "border-transparent rounded-docs_DEFAULT",
],
blockStyle === "subtle" && "border-transparent rounded-docs_DEFAULT",
]
),
[blockStyle, hasInnerCodeBlock]
[blockStyle, hasInnerCodeBlock, overrideColors]
)
const language = useMemo(() => {
@@ -227,6 +266,7 @@ export const CodeBlock = ({
lineNumberColorClassName={lineNumbersColor}
lineNumberBgClassName={innerBgColor}
isTerminal={isTerminalCode}
animateTokenHighlights={animateTokenHighlights}
{...highlightProps}
/>
)
@@ -309,7 +349,8 @@ export const CodeBlock = ({
blockStyle === "loud" && "code-block-highlight",
blockStyle === "subtle" &&
colorMode === "light" &&
"code-block-highlight-light"
"code-block-highlight-light",
wrapperClassName
)}
>
{codeTitle && (
@@ -327,7 +368,7 @@ export const CodeBlock = ({
<div
className={clsx(
"relative mb-docs_1",
"w-full max-w-full border",
"w-full max-w-full border code-block-elm",
bgColor,
borderColor,
collapsed && "max-h-[400px] overflow-auto",
@@ -350,7 +391,12 @@ export const CodeBlock = ({
...rest
}) => (
<div
className={clsx(innerBorderClasses, innerBgColor, "relative")}
className={clsx(
innerBorderClasses,
innerBgColor,
"relative",
innerClassName
)}
ref={codeContainerRef}
>
{collapsibleType === "start" && (
@@ -406,13 +452,14 @@ export const CodeBlock = ({
})}
</code>
</pre>
{!hasInnerCodeBlock && (
<CodeBlockActions
{...actionsProps}
inHeader={false}
isSingleLine={tokens.length <= 1}
/>
)}
{!hasInnerCodeBlock &&
(!noCopy || !noReport || canShowApiTesting) && (
<CodeBlockActions
{...actionsProps}
inHeader={false}
isSingleLine={tokens.length <= 1}
/>
)}
{collapsibleType === "end" && (
<>
<CodeBlockCollapsibleFade