Skip to content

Commit 5730938

Browse files
codinsonncodinsonn
committed
feat: Add MDX support for Next.js
1 parent 0f027ef commit 5730938

File tree

10 files changed

+2746
-479
lines changed

10 files changed

+2746
-479
lines changed

‎apps/next/app/(public)/markdown/page.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
'use client'
2+
import MarkdownScreen from '@app/core/screens/MarkdownScreen'
3+
4+
export default MarkdownScreen

‎apps/next/next.config.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,20 @@
11
const { withExpo } = require("@expo/next-adapter");
2+
const withMDX = require("@next/mdx")();
23

34
/** @type {import('next').NextConfig} */
4-
const nextConfig = withExpo({
5+
const nextConfig = withMDX(withExpo({
56
reactStrictMode: true,
67
swcMinify: true,
78
transpilePackages: [
89
"react-native",
910
"react-native-web",
1011
"expo",
12+
"@bacons/mdx",
13+
"@bacons/react-views",
14+
"@expo/html-elements",
1115
// Add more React Native / Expo packages here...
1216
],
17+
pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdx"],
1318
typescript: {
1419
ignoreBuildErrors: true,
1520
},
@@ -24,6 +29,6 @@ const nextConfig = withExpo({
2429
}
2530
]
2631
}
27-
});
32+
}));
2833

2934
module.exports = nextConfig;

‎apps/next/package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,12 @@
33
"version": "1.0.0",
44
"private": true,
55
"dependencies": {
6+
"@mdx-js/loader": "^3.0.1",
7+
"@mdx-js/react": "^3.0.1",
8+
"@next/mdx": "^14.1.4",
9+
"@types/mdx": "^2.0.12",
610
"next": "~14.0.4"
711
},
8-
"devDependencies": {},
912
"scripts": {
1013
"dev": "next dev",
1114
"build": "next build",

‎features/app-core/mdx/MarkdownTheme.tsx‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import React from 'react'
2+
import { StyleSheet, View, Text } from 'react-native'
3+
import { MDXStyles, MDXComponents } from '@bacons/mdx'
4+
import { Link } from '../navigation/Link'
5+
import './markdown.theme.css' // Duplicate of the React-Native styles from this file
6+
7+
/* --- Types -------------------------------------------------------------------------------------- */
8+
9+
type MarkdownScreenProps = {
10+
children: React.ReactNode
11+
}
12+
13+
/* --- <MarkdownTheme/> --------------------------------------------------------------------------- */
14+
15+
const MarkdownTheme = ({ children }: MarkdownScreenProps) => {
16+
return (
17+
<View nativeID="markdown-theme">
18+
<MDXStyles
19+
h1={styles.h1}
20+
h2={styles.h2}
21+
p={styles.p}
22+
ul={styles.ul}
23+
li={styles.li}
24+
blockquote={styles.blockquote}
25+
a={styles.link}
26+
>
27+
<MDXComponents
28+
h1={(props) => <Text {...props} style={{ ...styles.h1 }} />}
29+
h2={(props) => <Text {...props} style={{ ...styles.h2 }} />}
30+
p={(props) => <Text {...props} style={{ ...styles.p }} />}
31+
ul={(props) => <View {...props} style={{ ...styles.ul }} />}
32+
li={(props) => <Text {...props} style={{ ...styles.li }} />}
33+
blockquote={(props) => <View {...props} style={{ ...styles.blockquote }} />} // prettier-ignore
34+
a={(props) => <Link {...props} style={{ ...styles.link }} />}
35+
>
36+
{children}
37+
</MDXComponents>
38+
</MDXStyles>
39+
</View>
40+
)
41+
}
42+
43+
/* --- Styles ---------------------------------------------------------------------------------- */
44+
// -i- These styles won't work in Next.js for some reason, duplicate them in markdown.theme.css
45+
46+
const styles = StyleSheet.create({
47+
h1: {
48+
fontSize: 24,
49+
fontWeight: 'bold',
50+
marginBottom: 16,
51+
},
52+
h2: {
53+
fontSize: 20,
54+
fontWeight: 'bold',
55+
marginBottom: 16,
56+
},
57+
p: {
58+
fontSize: 16,
59+
marginBottom: 16,
60+
lineHeight: 22,
61+
},
62+
ul: {
63+
padding: 0,
64+
},
65+
li: {
66+
fontSize: 16,
67+
marginBottom: 16,
68+
lineHeight: 22,
69+
},
70+
blockquote: {
71+
borderLeftColor: 'lightgray',
72+
borderStyle: 'solid',
73+
borderLeftWidth: 6,
74+
fontSize: 16,
75+
paddingLeft: 16,
76+
paddingTop: 4,
77+
lineHeight: 22,
78+
},
79+
link: {
80+
marginTop: 16,
81+
fontSize: 16,
82+
color: 'blue',
83+
textAlign: 'center',
84+
textDecorationLine: 'underline',
85+
},
86+
})
87+
88+
/* --- Exports --------------------------------------------------------------------------------- */
89+
90+
export default MarkdownTheme

‎features/app-core/mdx/markdown.theme.css‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
2+
/* --- Resets ---------------------------------------------------------------------------------- */
3+
4+
ul {
5+
padding-inline-start: 0px;
6+
list-style: none;
7+
}
8+
9+
blockquote {
10+
margin: 0;
11+
padding: 0;
12+
}
13+
14+
/* --- Markdown theme -------------------------------------------------------------------------- */
15+
/* -i- duplicate from 'MarkdownTheme.tsx', keep them in sync */
16+
17+
#markdown-theme h1 {
18+
font-size: 24px;
19+
font-weight: bold;
20+
margin-bottom: 16px;
21+
}
22+
23+
#markdown-theme h2 {
24+
font-size: 20px;
25+
font-weight: bold;
26+
margin-bottom: 16px;
27+
}
28+
29+
#markdown-theme p {
30+
font-size: 16px;
31+
margin-bottom: 16px;
32+
line-height: 22px;
33+
}
34+
35+
#markdown-theme ul {
36+
padding: 0;
37+
}
38+
39+
#markdown-theme li {
40+
font-size: 16px;
41+
margin-bottom: 16px;
42+
line-height: 22px;
43+
}
44+
45+
#markdown-theme blockquote {
46+
border-width: 0;
47+
border-style: solid;
48+
border-left-color: lightgray;
49+
border-left-width: 6px;
50+
font-size: 16px;
51+
padding-left: 16px;
52+
padding-top: 4px;
53+
line-height: 22px;
54+
}
55+
56+
#markdown-theme a {
57+
margin-top: 16px;
58+
font-size: 16px;
59+
color: blue;
60+
text-align: center;
61+
text-decoration: underline;
62+
}

