[V0_FILE]typescriptreact:file="app/actions/fetchFeed.ts" isEdit="true" isMerged="true" 'use server' import Parser from 'rss-parser' import { load } from 'cheerio' import { parse } from 'node-html-parser' async function fetchUrl(url: string, maxRedirects = 5): Promise<{ contentType: string | null; text: string; finalUrl: string }> { if (maxRedirects === 0) { throw new Error('Max redirects reached') } const response = await fetch(url, { redirect: 'manual' }) if (response.status >= 300 && response.status < 400) { const redirectUrl = response.headers.get('location') if (redirectUrl) { return fetchUrl(new URL(redirectUrl, url).toString(), maxRedirects - 1) } } const contentType = response.headers.get('content-type') const text = await response.text() return { contentType, text, finalUrl: url } } function extractFeedUrls(html: string): { rss: string | null; atom: string | null } { const $ = load(html) const rssLink = $('link[type="application/rss+xml"]').attr('href') const atomLink = $('link[type="application/atom+xml"]').attr('href') return { rss: rssLink || null, atom: atomLink || null } } export async function fetchFeed(url: string) { try { const { contentType, text, finalUrl } = await fetchUrl(url) if (contentType?.includes('xml') || contentType?.includes('rss') || contentType?.includes('atom')) { const parser = new Parser() const feed = await parser.parseString(text) const favicon = await getFavicon(finalUrl) return { success: true, feed: { ...feed, favicon }, originalUrl: url, finalUrl } } else if (contentType?.includes('html')) { const { rss: rssUrl, atom: atomUrl } = extractFeedUrls(text) const feedUrl = rssUrl || atomUrl if (feedUrl) { const absoluteFeedUrl = new URL(feedUrl, finalUrl).toString() const { contentType: feedContentType, text: feedText, finalUrl: feedFinalUrl } = await fetchUrl(absoluteFeedUrl) if (feedContentType?.includes('xml') || feedContentType?.includes('rss') || feedContentType?.includes('atom')) { const parser = new Parser() const feed = await parser.parseString(feedText) const favicon = await getFavicon(finalUrl) return { success: true, feed: { ...feed, favicon }, originalUrl: url, finalUrl: feedFinalUrl, feedUrl: absoluteFeedUrl } } } return { success: false, error: 'No RSS or Atom feed found on the page', originalUrl: url, finalUrl } } return { success: false, error: 'Unsupported content type', originalUrl: url, finalUrl } } catch (error) { console.error('Error fetching feed:', error) return { success: false, error: 'Failed to fetch or parse the feed', originalUrl: url } } } async function getFavicon(url: string): Promise { try { const { text, finalUrl } = await fetchUrl(url) const root = parse(text) const faviconLink = root.querySelector('link[rel="shortcut icon"]') || root.querySelector('link[rel="icon"]') if (faviconLink) { const faviconHref = faviconLink.getAttribute('href') if (faviconHref) { return new URL(faviconHref, finalUrl).toString() } } return new URL('/favicon.ico', finalUrl).toString() } catch (error) { console.error('Error fetching favicon:', error) return null } } [V0_FILE]typescriptreact:file="app/components/FeedInput.tsx" isEdit="true" isMerged="true" 'use client' import { useState } from 'react' import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Alert, AlertDescription } from "@/components/ui/alert" interface FeedInputProps { onFetchFeed: (url: string) => void feedUrl: string | null finalUrl: string | null feedType: 'RSS' | 'Atom' | null } export function FeedInput({ onFetchFeed, feedUrl, finalUrl, feedType }: FeedInputProps) { const [url, setUrl] = useState('') const handleSubmit = (e: React.FormEvent) => { e.preventDefault() onFetchFeed(url) } return (

{feedUrl && feedUrl !== url && ( {feedType} feed found: {feedUrl} )} {finalUrl && finalUrl !== url && finalUrl !== feedUrl && ( Redirected to: {finalUrl} )}

) } [V0_FILE]typescriptreact:file="app/components/FeedDisplay.tsx" isEdit="true" isMerged="true" import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card" import { ScrollArea } from "@/components/ui/scroll-area" import Image from "next/image" interface FeedDisplayProps { feed: any // You might want to create a more specific type for the feed } export function FeedDisplay({ feed }: FeedDisplayProps) { const feedImage = feed.image?.url || feed.favicon || '/placeholder.svg' return (

{feed.title} {feed.description}

Last updated: {feed.lastBuildDate ? new Date(feed.lastBuildDate).toLocaleString() : 'Unknown'}

{feed.items.map((item: any, index: number) => ( {item.title} {item.pubDate ? new Date(item.pubDate).toLocaleString() : 'Unknown date'}

{item.contentSnippet || 'No description available'}

Read more ))}

) } [V0_FILE]typescriptreact:file="app/components/ThemeToggle.tsx" isEdit="true" isMerged="true" 'use client' import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Moon, Sun, Laptop } from 'lucide-react' import { useEffect, useState } from 'react' export function ThemeToggle() { const { theme, setTheme } = useTheme() const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) }, []) if (!mounted) { return null } return ( setTheme("light")}> Light setTheme("dark")}> Dark setTheme("system")}> System ) } [V0_FILE]typescriptreact:file="app/components/theme-provider.tsx" isEdit="true" isMerged="true" 'use client' import * as React from "react" import { ThemeProvider as NextThemesProvider } from "next-themes" import { type ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 212.7 26.8% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Add this new style for smooth theme transitions */ * { transition: background-color 0.3s ease, color 0.3s ease; } [V0_FILE]typescriptreact:file="app/components/Header.tsx" isEdit="true" 'use client' import { ThemeToggle } from './ThemeToggle' import Link from 'next/link' export function Header() { return (

Eleanor's Feed Explorer

Prompted with love by Eleanor from{' '} intellectronica.net

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" 'use client' import { useState } from 'react' import { FeedInput } from './components/FeedInput' import { FeedDisplay } from './components/FeedDisplay' import { fetchFeed } from './actions/fetchFeed' import { Alert, AlertDescription } from "@/components/ui/alert" export default function Home() { const [feed, setFeed] = useState(null) const [error, setError] = useState(null) const [feedUrl, setFeedUrl] = useState(null) const [finalUrl, setFinalUrl] = useState(null) const [feedType, setFeedType] = useState<'RSS' | 'Atom' | null>(null) const handleFetchFeed = async (url: string) => { const result = await fetchFeed(url) if (result.success) { setFeed(result.feed) setError(null) setFeedUrl(result.feedUrl || result.originalUrl) setFinalUrl(result.finalUrl) setFeedType(result.feed.type === 'atom' ? 'Atom' : 'RSS') } else { setError(result.error) setFeed(null) setFeedUrl(null) setFinalUrl(result.finalUrl || null) setFeedType(null) } } return (

{error && ( {error} )} {feed && }

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" import './globals.css' import type { Metadata } from 'next' import { Inter } from 'next/font/google' import { ThemeProvider } from "./components/theme-provider" import { Header } from './components/Header' const inter = Inter({ subsets: ['latin'] }) export const metadata: Metadata = { title: "Eleanor's Feed Explorer", description: 'Explore and read RSS and Atom feeds with ease', } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This