1
00:00:02,000 --> 00:00:03,000
So let's continue with that

2
00:00:03,000 --> 00:00:07,000
post detail page now with this slug page

3
00:00:07,000 --> 00:00:09,000
which we load for a given slug.

4
00:00:09,000 --> 00:00:13,000
On this page, I in the end wanna output the content

5
00:00:13,000 --> 00:00:14,000
of a selected post.

6
00:00:14,000 --> 00:00:18,000
So that includes a header with the title

7
00:00:18,000 --> 00:00:21,000
and maybe the image again, but then below that

8
00:00:21,000 --> 00:00:25,000
the actual text that makes up a post.

9
00:00:25,000 --> 00:00:27,000
Of course we don't have any text yet,

10
00:00:27,000 --> 00:00:29,000
we only have those excerpts

11
00:00:29,000 --> 00:00:30,000
but in the actual post data

12
00:00:30,000 --> 00:00:32,000
which we'll add in the next lectures

13
00:00:32,000 --> 00:00:36,000
we will also have a rich content for every post

14
00:00:36,000 --> 00:00:40,000
with headings and images and maybe code snippets

15
00:00:40,000 --> 00:00:44,000
and of course a lot of just plain text.

16
00:00:44,000 --> 00:00:49,000
Hence in this Slug.js file in this component

17
00:00:49,000 --> 00:00:51,000
I again wanna return another component

18
00:00:51,000 --> 00:00:54,000
which will actually take care about

19
00:00:54,000 --> 00:00:57,000
outputting that post content.

20
00:00:57,000 --> 00:00:59,000
And I'll do that here in the posts folder,

21
00:00:59,000 --> 00:01:02,000
in the components folder I'll add a sub folder

22
00:01:02,000 --> 00:01:05,000
named post-detail to make it clear

23
00:01:05,000 --> 00:01:10,000
that in there we have the components for a single post.

24
00:01:10,000 --> 00:01:15,000
And in there I'll add a post-content.js file.

25
00:01:15,000 --> 00:01:19,000
I will also already add a post-header.js file

26
00:01:19,000 --> 00:01:21,000
which will be responsible for outputting

27
00:01:21,000 --> 00:01:25,000
the main header data like the main title entity image

28
00:01:25,000 --> 00:01:27,000
of that selected post.

29
00:01:27,000 --> 00:01:31,000
Now for that we'll also need some styles

30
00:01:31,000 --> 00:01:33,000
and as always you find those attached

31
00:01:33,000 --> 00:01:37,000
attached, you do find a post-content.module.css

32
00:01:37,000 --> 00:01:40,000
and a post-header.module.css file

33
00:01:40,000 --> 00:01:43,000
and you can just download them and add them

34
00:01:43,000 --> 00:01:45,000
in your post detail folder.

35
00:01:46,000 --> 00:01:50,000
Now let's start with the post-content.js file.

36
00:01:50,000 --> 00:01:54,000
This will become a quite complex file over time

37
00:01:54,000 --> 00:01:57,000
but we will start simple.

38
00:01:57,000 --> 00:02:00,000
We'll again, start by creating our component function

39
00:02:00,000 --> 00:02:05,000
and exporting that as a default as we always do.

40
00:02:05,000 --> 00:02:10,000
And then in here we wanna return some markup

41
00:02:10,000 --> 00:02:14,000
some JSX code that renders a post.

42
00:02:14,000 --> 00:02:17,000
Now later, we will actually get the post content

43
00:02:17,000 --> 00:02:19,000
as marked Markdown,

44
00:02:19,000 --> 00:02:23,000
which is text with extra annotations.

45
00:02:23,000 --> 00:02:26,000
You'll see it in a couple of minutes

46
00:02:26,000 --> 00:02:28,000
and we'll then translate that Markdown

47
00:02:28,000 --> 00:02:32,000
to React JSX elements.

48
00:02:32,000 --> 00:02:34,000
That is something we'll do later

