Random Wikipedia Article Viewer

A beautiful, responsive webpage that displays random Wikipedia articles in an elegant centered layout. Completely JavaScript-free - all content is rendered on the server.

Features

Server-Side Rendering: All content is fetched and rendered on the server - no JavaScript required
Random Article Fetching: Uses the Wikipedia API to fetch random articles on each page load
Beautiful Design: Dark gray background with light gray card featuring sharp corners and yellow drop shadow
Smooth Animations: CSS-only animations for the card entrance effect
World Icon: Clean SVG world icon that links to the full Wikipedia article
Responsive: Works well on desktop and mobile devices
Error Handling: Graceful error handling with retry functionality
Fast Loading: No client-side API calls means instant content display

How it Works

When a user visits the page, the server fetches a random Wikipedia article using the Wikipedia API
The server renders the complete HTML with the article title and first sentence extract embedded
The page displays immediately with a world icon as an SVG that links to the full article
Users can click "Get Another Article" to reload the page and get new random content

API Used

The app calls the Wikipedia API with these parameters:

action=query - Query action
format=json - JSON response format
prop=extracts - Get article extracts
generator=random - Generate random articles
formatversion=2 - Use format version 2
exsentences=1 - Get only the first sentence
explaintext=1 - Get plain text (no HTML)
grnnamespace=0 - Only main namespace articles
origin=* - Allow CORS requests

Technical Implementation

Server-Side Rendering: Built as a TypeScript HTTP val that fetches Wikipedia data server-side
No JavaScript: Completely static HTML with CSS-only animations
Wikipedia API Integration: Fetches random articles using the Wikipedia API on the server
Error Handling: Proper error states with retry functionality
Clean Architecture: Separation of data fetching and HTML generation
Performance: Fast loading since no client-side API calls are needed

Styling

Uses Inconsolata monospace font for a modern, technical aesthetic
Dark gray background (#2a2a2a) for a modern, sophisticated look
Light gray card (#f5f5f5) with sharp corners for a clean, geometric aesthetic
Bold yellow drop shadow (#ffd700) that creates depth and visual interest
CSS-only hover effects and animations
Responsive design that works on all devices
Consistent yellow shadow theme across all interactive elements