garlic theme for mdx-deck
npm install mdx-deck-theme-garlic
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:
``md
import theme from 'mdx-deck-theme-garlic'
export const themes = [
theme,
]
$3
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.
- Contour: layout component
- CodeSandbox
- Frame
$3
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:`jsx
// theme.js
import React from 'react'
import theme, { Provider, GithubIcon } from 'mdx-deck-theme-garlic'const config = {
logo: () => ,
logoUrl: 'https://github.com/josefaidt/mdx-deck-theme-garlic',
author: '@josefaidt',
authorUrl: 'https://josefaidt.dev/',
}
const wrapper = props =>
export default {
...theme,
Provider: wrapper,
}
`Import into your
deck.mdx file:`md
export { default as theme } from './theme'My first slide
`Layout Components
$3
Props
`js
Contour.defaultProps = {
invert: false,
contentWidth: 70, // out of 100
}
`Example
`markdown
Title
some text
`$3
Props
`js
Contour.props = {
invert: true,
contentWidth: 70, // default
}
`
Example
`markdown
Title
some text
`$3
Props
`js
Contour.props = {
invert: false, // default
contentWidth: 90,
}
`
Example
`markdown
Title
some text
`Content Components
$3
Example
`markdown
url="https://codesandbox.io/embed/new?codemirror=1"
/>
`Props
`js
CodeSandbox.defaultProps = {
url: 'https://codesandbox.io/embed/new?codemirror=1',
}
`$3
Example
`markdown
url="https://yarnpkg.com/en/package/mdx-deck-theme-garlic"
loadingText="Loading..."
/>
`Props
`js
Frame.defaultProps = {
url: 'https://yarnpkg.com/en/package/mdx-deck-theme-garlic',
loadingText: 'Loading...',
}
``