All language subtitles for 011 Working On The _Post Detail_ Page_Downloadly.ir_en

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.