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","label",[270,77],"frontend","pulls",0,"branches","forks","envVars",{"_279":272,"_281":272},"connections",{"_279":272,"_280":272},"count","unfilledCount","emptyCount",{"_46":541,"_13":540,"_75":534,"_56":-5,"_48":49,"_261":542,"_263":198,"_50":543,"_52":272,"_78":385,"_266":-5,"_79":24,"_268":-5,"_319":544,"_17":545},{"_46":531,"_13":532,"_75":533,"_56":534,"_48":49,"_261":535,"_263":198,"_50":536,"_52":26,"_78":21,"_266":537,"_79":24,"_268":-5,"_319":538,"_17":539},{"_46":526,"_13":421,"_75":413,"_56":-5,"_48":49,"_261":527,"_263":198,"_50":528,"_52":272,"_78":385,"_266":-5,"_79":24,"_268":-5,"_319":529,"_17":530},{"_46":522,"_13":521,"_75":515,"_56":413,"_48":49,"_261":437,"_263":198,"_50":523,"_52":272,"_78":385,"_266":-5,"_79":24,"_268":-5,"_319":524,"_17":525},{"_46":512,"_13":513,"_75":514,"_56":515,"_48":49,"_261":516,"_263":198,"_50":517,"_52":26,"_78":368,"_266":518,"_79":24,"_268":-5,"_319":519,"_17":520},{"_46":507,"_13":498,"_75":492,"_56":413,"_48":49,"_261":508,"_263":198,"_50":509,"_52":272,"_78":385,"_266":-5,"_79":24,"_268":-5,"_319":510,"_17":511},{"_46":499,"_13":500,"_75":501,"_56":492,"_48":49,"_261":502,"_263":198,"_50":503,"_52":272,"_78":368,"_266":504,"_79":24,"_268":-5,"_319":505,"_17":506},{"_46":489,"_13":490,"_75":491,"_56":492,"_48":49,"_261":493,"_263":198,"_50":494,"_52":378,"_78":368,"_266":495,"_79":24,"_268":-5,"_319":496,"_17":497},{"_46":484,"_13":477,"_75":471,"_56":413,"_48":49,"_261":485,"_263":198,"_50":486,"_52":272,"_78":385,"_266":-5,"_79":24,"_268":-5,"_319":487,"_17":488},{"_46":478,"_13":433,"_75":479,"_56":471,"_48":49,"_261":224,"_263":198,"_50":480,"_52":316,"_78":368,"_266":481,"_79":24,"_268":-5,"_319":482,"_17":483},{"_46":468,"_13":469,"_75":470,"_56":471,"_48":49,"_261":472,"_263":198,"_50":473,"_52":272,"_78":368,"_266":474,"_79":24,"_268":-5,"_319":475,"_17":476},{"_46":463,"_13":455,"_75":449,"_56":413,"_48":49,"_261":464,"_263":198,"_50":465,"_52":272,"_78":385,"_266":-5,"_79":24,"_268":-5,"_319":466,"_17":467},{"_46":456,"_13":433,"_75":457,"_56":449,"_48":49,"_261":458,"_263":198,"_50":459,"_52":341,"_78":368,"_266":460,"_79":24,"_268":-5,"_319":461,"_17":462},{"_46":446,"_13":447,"_75":448,"_56":449,"_48":49,"_261":450,"_263":198,"_50":451,"_52":272,"_78":368,"_266":452,"_79":24,"_268":-5,"_319":453,"_17":454},{"_46":441,"_13":431,"_75":425,"_56":413,"_48":49,"_261":442,"_263":198,"_50":443,"_52":272,"_78":385,"_266":-5,"_79":24,"_268":-5,"_319":444,"_17":445},{"_46":432,"_13":433,"_75":434,"_56":425,"_48":49,"_261":435,"_263":198,"_50":436,"_52":437,"_78":368,"_266":438,"_79":24,"_268":-5,"_319":439,"_17":440},{"_46":422,"_13":423,"_75":424,"_56":425,"_48":49,"_261":426,"_263":198,"_50":427,"_52":26,"_78":368,"_266":428,"_79":24,"_268":-5,"_319":429,"_17":430},{"_46":411,"_13":412,"_75":196,"_56":413,"_48":49,"_261":414,"_263":198,"_50":415,"_52":378,"_78":416,"_266":417,"_79":24,"_268":418,"_319":419,"_17":420},{"_46":406,"_13":405,"_75":399,"_56":-5,"_48":49,"_261":407,"_263":198,"_50":408,"_52":272,"_78":385,"_266":-5,"_79":24,"_268":-5,"_319":409,"_17":410},{"_46":396,"_13":397,"_75":398,"_56":399,"_48":49,"_261":400,"_263":198,"_50":401,"_52":272,"_78":21,"_266":402,"_79":24,"_268":-5,"_319":403,"_17":404},{"_46":391,"_13":270,"_75":260,"_56":-5,"_48":49,"_261":392,"_263":198,"_50":393,"_52":272,"_78":385,"_266":-5,"_79":24,"_268":-5,"_319":394,"_17":395},{"_46":259,"_13":77,"_75":76,"_56":260,"_48":49,"_261":262,"_263":198,"_50":388,"_52":265,"_78":21,"_266":267,"_79":24,"_268":-5,"_319":389,"_17":390},{"_46":382,"_13":372,"_75":365,"_56":-5,"_48":49,"_261":383,"_263":198,"_50":384,"_52":272,"_78":385,"_266":-5,"_79":24,"_268":-5,"_319":386,"_17":387},{"_46":373,"_13":374,"_75":375,"_56":365,"_48":49,"_261":376,"_263":198,"_50":377,"_52":378,"_78":368,"_266":379,"_79":24,"_268":-5,"_319":380,"_17":381},{"_46":362,"_13":363,"_75":364,"_56":365,"_48":49,"_261":366,"_263":198,"_50":367,"_52":26,"_78":368,"_266":369,"_79":24,"_268":-5,"_319":370,"_17":371},{"_46":354,"_13":355,"_75":356,"_56":-5,"_48":49,"_261":357,"_263":198,"_50":358,"_52":272,"_78":21,"_266":359,"_79":24,"_268":-5,"_319":360,"_17":361},{"_46":346,"_13":347,"_75":348,"_56":-5,"_48":49,"_261":349,"_263":198,"_50":350,"_52":26,"_78":21,"_266":351,"_79":24,"_268":-5,"_319":352,"_17":353},{"_46":338,"_13":339,"_75":340,"_56":-5,"_48":49,"_261":341,"_263":198,"_50":342,"_52":272,"_78":21,"_266":343,"_79":24,"_268":-5,"_319":344,"_17":345},{"_46":330,"_13":331,"_75":332,"_56":-5,"_48":49,"_261":333,"_263":198,"_50":334,"_52":272,"_78":21,"_266":335,"_79":24,"_268":-5,"_319":336,"_17":337},{"_46":322,"_13":323,"_75":324,"_56":-5,"_48":49,"_261":325,"_263":198,"_50":326,"_52":272,"_78":21,"_266":327,"_79":24,"_268":-5,"_319":328,"_17":329},{"_46":313,"_13":314,"_75":315,"_56":-5,"_48":49,"_261":316,"_263":198,"_50":317,"_52":26,"_78":21,"_266":318,"_79":24,"_268":-5,"_319":320,"_17":321},"504dc316-fa5f-11f0-acc4-42dde27851f2","deno.json","45ada2b4-fa5f-11f0-a0f2-42dde27851f2",6,["D",1769394772448],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"compilerOptions\": {\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ],\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\"https://www.val.town/types/valtown.d.ts\"]\n },\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-sloppy-imports\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true\n },\n \"imports\": {\n \"@biomejs/biome\": \"npm:@biomejs/biome@^2.3.12\"\n },\n \"lint\": {\n \"files\": {\n \"include\": [\"deno:/https/esm.town/**/*\"]\n },\n \"rules\": {\n \"exclude\": [\"no-explicit-any\", \"no-import-prefix\"]\n }\n },\n \"lock\": false,\n \"nodeModulesDir\": \"auto\"\n}","children",[],[314],"45b5ff22-fa5f-11f0-86af-42dde27851f2","biome.json","45b5ffe0-fa5f-11f0-86af-42dde27851f2",3,["D",1769394754649],"{\n\t\"$schema\": \"https://biomejs.dev/schemas/2.3.12/schema.json\",\n\t\"vcs\": { \"enabled\": true, \"clientKind\": \"git\", \"useIgnoreFile\": true },\n\t\"files\": { \"ignoreUnknown\": false },\n\t\"formatter\": { \"enabled\": true, \"indentStyle\": \"tab\" },\n\t\"linter\": { \"enabled\": true, \"rules\": { \"recommended\": true } },\n\t\"javascript\": { \"formatter\": { \"quoteStyle\": \"double\" } },\n\t\"assist\": {\n\t\t\"enabled\": true,\n\t\t\"actions\": { \"source\": { \"organizeImports\": \"on\" } }\n\t}\n}\n",[],[323],"3d5fb5e8-fa6e-11f0-b0f8-42dde27851f2","README.md","3d5fb6b0-fa6e-11f0-b0f8-42dde27851f2",137,["D",1769401183144],"# X Article Reader\n\nA clean, distraction-free reader for X.com (Twitter) article threads. Built for [Val Town](https://val.town).\n\n## Features\n\n- **Clean reading experience** — Renders X.com articles in a minimal, readable format\n- **Syntax highlighting** — Code blocks are highlighted using highlight.js\n- **OpenGraph support** — Proper meta tags for link previews\n- **Caching** — Articles are cached in SQLite for 24 hours to reduce API calls\n- **URL rewriting** — Simply replace `x.com` with `x-reader.val.run` in any article URL\n\n## Usage\n\n### Web Interface\n\n1. Visit the homepage\n2. Paste an X.com article URL (e.g., `https://x.com/user/status/123456`)\n3. Click \"Read\" to view the article\n\n### Direct URL Access\n\nReplace `x.com` in any article URL with `x-reader.val.run`:\n\n```\nhttps://x.com/username/status/123456\n→\nhttps://x-reader.val.run/username/status/123456\n```\n\n## Architecture\n\n```\nbackend/\n├── index.ts # Hono app entry point\n├── api/\n│ └── fxtwitter.ts # FXTwitter API client\n├── database/\n│ ├── migrations.ts # SQLite schema\n│ └── queries.ts # Cache operations\n├── renderer/\n│ └── article.ts # Draft.js → HTML renderer\n├── routes/\n│ └── article.ts # Article route handler\n└── templates/\n ├── article.ts # Article page template\n └── error.ts # Error page template\n\nfrontend/\n├── index.html # Homepage\n└── style.css # Styles\n\nshared/\n├── types.ts # TypeScript types\n└── utils.ts # Shared utilities\n```\n\n## How It Works\n\n1. User provides an X.com article URL\n2. The app fetches article data from the [FXTwitter API](https://github.com/FixTweet/FXTwitter)\n3. Article content (in Draft.js format) is parsed and rendered to HTML\n4. The rendered article is cached in SQLite for 24 hours\n5. The clean HTML page is served to the user\n\n## Development\n\nThis is a Val Town project. Use the [vt CLI](https://docs.val.town/reference/cli/) for local development:\n\n```bash\n# Install dependencies\nnpm install\n\n# Push to Val Town\nvt push\n```\n\n## Limitations\n\n- Only supports X.com \"article\" posts (long-form threads with the article format)\n- Regular tweets/threads are not supported\n- Private accounts and deleted posts cannot be accessed\n",[],[331],"45c83994-fa5f-11f0-a7ed-42dde27851f2","CLAUDE.md","45c83a48-fa5f-11f0-a7ed-42dde27851f2",5,["D",1769394754645],"# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with\ncode in this repository.\n\nRead the instructions from AGENTS.md: @AGENTS.md. Confirm you have read the\ninstructions from AGENTS.md before starting.",[],[339],"1cde22c8-fa64-11f0-93af-42dde27851f2","AGENTS.md","45b202be-fa5f-11f0-a70b-42dde27851f2",32,["D",1769396833639],"You are an advanced assistant specialized in generating Val Town code.\n\n## Runtime Environment\n\nVal Town uses **Deno** as its runtime in a serverless context.\n\n### Security Constraints\n\n- **No filesystem access**: Vals cannot read or write local files\n- **No FFI (Foreign Function Interface)**: Cannot call native code\n- **No subprocesses**: Cannot spawn child processes\n- **Network access allowed**: HTTP requests are permitted\n- **Environment variables**: Accessible via `Deno.env.get()`\n\n### Performance Characteristics\n\n- **Cold start time**: 100ms+ for first request (includes dependency installation)\n- **Warm instances**: Subsequent requests are much faster when val stays warm\n- Prefer lightweight packages to reduce cold start time\n\n### Key Differences from Node.js\n\n1. **No `require()`**: Use ES modules (`import/export`) only\n2. **No `__dirname` or `__filename`**: Not available in Deno\n3. **Explicit file extensions**: Must include `.ts`, `.tsx`, or `.js` in relative imports\n4. **Top-level await**: Supported natively\n5. **NPM packages require `npm:` prefix**: Or use `https://esm.sh`\n\n## Core Guidelines\n\n- Ask clarifying questions when requirements are ambiguous\n- Provide complete, functional solutions rather than skeleton implementations\n- Test your logic against edge cases before presenting the final solution\n- Ensure all code follows Val Town's specific platform requirements\n- If a section of code that you're working on is getting too complex, consider\n refactoring it into subcomponents\n\n## Code Standards\n\n- Generate code in TypeScript or TSX\n- Add appropriate TypeScript types and interfaces for all data structures\n- Prefer official SDKs or libraries than writing API calls directly\n- Ask the user to supply API or library documentation if you are at all unsure\n about it\n- **Never bake in secrets into the code** - always use environment variables\n- Include comments explaining complex logic (avoid commenting obvious\n operations)\n- Follow modern ES6+ conventions and functional programming practices if\n possible\n\n## Import Syntax\n\nVal Town supports multiple import methods:\n\n### NPM Packages\n\n```ts\nimport { foo } from \"npm:packagename@version\";\nimport bar from \"npm:another-package@1.0.0\";\n```\n\n### JSR (JavaScript Registry)\n\n```ts\nimport { encodeBase64 } from \"jsr:@std/encoding@1.0.4/base64\";\nimport { escape } from \"jsr:@std/html@1.0.3/entities\";\n```\n\n### esm.sh (CDN)\n\n```ts\nimport React from \"https://esm.sh/react@18\";\n```\n\n### esm.town (Val Town imports)\n\n```ts\nimport { blob } from \"https://esm.town/v/std/blob\";\n```\n\n**Important**: Always specify versions for reproducibility and reliability.\n\n## Types of Vals (fileType)\n\n### 1. HTTP Val (`fileType: \"http\"`)\n\n- Create web APIs and endpoints\n- Handle HTTP requests and responses\n- HTTP vals have a `links.endpoint` field containing the live URL where the val is deployed\n- Example structure:\n\n```ts\nexport default async function (req: Request): Promise {\n return new Response(\"Hello World\", {\n status: 200,\n headers: { \"Content-Type\": \"text/plain\" },\n });\n}\n```\n\nFiles that are HTTP vals have http in their name like `foobar.http.tsx`\n\n### 2. Interval Val (`fileType: \"interval\"`)\n\n- Run on a schedule (cron-like functionality)\n- Example structure:\n\n```ts\nexport default async function () {\n console.log(\"Running scheduled task\", new Date());\n}\n```\n\nFiles that are Interval vals have cron in their name like `foobar.cron.tsx`\n\n### 3. Email Val (`fileType: \"email\"`)\n\n- Process incoming emails\n- Handle email-based workflows\n- Example structure:\n\n```ts\nexport default async function (email: Email) {\n console.log(\"Received email from:\", email.from);\n}\n```\n\nFiles that are Email vals have email in their name like `foobar.email.tsx`\n\n### 4. Script Val (`fileType: \"script\"`)\n\n- General-purpose code that can export functions or values\n- Example structure:\n\n```ts\nexport function greet(name: string): string {\n return `Hello, ${name}!`;\n}\n\nexport const config = {\n version: \"1.0.0\",\n};\n```\n\n## Val Town Standard Library\n\nVal Town provides built-in services:\n\n### SQLite Storage\n\n**For application code in Vals**, use the standard library import:\n\n```typescript\nimport { sqlite } from \"https://esm.town/v/std/sqlite@14-main/main.ts\";\n\n// Create tables idempotently (safe to run multiple times)\nawait sqlite.execute(`\n CREATE TABLE IF NOT EXISTS users (\n id INTEGER PRIMARY KEY,\n name TEXT NOT NULL,\n email TEXT UNIQUE\n )\n`);\n\nconst result = await sqlite.execute(\"SELECT * FROM users\");\n/**\nresult:\n\n ResultSetImpl {\n columns: [ \"id\", \"name\", \"email\" ],\n columnTypes: [ \"INTEGER\", \"TEXT\", \"TEXT\" ],\n rows: [\n { id: 1, name: \"Charlie\", email: \"charlie@example.com\" },\n { id: 2, name: \"Dave\", email: \"dave@example.com\" }\n ],\n rowsAffected: 0,\n lastInsertRowid: undefined\n }\n*/\n\n// Parameterized queries (always use these for user input!)\nawait sqlite.execute({\n sql: \"INSERT INTO users (name, email) VALUES (?, ?)\",\n args: [\"Charlie\", \"charlie@example.com\"],\n});\n\n// Named parameters also supported\nawait sqlite.execute({\n sql: \"SELECT * FROM users WHERE email = :email\",\n args: { email: \"alice@example.com\" },\n});\n\n// Batch operations for atomic multi-statement transactions\n// All succeed together or all fail (rollback on error)\nawait sqlite.batch([\n {\n sql: \"INSERT INTO users (name, email) VALUES (?, ?)\",\n args: [\"Dave\", \"dave@example.com\"],\n },\n { sql: \"UPDATE users SET name = ? WHERE id = ?\", args: [\"David\", 4] },\n]);\n```\n\n**Important notes**:\n\n- Results return as `{columns: string[], rows: any[][]}` - map to objects as needed\n- Always use parameterized queries (`args`) for user input to prevent SQL injection\n- Use `sqlite.batch()` when multiple operations must succeed/fail together\n- Use `CREATE TABLE IF NOT EXISTS` for idempotent table creation\n- MCP tools (sqlite_execute/sqlite_batch) are for debugging; use `std/sqlite` in Val code\n- See https://docs.val.town/reference/std/sqlite/usage/ for complete documentation\n- Existing vals may use https://esm.town/v/std/sqlite for SQLite. Do not change\n this if it is already in place: std/sqlite accesses an SQLite database that is specific\n to the user, std/db accesses one that is specific to the val.\n\n### Blob Storage\n\n```typescript\nimport { blob } from \"@valtown/sdk\";\n\nawait blob.setJSON(\"mykey\", { data: \"value\" });\nconst data = await blob.getJSON(\"mykey\");\n```\n\n### Email Sending\n\n```typescript\nimport { email } from \"@valtown/sdk\";\n\nawait email.send({\n to: \"user@example.com\",\n subject: \"Hello\",\n text: \"Message body\",\n});\n```\n\n### OpenAI\n\n```ts\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nconst openai = new OpenAI();\nconst completion = await openai.chat.completions.create({\n messages: [{ role: \"user\", content: \"Say hello in a creative way\" }],\n model: \"gpt-4o-mini\",\n max_tokens: 30,\n});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport {\n parseProject,\n readFile,\n serveFile,\n} from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n#### **serveFile** - Serve project files with proper content types\n\nFor example, in Hono:\n\n```ts\n// serve all files in frontend/ and shared/\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", (c) => serveFile(c.req.path, import.meta.url));\n```\n\n#### **readFile** - Read files from within the project:\n\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n#### **listFiles** - List all files in the project\n\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n#### **parseProject** - Extract information about the current project from import.meta.url\n\nThis is useful for including info for linking back to a val, ie in \"view source\"\nurls:\n\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name); // Project name\nconsole.log(projectVal.version); // Version number\nconsole.log(projectVal.branch); // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\nHowever, it's _extremely importing_ to note that `parseProject` and other\nStandard Library utilities ONLY RUN ON THE SERVER. If you need access to this\ndata on the client, run it in the server and pass it to the client by splicing\nit into the HTML page or by making an API request for it.\n\n## Val Town Platform Specifics\n\n- **Redirects:** Use\n `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})`\n instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode\n symbols, or icon fonts/libraries instead\n- **AI Image:** To inline generate an AI image use:\n `

