1
00:00:03,000 --> 00:00:05,674
In our post page we're now displaying

2
00:00:05,674 --> 00:00:08,131
the content from our Markdown file

3
00:00:08,131 --> 00:00:10,010
as the "body" of the post.

4
00:00:10,655 --> 00:00:13,818
But we're missing a separate "title" property

5
00:00:13,818 --> 00:00:16,771
as we can notice in the browser tab title.

6
00:00:17,342 --> 00:00:20,290
That's because when we parse the Markdown

7
00:00:20,290 --> 00:00:23,454
we get the result as a single "html" string.

8
00:00:24,026 --> 00:00:26,309
So how could we extract the title

9
00:00:26,309 --> 00:00:27,900
from our Markdown file?

10
00:00:28,470 --> 00:00:30,554
The best approach is to add

11
00:00:30,554 --> 00:00:32,871
a "front matter" to this file.

12
00:00:32,871 --> 00:00:35,111
The "front matter" is a block

13
00:00:35,111 --> 00:00:37,195
at the beginning of a file,

14
00:00:37,195 --> 00:00:39,667
delimited by triple minus signs,

15
00:00:39,667 --> 00:00:42,755
and it contains metadata in YAML format.

16
00:00:43,642 --> 00:00:45,979
So we can use this block to define

17
00:00:45,979 --> 00:00:48,868
arbitrary properties related to this file,

18
00:00:48,868 --> 00:00:50,518
for example the "title".

19
00:00:50,518 --> 00:00:52,031
This way we'll be able

20
00:00:52,031 --> 00:00:53,887
to extract these properties

21
00:00:53,887 --> 00:00:56,432
separately from the rest of the file.

22
00:00:57,276 --> 00:00:59,572
Now, if we define the title separately

23
00:00:59,572 --> 00:01:01,144
we don't need to repeat it

24
00:01:01,144 --> 00:01:02,837
in the main content as well,

25
00:01:03,458 --> 00:01:04,861
so let's remove this header.

26
00:01:05,724 --> 00:01:07,772
The question at this point is

27
00:01:07,772 --> 00:01:10,174
how do we extract those properties

28
00:01:10,174 --> 00:01:11,658
from the front matter

29
00:01:11,658 --> 00:01:13,354
where we read that file?

30
00:01:13,354 --> 00:01:16,462
We'll need to change this logic a little bit

31
00:01:16,462 --> 00:01:18,723
to first parse the front matter,

32
00:01:18,723 --> 00:01:20,772
and then render the Markdown.

33
00:01:21,695 --> 00:01:23,534
And to parse the front matter

34
00:01:23,534 --> 00:01:25,183
we'll use another library,

35
00:01:25,183 --> 00:01:26,515
called "gray-matter".

36
00:01:27,141 --> 00:01:28,278
Let's look at an example.

37
00:01:29,408 --> 00:01:31,346
Given a string that starts with

38
00:01:31,346 --> 00:01:32,658
a front matter block,

39
00:01:32,658 --> 00:01:34,346
and then some other content

40
00:01:34,972 --> 00:01:37,122
"gray-matter" will return an object

41
00:01:37,122 --> 00:01:39,273
containing both the main "content",

42
00:01:39,835 --> 00:01:42,442
and a "data" object with the properties

43
00:01:42,442 --> 00:01:44,314
defined in the front matter.

44
00:01:44,881 --> 00:01:46,474
Let's keep this in mind

45
00:01:46,474 --> 00:01:49,590
as we go and use that library in our project.

46
00:01:50,914 --> 00:01:53,846
First of all we'll need to install that package,

47
00:01:53,846 --> 00:01:54,396
as usual.

48
00:01:57,014 --> 00:01:58,836
So I'm going to stop the dev server,

49
00:01:59,336 --> 00:02:02,177
and run "npm install gray-matter".

50
00:02:05,369 --> 00:02:07,308
Let's re-start the dev server again,

51
00:02:09,134 --> 00:02:11,442
and go back to our JavaScript code.

52
00:02:11,942 --> 00:02:14,549
In this file we want to import that library.

53
00:02:15,049 --> 00:02:16,934
Let's call it simply "matter",

54
00:02:16,934 --> 00:02:19,448
even though the module is "gray-matter".

55
00:02:20,010 --> 00:02:22,085
And this is a function that we can call

56
00:02:24,144 --> 00:02:26,251
to parse the content of the file,

57
00:02:26,251 --> 00:02:27,592
that is our "source".

58
00:02:28,156 --> 00:02:30,120
As we've seen in the documentation

59
00:02:30,120 --> 00:02:31,392
this returns an object

