feat: add RSS feed link to blog header and improve RSS feed generation

Author: LadyBluenotes

src/routeTree.gen.ts

@@ -45,7 +45,6 @@ import { Route as LibrariesMaintainersRouteImport } from './routes/_libraries/ma
 import { Route as LibrariesLoginRouteImport } from './routes/_libraries/login'
 import { Route as LibrariesLearnRouteImport } from './routes/_libraries/learn'
 import { Route as LibrariesFeedbackLeaderboardRouteImport } from './routes/_libraries/feedback-leaderboard'
-import { Route as LibrariesExploreRouteImport } from './routes/_libraries/explore'
 import { Route as LibrariesEthosRouteImport } from './routes/_libraries/ethos'
 import { Route as LibrariesDashboardRouteImport } from './routes/_libraries/dashboard'
 import { Route as LibrariesBrandGuideRouteImport } from './routes/_libraries/brand-guide'
@@ -284,11 +283,6 @@ const LibrariesFeedbackLeaderboardRoute =
     path: '/feedback-leaderboard',
     getParentRoute: () => LibrariesRouteRoute,
   } as any)
-const LibrariesExploreRoute = LibrariesExploreRouteImport.update({
-  id: '/explore',
-  path: '/explore',
-  getParentRoute: () => LibrariesRouteRoute,
-} as any)
 const LibrariesEthosRoute = LibrariesEthosRouteImport.update({
   id: '/ethos',
   path: '/ethos',
@@ -614,7 +608,6 @@ export interface FileRoutesByFullPath {
   '/brand-guide': typeof LibrariesBrandGuideRoute
   '/dashboard': typeof LibrariesDashboardRoute
   '/ethos': typeof LibrariesEthosRoute
-  '/explore': typeof LibrariesExploreRoute
   '/feedback-leaderboard': typeof LibrariesFeedbackLeaderboardRoute
   '/learn': typeof LibrariesLearnRoute
   '/login': typeof LibrariesLoginRoute
@@ -705,7 +698,6 @@ export interface FileRoutesByTo {
   '/brand-guide': typeof LibrariesBrandGuideRoute
   '/dashboard': typeof LibrariesDashboardRoute
   '/ethos': typeof LibrariesEthosRoute
-  '/explore': typeof LibrariesExploreRoute
   '/feedback-leaderboard': typeof LibrariesFeedbackLeaderboardRoute
   '/learn': typeof LibrariesLearnRoute
   '/login': typeof LibrariesLoginRoute
@@ -801,7 +793,6 @@ export interface FileRoutesById {
   '/_libraries/brand-guide': typeof LibrariesBrandGuideRoute
   '/_libraries/dashboard': typeof LibrariesDashboardRoute
   '/_libraries/ethos': typeof LibrariesEthosRoute
-  '/_libraries/explore': typeof LibrariesExploreRoute
   '/_libraries/feedback-leaderboard': typeof LibrariesFeedbackLeaderboardRoute
   '/_libraries/learn': typeof LibrariesLearnRoute
   '/_libraries/login': typeof LibrariesLoginRoute
@@ -898,7 +889,6 @@ export interface FileRouteTypes {
     | '/brand-guide'
     | '/dashboard'
     | '/ethos'
-    | '/explore'
     | '/feedback-leaderboard'
     | '/learn'
     | '/login'
@@ -989,7 +979,6 @@ export interface FileRouteTypes {
     | '/brand-guide'
     | '/dashboard'
     | '/ethos'
-    | '/explore'
     | '/feedback-leaderboard'
     | '/learn'
     | '/login'
@@ -1084,7 +1073,6 @@ export interface FileRouteTypes {
     | '/_libraries/brand-guide'
     | '/_libraries/dashboard'
     | '/_libraries/ethos'
-    | '/_libraries/explore'
     | '/_libraries/feedback-leaderboard'
     | '/_libraries/learn'
     | '/_libraries/login'
@@ -1444,13 +1432,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LibrariesFeedbackLeaderboardRouteImport
       parentRoute: typeof LibrariesRouteRoute
     }
-    '/_libraries/explore': {
-      id: '/_libraries/explore'
-      path: '/explore'
-      fullPath: '/explore'
-      preLoaderRoute: typeof LibrariesExploreRouteImport
-      parentRoute: typeof LibrariesRouteRoute
-    }
     '/_libraries/ethos': {
       id: '/_libraries/ethos'
       path: '/ethos'
@@ -1950,7 +1931,6 @@ interface LibrariesRouteRouteChildren {
   LibrariesBrandGuideRoute: typeof LibrariesBrandGuideRoute
   LibrariesDashboardRoute: typeof LibrariesDashboardRoute
   LibrariesEthosRoute: typeof LibrariesEthosRoute
-  LibrariesExploreRoute: typeof LibrariesExploreRoute
   LibrariesFeedbackLeaderboardRoute: typeof LibrariesFeedbackLeaderboardRoute
   LibrariesLearnRoute: typeof LibrariesLearnRoute
   LibrariesLoginRoute: typeof LibrariesLoginRoute
@@ -1987,7 +1967,6 @@ const LibrariesRouteRouteChildren: LibrariesRouteRouteChildren = {
   LibrariesBrandGuideRoute: LibrariesBrandGuideRoute,
   LibrariesDashboardRoute: LibrariesDashboardRoute,
   LibrariesEthosRoute: LibrariesEthosRoute,
-  LibrariesExploreRoute: LibrariesExploreRoute,
   LibrariesFeedbackLeaderboardRoute: LibrariesFeedbackLeaderboardRoute,
   LibrariesLearnRoute: LibrariesLearnRoute,
   LibrariesLoginRoute: LibrariesLoginRoute,

src/routes/_libraries/blog.index.tsx

@@ -7,6 +7,7 @@ import { Footer } from '~/components/Footer'
 import { PostNotFound } from './blog'
 import { createServerFn } from '@tanstack/react-start'
 import { setResponseHeaders } from '@tanstack/react-start/server'
+import { RssIcon } from 'lucide-react'
 
 type BlogFrontMatter = {
   slug: string
@@ -65,7 +66,19 @@ function BlogIndex() {
     <div className="flex flex-col max-w-full min-h-screen gap-12 p-4 md:p-8 pb-0">
       <div className="flex-1 space-y-12 w-full max-w-4xl mx-auto">
         <header className="">
-          <h1 className="text-3xl font-black">Blog</h1>
+          <div className="flex gap-3 items-baseline">
+            <h1 className="text-3xl font-black">Blog</h1>
+            <a
+              href="/rss.xml"
+              target="_blank"
+              rel="noreferrer"
+              className="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors text-xl"
+              title="RSS Feed"
+            >
+              <RssIcon />
+            </a>
+          </div>
+
           <p className="text-lg mt-4 text-gray-600 dark:text-gray-400">
             The latest news and blog posts from TanStack
           </p>

src/routes/rss[.]xml.ts

@@ -1,6 +1,5 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { setResponseHeader } from '@tanstack/react-start/server'
-import { getPublishedPosts, formatAuthors } from '~/utils/blog'
 
 function escapeXml(unsafe: string): string {
   return unsafe
@@ -11,7 +10,9 @@ function escapeXml(unsafe: string): string {
     .replace(/'/g, ''')
 }
 
-function generateRSSFeed() {
+async function generateRSSFeed() {
+  const { getPublishedPosts, formatAuthors } = await import('~/utils/blog')
+
   const posts = getPublishedPosts().slice(0, 50) // Most recent 50 posts
   const siteUrl = 'https://tanstack.com'
   const buildDate = new Date().toUTCString()
@@ -30,7 +31,7 @@ function generateRSSFeed() {
           .replace(/^---[\s\S]*?---/, '')
           .trim()
         const firstParagraph = contentWithoutFrontmatter.split('\n\n')[0]
-        description = firstParagraph.replace(/!\[[^\]]*\]\([^)]*\)/g, '') // Remove images
+        description = firstParagraph.replace(/!\[[^\]]*]\([^)]*\)/g, '') // Remove images
       }
 
       return `
@@ -61,11 +62,11 @@ function generateRSSFeed() {
 }
 
 export const Route = createFileRoute('/rss.xml')({
-  // @ts-ignore server property not in route types yet
+  // @ts-expect-error server property not in route types yet
   server: {
     handlers: {
       GET: async () => {
-        const content = generateRSSFeed()
+        const content = await generateRSSFeed()
 
         setResponseHeader('Content-Type', 'application/xml; charset=utf-8')
         setResponseHeader(