feat(feed): blog

src/app/[lang]/blog/page.module.scss

@@ -1,6 +1,18 @@
 .container {
  margin: 1rem 10%;
 
+ header {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+
+ svg {
+ width: 32px;
+ height: 32px;
+ }
+ }
+
  .cardContainer {
  display: flex;
  flex-wrap: wrap;

src/app/[lang]/blog/page.tsx

@@ -1,3 +1,5 @@
+import Link from 'next/link';
+import { FaRss } from 'react-icons/fa6';
 import { getBlogMetadata } from '@/lib/getcontent';
 import LocalizedMessage from '@/components/i18n/localizedMessage';
 import BlogCard from '@/components/blog/blogcard';
@@ -18,9 +20,14 @@ const Page: FC<PageProps> = async ({ params }) => {
  const metaDataBlog = await getBlogMetadata(params.lang);
  return (
  <div className={styles.container}>
- <h1>
- <LocalizedMessage id='app.blog.tilte' />
- </h1>
+ <header>
+ <h1>
+ <LocalizedMessage id='app.blog.tilte' />
+ </h1>
+ <Link href='/feed/blog.xml' passHref>
+ <FaRss />
+ </Link>
+ </header>
  {metaDataBlog.length === 0 ? (
  <LocalizedMessage id='app.blog.empty' />
  ) : (

src/app/feed/blog.xml/route.ts

@@ -0,0 +1,46 @@
+import { getRssData } from '@/lib/getcontent';
+
+export async function GET(request: Request) {
+ try {
+ const rssData = await getRssData();
+
+ const xmlItems = rssData
+ .map(
+ (item) => `
+ <item>
+ <title xml:lang="${item.lang}">${item.title}</title>
+ <link>https://augustinmauroy.github.io/${item.lang}/blog/${
+ item.slug
+ }</link>
+ <pubDate>${item.date.toUTCString()}</pubDate>
+ <description xml:lang="${item.lang}">${
+ item.description
+ }</description>
+ </item>
+ `,
+ )
+ .join('\n');
+
+ const rssContent = `
+ <?xml version="1.0" encoding="UTF-8"?>
+ <rss version="2.0">
+ <channel>
+ <title>Votre titre de flux RSS</title>
+ <link>https://augustinmauroy.github.io/blog</link>
+ <description>Votre description de flux RSS</description>
+ ${xmlItems}
+ </channel>
+ </rss>
+ `;
+
+ return new Response(rssContent, {
+ headers: {
+ 'content-type': 'application/xml;charset=UTF-8',
+ },
+ });
+ } catch (error) {
+ return new Response('error', {
+ status: 500,
+ });
+ }
+}

src/lib/getcontent.ts

@@ -102,4 +102,40 @@ async function getBlogMetadata(lang: string): Promise<BlogMetadata[]> {
  return uniqueBlogMetadata;
 }
 
-export { getContentBySlug, getAllSlugs, getBlogMetadata };
+async function getRssData() {
+ // same as getBlogMetadata but all items have an en lang
+ const allSlugs = getAllSlugs('posts');
+
+ const blogMetadata: BlogMetadata[] = [];
+
+ for (const slug of allSlugs) {
+ const rawContent = getContentBySlug(`posts/${slug.slug}`, slug.lang);
+ if (rawContent) {
+ const { frontmatter } = await compileMDX<BlogFrontMatter>({
+ source: rawContent,
+ options: { parseFrontmatter: true },
+ });
+
+ const blogMeta: BlogMetadata = {
+ slug: slug.slug,
+ lang: slug.lang,
+ thumbnail: frontmatter.thumbnail,
+ title: frontmatter.title,
+ description: frontmatter.description,
+ date: frontmatter.date,
+ };
+
+ blogMetadata.push(blogMeta);
+ }
+ }
+
+ blogMetadata.sort((a, b) => {
+ const dateA = new Date(a.date);
+ const dateB = new Date(b.date);
+ return dateB.getTime() - dateA.getTime();
+ });
+
+ return blogMetadata;
+}
+
+export { getContentBySlug, getAllSlugs, getBlogMetadata, getRssData };