Garlic Theme for mdx-deck


Visit the live demo. SVG Designs made possible thanks to Hero Patterns by Steve Schoger.

Getting Started

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,
]

My first slide


`

$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...',
}
``