An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
Some of Our Sources
- Slashdot
- Engadget
- TutsPlus - Code
- TutsPlus - Design
- Creative Curio
- Fuel Your Creativity
- Crazy Leaf Design
- Reencoded
- CSS Globe
- Line 25
Help Webnuz
Referal links:
How to make an RSS feed in SvelteKit
Chances are, if you're consuming a lot of content, you're not checking a ton of individual sites.
You may be checking something like Reddit, or another aggregator, or possibly one of the bigger blogging platforms nowadays (dev.to, medium, etc). But that still leaves out large portions of the Internet.
If you control your own website and channel, and you're using SvelteKit, then you'll likely want an RSS feed so that your end users can subscribe to your content in their favorite feed reader.
So, what's it take to to it with SvelteKit? Not a lot!
Note: if you'd rather watch a video tutorial on how to implement an RSS feed, you can check out my YouTube video here.
Here's the complete code for this blog's rss feed:
routes/rss.js
export const get = async () => { const res = await fetch(import.meta.env.VITE_BASE_ENDPOINT + '/posts/posts.json'); const data = await res.json(); const body = render(data.posts); const headers = { 'Cache-Control': `max-age=0, s-max-age=${600}`, 'Content-Type': 'application/xml', }; return { body, headers, };};const render = (posts) => `<?xml version="1.0" encoding="UTF-8" ?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><atom:link href="http://wwww.davidwparker.com/rss" rel="self" type="application/rss+xml" /><title>David W Parker</title><link>https://www.davidwparker.com</link><description>David W Parker's blog about Code, Entrepreneurship, and more</description>${posts .map( (post) => `<item><guid>https://www.davidwparker.com/posts/${post.slug}</guid><title>${post.title}</title><link>https://www.davidwparker.com/posts/${post.slug}</link><description>${post.description}</description><pubDate>${new Date(post.published).toUTCString()}</pubDate></item>` ) .join('')}</channel></rss>`;Let's break it down
The endpoint
// GET /rssexport const get = async () => { const res = await fetch(import.meta.env.VITE_BASE_ENDPOINT + '/posts/posts.json'); const data = await res.json(); const body = render(data.posts); const headers = { 'Cache-Control': `max-age=0, s-max-age=${600}`, 'Content-Type': 'application/xml', }; return { body, headers, };};This is a get request that lives at /rss. In it, I make a simple request to /posts/posts.json to get all the blog
articles that I want for this RSS feed.
I call res.json() to get the resulting json, then send the posts within that json to the render method to build my body.
Once I get the body, I set a few headers, and return the resulting body and header which is needed for the SvelteKit endpoint.
The body
const render = (posts) => `<?xml version="1.0" encoding="UTF-8" ?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><atom:link href="http://wwww.davidwparker.com/rss" rel="self" type="application/rss+xml" /><title>David W Parker</title><link>https://www.davidwparker.com</link><description>David W Parker's blog about Code, Entrepreneurship, and more</description>${posts .map( (post) => `<item><guid>https://www.davidwparker.com/posts/${post.slug}</guid><title>${post.title}</title><link>https://www.davidwparker.com/posts/${post.slug}</link><description>${post.description}</description><pubDate>${new Date(post.published).toUTCString()}</pubDate></item>` ) .join('')}</channel></rss>`;We start by making our xml declaration and using the proper rss tag with the definition from w3.org.
From there, it's just a standard rss feed, which you can find from anywhere on the Internet.
In my example, I have a channel, with atom:link which references itself. Inside, I have a title for my feed/site, and a description. From there, I map each of my resulting posts into their own <item> tag along with their own guid, title, link, description, and pubDate. Close out the tags, and we're done.
posts.json
This is less important, but it's just another get endpoint that returns a bunch of posts from imported md files.
At this point, there's a bunch of examples of this all around the Internet- but here's mine just in case you haven't seen it yet:
// GET /posts/posts.jsonexport const get = async ({ query }) => { let posts = await Promise.all( Object.entries(import.meta.glob('./*.md')).map(async ([path, page]) => { const { metadata } = await page(); const slug = path.split('/').pop().split('.').shift(); return { ...metadata, slug }; }) ); if (query.get('q') !== null) { posts = posts.reduce((accum, val) => { if (val.categories.includes(query.get('q'))) { accum.push(val); } return accum; }, []); } posts.sort((a, b) => (a.published > b.published ? -1 : 1)); return { status: 200, body: { posts }, };};Original Link: https://dev.to/davidwparker/how-to-make-an-rss-feed-in-sveltekit-1d2g
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To