Clark 24/7 - News and Events

A modern Svelte 5 application that displays the latest news articles from Clark College's RSS feed. Features accessibility-first design, Clark College branding, and responsive layout.

Features

• ✨ Modern UI: Clean, responsive design with Clark College brand colors
• 📰 RSS Integration: Fetches latest news from Clark College's RSS feed
• ♿ Accessibility: WCAG 2.1 AAA compliant with screen reader support
• 🚀 Performance: Fast loading with caching and optimized images
• 📱 Responsive: Works on desktop, tablet, and mobile devices
• 🎨 Typography: Uses Atkinson Hyperlegible font for enhanced readability

Technology Stack

• Framework: Svelte 5 with TypeScript
• Build Tool: Vite
• Styling: CSS with custom properties
• Font: Atkinson Hyperlegible (accessibility-focused)
• API: RSS2JSON service for CORS proxy

Design System

Colors

• Primary Navy: #003366
• Primary Light: #0066CC
• Primary Dark: #002244
• Accent Gold: #FFD700

Typography

• Font Family: Atkinson Hyperlegible
• Designed for enhanced readability and accessibility

Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Clone the repository

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm run dev
   

4. Open your browser and navigate to http://localhost:5173

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run check - Run TypeScript and Svelte checks

Project Structure

src/
├── lib/                    # Reusable components
│   ├── Header.svelte      # Clark College branded header
│   ├── NewsItem.svelte    # Individual news article component
│   ├── LoadingSpinner.svelte
│   └── ErrorMessage.svelte
├── services/
│   └── newsService.ts     # RSS feed fetching logic
├── types.ts               # TypeScript type definitions
├── App.svelte            # Main application component
├── app.css               # Global styles and design system
└── main.ts               # Application entry point

API Integration

The app uses the RSS2JSON service to fetch and parse Clark College's RSS feed:

• Feed URL: https://news.clark.edu/feed/
• API Endpoint: https://api.rss2json.com/v1/api.json
• Caching: 24-hour cache to reduce API calls
• Fallback: Local storage backup for offline functionality

Accessibility Features

• Semantic HTML structure
• ARIA labels and live regions
• Keyboard navigation support
• Screen reader compatibility
• High contrast mode support
• Reduced motion preferences
• Focus management
• Alt text for images

Performance Optimizations

• Image lazy loading
• RSS feed caching
• Optimized bundle size
• CSS custom properties for theming
• Progressive enhancement

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

This project follows modern web development best practices:

• TypeScript for type safety
• Svelte 5 runes for reactivity
• Accessibility-first design
• Mobile-first responsive design
• Clean, semantic HTML

License

This project is for educational and demonstration purposes.