mdx-deck
Garlic Theme forVisit 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.jsimport React from 'react'import theme Provider GithubIcon from 'mdx-deck-theme-garlic' const config = <GithubIcon /> logoUrl: 'https://github.com/josefaidt/mdx-deck-theme-garlic' author: '@josefaidt' authorUrl: 'https://josefaidt.dev/' const wrapper = <Provider /> ...theme Provider: wrapper
Import into your deck.mdx
file:
export { default as theme } from './theme' # My first slide
Layout Components
Contour
Props
ContourdefaultProps = invert: false contentWidth: 70 // out of 100
Example
<Contour> # Title some text </Contour>
Contour Invert
Props
Contourprops = invert: true contentWidth: 70 // default
Example
<Contour invert> # Title some text </Contour>
Contour with Custom Width
Props
Contourprops = invert: false // default contentWidth: 90
Example
<Contour contentWidth={90}> # Title some text </Contour>
Content Components
CodeSandbox
Example
<CodeSandbox url="https://codesandbox.io/embed/new?codemirror=1"/>
Props
CodeSandboxdefaultProps = url: 'https://codesandbox.io/embed/new?codemirror=1'
Frame
Example
<Frame url="https://yarnpkg.com/en/package/mdx-deck-theme-garlic" loadingText="Loading..."/>
Props
FramedefaultProps = url: 'https://yarnpkg.com/en/package/mdx-deck-theme-garlic' loadingText: 'Loading...'