Hvad er et RSS feed?

RSS står for Really Simple Syndication, formatet er XML, som bruges til screen-readers. RSS fungerer ved at der ligger en fil på et websted i XML format, som kan læses af såkaldte screenreadere. Filen indeholder detaljer om hvert stykke indhold, et websted har offentliggjort.

Hver gang et websted udgiver et nyt stykke indhold, genereres detaljer om dette indhold – inklusive den fulde tekst af indholdet eller et resumé, udgivelsesdato, forfatter, link osv. – automatisk i filen og vises i omvendt kronologisk rækkefølge.

Lets dive right in.

Create the API:

$lib/get-posts.js

touch get-posts.js

Udfyldes således:

export async function getPosts() {
	const posts = await Object.entries(import.meta.globEager('/blog/**/*.md'))
		// get post metadata
		.map(([, post]) => post.metadata)
		// sort by date
		.sort((a, b) => (a.date < b.date ? 1 : -1));

	return posts;
}

Opret RSS-filen

Tilføj en ny fil i ruteren og navngiv den rss.xml.js

rss.xml.js

Hvis du går til localhost:3000/rss.xml får du en 404, så vent lidt endnu.

I rss.xml.js skal vi udfylde RSS XML med dynamiske data. Vi vil bruge frontmatter fra vores markdown-filer. For at opnå det skal vi oprette en get() funktion, der returnerer vores frontmatter.

import { getPosts } from '$lib/get-posts';

export const siteTitle = 'lazydev';
export const author = 'Christian Rau';
export const siteDescription =
	'Tips and tricks on how to build your next web application with confidence using JavaScript, Sveltekit or Nuxt.';
export const website = 'https://lazydev.online';

export async function get() {
	const posts = await getPosts();
	const body = xml(posts);

	const headers = {
		'Cache-Control': 'max-age=0, s-maxage=3600',
		'Content-Type': 'application/xml'
	};
	return {
		headers,
		body
	};
}

Før vi kan se noget i browseren, skal vi sætte en HTTP header op.

Tilføjer http headers.

Da vi ønsker at undgå 404 og få et output, når vi går til localhost:3000/rss.xml, skal vi tilføje to http-headere:

Cache-Control-headeren og Content-Type-headeren.

The Cache-Control Header:

En cache-kontrol-header er en HTTP-header, der bruges til at specificere browser-cache-politikker i både klientanmodninger og serversvar. Politikker inkluderer, hvordan en ressource cachelagres, hvor den er cachelagret og dens maksimale alder inden udløb.

We add max-age=0, s-maxage=3600 to the Cache-Control header:

const headers = {
	'Cache-Control': 'max-age=0, s-maxage=3600'
};

return {
	headers
};

The Content-Type Header:

Vi vil gerne fortælle browseren, at vi leverer vores rss i xml.

Det gør vi ved at tilføje application/xml til Content-Type-headeren:

const headers = {
	'Cache-Control': 'max-age=0, s-maxage=3600',
	'Content-Type': 'application/xml'
};

return {
	headers
};

Til sidst skal vi oprette og udfylde XML-strukturen

I mapping sektionen looper vi over alle vores indlæg


const xml = (
	posts
) => `<rss xmlns:dc="https://purl.org/dc/elements/1.1/" xmlns:content="https://purl.org/rss/1.0/modules/content/" xmlns:atom="https://www.w3.org/2005/Atom" version="2.0">
  <channel>
    <title>
    <![CDATA[ ${siteTitle} blog - by Christian Rau ]]>
    </title>
    <description>
    <![CDATA[ ${siteDescription} ]]>
    </description>
    <link>${website}</link>
    <atom:link href="${website}/rss.xml" rel="self" type="application/rss+xml"/>
    ${posts
			.map(
				(post) =>
					`
        <item>
          <title>
          <![CDATA[ ${post.title} ]]>
          </title>
          <description>
          <![CDATA[ ${post.description} ]]>
          </description>
          <link>${website}/posts/${post.slug}/</link>
          <guid isPermaLink="false">${website}/posts/${post.slug}/</guid>
          <pubDate>${new Date(post.date).toUTCString()}</pubDate>
          <content:encoded>
            <div style="margin-top: 50px; font-style: italic;">
              <strong>
                <a href="${website}/posts/${post.slug}">
                  Keep reading...
                </a>
              </strong>
            </div>
          </content:encoded>
        </item>
      `
			)
			.join('')}
  </channel>
</rss>`;

Det færdige rss.xml.js til reference:

export const siteTitle = 'lazydev';
export const author = 'Christian Rau';
export const siteDescription =
	'Tips and tricks on how to build your next web application with confidence using JavaScript, Sveltekit or Nuxt.';
export const website = 'https://lazydev.online';

export async function get() {
	const posts = await getPosts();
	const body = xml(posts);

	const headers = {
		'Cache-Control': 'max-age=0, s-maxage=3600',
		'Content-Type': 'application/xml'
	};
	return {
		headers,
		body
	};
}

const xml = (
	posts
) => `<rss xmlns:dc="https://purl.org/dc/elements/1.1/" xmlns:content="https://purl.org/rss/1.0/modules/content/" xmlns:atom="https://www.w3.org/2005/Atom" version="2.0">
  <channel>
    <title>
    <![CDATA[ ${siteTitle} blog - by Christian Rau ]]>
    </title>
    <description>
    <![CDATA[ ${siteDescription} ]]>
    </description>
    <link>${website}</link>
    <atom:link href="${website}/rss.xml" rel="self" type="application/rss+xml"/>
    ${posts
			.map(
				(post) =>
					`
        <item>
          <title>
          <![CDATA[ ${post.title} ]]>
          </title>
          <description>
          <![CDATA[ ${post.description} ]]>
          </description>
          <link>${website}/posts/${post.slug}/</link>
          <guid isPermaLink="false">${website}/posts/${post.slug}/</guid>
          <pubDate>${new Date(post.date).toUTCString()}</pubDate>
          <content:encoded>
            <div style="margin-top: 50px; font-style: italic;">
              <strong>
                <a href="${website}/posts/${post.slug}">
                  Keep reading...
                </a>
              </strong>  
            </div>
          </content:encoded>
        </item>
      `
			)
			.join('')}
  </channel>
</rss>`;