This course has been updated! We now recommend you take the Introduction to Gatsby, v2 course.
Transcript from the "Modifying Post Listing Display" Lesson
[00:00:00]
>> Jason Lengstorf: We can then decide how we're gonna display this. And to make things easy, i'm just gonna package this up into its own component. So we can create a new file, and we're gonna call this one post preview, if I can find it. Here we go. It's called postpreview.js.
[00:00:21] And inside of it we're going to import React from React. We're also going to import the CSX prop from, or the CSX tag from the emotion. Why are you, why are you like that? Don't do that. Here we go. We also need link from Gatsby because we're going to be linking to the post.
[00:00:49] And let's see what else we got. We're gonna do a post preview component that is going to take the post as its props. And then we're going to return something, and that'll be our export default.
>> Jason Lengstorf: Okay, so in this, I'm gonna use the article tag. And we want to, we'll use an h3 because we put it under an h1 or an h2 I mean.
[00:01:25] And that is going to be the post.title. We're also going to want to show the post.excerpt and, yeah, then we wanna link to read it. So let's do a link to the post.slug. Now this page doesn't exist yet, we still have to create that, but we will get there In a minute.
[00:01:55] So we're gonna say read this post, and we'll use that right arrow HTML entity again. Let's also link the heading. We want that h1 to show up. So let's do a link to post slug. And then I'm just gonna drag this over so it links the title. Okay, so that's all good.
[00:02:15] We're gonna need to style this up a little bit. So let's save it first and we'll go in and use it. So I'm gonna import my post preview from components post preview. And then down here I'm going to just use it, post preview, and we need a key.
[00:02:36] So the key is gonna be post slug, we just need something unique, and then the post is gonna be the post. We have to use a key when we're mapping over data because that's how React knows which component is which for different updates. It'll complain if we don't do this.
[00:02:54] So we just wanna make sure to give it something and it has to be unique, so you can't put in like a string. So if we save this. Okay, I mean that's not terrible out of the gate. We set some decent defaults, that's okay, but let's do a little bit of styling to make this better.
[00:03:09] Let me just pop this over so we can see what we're doing. I'm gonna get back into this post preview, and let's just style this up a bit. So I've got my CSS prop. And we're going to, let's add a border bottom, give it one pic solid, triple Ds, and then we'll go margin top, a little bit of space up there so that it's not crunched.
[00:03:40] Add some padding at the bottom to give it some breathing room, and then because we don't want the top one to be disproportionally far away from the heading. We'll also just set the margin top to 1rem there. And that should I think give us most of what we need.
[00:04:00] Okay, and now the other thing that we're gonna do is, I know that i'm gonna reuse this read link in a few places, and so it's not just gonna be in this file, and I wanna change some styles on it. So I wanna make this look a little bit different.
[00:04:18] In order to do that, I wanna make this reusable. So I'm gonna use a little trick of just exporting a styled component that doesn't even render. And the way that this would work is we're gonna create a file called readlink.js. And this one is gonna import styled from emotion/styled, and I'm also gonna import link from Gatsby.
[00:04:42] And then the read link is going to be a styled link. And I just wanna add a couple little things to make this look nice. First I'm gonna make it display in line block so that it doesn't fill out the entire screen. And then I'm also going to set the font size to a little bit smaller than the rest of the text around it, and I'm gonna export that as a default.
[00:05:12] And that means now I've just basically created a little styled component that's, it doesn't change any functionality of the link component, it just makes it look a little different. So that when I come in here now I can import that.
>> Jason Lengstorf: And I'm gonna use that down here to make this just look a little bit nicer.
[00:05:36] And it's a minor thing but what it does is, that way we don't have to copy paste that style when I'm inevitably gonna wanna use this a little bit later.