jxnblk/mdx-deck
1
1
Fork 0
mirror of https://github.com/jxnblk/mdx-deck.git synced 2024-11-26 00:35:02 +03:00
Code Issues Projects Releases Wiki Activity

Remove syntax highlighting and adjust themes

Browse Source
This commit is contained in:
Brent Jackson 2019-02-17 17:49:15 -05:00
parent 1936dd3a2e
commit b47736b811
14 changed files with 116 additions and 340 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
CHANGELOG.md
View File

@ -1,9 +1,17 @@
# Changelog
## Unreleased
- Simplified custom mdx loader, removing unused front-matter support
- Simplified theming and default styles
- Removes default Provider component with dot indicator
- Removes timers from presentation mode
- Uses Reach Router
- Fix for focus trap
- Removed PDF export and screenshots from core CLI
- Removed built-in syntax highlighting
- Removed `notes` language attribute for fenced code blocks
- Refactored dev server
## v1.8.2 2018-12-04

2
cli.js
View File

@ -112,9 +112,7 @@ switch (cmd) {
dev = require('./lib/dev')
dev(opts)
.then(server => {
console.log(server.address())
const { address, port } = server.address()
// const url = 'http://' + address + ':' + port
const url = `http://localhost:${port}`
if (opts.open) open(url)
log('listening on', chalk.green(url))

7
docs/index.mdx
View File

@ -1,5 +1,4 @@
import { Head, Image, Notes, Appear } from '..'
export { comic as theme } from '../src/themes'
<Head>
<title>MDX Deck Demo</title>
@ -40,10 +39,8 @@ export { comic as theme } from '../src/themes'
---
## This slide also has notes
```notes
More notes from a fenced code block
```js
const codeExample = require('./code-example')
```
---

38
docs/theming.md
View File

@ -1,4 +1,3 @@
# Theming
mdx-deck uses [styled-components][] for styling, making practically any part of the presentation themeable.
@ -29,8 +28,6 @@ export { default as theme } from './theme'
The theme should be an object with fields for fonts, colors, and CSS for individual components.
It's recommended that all custom themes extend the default theme as a base.
<small>Note: you need to include [all keys](#reference) in the `colors` object for the theming to work correctly. You may want to use a deep [merge](https://www.npmjs.com/search?q=merge) strategy for extending existing themes more easily.</small>
```js
// Example theme.js
import theme from 'mdx-deck/themes'
@ -42,21 +39,26 @@ export default {
font: 'Roboto, sans-serif',
// custom colors
colors: {
...theme.colors, // include existing theme colors
text: '#f0f',
background: 'black',
link: '#0ff',
}
},
}
```
### Google Fonts
TK
<!--
To use webfonts, mdx-deck will attempt to add `<link>` tags for any font from Google Fonts.
To load webfonts from other sources, use a custom [Provider component](advanced.md#custom-provider-component) to add custom `<link>` tags.
-->
### Syntax Highlighting
TK
<!--
By default fenced code blocks do not include any syntax highlighting.
Syntax highlighting in fenced code blocks can be enabled by providing a `prism` style object in a theme.
The syntax highlighting is built with [react-syntax-highlighter][] and [PrismJS][].
@ -107,7 +109,9 @@ For lists of available syntax styles and languages, see:
[PrismJS]: https://github.com/PrismJS/prism
[react-syntax-highlighter]: https://github.com/conorhastings/react-syntax-highlighter
-->
<!--
### Slide Transitions
The slide transition timing function and duration can be customized with a custom theme.
@ -122,6 +126,7 @@ export default {
transitionDuration: '.1s'
}
```
-->
### Styling Elements
@ -135,39 +140,26 @@ export default {
...theme,
h1: {
textTransform: 'uppercase',
letterSpacing: '0.1em'
letterSpacing: '0.1em',
},
blockquote: {
fontStyle: 'italic'
}
fontStyle: 'italic',
},
}
```
See the [reference](#reference) below for a full list of element keys.
## Reference
The following keys are available for theming:
- `font`: base font family
- `weights`: array of font weights for the main font
- `monospace`: font family for `<pre>` and `<code>`
- `fontSizes`: array of font sizes from smallest to largest
- `colors`: object of colors used for MDX components
- `text`: root foreground color
- `background`: root background color
- `link`
- `heading`
- `blockquote`
- `pre`
- `preBackground`
- `code`
- `codeBackground`
- `transitionTimingFunction`: timing function value for slide transitions
- `transitionDuration`: duration value for slide transitions. set to `0` to disable transitions
- `css`: root CSS object
- `heading`: CSS for all headings
- `h1`: CSS for `<h1>`
- `h2`: CSS for `<h2>`
- `h3`: CSS for `<h3>`
@ -190,4 +182,4 @@ The following keys are available for theming:
For more advanced customizations see the [Advanced Usage](advanced.md) docs.
[styled-components]: https://github.com/styled-components/styled-components
[MDX]: https://github.com/mdx-js/mdx
[mdx]: https://github.com/mdx-js/mdx

135
package-lock.json generated
View File

@ -2757,17 +2757,6 @@
"resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz",
"integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk="
},
"clipboard": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.4.tgz",
"integrity": "sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==",
"optional": true,
"requires": {
"good-listener": "^1.2.2",
"select": "^1.1.2",
"tiny-emitter": "^2.0.0"
}
},
"cliui": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz",
@ -2855,14 +2844,6 @@
"delayed-stream": "~1.0.0"
}
},
"comma-separated-tokens": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.5.tgz",
"integrity": "sha512-Cg90/fcK93n0ecgYTAz1jaA3zvnQ0ExlmKY1rdbyHqAx6BHxwoJc+J7HDu0iuQ7ixEs1qaa+WyQ6oeuBpYP1iA==",
"requires": {
"trim": "0.0.1"
}
},
"commander": {
"version": "2.13.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.13.0.tgz",
@ -3332,12 +3313,6 @@
"integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
"dev": true
},
"delegate": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
"optional": true
},
"depd": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@ -3864,14 +3839,6 @@
"integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
"dev": true
},
"fault": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/fault/-/fault-1.0.2.tgz",
"integrity": "sha512-o2eo/X2syzzERAtN5LcGbiVQ0WwZSlN3qLtadwAz3X8Bu+XWD16dja/KMsjZLiQr+BLGPDnHGkc4yUJf1Xpkpw==",
"requires": {
"format": "^0.2.2"
}
},
"faye-websocket": {
"version": "0.11.1",
"resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.1.tgz",
@ -4058,11 +4025,6 @@
"mime-types": "^2.1.12"
}
},
"format": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
"integrity": "sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs="
},
"fragment-cache": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
@ -4809,15 +4771,6 @@
}
}
},
"good-listener": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
"integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
"optional": true,
"requires": {
"delegate": "^3.1.2"
}
},
"graceful-fs": {
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
@ -4958,22 +4911,6 @@
"minimalistic-assert": "^1.0.1"
}
},
"hast-util-parse-selector": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.1.tgz",
"integrity": "sha512-Xyh0v+nHmQvrOqop2Jqd8gOdyQtE8sIP9IQf7mlVDqp924W4w/8Liuguk2L2qei9hARnQSG2m+wAOCxM7npJVw=="
},
"hastscript": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/hastscript/-/hastscript-5.0.0.tgz",
"integrity": "sha512-xJtuJ8D42Xtq5yJrnDg/KAIxl2cXBXKoiIJwmWX9XMf8113qHTGl/Bf7jEsxmENJ4w6q4Tfl8s/Y6mEZo8x8qw==",
"requires": {
"comma-separated-tokens": "^1.0.0",
"hast-util-parse-selector": "^2.2.0",
"property-information": "^5.0.1",
"space-separated-tokens": "^1.0.0"
}
},
"header-case": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/header-case/-/header-case-1.0.1.tgz",
@ -4988,11 +4925,6 @@
"resolved": "https://registry.npmjs.org/hhmmss/-/hhmmss-1.0.0.tgz",
"integrity": "sha1-BsdlqZCKiIS3IAPBeoOch5ypKnw="
},
"highlight.js": {
"version": "9.12.0",
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz",
"integrity": "sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4="
},
"hmac-drbg": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@ -7134,15 +7066,6 @@
"lower-case": "^1.1.2"
}
},
"lowlight": {
"version": "1.9.2",
"resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.9.2.tgz",
"integrity": "sha512-Ek18ElVCf/wF/jEm1b92gTnigh94CtBNWiZ2ad+vTgW7cTmQxUY3I98BjHK68gZAJEWmybGBZgx9qv3QxLQB/Q==",
"requires": {
"fault": "^1.0.2",
"highlight.js": "~9.12.0"
}
},
"make-dir": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
@ -8273,14 +8196,6 @@
"integrity": "sha512-OoFeWfTYwXP9bdsJItDKK2hCnGZ78AGHism6up7wzBxBuO/0Hcn3nvA8K2LJOb5UxYjXqMOedNhHQuU7ypDdnw==",
"dev": true
},
"prismjs": {
"version": "1.15.0",
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.15.0.tgz",
"integrity": "sha512-Lf2JrFYx8FanHrjoV5oL8YHCclLQgbJcVZR+gikGGMqz6ub5QVWDTM6YIwm3BuPxM/LOV+rKns3LssXNLIf+DA==",
"requires": {
"clipboard": "^2.0.0"
}
},
"private": {
"version": "0.1.8",
"resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@ -8342,14 +8257,6 @@
"integrity": "sha512-CGuc0VUTGthpJXL36ydB6jnbyOf/rAHFvmVrJlH+Rg0DqqLFQGAP6hIaxD/G0OAmBJPhXDHuEJigrp0e0wFV6g==",
"dev": true
},
"property-information": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/property-information/-/property-information-5.0.1.tgz",
"integrity": "sha512-nAtBDVeSwFM3Ot/YxT7s4NqZmqXI7lLzf46BThvotEtYf2uk2yH0ACYuWQkJ7gxKs49PPtKVY0UlDGkyN9aJlw==",
"requires": {
"xtend": "^4.0.1"
}
},
"prr": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
@ -8594,18 +8501,6 @@
"prop-types": "^15.6.2"
}
},
"react-syntax-highlighter": {
"version": "10.1.3",
"resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-10.1.3.tgz",
"integrity": "sha512-p0eT89ZVrFwrSQDkQzpAXxMEyAQRYwH6Wnl6gEVLX+Qu4a2/OvNGl8mMwpmxpdbSqgjqHcW9d62VbVlFJHHY1A==",
"requires": {
"@babel/runtime": "^7.3.1",
"highlight.js": "~9.12.0",
"lowlight": "~1.9.1",
"prismjs": "^1.8.4",
"refractor": "^2.4.1"
}
},
"react-test-renderer": {
"version": "16.8.2",
"resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.8.2.tgz",
@ -8695,16 +8590,6 @@
"strip-indent": "^2.0.0"
}
},
"refractor": {
"version": "2.6.2",
"resolved": "https://registry.npmjs.org/refractor/-/refractor-2.6.2.tgz",
"integrity": "sha512-AMNEGkhaXfhoa0/0mW0bHdfizDJnuHDK29/D5oQaKICf6DALQ+kDEHW/36oDHCdfva4XrZ+cdMhRvPsTI4OIjA==",
"requires": {
"hastscript": "^5.0.0",
"parse-entities": "^1.1.2",
"prismjs": "~1.15.0"
}
},
"regenerate": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
@ -9128,12 +9013,6 @@
"ajv-keywords": "^3.1.0"
}
},
"select": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
"integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
"optional": true
},
"semver": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.5.0.tgz",
@ -9483,14 +9362,6 @@
"resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz",
"integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM="
},
"space-separated-tokens": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.2.tgz",
"integrity": "sha512-G3jprCEw+xFEs0ORweLmblJ3XLymGGr6hxZYTYZjIlvDti9vOBUjRQa1Rzjt012aRrocKstHwdNi+F7HguPsEA==",
"requires": {
"trim": "0.0.1"
}
},
"spdx-correct": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.0.0.tgz",
@ -9975,12 +9846,6 @@
"setimmediate": "^1.0.4"
}
},
"tiny-emitter": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
"optional": true
},
"title-case": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/title-case/-/title-case-2.1.1.tgz",

1
package.json
View File

@ -46,7 +46,6 @@
"react-dev-utils": "^7.0.3",
"react-dom": "^16.8.2",
"react-swipeable": "^5.0.1",
"react-syntax-highlighter": "^10.1.3",
"remark-emoji": "^2.0.2",
"remark-unwrap-images": "^0.1.0",
"rimraf": "^2.6.3",

35
src/HighlightCode.js
View File

@ -1,35 +0,0 @@
import React from 'react'
import { Prism } from 'react-syntax-highlighter/dist/cjs/prism'
import defaultTheme from 'react-syntax-highlighter/dist/cjs/styles/prism/atom-dark'
import javascript from 'react-syntax-highlighter/dist/cjs/languages/prism/javascript'
import jsx from 'react-syntax-highlighter/dist/cjs/languages/prism/jsx'
export default class Code extends React.Component {
constructor(props) {
super(props)
Prism.registerLanguage('javascript', javascript)
Prism.registerLanguage('jsx', jsx)
if (props.theme && props.theme.prism && props.theme.prism.languages) {
const languages = props.theme.prism.languages
Object.keys(languages).forEach(key => {
Prism.registerLanguage(key, languages[key])
})
}
}
getLangauge = lang => {
return lang ? lang.replace('language-', '') : 'javascripts'
}
render() {
const { className, children, theme } = this.props
const language = this.getLangauge(className)
const style =
theme.prism && theme.prism.style ? theme.prism.style : defaultTheme
return (
<Prism language={language} style={style}>
{children}
</Prism>
)
}
}

186
src/index.js
View File

@ -1,23 +1,5 @@
/* v1 API
export { withDeck, withSlide } from './context'
export { Head } from './Head'
export { default as SlideDeck } from './SlideDeck'
export { default as Image } from './Image'
export { default as Notes } from './Notes'
export { default as Appear } from './Appear'
export { default as Code } from './Code'
export { default as components } from './components'
// themes
export { default as theme } from './themes'
export * as themes from './themes'
// internals for third-party components
export * as updaters from './updaters'
export * as constants from './constants'
*/
/*
* mdx-deck v2 prototype
*
* todo:
* - [x] Head
@ -28,8 +10,8 @@ export * as constants from './constants'
* - [x] notes code fence
* - [ ] syntax highlighting
* - [x] history api fallback
* - [ ] mdx components
* - [ ] themes
* - [x] mdx components
* - [x] themes
* - [ ] layouts
* - [ ] presenter mode
* - [ ] overview mode
@ -50,7 +32,7 @@ import { Router, globalHistory, navigate } from '@reach/router'
import styled, { ThemeProvider, withTheme } from 'styled-components'
import { MDXProvider } from '@mdx-js/tag'
import { width, height } from 'styled-system'
import HighlightCode from './HighlightCode'
import { Swipeable } from 'react-swipeable'
import { default as defaultTheme } from './themes'
const NORMAL = 'NORMAL'
@ -66,8 +48,6 @@ export const withContext = Component => props => (
/>
)
const themed = key => props => props.theme[key]
// TODO check against v1 styles
const SlideRoot = styled.div(
{
@ -78,7 +58,7 @@ const SlideRoot = styled.div(
alignItems: 'center',
justifyContent: 'center',
},
themed('Slide')
props => props.theme.Slide
)
const Slide = ({ children, ...props }) => (
@ -90,86 +70,45 @@ const Slide = ({ children, ...props }) => (
const DefaultProvider = props => <>{props.children}</>
// MDX components
const Heading = styled.h1({}, themed('Heading'))
const h1 = styled(Heading)(themed('h1'))
h1.defaultProps = { as: 'h1' }
const h2 = styled(Heading)(themed('h2'))
h2.defaultProps = { as: 'h2' }
const h3 = styled(Heading)(themed('h3'))
h3.defaultProps = { as: 'h3' }
const h4 = styled(Heading)(themed('h4'))
h4.defaultProps = { as: 'h4' }
const h5 = styled(Heading)(themed('h5'))
h5.defaultProps = { as: 'h5' }
const h6 = styled(Heading)(themed('h6'))
h6.defaultProps = { as: 'h6' }
const a = styled.a(themed('a'), themed('link'))
const p = styled.p(themed('p'), themed('paragraph'))
const blockquote = styled.blockquote(themed('blockquote'))
const ul = styled.ul(themed('ul'))
const ol = styled.ol(themed('ol'))
const li = styled.li(themed('li'))
const Heading = styled.h1({ margin: 0 })
const inlineCode = styled.code(
props => ({
fontFamily: props.theme.monospace,
}),
themed('code')
props => props.theme.code
)
const Pre = styled.pre(
const code = styled.pre(
props => ({
fontFamily: props.theme.monospace,
fontSize: '.75em',
}),
themed('pre')
props => props.theme.pre
)
const code = withTheme(props => {
switch (props.className) {
case 'language-notes':
return (
<Notes>
<Pre {...props} />
</Notes>
)
default:
if (props.theme.prism && props.theme.prism.style) {
return <HighlightCode {...props} />
}
return <Pre {...props} />
}
const img = styled.img({
maxWidth: '100%',
height: 'auto',
objectFit: 'cover',
})
const img = styled.img(
{
maxWidth: '100%',
height: 'auto',
objectFit: 'cover',
},
themed('img'),
themed('image')
)
const TableWrap = styled.div({
overflowX: 'auto',
})
const Table = styled.table(
{
width: '100%',
borderCollapse: 'separate',
borderSpacing: 0,
'& td, & th': {
textAlign: 'left',
paddingRight: '.5em',
paddingTop: '.25em',
paddingBottom: '.25em',
borderBottom: '1px solid',
verticalAlign: 'top',
},
const Table = styled.table({
width: '100%',
borderCollapse: 'separate',
borderSpacing: 0,
'& td, & th': {
textAlign: 'left',
paddingRight: '.5em',
paddingTop: '.25em',
paddingBottom: '.25em',
borderBottom: '1px solid',
verticalAlign: 'top',
},
themed('table')
)
})
const table = props => (
<TableWrap>
<Table {...props} />
@ -177,18 +116,6 @@ const table = props => (
)
const components = {
h1,
h2,
h3,
h4,
h5,
h6,
a,
p,
blockquote,
ul,
ol,
li,
pre: props => props.children,
code,
inlineCode,
@ -295,11 +222,33 @@ const Overview = props => {
const Root = props => <>{props.children}</>
const RootStyles = styled.div(props => ({
fontFamily: props.theme.font,
color: props.theme.colors.text,
backgroundColor: props.theme.colors.background,
}))
const themed = (...tags) => props =>
tags.map(tag => props.theme[tag] && { ['& ' + tag]: props.theme[tag] })
const RootStyles = styled.div(
props => ({
fontFamily: props.theme.font,
color: props.theme.colors.text,
backgroundColor: props.theme.colors.background,
}),
props => props.theme.css,
themed(
'h1',
'h2',
'h3',
'h4',
'h5',
'h6',
'a',
'ul',
'ol',
'li',
'p',
'blockquote',
'img',
'table'
)
)
const GoogleFonts = withTheme(
props =>
@ -374,6 +323,7 @@ export class MDXDeck extends React.Component {
}
previous = () => {
console.log('previous')
const { slides, step } = this.state
const index = this.getIndex()
const meta = this.getMeta(index)
@ -455,19 +405,23 @@ export class MDXDeck extends React.Component {
<MDXProvider components={mdxComponents}>
<Provider {...this.state} index={index}>
<Wrapper {...this.state} index={index}>
<RootStyles>
<GoogleFonts />
<Router>
<Slide path="/" index={0} {...context}>
<FirstSlide path="/" />
</Slide>
{slides.map((Component, i) => (
<Slide key={i} path={i + '/*'} index={i} {...context}>
<Component path={i + '/*'} />
<Swipeable
onSwipedRight={this.previous}
onSwipedLeft={this.next}>
<RootStyles>
<GoogleFonts />
<Router>
<Slide path="/" index={0} {...context}>
<FirstSlide path="/" />
</Slide>
))}
</Router>
</RootStyles>
{slides.map((Component, i) => (
<Slide key={i} path={i + '/*'} index={i} {...context}>
<Component path={i + '/*'} />
</Slide>
))}
</Router>
</RootStyles>
</Swipeable>
</Wrapper>
</Provider>
</MDXProvider>

14
src/themes/base.js
View File

@ -1,9 +1,7 @@
export default {
font: 'system-ui, sans-serif',
monospace: 'Menlo, monospace',
fontSizes: [
'0.75em', '1em', '1.5em', '2em', '3em'
],
fontSizes: ['0.75em', '1em', '1.5em', '2em', '3em'],
colors: {
text: '#000',
background: 'white',
@ -13,16 +11,16 @@ export default {
code: '#f0f',
},
css: {
fontSize: '16px',
fontSize: '1.5em',
textAlign: 'center',
'@media screen and (min-width:64em)': {
fontSize: '32px',
}
fontSize: '3em',
},
},
ol: {
textAlign: 'left'
textAlign: 'left',
},
ul: {
textAlign: 'left'
textAlign: 'left',
},
}

4
src/themes/book.js
View File

@ -15,9 +15,9 @@ export default {
},
css: {
textAlign: 'left',
fontSize: '16px',
fontSize: '1.5em',
'@media screen and (min-width:64em)': {
fontSize: '32px',
fontSize: '3em',
},
'& .Slide > div': {
minWidth: '80vw',

4
src/themes/hack.js
View File

@ -18,9 +18,9 @@ export default {
},
css: {
textAlign: 'left',
fontSize: '16px',
fontSize: '1.5em',
'@media screen and (min-width:64em)': {
fontSize: '32px',
fontSize: '3em',
},
'& .Slide > div': {
minWidth: '80vw',

4
src/themes/notes.js
View File

@ -6,10 +6,10 @@ export default {
googleFont:
'https://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope',
css: {
fontSize: '16px',
fontSize: '1.5em',
textAlign: 'center',
'@media screen and (min-width:64em)': {
fontSize: '40px',
fontSize: '4em',
},
},
}

4
src/themes/script.js
View File

@ -14,10 +14,10 @@ export default {
link: black,
},
css: {
fontSize: '16px',
fontSize: '1.5em',
textAlign: 'center',
'@media screen and (min-width:64em)': {
fontSize: '48px',
fontSize: '4em',
},
},
}

12
src/themes/swiss.js
View File

@ -11,17 +11,17 @@ export default {
colors: {
text: black,
background: white,
link: red
link: red,
},
css: {
textAlign: 'left',
fontSize: '16px',
fontSize: '1.5em',
'@media screen and (min-width:64em)': {
fontSize: '32px',
fontSize: '3em',
},
'& .Slide > div': {
minWidth: '80vw',
minHeight: '60vh'
}
}
minHeight: '60vh',
},
},
}