1
00:00:03,000 --> 00:00:04,406
Ok, we've extracted

2
00:00:04,406 --> 00:00:06,700
the logic to read the post file

3
00:00:06,700 --> 00:00:08,032
in its own module.

4
00:00:08,681 --> 00:00:10,661
But we're still reading the data

5
00:00:10,661 --> 00:00:11,713
from a JSON file,

6
00:00:12,275 --> 00:00:14,891
rather than from the Markdown file,

7
00:00:14,891 --> 00:00:16,985
which was our ultimate goal.

8
00:00:16,985 --> 00:00:18,256
To be able to use

9
00:00:18,256 --> 00:00:20,125
the contents of this file

10
00:00:20,125 --> 00:00:23,265
we need a way to parse the Markdown format

11
00:00:23,265 --> 00:00:25,134
and transform it to HTML,

12
00:00:25,134 --> 00:00:27,900
that we'll then insert into our page.

13
00:00:28,849 --> 00:00:30,886
There are quite a few libraries

14
00:00:30,886 --> 00:00:32,398
available in JavaScript

15
00:00:32,398 --> 00:00:33,844
to work with Markdown.

16
00:00:33,844 --> 00:00:35,750
In this example we'll use one

17
00:00:35,750 --> 00:00:36,801
called "Marked",

18
00:00:36,801 --> 00:00:38,379
that's very easy to use.

19
00:00:39,208 --> 00:00:40,378
Let's see how it works.

20
00:00:42,208 --> 00:00:43,753
For a start we'll need to

21
00:00:43,753 --> 00:00:45,051
install that library,

22
00:00:45,051 --> 00:00:47,092
so let me open the "package.json"

23
00:00:47,092 --> 00:00:49,008
where we have our dependencies.

24
00:00:49,694 --> 00:00:50,899
Let's open the terminal,

25
00:00:52,827 --> 00:00:54,115
and stop the dev server,

26
00:00:55,327 --> 00:00:58,055
because we need to run "npm install"

27
00:00:58,055 --> 00:01:00,632
and download the "marked" package.

28
00:01:01,208 --> 00:01:03,373
Ok. Now I want to show you quickly

29
00:01:03,373 --> 00:01:04,837
how that library works,

30
00:01:05,402 --> 00:01:07,373
and I'll do that by starting

31
00:01:07,373 --> 00:01:09,275
an interactive Node prompt.

32
00:01:09,846 --> 00:01:13,048
Let's start by importing the "marked" module,

33
00:01:13,048 --> 00:01:16,108
and I'm using "require" instead of "import"

34
00:01:16,108 --> 00:01:18,243
just because import statements

35
00:01:18,243 --> 00:01:19,879
are still not supported

36
00:01:19,879 --> 00:01:22,228
when running Node.js in this way.

37
00:01:23,013 --> 00:01:25,695
But once we have the "marked" function

38
00:01:25,695 --> 00:01:28,166
we can use it to generate some HTML

39
00:01:28,166 --> 00:01:29,789
from a Markdown string.

40
00:01:30,431 --> 00:01:32,905
Let's write a Markdown header for example,

41
00:01:34,897 --> 00:01:36,803
and if we print that HTML,

42
00:01:38,063 --> 00:01:40,414
you can see that it generated

43
00:01:40,414 --> 00:01:42,360
an "h1" heading in HTML.

44
00:01:42,942 --> 00:01:44,598
So it's very very simple to use.

45
00:01:45,475 --> 00:01:47,084
Now let's restart our

46
00:01:47,084 --> 00:01:48,541
Next.js dev server,

47
00:01:50,041 --> 00:01:52,208
and let's go and use that library

48
00:01:52,208 --> 00:01:53,719
to read Markdown files.

49
00:01:54,441 --> 00:01:56,291
So in this file we first want to

50
00:01:56,291 --> 00:01:57,910
import the "marked" function

51
00:01:59,674 --> 00:02:01,730
from the module with the same name.

52
00:02:02,230 --> 00:02:04,462
Now, reading the "data" from the file

53
00:02:04,462 --> 00:02:06,030
will work in the same way,

