Kindle RSS Reader on Val Town

This is a minimalist RSS reader designed specifically for Kindle browsers and E-ink devices. It is built as a full-stack application on Val Town using Hono, React, and SQLite.

Features

  • Kindle-Optimized UI: High-contrast, monochrome design with large touch targets and readable typography suitable for E-ink screens.
  • Fixed Navigation: "Page Up" and "Page Down" buttons fixed at the bottom of the screen to facilitate easy navigation on devices without smooth scrolling.
  • RSS/Atom Support: Fetches and parses standard RSS and Atom feeds.
  • Multiple Feeds & Unread Counts: Manage a list of your favorite feeds and see unread article counts for each.
  • Read Status Tracking: Articles are marked as read automatically when you scroll to the bottom, or manually via a toggle button.
  • Persistence:
    • Subscriptions: Stored in Val Town's hosted SQLite database.
    • Read Status & Cache: Stored in the browser's localStorage to persist across sessions on the Kindle.
  • Add Feeds: Easily add new feeds by URL directly from the interface.

Architecture

The application is structured as a full-stack project:

  • Backend (backend/): A Hono server running on Val Town (Deno).
    • API: Exposes REST endpoints to fetch feeds (/api/feed), list feeds (/api/feeds), and add new feeds.
    • Database: Uses Val Town's SQLite to persist the list of subscribed feeds.
    • Proxying: Acts as a proxy to fetch and parse external RSS feeds, solving CORS issues and simplifying the data for the frontend.
  • Frontend (frontend/): A React application running in the browser.
    • No Build Step: Uses esm.sh to import React and other dependencies directly in the browser, targeting ES2019 for compatibility with older Kindle browsers (Chrome 80).
    • Styling: Uses a lightweight, semantic CSS file (style.css) instead of heavy frameworks, ensuring fast loading and rendering on low-power devices.
    • Local Storage: Manages article read/unread status and feed item caching locally to provide unread counts and a seamless reading experience.
  • Shared (shared/): Types and interfaces shared between the frontend and backend to ensure type safety.

Directory Structure

├── backend/
│   ├── database/
│   │   ├── migrations.ts    # Database schema creation
│   │   ├── queries.ts       # Database access functions
│   │   └── README.md
│   └── README.md
├── frontend/
│   ├── components/
│   │   └── App.tsx          # Main React application logic
│   ├── favicon.svg
│   ├── index.html           # Main HTML entry point
│   ├── index.tsx            # React hydration and entry
│   ├── README.md
│   └── style.css            # Custom CSS for Kindle optimization
├── shared/
│   ├── README.md
│   └── utils.ts             # Shared Types (Feed, FeedInfo, FeedItem)
├── index.ts                 # Main Hono server entry point
├── README.md                # This file
└── deno.json                # Deno configuration

Usage

  1. Open the Val's URL in your Kindle's "Experimental Browser".
  2. Select a feed from the list to view articles. Unread counts appear after the first visit to a feed.
  3. Read articles by clicking on them. They will be marked as read when you scroll to the bottom.
  4. Use the "Page Up" and "Page Down" buttons at the bottom of the screen for navigation.
  5. Click "Add New Feed" to subscribe to a new RSS or Atom URL.