[V0_FILE]typescriptreact:file="app/actions/fetchRss.ts" "use server" import { parseString } from "xml2js" export async function fetchRss(url: string) { try { const response = await fetch(url) if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`) } const xml = await response.text() return new Promise((resolve, reject) => { parseString(xml, (err, result) => { if (err) { reject(err) } else { if (!result.rss || !result.rss.channel || !result.rss.channel[0].item) { reject(new Error("Invalid RSS format")) } const items = result.rss.channel[0].item.map((item: any) => ({ title: item.title[0], link: item.link[0], })) resolve(items) } }) }) } catch (error) { console.error("Error fetching RSS:", error) throw error } } [V0_FILE]typescriptreact:file="app/page.tsx" import { redirect } from "next/navigation" import RssForm from "./components/RssForm" import { encodeBase64 } from "./utils/base64" export default function Home() { async function handleSubmit(formData: FormData) { "use server" const rssUrl = formData.get("rssUrl") as string if (rssUrl) { const encodedUrl = encodeBase64(rssUrl) redirect(`/reader/${encodedUrl}`) } } return (

RSS Reader for Visually Impaired

) } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground-rgb: 255, 255, 255; --background-start-rgb: 0, 0, 0; --background-end-rgb: 0, 0, 0; } body { color: rgb(var(--foreground-rgb)); background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); } * { box-sizing: border-box; } :focus { outline: 3px solid #fff; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } [V0_FILE]typescriptreact:file="app/components/RssForm.tsx" export default function RssForm({ handleSubmit }: { handleSubmit: (formData: FormData) => void }) { return ( ) } [V0_FILE]typescriptreact:file="app/reader/[encodedUrl]/page.tsx" import { notFound } from "next/navigation" import RssReader from "@/app/components/RssReader" import { fetchRss } from "@/app/actions/fetchRss" import { decodeBase64 } from "@/app/utils/base64" export default async function ReaderPage({ params }: { params: { encodedUrl: string } }) { const decodedUrl = decodeBase64(params.encodedUrl) try { const articles = (await fetchRss(decodedUrl)) as { title: string; link: string }[] return (

RSS Reader for Visually Impaired

) } catch (error) { console.error("Error fetching RSS:", error) notFound() } } [V0_FILE]typescriptreact:file="app/not-found.tsx" import Link from "next/link" export default function NotFound() { return (

404 - Page Not Found

Sorry, we couldn't fetch the RSS feed or find the page you're looking for.

Go back to Home

) } [V0_FILE]typescriptreact:file="app/utils/base64.ts" export function encodeBase64(str: string): string { return Buffer.from(str).toString("base64") } export function decodeBase64(str: string): string { return Buffer.from(str, "base64").toString("utf-8") } [V0_FILE]typescriptreact:file="app/actions/fetchArticleContent.ts" "use server" import { load } from "cheerio" export async function fetchArticleContent(url: string) { try { const response = await fetch(url) const html = await response.text() const $ = load(html) // Remove script and style tags $("script, style").remove() // Extract the main content (this is a simple example and might need adjustment based on the target websites) const content = $("article, .content, #content, .post, .entry, .main").first().html() || $("body").html() return content } catch (error) { console.error("Error fetching article content:", error) return "Unable to fetch article content. Please try again later." } } [V0_FILE]typescriptreact:file="app/components/RssReader.tsx" "use client" import { useState, useEffect, useRef } from "react" import { fetchArticleContent } from "../actions/fetchArticleContent" interface Article { title: string link: string } export default function RssReader({ initialArticles, rssUrl }: { initialArticles: Article[]; rssUrl: string }) { const [articles, setArticles] = useState(initialArticles) const [focusedIndex, setFocusedIndex] = useState(0) const [articleContent, setArticleContent] = useState("") const articleRefs = useRef<(HTMLButtonElement | null)[]>([]) useEffect(() => { if (articles.length > 0) { articleRefs.current[0]?.focus() loadArticleContent(articles[0].link) } }, [articles]) const handleKeyDown = (e: React.KeyboardEvent, index: number) => { if (e.key === "Tab") { e.preventDefault() const newIndex = (index + 1) % articles.length setFocusedIndex(newIndex) articleRefs.current[newIndex]?.focus() loadArticleContent(articles[newIndex].link) } } const loadArticleContent = async (url: string) => { const content = await fetchArticleContent(url) setArticleContent(content) } return (

RSS Feed: {rssUrl}

Articles:

Article Content:

) } [V0_FILE]json:file="package.json" isQuickEdit="true" { "name": "my-project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "cheerio": "^1.0.0-rc.12" } } [V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true" import "./globals.css" import { Inter } from "next/font/google" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "RSS Reader for Visually Impaired", description: "An accessible RSS reader for older people with visual impairments", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) }