Xtracticle

---

在线体验： xtracticle.com — 或者只需将任意帖子 URL 中的 x.com 替换为 xtracticle.com。

功能

导出格式

格式	导出内容
PDF	A4 纸张，可直接打印；包含标题／作者／日期／来源页眉、图片、页码和可点击的来源链接。逐页渲染，因此长文章不会生成空白 PDF，文本行也不会被截断。
Markdown	标题、粗体／斜体／删除线、链接、嵌套列表、引用、代码、分隔线、图片、视频缩略图。可选 YAML front matter（Obsidian 属性、Hugo/Jekyll/Astro）。
EPUB 3	可重排版的电子书，内嵌图片和元数据 — 适用于 Kindle（Send to Kindle）、Kobo、Apple Books。
ZIP + 图片	Markdown + 所有本地保存的图片 — 即使帖子被删除，也能留存离线归档。
文本	纯净的 .txt 文件。
Obsidian	复制 Markdown，并通过 obsidian://new 打开新笔记。

内容

• 📝 X 文章 — 完整转换 Draft.js 内容：封面、行内图片、视频、说明文字、嵌入帖子
• 🧵 任意帖子串帖 — 粘贴第一条、中间一条或最后一条帖子，即可组装完整的自发串帖（不包含其他人的回复）
• 💬 帖子 — 换行、照片、视频和引用帖子
• 🔗 灵活输入 — x.com、twitter.com、移动版、fxtwitter/vxtwitter/fixupx、nitter/xcancel 链接、/i/web/status/、纯 ID，以及分享文本中的链接

工作流

• 🔁 替换 URL — xtracticle.com/{user}/status/{id} 可直接打开帖子；分享时会显示丰富的链接预览（Open Graph）
• 📚 批量模式 — 最多 20 个链接 → 打包为一个 Markdown 文件 ZIP
• 🔖 书签工具和 PWA 分享目标（在 Android 上从 X 应用分享）
• 🔊 朗读 — 使用浏览器的语音合成功能朗读内容
• 📱 iPhone/iPad 快捷指令 — 直接从 X 应用将帖子分享至 Xtracticle（public/shortcuts/）
• 🤖 MCP 服务 + Markdown API — AI 助手可将 X 帖子作为 Markdown 读取（/mcp、/api/markdown/:id）
• 📜 历史记录、🌙 深色模式、🌍 英语、西班牙语、葡萄牙语、日语、简体中文、阿拉伯语、土耳其语（阿拉伯语从右向左显示）
• 📈 分析事件 — 在 GA4 中记录 extract、download（格式）、copy、share、listen、batch_extract 和错误事件

入门

git clone https://github.com/ahmetdeveci3112-crypto/Xtracticle.git
cd Xtracticle
npm install
npm run dev

开发服务器运行在 http://localhost:5173。/api/* 由与 Worker 相同的处理程序（src/shared/api.ts）提供服务，每个落地页都会即时渲染——无需 wrangler。

脚本	说明
npm run dev	带 API 的 Vite 开发服务器
npm run build	生产构建 → dist/（所有落地页、404、站点地图）
npm run preview:worker	构建并使用 wrangler dev 在本地运行真实 Worker（SSR 状态页、404、_headers）
npm run lint	对应用和 Worker 进行类型检查

部署

Cloudflare Workers + Static Assets，在推送到 main 时自动部署（构建：npm run build，部署：npx wrangler deploy）。无需环境变量。

wrangler.json：