49
00:02:34,000 --> 00:02:37,000
for the moment I'll start by adding

50
00:02:37,000 --> 00:02:42,000
an article element here, a standard article element,

51
00:02:42,000 --> 00:02:47,000
and then rendering a PostHeader here as a first element.

52
00:02:47,000 --> 00:02:51,000
And then below that the actual content.

53
00:02:52,000 --> 00:02:55,000
And that is what will then later translate

54
00:02:55,000 --> 00:02:58,000
from Markdown to actual JSX code.

55
00:02:59,000 --> 00:03:02,000
Now let's start with the PostHeader though

56
00:03:02,000 --> 00:03:05,000
with that PostHeader component,

57
00:03:05,000 --> 00:03:08,000
for which we have this separate post-header.js file

58
00:03:09,000 --> 00:03:12,000
in there again, we create our component function

59
00:03:12,000 --> 00:03:17,000
as we always did, and we export post-header here

60
00:03:18,000 --> 00:03:21,000
and then here we can return a header element.

61
00:03:21,000 --> 00:03:26,000
Let's say with the H1 element with the title of the post.

62
00:03:26,000 --> 00:03:31,000
And I do expect that I get data like the title from props.

63
00:03:31,000 --> 00:03:35,000
So here I do expect that I can pull data out of my props

64
00:03:35,000 --> 00:03:38,000
and that I get the title here

65
00:03:38,000 --> 00:03:41,000
and actually also the image.

66
00:03:41,000 --> 00:03:46,000
So then here, I just output the title like that.

67
00:03:47,000 --> 00:03:48,000
And then below that,

68
00:03:48,000 --> 00:03:50,000
I wanna render the image.

69
00:03:50,000 --> 00:03:53,000
And I'll again do that with the image component

70
00:03:53,000 --> 00:03:56,000
which we therefore import from next image.

71
00:03:56,000 --> 00:04:01,000
So we import that component and render it just like that

72
00:04:01,000 --> 00:04:02,000
below the H1 tag.

73
00:04:03,000 --> 00:04:05,000
Actually because of the styling,

74
00:04:05,000 --> 00:04:06,000
which we'll add soon,

75
00:04:06,000 --> 00:04:10,000
it will be rendered next to the h1 tag.

76
00:04:10,000 --> 00:04:11,000
So now we got that.

77
00:04:11,000 --> 00:04:14,000
Now the source of the image element here

78
00:04:14,000 --> 00:04:17,000
should be the image we're getting as an argument

79
00:04:17,000 --> 00:04:21,000
and here I will expect that image is the full path

80
00:04:21,000 --> 00:04:23,000
to the image already.

81
00:04:23,000 --> 00:04:25,000
So I'll just set src equal to image,

82
00:04:25,000 --> 00:04:29,000
set alt equal to the title.

83
00:04:29,000 --> 00:04:32,000
And then we need values for width and height

84
00:04:32,000 --> 00:04:37,000
and here a width of 200 and a height of 150

85
00:04:37,000 --> 00:04:38,000
should work quite well.

86
00:04:40,000 --> 00:04:41,000
Now we will need some styles.

87
00:04:41,000 --> 00:04:46,000
So import classes from ./post-header.module.css

88
00:04:48,000 --> 00:04:51,000
this css file which I provided to you.

89
00:04:51,000 --> 00:04:52,000
And with that on the header,

90
00:04:52,000 --> 00:04:56,000
we can add a class name of header like that.

91
00:04:58,000 --> 00:05:02,000
Now that is the post-header component,

92
00:05:02,000 --> 00:05:04,000
which we use in post content.

93
00:05:04,000 --> 00:05:07,000
Hence we need to set the title and the image here.

94
00:05:09,000 --> 00:05:11,000
Now speaking of that our post content

95
00:05:11,000 --> 00:05:14,000
will need some content to work.

96
00:05:14,000 --> 00:05:18,000
And we'll soon get that content from a real data source.

