deck-run

__.babelrc

{
  "presets": ["@babel/preset-react", "@babel/preset-env"]
}

__.codesandbox__template.json

{
  "templateName": "mdx-deck",
  "templateColor": "#222",
  "sandpack": {
    "defaultExtensions": ["js", "jsx", "ts", "tsx", "json"],
    "aliases": {},
    "preInstalledDependencies": [],
    "transpilers": {
      "\\.mdx$": ["./transpilers/mdx-deck-transpiler", "codesandbox:babel"],
      "\\.jsx?$": ["codesandbox:babel"],
      "\\.json$": ["codesandbox:json"],
      ".*": ["codesandbox:raw"]
    }
  }
}

__.codesandbox__transpilers__mdx-deck-transpiler.js

import normalizeNewline from "normalize-newline";
import mdx from "@mdx-js/mdx";
import matter from "gray-matter";
import stringifyObject from "stringify-object";

const SLIDEREG = /\n---\n/;

export async function transpile(code, loaderContext) {
  const { data, content } = matter(code);

  const modules = [];
  const slides = normalizeNewline(content)
    .split(SLIDEREG)
    .map(str => {
      const code = mdx.sync(str, { skipExport: true });
      const lines = code.split("\n");
      const tagIndex = lines.findIndex(str => /^</.test(str));
      modules.push(...lines.slice(0, tagIndex).filter(Boolean));
      const jsx = lines.slice(tagIndex).join("\n");

      return `({ components, ...props }) => ${jsx}`;
    })
    .map(str => str.trim());

  return {
    transpiledCode: `
import React from 'react'
import { MDXTag } from '@mdx-js/tag'
${modules.join("\n")}
export const meta = ${stringifyObject(data)}
export default [
  ${slides.join(",\n\n")}
]`
  };
}

__.entry.js

import React from "react";
import { render } from "react-dom";
import { SlideDeck } from "mdx-deck";
import { injectGlobal } from "styled-components";

injectGlobal`
  *{box-sizing:border-box}
  body{font-family:system-ui,sans-serif;margin:0}
  html,body{overflow:hidden}
  /* TODO use showOpenInCodeSandbox: false */
  iframe {display: none}
`;

const mod = require("./deck.mdx");
const slides = mod.default;
const { theme, components, Provider } = mod;

export default class App extends React.Component {
  render() {
    return (
      <SlideDeck
        {...this.props}
        slides={slides}
        theme={theme}
        components={components}
        Provider={Provider}
      />
    );
  }
}

if (typeof document !== "undefined") {
  render(<App />, document.getElementById("root"));
}

if (module.hot) module.hot.accept();

__components__my-component.js

import styled from "styled-components";

const H2 = styled.h2`
  transform: rotate(-90deg);
`;

export default H2;

__deck.mdx

export { dark as theme } from "mdx-deck/themes" import { Image, Appear } from "mdx-deck" import { CodeSurfer } from "mdx-deck-code-surfer" import nightOwl from "prism-react-renderer/themes/nightOwl" import MyComponent from "./components/my-component"

Hi

---

---

Foo

---

Bar

__package.json

{
  "name": "run",
  "main": "/.entry.js",
  "dependencies": {
    "@mdx-js/mdx": "latest",
    "@mdx-js/tag": "latest",
    "mdx-deck": "latest",
    "mdx-deck-code-surfer": "latest",
    "normalize-newline": "latest",
    "gray-matter": "latest",
    "react": "latest",
    "react-dom": "latest",
    "stringify-object": "latest"
  }
}