• run_worker_first — 只有 /api/*、/mcp、/video/* 和 /*/status/* 会访问 Worker；其他所有内容都直接由 CDN 提供
• not_found_handling: "404-page" — 未知 URL 会返回真正的 404（不会出现软 404）
• public/_headers — 安全标头、Link: </llms.txt>、iOS Shortcut 的下载标头

架构

Browser ──► Cloudflare
             ├─ Static assets (dist/)          /, /x-article-to-pdf, /tr/, … , 404.html, sitemap.xml
             └─ Worker (src/worker.ts)
                 ├─ /api/thread/:id, /api/tweet/:id ──► src/shared/api.ts ──► FxTwitter API
                 │                                        (edge cache, 5 min)
                 └─ /{user}/status/{id} ──► app shell + per-post OG tags + preloaded JSON (noindex)

src/
├── App.tsx              UI: extraction, exports, batch mode, deep links
├── i18n.ts              UI strings (en, tr, es, pt, ja, zh)
├── lib/export.ts        PDF (jsPDF + html2canvas-pro), EPUB, ZIP (fflate), Obsidian
├── lib/url.ts           Input + path parsing
├── lib/analytics.ts     GA4 event helper
├── shared/fx.ts         FxTwitter client (v2 thread endpoint + v1 fallback), shared by Worker & dev server
├── shared/api.ts        JSON API handler with edge caching
├── shared/convert.ts    Posts / threads / Draft.js articles → Markdown + text + metadata (app + Worker)
├── shared/markdown.ts   GET /api/markdown/:id
├── shared/mcp.ts        Remote MCP server (POST /mcp)
├── shared/text.ts       Title extraction
└── worker.ts            Cloudflare Worker (API + status-page SSR)
site/
├── blocks.ts            Types + localized shared blocks (shortcuts, privacy)
├── pages.ts             English pages (one per search intent) + page registry
├── pages-{es,pt,ja,zh,ar,tr}.ts  The same pages, localized (linked by `group`)
├── curated.ts           Weekly “Best X Articles” pages from site/curated/*.json
├── guides.ts            /guides — informational guides
├── mcp-page.ts          /mcp-server — MCP setup docs
├── render.ts            Head/meta/JSON-LD/content/footer rendering
└── plugin.ts            Vite plugin: emits every page, 404.html and sitemap.xml

大型导出库采用动态导入，因此初始页面只会加载 React 和应用本身。

SEO 与 AI 可发现性

层级	实现方式
意图页面	/x-article-to-pdf、/x-article-to-markdown、/x-thread-to-pdf、/x-article-to-epub、/save-x-articles-to-obsidian、/thread-reader-app-alternative — 每个页面都有独特且可见的 HTML 内容和 FAQ
语言	每个页面均提供 7 种语言（/、/es/…、/pt/…、/ja/…、/zh/…、/ar/…、/tr/…）+ 7 种语言的 UI；首次访问时显示语言横幅，记住用户选择并重定向（爬虫除外）
可抓取内容	内容是 React 根节点之外的静态 HTML，无需 JS 即可编入索引
结构化数据	WebApplication、FAQPage（与可见 FAQ 一致）、BreadcrumbList
i18n	每个翻译组都包含相互对应的 hreflang，以及 x-default
分享页面	/{user}/status/{id} 会获取帖子专属的 OG/Twitter 标记；noindex, follow
站点地图 / 404	在构建时生成；未知 URL 返回真正的 404 状态码
AI	/llms.txt、/llms-full.txt，robots.txt 允许 AI 爬虫访问

API

GET /api/thread/:id  → { tweets: Tweet[], count, isThread }   # self-thread containing :id
GET /api/tweet/:id   → Tweet
GET /api/markdown/:id → text/markdown  # ?format=markdown|text&thread=0|1&front_matter=0|1
POST /mcp            → MCP (Streamable HTTP, stateless), tool read_x_post

Tweet 与 FxTwitter 状态对象保持一致（text、author、media、quote、article 等）。响应会在边缘缓存 5 分钟——请适度使用。

每周“精选 X 文章”

/best-x-articles 是每周人工审核的精选内容，基于 site/curated/*.json 构建（标题、作者，以及用我们自己的话撰写的一句话摘要——绝不包含文章正文）。

npm run curate -- 2026-W41 https://x.com/user/status/123 https://x.com/other/status/456
# → site/curated/2026-w41.json with title/author/lang filled in; write "intro", "topic" and "summary"
npm run build   # issues with an empty summary are skipped automatically

最新一期会显示在 /best-x-articles（在下一期发布前，其 /best-x-articles/<week> 页面会将规范链接指向索引页）；较早期数则保留在 /best-x-articles/<week>。

参与贡献

1. Fork 仓库
2. 创建功能分支（git checkout -b feature/amazing-feature）
3. 提交更改
4. 发起 Pull Request

注意：

• 落地页文案位于 site/pages.ts；运行 npm run build 可查看生成的 HTML
• 保持 src/shared/* 不使用仅限 DOM/Node 的 API——它会同时在 Worker 和开发服务器中运行
• 使用 npm run preview:worker 测试仅限 Worker 的行为（SSR、404、标头）

许可证

MIT