97
00:05:18,000 --> 00:05:20,000
Since we don't have that data source yet

98
00:05:20,000 --> 00:05:23,000
I'll create a dummy post here.

99
00:05:23,000 --> 00:05:27,000
And we will just assume that we loaded that post

100
00:05:27,000 --> 00:05:28,000
so I'll create a dummy post here,

101
00:05:28,000 --> 00:05:30,000
which is a JavaScript object

102
00:05:30,000 --> 00:05:33,000
which will contain some dummy data,

103
00:05:33,000 --> 00:05:34,000
like for example a slug.

104
00:05:34,000 --> 00:05:38,000
And here I wanna use one of the slugs I used before.

105
00:05:38,000 --> 00:05:43,000
Actually I'll grab one of my dummy posts here.

106
00:05:43,000 --> 00:05:46,000
So a single dummy post I'll grab that post

107
00:05:46,000 --> 00:05:51,000
and use that now as a dummy post in post-content.

108
00:05:53,000 --> 00:05:55,000
Here like this,

109
00:05:55,000 --> 00:05:57,000
I will get rid of the excerpt though.

110
00:05:57,000 --> 00:05:59,000
We don't need that here,

111
00:05:59,000 --> 00:06:01,000
but instead I will add a content field

112
00:06:01,000 --> 00:06:05,000
which will contain the actual post content.

113
00:06:05,000 --> 00:06:08,000
And in here I will write Markdown code.

114
00:06:09,000 --> 00:06:11,000
Now, in case you're not familiar with Markdown,

115
00:06:11,000 --> 00:06:13,000
you can of course Google it, look it up.

116
00:06:13,000 --> 00:06:17,000
And you'll see that there also a cheatsheet Markdown

117
00:06:17,000 --> 00:06:20,000
in there in this plain text with extra annotations.

118
00:06:20,000 --> 00:06:22,000
Markdown looks like this.

119
00:06:22,000 --> 00:06:24,000
You write text and you can for example,

120
00:06:24,000 --> 00:06:26,000
add a hash symbol in front of it,

121
00:06:26,000 --> 00:06:28,000
to turn it into a title.

122
00:06:28,000 --> 00:06:33,000
You can also create lists with dashes or with numbers

123
00:06:33,000 --> 00:06:35,000
to have ordered lists.

124
00:06:35,000 --> 00:06:38,000
You can add links by putting text in square brackets

125
00:06:38,000 --> 00:06:42,000
and adding the link destination in parentheses thereafter,

126
00:06:42,000 --> 00:06:44,000
things like that.

127
00:06:44,000 --> 00:06:46,000
If you ever worked with GitHub

128
00:06:46,000 --> 00:06:49,000
and you added a read me for a GitHub repository,

129
00:06:49,000 --> 00:06:51,000
you wrote that in Markdown.

130
00:06:51,000 --> 00:06:55,000
And we use Markdown here because it's less code

131
00:06:55,000 --> 00:06:59,000
than if we would use HTML and it can be translated

132
00:06:59,000 --> 00:07:04,000
into HTML or into JSX, even with third-party packages,

133
00:07:04,000 --> 00:07:06,000
which we'll add.

134
00:07:06,000 --> 00:07:08,000
So here I'll add a simple Markdown text

135
00:07:08,000 --> 00:07:12,000
of this is a first post.

136
00:07:12,000 --> 00:07:15,000
And the interesting thing is that this is plain text

137
00:07:15,000 --> 00:07:17,000
with this extra hash notation

138
00:07:17,000 --> 00:07:21,000
turning this into a title in Markdown's world.

139
00:07:21,000 --> 00:07:25,000
And the goal is now to translate this string

140
00:07:25,000 --> 00:07:29,000
from Markdown into JSX which we'll do in the next lecture.

141
00:07:29,000 --> 00:07:33,000
Before we do that, let's set the tittle and image

