Add mdx support and playground

.eslintignore

@@ -3,3 +3,4 @@ dist
 coverage
 .next
 .eslintrc.js
+next.config.js

.vscode/extensions.json

@@ -1,6 +1,8 @@
 {
   "recommendations": [
     "dbaeumer.vscode-eslint",
-    "humao.rest-client"
+    "humao.rest-client",
+    "silvenon.mdx",
+    "xyc.vscode-mdx-preview"
   ]
 }

.vscode/settings.json

@@ -28,4 +28,7 @@
   },
   "python.linting.pylintEnabled": true,
   "python.linting.enabled": true,
+  "files.exclude": {
+    "node_modules": true
+  },
 }

components/playground.module.css

@@ -0,0 +1,12 @@
+.playground {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 0;
+  width: 250px;
+  height: 250px;
+  border-radius: 50%;
+  border: 2px solid #333;
+  background-color: #ddd;
+}

components/playground.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import styles from "./playground.module.css";
+
+export function Playground() {
+  return (
+    <ul className={styles.playground}>
+      <li>Some</li>
+      <li>React</li>
+      <li>Content</li>
+    </ul>
+  );
+}

next.config.js

@@ -0,0 +1,7 @@
+const withMDX = require('@next/mdx')({
+  extension: /\.mdx$/
+})
+
+module.exports = withMDX({
+  pageExtensions: ['ts', 'tsx', 'mdx']
+})

package.json

@@ -7,6 +7,9 @@
     "start": "next start"
   },
   "dependencies": {
+    "@mdx-js/loader": "^1.6.22",
+    "@mdx-js/react": "^1.6.22",
+    "@next/mdx": "^10.1.3",
     "date-fns": "^2.11.1",
     "gray-matter": "^4.0.2",
     "next": "^10.0.0",
@@ -16,6 +19,7 @@
     "remark-html": "^12.0.0"
   },
   "devDependencies": {
+    "@types/mdx-js__react": "^1.5.3",
     "@types/node": "^14.14.41",
     "@types/react": "^17.0.3",
     "@typescript-eslint/eslint-plugin": "^4.22.0",

pages/_app.tsx

@@ -1,6 +1,11 @@
 import React from "react";
 import { AppProps } from "next/app";
+import { MDXProvider } from "@mdx-js/react";
 
 export default function App({ Component, pageProps }: AppProps): JSX.Element {
-  return <Component {...pageProps} />;
+  return (
+    <MDXProvider components={{}}>
+      <Component {...pageProps} />
+    </MDXProvider>
+  );
 }

pages/index.mdx

@@ -0,0 +1,14 @@
+# Home page
+
+Let's write some markdown.
+
+- foo
+- bar
+- baz
+
+## Subtopic
+
+More stuff
+
+1. hello
+1. world

pages/index.tsx

@@ -1,6 +0,0 @@
-import React from "react";
-import styles from "./index.module.css";
-
-export default function Home() {
-  return <div className={styles.Foo}>This is the home page</div>;
-}

pages/playground.mdx

@@ -0,0 +1,11 @@
+import {Playground} from '../components/playground'
+
+# Playground
+
+- _Some_
+- **Markdown**
+- [Content](https://csclub.uwaterloo.ca)
+
+---
+
+<Playground />