deckModes

Enum object which contains the different modes for the deck to be in. It can be used for with the setMode() function from the useNavigation hook.

const deckModes = {
  NORMAL: 0,
  PRESENTER: 1,
  GRID: 2,
  OVERVIEW: 3,
  PRINT: 4
}

baseTheme

Base theme object that is always being merged into the given theme, to provide sane defaults for some things. You can overwrite any of its properties by providing your own values in your theme.

const baseTheme = {
  colors: {
    text: '#000',
    background: '#FFF'
  },
  fonts: {
    body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
  },
  fontWeights: {
    body: 400
  },
  styles: {
    root: {
      bg: 'black',
      fontFamily: 'system-ui, sans-serif'
    },
    img: {
      objectFit: 'contain'
    },
    pre: {
      fontFamily: 'monospace',
      overflowX: 'auto',
      code: {
        color: 'inherit'
      }
    }
  },
  mdxp: {
    slide: {
      fontFamily: 'body',
      fontSize: '1.5rem'
    },
    presenter: {
      fontSize: '1.5rem',
      color: 'white'
    },
    note: {
      fontSize: '1.5rem',
      color: 'white'
    }
  }
}

defaultTheme

This is the default theme that is used for your presentation, if you do not give one to the Deck component.

const defaultTheme = {
  colors: {
    text: '#000',
    background: '#FFF',
    primary: '#CCC',
    secondary: '#555',
    accent: '#F9AC00',
    muted: '#888'
  },
  fonts: {
    heading: 'inherit',
    monospace: 'Menlo, monospace'
  },
  fontWeights: {
    heading: 700
  },
  lineHeights: {
    heading: 1.125
  },
  space: [
    0,
    4,
    8,
    16,
    32,
    64,
    128,
    256,
    512
  ],
  text: {
    heading: {
      fontFamily: 'heading',
      fontWeight: 'heading',
      lineHeight: 'heading',
      textAlign: 'center'
    }
  },
  styles: {
    h1: {
      variant: 'text.heading'
    },
    h2: {
      variant: 'text.heading'
    },
    h3: {
      variant: 'text.heading'
    },
    h4: {
      variant: 'text.heading'
    },
    h5: {
      variant: 'text.heading'
    },
    h6: {
      variant: 'text.heading'
    },
    inlineCode: {
      fontFamily: 'monospace',
      color: 'accent'
    },
    table: {
      color: 'text',
      fontSize: 'inherit',
      borderCollapse: 'collapse',
      borderStyle: 'hidden'
    },
    tr: {
      '& > :first-child': {
        paddingLeft: 0
      },
      '& > :last-child': {
        paddingRight: 0
      }
    },
    th: {
      fontWeight: 'bold',
      borderColor: 'inherit',
      borderStyle: 'solid',
      borderWidth: '0 0 2px 0',
      px: 3,
      py: 3
    },
    td: {
      borderColor: 'inherit',
      borderStyle: 'solid',
      borderWidth: '0 0 1px 0',
      px: 3,
      py: 2
    }
  }
}

MDXPTypes

Some components hold a special meaning for the MDXP code and will be handled specially.
This is the enum object which contains the different types of special MDXP components.

const MDXPTypes = {
  NONE: 0b00000001,
  LAYOUT: 0b00000010,
  WRAPPER: 0b00000100,
  GROUP: 0b00001000,
  EXTRACT: 0b00010000,
  NOTE: 0b00110000
}

setMDXPType

This is a higher-order component, which turns turns your component into a specific MDXPType.

Arguments

Returns

Examples

import {MDXPTypes, setMDXPType} from '@mdxp/core'
const TomatoLayout = ({children, ...props}) => (
  <div
    style={{
      width: '100%',
      height: '100%',
      overflow: 'hidden',
      backgroundColor: 'tomato',
      color: 'white'
    }}
    {...props}
  >
    {children}
  </div>
);
export default setMDXPType(TomatoLayout, MDXPTypes.LAYOUT);

getMDXPType

This function can be used to retrieve the MDXP type of a component.

NOTE
It is recommended to use the checkMDXPType to test for component types, instead of using this function, as the internal implementation of MDXPTypes might change between version.

Arguments

Returns

checkMDXPType

Check whether a component is of a certain MDXPType.

Arguments

Returns

Examples

import {MDXPTypes, checkMDXPType} from '@mdxp/core'
import Component from './component'
if (checkMDXPType(Component, MDXPTypes.LAYOUT)) {
  // Component is a layout!
}

getComponentType

This function can be used to retrieve the type of your component, regardless of whether it is a shortCodeComponent or not.

Arguments

Returns

Examples

import {getComponentType} from '@mdxp/core'
if (getComponentType(Element).name === 'MyComponent') {
  // Element is of type MyComponent
}