Val Town Code SearchReturn to Val Town

13async function fetchRandomWikipediaArticle(): Promise<{ title: string; extract: string; pageId: number } | null> {
14  try {
15    const response = await fetch('https://en.wikipedia.org/w/api.php?action=query&format=json&prop=extracts&meta=&generator=random&formatversion=2&exsentences=1&explaintext=1&grnnamespace=0');
16    
17    if (!response.ok) {
48    <meta name="viewport" content="width=device-width, initial-scale=1.0">
49    <title>Random Wikipedia Article - Error</title>
50    <link rel="preconnect" href="https://fonts.googleapis.com">
51    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
52    <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
53    <style>
54        body {
121    <meta name="viewport" content="width=device-width, initial-scale=1.0">
122    <title>${article.title} - Random Wikipedia Article</title>
123    <link rel="preconnect" href="https://fonts.googleapis.com">
124    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
125    <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
126    <style>
127        body {

6
7- **Server-Side Rendering**: All content is fetched and rendered on the server - no JavaScript required
8- **Random Article Fetching**: Uses the Wikipedia API to fetch random articles on each page load
9- **Beautiful Design**: Dark gray background with light gray card featuring sharp corners and yellow drop shadow
10- **Smooth Animations**: CSS-only animations for the card entrance effect
12- **Responsive**: Works well on desktop and mobile devices
13- **Error Handling**: Graceful error handling with retry functionality
14- **Fast Loading**: No client-side API calls means instant content display
15
16## How it Works
17
181. When a user visits the page, the server fetches a random Wikipedia article using the Wikipedia API
192. The server renders the complete HTML with the article title and first sentence extract embedded
203. The page displays immediately with a world icon as an SVG that links to the full article
214. Users can click "Get Another Article" to reload the page and get new random content
22
23## API Used
24
25The app calls the Wikipedia API with these parameters:
26- `action=query` - Query action
27- `format=json` - JSON response format
38- **Server-Side Rendering**: Built as a TypeScript HTTP val that fetches Wikipedia data server-side
39- **No JavaScript**: Completely static HTML with CSS-only animations
40- **Wikipedia API Integration**: Fetches random articles using the Wikipedia API on the server
41- **Error Handling**: Proper error states with retry functionality
42- **Clean Architecture**: Separation of data fetching and HTML generation
43- **Performance**: Fast loading since no client-side API calls are needed
44
45## Styling