‎features/app-core/mdx/readme.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,4 @@ It's a good starting point if you want to:
1717
- ✅ have a _minimal monorepo setup_ with Typescript but no monorepo tool yet
1818
- ✅ leave *all other tech choices* for e.g. styling, dbs, component libs, etc. *up to you*
1919

20-
> Need a more robust, Fully-Stacked, Full-Product, Universal App Setup? Check out **[Aetherspace](https://github.com/Aetherspace/green-stack-starter-demo#readme)**
20+
> Need a more robust, Fully-Stacked, Full-Product, Universal App Setup? Check out **[FullProduct.dev](https://fullproduct.dev) ⚡️**

‎features/app-core/screens/MarkdownScreen.tsx‎

Lines changed: 13 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react'
22
import { StyleSheet, View } from 'react-native'
3-
import { MDXStyles } from '@bacons/mdx'
43
import { Link } from '../navigation/Link' // @ts-ignore
54
import ReadMe from '../mdx/readme.mdx'
5+
import MarkdownTheme from '../mdx/MarkdownTheme'
66

77
/* --- <MarkdownScreen/> --------------------------------------------------------------------------- */
88

@@ -15,16 +15,11 @@ const MarkdownScreen = () => {
1515
>
1616
{`< Back`}
1717
</Link>
18-
<MDXStyles
19-
h1={styles.h1}
20-
h2={styles.h2}
21-
p={styles.p}
22-
li={styles.li}
23-
blockquote={styles.blockquote}
24-
a={styles.link}
25-
>
26-
<ReadMe />
27-
</MDXStyles>
18+
<View style={styles.markdownWrapper}>
19+
<MarkdownTheme>
20+
<ReadMe />
21+
</MarkdownTheme>
22+
</View>
2823
</View>
2924
)
3025
}
@@ -35,9 +30,15 @@ const styles = StyleSheet.create({
3530
container: {
3631
flex: 1,
3732
justifyContent: 'center',
38-
alignItems: 'flex-start',
33+
alignItems: 'center',
3934
padding: 24,
4035
},
36+
markdownWrapper: {
37+
width: '100%',
38+
position: 'relative',
39+
alignItems: 'flex-start',
40+
maxWidth: 600,
41+
},
4142
backButton: {
4243
position: 'absolute',
4344
top: 16,
@@ -49,35 +50,6 @@ const styles = StyleSheet.create({
4950
fontSize: 16,
5051
textAlign: 'center',
5152
},
52-
h1: {
53-
fontSize: 24,
54-
fontWeight: 'bold',
55-
marginBottom: 16,
56-
},
57-
h2: {
58-
fontSize: 20,
59-
fontWeight: 'bold',
60-
marginBottom: 16,
61-
},
62-
p: {
63-
fontSize: 16,
64-
marginBottom: 16,
65-
lineHeight: 22,
66-
},
67-
li: {
68-
fontSize: 16,
69-
marginBottom: 16,
70-
lineHeight: 22,
71-
},
72-
blockquote: {
73-
borderLeftColor: 'lightgray',
74-
borderStyle: 'solid',
75-
borderLeftWidth: 6,
76-
fontSize: 16,
77-
paddingLeft: 16,
78-
paddingTop: 4,
79-
lineHeight: 22,
80-
},
8153
link: {
8254
marginTop: 16,
8355
fontSize: 16,

0 commit comments

Comments
 (0)