So let's continue with that
post detail page now with this slug page
which we load for a given slug.
On this page, I in the end wanna output the content
of a selected post.
So that includes a header with the title
and maybe the image again, but then below that
the actual text that makes up a post.
Of course we don't have any text yet,
we only have those excerpts
but in the actual post data
which we'll add in the next lectures
we will also have a rich content for every post
with headings and images and maybe code snippets
and of course a lot of just plain text.
Hence in this Slug.js file in this component
I again wanna return another component
which will actually take care about
outputting that post content.
And I'll do that here in the posts folder,
in the components folder I'll add a sub folder
named post-detail to make it clear
that in there we have the components for a single post.
And in there I'll add a post-content.js file.
I will also already add a post-header.js file
which will be responsible for outputting
the main header data like the main title entity image
of that selected post.
Now for that we'll also need some styles
and as always you find those attached
attached, you do find a post-content.module.css
and a post-header.module.css file
and you can just download them and add them
in your post detail folder.
Now let's start with the post-content.js file.
This will become a quite complex file over time
but we will start simple.
We'll again, start by creating our component function
and exporting that as a default as we always do.
And then in here we wanna return some markup
some JSX code that renders a post.
Now later, we will actually get the post content
as marked Markdown,
which is text with extra annotations.
You'll see it in a couple of minutes
and we'll then translate that Markdown
to React JSX elements.
That is something we'll do later
for the moment I'll start by adding
an article element here, a standard article element,
and then rendering a PostHeader here as a first element.
And then below that the actual content.
And that is what will then later translate
from Markdown to actual JSX code.
Now let's start with the PostHeader though
with that PostHeader component,
for which we have this separate post-header.js file
in there again, we create our component function
as we always did, and we export post-header here
and then here we can return a header element.
Let's say with the H1 element with the title of the post.
And I do expect that I get data like the title from props.
So here I do expect that I can pull data out of my props
and that I get the title here
and actually also the image.
So then here, I just output the title like that.
And then below that,
I wanna render the image.
And I'll again do that with the image component
which we therefore import from next image.
So we import that component and render it just like that
below the H1 tag.
Actually because of the styling,
which we'll add soon,
it will be rendered next to the h1 tag.
So now we got that.
Now the source of the image element here
should be the image we're getting as an argument
and here I will expect that image is the full path
to the image already.
So I'll just set src equal to image,
set alt equal to the title.
And then we need values for width and height
and here a width of 200 and a height of 150
should work quite well.
Now we will need some styles.
So import classes from ./post-header.module.css
this css file which I provided to you.
And with that on the header,
we can add a class name of header like that.
Now that is the post-header component,
which we use in post content.
Hence we need to set the title and the image here.
Now speaking of that our post content
will need some content to work.
And we'll soon get that content from a real data source.
Since we don't have that data source yet
I'll create a dummy post here.
And we will just assume that we loaded that post
so I'll create a dummy post here,
which is a JavaScript object
which will contain some dummy data,
like for example a slug.
And here I wanna use one of the slugs I used before.
Actually I'll grab one of my dummy posts here.
So a single dummy post I'll grab that post
and use that now as a dummy post in post-content.
Here like this,
I will get rid of the excerpt though.
We don't need that here,
but instead I will add a content field
which will contain the actual post content.
And in here I will write Markdown code.
Now, in case you're not familiar with Markdown,
you can of course Google it, look it up.
And you'll see that there also a cheatsheet Markdown
in there in this plain text with extra annotations.
Markdown looks like this.
You write text and you can for example,
add a hash symbol in front of it,
to turn it into a title.
You can also create lists with dashes or with numbers
to have ordered lists.
You can add links by putting text in square brackets
and adding the link destination in parentheses thereafter,
things like that.
If you ever worked with GitHub
and you added a read me for a GitHub repository,
you wrote that in Markdown.
And we use Markdown here because it's less code
than if we would use HTML and it can be translated
into HTML or into JSX, even with third-party packages,
which we'll add.
So here I'll add a simple Markdown text
of this is a first post.
And the interesting thing is that this is plain text
with this extra hash notation
turning this into a title in Markdown's world.
And the goal is now to translate this string
from Markdown into JSX which we'll do in the next lecture.
Before we do that, let's set the tittle and image
of the PostHeader though.
For this here in post content
I will create a ImagePath here
and again, set up a template literal
where we dive into /images/posts then use the slug.
So dummy-post.slug and then use the actual image name.
So inject dummy post.image,
and it's this ImagePath which I set as a value
for the image prop on my PostHeader like this.
And for the title we can also set this dynamically
to dummy post.title.
Now for the content,
we don't wanna do dummy post.content
because if we would,
we would see that content
but we would just output it as plain text,
not translate it from Markdown to JSX
and therefore that's not what we want.
Still to get started,
let's start with this and let's then go
to the slug.js file in the page's post folder
and output Post content here
and later
we'll pass in the data for the post content
from inside this page for the moment
I'll just render it like this
and I'll import post content from the proper path
therefore, and if we do all that
If you reload a single post
you see PostHeader is not defined
because in post content I'm using PostHeader
but I'm not importing it.
That's something we should change.
I'll import PostHeader from ./post-header
add that import in the post content file.
And now we see this.
This is not the final look I want though
I want some extra styling and for that,
I did add that post-content module.css file.
So I will also import classes from there
and import classes from post-content.module.css
and then on this article here
set a class name of classes.content.
If we save that now that looks better
but here we see that we have this untransformed raw text
and therefore let's now become a bit more advanced
by adding functionality to translate
playing the Markdown text,
into renderable JSX code.