diff --git a/packages/docusaurus-playground/src/theme/Admonition/index.js b/packages/docusaurus-playground/src/theme/Admonition/index.js
new file mode 100644
index 0000000..cc4218e
--- /dev/null
+++ b/packages/docusaurus-playground/src/theme/Admonition/index.js
@@ -0,0 +1,188 @@
+import React from 'react'
+import clsx from 'clsx'
+import { ThemeClassNames } from '@docusaurus/theme-common'
+import Translate from '@docusaurus/Translate'
+import styles from './styles.module.css'
+function NoteIcon() {
+ return (
+
+ )
+}
+function TipIcon() {
+ return (
+
+ )
+}
+function DangerIcon() {
+ return (
+
+ )
+}
+function InfoIcon() {
+ return (
+
+ )
+}
+function CautionIcon() {
+ return (
+
+ )
+}
+// eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
+const AdmonitionConfigs = {
+ note: {
+ infimaClassName: 'secondary',
+ iconComponent: NoteIcon,
+ label: (
+
+ note
+
+ ),
+ },
+ tip: {
+ infimaClassName: 'success',
+ iconComponent: TipIcon,
+ label: (
+
+ tip
+
+ ),
+ },
+ danger: {
+ infimaClassName: 'danger',
+ iconComponent: DangerIcon,
+ label: (
+
+ danger
+
+ ),
+ },
+ info: {
+ infimaClassName: 'info',
+ iconComponent: InfoIcon,
+ label: (
+
+ info
+
+ ),
+ },
+ caution: {
+ infimaClassName: 'warning',
+ iconComponent: CautionIcon,
+ label: (
+
+ caution
+
+ ),
+ },
+}
+// Legacy aliases, undocumented but kept for retro-compatibility
+const aliases = {
+ secondary: 'note',
+ important: 'info',
+ success: 'tip',
+ warning: 'danger',
+}
+function getAdmonitionConfig(unsafeType) {
+ const type = aliases[unsafeType] ?? unsafeType
+ const config = AdmonitionConfigs[type]
+ if (config) {
+ return config
+ }
+ console.warn(
+ `No admonition config found for admonition type "${type}". Using Info as fallback.`,
+ )
+ return AdmonitionConfigs.info
+}
+// Workaround because it's difficult in MDX v1 to provide a MDX title as props
+// See https://github.com/facebook/docusaurus/pull/7152#issuecomment-1145779682
+function extractMDXAdmonitionTitle(children) {
+ const items = React.Children.toArray(children)
+ const mdxAdmonitionTitle = items.find(
+ (item) =>
+ React.isValidElement(item) &&
+ item.props?.mdxType === 'mdxAdmonitionTitle',
+ )
+ const rest = <>{items.filter((item) => item !== mdxAdmonitionTitle)}
+ return {
+ mdxAdmonitionTitle,
+ rest,
+ }
+}
+function processAdmonitionProps(props) {
+ const { mdxAdmonitionTitle, rest } = extractMDXAdmonitionTitle(props.children)
+ return {
+ ...props,
+ title: props.title ?? mdxAdmonitionTitle,
+ children: rest,
+ }
+}
+export default function Admonition(props) {
+ const {
+ children,
+ type,
+ title,
+ icon: iconProp,
+ } = processAdmonitionProps(props)
+ const typeConfig = getAdmonitionConfig(type)
+ const titleLabel = title ?? typeConfig.label
+ const { iconComponent: IconComponent } = typeConfig
+ const icon = iconProp ??
+ return (
+
+
+ {icon}
+ {titleLabel}
+
+
{children}
+
tags in markdown map to CodeBlocks. They may contain JSX children. When
+// the children is not a simple string, we just return a styled block without
+// actually highlighting.
+export default function CodeBlockJSX({ children, className }) {
+ return (
+
+ {children}
+
+ )
+}
diff --git a/packages/docusaurus-playground/src/theme/CodeBlock/Content/String.js b/packages/docusaurus-playground/src/theme/CodeBlock/Content/String.js
new file mode 100644
index 0000000..420a492
--- /dev/null
+++ b/packages/docusaurus-playground/src/theme/CodeBlock/Content/String.js
@@ -0,0 +1,100 @@
+import React from 'react'
+import clsx from 'clsx'
+import { useThemeConfig, usePrismTheme } from '@docusaurus/theme-common'
+import {
+ parseCodeBlockTitle,
+ parseLanguage,
+ parseLines,
+ containsLineNumbers,
+ useCodeWordWrap,
+} from '@docusaurus/theme-common/internal'
+import Highlight, { defaultProps } from 'prism-react-renderer'
+import Line from '@theme/CodeBlock/Line'
+import CopyButton from '@theme/CodeBlock/CopyButton'
+import WordWrapButton from '@theme/CodeBlock/WordWrapButton'
+import Container from '@theme/CodeBlock/Container'
+import styles from './styles.module.css'
+export default function CodeBlockString({
+ children,
+ className: blockClassName = '',
+ metastring,
+ title: titleProp,
+ showLineNumbers: showLineNumbersProp,
+ language: languageProp,
+}) {
+ const {
+ prism: { defaultLanguage, magicComments },
+ } = useThemeConfig()
+ const language =
+ languageProp ?? parseLanguage(blockClassName) ?? defaultLanguage
+ const prismTheme = usePrismTheme()
+ const wordWrap = useCodeWordWrap()
+ // We still parse the metastring in case we want to support more syntax in the
+ // future. Note that MDX doesn't strip quotes when parsing metastring:
+ // "title=\"xyz\"" => title: "\"xyz\""
+ const title = parseCodeBlockTitle(metastring) || titleProp
+ const { lineClassNames, code } = parseLines(children, {
+ metastring,
+ language,
+ magicComments,
+ })
+ const showLineNumbers = showLineNumbersProp ?? containsLineNumbers(metastring)
+ return (
+
+ {title && {title}
}
+
+
+ {({ className, tokens, getLineProps, getTokenProps }) => (
+
+
+ {tokens.map((line, i) => (
+
+ ))}
+
+
+ )}
+
+
+ {(wordWrap.isEnabled || wordWrap.isCodeScrollable) && (
+ wordWrap.toggle()}
+ isEnabled={wordWrap.isEnabled}
+ />
+ )}
+
+
+
+
+ )
+}
diff --git a/packages/docusaurus-playground/src/theme/CodeBlock/Line/styles.module.css b/packages/docusaurus-playground/src/theme/CodeBlock/Line/styles.module.css
new file mode 100644
index 0000000..7c28ed9
--- /dev/null
+++ b/packages/docusaurus-playground/src/theme/CodeBlock/Line/styles.module.css
@@ -0,0 +1,45 @@
+/* Intentionally has zero specificity, so that to be able to override
+the background in custom CSS file due bug https://github.com/facebook/docusaurus/issues/3678 */
+:where(:root) {
+ --docusaurus-highlighted-code-line-bg: rgb(72 77 91);
+}
+
+:where([data-theme='dark']) {
+ --docusaurus-highlighted-code-line-bg: rgb(100 100 100);
+}
+
+:global(.theme-code-block-highlighted-line) {
+ background-color: var(--docusaurus-highlighted-code-line-bg);
+ display: block;
+ margin: 0 calc(-1 * var(--ifm-pre-padding));
+ padding: 0 var(--ifm-pre-padding);
+}
+
+.codeLine {
+ display: table-row;
+ counter-increment: line-count;
+}
+
+.codeLineNumber {
+ display: table-cell;
+ text-align: right;
+ width: 1%;
+ position: sticky;
+ left: 0;
+ padding: 0 var(--ifm-pre-padding);
+ background: var(--ifm-pre-background);
+ overflow-wrap: normal;
+}
+
+.codeLineNumber::before {
+ content: counter(line-count);
+ opacity: 0.4;
+}
+
+:global(.theme-code-block-highlighted-line) .codeLineNumber::before {
+ opacity: 0.8;
+}
+
+.codeLineContent {
+ padding-right: var(--ifm-pre-padding);
+}
diff --git a/packages/docusaurus-playground/src/theme/CodeBlock/WordWrapButton/index.js b/packages/docusaurus-playground/src/theme/CodeBlock/WordWrapButton/index.js
new file mode 100644
index 0000000..bdd76ad
--- /dev/null
+++ b/packages/docusaurus-playground/src/theme/CodeBlock/WordWrapButton/index.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import clsx from 'clsx'
+import { translate } from '@docusaurus/Translate'
+import IconWordWrap from '@theme/Icon/WordWrap'
+import styles from './styles.module.css'
+export default function WordWrapButton({ className, onClick, isEnabled }) {
+ const title = translate({
+ id: 'theme.CodeBlock.wordWrapToggle',
+ message: 'Toggle word wrap',
+ description:
+ 'The title attribute for toggle word wrapping button of code block lines',
+ })
+ return (
+
+ )
+}
diff --git a/packages/docusaurus-playground/src/theme/CodeBlock/WordWrapButton/styles.module.css b/packages/docusaurus-playground/src/theme/CodeBlock/WordWrapButton/styles.module.css
new file mode 100644
index 0000000..fdbc894
--- /dev/null
+++ b/packages/docusaurus-playground/src/theme/CodeBlock/WordWrapButton/styles.module.css
@@ -0,0 +1,8 @@
+.wordWrapButtonIcon {
+ width: 1.2rem;
+ height: 1.2rem;
+}
+
+.wordWrapButtonEnabled .wordWrapButtonIcon {
+ color: var(--ifm-color-primary);
+}
diff --git a/packages/docusaurus-playground/src/theme/CodeBlock/index.js b/packages/docusaurus-playground/src/theme/CodeBlock/index.js
new file mode 100644
index 0000000..e31fcbb
--- /dev/null
+++ b/packages/docusaurus-playground/src/theme/CodeBlock/index.js
@@ -0,0 +1,32 @@
+import React, { isValidElement } from 'react'
+import useIsBrowser from '@docusaurus/useIsBrowser'
+import ElementContent from '@theme/CodeBlock/Content/Element'
+import StringContent from '@theme/CodeBlock/Content/String'
+/**
+ * Best attempt to make the children a plain string so it is copyable. If there
+ * are react elements, we will not be able to copy the content, and it will
+ * return `children` as-is; otherwise, it concatenates the string children
+ * together.
+ */
+function maybeStringifyChildren(children) {
+ if (React.Children.toArray(children).some((el) => isValidElement(el))) {
+ return children
+ }
+ // The children is now guaranteed to be one/more plain strings
+ return Array.isArray(children) ? children.join('') : children
+}
+export default function CodeBlock({ children: rawChildren, ...props }) {
+ // The Prism theme on SSR is always the default theme but the site theme can
+ // be in a different mode. React hydration doesn't update DOM styles that come
+ // from SSR. Hence force a re-render after mounting to apply the current
+ // relevant styles.
+ const isBrowser = useIsBrowser()
+ const children = maybeStringifyChildren(rawChildren)
+ const CodeBlockComp =
+ typeof children === 'string' ? StringContent : ElementContent
+ return (
+
+ {children}
+
+ )
+}
diff --git a/packages/docusaurus-playground/src/theme/Footer/Layout/index.js b/packages/docusaurus-playground/src/theme/Footer/Layout/index.js
new file mode 100644
index 0000000..797b405
--- /dev/null
+++ b/packages/docusaurus-playground/src/theme/Footer/Layout/index.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import clsx from 'clsx'
+export default function FooterLayout({ style, links, logo, copyright }) {
+ return (
+
+ )
+}
diff --git a/packages/docusaurus-playground/src/theme/Footer/LinkItem/index.js b/packages/docusaurus-playground/src/theme/Footer/LinkItem/index.js
new file mode 100644
index 0000000..89e1001
--- /dev/null
+++ b/packages/docusaurus-playground/src/theme/Footer/LinkItem/index.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import Link from '@docusaurus/Link'
+import useBaseUrl from '@docusaurus/useBaseUrl'
+import isInternalUrl from '@docusaurus/isInternalUrl'
+import IconExternalLink from '@theme/Icon/ExternalLink'
+export default function FooterLinkItem({ item }) {
+ const { to, href, label, prependBaseUrlToHref, ...props } = item
+ const toUrl = useBaseUrl(to)
+ const normalizedHref = useBaseUrl(href, { forcePrependBaseUrl: true })
+ return (
+
+ {label}
+ {href && !isInternalUrl(href) && }
+
+ )
+}
diff --git a/packages/docusaurus-playground/src/theme/Footer/Links/MultiColumn/index.js b/packages/docusaurus-playground/src/theme/Footer/Links/MultiColumn/index.js
new file mode 100644
index 0000000..bf8b308
--- /dev/null
+++ b/packages/docusaurus-playground/src/theme/Footer/Links/MultiColumn/index.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import LinkItem from '@theme/Footer/LinkItem'
+function ColumnLinkItem({ item }) {
+ return item.html ? (
+
+ ) : (
+
+
+
+ )
+}
+function Column({ column }) {
+ return (
+
+
{column.title}
+
+ {column.items.map((item, i) => (
+
+ ))}
+
+
+ {columns.map((column, i) => (
+
+ ))}
+
+ )
+}
diff --git a/packages/docusaurus-playground/src/theme/Footer/Links/index.js b/packages/docusaurus-playground/src/theme/Footer/Links/index.js
new file mode 100644
index 0000000..3680596
--- /dev/null
+++ b/packages/docusaurus-playground/src/theme/Footer/Links/index.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import { isMultiColumnFooterLinks } from '@docusaurus/theme-common'
+import FooterLinksMultiColumn from '@theme/Footer/Links/MultiColumn'
+import FooterLinksSimple from '@theme/Footer/Links/Simple'
+export default function FooterLinks({ links }) {
+ return isMultiColumnFooterLinks(links) ? (
+
+ ) : (
+
+ )
+}
diff --git a/packages/docusaurus-playground/src/theme/Footer/Logo/index.js b/packages/docusaurus-playground/src/theme/Footer/Logo/index.js
new file mode 100644
index 0000000..9228cb0
--- /dev/null
+++ b/packages/docusaurus-playground/src/theme/Footer/Logo/index.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import clsx from 'clsx'
+import Link from '@docusaurus/Link'
+import { useBaseUrlUtils } from '@docusaurus/useBaseUrl'
+import ThemedImage from '@theme/ThemedImage'
+import styles from './styles.module.css'
+function LogoImage({ logo }) {
+ const { withBaseUrl } = useBaseUrlUtils()
+ const sources = {
+ light: withBaseUrl(logo.src),
+ dark: withBaseUrl(logo.srcDark ?? logo.src),
+ }
+ return (
+
+ )
+}
+export default function FooterLogo({ logo }) {
+ return logo.href ? (
+
+
+
+ ) : (
+
+ )
+}
diff --git a/packages/docusaurus-playground/src/theme/Footer/Logo/styles.module.css b/packages/docusaurus-playground/src/theme/Footer/Logo/styles.module.css
new file mode 100644
index 0000000..faf0e60
--- /dev/null
+++ b/packages/docusaurus-playground/src/theme/Footer/Logo/styles.module.css
@@ -0,0 +1,9 @@
+.footerLogoLink {
+ opacity: 0.5;
+ transition: opacity var(--ifm-transition-fast)
+ var(--ifm-transition-timing-default);
+}
+
+.footerLogoLink:hover {
+ opacity: 1;
+}
diff --git a/packages/docusaurus-playground/src/theme/Footer/index.js b/packages/docusaurus-playground/src/theme/Footer/index.js
new file mode 100644
index 0000000..4586803
--- /dev/null
+++ b/packages/docusaurus-playground/src/theme/Footer/index.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import { useThemeConfig } from '@docusaurus/theme-common'
+import FooterLinks from '@theme/Footer/Links'
+import FooterLogo from '@theme/Footer/Logo'
+import FooterCopyright from '@theme/Footer/Copyright'
+import FooterLayout from '@theme/Footer/Layout'
+function Footer() {
+ const { footer } = useThemeConfig()
+ if (!footer) {
+ return null
+ }
+ const { copyright, links, logo, style } = footer
+ return (
+ 0 && }
+ logo={logo && }
+ copyright={copyright && }
+ />
+ )
+}
+export default React.memo(Footer)