Aditya Thakral
|
44621b2daf
|
Add next-mdx-remote (#82)
continuous-integration/drone/push Build is passing
Details
Closes #80
# Example
```ts
// lib/events.ts
import matter from "gray-matter";
import { serialize } from "next-mdx-remote/serialize";
export async function getEvent() {
// you should use the "fs" nodejs api here
const fileAfterReading = `
---
title: A title
online: false
location: MC
---
## Alt Tab
Wooohooo
`.trim();
const { content, data } = matter(fileAfterReading);
const serialized = await serialize(content, { scope: data });
return { serialized, data };
}
```
```tsx
// your-page.tsx
import { GetStaticProps } from "next";
import { MDXRemote } from "next-mdx-remote";
import React from "react";
import { getEvent } from "lib/events";
export default function MyPage(props) {
return (
<>
<div>
{...other stuff}
</div>
<MDXRemote {...props.serialized} />
</>
);
}
export const getStaticProps: GetStaticProps = async () => {
const { serialized, data } = await getEvent();
return {
props: {
serialized,
data,
},
};
};
```
Reviewed-on: #82
Reviewed-by: n3parikh <n3parikh@localhost>
Co-authored-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Co-committed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
|
2021-07-11 16:07:55 -04:00 |