`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys)\n unless otherwise specified\n- **View Source:** Add a view source link by importing & using\n `import.meta.url.replace(\"ems.sh\", \"val.town)\"` (or passing this data to the\n client) and include `target=\"_top\"` attribute\n- **Error Debugging:** Add\n `` to HTML to capture\n client-side errors\n- **Environment Variables:** Use `Deno.env.get('keyname')` with defensive checks:\n ```ts\n const apiKey = Deno.env.get(\"API_KEY\");\n if (!apiKey) {\n throw new Error(\"API_KEY not configured\");\n }\n ```\n Generally prefer APIs that don't require keys when possible.\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure\n compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer\n simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with\n `?deps=react@18.2.0,react-dom@18.2.0` and start the file with\n `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same\n version\n- **Styling:** Default to using TailwindCSS via\n `` unless otherwise\n specified\n\n### Error Handling\n\nFor HTTP vals, handle errors gracefully and return appropriate status codes:\n\n```ts\nexport default async function (req: Request): Promise {\n try {\n // Your logic here\n return new Response(\"Success\");\n } catch (error) {\n return new Response(`Error: ${error.message}`, { status: 500 });\n }\n}\n```\n\nFor non-HTTP vals, let errors bubble up with full context rather than catching\nand merely logging them.\n\n### CORS Headers\n\nWhen building APIs consumed by browsers, include CORS headers:\n\n```ts\nreturn new Response(JSON.stringify(data), {\n headers: {\n \"Content-Type\": \"application/json\",\n \"Access-Control-Allow-Origin\": \"*\",\n },\n});\n```\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project\n files:\n\n ```ts\n import {\n readFile,\n serveFile,\n } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async (c) => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n\n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to\n see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Database Patterns\n\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:**\n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of\n React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with\n `export default app.fetch // This is the entry point for HTTP vals`\n\n6. **HTTP Endpoint Discovery:**\n - HTTP vals have a `links.endpoint` field with the live deployment URL\n - Use this to test and verify your val is working correctly\n",[],[248],"45bc0944-fa5f-11f0-8ddd-42dde27851f2",".vtignore","45bc0a0c-fa5f-11f0-8ddd-42dde27851f2",4,["D",1769394754640],".git\n.vscode\n.cursor\n.DS_Store\nnode_modules\nvendor",[],[256],"78e042ae-fa64-11f0-bcd6-42dde27851f2","utils.ts","1ccac426-fa64-11f0-93af-42dde27851f2","1c1fdf34-fa64-11f0-b434-42dde27851f2",34,["D",1769396988001],"// Shared utility functions\n\n/**\n * Parse X.com or Twitter.com URLs to extract username and status ID\n */\nexport function parseXUrl(url: string): { username: string; statusId: string } | null {\n // Handle both x.com and twitter.com URLs\n const patterns = [\n /(?:https?:\\/\\/)?(?:www\\.)?(?:x\\.com|twitter\\.com)\\/([^/]+)\\/status\\/(\\d+)/i,\n ];\n\n for (const pattern of patterns) {\n const match = url.match(pattern);\n if (match) {\n return {\n username: match[1],\n statusId: match[2],\n };\n }\n }\n\n return null;\n}\n\n/**\n * Format a date as relative time (e.g., \"2 hours ago\", \"Yesterday\")\n */\nexport function formatRelativeDate(timestamp: string): string {\n const date = new Date(timestamp);\n const now = new Date();\n const diffInMs = now.getTime() - date.getTime();\n const diffInHours = diffInMs / (1000 * 60 * 60);\n\n if (diffInHours < 1) return \"Just now\";\n if (diffInHours < 24) return `${Math.floor(diffInHours)} hours ago`;\n if (diffInHours < 48) return \"Yesterday\";\n if (diffInHours < 168) return `${Math.floor(diffInHours / 24)} days ago`;\n\n return date.toLocaleDateString(\"en-US\", {\n year: \"numeric\",\n month: \"long\",\n day: \"numeric\",\n });\n}\n\n/**\n * Escape HTML special characters\n */\nexport function escapeHtml(text: string | undefined | null): string {\n if (text == null) return \"\";\n const htmlEntities: Record = {\n \"&\": \"&\",\n \"<\": \"<\",\n \">\": \">\",\n '\"': \""\",\n \"'\": \"'\",\n };\n return text.replace(/[&<>\"']/g, (char) => htmlEntities[char]);\n}\n",[],[272,264],"shared","ad6af0b8-fa65-11f0-acb2-42dde27851f2","types.ts","1ccccafa-fa64-11f0-a0b2-42dde27851f2",38,["D",1769397505641],2,"// FXTwitter API Response Types\n\nexport interface InlineStyleRange {\n offset: number;\n length: number;\n style: string;\n}\n\nexport interface EntityRange {\n offset: number;\n length: number;\n key: number;\n}\n\nexport interface ContentBlock {\n type: string;\n text: string;\n inlineStyleRanges: InlineStyleRange[];\n entityRanges: EntityRange[];\n}\n\nexport interface EntityData {\n url?: string;\n language?: string;\n markdown?: string;\n [key: string]: unknown;\n}\n\nexport interface Entity {\n type: string;\n data: EntityData;\n}\n\nexport interface EntityMap {\n [key: string]: Entity;\n}\n\n// Raw API format - entityMap comes as array\nexport interface EntityMapEntry {\n key: string;\n value: Entity;\n}\n\nexport interface RawArticleContent {\n blocks: ContentBlock[];\n entityMap: EntityMapEntry[];\n}\n\nexport interface ArticleContent {\n blocks: ContentBlock[];\n entityMap: EntityMap;\n}\n\nexport interface CoverMediaInfo {\n original_img_url: string;\n original_img_width: number;\n original_img_height: number;\n}\n\nexport interface CoverMedia {\n url?: string;\n width?: number;\n height?: number;\n media_info?: CoverMediaInfo;\n}\n\nexport interface Article {\n title: string;\n created_at: string;\n cover_media?: CoverMedia;\n content: ArticleContent;\n}\n\nexport interface Author {\n name: string;\n screen_name: string;\n avatar_url: string;\n}\n\nexport interface Tweet {\n url: string;\n id: string;\n author: Author;\n article?: Article;\n}\n\nexport interface FXTwitterResponse {\n code: number;\n message: string;\n tweet?: Tweet;\n}\n\n// Cached article record\nexport interface CachedArticle {\n tweet_id: string;\n fetched_at: number;\n data: string;\n}\n",[],[272,274],"1c1fde9e-fa64-11f0-b434-42dde27851f2",13,["D",1769396832395],[206,207],[272],"dc9b25a0-fc6e-11f0-ba3b-42dde27851f2","index.html","1c9dc840-fa64-11f0-a0b2-42dde27851f2","1c023524-fa64-11f0-b434-42dde27851f2",180,["D",1769621351955],46,"\n\n\n\n \n \n X Article Reader\n\n \n \n \n\n \n \n \n\n \n \n\n\n\n

X Article Reader

\n Read X.com article threads in a clean, minimal format optimized for\n readability.\n

\n\n \n\n

\n How it works:
\n Enter a URL like x.com/user/status/123 and\n read the article here in a clean format. Alternatively, replace\n x.com in an article URL with\n x-reader.val.run to navigate to the\n article directly.\n

\n\n

Try an example

\n View sample article\n

\n\n \n\n\n",[],[297,288],"frontend","1c023452-fa64-11f0-b434-42dde27851f2",11,["D",1769396832199],[204],[297],"7fd0897c-fa62-11f0-b9fa-42dde27851f2","spec.md","7fd08a30-fa62-11f0-b9fa-42dde27851f2","7fbad906-fa62-11f0-aa45-42dde27851f2",9,["D",1769396140653],"# X Article Reader - Val Town Project Specification\n\n## Project Overview\n\nA Val Town application that formats X.com (formerly Twitter) article-style posts in a clean, aesthetically pleasing reading experience. The application fetches content from the FXTwitter API and displays it with minimal black and white design, optimized for readability.\n\n## Core Functionality\n\n### URL Routing Pattern\n- **Pattern**: `x.com/user/status/id` → `subdomain.val.run/user/status/id`\n- **Support**: Accept both `x.com` and `twitter.com` domains\n- **Normalization**: Internally normalize all URLs to x.com format before processing\n\n### User Interface\n- **Primary Interface**: Interactive web page with URL input form\n- **Homepage**: Landing page with description, input form, and instructional examples showing the URL pattern\n- **Example Content**: Balance between showing example threads and clear instructions on how to use the service\n\n### Content Scope\n- **Target Content**: Article threads only (long-form thread articles)\n- **Article Format**: API provides article content in a single structure (not individual threaded tweets)\n- **Display**: Single continuous article view\n\n## Design & Aesthetics\n\n### Visual Design\n- **Style**: Minimal black and white design\n- **Purpose**: Distraction-free, focus entirely on readability and content\n- **Color Palette**: Pure black text on white background, no dynamic theming from API color data\n\n### Typography\n- **Font Family**: Modern sans-serif (system fonts for fast loading)\n- **Font Stack**: `system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`\n- **Content Width**: Maximum ~650px for optimal readability (65-75 characters per line)\n- **Responsive**: Centered content with padding on larger screens\n\n### Layout Structure\n1. **Hero Image**: Cover media displayed as large hero image at top\n2. **Article Title**: Large H1 heading below hero image\n3. **Author Information**: Display name + avatar image\n4. **Metadata**: Publication date (relative format: \"2 hours ago\", \"yesterday\" for recent; full date for older)\n5. **Article Content**: Full formatted content with proper spacing\n6. **Footer**: Link to view original on X.com\n\n## Content Rendering\n\n### Article Content Formatting\n- **Rendering Style**: Full formatting support\n- **Supported Elements**:\n - Headers (H2/H3 for header-two, etc.)\n - Unordered and ordered lists (`

Unable to load article

[Contextual error message]

\n View on X.com\n

[Article Title] - [Author Name]

\n $\"Cover$ \n\n

[Article Title]

\n\n

\n $\"[author.name]\"$ \n [author.name]\n

\n\n [Relative date]\n

\n\n

\n [Rendered blocks with full formatting]\n

\n\n \n

 with highlighting\n};\n```\n\n### Inline Style Processing\n```typescript\nfunction applyInlineStyles(text: string, ranges: InlineStyleRange[]): string {\n  // Sort ranges by offset\n  // Apply BOLD → , ITALIC → , etc.\n  // Handle overlapping ranges correctly\n  // Return HTML string with inline formatting\n}\n```\n\n### Entity Range Processing\n```typescript\nfunction applyEntityRanges(text: string, ranges: EntityRange[], entityMap: EntityMap): string {\n  // For each entity range:\n  // - Extract entity from entityMap by key\n  // - Apply appropriate transformation:\n  //   - LINK → text\n  //   - CODE → text\n  //   - Handle other entity types as needed\n  // Return HTML string with entities processed\n}\n```\n\n## Performance Considerations\n\n### Optimization Strategy\n- **Load Everything**: Render complete article at once (no pagination or lazy loading)\n- **Minimal Dependencies**: Only essential libraries loaded\n- **SQLite Cache**: Reduces API calls and improves response time for repeated views\n- **Static HTML**: No client-side JavaScript on article pages (except Highlight.js initialization)\n- **Content Width**: Fixed max-width prevents excessive line length and maintains readability\n\n### Bundle Size Goals\n- **Core HTML/CSS**: < 10KB\n- **Highlight.js**: < 50KB (core + common languages only)\n- **Total Initial Load**: < 100KB excluding images\n- **Time to First Byte**: < 200ms (cached), < 1s (uncached)\n\n## Privacy & Analytics\n\n### Privacy-First Approach\n- **No Tracking**: No analytics or user behavior logging\n- **No Cookies**: No cookies set or required\n- **No Third-Party Scripts**: Only self-hosted or CDN resources (Highlight.js)\n- **No User Data Storage**: Only article content cached, no user identifiers\n\n### Logging\n- **Application Logs**: Server-side errors logged for debugging\n- **No Access Logs**: Do not log article views or user behavior\n- **Error Tracking**: Only log failed API requests for debugging purposes\n\n## Social Sharing & Metadata\n\n### OpenGraph Tags\n```html\n\n\n\n\n\n```\n\n### Page Title\n```html\n[Article Title] by [Author Name]\n```\n\n## Date Formatting\n\n### Relative Date Logic\n```typescript\nfunction formatDate(timestamp: string): string {\n  const date = new Date(timestamp);\n  const now = new Date();\n  const diffInHours = (now - date) / (1000 * 60 * 60);\n\n  if (diffInHours < 1) return \"Just now\";\n  if (diffInHours < 24) return `${Math.floor(diffInHours)} hours ago`;\n  if (diffInHours < 48) return \"Yesterday\";\n  if (diffInHours < 168) return `${Math.floor(diffInHours / 24)} days ago`;\n\n  // For older articles, show full date\n  return date.toLocaleDateString('en-US', {\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric'\n  });\n}\n```\n\n## Implementation Checklist\n\n### Backend\n- [ ] Set up Hono app with route handlers\n- [ ] Implement SQLite schema and caching logic\n- [ ] Create FXTwitter API client with error handling\n- [ ] Build URL parser for both x.com and twitter.com\n- [ ] Implement cache lookup and storage\n- [ ] Create article renderer (blocks → HTML)\n- [ ] Build error page template\n\n### Frontend\n- [ ] Design minimal CSS stylesheet\n- [ ] Create homepage HTML template\n- [ ] Build article page HTML template\n- [ ] Integrate Highlight.js for syntax highlighting\n- [ ] Implement inline style ranges rendering\n- [ ] Implement entity ranges rendering\n- [ ] Add OpenGraph meta tags\n- [ ] Style error pages\n\n### Testing\n- [ ] Test with various article types\n- [ ] Verify cache expiration logic\n- [ ] Test error scenarios (404, API down, etc.)\n- [ ] Validate URL parsing for both domains\n- [ ] Check rendering of all block types\n- [ ] Verify syntax highlighting works\n- [ ] Test social sharing metadata\n- [ ] Mobile responsiveness testing\n\n### Deployment\n- [ ] Deploy to Val Town\n- [ ] Verify endpoint URL\n- [ ] Test live with real X.com articles\n- [ ] Monitor for errors\n- [ ] Document usage\n\n## Future Considerations (Out of Scope for v1)\n\n- Dark mode toggle\n- Reader preferences (font size, width)\n- Article bookmarking/favorites\n- RSS feed generation\n- Print-optimized styling\n- Reading time estimates\n- Multi-language support\n- Search functionality\n- Article collections/categorization\n\n## Success Criteria\n\n1. **Functionality**: Successfully formats X.com article threads with proper rendering\n2. **Performance**: Pages load in < 2 seconds including images\n3. **Readability**: Clean, distraction-free reading experience\n4. **Reliability**: Graceful error handling for all edge cases\n5. **Simplicity**: Minimal dependencies, straightforward codebase\n6. **Privacy**: No tracking or unnecessary data collection\n",[],[312,304],"docs","7fbad802-fa62-11f0-aa45-42dde27851f2",8,["D",1769396140514],[202],[312],"dc6a1a3c-fc6e-11f0-a673-42dde27851f2","index.ts",179,["D",1769621351969],"http","import { Hono } from \"npm:hono@4\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { handleArticle } from \"./routes/article.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n  throw err;\n});\n\n// Serve static files from frontend/\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Homepage\napp.get(\"/\", async (c) => {\n  const html = await readFile(\"/frontend/index.html\", import.meta.url);\n  return c.html(html);\n});\n\n// Article route\napp.get(\"/:username/status/:id\", handleArticle);\n\n// Catch-all for unknown routes\napp.notFound((c) => {\n  return c.html(\n    `\n\n\n  \n  \n  Page not found - X Article Reader\n  \n  \n  \n  \n  \n\n\n  \n    Page not found
\n    The page you're looking for doesn't exist.
\n    Go back home\n  
\n\n`,\n    404,\n  );\n});\n\nexport default app.fetch;\n","x-reader",[],[167,319],"dc3bd2a8-fc6e-11f0-9953-42dde27851f2","error.ts","1cc3a614-fa64-11f0-93af-42dde27851f2","1c5fb2e4-fa64-11f0-b434-42dde27851f2",175,["D",1769621351957],"import { escapeHtml } from \"../../shared/utils.ts\";\n\ninterface ErrorPageOptions {\n  title: string;\n  message: string;\n  originalUrl?: string;\n}\n\nexport function renderErrorPage(options: ErrorPageOptions): string {\n  const { title, message, originalUrl } = options;\n\n  const originalLink = originalUrl\n    ? `View on X.com`\n    : `Go back home`;\n\n  return `\n\n\n  \n  \n  ${escapeHtml(title)} - X Article Reader\n  \n  \n  \n  \n  \n\n\n  \n    ${escapeHtml(title)}
\n    ${escapeHtml(message)}
\n    ${originalLink}\n  
\n\n`;\n}\n",[],[167,336,328],"templates","2166c316-2af4-11f1-b92e-42dde27851f2","article.ts","1cbd747e-fa64-11f0-a0b2-42dde27851f2",193,["D",1774736344586],"import type { Tweet } from \"../../shared/types.ts\";\nimport { escapeHtml, formatRelativeDate } from \"../../shared/utils.ts\";\nimport { renderArticleContent } from \"../renderer/article.ts\";\n\nexport function renderArticlePage(tweet: Tweet): string {\n  const article = tweet.article!;\n  const author = tweet.author;\n\n  const renderedContent = renderArticleContent(article.content);\n  const publishDate = formatRelativeDate(article.created_at);\n  const previewText = article.content.blocks\n    .find((b) => b.type === \"unstyled\" && b.text.length > 0)?.text\n    .slice(0, 200) || \"\";\n\n  const coverImageUrl = article.cover_media?.media_info?.original_img_url ??\n    article.cover_media?.url;\n  const heroImage = coverImageUrl\n    ? ``\n    : \"\";\n\n  const headerPaddingClass = coverImageUrl ? \"\" : \" pt-8\";\n\n  return `\n\n\n  \n  \n  ${escapeHtml(article.title)} by ${escapeHtml(author.name)}\n\n  \n  \n  \n  ${\n    coverImageUrl\n      ? ``\n      : \"\"\n  }\n  \n\n  \n  \n  \n  \n  ${\n    coverImageUrl\n      ? ``\n      : \"\"\n  }\n\n  \n  \n  \n  \n\n  \n  \n\n  \n  \n\n\n  \n    ${heroImage}\n\n    \n      ${escapeHtml(article.title)}
\n\n      \n        \n        ${escapeHtml(author.name)}\n      
\n\n      ${publishDate}\n    
\n\n    \n      ${renderedContent}\n    
\n\n    \n      \n        View original on X.com\n      \n    
\n  
\n\n  \n\n`;\n}",[],[167,336,338],"1c5fb244-fa64-11f0-b434-42dde27851f2",17,["D",1769396832815],[198,199],[167,336],"1cc7a03e-fa64-11f0-a7dd-42dde27851f2","static.ts","1cc7a0ca-fa64-11f0-a7dd-42dde27851f2","1c7c125e-fa64-11f0-a0b2-42dde27851f2",28,["D",1769396833496],"import type { Context } from \"npm:hono@4\";\nimport { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nexport function handleStatic(c: Context): Promise {\n  return serveFile(c.req.path, import.meta.url);\n}\n",[],[167,359,351],"routes","dc4fd820-fc6e-11f0-ad2e-42dde27851f2","1cd02b32-fa64-11f0-b434-42dde27851f2",177,["D",1769621352109],"import type { Context } from \"npm:hono@4\";\nimport { runMigrations } from \"../database/migrations.ts\";\nimport { getCachedArticle, cacheArticle } from \"../database/queries.ts\";\nimport { fetchArticle, FXTwitterError } from \"../api/fxtwitter.ts\";\nimport { renderArticlePage } from \"../templates/article.ts\";\nimport { renderErrorPage } from \"../templates/error.ts\";\nimport { renderArticleAsMarkdown } from \"../renderer/markdown.ts\";\n\nlet migrationsRun = false;\n\nasync function ensureMigrations(): Promise {\n  if (!migrationsRun) {\n    await runMigrations();\n    migrationsRun = true;\n  }\n}\n\nexport async function handleArticle(c: Context): Promise {\n  await ensureMigrations();\n\n  const username = c.req.param(\"username\");\n  const statusId = c.req.param(\"id\");\n  const originalUrl = `https://x.com/${username}/status/${statusId}`;\n\n  // Validate status ID is numeric\n  if (!/^\\d+$/.test(statusId)) {\n    return c.html(\n      renderErrorPage({\n        title: \"Invalid URL\",\n        message: \"The status ID must be a numeric value.\",\n        originalUrl,\n      }),\n      400,\n    );\n  }\n\n  try {\n    // Check cache first\n    const cached = await getCachedArticle(statusId);\n\n    let data;\n    if (cached && !cached.isExpired) {\n      data = cached.data;\n    } else {\n      // Fetch from API\n      data = await fetchArticle(username, statusId);\n      await cacheArticle(statusId, data);\n    }\n\n    // Verify this is an article\n    if (!data.tweet?.article) {\n      return c.html(\n        renderErrorPage({\n          title: \"Not an article\",\n          message: \"This post is not an article-style thread. Only X.com articles are supported.\",\n          originalUrl,\n        }),\n        400,\n      );\n    }\n\n    // Check for markdown output format\n    const url = new URL(c.req.url);\n    const wantMarkdown = url.searchParams.has(\"md\");\n\n    if (wantMarkdown) {\n      const markdown = renderArticleAsMarkdown(data.tweet);\n      return new Response(markdown, {\n        status: 200,\n        headers: {\n          \"Content-Type\": \"text/markdown; charset=utf-8\",\n        },\n      });\n    }\n\n    return c.html(renderArticlePage(data.tweet));\n  } catch (error) {\n    console.error(`Error fetching article ${statusId}:`, error);\n\n    if (error instanceof FXTwitterError) {\n      if (error.statusCode === 404) {\n        return c.html(\n          renderErrorPage({\n            title: \"Article not found\",\n            message: \"This article could not be found. It may have been deleted or the account may be private.\",\n            originalUrl,\n          }),\n          404,\n        );\n      }\n\n      return c.html(\n        renderErrorPage({\n          title: \"Unable to load article\",\n          message: error.message || \"An error occurred while fetching this article.\",\n          originalUrl,\n        }),\n        error.statusCode >= 500 ? 502 : error.statusCode,\n      );\n    }\n\n    return c.html(\n      renderErrorPage({\n        title: \"Unable to load article\",\n        message: \"An unexpected error occurred. Please try again later.\",\n        originalUrl,\n      }),\n      500,\n    );\n  }\n}\n",[],[167,359,338],"1c7c11be-fa64-11f0-a0b2-42dde27851f2",18,["D",1769396833000],[195,196],[167,359],"51f85830-fc6b-11f0-8c74-42dde27851f2","markdown.ts","51f858e4-fc6b-11f0-8c74-42dde27851f2","1c3ecc3c-fa64-11f0-b434-42dde27851f2",162,["D",1769619831527],"import type { ArticleContent, ContentBlock, EntityMap, InlineStyleRange, EntityRange, Tweet } from \"../../shared/types.ts\";\n\n// Block type to Markdown prefix mapping\nconst BLOCK_TYPE_PREFIX: Record = {\n  unstyled: \"\",\n  \"header-one\": \"# \",\n  \"header-two\": \"## \",\n  \"header-three\": \"### \",\n  \"unordered-list-item\": \"- \",\n  \"ordered-list-item\": \"1. \",\n  atomic: \"\",\n  \"code-block\": \"\",\n  blockquote: \"> \",\n};\n\ninterface TextSegment {\n  start: number;\n  end: number;\n  styles: Set;\n  entityKey: number | null;\n}\n\n/**\n * Apply inline styles and entity ranges to text for Markdown output\n */\nfunction processTextWithStyles(\n  text: string,\n  inlineStyleRanges: InlineStyleRange[],\n  entityRanges: EntityRange[],\n  entityMap: EntityMap,\n): string {\n  if (text.length === 0) return \"\";\n\n  // Create segments with their styles and entities\n  const points = new Set([0, text.length]);\n\n  for (const range of inlineStyleRanges) {\n    points.add(range.offset);\n    points.add(range.offset + range.length);\n  }\n\n  for (const range of entityRanges) {\n    points.add(range.offset);\n    points.add(range.offset + range.length);\n  }\n\n  const sortedPoints = Array.from(points).sort((a, b) => a - b);\n  const segments: TextSegment[] = [];\n\n  for (let i = 0; i < sortedPoints.length - 1; i++) {\n    const start = sortedPoints[i];\n    const end = sortedPoints[i + 1];\n    const styles = new Set();\n    let entityKey: number | null = null;\n\n    for (const range of inlineStyleRanges) {\n      if (start >= range.offset && end <= range.offset + range.length) {\n        styles.add(range.style);\n      }\n    }\n\n    for (const range of entityRanges) {\n      if (start >= range.offset && end <= range.offset + range.length) {\n        entityKey = range.key;\n      }\n    }\n\n    segments.push({ start, end, styles, entityKey });\n  }\n\n  // Build Markdown from segments\n  let result = \"\";\n\n  for (const segment of segments) {\n    let segmentText = text.slice(segment.start, segment.end);\n\n    // Apply styles (API uses both \"Bold\" and \"BOLD\" formats)\n    if (segment.styles.has(\"BOLD\") || segment.styles.has(\"Bold\")) {\n      segmentText = `**${segmentText}**`;\n    }\n    if (segment.styles.has(\"ITALIC\") || segment.styles.has(\"Italic\")) {\n      segmentText = `*${segmentText}*`;\n    }\n    if (segment.styles.has(\"CODE\") || segment.styles.has(\"Code\")) {\n      segmentText = `\\`${segmentText}\\``;\n    }\n    // Note: UNDERLINE has no standard Markdown equivalent, skipping\n\n    // Apply entity (links, etc.)\n    if (segment.entityKey !== null) {\n      const entity = entityMap[segment.entityKey.toString()];\n      if (entity) {\n        if (entity.type === \"LINK\" && entity.data.url) {\n          segmentText = `[${segmentText}](${entity.data.url})`;\n        }\n      }\n    }\n\n    result += segmentText;\n  }\n\n  return result;\n}\n\n/**\n * Render a single content block to Markdown\n */\nfunction renderBlock(block: ContentBlock, entityMap: EntityMap): string {\n  const prefix = BLOCK_TYPE_PREFIX[block.type] ?? \"\";\n\n  // Handle atomic blocks (embedded media, code blocks)\n  if (block.type === \"atomic\") {\n    if (block.entityRanges.length > 0) {\n      const entityKey = block.entityRanges[0].key;\n      const entity = entityMap[entityKey.toString()];\n      if (entity) {\n        if ((entity.type === \"IMAGE\" || entity.type === \"MEDIA\") && entity.data.url) {\n          const alt = (entity.data.alt as string) || \"Embedded image\";\n          return `![${alt}](${entity.data.url})`;\n        }\n        if (entity.type === \"MARKDOWN\" && entity.data.markdown) {\n          // Already markdown, return as-is\n          return entity.data.markdown as string;\n        }\n      }\n    }\n    return \"\";\n  }\n\n  if (block.type === \"code-block\") {\n    return `\\`\\`\\`\\n${block.text}\\n\\`\\`\\``;\n  }\n\n  const content = processTextWithStyles(\n    block.text,\n    block.inlineStyleRanges,\n    block.entityRanges,\n    entityMap,\n  );\n\n  return `${prefix}${content}`;\n}\n\n/**\n * Render article content blocks to Markdown\n */\nexport function renderArticleContentAsMarkdown(content: ArticleContent): string {\n  const { blocks, entityMap } = content;\n  const result: string[] = [];\n\n  for (const block of blocks) {\n    const rendered = renderBlock(block, entityMap);\n    if (rendered) {\n      result.push(rendered);\n    }\n  }\n\n  return result.join(\"\\n\\n\");\n}\n\n/**\n * Render a full article as Markdown with frontmatter-style header\n */\nexport function renderArticleAsMarkdown(tweet: Tweet): string {\n  const article = tweet.article!;\n  const author = tweet.author;\n\n  const parts: string[] = [];\n\n  // Title\n  parts.push(`# ${article.title}`);\n\n  // Author and date info\n  parts.push(`*By ${author.name} (@${author.screen_name})*`);\n  parts.push(`*Published: ${article.created_at}*`);\n\n  // Cover image if present\n  const coverImageUrl = article.cover_media?.media_info?.original_img_url ?? article.cover_media?.url;\n  if (coverImageUrl) {\n    parts.push(`![Cover image](${coverImageUrl})`);\n  }\n\n  // Separator\n  parts.push(\"---\");\n\n  // Article content\n  parts.push(renderArticleContentAsMarkdown(article.content));\n\n  // Footer\n  parts.push(\"---\");\n  parts.push(`[View original on X.com](${tweet.url})`);\n\n  return parts.join(\"\\n\\n\");\n}\n",[],[167,381,373],"renderer","21792308-2af4-11f1-b5e0-42dde27851f2","1cab30de-fa64-11f0-a0b2-42dde27851f2",["D",1774736344628],"import type { ArticleContent, ContentBlock, EntityMap, InlineStyleRange, EntityRange } from \"../../shared/types.ts\";\nimport { escapeHtml } from \"../../shared/utils.ts\";\n\n// Block type to HTML tag mapping\nconst BLOCK_TYPE_MAP: Record = {\n  unstyled: \"p\",\n  \"header-one\": \"h1\",\n  \"header-two\": \"h2\",\n  \"header-three\": \"h3\",\n  \"unordered-list-item\": \"li\",\n  \"ordered-list-item\": \"li\",\n  atomic: \"div\",\n  \"code-block\": \"pre\",\n  blockquote: \"blockquote\",\n};\n\ninterface TextSegment {\n  start: number;\n  end: number;\n  styles: Set;\n  entityKey: number | null;\n}\n\n/**\n * Apply inline styles and entity ranges to text\n */\nfunction processTextWithStyles(\n  text: string,\n  inlineStyleRanges: InlineStyleRange[],\n  entityRanges: EntityRange[],\n  entityMap: EntityMap,\n): string {\n  if (text.length === 0) return \"\";\n\n  // Create segments with their styles and entities\n  const points = new Set([0, text.length]);\n\n  for (const range of inlineStyleRanges) {\n    points.add(range.offset);\n    points.add(range.offset + range.length);\n  }\n\n  for (const range of entityRanges) {\n    points.add(range.offset);\n    points.add(range.offset + range.length);\n  }\n\n  const sortedPoints = Array.from(points).sort((a, b) => a - b);\n  const segments: TextSegment[] = [];\n\n  for (let i = 0; i < sortedPoints.length - 1; i++) {\n    const start = sortedPoints[i];\n    const end = sortedPoints[i + 1];\n    const styles = new Set();\n    let entityKey: number | null = null;\n\n    for (const range of inlineStyleRanges) {\n      if (start >= range.offset && end <= range.offset + range.length) {\n        styles.add(range.style);\n      }\n    }\n\n    for (const range of entityRanges) {\n      if (start >= range.offset && end <= range.offset + range.length) {\n        entityKey = range.key;\n      }\n    }\n\n    segments.push({ start, end, styles, entityKey });\n  }\n\n  // Build HTML from segments\n  let result = \"\";\n\n  for (const segment of segments) {\n    let segmentText = escapeHtml(text.slice(segment.start, segment.end)).replace(/\\n/g, \"
\");\n\n    // Apply styles (API uses both \"Bold\" and \"BOLD\" formats)\n    if (segment.styles.has(\"BOLD\") || segment.styles.has(\"Bold\")) {\n      segmentText = `${segmentText}`;\n    }\n    if (segment.styles.has(\"ITALIC\") || segment.styles.has(\"Italic\")) {\n      segmentText = `${segmentText}`;\n    }\n    if (segment.styles.has(\"UNDERLINE\") || segment.styles.has(\"Underline\")) {\n      segmentText = `${segmentText}`;\n    }\n    if (segment.styles.has(\"CODE\") || segment.styles.has(\"Code\")) {\n      segmentText = `${segmentText}`;\n    }\n\n    // Apply entity (links, etc.)\n    if (segment.entityKey !== null) {\n      const entity = entityMap[segment.entityKey.toString()];\n      if (entity) {\n        if (entity.type === \"LINK\" && entity.data.url) {\n          segmentText = `${segmentText}`;\n        }\n      }\n    }\n\n    result += segmentText;\n  }\n\n  return result;\n}\n\n/**\n * Render a single content block to HTML\n */\nfunction renderBlock(block: ContentBlock, entityMap: EntityMap): string {\n  const tag = BLOCK_TYPE_MAP[block.type] || \"p\";\n\n  // Handle atomic blocks (embedded media, code blocks)\n  if (block.type === \"atomic\") {\n    // Check for entity reference in the block\n    if (block.entityRanges.length > 0) {\n      const entityKey = block.entityRanges[0].key;\n      const entity = entityMap[entityKey.toString()];\n      if (entity) {\n        if (entity.type === \"IMAGE\" && entity.data.url) {\n          const alt = entity.data.alt || \"Embedded image\";\n          return `
`;\n        }\n        if (entity.type === \"MEDIA\" && entity.data.url) {\n          return `
`;\n        }\n        if (entity.type === \"MARKDOWN\" && entity.data.markdown) {\n          const markdown = entity.data.markdown as string;\n          // Parse fenced code blocks from markdown\n          const codeMatch = markdown.match(/^```(\\w*)\\n([\\s\\S]*?)\\n```$/);\n          if (codeMatch) {\n            const language = codeMatch[1] || \"\";\n            const code = codeMatch[2];\n            const langClass = language ? ` class=\"language-${escapeHtml(language)}\"` : \"\";\n            return `

${escapeHtml(code)}

${escapeHtml(markdown)}

${content}

{\n const result = await sqlite.execute({\n sql: \"SELECT data, fetched_at FROM articles WHERE tweet_id = ?\",\n args: [tweetId],\n });\n\n if (result.rows.length === 0) {\n return null;\n }\n\n const row = result.rows[0];\n const fetchedAt = row.fetched_at as number;\n const cacheAge = Date.now() - fetchedAt;\n const isExpired = cacheAge > CACHE_TTL_MS;\n\n return {\n data: JSON.parse(row.data as string) as FXTwitterResponse,\n isExpired,\n };\n}\n\n/**\n * Store article in cache\n */\nexport async function cacheArticle(tweetId: string, data: FXTwitterResponse): Promise {\n await sqlite.execute({\n sql: \"INSERT OR REPLACE INTO articles (tweet_id, fetched_at, data) VALUES (?, ?, ?)\",\n args: [tweetId, Date.now(), JSON.stringify(data)],\n });\n}\n",[],[167,402,394],"database","1ca8f404-fa64-11f0-93af-42dde27851f2","migrations.ts","1ca8f4ea-fa64-11f0-93af-42dde27851f2",22,["D",1769396833220],"import { sqlite } from \"https://esm.town/v/std/sqlite@14-main/main.ts\";\n\n/**\n * Initialize the database schema\n */\nexport async function runMigrations(): Promise {\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS articles (\n tweet_id TEXT PRIMARY KEY,\n fetched_at INTEGER NOT NULL,\n data TEXT NOT NULL\n )\n `);\n}\n",[],[167,402,404],"1c3091f8-fa64-11f0-859c-42dde27851f2",14,["D",1769396832501],[189,190],[167,402],["D",1769397505612],[],[167,81,65],["D",1769396832686],[187],[167,81],"1c130b42-fa64-11f0-b434-42dde27851f2",12,["D",1769396832312],[186,188,191,194,197,200],[167],"dc44f860-fc6e-11f0-83ba-42dde27851f2","settings.local.json","7fd58800-fa62-11f0-9216-42dde27851f2","7fad83be-fa62-11f0-aa45-42dde27851f2",176,["D",1769621351961],"{\n \"permissions\": {\n \"allow\": [\n \"WebFetch(domain:api.fxtwitter.com)\",\n \"Bash(git -C /Users/nbbaier/Code/x-article-reader status)\"\n ]\n }\n}\n",[],[436,428],".claude","7fad8328-fa62-11f0-aa45-42dde27851f2",7,["D",1769396140425],[184],[436],["D",1769394726777],["D",1789533091345],{"_11":12,"_136":71},{"_11":12,"_132":-5,"_70":71,"_31":69,"_133":134,"_135":30},{"_40":123,"_13":16,"_34":37,"_124":84,"_125":-5,"_126":-5,"_127":-5,"_128":-5,"_129":-5,"_130":14,"_131":12},"ctx",{"_53":-5,"_155":480,"_481":482,"_483":484,"_485":30,"_486":30,"_487":30,"_488":24,"_489":-5,"_490":-7,"_491":-7,"_492":26,"_493":30,"_494":30,"_495":-5,"_496":30,"_497":30,"_498":30,"_499":-5},"ENV",{"_451":452,"_453":454,"_455":16,"_456":457,"_458":459,"_460":461,"_462":463,"_464":465,"_466":467,"_468":469,"_470":471,"_472":473,"_474":475,"_476":477,"_478":479},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · api