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:

import theme from 'mdx-deck-theme-garlic'

export const themes = [
  theme,
]

# My first slide

Available Shortcodes

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

To use Logo and Author

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

Layout Components

Contour

Props

Contour.defaultProps = {
  invert: false,
  contentWidth: 70, // out of 100
}

Example

<Contour>

# Title

some text

</Contour>

Contour Invert

Contour.props = {
  invert: true,
  contentWidth: 70, // default
}

<Contour invert>

# Title

some text

</Contour>

Contour with Custom Width

Contour.props = {
  invert: false, // default
  contentWidth: 90,
}

<Contour contentWidth={90}>

# Title

some text

</Contour>

Content Components

CodeSandbox

Example

<CodeSandbox
  url="https://codesandbox.io/embed/new?codemirror=1"
/>

Props

CodeSandbox.defaultProps = {
  url: 'https://codesandbox.io/embed/new?codemirror=1',
}

Frame

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