Val Town Code SearchReturn to Val Town

11}
12
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) {
32    return null;
33  } catch (error) {
34    console.error('Error fetching Wikipedia article:', error);
35    return null;
36  }
38
39export default async function(req: Request): Promise<Response> {
40  const article = await fetchRandomWikipediaArticle();
41  
42  if (!article) {
100    <div class="error-card">
101        <h1>Oops! Something went wrong</h1>
102        <p>Unable to fetch a Wikipedia article. Please try again.</p>
103        <a href="/" class="retry-link">Try Again</a>
104    </div>

5## Features
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
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
36## Technical Implementation
37
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