Browse Source

Add mdx support and playground

pull/44/head
Aditya Thakral 1 year ago
parent
commit
91ee5e5d95
  1. 3
      .eslintignore
  2. 4
      .vscode/extensions.json
  3. 3
      .vscode/settings.json
  4. 12
      components/playground.module.css
  5. 12
      components/playground.tsx
  6. 7
      next.config.js
  7. 1842
      package-lock.json
  8. 4
      package.json
  9. 7
      pages/_app.tsx
  10. 14
      pages/index.mdx
  11. 6
      pages/index.tsx
  12. 11
      pages/playground.mdx

3
.eslintignore

@ -2,4 +2,5 @@ node_modules
dist
coverage
.next
.eslintrc.js
.eslintrc.js
next.config.js

4
.vscode/extensions.json vendored

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

3
.vscode/settings.json vendored

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

12
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;
}

12
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>
);
}

7
next.config.js

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

1842
package-lock.json generated

File diff suppressed because it is too large Load Diff

4
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",

7
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>
);
}

14
pages/index.mdx

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

6
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>;
}

11
pages/playground.mdx

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