You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: xmdx/demo/cake.mdx
+90-38Lines changed: 90 additions & 38 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,27 +8,27 @@
8
8
/>
9
9
10
10
```srt
11
-
0.5 –> 6
11
+
1.9 –> 6.8
12
12
Let's start with this markdown file
13
13
I'm assuming we all know markdown
14
-
6 –> 15
14
+
6.6 –> 12
15
15
there's a reason why it's so popular,
16
-
the syntax is so clean
17
-
15 –> 22.5
16
+
it has a very clean syntax
17
+
12 –> 17.1
18
18
I'm sure I'm not the only one who likes
19
19
to move as much content as possible to markdown
20
-
22.5 –> 27.5
20
+
17.1 –> 20.7
21
21
even content that doesn't originally
22
22
belong to markdown
23
-
27.5 –> 29.9
23
+
20.7 –> 23.7
24
24
And that's why we have MDX, right?
25
-
29.9 –> 36
25
+
23.7 –> 31.4
26
26
we had to extend the original format
27
27
so we could put more things on it
28
-
36 –> 39.8
28
+
31.4 –> 34
29
29
In this talk,
30
30
we'll take this to the extreme,
31
-
39.8 –> 48
31
+
34 –> 39
32
32
we'll use MDX for more
33
33
unusual content and layouts.
34
34
```
@@ -45,11 +45,11 @@ unusual content and layouts.
45
45
/>
46
46
47
47
```srt
48
-
0.3 –> 3.9
48
+
0.3 –> 3.7
49
49
But first I need to show you how this works
50
-
3.9 –> 8
50
+
3.7 –> 7.9
51
51
we are going to start with this small react app
52
-
8 –> 16
52
+
8 –> 14
53
53
this is using Next.js but the same applies to
54
54
any app that has the MDX loader
55
55
```
@@ -66,6 +66,17 @@ any app that has the MDX loader
66
66
tabs={["demo/hello.md", "pages/hello.js"]}
67
67
/>
68
68
69
+
```srt
70
+
0.2 -> 3.9
71
+
most of the magic comes from this import
72
+
3.9 -> 11.5
73
+
here the MDX loader transforms the markdown file
74
+
into a React component that we can use anywhere
75
+
11.5 -> 17
76
+
and, you can see, it renders
77
+
what you expect here on the right
78
+
```
79
+
69
80
---
70
81
71
82
<Videosrc="003.webm"start={0}end={20.03} />
@@ -78,11 +89,15 @@ any app that has the MDX loader
78
89
/>
79
90
80
91
```srt
81
-
If we want to change what's rendered, we can use the MDXProvider component.
82
-
83
-
It has a components prop, that let us override any of the default components.
84
-
85
-
For example, here we are changing all the h1s, adding a purple border.
92
+
0.2 -> 6.5
93
+
if we want to change what's rendered,
94
+
we can use the MDXProvider component
95
+
6.5 -> 13.7
96
+
it has a components prop,
97
+
that let us override any of the default components
98
+
13.7 -> 20
99
+
for example, here we are changing all the h1s,
100
+
and adding a purple border
86
101
```
87
102
88
103
---
@@ -98,11 +113,18 @@ For example, here we are changing all the h1s, adding a purple border.
98
113
/>
99
114
100
115
```srt
101
-
A special component we can override is the Wrapper.
102
-
103
-
The wrapper is the component that wraps the content. Here we are just adding a border to it.
104
-
105
-
But the cool thing about this component is that in the children prop, we get all the content from the markdown file as React elements.
116
+
1.5 -> 5.1
117
+
A special component we can override
118
+
is the Wrapper
119
+
5.1 -> 16.5
120
+
the wrapper is the component that wraps the content,
121
+
here we are just adding a border to it
122
+
16.5 -> 20.5
123
+
but the cool thing about this component
124
+
is that in the children prop
125
+
20.5 -> 26.3
126
+
we get all the content from the markdown file
127
+
as React elements
106
128
```
107
129
108
130
---
@@ -118,15 +140,27 @@ But the cool thing about this component is that in the children prop, we get all
118
140
/>
119
141
120
142
```srt
121
-
And React elements are just javascript objects.
122
-
123
-
So here you can see what's inside the children prop.
124
-
125
-
We are rendering the wrapper children as JSON, and filtering some properties to make it easier to read.
126
-
127
-
You'll see that it is an array. The first element is an h1, the second a paragraph.
128
-
129
-
Each element comes with an mdxType, we can, and we will, use that mdxType to extract information about the content or to change the elements.
143
+
0.3 -> 3.9
144
+
and React elements are just javascript objects
145
+
3.9 -> 8.2
146
+
so here you can see what's inside the children prop
147
+
8.2 -> 11.8
148
+
we are rendering the wrapper children as JSON
149
+
11.8 -> 16.4
150
+
and filtering some properties
151
+
to make it easier to read
152
+
16.4 -> 20.45
153
+
you'll see that it is an array
154
+
20.45 -> 24.4
155
+
the first element is an h1,
156
+
the second a paragraph
157
+
24.4 -> 28.5
158
+
each element comes with an mdxType,
159
+
28.5 -> 34.5
160
+
we can, and we will, use that mdxType to
161
+
extract information about the content
162
+
34.5 -> 36.6
163
+
or to change the elements
130
164
```
131
165
132
166
---
@@ -142,13 +176,31 @@ Each element comes with an mdxType, we can, and we will, use that mdxType to ext
142
176
/>
143
177
144
178
```srt
145
-
For example, we could get a list of all the H1s from the children, and render it as a table of contents.
146
-
147
-
This is a simple example, but it illustrates the pattern we are going to use on the rest of the examples.
148
-
149
-
In all of them, first, we extract some data from the children, and then we render it in a specific way.
150
-
151
-
Keep in mind that this runs on every render. In most cases, it isn't a performance problem, but if it is, you can move it to a plugin, and run the transformation on build-time.
0 commit comments