diff --git a/package.json b/package.json index a898ee4..294dd1c 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,11 @@ "coverageReporters": [ "lcov", "html" + ], + "testPathIgnorePatterns": [ + "/node_modules/", + "/.cache/", + "/public/" ] }, "husky": { diff --git a/packages/components/src/MDXDeck.js b/packages/components/src/MDXDeck.js index e476b35..bf152cf 100644 --- a/packages/components/src/MDXDeck.js +++ b/packages/components/src/MDXDeck.js @@ -58,6 +58,7 @@ export class MDXDeck extends React.Component { } handleKeyDown = e => { + const { basepath } = this.props const { keyCode, metaKey, ctrlKey, altKey, shiftKey } = e const { activeElement } = document if (inputElements.includes(activeElement.tagName)) { @@ -68,7 +69,7 @@ export class MDXDeck extends React.Component { const { pathname } = globalHistory.location if (keyCode === keys.p && shiftKey && altKey) { - navigate('/print') + navigate(basepath + '/print') this.setState({ mode: 'print' }) } if (pathname === '/print') return @@ -108,7 +109,9 @@ export class MDXDeck extends React.Component { const { basepath } = this.props const { pathname } = globalHistory.location const pagepath = pathname.replace(basepath, '') - return Number(pagepath.split('/')[1] || 0) + const n = Number(pagepath.split('/')[1]) + const index = isNaN(n) ? -1 : n + return index } getMeta = i => { @@ -225,7 +228,8 @@ export class MDXDeck extends React.Component { const { basepath } = this.props const { pathname } = globalHistory.location const { slides } = this.state - const mode = pathname === '/print' ? PRINT : this.state.mode + const pagepath = pathname.replace(basepath, '') + const mode = pagepath === '/print' ? PRINT : this.state.mode const index = this.getIndex() const context = { ...this.state, @@ -256,16 +260,15 @@ export class MDXDeck extends React.Component { - - - + + {slides.map((Component, i) => ( ))} - + diff --git a/packages/components/src/Overview.js b/packages/components/src/Overview.js index 994f83a..bf79396 100644 --- a/packages/components/src/Overview.js +++ b/packages/components/src/Overview.js @@ -4,6 +4,8 @@ import Zoom from './Zoom' import Slide from './Slide' import Pre from './Pre' +const query = '?mode=overview' + export const Overview = props => { const { index, slides, basepath } = props const activeThumb = React.createRef() @@ -42,7 +44,7 @@ export const Overview = props => { key={i} role="link" onClick={e => { - navigate(basepath + '/' + i) + navigate(basepath + '/' + i + query) }} style={{ display: 'block', diff --git a/packages/gatsby-theme/README.md b/packages/gatsby-theme/README.md new file mode 100644 index 0000000..d5b6451 --- /dev/null +++ b/packages/gatsby-theme/README.md @@ -0,0 +1,42 @@ +# @mdx-deck/gatsby-theme + +**WIP** A Gatsby theme for adding MDX Decks to your Gatsby site + +```sh +npm i @mdx-deck/gatsby-theme +``` + +_Note:_ This theme requires MDX v1, which is currently in beta, and will not work with previous versions of MDX + +```js +// gatsby-config.js +module.exports = { + __experimentalThemes: ['@mdx-deck/gatsby-theme'], +} +``` + +Add MDX Decks to the `src/decks/` directory. + +```mdx +# Hello! + +--- + +## Beep +``` + +## Using Layouts + +Slide layout components must be rendered inline, _not_ using the default export syntax. + +```mdx +import Layout from './my-layout' + + + +# Hello Layout + + +``` + +MIT License diff --git a/packages/gatsby-theme/gatsby-config.js b/packages/gatsby-theme/gatsby-config.js index 990a658..e021e45 100644 --- a/packages/gatsby-theme/gatsby-config.js +++ b/packages/gatsby-theme/gatsby-config.js @@ -23,7 +23,12 @@ module.exports = { { resolve: 'gatsby-plugin-compile-es6-packages', options: { - modules: [pkg.name], + modules: [ + pkg.name, + '@mdx-deck/components', + '@mdx-deck/themes', + '@mdx-deck/layouts', + ], }, }, ], diff --git a/packages/gatsby-theme/package.json b/packages/gatsby-theme/package.json index ed110eb..1fc0dbc 100644 --- a/packages/gatsby-theme/package.json +++ b/packages/gatsby-theme/package.json @@ -9,28 +9,26 @@ "build": "gatsby build" }, "peerDependencies": { - "@mdx-js/mdx": "^1.0.0-rc.0", - "@mdx-js/react": "^1.0.0-rc.0", "gatsby": "^2.3.17", - "gatsby-mdx": "^0.5.6", "react": "^16.8.6", "react-dom": "^16.8.6" }, "devDependencies": { - "@mdx-js/mdx": "^1.0.0-rc.0", - "@mdx-js/react": "^1.0.0-rc.0", "gatsby": "^2.3.17", - "gatsby-mdx": "^0.5.6", "react": "^16.8.6", "react-dom": "^16.8.6" }, "dependencies": { + "gatsby-mdx": "^0.5.6", + "@mdx-js/mdx": "^1.0.0-rc.0", + "@mdx-js/react": "^1.0.0-rc.0", "@mdx-deck/components": "^2.0.8", "@mdx-deck/themes": "^2.0.2", "debug": "^4.1.1", "gatsby-plugin-compile-es6-packages": "^1.1.0", "gatsby-plugin-emotion": "^4.0.6", "gatsby-source-filesystem": "^2.0.29", + "lodash.get": "^4.4.2", "mkdirp": "^0.5.1" } } diff --git a/packages/gatsby-theme/src/decks/hello.mdx b/packages/gatsby-theme/src/decks/hello.mdx index 886e9d2..ef78a5e 100644 --- a/packages/gatsby-theme/src/decks/hello.mdx +++ b/packages/gatsby-theme/src/decks/hello.mdx @@ -1,5 +1,5 @@ -# Hello +# Hello There! :sunglasses: --- diff --git a/packages/gatsby-theme/src/decks/leia.mdx b/packages/gatsby-theme/src/decks/leia.mdx deleted file mode 100644 index 9c3576a..0000000 --- a/packages/gatsby-theme/src/decks/leia.mdx +++ /dev/null @@ -1,10 +0,0 @@ - -# Leia - ---- - -Is the best cat - ---- - -:kissing_cat: diff --git a/packages/gatsby-theme/src/layouts/deck.js b/packages/gatsby-theme/src/layouts/deck.js index d372424..33ef56d 100644 --- a/packages/gatsby-theme/src/layouts/deck.js +++ b/packages/gatsby-theme/src/layouts/deck.js @@ -1,5 +1,4 @@ import React from 'react' -import { Global } from '@emotion/core' import { MDXProvider } from '@mdx-js/react' import { MDXDeck } from '@mdx-deck/components' import Root from './root' diff --git a/packages/gatsby-theme/src/layouts/index.js b/packages/gatsby-theme/src/layouts/index.js index 37c4940..ce02b7e 100644 --- a/packages/gatsby-theme/src/layouts/index.js +++ b/packages/gatsby-theme/src/layouts/index.js @@ -19,37 +19,48 @@ const wrapper = props => { ) } -const Thumb = props => { - console.log(props) - - return {props.children} -} +const Thumb = props => ( +
{ + navigate(props.slug) + }} + > + {props.children} +
+ {props.title} +
+
+) export default props => ( -
+

MDX Decks

    {props.decks.map(deck => ( -
  • -
    { - navigate(deck.slug) - }} - > - - {deck.slug} -
    +
  • +
    • ))}
diff --git a/packages/gatsby-theme/src/templates/index.js b/packages/gatsby-theme/src/templates/index.js index 64c7055..2cc788e 100644 --- a/packages/gatsby-theme/src/templates/index.js +++ b/packages/gatsby-theme/src/templates/index.js @@ -1,18 +1,26 @@ import React from 'react' import { graphql } from 'gatsby' import MDXRenderer from 'gatsby-mdx/mdx-renderer' +import get from 'lodash.get' import Layout from '../layouts/index' +const getTitle = node => { + const headings = node.headings.filter(h => h.depth === 1) + return get(headings, `0.value`, node.slug) +} + export default props => { - const decks = props.data.allMdx.edges.map(({ node }) => ({ - ...node, - slug: node.fields.slug, - children: , - })) + const decks = props.data.allMdx.edges + .map(({ node }) => ({ + ...node, + slug: node.fields.slug, + title: getTitle(node), + children: , + })) + .filter(node => node.parent.sourceInstanceName === 'decks') return } -// todo: filter?? export const query = graphql` { allMdx { @@ -25,6 +33,15 @@ export const query = graphql` code { body } + headings { + depth + value + } + parent { + ... on File { + sourceInstanceName + } + } } } } diff --git a/packages/loader/index.js b/packages/loader/index.js index 697e44a..8ef219a 100644 --- a/packages/loader/index.js +++ b/packages/loader/index.js @@ -5,7 +5,10 @@ const mdxPlugin = require('@mdx-deck/mdx-plugin') module.exports = async function(src) { const callback = this.async() const options = getOptions(this) || {} - options.remarkPlugins = options.mdPlugins || [] + options.remarkPlugins = [ + ...options.remarkPlugins, + ...(options.mdPlugins || []), + ] options.remarkPlugins.push(mdxPlugin) const result = mdx.sync(src, options) diff --git a/packages/mdx-deck/cli.js b/packages/mdx-deck/cli.js index 4ffaa9b..0987d91 100755 --- a/packages/mdx-deck/cli.js +++ b/packages/mdx-deck/cli.js @@ -22,7 +22,7 @@ const cli = meow( $ ${chalk.green('mdx-deck deck.mdx')} $ ${chalk.green('mdx-deck build deck.mdx')} - + ${chalk.gray('Options')} -h --host Dev server host @@ -60,6 +60,9 @@ const cli = meow( type: 'boolean', default: true, }, + basepath: { + type: 'string', + }, }, } ) diff --git a/packages/mdx-deck/lib/config.js b/packages/mdx-deck/lib/config.js index 6c9cc63..718ad1d 100644 --- a/packages/mdx-deck/lib/config.js +++ b/packages/mdx-deck/lib/config.js @@ -6,13 +6,11 @@ const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') const MiniCSSExtractPlugin = require('mini-css-extract-plugin') const merge = require('webpack-merge') const chalk = require('chalk') -const remark = { - emoji: require('remark-emoji'), - unwrapImages: require('remark-unwrap-images'), -} const HTMLPlugin = require('@mdx-deck/webpack-html-plugin') const babel = require('../babel.config') +const remarkPlugins = [require('remark-emoji'), require('remark-unwrap-images')] + const rules = [ { test: /\.jsx?$/, @@ -38,7 +36,7 @@ const rules = [ { loader: require.resolve('@mdx-deck/loader'), options: { - remarkPlugins: [remark.emoji, remark.unwrapImages], + remarkPlugins, }, }, ], diff --git a/packages/mdx-deck/lib/entry.js b/packages/mdx-deck/lib/entry.js index cc085aa..e2152d2 100644 --- a/packages/mdx-deck/lib/entry.js +++ b/packages/mdx-deck/lib/entry.js @@ -13,6 +13,11 @@ export default class App extends React.Component { } } +const { basepath } = OPTIONS +App.defaultProps = { + basepath, +} + if (typeof document !== 'undefined') { const div = document.getElementById('root') render(, div)