Adding an RSS Feed

[00:00:00]
>> Speaking of later, later is now we're gonna talk about RSS. So the next thing that we wanna do is add our RSS feed so that somebody who wants to can subscribe to this and get updated whenever we post a new post. As social media becomes more and more interesting, having an RSS feed is a better and better backup plan, I think.

[00:00:21]
So what I'm gonna do is add a it looks like a plug in like you'd be able to do NPM or NPX Astro add RSS but it's not that, it's a it's a separate thing so we're going to install it manually. And then we're gonna need a couple external packages for this we're gonna use one called sanitize HTML and one called markdown IT, markdown IT.

[00:00:45]
I'm not sure which is the proper pronunciation there, so we install those. Astrojs/rss, it's a helper that gives us an XML feed, that is kind of built to accept Astro values to make our lives easier we don't have to write custom XML on ourselves. Sanitize HTML is how we're going to make sure that the XML content field doesn't break when we pass HTML into it.

[00:01:17]
And then the markdown IT is how we're going to take the markdown content and turn it into HTML so that we can send it into the RSS feed. Because again, what Astro is doing is giving us an Astro component they're not giving us a HTML, that's probably a feature request to add cuz that would be neat, and it would make this simpler.

[00:01:38]
So the next thing that we can do is now we're gonna start using something called endpoints and because RSS requires the full site name the full URL of the website we are gonna have to define that. Astro has a config option for this, so we can just come into the config astro.config.mjs, and we're going to add a site key to the config.

[00:02:05]
And if you don't know what your site is going to be yet, you can just make this example.com or something but don't forget to change it later, or else your RSS feed will break. So what I'm gonna do for now is I'm gonna point it to the working demo, so, this is the demo of the app, if you wanna go see this, it's up now and it works.

[00:02:28]
What I would recommend if you're not sure what to call it, is just append your GitHub username to the end, and you'll be able to deploy it like that. Otherwise you can let Netlify or Vercel or whatever generate a name for you, if you're if you're not planning on putting this up forever.

[00:02:46]
And that'll solve the problem of RSS knowing where it is, and again, if you're not deploying, your RSS feed can be broken, it doesn't really matter. But we've got that part setup and we won't get an error we're gonna create an endpoint, and the way you get an endpoint is you add a new page, but we gonna give it a name that we want.

[00:03:10]
So rss.xml that's gonna be the actual feed, but then we append .ts to it, and this identifies to Astro that we're making kind of a custom return. Whatever we send back it's not going to get processed like an Astro page is not gonna get processed like markdown, we're just gonna give it something and it's gonna return that.

[00:03:31]
So we could do a .json.ts and return an objective of whatever that we want people to be able to grab from our site, maybe we wanna give a JSON feed of our blog posts, we could do that as well. In our case, we're gonna do it as XML, and the way that this works is this particular little feature is going to import rss from astrojs/rss and then we're going to grab.

[00:03:59]
The AstroConfig type from Astro, and that's so that we can get autocomplete on a piece later. We're gonna import that, getCollection again, from Astro content, and then we're gonna use those external packages that we installed. So we're gonna get sanitizeHtml from sanitize-html and import markdownIt from markdown-it.

[00:04:37]
Okay, so then we're going to grab out our parser and that's gonna be the the markdown IT so that's so that we can turn the markdown into HTML and then we're going to export an async function. Called get and this is the endpoint part. So when somebody hits this endpoint with a get request an HTTP get request, we're going to send something back and we can send back whatever we want.

[00:05:09]
The argument that we get sent to us is the context, and that's the AstroConfig. So that is where we get access to that that site parameter that we just set. So first and foremost let's get the blog content, so I'm gonna grab out my blog as await, oops, get collection blog.

[00:05:31]
And then I want to return rss and this I don't know if this is gonna autocomplete for me, it looks like it's not. I don't know if this one has autocomplete, or has TypeScript types this the rss plugin. So we're gonna set up a title and a description, and these are all the required fields for an rss feed, so we're gonna say, All sandwich news all the time.

[00:06:07]
Then we wanna get the site, and that's gonna be the context.site. Then we wanna get our items, and our items are going to be a map over those blog posts. So again we map over and grab out the post and then we want to return an object that has all the things that are required for one of these to work, so the title is going to be the post.data.title.

