feat: add XSL stylesheet for feeds and fix sorting order

src/components/RssXml.astro

@@ -2,10 +2,11 @@
 import { site } from '../data/site';
 import { dateToISO } from '../utils';
 
-import { mapping } from '../mdx-components';
+import { rssMapping } from '../mdx-components';
 
 const { allPosts } = Astro.props;
 const rssHeaderXml = `<?xml version="1.0" encoding="UTF-8"?>
+<?xml-stylesheet href="/rss.xsl" type="text/xsl"?>
 <rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/">
 	<channel>
 		<title>${site.title}</title>
@@ -22,14 +23,14 @@ const rssFooterXml = `	</channel>
 		<>
 			<Fragment
 				set:html={`    <item>
-			<title>${post.frontmatter.title}</title>
+			<title>${post.frontmatter.title.replace('&', '&amp;')}</title>
 			<link>${`${site.url}/${post.frontmatter.slug}/`}</link>
 			<guid>${`${site.url}/${post.frontmatter.slug}/`}</guid>
 			<description><![CDATA[${post.frontmatter.description}]]></description>
 			<pubDate>${dateToISO(post.frontmatter.date)}</pubDate>
 			<content:encoded><![CDATA[`}
 			/>
-			<post.Content components={mapping} />
+			<post.Content components={rssMapping} />
 			<Fragment
 				set:html={`]]></content:encoded>
 		</item>

src/mdx-components.ts

@@ -79,3 +79,32 @@ export const mapping = {
 	Verse,
 	YouTube,
 };
+
+// Mapping for RSS feed to reduce the size of the feed
+export const rssMapping = {
+	AffiliateLink,
+	AmazonBook,
+	Banner,
+	Blockquote,
+	Book,
+	Bookshelf,
+	ColorStack,
+	ColorSwatch,
+	DisplayBox,
+	DownloadLink,
+	EmailLink,
+	Figure,
+	Flag,
+	Image,
+	MarkdownImage,
+	MoreLink,
+	NetflixFlag,
+	OdyseeVideo,
+	Picture,
+	PrimeVideoFlag,
+	ProjectIntro,
+	Pullquote,
+	ThemeBox,
+	Verse,
+	YouTube,
+};

src/pages/rss-ai-art.xml.js

@@ -2,10 +2,14 @@ import rss from '@astrojs/rss';
 import { getCollection } from 'astro:content';
 
 import { site } from '../data/site';
+import { sortBySortKey } from '../utils';
 
 export async function get(context) {
 	const aiArt = await getCollection('ai-art');
+	aiArt.sort(sortBySortKey);
+
 	return rss({
+		stylesheet: '/rss.xsl',
 		title: `${site.title} (AI Art)`,
 		description: 'This is a collection of AI art pieces I’ve created with Stable Diffusion.',
 		site: context.site,

src/pages/rss-haiku.xml.js

@@ -2,10 +2,14 @@ import rss from '@astrojs/rss';
 import { getCollection } from 'astro:content';
 
 import { site } from '../data/site';
+import { sortByDate } from '../utils';
 
 export async function get(context) {
 	const haiku = await getCollection('haiku');
+	haiku.sort(sortByDate);
+
 	return rss({
+		stylesheet: '/rss.xsl',
 		title: `${site.title} (Haiku)`,
 		description: 'This is an ever-growing collection of Haiku I have written.',
 		site: context.site,

src/pages/rss-sketchnotes.xml.js

@@ -2,10 +2,14 @@ import rss from '@astrojs/rss';
 import { getCollection } from 'astro:content';
 
 import { site } from '../data/site';
+import { sortBySortKey } from '../utils';
 
 export async function get(context) {
 	const sketchnotes = await getCollection('sketchnotes');
+	sketchnotes.sort(sortBySortKey).reverse();
+
 	return rss({
+		stylesheet: '/rss.xsl',
 		title: `${site.title} (Sketchnotes)`,
 		description: 'This is a collection of Sketchnotes I’ve drawn.',
 		site: context.site,