54
00:02:06,591 --> 00:02:08,430
except that we want to read

55
00:02:08,430 --> 00:02:11,018
a Markdown file instead of a JSON one.

56
00:02:11,587 --> 00:02:15,130
At this point we want to transform that "data",

57
00:02:15,130 --> 00:02:17,091
that is a Markdown string,

58
00:02:17,091 --> 00:02:18,825
to HTML using "marked".

59
00:02:19,620 --> 00:02:22,287
And I think I'm going to rename this variable,

60
00:02:22,287 --> 00:02:24,259
because "data" is a bit too vague.

61
00:02:24,817 --> 00:02:27,073
Let's call it "source" instead,

62
00:02:27,073 --> 00:02:29,039
as in, the Markdown source.

63
00:02:29,611 --> 00:02:32,219
Now, we no longer need to parse any JSON,

64
00:02:32,719 --> 00:02:34,187
but we still need to return

65
00:02:34,187 --> 00:02:35,273
an object from here.

66
00:02:36,152 --> 00:02:38,091
Because that's what we expect

67
00:02:38,091 --> 00:02:39,897
where we use the post data.

68
00:02:40,463 --> 00:02:42,336
If you remember in the page

69
00:02:42,336 --> 00:02:43,723
we expect the "post"

70
00:02:43,723 --> 00:02:45,873
to have a "title" and a "body".

71
00:02:46,512 --> 00:02:49,240
So the "getPost" function should return

72
00:02:49,240 --> 00:02:51,759
an object with those two properties.

73
00:02:51,759 --> 00:02:54,068
But here we have a small problem,

74
00:02:54,068 --> 00:02:56,097
in that we parse the Markdown

75
00:02:56,097 --> 00:02:58,196
into a single "html" variable.

76
00:02:58,975 --> 00:03:01,451
So we could return the "html"

77
00:03:01,451 --> 00:03:03,670
as the "body" of the post.

78
00:03:04,256 --> 00:03:06,617
But right now we don't really have

79
00:03:06,617 --> 00:03:08,632
a separate "title" to return.

80
00:03:09,201 --> 00:03:10,462
That's ok for now.

81
00:03:10,462 --> 00:03:12,492
We'll see how to add metadata

82
00:03:12,492 --> 00:03:15,223
to our Markdown file in the next video.

83
00:03:15,223 --> 00:03:17,324
For the time being the "title"

84
00:03:17,324 --> 00:03:18,654
will just be empty,

85
00:03:18,654 --> 00:03:19,985
which is not ideal,

86
00:03:19,985 --> 00:03:22,015
but shouldn't break anything.

87
00:03:22,936 --> 00:03:24,464
So let's save these changes

88
00:03:24,464 --> 00:03:26,162
and see what's being displayed

89
00:03:26,162 --> 00:03:27,067
in the page now.

90
00:03:28,135 --> 00:03:29,247
You can see that

91
00:03:29,247 --> 00:03:31,469
it's clearly reading the content

92
00:03:31,469 --> 00:03:33,066
from our Markdown file,

93
00:03:33,066 --> 00:03:34,871
and converting it to HTML.

94
00:03:34,871 --> 00:03:36,191
The problem is that

95
00:03:36,191 --> 00:03:39,385
it's actually displaying the HTML source code,

96
00:03:39,385 --> 00:03:41,121
rather than rendering it.

97
00:03:42,037 --> 00:03:43,518
And that's because,

98
00:03:43,518 --> 00:03:45,154
in our page component

99
00:03:45,154 --> 00:03:48,426
we're currently displaying the "post.body"

100
00:03:48,426 --> 00:03:51,230
as the child of a paragraph element.

101
00:03:51,230 --> 00:03:52,789
So React will escape

102
00:03:52,789 --> 00:03:54,892
any special HTML characters

103
00:03:54,892 --> 00:03:57,697
contained in the "post.body" string.

104
00:03:57,697 --> 00:04:00,501
But in this case we actually want to

105
00:04:00,501 --> 00:04:03,617
insert the "post.body" directly as HTML.

106
00:04:03,617 --> 00:04:05,331
So how can we do that?

