Creating One-Off Datasets with Singletons in Keystatic

[00:00] Up to this point, we've only worked with collections, which are lists of things, but key static also lets you create one off entries called singletons. Let's create one of those to collect our social media links. I will collapse the whole collection object here, and below have a singletons object. And we'll create a singleton called [00:20] social links. We'll wrap this in a singleton once again to get TypeScript help. We'll give it a label of social links, and I can't believe it, but Copilot pretty much did exactly what I wanted, except we're going to use text fields instead of URLs. And just to make sure that it's pretty clear for content editors, we'll add a description [00:40] for each. I'll fast forward this bit. Alright. So that should be pretty clear. The last thing I want to do to be consistent with where we stored our posts and authors is set the path to content slash social links. And let's visit our admin UI. Right away, you can see we have a new singletons category in [01:00] the sidebar and in the dashboard, and we have our social links. And I'll go and fill that up with my personal details, pretty straightforward. And so we should now have a new content social links YAML file with the 3 social links stored. Let's jump in our front end code. And so in the site main layout, [01:19] let's add a footer below the children's page content. And here we have an h two saying find us on followed by an unordered list where we're going to display our social links. I'll import the reader utilit we've used a few times. I will turn this route layout to an async function and then here go const [01:40] social links equals await reader dot, this time singletons dot social links dot read. We don't need to pass a slug or anything because singletons are a one off instance. And so inside of there, I should have the 3 properties, Twitter, GitHub, LinkedIn. In the unordered list, if we have social [02:00] links dot Twitter, we're going to have an li and this is an external link so we'll use an anchor tag. The h ref will be https twitter.com. And yes, I know it's called x, but let's call it twitter here slash and here we'll pass social links dot twitter. And let's add the rel of no opener [02:20] no referrer and the target of blank. So now if we look at the front end we can see the footer with find us on Twitter and yep it works. Okay. So let's add an HR here just for some separation. Maybe it should go outside the footer and then we'll duplicate this twice. It's a bit messy [02:39] but you get the idea. So the second one will be let's select all the tweeters and replace with GitHub. And the third one is going to be LinkedIn, and I believe the URL is is linkedin.com/in/the username or handle or [02:59] ID. I'm not sure how it's called. So, we have Twitter, we have GitHub going to my profile, and we have LinkedIn going God knows where. Yay. Look at it. It's working. And because we've put this in our layout, it's going to be available on every [03:19] post, on every author page. And this is a tangent but for good measure, since we have a footer in our layout, we should also have a header that takes us back to the homepage. So still in our layout, before the children here, let's add a header with the nav and here we'll use the next link, the h ref will [03:39] be home page and it says home. Voila. So now I have a link to home. It still shows on the homepage which is a bit silly but let's not waste time on this because we are deviating from the main topic.