Skip to content
garlic theme for mdx-deck
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples adjustments May 7, 2019
src adjustments May 7, 2019
.gitignore
index.js
now.json add contour, zeit now demo Apr 28, 2019
package.json
readme.md
yarn.lock adjustments May 7, 2019

readme.md

Garlic Theme for mdx-deck

NPM Package Version

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

Getting Started

In your new mdx-deck project, create a theme.js file and paste the following sample code to override the default values:

// theme.js
import theme, { Provider } from 'mdx-deck-theme-garlic'

const config = {
  logo: () => <svg></svg>, // your SVG logo React component
  logoUrl: 'https://google.com', // link for logo wrapper
  author: 'josef.aidt', // author name
  authorUrl: 'https://josefaidt.me' // author url
}

const wrapper = props => <Provider {...config} {...props} />

export default {
  ...theme,
  Provider: wrapper,
}

Import into your deck.mdx file:

export { default as theme } from './theme'

# My first slide

Theme Context

Access the theme color values via ThemeContext:

// my-component
import React, { useContext } from 'react'
import { ThemeContext } from 'mdx-deck-theme-garlic'

const MyComponent = props => {
  const context = useContext(ThemeContext)
  return (
    <h1 style={{ color: context.colors.default }}></h1>
  )
}

Provided by the ThemeContext:

  • colors
  • color utilities (currently only opacity)
    • context.util.opacity(color: HexString!, opacityPercent: Int!)

Starting Colors

In case you would like to roll your own ThemeContext and wrap the provided Provider, styles for the built-in components reference the following Object keys

// colors.js
export default {
  default: '#585159',
  accent: '#A8595E',
  bg: '#F5F5EE',
}

Layout Components

Contour

Props

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

Example

import { Contour } from 'mdx-deck-theme-garlic'

<Contour>

# Title

some text

</Contour>

Contour Invert

Props
Contour.props = {
  invert: true,
  contentWidth: 70, // default
}
Example
import { Contour } from 'mdx-deck-theme-garlic'

<Contour invert>

# Title

some text

</Contour>

Contour with Custom Width

Props
Contour.props = {
  invert: false, // default
  contentWidth: 90,
}
Example
import { Contour } from 'mdx-deck-theme-garlic'

<Contour contentWidth={90}>

# Title

some text

</Contour>

Content Components

CodeSandbox

Props

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

Example

import { CodeSandbox } from 'mdx-deck-theme-garlic'

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

Frame

Props

Frame.defaultProps = {
  url: 'https://yarnpkg.com/en/package/mdx-deck-theme-garlic',
  loadingText: 'Loading...',
}

Example

import { Frame } from 'mdx-deck-theme-garlic'

<Frame
  url="https://yarnpkg.com/en/package/mdx-deck-theme-garlic"
  loadingText="Loading..."
/>
You can’t perform that action at this time.