Visit the live demo. SVG Designs made possible thanks to Hero Patterns by Steve Schoger.
At the top of your deck.mdx
file, import the theme and add to the themes
array:
import theme from 'mdx-deck-theme-garlic'
export const themes = [
theme,
]
# My first slide
All custom components from this theme are exported as named below as well as provided via MDX shortcodes, meaning you can use these components without importing them.
In your new mdx-deck project, create a theme.js
file, create a config object with your values (values not provided will not be rendered, therefore you can optionally use either logo, author, or both) as shown below:
// theme.js
import React from 'react'
import theme, { Provider, GithubIcon } from 'mdx-deck-theme-garlic'
const config = {
logo: () => <GithubIcon />,
logoUrl: 'https://github.com/josefaidt/mdx-deck-theme-garlic',
author: '@josefaidt',
authorUrl: 'https://josefaidt.dev/',
}
const wrapper = props => <Provider {...props} {...config} />
export default {
...theme,
Provider: wrapper,
}
Import into your deck.mdx
file:
export { default as theme } from './theme'
# My first slide
Props
Contour.defaultProps = {
invert: false,
contentWidth: 70, // out of 100
}
Example
<Contour>
# Title
some text
</Contour>
Contour.props = {
invert: true,
contentWidth: 70, // default
}
<Contour invert>
# Title
some text
</Contour>
Contour.props = {
invert: false, // default
contentWidth: 90,
}
<Contour contentWidth={90}>
# Title
some text
</Contour>
Example
<CodeSandbox
url="https://codesandbox.io/embed/new?codemirror=1"
/>
Props
CodeSandbox.defaultProps = {
url: 'https://codesandbox.io/embed/new?codemirror=1',
}
Example
<Frame
url="https://yarnpkg.com/en/package/mdx-deck-theme-garlic"
loadingText="Loading..."
/>
Props
Frame.defaultProps = {
url: 'https://yarnpkg.com/en/package/mdx-deck-theme-garlic',
loadingText: 'Loading...',
}