Skip to content

Commit 337d614

Browse files
paulmarsicloudryan-roemer
paulmarsicloud
and
ryan-roemer
authored
Chore/spectacle mdx loader addition (#1228)
* spectacle-mdx-loader addition setup Co-authored-by: Ryan Roemer <[email protected]>
1 parent 8c8397f commit 337d614

16 files changed

+786
-51
lines changed

‎CONTRIBUTING.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ We follow the convention of `start:NAME` to run an in-memory dev server for a sp
3232
- [`examples/typescript`](https://github.com/FormidableLabs/spectacle/tree/main/examples/typescript)
3333
- [`examples/one-page`](https://github.com/FormidableLabs/spectacle/tree/main/examples/one-page)
3434
- `spectacle-mdx-loader`
35-
- [`examples/mdx`](https://github.com/FormidableLabs/spectacle-mdx-loader/tree/main/examples/mdx)
35+
- [`examples/mdx`](https://github.com/FormidableLabs/spectacle/tree/main/examples/mdx)
3636

3737
Here's how you can run the various examples:
3838

@@ -49,6 +49,10 @@ $ open http://localhost:3100/
4949
$ pnpm start:md
5050
$ open http://localhost:3200/
5151

52+
# MDX demo app (in two different terminals)
53+
$ pnpm start:mdx
54+
$ open http://localhost:3300/
55+
5256
# One-page (no build, HTML page only) demo app (in two different terminals)
5357
$ pnpm start:one-page
5458
$ open examples/one-page/index.html

‎examples/mdx/.babelrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "../../.babelrc.js"
3+
}

‎examples/mdx/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title><%= htmlWebpackPlugin.options.title %></title>
6+
<link
7+
href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&display=swap"
8+
rel="stylesheet"
9+
/>
10+
</head>
11+
<body>
12+
<div id="root"></div>
13+
</body>
14+
</html>

‎examples/mdx/index.js

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import React from 'react';
2+
import { render } from 'react-dom';
3+
4+
import { MDXProvider } from '@mdx-js/react';
5+
6+
import {
7+
Deck,
8+
FlexBox,
9+
Slide,
10+
Box,
11+
Progress,
12+
FullScreen,
13+
Notes,
14+
mdxComponentMap
15+
} from 'spectacle';
16+
17+
// SPECTACLE_CLI_MDX_START
18+
import slides, { notes } from './slides.mdx';
19+
// SPECTACLE_CLI_MDX_END
20+
21+
// SPECTACLE_CLI_THEME_START
22+
const theme = {};
23+
// SPECTACLE_CLI_THEME_END
24+
25+
// SPECTACLE_CLI_TEMPLATE_START
26+
const template = () => (
27+
<FlexBox
28+
justifyContent="space-between"
29+
position="absolute"
30+
bottom={0}
31+
width={1}
32+
>
33+
<Box padding="0 1em">
34+
<FullScreen />
35+
</Box>
36+
<Box padding="1em">
37+
<Progress />
38+
</Box>
39+
</FlexBox>
40+
);
41+
// SPECTACLE_CLI_TEMPLATE_END
42+
43+
const Presentation = () => (
44+
<MDXProvider components={mdxComponentMap}>
45+
<Deck theme={theme} template={template}>
46+
{slides
47+
.map((MDXSlide, i) => [MDXSlide, notes[i]])
48+
.map(([MDXSlide, MDXNote], i) => (
49+
<Slide key={`slide-${i}`} slideNum={i}>
50+
<MDXSlide />
51+
<Notes>
52+
<MDXNote />
53+
</Notes>
54+
</Slide>
55+
))}
56+
</Deck>
57+
</MDXProvider>
58+
);
59+
60+
render(<Presentation />, document.getElementById('root'));

‎examples/mdx/package.json

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
{
2+
"name": "spectacle-example-mdx",
3+
"private": true,
4+
"dependencies": {
5+
"@mdx-js/react": "^1.5.3",
6+
"prop-types": "^15.7.2",
7+
"spectacle": "*",
8+
"react": "^18.1.0",
9+
"react-dom": "^18.1.0"
10+
},
11+
"devDependencies": {
12+
"spectacle-mdx-loader": "*"
13+
},
14+
"scripts": {
15+
"start": "webpack-dev-server --port=3300 --hot --config ./webpack.config.js",
16+
"build": "wireit",
17+
"lint": "wireit",
18+
"lint:fix": "wireit",
19+
"prettier": "wireit",
20+
"prettier:fix": "wireit"
21+
},
22+
"wireit": {
23+
"build": {
24+
"command": "nps webpack",
25+
"files": [
26+
"*.{js,jsx,ts,tsx,html}"
27+
],
28+
"output": [
29+
"dist/*"
30+
],
31+
"dependencies": [
32+
"../../packages/spectacle:build:lib:esm"
33+
],
34+
"packageLocks": [
35+
"pnpm-lock.yaml"
36+
]
37+
},
38+
"lint": {
39+
"command": "nps \"lint:base *.js\"",
40+
"files": [
41+
"../../.eslintignore",
42+
"../../.eslintrc",
43+
"*.{js,jsx,ts,tsx}"
44+
],
45+
"output": [],
46+
"packageLocks": [
47+
"pnpm-lock.yaml"
48+
]
49+
},
50+
"lint:fix": {
51+
"command": "pnpm run lint || nps \"lint:base --fix *.js\"",
52+
"files": [
53+
"../../.eslintignore",
54+
"../../.eslintrc",
55+
"*.{js,jsx,ts,tsx}"
56+
],
57+
"output": [],
58+
"packageLocks": [
59+
"pnpm-lock.yaml"
60+
]
61+
},
62+
"prettier": {
63+
"command": "nps prettier:pkg -- -- \"*\"",
64+
"files": [
65+
"../../.prettierignore",
66+
"../../.prettierrc",
67+
"*.{js,html}"
68+
],
69+
"output": [],
70+
"packageLocks": [
71+
"pnpm-lock.yaml"
72+
]
73+
},
74+
"prettier:fix": {
75+
"command": "pnpm run prettier || nps prettier:pkg:fix -- -- \"*\"",
76+
"files": [
77+
"../../.prettierignore",
78+
"../../.prettierrc",
79+
"*.{js,html}"
80+
],
81+
"output": [],
82+
"packageLocks": [
83+
"pnpm-lock.yaml"
84+
]
85+
}
86+
}
87+
}

‎examples/mdx/slides.mdx

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import Test from './test-component';
2+
export const testProp = 50;
3+
4+
# Spectacle Presentation (MDX) 👋
5+
6+
This example uses:
7+
8+
- `mdx`
9+
- `@babel/preset-react` for the React components we import
10+
11+
Notes: These are presenter notes. This text will be automatically exported as `notes` from your MDX file (e.g. `import {notes} from './my-file.mdx'`).
12+
13+
---
14+
15+
## Yellow div from a JSX component
16+
17+
<Test height={testProp} />
18+
19+
Notes: here are some more notes.
20+
21+
---
22+
23+
# Write your Spectacle Presentations in Markdown
24+
25+
## And seamlessly use React Components
26+
27+
**How sweet is that**
28+
**(super sweet)**
29+
30+
---
31+
32+
![datboi](https://pbs.twimg.com/media/CkjFUyTXEAEysBY.jpg)
33+
34+
---
35+
36+
###### Typography
37+
38+
# Heading 1
39+
40+
## Heading 2
41+
42+
### Heading 3
43+
44+
#### Heading 4
45+
46+
##### Heading 5
47+
48+
###### Heading 6
49+
50+
Standard Text
51+
52+
---
53+
54+
> Example Quote
55+
56+
---
57+
58+
```jsx
59+
import { createClient, Provider } from 'urql';
60+
61+
const client = createClient({ url: 'https://0ufyz.sse.codesandbox.io' });
62+
63+
const App = () => (
64+
<Provider value={client}>
65+
<Todos />
66+
</Provider>
67+
);
68+
```

‎examples/mdx/test-component.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
const Test = ({ height }) => {
5+
return <div style={{ height, width: '100%', backgroundColor: 'yellow' }} />;
6+
};
7+
8+
Test.propTypes = {
9+
height: PropTypes.number.isRequired
10+
};
11+
12+
export default Test;

‎examples/mdx/webpack.config.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
const path = require('path');
2+
const HtmlWebpackPlugin = require('html-webpack-plugin');
3+
const base = require('../../webpack.config.base');
4+
5+
/**
6+
* Base configuration for the CLI, core, and examples.
7+
*/
8+
module.exports = {
9+
...base,
10+
mode: 'development',
11+
context: __dirname,
12+
entry: './index.js',
13+
output: {
14+
path: path.join(__dirname, 'dist'),
15+
filename: 'example.js'
16+
},
17+
externals: {},
18+
devtool: 'source-map',
19+
module: {
20+
...base.module,
21+
rules: [
22+
...base.module.rules,
23+
{
24+
test: /\.mdx$/,
25+
use: [
26+
require.resolve('babel-loader'),
27+
require.resolve('spectacle-mdx-loader')
28+
]
29+
}
30+
]
31+
},
32+
plugins: [
33+
...base.plugins,
34+
new HtmlWebpackPlugin({
35+
title: 'Spectacle MDX Development Example',
36+
template: `./index.html`
37+
})
38+
]
39+
};

‎package.json

+10
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
"changeset": "changeset",
5555
"start:js": "concurrently --raw pnpm:build:spectacle:esm:watch pnpm:build:spectacle:types:watch \"pnpm run --filter ./examples/js start\"",
5656
"start:md": "concurrently --raw pnpm:build:spectacle:esm:watch pnpm:build:spectacle:types:watch \"pnpm run --filter ./examples/md start\"",
57+
"start:mdx": "concurrently --raw pnpm:build:spectacle:esm:watch pnpm:build:spectacle:types:watch \"pnpm run --filter ./examples/mdx start\"",
5758
"start:ts": "concurrently --raw pnpm:build:spectacle:esm:watch pnpm:build:spectacle:types:watch \"pnpm run --filter ./examples/typescript start\"",
5859
"start:one-page": "concurrently --raw pnpm:build:spectacle:dev:watch pnpm:build:spectacle:types:watch",
5960
"start:examples": "concurrently --raw pnpm:build:spectacle:esm:watch pnpm:build:spectacle:dev:watch pnpm:build:spectacle:types:watch \"pnpm run --parallel --filter \\\"./examples/*\\\" start\"",
@@ -113,6 +114,7 @@
113114
"./packages/spectacle:build",
114115
"./examples/js:build",
115116
"./examples/md:build",
117+
"./examples/mdx:build",
116118
"./examples/one-page:build",
117119
"./examples/typescript:build"
118120
]
@@ -167,9 +169,11 @@
167169
"dependencies": [
168170
"./packages/spectacle:lint",
169171
"./packages/create-spectacle:lint",
172+
"./packages/spectacle-mdx-loader:lint",
170173
"./website:lint",
171174
"./examples/js:lint",
172175
"./examples/md:lint",
176+
"./examples/mdx:lint",
173177
"./examples/one-page:lint",
174178
"./examples/typescript:lint"
175179
]
@@ -178,9 +182,11 @@
178182
"dependencies": [
179183
"./packages/spectacle:lint:fix",
180184
"./packages/create-spectacle:lint:fix",
185+
"./packages/spectacle-mdx-loader:lint:fix",
181186
"./website:lint:fix",
182187
"./examples/js:lint:fix",
183188
"./examples/md:lint:fix",
189+
"./examples/mdx:lint:fix",
184190
"./examples/one-page:lint:fix",
185191
"./examples/typescript:lint:fix"
186192
]
@@ -227,9 +233,11 @@
227233
"dependencies": [
228234
"./packages/spectacle:prettier",
229235
"./packages/create-spectacle:prettier",
236+
"./packages/spectacle-mdx-loader:prettier",
230237
"./website:prettier",
231238
"./examples/js:prettier",
232239
"./examples/md:prettier",
240+
"./examples/mdx:prettier",
233241
"./examples/one-page:prettier",
234242
"./examples/typescript:prettier"
235243
]
@@ -238,9 +246,11 @@
238246
"dependencies": [
239247
"./packages/spectacle:prettier:fix",
240248
"./packages/create-spectacle:prettier:fix",
249+
"./packages/spectacle-mdx-loader:prettier:fix",
241250
"./website:prettier:fix",
242251
"./examples/js:prettier:fix",
243252
"./examples/md:prettier:fix",
253+
"./examples/mdx:prettier:fix",
244254
"./examples/one-page:prettier:fix",
245255
"./examples/typescript:prettier:fix"
246256
]

‎packages/spectacle-mdx-loader/CHANGELOG.md

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# spectacle-mdx-loader
2+
3+
## 0.1.1
4+
5+
- Update to `spectacle@6`.
6+
7+
## 0.1.0
8+
9+
- Move `examples/loader-mdx` to `examples/mdx` and publish for consumption by `spectacle-cli`.
10+
11+
## 0.0.1
12+
13+
- Initial release.

0 commit comments

Comments
 (0)