FormidableLabs · carloskelly13 · Feb 25, 2023 · Aug 26, 2022 · Aug 26, 2022 · Sep 16, 2022
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -32,7 +32,7 @@ We follow the convention of `start:NAME` to run an in-memory dev server for a sp
   - [`examples/typescript`](https://github.com/FormidableLabs/spectacle/tree/main/examples/typescript)
   - [`examples/one-page`](https://github.com/FormidableLabs/spectacle/tree/main/examples/one-page)
 - `spectacle-mdx-loader`
-  - [`examples/mdx`](https://github.com/FormidableLabs/spectacle-mdx-loader/tree/main/examples/mdx)
+  - [`examples/mdx`](https://github.com/FormidableLabs/spectacle/tree/main/examples/mdx)
 
 Here's how you can run the various examples:
 
@@ -49,6 +49,10 @@ $ open http://localhost:3100/
 $ pnpm start:md
 $ open http://localhost:3200/
 
+# MDX demo app (in two different terminals)
+$ pnpm start:mdx
+$ open http://localhost:3300/
+
 # One-page (no build, HTML page only) demo app (in two different terminals)
 $ pnpm start:one-page
 $ open examples/one-page/index.html

diff --git a/examples/mdx/.babelrc b/examples/mdx/.babelrc
@@ -0,0 +1,3 @@
+{
+  "extends": "../../.babelrc.js"
+}
diff --git a/examples/mdx/index.html b/examples/mdx/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/examples/mdx/index.js b/examples/mdx/index.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import { MDXProvider } from '@mdx-js/react';
+
+import {
+  Deck,
+  FlexBox,
+  Slide,
+  Box,
+  Progress,
+  FullScreen,
+  Notes,
+  mdxComponentMap
+} from 'spectacle';
+
+// SPECTACLE_CLI_MDX_START
+import slides, { notes } from './slides.mdx';
+// SPECTACLE_CLI_MDX_END
+
+// SPECTACLE_CLI_THEME_START
+const theme = {};
+// SPECTACLE_CLI_THEME_END
+
+// SPECTACLE_CLI_TEMPLATE_START
+const template = () => (
+  <FlexBox
+    justifyContent="space-between"
+    position="absolute"
+    bottom={0}
+    width={1}
+  >
+    <Box padding="0 1em">
+      <FullScreen />
+    </Box>
+    <Box padding="1em">
+      <Progress />
+    </Box>
+  </FlexBox>
+);
+// SPECTACLE_CLI_TEMPLATE_END
+
+const Presentation = () => (
+  <MDXProvider components={mdxComponentMap}>
+    <Deck loop theme={theme} template={template}>
+      {slides
+        .map((MDXSlide, i) => [MDXSlide, notes[i]])
+        .map(([MDXSlide, MDXNote], i) => (
+          <Slide key={`slide-${i}`} slideNum={i}>
+            <MDXSlide />
+            <Notes>
+              <MDXNote />
+            </Notes>
+          </Slide>
+        ))}
+    </Deck>
+  </MDXProvider>
+);
+
+render(<Presentation />, document.getElementById('root'));
diff --git a/examples/mdx/package.json b/examples/mdx/package.json
@@ -0,0 +1,71 @@
+{
+    "name": "spectacle-example-mdx",
+    "private": true,
+    "dependencies": {
+      "spectacle": "*",
+      "react": "^18.1.0",
+      "react-dom": "^18.1.0"
+    },
+    "devDependencies": {
+      "@mdx-js/react": "^1.5.3",
+      "prop-types": "^15.7.2",
+      "spectacle-mdx-loader": "*"
+    },
+    "scripts": {
+      "start": "webpack-dev-server --port=3300 --hot --config ./webpack.config.js",
+      "lint": "wireit",
+      "lint:fix": "wireit",
+      "prettier": "wireit",
+      "prettier:fix": "wireit"
+    },
+    "wireit": {
+      "lint": {
+        "command": "nps \"lint:base *.js\"",
+        "files": [
+          "../../.eslintignore",
+          "../../.eslintrc",
+          "*.{js,jsx,ts,tsx}"
+        ],
+        "output": [],
+        "packageLocks": [
+          "pnpm-lock.yaml"
+        ]
+      },
+      "lint:fix": {
+        "command": "pnpm run lint || nps \"lint:base --fix *.js\"",
+        "files": [
+          "../../.eslintignore",
+          "../../.eslintrc",
+          "*.{js,jsx,ts,tsx}"
+        ],
+        "output": [],
+        "packageLocks": [
+          "pnpm-lock.yaml"
+        ]
+      },
+      "prettier": {
+        "command": "nps prettier:pkg -- -- \"*\"",
+        "files": [
+          "../../.prettierignore",
+          "../../.prettierrc",
+          "*.{js,html}"
+        ],
+        "output": [],
+        "packageLocks": [
+          "pnpm-lock.yaml"
+        ]
+      },
+      "prettier:fix": {
+        "command": "pnpm run prettier || nps prettier:pkg:fix -- -- \"*\"",
+        "files": [
+          "../../.prettierignore",
+          "../../.prettierrc",
+          "*.{js,html}"
+        ],
+        "output": [],
+        "packageLocks": [
+          "pnpm-lock.yaml"
+        ]
+      }
+    }
+  }
diff --git a/examples/mdx/slides.mdx b/examples/mdx/slides.mdx
@@ -0,0 +1,64 @@
+import Test from './test-component';
+export const testProp = 50;
+
+# Spectacle Presentation (MDX) 👋
+
+This example uses:
+
+- `mdx`
+- `@babel/preset-react` for the React components we import
+
+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'`).
+
+---
+
+## Yellow div from a JSX component
+
+<Test height={testProp} />
+
+Notes: here are some more notes.
+
+---
+
+# Write your Spectacle Presentations in Markdown
+
+## And seamlessly use React Components
+
+**How sweet is that**
+**(super sweet)**
+
+---
+
+![datboi](https://pbs.twimg.com/media/CkjFUyTXEAEysBY.jpg)
+
+---
+
+###### Typography
+
+# Heading 1
+
+## Heading 2
+
+### Heading 3
+
+#### Heading 4
+
+##### Heading 5
+
+###### Heading 6
+
+Standard Text
+
+---
+
+> Example Quote
+
+---
+
+```jsx
+class SuperCoolComponent extends React.Component {
+  render() {
+    return <p>code slide works in markdown too whaaaaat</p>;
+  }
+}
+```
diff --git a/examples/mdx/test-component.js b/examples/mdx/test-component.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Test = ({ height }) => {
+  return <div style={{ height, width: '100%', backgroundColor: 'yellow' }} />;
+};
+
+Test.propTypes = {
+  height: PropTypes.number.isRequired
+};
+
+export default Test;
diff --git a/examples/mdx/webpack.config.js b/examples/mdx/webpack.config.js
@@ -0,0 +1,56 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const base = require('../../webpack.config.base');
+
+// Customized babel loader with the minimum we need to get `mdx` libraries
+// working, which unfortunately codegen JSX instead of JS.
+const babelLoader = {
+  loader: require.resolve('babel-loader')
+};
+
+/**
+ * Base configuration for the CLI, core, and examples.
+ */
+module.exports = {
+  ...base,
+  mode: 'development',
+  context: __dirname,
+  entry: './index.js',
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'example.js'
+  },
+  externals: {},
+  devtool: 'source-map',
+  module: {
+    // Not we use `require.resolve` to make sure to use the loader installed
+    // within _this_ project's `node_modules` traversal tree.
+    rules: [
+      {
+        test: /\.jsx?$/,
+        use: [babelLoader]
+      },
+      // `.md` files are processed as pure text.
+      {
+        test: /\.md$/,
+        use: [require.resolve('raw-loader')]
+      },
+      // `.mdx` files go through babel and mdx transforming loader.
+      {
+        test: /\.mdx$/,
+        use: [babelLoader, require.resolve('spectacle-mdx-loader')]
+      },
+      {
+        test: /\.(png|svg|jpg|gif)$/,
+        use: [require.resolve('file-loader')]
+      }
+    ]
+  },
+  plugins: [
+    ...base.plugins,
+    new HtmlWebpackPlugin({
+      title: 'Spectacle MDX Development Example',
+      template: `./index.html`
+    })
+  ]
+};
diff --git a/package.json b/package.json
@@ -55,6 +55,7 @@
     "changeset": "changeset",
     "start:js": "concurrently --raw pnpm:build:spectacle:esm:watch pnpm:build:spectacle:types:watch \"pnpm run --filter ./examples/js start\"",
     "start:md": "concurrently --raw pnpm:build:spectacle:esm:watch pnpm:build:spectacle:types:watch \"pnpm run --filter ./examples/md start\"",
+    "start:mdx": "concurrently --raw pnpm:build:spectacle:esm:watch pnpm:build:spectacle:types:watch \"pnpm run --filter ./examples/mdx start\"",
     "start:ts": "concurrently --raw pnpm:build:spectacle:esm:watch pnpm:build:spectacle:types:watch \"pnpm run --filter ./examples/typescript start\"",
     "start:one-page": "concurrently --raw pnpm:build:spectacle:dev:watch pnpm:build:spectacle:dev:watch",
     "start:examples": "concurrently --raw pnpm:build:spectacle:esm:watch pnpm:build:spectacle:dev:watch pnpm:build:spectacle:dev:watch \"pnpm run --parallel --filter \\\"./examples/*\\\" start\"",
@@ -168,9 +169,11 @@
       "dependencies": [
         "./packages/spectacle:lint",
         "./packages/create-spectacle:lint",
+        "./packages/spectacle-mdx-loader:lint",
         "./website:lint",
         "./examples/js:lint",
         "./examples/md:lint",
+        "./examples/mdx:lint",
         "./examples/one-page:lint",
         "./examples/typescript:lint"
       ]
@@ -179,9 +182,11 @@
       "dependencies": [
         "./packages/spectacle:lint:fix",
         "./packages/create-spectacle:lint:fix",
+        "./packages/spectacle-mdx-loader:lint:fix",
         "./website:lint:fix",
         "./examples/js:lint:fix",
         "./examples/md:lint:fix",
+        "./examples/mdx:lint:fix",
         "./examples/one-page:lint:fix",
         "./examples/typescript:lint:fix"
       ]
@@ -228,9 +233,11 @@
       "dependencies": [
         "./packages/spectacle:prettier",
         "./packages/create-spectacle:prettier",
+        "./packages/spectacle-mdx-loader:prettier",
         "./website:prettier",
         "./examples/js:prettier",
         "./examples/md:prettier",
+        "./examples/mdx:prettier",
         "./examples/one-page:prettier",
         "./examples/typescript:prettier"
       ]
@@ -239,9 +246,11 @@
       "dependencies": [
         "./packages/spectacle:prettier:fix",
         "./packages/create-spectacle:prettier:fix",
+        "./packages/spectacle-mdx-loader:prettier:fix",
         "./website:prettier:fix",
         "./examples/js:prettier:fix",
         "./examples/md:prettier:fix",
+        "./examples/mdx:prettier:fix",
         "./examples/one-page:prettier:fix",
         "./examples/typescript:prettier:fix"
       ]

diff --git a/packages/spectacle-mdx-loader/.gitignore b/packages/spectacle-mdx-loader/.gitignore
@@ -0,0 +1,7 @@
+node_modules
+package-lock.json
+dist
+*.log
+.DS_Store
+.vscode
+.examples-boilerplate
diff --git a/packages/spectacle-mdx-loader/LICENSE.txt b/packages/spectacle-mdx-loader/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2019 Formidable Labs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.