`\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",[173],"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",[180],"1c1fde9e-fa64-11f0-b434-42dde27851f2","shared","1c1fdf34-fa64-11f0-b434-42dde27851f2",13,["D",1769396832395],"directory",[187],"1c023452-fa64-11f0-b434-42dde27851f2","frontend","1c023524-fa64-11f0-b434-42dde27851f2",11,["D",1769396832199],[194],"7fbad802-fa62-11f0-aa45-42dde27851f2","docs","7fbad906-fa62-11f0-aa45-42dde27851f2",8,["D",1769396140514],[200],"1c130b42-fa64-11f0-b434-42dde27851f2","backend","1c130be2-fa64-11f0-b434-42dde27851f2",12,["D",1769396832312],[206],"7fad8328-fa62-11f0-aa45-42dde27851f2",".claude","7fad83be-fa62-11f0-aa45-42dde27851f2",7,["D",1769396140425],[212],"pulls","branches","forks","envVars",{"_224":155,"_226":155},"connections",{"_224":155,"_225":155},"count","unfilledCount","emptyCount",{"_43":211,"_32":212,"_30":213,"_143":-5,"_41":42,"_40":214,"_145":59,"_38":451,"_13":155,"_34":191,"_35":-5,"_24":25,"_148":-5,"_260":452,"_27":453},{"_43":447,"_32":33,"_30":31,"_143":213,"_41":42,"_40":14,"_145":59,"_38":448,"_13":63,"_34":20,"_35":37,"_24":25,"_148":-5,"_260":449,"_27":450},{"_43":205,"_32":206,"_30":207,"_143":-5,"_41":42,"_40":208,"_145":59,"_38":444,"_13":155,"_34":191,"_35":-5,"_24":25,"_148":-5,"_260":445,"_27":446},{"_43":439,"_32":438,"_30":432,"_143":207,"_41":42,"_40":440,"_145":59,"_38":441,"_13":155,"_34":191,"_35":-5,"_24":25,"_148":-5,"_260":442,"_27":443},{"_43":429,"_32":430,"_30":431,"_143":432,"_41":42,"_40":433,"_145":59,"_38":434,"_13":63,"_34":283,"_35":435,"_24":25,"_148":-5,"_260":436,"_27":437},{"_43":424,"_32":415,"_30":409,"_143":207,"_41":42,"_40":425,"_145":59,"_38":426,"_13":155,"_34":191,"_35":-5,"_24":25,"_148":-5,"_260":427,"_27":428},{"_43":416,"_32":417,"_30":418,"_143":409,"_41":42,"_40":419,"_145":59,"_38":420,"_13":155,"_34":283,"_35":421,"_24":25,"_148":-5,"_260":422,"_27":423},{"_43":406,"_32":407,"_30":408,"_143":409,"_41":42,"_40":410,"_145":25,"_38":411,"_13":155,"_34":283,"_35":412,"_24":25,"_148":-5,"_260":413,"_27":414},{"_43":401,"_32":393,"_30":388,"_143":207,"_41":42,"_40":402,"_145":59,"_38":403,"_13":155,"_34":191,"_35":-5,"_24":25,"_148":-5,"_260":404,"_27":405},{"_43":394,"_32":351,"_30":395,"_143":388,"_41":42,"_40":396,"_145":25,"_38":397,"_13":153,"_34":283,"_35":398,"_24":25,"_148":-5,"_260":399,"_27":400},{"_43":385,"_32":386,"_30":387,"_143":388,"_41":42,"_40":375,"_145":59,"_38":389,"_13":155,"_34":283,"_35":390,"_24":25,"_148":-5,"_260":391,"_27":392},{"_43":380,"_32":372,"_30":366,"_143":207,"_41":42,"_40":381,"_145":59,"_38":382,"_13":155,"_34":191,"_35":-5,"_24":25,"_148":-5,"_260":383,"_27":384},{"_43":373,"_32":351,"_30":374,"_143":366,"_41":42,"_40":375,"_145":25,"_38":376,"_13":182,"_34":283,"_35":377,"_24":25,"_148":-5,"_260":378,"_27":379},{"_43":363,"_32":364,"_30":365,"_143":366,"_41":42,"_40":367,"_145":59,"_38":368,"_13":155,"_34":283,"_35":369,"_24":25,"_148":-5,"_260":370,"_27":371},{"_43":358,"_32":349,"_30":343,"_143":207,"_41":42,"_40":359,"_145":59,"_38":360,"_13":155,"_34":191,"_35":-5,"_24":25,"_148":-5,"_260":361,"_27":362},{"_43":350,"_32":351,"_30":352,"_143":343,"_41":42,"_40":353,"_145":25,"_38":354,"_13":144,"_34":283,"_35":355,"_24":25,"_148":-5,"_260":356,"_27":357},{"_43":340,"_32":341,"_30":342,"_143":343,"_41":42,"_40":344,"_145":59,"_38":345,"_13":63,"_34":283,"_35":346,"_24":25,"_148":-5,"_260":347,"_27":348},{"_43":331,"_32":332,"_30":57,"_143":207,"_41":42,"_40":333,"_145":25,"_38":334,"_13":63,"_34":335,"_35":336,"_24":25,"_148":337,"_260":338,"_27":339},{"_43":199,"_32":200,"_30":201,"_143":-5,"_41":42,"_40":202,"_145":59,"_38":328,"_13":155,"_34":191,"_35":-5,"_24":25,"_148":-5,"_260":329,"_27":330},{"_43":320,"_32":321,"_30":322,"_143":201,"_41":42,"_40":323,"_145":59,"_38":324,"_13":155,"_34":20,"_35":325,"_24":25,"_148":-5,"_260":326,"_27":327},{"_43":193,"_32":194,"_30":195,"_143":-5,"_41":42,"_40":196,"_145":59,"_38":317,"_13":155,"_34":191,"_35":-5,"_24":25,"_148":-5,"_260":318,"_27":319},{"_43":308,"_32":309,"_30":310,"_143":195,"_41":42,"_40":311,"_145":25,"_38":312,"_13":313,"_34":20,"_35":314,"_24":25,"_148":-5,"_260":315,"_27":316},{"_43":299,"_32":300,"_30":301,"_143":195,"_41":42,"_40":302,"_145":25,"_38":303,"_13":304,"_34":20,"_35":305,"_24":25,"_148":-5,"_260":306,"_27":307},{"_43":186,"_32":187,"_30":188,"_143":-5,"_41":42,"_40":189,"_145":59,"_38":296,"_13":155,"_34":191,"_35":-5,"_24":25,"_148":-5,"_260":297,"_27":298},{"_43":287,"_32":288,"_30":289,"_143":188,"_41":42,"_40":290,"_145":59,"_38":291,"_13":292,"_34":283,"_35":293,"_24":25,"_148":-5,"_260":294,"_27":295},{"_43":278,"_32":279,"_30":280,"_143":188,"_41":42,"_40":281,"_145":59,"_38":282,"_13":63,"_34":283,"_35":284,"_24":25,"_148":-5,"_260":285,"_27":286},{"_43":179,"_32":180,"_30":181,"_143":-5,"_41":42,"_40":182,"_145":59,"_38":275,"_13":155,"_34":20,"_35":184,"_24":25,"_148":-5,"_260":276,"_27":277},{"_43":172,"_32":173,"_30":174,"_143":-5,"_41":42,"_40":175,"_145":59,"_38":272,"_13":63,"_34":20,"_35":177,"_24":25,"_148":-5,"_260":273,"_27":274},{"_43":165,"_32":166,"_30":167,"_143":-5,"_41":42,"_40":168,"_145":59,"_38":269,"_13":155,"_34":20,"_35":170,"_24":25,"_148":-5,"_260":270,"_27":271},{"_43":158,"_32":159,"_30":160,"_143":-5,"_41":42,"_40":161,"_145":59,"_38":266,"_13":155,"_34":20,"_35":163,"_24":25,"_148":-5,"_260":267,"_27":268},{"_43":150,"_32":151,"_30":152,"_143":-5,"_41":42,"_40":153,"_145":59,"_38":263,"_13":155,"_34":20,"_35":156,"_24":25,"_148":-5,"_260":264,"_27":265},{"_43":140,"_32":141,"_30":142,"_143":-5,"_41":42,"_40":144,"_145":59,"_38":259,"_13":63,"_34":20,"_35":147,"_24":25,"_148":-5,"_260":261,"_27":262},["D",1769394772448],"children",[],[141],["D",1769394754649],[],[151],["D",1769401183144],[],[159],["D",1769394754645],[],[166],["D",1769396833639],[],[173],["D",1769394754640],[],[180],"78e042ae-fa64-11f0-bcd6-42dde27851f2","utils.ts","1ccac426-fa64-11f0-93af-42dde27851f2",34,["D",1769396988001],"script","// 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",[],[187,279],"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",[],[187,288],["D",1769396832395],[251,252],[187],"b5cc292a-fc6d-11f0-8b38-42dde27851f2","style.css","1ca082ba-fa64-11f0-bb19-42dde27851f2",173,["D",1769620858000],78,"* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nhtml {\n font-size: 16px;\n line-height: 1.7;\n}\n\nbody {\n font-family:\n \"Inter\", system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n sans-serif;\n color: #111;\n background: #fff;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.container {\n max-width: 48rem;\n /* max-width: 650px; */\n margin: 0 auto;\n padding: 2rem 1.5rem;\n}\n\n/* Article Styles */\n.article-container {\n max-width: 48rem;\n margin: 0 auto;\n padding: 0 1.5rem 3rem;\n}\n\n.hero-image {\n width: 100vw;\n max-height: 60vh;\n object-fit: cover;\n margin-left: calc(-50vw + 50%);\n margin-bottom: 2rem;\n}\n\n.article-header {\n margin-bottom: 2.5rem;\n padding-bottom: 1.5rem;\n border-bottom: 1px solid #e5e5e5;\n}\n\n.article-header:first-child {\n padding-top: 2rem;\n}\n\n.article-title {\n font-size: 2.25rem;\n font-weight: 700;\n line-height: 1.2;\n margin-bottom: 1.25rem;\n letter-spacing: -0.02em;\n}\n\n.author-info {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n margin-bottom: 0.5rem;\n}\n\n.avatar {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n}\n\n.author-name {\n font-weight: 500;\n}\n\n.publish-date {\n display: block;\n color: #666;\n font-size: 0.9rem;\n}\n\n/* Article Content */\n.article-content {\n font-size: 1.0rem;\n}\n\n.article-content p {\n margin-bottom: 1.5rem;\n}\n\n.article-content h1 {\n font-size: 2rem;\n font-weight: 700;\n margin: 2.5rem 0 1rem;\n letter-spacing: -0.01em;\n}\n\n.article-content h2 {\n font-size: 1.5rem;\n font-weight: 600;\n margin: 2rem 0 1rem;\n}\n\n.article-content h3 {\n font-size: 1.25rem;\n font-weight: 600;\n margin: 1.75rem 0 0.75rem;\n}\n\n.article-content a {\n color: #111;\n text-decoration: underline;\n text-underline-offset: 2px;\n}\n\n.article-content a:hover {\n color: #444;\n}\n\n.article-content ul,\n.article-content ol {\n margin: 1.5rem 0;\n padding-left: 1.5rem;\n}\n\n.article-content li {\n margin-bottom: 0.5rem;\n}\n\n.article-content pre {\n background: #f5f5f5;\n padding: 1rem;\n border-radius: 4px;\n overflow-x: auto;\n margin: 1.5rem 0;\n font-size: 0.9rem;\n line-height: 1.5;\n}\n\n.article-content code {\n font-family:\n ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace;\n font-size: 0.9em;\n background: #f5f5f5;\n padding: 0.15em 0.35em;\n border-radius: 3px;\n}\n\n.article-content pre code {\n background: none;\n padding: 0;\n}\n\n.article-content img {\n max-width: 100%;\n height: auto;\n margin: 1.5rem 0;\n display: block;\n}\n\n.article-content figure {\n margin: 2rem 0;\n}\n\n.article-content figure img {\n margin: 0;\n border-radius: 4px;\n}\n\n.article-content strong {\n font-weight: 600;\n}\n\n/* Article Footer */\n.article-footer {\n margin-top: 3rem;\n padding-top: 1.5rem;\n border-top: 1px solid #e5e5e5;\n text-align: center;\n}\n\n.article-footer a {\n color: #666;\n text-decoration: none;\n font-size: 0.95rem;\n}\n\n.article-footer a:hover {\n color: #111;\n text-decoration: underline;\n}\n\n/* Homepage Styles */\n.homepage {\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem 1.5rem;\n}\n\n.homepage-content {\n max-width: 480px;\n width: 100%;\n}\n\n.site-title {\n font-size: 1.75rem;\n font-weight: 700;\n margin-bottom: 0.75rem;\n letter-spacing: -0.02em;\n}\n\n.site-description {\n color: #666;\n margin-bottom: 2rem;\n line-height: 1.6;\n}\n\n.url-form {\n margin-bottom: 2rem;\n}\n\n.input-group {\n display: flex;\n gap: 0.5rem;\n}\n\n.url-input {\n flex: 1;\n padding: 0.75rem 1rem;\n font-size: 1rem;\n border: 1px solid #ddd;\n border-radius: 4px;\n font-family: inherit;\n}\n\n.url-input:focus {\n outline: none;\n border-color: #111;\n}\n\n.submit-btn {\n padding: 0.75rem 1.25rem;\n font-size: 1rem;\n font-weight: 500;\n background: #111;\n color: #fff;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-family: inherit;\n}\n\n.submit-btn:hover {\n background: #333;\n}\n\n.pattern-example {\n margin-bottom: 2rem;\n padding: 1rem;\n background: #f9f9f9;\n border-radius: 4px;\n font-size: 0.9rem;\n}\n\n.pattern-example code {\n font-family:\n ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace;\n font-size: 0.9em;\n}\n\n.pattern-example code.inline {\n font-family:\n ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace;\n font-size: 0.9em;\n padding: 3px 6px;\n margin: 0px 1px;\n border-radius: 4px;\n border: 1px solid black;\n}\n\n.example-links {\n font-size: 0.9rem;\n}\n\n.example-links h3 {\n font-size: 0.85rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: #666;\n margin-bottom: 0.5rem;\n}\n\n.example-links a {\n color: #111;\n text-decoration: underline;\n text-underline-offset: 2px;\n}\n\n/* Error Page Styles */\n.error-container {\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 2rem 1.5rem;\n text-align: center;\n}\n\n.error-container h1 {\n font-size: 1.5rem;\n font-weight: 600;\n margin-bottom: 1rem;\n}\n\n.error-container p {\n color: #666;\n margin-bottom: 1.5rem;\n max-width: 400px;\n}\n\n.error-container a {\n color: #111;\n text-decoration: underline;\n}\n\n/* Highlight.js minimal theme override */\n.hljs {\n background: #f5f5f5;\n color: #111;\n}\n\n.hljs-keyword,\n.hljs-selector-tag,\n.hljs-title,\n.hljs-section,\n.hljs-doctag,\n.hljs-name,\n.hljs-strong {\n font-weight: 600;\n}\n\n.hljs-comment {\n color: #666;\n}\n\n.hljs-string,\n.hljs-title,\n.hljs-section,\n.hljs-built_in,\n.hljs-literal,\n.hljs-type,\n.hljs-addition,\n.hljs-tag,\n.hljs-quote,\n.hljs-name,\n.hljs-selector-id,\n.hljs-selector-class {\n color: #444;\n}\n\n/* Responsive */\n@media (max-width: 600px) {\n html {\n font-size: 16px;\n }\n\n .article-title {\n font-size: 1.75rem;\n }\n\n .input-group {\n flex-direction: column;\n }\n\n .submit-btn {\n width: 100%;\n }\n}",[],[194,300],"7a6d7444-fc6b-11f0-95c1-42dde27851f2","index.html","1c9dc840-fa64-11f0-a0b2-42dde27851f2",163,["D",1769619899405],45,"\n\n\n\n \n \n X Article Reader\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",[],[194,309],["D",1769396832199],[248,249],[194],"7fd0897c-fa62-11f0-b9fa-42dde27851f2","spec.md","7fd08a30-fa62-11f0-b9fa-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",[],[200,321],["D",1769396140514],[246],[200],"37cf3e78-fa64-11f0-ae9f-42dde27851f2","index.ts",33,["D",1769396878835],"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(async (c) => {\n  const css = await readFile(\"/frontend/style.css\", import.meta.url);\n  return c.html(\n    `\n\n\n  \n  \n  Page not found - X Article Reader\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",[],[206,332],"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",[],[206,349,341],"templates","dc377730-fc6e-11f0-b991-42dde27851f2","article.ts","1cbd747e-fa64-11f0-a0b2-42dde27851f2",174,["D",1769621351949],"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}",[],[206,349,351],"1c5fb244-fa64-11f0-b434-42dde27851f2",17,["D",1769396832815],[242,243],[206,349],"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",[],[206,372,364],"routes","51f89160-fc6b-11f0-8c74-42dde27851f2","1cd02b32-fa64-11f0-b434-42dde27851f2",162,["D",1769619831527],"import type { Context } from \"npm:hono@4\";\nimport { readFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\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  // Get CSS for inline embedding\n  const css = await readFile(\"/frontend/style.css\", import.meta.url);\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        css,\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          css,\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, css));\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            css,\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          css,\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        css,\n      }),\n      500,\n    );\n  }\n}\n",[],[206,372,351],"1c7c11be-fa64-11f0-a0b2-42dde27851f2",18,["D",1769396833000],[239,240],[206,372],"51f85830-fc6b-11f0-8c74-42dde27851f2","markdown.ts","51f858e4-fc6b-11f0-8c74-42dde27851f2","1c3ecc3c-fa64-11f0-b434-42dde27851f2",["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",[],[206,393,386],"renderer","03db5476-fa69-11f0-a218-42dde27851f2","1cab30de-fa64-11f0-a0b2-42dde27851f2",48,["D",1769398939145],"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",[],[206,415,407],"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",[],[206,415,417],"1c3091f8-fa64-11f0-859c-42dde27851f2",14,["D",1769396832501],[233,234],[206,415],"ad773cba-fa65-11f0-ace0-42dde27851f2","fxtwitter.ts","1cb6483e-fa64-11f0-a7dd-42dde27851f2","1c4c0672-fa64-11f0-b434-42dde27851f2",40,["D",1769397505612],"import type { FXTwitterResponse, EntityMap, EntityMapEntry } from \"../../shared/types.ts\";\n\nconst FXTWITTER_BASE_URL = \"https://api.fxtwitter.com\";\n\n/**\n * Convert entityMap from array format to object format\n * API returns: [{ key: \"0\", value: {...} }, ...]\n * We need: { \"0\": {...}, ... }\n */\nfunction normalizeEntityMap(entityMap: EntityMapEntry[] | EntityMap): EntityMap {\n if (Array.isArray(entityMap)) {\n const normalized: EntityMap = {};\n for (const entry of entityMap) {\n normalized[entry.key] = entry.value;\n }\n return normalized;\n }\n return entityMap;\n}\n\nexport class FXTwitterError extends Error {\n constructor(\n message: string,\n public statusCode: number,\n ) {\n super(message);\n this.name = \"FXTwitterError\";\n }\n}\n\n/**\n * Fetch article data from FXTwitter API\n */\nexport async function fetchArticle(username: string, statusId: string): Promise {\n const url = `${FXTWITTER_BASE_URL}/${username}/status/${statusId}`;\n\n const response = await fetch(url, {\n headers: {\n Accept: \"application/json\",\n },\n });\n\n if (!response.ok) {\n throw new FXTwitterError(\n `Failed to fetch article: ${response.statusText}`,\n response.status,\n );\n }\n\n const data = (await response.json()) as FXTwitterResponse;\n\n if (data.code !== 200) {\n throw new FXTwitterError(data.message || \"Unknown error\", data.code);\n }\n\n // Normalize entityMap from array to object format\n if (data.tweet?.article?.content?.entityMap) {\n data.tweet.article.content.entityMap = normalizeEntityMap(\n data.tweet.article.content.entityMap as unknown as EntityMapEntry[] | EntityMap\n );\n }\n\n return data;\n}\n",[],[206,438,430],"api","1c4c05be-fa64-11f0-b434-42dde27851f2",16,["D",1769396832686],[231],[206,438],["D",1769396832312],[230,232,235,238,241,244],[206],"dc44f860-fc6e-11f0-83ba-42dde27851f2",["D",1769621351961],[],[212,33],["D",1769396140425],[228],[212],["D",1769394726777],["D",1789533091345],{"_100":99,"_107":103},{"_100":99,"_101":-5,"_102":103,"_18":55,"_104":105,"_106":25},{"_13":89,"_32":90,"_43":42,"_91":44,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":45,"_98":99},"ctx",{"_82":-5,"_126":492,"_493":494,"_495":496,"_497":25,"_498":25,"_499":25,"_500":59,"_501":-5,"_502":-7,"_503":-7,"_504":155,"_505":25,"_506":25,"_507":-5,"_508":25,"_509":25,"_510":25,"_511":-5},"ENV",{"_463":464,"_465":466,"_467":90,"_468":469,"_470":471,"_472":473,"_474":475,"_476":477,"_478":479,"_480":481,"_482":483,"_484":485,"_486":487,"_488":489,"_490":491},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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"]

Diff · v176