Render Block Field Data in Keystatic

[00:00] We created a new route for each of our authors, but right now it's just displaying the slug and not pulling data from KeyStatic. Anything will work. Nothing is actually coming from KeyStatic, but we're going to change this right now. In our author page, instead of just grabbing the slug and displaying it, we're going to use that slug to read content from [00:19] keystatic. So let's import our reader, as we've done previously, and down here after checking that we have a slug, we'll grab the author with const author equals await reader dot collections dot authors dot and we're going to read the author bypassing it the [00:39] slug. Before rendering the data, let's do another check, and if we don't have an author, return the not found route. So now you can see that the anything slug did not match an author in key static, and therefore we've got this 404 page. But if I go back to Simon, which I know is an author, this works. This tells me that it's working. [00:59] So instead of having author page for slug, why don't we just display the author name with author dot name? So now we have the Simon page, and if we click on Jed, we have the Jed page. Perfect. Alright. So let's display more information about the authors. You can see we have the avatar and the showcase, and we're going to display that on that page. I'll start [01:19] by displaying the avatar under the name, and here we've already done the work, so I can grab the image component that we use here, and we're going to use exactly the same here. Of course, I need to import image from next image. And let's maybe make the image a little bit bigger, so I'll go with 180 [01:39] by 180. Alright. And next, let's display below here the showcase for this author. Let's have an HR to make a bit of a break and then h two showcase. Okay. So we only want to show this showcase if there is anything to show. So I'll wrap this in a fragment, [01:59] and before that, let's check that author dot showcase dot length is greater than 0. If that's the case, we'll render this fragment. And then since we now know that we have an array of at least 1 item, let's have an unordered list, and in here, we're going to iterate [02:18] over the showcase items. And so we'll have a list item here. Let's give it a key before we forget. And here, I'll quickly grab the index from our map method and pass the index here. Okay. And to work out what we're doing, let's have a pre tag and stringify the individual item. [02:39] And whoops. I need the 2nd closing parenthesis here. Alright. And here's another list. So you're obviously going to need to render a different markup, whether this is a link or YouTube video. And the way we can decide what markup we should render is with this discriminant property, which is present to all of our blocks. In other words, [02:59] inside the li item, I can check if the item dot discriminant is equal to and you can see the auto complete suggestion, which is great. So equal to a link. And if that's the case, let's for now have a string of link, and I'll duplicate this. If the item discriminant is YouTube video ID, [03:19] we'll have a YouTube video. And, of course, if you have more blocks, you can repeat this. You can have a more structured switch statement. But I think here, with our fairly simple example, this is going to work quite well. So you can see that now we have correctly rendered YouTube video or link based on the discriminant. So I'll remove the stringified data and [03:38] let's work on these two blocks. So instead of the link string here, we're going to see what Copilot suggests here. I think it's pretty great, except the props are wrong. Instead of URL and title, we're going to let TypeScript tell us what we have. Remember, our data is in this value object. We used an object field, [03:59] and this value object contains our label and URL. So here we want the URL for the h ref, and then for the label, we want item dot value dot label. Let's remove the doubled up closing parenthesis and curly brace and hit save. And the first link is the one we haven't worked on, but the link is now [04:18] linking to Simon's website, and if I click on it, it's taking me to Simon's website. So that works pretty well. Nice. So our links are taken care of, and let's do the same for the YouTube video ID discriminant. Copilot is going to suggest an iframe. Let's accept this. For some reason, it's not great at closing [04:38] the syntax, but let's fix that. And this seems to be absolutely perfect. We have the YouTube embed with the item dot value, which is a string. Remember the item when a link is a value object, but when a video ID is literally just a string, and this is the correct string here, [04:59] so I should be able to save and see my YouTube video displayed properly. Here's a quick demo of the tailwind merge. Very cool. And let's take a look at what happens on Jed's profile. You can see the placeholder image and then Jed has a YouTube video and two links to key static and thinkmill, [05:19] which work properly. Sweet.