60
00:02:32,256 --> 00:02:34,764
with "data" and "content" properties.

61
00:02:35,264 --> 00:02:36,457
Where "data" contains

62
00:02:36,457 --> 00:02:38,901
the properties defined in the front matter,

63
00:02:39,457 --> 00:02:41,690
and content is the rest of the file,

64
00:02:41,690 --> 00:02:44,108
that in our case is in Markdown format.

65
00:02:44,670 --> 00:02:46,571
So this is what we want to

66
00:02:46,571 --> 00:02:47,740
convert to HTML.

67
00:02:48,313 --> 00:02:51,257
But now we can also return a "title" property

68
00:02:52,579 --> 00:02:55,310
because that will be available in the "data"

69
00:02:55,310 --> 00:02:57,296
extracted from the front matter.

70
00:02:57,858 --> 00:02:59,329
Ok. Let's save this file

71
00:02:59,329 --> 00:03:00,555
and see if it works.

72
00:03:03,224 --> 00:03:04,450
I'll reload the page,

73
00:03:04,450 --> 00:03:05,208
just in case.

74
00:03:05,766 --> 00:03:07,696
But you can see in the browser tab

75
00:03:07,696 --> 00:03:10,022
that it's displaying the title correctly.

76
00:03:10,578 --> 00:03:12,149
And if you look at the message

77
00:03:12,149 --> 00:03:13,301
in the browser console

78
00:03:13,301 --> 00:03:15,290
you can see the "title" there as well.

79
00:03:15,894 --> 00:03:18,287
Ok. So that's how we can attach

80
00:03:18,287 --> 00:03:20,062
properties to a "post".

81
00:03:20,639 --> 00:03:22,462
We only set a "title" so far,

82
00:03:22,962 --> 00:03:25,472
but we can add any properties we like here.

83
00:03:25,972 --> 00:03:28,038
For example it would be useful

84
00:03:28,038 --> 00:03:29,209
to have a "date",

85
00:03:29,209 --> 00:03:31,550
showing when the post was written.

86
00:03:32,187 --> 00:03:34,442
And this could be a date string

87
00:03:34,442 --> 00:03:36,260
in ISO format, like this.

88
00:03:36,832 --> 00:03:38,604
So if we save this file now,

89
00:03:39,104 --> 00:03:41,110
we can go add use that "date".

90
00:03:41,110 --> 00:03:42,849
In our "getPost" function,

91
00:03:43,415 --> 00:03:44,967
we simply want to return

92
00:03:44,967 --> 00:03:46,584
the "date" extracted from

93
00:03:46,584 --> 00:03:48,135
the front matter "data".

94
00:03:48,915 --> 00:03:50,724
And then in the page we can add

95
00:03:51,224 --> 00:03:52,820
maybe a simple paragraph

96
00:03:52,820 --> 00:03:54,217
with the "post.date".

97
00:03:55,191 --> 00:03:56,463
I'm not going to worry

98
00:03:56,463 --> 00:03:58,488
about the styling for this example,

99
00:03:58,488 --> 00:03:59,877
but you can see the date

100
00:03:59,877 --> 00:04:01,786
displayed at the top of the page.

101
00:04:02,460 --> 00:04:05,603
Ok. So that's how the front matter works.

102
00:04:06,103 --> 00:04:07,774
We could actually simplify

103
00:04:07,774 --> 00:04:09,252
this code a little bit,

104
00:04:09,252 --> 00:04:11,694
by destructuring the "data" properties

105
00:04:11,694 --> 00:04:12,594
directly here.

106
00:04:13,287 --> 00:04:15,176
So then in the post object

107
00:04:15,176 --> 00:04:17,720
we can use shorthand property names

108
00:04:17,720 --> 00:04:19,391
for "date" and "title".

109
00:04:20,036 --> 00:04:22,118
And at this point we could even

110
00:04:22,118 --> 00:04:23,729
rename "html" to "body".

111
00:04:25,870 --> 00:04:27,398
And finally we could move

112
00:04:27,398 --> 00:04:29,600
all the properties to the same line,

113
00:04:29,600 --> 00:04:31,128
to make the code shorter.

114
00:04:32,770 --> 00:04:34,432
That was just a bit of refactoring,

115
00:04:34,432 --> 00:04:36,333
that shouldn't change the functionality.

116
00:04:37,436 --> 00:04:39,820
But with this we are finally done

117
00:04:39,820 --> 00:04:42,350
with rendering our First Post page,

118
00:04:42,350 --> 00:04:44,951
loading the Markdown and everything.

119
00:04:44,951 --> 00:04:47,120
So in the next video we'll see

120
00:04:47,120 --> 00:04:48,709
how to add more posts.