107
00:04:06,532 --> 00:04:08,269
Let's remove this paragraph,

108
00:04:08,269 --> 00:04:10,689
since our "post.body" could potentially

109
00:04:10,689 --> 00:04:12,425
contain multiple paragraphs.

110
00:04:13,049 --> 00:04:15,578
Let's use an "article" element instead

111
00:04:15,578 --> 00:04:17,374
to contain the "post.body",

112
00:04:17,374 --> 00:04:19,968
which is semantically more appropriate.

113
00:04:20,601 --> 00:04:22,624
Now, React provides a way

114
00:04:22,624 --> 00:04:25,942
to insert HTML directly inside an element

115
00:04:25,942 --> 00:04:27,722
by using a prop called

116
00:04:27,722 --> 00:04:29,826
"dangerouslySetInnerHTML".

117
00:04:29,826 --> 00:04:31,849
And it's called like that

118
00:04:31,849 --> 00:04:34,519
because setting the HTML directly

119
00:04:34,519 --> 00:04:38,322
can be dangerous from a security point of view.

120
00:04:38,322 --> 00:04:40,749
If the HTML we're setting here

121
00:04:40,749 --> 00:04:43,986
comes from content entered by our users,

122
00:04:43,986 --> 00:04:47,142
they could use this to inject "scripts"

123
00:04:47,142 --> 00:04:48,274
into our page.

124
00:04:48,274 --> 00:04:50,621
But in this case we know that

125
00:04:50,621 --> 00:04:52,967
the content always comes from

126
00:04:52,967 --> 00:04:55,314
Markdown files that we wrote,

127
00:04:55,314 --> 00:04:57,499
so it's not a problem here.

128
00:04:59,131 --> 00:05:01,719
Now, to set this prop we need to pass

129
00:05:01,719 --> 00:05:03,118
a JavaScript object,

130
00:05:03,118 --> 00:05:05,285
that's inside a JSX expression,

131
00:05:05,285 --> 00:05:08,013
so you end up with double curly braces.

132
00:05:08,722 --> 00:05:11,604
This object must have a property

133
00:05:11,604 --> 00:05:13,045
called "__html",

134
00:05:13,635 --> 00:05:15,110
and this is where we pass

135
00:05:15,110 --> 00:05:16,585
our "post.body" variable.

136
00:05:17,143 --> 00:05:20,209
React makes this deliberately convoluted

137
00:05:20,209 --> 00:05:22,355
because they want developers

138
00:05:22,355 --> 00:05:24,118
to think very carefully

139
00:05:24,118 --> 00:05:27,107
before setting the inner HTML directly.

140
00:05:27,836 --> 00:05:29,225
Anyway, if we save this now,

141
00:05:29,725 --> 00:05:31,925
you can see that the page displays

142
00:05:31,925 --> 00:05:33,672
the content as we expected.

143
00:05:34,236 --> 00:05:36,912
So it rendered the Markdown we had

144
00:05:36,912 --> 00:05:38,171
in our post file

145
00:05:38,171 --> 00:05:39,588
in a suitable way.

146
00:05:39,588 --> 00:05:41,791
The Markdown header is shown

147
00:05:41,791 --> 00:05:44,152
as a "h1" heading in the page,

148
00:05:44,152 --> 00:05:46,828
the text within double underscores

149
00:05:46,828 --> 00:05:48,874
is displayed as bold text,

150
00:05:48,874 --> 00:05:49,661
and so on.

151
00:05:50,711 --> 00:05:52,703
Ok. So now that we are finally

152
00:05:52,703 --> 00:05:55,358
using the content from the Markdown file

153
00:05:55,925 --> 00:05:58,051
we can delete this JSON file

154
00:05:58,051 --> 00:06:00,862
that we wrote just as stepping stone.

155
00:06:01,437 --> 00:06:04,824
To recap, we added the Marked library

156
00:06:04,824 --> 00:06:07,753
to parse the Markdown into HTML,

157
00:06:07,753 --> 00:06:11,506
and we're using "dangerouslySetInnerHTML"

158
00:06:11,506 --> 00:06:15,534
to display that HTML directly into the page.