[00:06:33]
The pubdate is the post.data.date, the description is post.data.description and the link is going to be relative so blog and then we set up post.slug and the content is, the messy parts. So we're going to call that sanitize HTML, remember we gonna use that markdown IT parser.render(post.body) which is just the raw markdown contained in that markdown file.

[00:07:12]
And with that saved, start up the server again, if you haven't, oops, npm run dev. So, try to get as much of that as I can on the screen, so just to recap here, an rss feed. If you're not familiar, is a way of sending a list of items out of a site in a way that can be automatically subscribed to, using a feed reader, google reader.

[00:07:44]
It was extraordinarily popular and then kind of fell out of fashion with the rise of social media and I've seen a resurgence of it lately, because people are trying to figure out what happens if the social media goes away. Because that has suddenly become an actual risk. So rss, starts out by defining a document with this title description, the site that its on, and then provides a list of items, those items each include a standard set of fields.

[00:08:12]
That any feed reader will look for and then display. So if I have my rss feed and you've got yours and we're both using the rss spec, then somebody can put both feeds into the feed reader and we'll see a list of your posts and my posts in the same list.

[00:08:29]
Chronologically ordered, which is, it's great, it's like such a great way to curate the web. If you're, if you haven't tried it before, start looking to see if, your favorite creators have rss feeds and add those. Because, you can start to curate your own little social feeds of what people are creating out there.

[00:08:48]
Now that we've got this saved, we don't really have a way to get to it, but we can just, manually go to it, right? And this is the thing, so we've got rss, we've got a channel, and then we've got our title, description, link, and then each of these is an item containing the default details.

[00:09:10]
And you can see here that it's using that site to make all of these permalinks. So the last little bit that we wanna do is just make that actually discoverable on the site, so let's head over to blog.astro and down at the bottom below this section here. We will just add a quick class feed, and we'll link to the rss.xml.

[00:09:39]
And this is something like, I am actually really a fan of Astro not having a custom link component or having specialized behavior around links, they just use the platform. You use the anchor tags that you're familiar with, and they do what anchor tags are supposed to do, you're not really wondering, is it doing what I think it's doing?

[00:09:59]
Is it injecting extra JavaScript? No, it's just a link, it's just a link and it does link things. So we're gonna add another emoji, we'll make it accessible, make it a role of image aria-label, satellite dish and then we're going to add in that satellite dish. It's always a risky when you open your emoji panel and it shows like what your most frequently used emojis are, if you like that's laying your soul bare.

[00:10:31]
All right, so this is gonna be link-text, the class's link-text, and we're gonna say subscribe. To the rss feed, save that, and here we go. Now we've got a nice little link down at the bottom of the blog for someone who wants to get that rss feed, they can go, and do so.

[00:10:54]
So that my friends is rss, so what we're going to do with the remainder of our time, is we're going to put together hybrid rendering for our Astro site. We're gonna put together a newsletter form that will allow people to subscribe, we're not gonna build in the back end of actually saving those subscriptions.

[00:11:17]
That will be exactly the same as on any other framework, you're gonna use some service with an API. I didn't wanna make people sign up for a newsletter service as part of a workshop, so we're going to submit it and display what was submitted on the screen as a confirmation that it worked.

[00:11:32]
If you wanna make this into a functional newsletter subscription, the only thing you'd have to do is take the data we're getting out and actually save it via API to your newsletter subscription of choice. Mark?
>> Someone on stream also commented that you could add the link rel alternate type application/rss + xml?

[00:11:52]
>> That's true yeah, so if that's a good call out RSS auto discovery here, the link rel alternate tag here so we could absolutely add this to our default layout And if someone has an RSS plugin or if they're using a browser that does auto discovery of RSS, it would show this site has an RSS feed available.

[00:12:20]
I don't know why, I didn't not include that for a reason, it was honestly just I kind of forgot that that's a thing that people do. I don't know if any, do any browsers these days do that without a plugin or without an extension?
>> I think they do.

[00:12:35]
>> They do, let's try, let's add this real quick. So let's drop this in, we're gonna do a link rel alternate and we will set this up as rss feed for, sandwich, and this one's gonna be rss.xml, okay? So then if I come out here and I open up, This page, do any of these things look like Okay, so this one doesn't, this is ark and it doesn't look like it is detecting an rss feed, but if your browser does, it'll show what a lot of them will do is like show a little RSS icon.

[00:13:25]
Somewhere that you can find this particular browser doesn't appear to have it. But that is a good tip.