142
00:07:33,000 --> 00:07:35,000
of the PostHeader though.

143
00:07:35,000 --> 00:07:37,000
For this here in post content

144
00:07:37,000 --> 00:07:40,000
I will create a ImagePath here

145
00:07:40,000 --> 00:07:43,000
and again, set up a template literal

146
00:07:43,000 --> 00:07:48,000
where we dive into /images/posts then use the slug.

147
00:07:48,000 --> 00:07:53,000
So dummy-post.slug and then use the actual image name.

148
00:07:55,000 --> 00:07:59,000
So inject dummy post.image,

149
00:07:59,000 --> 00:08:02,000
and it's this ImagePath which I set as a value

150
00:08:02,000 --> 00:08:05,000
for the image prop on my PostHeader like this.

151
00:08:06,000 --> 00:08:10,000
And for the title we can also set this dynamically

152
00:08:10,000 --> 00:08:12,000
to dummy post.title.

153
00:08:13,000 --> 00:08:14,000
Now for the content,

154
00:08:14,000 --> 00:08:18,000
we don't wanna do dummy post.content

155
00:08:18,000 --> 00:08:19,000
because if we would,

156
00:08:19,000 --> 00:08:21,000
we would see that content

157
00:08:21,000 --> 00:08:24,000
but we would just output it as plain text,

158
00:08:24,000 --> 00:08:27,000
not translate it from Markdown to JSX

159
00:08:27,000 --> 00:08:30,000
and therefore that's not what we want.

160
00:08:30,000 --> 00:08:31,000
Still to get started,

161
00:08:31,000 --> 00:08:34,000
let's start with this and let's then go

162
00:08:34,000 --> 00:08:38,000
to the slug.js file in the page's post folder

163
00:08:38,000 --> 00:08:42,000
and output Post content here

164
00:08:42,000 --> 00:08:43,000
and later

165
00:08:43,000 --> 00:08:45,000
we'll pass in the data for the post content

166
00:08:45,000 --> 00:08:48,000
from inside this page for the moment

167
00:08:48,000 --> 00:08:49,000
I'll just render it like this

168
00:08:49,000 --> 00:08:53,000
and I'll import post content from the proper path

169
00:08:53,000 --> 00:08:56,000
therefore, and if we do all that

170
00:08:56,000 --> 00:08:58,000
If you reload a single post

171
00:08:58,000 --> 00:09:01,000
you see PostHeader is not defined

172
00:09:01,000 --> 00:09:04,000
because in post content I'm using PostHeader

173
00:09:04,000 --> 00:09:06,000
but I'm not importing it.

174
00:09:06,000 --> 00:09:08,000
That's something we should change.

175
00:09:08,000 --> 00:09:11,000
I'll import PostHeader from ./post-header

176
00:09:11,000 --> 00:09:15,000
add that import in the post content file.

177
00:09:15,000 --> 00:09:17,000
And now we see this.

178
00:09:17,000 --> 00:09:20,000
This is not the final look I want though

179
00:09:20,000 --> 00:09:23,000
I want some extra styling and for that,

180
00:09:23,000 --> 00:09:27,000
I did add that post-content module.css file.

181
00:09:27,000 --> 00:09:30,000
So I will also import classes from there

182
00:09:30,000 --> 00:09:35,000
and import classes from post-content.module.css

183
00:09:37,000 --> 00:09:40,000
and then on this article here

184
00:09:40,000 --> 00:09:44,000
set a class name of classes.content.

185
00:09:47,000 --> 00:09:49,000
If we save that now that looks better

186
00:09:50,000 --> 00:09:54,000
but here we see that we have this untransformed raw text

187
00:09:54,000 --> 00:09:58,000
and therefore let's now become a bit more advanced

188
00:09:58,000 --> 00:10:02,000
by adding functionality to translate

189
00:10:02,000 --> 00:10:04,000
playing the Markdown text,

190
00:10:04,000 --> 00:10:07,000
into renderable JSX code.