`\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",[],[347],"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",[],[355],"78e042ae-fa64-11f0-bcd6-42dde27851f2","utils.ts","1ccac426-fa64-11f0-93af-42dde27851f2","1c1fdf34-fa64-11f0-b434-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",[],[372,363],"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",[],[372,374],"1c1fde9e-fa64-11f0-b434-42dde27851f2",13,["D",1769396832395],"directory",[305,306],[372],["D",1769621351955],[],[270,77],"1c023452-fa64-11f0-b434-42dde27851f2",11,["D",1769396832199],[303],[270],"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",[],[405,397],"docs","7fbad802-fa62-11f0-aa45-42dde27851f2",8,["D",1769396140514],[301],[405],"dc6a1a3c-fc6e-11f0-a673-42dde27851f2","index.ts","1c130be2-fa64-11f0-b434-42dde27851f2",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",[],[421,412],"backend","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",[],[421,431,423],"templates","2166c316-2af4-11f1-b92e-42dde27851f2","article.ts","1cbd747e-fa64-11f0-a0b2-42dde27851f2",193,["D",1774736344586],16,"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}",[],[421,431,433],"1c5fb244-fa64-11f0-b434-42dde27851f2",17,["D",1769396832815],[297,298],[421,431],"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",[],[421,455,447],"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",[],[421,455,433],"1c7c11be-fa64-11f0-a0b2-42dde27851f2",18,["D",1769396833000],[294,295],[421,455],"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",[],[421,477,469],"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",[],[421,498,490],"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",[],[421,498,500],"1c3091f8-fa64-11f0-859c-42dde27851f2",14,["D",1769396832501],[288,289],[421,498],"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",[],[421,521,513],"api","1c4c05be-fa64-11f0-b434-42dde27851f2",["D",1769396832686],[286],[421,521],"1c130b42-fa64-11f0-b434-42dde27851f2",12,["D",1769396832312],[285,287,290,293,296,299],[421],"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",[],[540,532],".claude","7fad8328-fa62-11f0-aa45-42dde27851f2",7,["D",1769396140425],[283],[540],["D",1769394726777],["D",1789533091345],{"_11":12,"_237":82},{"_11":12,"_233":-5,"_81":82,"_30":80,"_234":235,"_236":24},{"_52":224,"_13":16,"_46":49,"_225":185,"_226":-5,"_227":-5,"_228":-5,"_229":-5,"_230":-5,"_231":14,"_232":12},"ctx",{"_65":-5,"_256":584,"_585":586,"_587":588,"_589":24,"_590":24,"_591":24,"_592":198,"_593":-5,"_594":-7,"_595":-7,"_596":272,"_597":24,"_598":24,"_599":-5,"_600":24,"_601":24,"_602":24,"_603":-5},"ENV",{"_555":556,"_557":558,"_559":16,"_560":561,"_562":563,"_564":565,"_566":567,"_568":569,"_570":571,"_572":573,"_574":575,"_576":577,"_578":579,"_580":581,"_582":583},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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 · index.html