All language subtitles for 008 Adding A Post Grid & Post Items_Downloadly.ir_en

In this PostItem component,

or in this file we again create our component function

and as always export that of course.

And then we define the structure,

the markup of a single PostItem.

And for me a PostItem will be a list item

which should make sense because we're in an unordered list.

So having a list item is a good choice typically

and then the entire item should be clickable.

Therefore I'll import link from next/link

because of course I wanna use this link

to still stay in the single page application

use pre-fetching and all those things.

And I'll then add a link here with a anchor tag inside

since I'll have a more complex HTML structure in that link.

And as I mentioned a couple of minutes ago

you then need to bring your own anchor tag

to tell link that it should still render anchor tag.

And then regarding that more complex structure in here

I wanna have a div which will hold a post-image

which has at the top of this postcard and below that

another div which will hold the content,

the title, the date, and a short excerpt,

which we wanna show.

Now inside that first div idea for output my image.

And we will soon add the source and everything else.

And then the second div here

they're all add a h3 tag with the title of the post.

Then a time element, which outputs the time

something like July 13th, 2022

something like that will be output here.

And then a paragraph with the expert text of that post.

And of course at the moment it's just dummy data

soon it will be actual data.

Now, before we continue on the data,

let's continue with the styling actually

for this again I will again import classes

from that PostItem.module.css file

which I provided to you in the last lecture.

And then we add a class to the list item, the post-class.

We also add a class to the div, which wraps the image.

It's the image class.

And we add a class to this div which wraps the content.

It's the content class.

Now let's work on the data.

The data for a single PostItem of course

is not hard-coded in the PostItem.

We will also not fetch it from inside the PostItem

with user fact and fetch or anything like that.

Instead I expect that I get it through props so that

in the post-grid component where we rendered a PostItems

and where we have a list of posts

which probably is a list of JavaScript objects

with the post data where we then just forward

that data we have here already into the PostItem,

through props, that's the goal.

So in PostItem, we can expect a couple of props

and I will use object de-structuring

to pull those prop properties into separate constants.

Now it is your component.

It is up to you how you expect to get data,

how you expect to pass data to this component.

If you wanna have one prop

which carries the entire post data or multiple props

and I will go for one prop here

a post prop on props, and I'll destructure that.

So I expect that I get a post prop

and that post prop holds a JavaScript object

with multiple properties which describe the post

and I'm now pulling out those properties

into separate constants with object de-structuring here.

And we could, for example,

expect a title, a image, an excerpt,

which is a short summary text basically for the post,

the date, and also the slug of that post.

So the path to the post so to say

the unique identifier of the post.

And that's the data with which we can break down there

for example,

for the title we can now output the title,

which we extract here.

Now for the date, we can also output this

but I wanna format it first,

make it more human readable

because the date which we get here as a prop

will be in a more machine readable format.

All the human readable but not nicely formatted.

And I wanna make sure that it is nicely formatted

hence here I will actually create a formatted date constant,

where I create a new date object

and pass my date prop to it,

so that a new date JavaScript object is constructed

based on that date value, which I receive here.

And hence of course, we have to make sure

that date holds a value which can be used

with this constructor function

and we will make sure that this the case.

And then on that date object,

we can call toLocalDateString

and pass en-US

as a first argument and a configuration object

as a second argument to output a human readable date.

And here I'll set day to numeric, I'll set month to long

so that if it's January we don't output 01 or just 1

but instead January as a text

and then year to numeric as well.

Okay so now we've got that formatted date

and it's now this formatted date

which I wanna use down here.

So here we output the formatted date.

Now for the excerpt we wanna output the well excerpt

which we're getting as a prop.

So I'll put excerpt here,

this excerpt and now for the image,

the image needs a source property.

It needs an alt text

and then we need to specify the width and the height.

Now let's start with alt.

The alt text could just be our title here,

so I'll just use title.

Now for width and height

I also prepared some values which should work

and that's 300 and 200 pixels roughly.

That should produce good-looking images.

We will also sometimes have images,

which are a bit wider than 300

because here the image will actually scale in size

as defined in css.

The css code is such that the image will differ in size

but still will always produce good-looking images

with these settings.

And it always will be a bit of tweaking and trial and error

to find good settings here

to get images which are as small as possible

and still look good.

But I'll come back to the image later

because we will also need to add

the layout property here later.

But for the moment let's keep it like this

so that we then also see why we will need to add it.

For the moment let's focus on the source instead.

What is the source?

Well, we get an image here

but the image which we get

will actually just be the image file name.

So we need to construct a full imagePath first

because the file name is not enough.

And I'll do this with a template literal.

So with back ticks and we will start with a hard-coded

string of /images/posts.

Now that's important at the moment

in the public images folder, we have no posts folder.

I'll change this now and I'll add one.

This folder is empty right now

but it will very soon contain some images.

So it's this folder which will hold images

for individual posts.

And that's therefore the start of this image path.

Then I wanna have a sub folder in that post folder

for every post which we add.

And that sub folder should have the unique identifier

of that post as a name.

So that slug, hence the next segment here is the slug.

We'll dive into a sub folder of that slug

So with that slug as a name in that images posts folder

and then in there,

we look for the actual image file like this.

That's my image path and therefore now

that is what I'll set here as a source.

Okay, so that is now this PostItem component here

for image to work we however

still need to import this image component from next image.

But now we've got this setup.

Now we can connect this to our posts-grid

and then start adding some dummy data

so that we do see some output.