Anthony/readlater
1
0
Fork 0
mirror of https://github.com/Tony0410/readlater.git synced 2026-05-25 06:11:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: Anthony:883b0d71329dbd0dd0b8921f39822f8e363ed5dc
Branches Tags
Anthony:main Anthony:dependabot/npm_and_yarn/npm_and_yarn-a415b051ba
...
compare: Anthony:main
Branches Tags
Anthony:main Anthony:dependabot/npm_and_yarn/npm_and_yarn-a415b051ba

8 Commits
883b0d7132 ... main

Author SHA1 Message Date
Gemini Agent
9e7e2cc199 Handle email digest redirect URLs and Google News links 
- Follow redirects to resolve shortened URLs (c.gle, etc.)
- Extract actual article URL from Google News redirect pages
- Fetch and extract the real article content instead of the redirect page

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
 2026-01-28 04:41:35 +00:00
Gemini Agent
c6a400a04d Gracefully handle 403 blocked sites with minimal article 
Instead of failing completely on 403/401, save a placeholder article
with the URL so users can still access via 'Open original' link.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
 2026-01-25 01:07:40 +00:00
Gemini Agent
96ece66204 Add article publish date to list and reader views 
Extract publication dates from HTML meta tags when saving articles
and display them prominently in the article list and reader header.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
 2026-01-24 06:33:16 +00:00
Gemini Agent
8151705b17 Fix JSDOM CSS parsing errors (border-width issue) 
JSDOM crashes on modern CSS with variables like var(--border-width,1px).
Fix by stripping all <style> tags and inline style attributes before
parsing - Readability only needs DOM structure, not CSS.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
 2026-01-23 20:20:03 +00:00
Gemini Agent
61e1ac4d81 Fix clipboard copy with fallback for iOS/older browsers 
- Add try-catch around navigator.clipboard.writeText
- Add fallback using textarea + execCommand for older browsers
- Add final fallback using prompt() to show URL if all else fails

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
 2026-01-23 09:19:22 +00:00
Gemini Agent
1022b1ddca Add content capture bookmarklet for paywalled sites 
- New "Content Capture" bookmarklet sends page HTML directly
- Works for paywalled sites (Economist, NYT, etc.) when logged in
- Works for Cloudflare-protected sites
- Added POST handler to /api/save for HTML content
- Added extractFromHtml() for processing captured content
- Improved 403 error message with bookmarklet suggestion
- Updated bookmarklet page with both options

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
 2026-01-23 09:14:09 +00:00
Gemini Agent
464f93a6aa Add sorting and client-side caching for instant switching 
- Add sort dropdown: Newest/Oldest/Title A-Z/Z-A
- Client-side cache with 30s TTL for instant section switching
- Re-sorting uses cached data for immediate response
- Cache clears on data modifications (add/archive/delete)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
 2026-01-19 13:42:49 +00:00
Gemini Agent
911b749d3c Add bulk select and archive, improve performance 
- Add database indexes on isArchived, isFavorite, createdAt columns
- Optimize article list API to exclude content/textContent fields
- Add PATCH /api/articles endpoint for bulk updates
- Implement multi-select mode with Select/Deselect all
- Add bulk archive/unarchive buttons
- Rename "All Articles" to "To Read"
- Fetch full article content only when opening for reading

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
 2026-01-19 13:27:13 +00:00
15 changed files with 1484 additions and 131 deletions
Expand all files Collapse all files

1
drizzle/0002_modern_white_tiger.sql Normal file
View File

@@ -0,0 +1 @@
ALTER TABLE `articles` ADD `published_at` integer;

566
drizzle/meta/0002_snapshot.json Normal file
View File

@@ -0,0 +1,566 @@
{
"version": "6",
"dialect": "sqlite",
"id": "2817f3e4-6ce5-4d64-80e2-fb5fa10c8fa2",
"prevId": "d3369a08-d474-468e-a003-df32d5f2c61d",
"tables": {
"api_keys": {
"name": "api_keys",
"columns": {
"id": {
"name": "id",
"type": "text",
"primaryKey": true,
"notNull": true,
"autoincrement": false
},
"name": {
"name": "name",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"key": {
"name": "key",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"last_used": {
"name": "last_used",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"created_at": {
"name": "created_at",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false
}
},
"indexes": {
"api_keys_key_unique": {
"name": "api_keys_key_unique",
"columns": [
"key"
],
"isUnique": true
}
},
"foreignKeys": {},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"checkConstraints": {}
},
"articles": {
"name": "articles",
"columns": {
"id": {
"name": "id",
"type": "text",
"primaryKey": true,
"notNull": true,
"autoincrement": false
},
"url": {
"name": "url",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"title": {
"name": "title",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"author": {
"name": "author",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"site_name": {
"name": "site_name",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"excerpt": {
"name": "excerpt",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"content": {
"name": "content",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"text_content": {
"name": "text_content",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"lead_image": {
"name": "lead_image",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"word_count": {
"name": "word_count",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false,
"default": 0
},
"reading_progress": {
"name": "reading_progress",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false,
"default": 0
},
"reading_time_seconds": {
"name": "reading_time_seconds",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false,
"default": 0
},
"is_favorite": {
"name": "is_favorite",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false,
"default": false
},
"is_archived": {
"name": "is_archived",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false,
"default": false
},
"folder_id": {
"name": "folder_id",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"tags": {
"name": "tags",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false,
"default": "'[]'"
},
"created_at": {
"name": "created_at",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"updated_at": {
"name": "updated_at",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"read_at": {
"name": "read_at",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"finished_at": {
"name": "finished_at",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"published_at": {
"name": "published_at",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false
}
},
"indexes": {},
"foreignKeys": {},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"checkConstraints": {}
},
"email_config": {
"name": "email_config",
"columns": {
"id": {
"name": "id",
"type": "text",
"primaryKey": true,
"notNull": true,
"autoincrement": false
},
"inbox_email": {
"name": "inbox_email",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"is_active": {
"name": "is_active",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false,
"default": true
},
"created_at": {
"name": "created_at",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false
}
},
"indexes": {
"email_config_inbox_email_unique": {
"name": "email_config_inbox_email_unique",
"columns": [
"inbox_email"
],
"isUnique": true
}
},
"foreignKeys": {},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"checkConstraints": {}
},
"folders": {
"name": "folders",
"columns": {
"id": {
"name": "id",
"type": "text",
"primaryKey": true,
"notNull": true,
"autoincrement": false
},
"name": {
"name": "name",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"color": {
"name": "color",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false,
"default": "'#3b82f6'"
},
"icon": {
"name": "icon",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false,
"default": "'folder'"
},
"parent_id": {
"name": "parent_id",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"sort_order": {
"name": "sort_order",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false,
"default": 0
},
"created_at": {
"name": "created_at",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false
}
},
"indexes": {},
"foreignKeys": {},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"checkConstraints": {}
},
"highlights": {
"name": "highlights",
"columns": {
"id": {
"name": "id",
"type": "text",
"primaryKey": true,
"notNull": true,
"autoincrement": false
},
"article_id": {
"name": "article_id",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"text": {
"name": "text",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"note": {
"name": "note",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"color": {
"name": "color",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false,
"default": "'#fbbf24'"
},
"start_offset": {
"name": "start_offset",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"end_offset": {
"name": "end_offset",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"created_at": {
"name": "created_at",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false
}
},
"indexes": {},
"foreignKeys": {},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"checkConstraints": {}
},
"reading_goals": {
"name": "reading_goals",
"columns": {
"id": {
"name": "id",
"type": "text",
"primaryKey": true,
"notNull": true,
"autoincrement": false
},
"type": {
"name": "type",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"metric": {
"name": "metric",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"target": {
"name": "target",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"is_active": {
"name": "is_active",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false,
"default": true
},
"created_at": {
"name": "created_at",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false
}
},
"indexes": {},
"foreignKeys": {},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"checkConstraints": {}
},
"reading_stats": {
"name": "reading_stats",
"columns": {
"id": {
"name": "id",
"type": "text",
"primaryKey": true,
"notNull": true,
"autoincrement": false
},
"date": {
"name": "date",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"articles_read": {
"name": "articles_read",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false,
"default": 0
},
"articles_added": {
"name": "articles_added",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false,
"default": 0
},
"words_read": {
"name": "words_read",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false,
"default": 0
},
"time_spent_seconds": {
"name": "time_spent_seconds",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false,
"default": 0
},
"streak": {
"name": "streak",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false,
"default": 0
}
},
"indexes": {
"reading_stats_date_unique": {
"name": "reading_stats_date_unique",
"columns": [
"date"
],
"isUnique": true
}
},
"foreignKeys": {},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"checkConstraints": {}
},
"settings": {
"name": "settings",
"columns": {
"key": {
"name": "key",
"type": "text",
"primaryKey": true,
"notNull": true,
"autoincrement": false
},
"value": {
"name": "value",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"updated_at": {
"name": "updated_at",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false
}
},
"indexes": {},
"foreignKeys": {},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"checkConstraints": {}
}
},
"views": {},
"enums": {},
"_meta": {
"schemas": {},
"tables": {},
"columns": {}
},
"internal": {
"indexes": {}
}
}

7
drizzle/meta/_journal.json
View File

@@ -15,6 +15,13 @@
"when": 1768638242044, "when": 1768638242044,
"tag": "0001_watery_the_santerians", "tag": "0001_watery_the_santerians",
"breakpoints": true "breakpoints": true
},
{
"idx": 2,
"version": "6",
"when": 1769236358306,
"tag": "0002_modern_white_tiger",
"breakpoints": true
} }
] ]
} }

73
src/app/api/articles/route.ts
View File

@@ -2,15 +2,38 @@ import { NextRequest, NextResponse } from "next/server";
import { db, schema } from "@/lib/db"; import { db, schema } from "@/lib/db";
import { extractArticle } from "@/lib/utils/extract"; import { extractArticle } from "@/lib/utils/extract";
import { v4 as uuidv4 } from "uuid"; import { v4 as uuidv4 } from "uuid";
import { desc, eq } from "drizzle-orm"; import { desc, eq, inArray } from "drizzle-orm";
// GET /api/articles - List all articles // GET /api/articles - List all articles (optimized - excludes content fields)
export async function GET(request: NextRequest) { export async function GET(request: NextRequest) {
try { try {
const searchParams = request.nextUrl.searchParams; const searchParams = request.nextUrl.searchParams;
const filter = searchParams.get("filter"); // all, favorites, archived const filter = searchParams.get("filter"); // all, favorites, archived
let query = db.select().from(schema.articles); // Select only fields needed for list view (exclude large content/textContent)
const listFields = {
id: schema.articles.id,
url: schema.articles.url,
title: schema.articles.title,
author: schema.articles.author,
siteName: schema.articles.siteName,
excerpt: schema.articles.excerpt,
leadImage: schema.articles.leadImage,
wordCount: schema.articles.wordCount,
readingProgress: schema.articles.readingProgress,
readingTimeSeconds: schema.articles.readingTimeSeconds,
isFavorite: schema.articles.isFavorite,
isArchived: schema.articles.isArchived,
folderId: schema.articles.folderId,
tags: schema.articles.tags,
createdAt: schema.articles.createdAt,
updatedAt: schema.articles.updatedAt,
readAt: schema.articles.readAt,
finishedAt: schema.articles.finishedAt,
publishedAt: schema.articles.publishedAt,
};
let query = db.select(listFields).from(schema.articles);
if (filter === "favorites") { if (filter === "favorites") {
query = query.where(eq(schema.articles.isFavorite, true)) as typeof query; query = query.where(eq(schema.articles.isFavorite, true)) as typeof query;
@@ -33,6 +56,49 @@ export async function GET(request: NextRequest) {
} }
} }
// PATCH /api/articles - Bulk update articles
export async function PATCH(request: NextRequest) {
try {
const body = await request.json();
const { ids, updates } = body;
if (!ids || !Array.isArray(ids) || ids.length === 0) {
return NextResponse.json({ error: "Article IDs required" }, { status: 400 });
}
// Only allow certain fields to be bulk updated
const allowedUpdates: Partial<typeof schema.articles.$inferInsert> = {};
if (typeof updates.isArchived === "boolean") {
allowedUpdates.isArchived = updates.isArchived;
}
if (typeof updates.isFavorite === "boolean") {
allowedUpdates.isFavorite = updates.isFavorite;
}
if (updates.folderId !== undefined) {
allowedUpdates.folderId = updates.folderId;
}
if (Object.keys(allowedUpdates).length === 0) {
return NextResponse.json({ error: "No valid updates provided" }, { status: 400 });
}
allowedUpdates.updatedAt = new Date();
await db
.update(schema.articles)
.set(allowedUpdates)
.where(inArray(schema.articles.id, ids));
return NextResponse.json({ success: true, updated: ids.length });
} catch (error) {
console.error("Error bulk updating articles:", error);
return NextResponse.json(
{ error: "Failed to update articles" },
{ status: 500 }
);
}
}
// POST /api/articles - Save a new article // POST /api/articles - Save a new article
export async function POST(request: NextRequest) { export async function POST(request: NextRequest) {
try { try {
@@ -72,6 +138,7 @@ export async function POST(request: NextRequest) {
textContent: extracted.textContent, textContent: extracted.textContent,
leadImage: extracted.leadImage, leadImage: extracted.leadImage,
wordCount: extracted.wordCount, wordCount: extracted.wordCount,
publishedAt: extracted.publishedAt,
}; };
await db.insert(schema.articles).values(newArticle); await db.insert(schema.articles).values(newArticle);

140
src/app/api/save/route.ts
View File

@@ -1,6 +1,6 @@
import { NextRequest, NextResponse } from "next/server"; import { NextRequest, NextResponse } from "next/server";
import { db, schema } from "@/lib/db"; import { db, schema } from "@/lib/db";
import { extractArticle } from "@/lib/utils/extract"; import { extractArticle, extractFromHtml } from "@/lib/utils/extract";
import { v4 as uuidv4 } from "uuid"; import { v4 as uuidv4 } from "uuid";
import { eq } from "drizzle-orm"; import { eq } from "drizzle-orm";
@@ -125,6 +125,7 @@ export async function GET(request: NextRequest) {
textContent: extracted.textContent, textContent: extracted.textContent,
leadImage: extracted.leadImage, leadImage: extracted.leadImage,
wordCount: extracted.wordCount, wordCount: extracted.wordCount,
publishedAt: extracted.publishedAt,
}; };
await db.insert(schema.articles).values(newArticle); await db.insert(schema.articles).values(newArticle);
@@ -138,3 +139,140 @@ export async function GET(request: NextRequest) {
); );
} }
} }
// POST /api/save - Save article with HTML content from bookmarklet
export async function POST(request: NextRequest) {
const htmlResponse = (status: "success" | "error" | "exists", message: string) => {
const bgColor = status === "success" ? "#22c55e" : status === "exists" ? "#eab308" : "#ef4444";
const html = `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ReadLater</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #000;
color: #fff;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
text-align: center;
max-width: 300px;
}
.icon {
width: 60px;
height: 60px;
border-radius: 50%;
background: ${bgColor};
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.icon svg {
width: 30px;
height: 30px;
fill: white;
}
h1 {
font-size: 18px;
margin-bottom: 10px;
}
p {
color: #888;
font-size: 14px;
line-height: 1.5;
}
.close {
margin-top: 20px;
padding: 10px 20px;
background: #333;
border: none;
border-radius: 8px;
color: #fff;
cursor: pointer;
font-size: 14px;
}
.close:hover {
background: #444;
}
</style>
</head>
<body>
<div class="container">
<div class="icon">
${status === "success" ? '<svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>' : status === "exists" ? '<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>' : '<svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>'}
</div>
<h1>${status === "success" ? "Saved!" : status === "exists" ? "Already Saved" : "Error"}</h1>
<p>${message}</p>
<button class="close" onclick="window.close()">Close</button>
</div>
<script>
setTimeout(() => window.close(), 3000);
</script>
</body>
</html>`;
return new NextResponse(html, {
headers: { "Content-Type": "text/html" },
});
};
try {
// Parse form data from bookmarklet
const formData = await request.formData();
const url = formData.get("url") as string;
const html = formData.get("html") as string;
const title = formData.get("title") as string;
if (!url) {
return htmlResponse("error", "No URL provided");
}
// Check if article already exists
const existing = await db
.select()
.from(schema.articles)
.where(eq(schema.articles.url, url))
.limit(1);
if (existing.length > 0) {
return htmlResponse("exists", `"${existing[0].title}" is already in your reading list`);
}
// Extract article from provided HTML content
const extracted = await extractFromHtml(html, url, title);
const id = uuidv4();
const newArticle: schema.NewArticle = {
id,
url,
title: extracted.title,
author: extracted.author,
siteName: extracted.siteName,
excerpt: extracted.excerpt,
content: extracted.content,
textContent: extracted.textContent,
leadImage: extracted.leadImage,
wordCount: extracted.wordCount,
publishedAt: extracted.publishedAt,
};
await db.insert(schema.articles).values(newArticle);
return htmlResponse("success", `"${extracted.title}" has been added to your reading list`);
} catch (error) {
console.error("Error saving article from HTML:", error);
return htmlResponse(
"error",
error instanceof Error ? error.message : "Failed to save article"
);
}
}

1
src/app/api/v1/add/route.ts
View File

@@ -72,6 +72,7 @@ export async function POST(request: NextRequest) {
textContent: extracted.textContent, textContent: extracted.textContent,
leadImage: extracted.leadImage, leadImage: extracted.leadImage,
wordCount: extracted.wordCount, wordCount: extracted.wordCount,
publishedAt: extracted.publishedAt,
tags: tags ? JSON.stringify(tags) : "[]", tags: tags ? JSON.stringify(tags) : "[]",
folderId: folderId || null, folderId: folderId || null,
}; };

117
src/app/bookmarklet/page.tsx
View File

@@ -1,23 +1,34 @@
"use client"; "use client";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { BookOpen, Copy, Check } from "lucide-react"; import { BookOpen, Copy, Check, Zap, Link2 } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
export default function BookmarkletPage() { export default function BookmarkletPage() {
const [baseUrl, setBaseUrl] = useState(""); const [baseUrl, setBaseUrl] = useState("");
const [copied, setCopied] = useState(false); const [copiedSimple, setCopiedSimple] = useState(false);
const [copiedAdvanced, setCopiedAdvanced] = useState(false);
useEffect(() => { useEffect(() => {
setBaseUrl(window.location.origin); setBaseUrl(window.location.origin);
}, []); }, []);
const bookmarkletCode = `javascript:(function(){var url=encodeURIComponent(window.location.href);window.open('${baseUrl}/api/save?url='+url,'_blank','width=400,height=300');})();`; // Simple bookmarklet - just sends URL (works for most sites)
const simpleBookmarklet = `javascript:(function(){var url=encodeURIComponent(window.location.href);window.open('${baseUrl}/api/save?url='+url,'_blank','width=400,height=300');})();`;
const handleCopy = async () => { // Advanced bookmarklet - captures page content directly (works for paywalled/protected sites)
await navigator.clipboard.writeText(bookmarkletCode); const advancedBookmarklet = `javascript:(function(){var d=document,b=d.body,t=d.title,u=location.href,h=d.documentElement.outerHTML;var f=d.createElement('form');f.method='POST';f.action='${baseUrl}/api/save';f.target='_blank';var addField=function(n,v){var i=d.createElement('input');i.type='hidden';i.name=n;i.value=v;f.appendChild(i);};addField('url',u);addField('title',t);addField('html',h);b.appendChild(f);f.submit();b.removeChild(f);})();`;
setCopied(true);
setTimeout(() => setCopied(false), 2000); const handleCopySimple = async () => {
await navigator.clipboard.writeText(simpleBookmarklet);
setCopiedSimple(true);
setTimeout(() => setCopiedSimple(false), 2000);
};
const handleCopyAdvanced = async () => {
await navigator.clipboard.writeText(advancedBookmarklet);
setCopiedAdvanced(true);
setTimeout(() => setCopiedAdvanced(false), 2000);
}; };
return ( return (
@@ -31,31 +42,76 @@ export default function BookmarkletPage() {
Back to ReadLater Back to ReadLater
</Link> </Link>
<h1 className="text-3xl font-bold mb-6">Bookmarklet</h1> <h1 className="text-3xl font-bold mb-6">Bookmarklets</h1>
<div className="bg-[var(--surface)] rounded-lg p-6 mb-8"> {/* Advanced Bookmarklet - Recommended */}
<h2 className="text-xl font-semibold mb-4">Quick Save Bookmarklet</h2> <div className="bg-[var(--surface)] rounded-lg p-6 mb-6 border-2 border-[var(--accent)]">
<p className="text-[var(--muted)] mb-6"> <div className="flex items-center gap-2 mb-4">
Drag this button to your bookmarks bar, or right-click and &quot;Add to Bookmarks&quot;. <Zap className="w-5 h-5 text-[var(--accent)]" />
Then click it on any page to save the article to ReadLater. <h2 className="text-xl font-semibold">Content Capture (Recommended)</h2>
</div>
<p className="text-[var(--muted)] mb-4">
Captures the actual page content from your browser. <strong>Works with paywalled sites</strong> (Economist, NYT, etc.)
and sites with bot protection - as long as you can see the article, it can save it.
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 items-start"> <div className="flex flex-col sm:flex-row gap-4 items-start">
<a <a
href={bookmarkletCode} href={advancedBookmarklet}
onClick={(e) => e.preventDefault()} onClick={(e) => e.preventDefault()}
className="inline-flex items-center gap-2 px-6 py-3 bg-[var(--accent)] text-white rounded-lg font-medium cursor-move" className="inline-flex items-center gap-2 px-6 py-3 bg-[var(--accent)] text-white rounded-lg font-medium cursor-move"
title="Drag to bookmarks bar" title="Drag to bookmarks bar"
> >
<BookOpen className="w-5 h-5" /> <Zap className="w-5 h-5" />
Save to ReadLater Save to ReadLater
</a> </a>
<button <button
onClick={handleCopy} onClick={handleCopyAdvanced}
className="inline-flex items-center gap-2 px-4 py-3 border border-[var(--border)] rounded-lg hover:bg-[var(--surface)] transition-colors" className="inline-flex items-center gap-2 px-4 py-3 border border-[var(--border)] rounded-lg hover:bg-[var(--background)] transition-colors"
> >
{copied ? ( {copiedAdvanced ? (
<>
<Check className="w-5 h-5 text-green-500" />
Copied!
</>
) : (
<>
<Copy className="w-5 h-5" />
Copy code
</>
)}
</button>
</div>
</div>
{/* Simple Bookmarklet */}
<div className="bg-[var(--surface)] rounded-lg p-6 mb-8">
<div className="flex items-center gap-2 mb-4">
<Link2 className="w-5 h-5" />
<h2 className="text-xl font-semibold">URL Only (Lightweight)</h2>
</div>
<p className="text-[var(--muted)] mb-4">
Just sends the URL - our server fetches the content. Smaller bookmarklet, but won&apos;t work
for paywalled or bot-protected sites.
</p>
<div className="flex flex-col sm:flex-row gap-4 items-start">
<a
href={simpleBookmarklet}
onClick={(e) => e.preventDefault()}
className="inline-flex items-center gap-2 px-6 py-3 bg-[var(--muted)] text-white rounded-lg font-medium cursor-move"
title="Drag to bookmarks bar"
>
<Link2 className="w-5 h-5" />
Save URL
</a>
<button
onClick={handleCopySimple}
className="inline-flex items-center gap-2 px-4 py-3 border border-[var(--border)] rounded-lg hover:bg-[var(--background)] transition-colors"
>
{copiedSimple ? (
<> <>
<Check className="w-5 h-5 text-green-500" /> <Check className="w-5 h-5 text-green-500" />
Copied! Copied!
@@ -71,22 +127,21 @@ export default function BookmarkletPage() {
</div> </div>
<div className="bg-[var(--surface)] rounded-lg p-6"> <div className="bg-[var(--surface)] rounded-lg p-6">
<h2 className="text-xl font-semibold mb-4">Manual Installation</h2> <h2 className="text-xl font-semibold mb-4">Installation</h2>
<p className="text-[var(--muted)] mb-4"> <ol className="list-decimal list-inside space-y-2 text-[var(--muted)]">
If dragging doesn&apos;t work, create a new bookmark and paste this as the URL: <li><strong>Drag</strong> the button above to your bookmarks bar</li>
</p> <li>Or <strong>right-click</strong> → &quot;Add to Bookmarks&quot;</li>
<pre className="bg-[var(--background)] p-4 rounded-lg overflow-x-auto text-sm"> <li>Or <strong>copy the code</strong> and create a bookmark manually</li>
<code className="text-[var(--muted)]">{bookmarkletCode}</code> </ol>
</pre>
</div> </div>
<div className="mt-8 text-[var(--muted)] text-sm"> <div className="mt-8 text-[var(--muted)] text-sm">
<h3 className="font-semibold mb-2">How it works:</h3> <h3 className="font-semibold mb-2">Tips:</h3>
<ol className="list-decimal list-inside space-y-1"> <ul className="list-disc list-inside space-y-1">
<li>Click the bookmarklet on any article page</li> <li>Use the <strong>Content Capture</strong> bookmarklet for paywalled sites you&apos;re subscribed to</li>
<li>A popup will confirm the article was saved</li> <li>Make sure you&apos;re logged in to see the full article before clicking</li>
<li>The article appears in your ReadLater list</li> <li>The bookmarklet sends the visible page content directly to ReadLater</li>
</ol> </ul>
</div> </div>
</div> </div>
</div> </div>

319
src/app/page.tsx
View File

@@ -1,6 +1,6 @@
"use client"; "use client";
import { useState, useEffect, useCallback } from "react"; import { useState, useEffect, useCallback, useRef } from "react";
import { Article, Folder } from "@/lib/types"; import { Article, Folder } from "@/lib/types";
import { useReaderSettings, useTTSSettings } from "@/hooks/useSettings"; import { useReaderSettings, useTTSSettings } from "@/hooks/useSettings";
import { useTTS } from "@/hooks/useTTS"; import { useTTS } from "@/hooks/useTTS";
@@ -17,12 +17,19 @@ import {
Search, Search,
FolderIcon, FolderIcon,
Settings, Settings,
BarChart3,
X, X,
CheckSquare,
ArchiveRestore,
ArrowUpDown,
} from "lucide-react"; } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
type FilterType = "all" | "favorites" | "archived" | "folder" | "search"; type FilterType = "all" | "favorites" | "archived" | "folder" | "search";
type SortType = "newest" | "oldest" | "title-asc" | "title-desc";
// Simple client-side cache for instant section switching
const articleCache = new Map<string, { data: Article[]; timestamp: number }>();
const CACHE_TTL = 30000; // 30 seconds
export default function Home() { export default function Home() {
const [articles, setArticles] = useState<Article[]>([]); const [articles, setArticles] = useState<Article[]>([]);
@@ -36,6 +43,11 @@ export default function Home() {
const [isSidebarOpen, setIsSidebarOpen] = useState(true); const [isSidebarOpen, setIsSidebarOpen] = useState(true);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [stats, setStats] = useState<{ streak: number; todayCount: number } | null>(null); const [stats, setStats] = useState<{ streak: number; todayCount: number } | null>(null);
const [isSelectMode, setIsSelectMode] = useState(false);
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
const [isBulkUpdating, setIsBulkUpdating] = useState(false);
const [sortBy, setSortBy] = useState<SortType>("newest");
const [showSortMenu, setShowSortMenu] = useState(false);
const [readerSettings, setReaderSettings] = useReaderSettings(); const [readerSettings, setReaderSettings] = useReaderSettings();
const [ttsSettings, setTTSSettings] = useTTSSettings(); const [ttsSettings, setTTSSettings] = useTTSSettings();
@@ -57,8 +69,37 @@ export default function Home() {
} }
}, [readerSettings]); }, [readerSettings]);
// Fetch articles // Sort articles client-side
const fetchArticles = useCallback(async () => { const sortArticles = useCallback((articles: Article[], sort: SortType): Article[] => {
const sorted = [...articles];
switch (sort) {
case "newest":
return sorted.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
case "oldest":
return sorted.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
case "title-asc":
return sorted.sort((a, b) => a.title.localeCompare(b.title));
case "title-desc":
return sorted.sort((a, b) => b.title.localeCompare(a.title));
default:
return sorted;
}
}, []);
// Fetch articles with caching
const fetchArticles = useCallback(async (skipCache = false) => {
const cacheKey = filter === "folder" ? `folder-${selectedFolderId}` : filter;
// Check cache first for instant display
if (!skipCache) {
const cached = articleCache.get(cacheKey);
if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
setArticles(sortArticles(cached.data, sortBy));
setIsLoading(false);
return;
}
}
try { try {
let url = `/api/articles?filter=${filter}`; let url = `/api/articles?filter=${filter}`;
if (filter === "folder" && selectedFolderId) { if (filter === "folder" && selectedFolderId) {
@@ -67,14 +108,16 @@ export default function Home() {
const response = await fetch(url); const response = await fetch(url);
if (response.ok) { if (response.ok) {
const data = await response.json(); const data = await response.json();
setArticles(data); // Cache the raw data
articleCache.set(cacheKey, { data, timestamp: Date.now() });
setArticles(sortArticles(data, sortBy));
} }
} catch (error) { } catch (error) {
console.error("Failed to fetch articles:", error); console.error("Failed to fetch articles:", error);
} finally { } finally {
setIsLoading(false); setIsLoading(false);
} }
}, [filter, selectedFolderId]); }, [filter, selectedFolderId, sortBy, sortArticles]);
// Fetch folders // Fetch folders
const fetchFolders = useCallback(async () => { const fetchFolders = useCallback(async () => {
@@ -112,6 +155,15 @@ export default function Home() {
fetchStats(); fetchStats();
}, [fetchArticles, fetchFolders, fetchStats]); }, [fetchArticles, fetchFolders, fetchStats]);
// Re-sort when sort changes (use cached data for instant response)
useEffect(() => {
const cacheKey = filter === "folder" ? `folder-${selectedFolderId}` : filter;
const cached = articleCache.get(cacheKey);
if (cached) {
setArticles(sortArticles(cached.data, sortBy));
}
}, [sortBy, filter, selectedFolderId, sortArticles]);
// Search // Search
const handleSearch = async () => { const handleSearch = async () => {
if (!searchQuery.trim()) { if (!searchQuery.trim()) {
@@ -147,7 +199,8 @@ export default function Home() {
throw new Error(data.error || "Failed to add article"); throw new Error(data.error || "Failed to add article");
} }
await fetchArticles(); articleCache.clear();
await fetchArticles(true);
fetchStats(); fetchStats();
}; };
@@ -176,7 +229,8 @@ export default function Home() {
body: JSON.stringify({ isArchived }), body: JSON.stringify({ isArchived }),
}); });
await fetchArticles(); articleCache.clear();
await fetchArticles(true);
fetchStats(); fetchStats();
if (selectedArticle?.id === id) { if (selectedArticle?.id === id) {
@@ -187,13 +241,87 @@ export default function Home() {
// Delete article // Delete article
const handleDelete = async (id: string) => { const handleDelete = async (id: string) => {
await fetch(`/api/articles/${id}`, { method: "DELETE" }); await fetch(`/api/articles/${id}`, { method: "DELETE" });
await fetchArticles(); articleCache.clear();
await fetchArticles(true);
if (selectedArticle?.id === id) { if (selectedArticle?.id === id) {
setSelectedArticle(null); setSelectedArticle(null);
} }
}; };
// Fetch full article (with content) when opening for reading
const handleSelectArticle = async (article: Article) => {
// If article already has content, use it directly
if (article.content && article.textContent) {
setSelectedArticle(article);
return;
}
// Otherwise fetch full article
try {
const response = await fetch(`/api/articles/${article.id}`);
if (response.ok) {
const fullArticle = await response.json();
setSelectedArticle(fullArticle);
}
} catch (error) {
console.error("Failed to fetch article:", error);
}
};
// Toggle article selection
const handleToggleSelect = (id: string) => {
setSelectedIds((prev) => {
const next = new Set(prev);
if (next.has(id)) {
next.delete(id);
} else {
next.add(id);
}
return next;
});
};
// Select all visible articles
const handleSelectAll = () => {
if (selectedIds.size === articles.length) {
setSelectedIds(new Set());
} else {
setSelectedIds(new Set(articles.map((a) => a.id)));
}
};
// Bulk archive/unarchive
const handleBulkArchive = async (archive: boolean) => {
if (selectedIds.size === 0) return;
setIsBulkUpdating(true);
try {
await fetch("/api/articles", {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
ids: Array.from(selectedIds),
updates: { isArchived: archive },
}),
});
// Clear cache to force refresh
articleCache.clear();
await fetchArticles(true);
setSelectedIds(new Set());
setIsSelectMode(false);
fetchStats();
} catch (error) {
console.error("Bulk update failed:", error);
} finally {
setIsBulkUpdating(false);
}
};
// Exit select mode
const exitSelectMode = () => {
setIsSelectMode(false);
setSelectedIds(new Set());
};
// Reading view // Reading view
if (selectedArticle) { if (selectedArticle) {
return ( return (
@@ -268,7 +396,7 @@ export default function Home() {
<nav className="flex-1 p-2 overflow-y-auto"> <nav className="flex-1 p-2 overflow-y-auto">
{/* Main filters */} {/* Main filters */}
{[ {[
{ value: "all", label: "All Articles", icon: BookOpen }, { value: "all", label: "To Read", icon: BookOpen },
{ value: "favorites", label: "Favorites", icon: Star }, { value: "favorites", label: "Favorites", icon: Star },
{ value: "archived", label: "Archived", icon: Archive }, { value: "archived", label: "Archived", icon: Archive },
].map(({ value, label, icon: Icon }) => ( ].map(({ value, label, icon: Icon }) => (
@@ -335,45 +463,141 @@ export default function Home() {
{/* Main content */} {/* Main content */}
<main className="flex-1 flex flex-col min-w-0"> <main className="flex-1 flex flex-col min-w-0">
<header className="flex items-center gap-4 px-4 py-3 border-b border-[var(--border)]"> {/* Select mode bar */}
<button {isSelectMode ? (
onClick={() => setIsSidebarOpen(!isSidebarOpen)} <header className="flex items-center gap-4 px-4 py-3 border-b border-[var(--border)] bg-[var(--accent)]/10">
className="p-2 rounded hover:bg-[var(--surface)] transition-colors" <button
> onClick={exitSelectMode}
<Menu className="w-5 h-5" /> className="p-2 rounded hover:bg-[var(--surface)] transition-colors"
</button> >
<X className="w-5 h-5" />
</button>
<span className="font-medium">
{selectedIds.size} selected
</span>
<button
onClick={handleSelectAll}
className="text-sm text-[var(--accent)] hover:underline"
>
{selectedIds.size === articles.length ? "Deselect all" : "Select all"}
</button>
<div className="flex-1" />
{filter === "archived" ? (
<button
onClick={() => handleBulkArchive(false)}
disabled={selectedIds.size === 0 || isBulkUpdating}
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-[var(--accent)] text-white hover:opacity-90 transition-opacity disabled:opacity-50"
>
<ArchiveRestore className="w-4 h-4" />
{isBulkUpdating ? "Moving..." : "Unarchive"}
</button>
) : (
<button
onClick={() => handleBulkArchive(true)}
disabled={selectedIds.size === 0 || isBulkUpdating}
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-[var(--accent)] text-white hover:opacity-90 transition-opacity disabled:opacity-50"
>
<Archive className="w-4 h-4" />
{isBulkUpdating ? "Archiving..." : "Archive"}
</button>
)}
</header>
) : (
<header className="flex items-center gap-4 px-4 py-3 border-b border-[var(--border)]">
<button
onClick={() => setIsSidebarOpen(!isSidebarOpen)}
className="p-2 rounded hover:bg-[var(--surface)] transition-colors"
>
<Menu className="w-5 h-5" />
</button>
{/* Search */} {/* Search */}
<div className="flex-1 flex items-center gap-2 max-w-md"> <div className="flex-1 flex items-center gap-2 max-w-md">
<div className="flex-1 relative"> <div className="flex-1 relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--muted)]" /> <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--muted)]" />
<input <input
type="text" type="text"
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
onKeyDown={(e) => e.key === "Enter" && handleSearch()} onKeyDown={(e) => e.key === "Enter" && handleSearch()}
placeholder="Search articles..." placeholder="Search articles..."
className="w-full pl-10 pr-4 py-2 rounded-lg border border-[var(--border)] bg-[var(--background)] text-sm" className="w-full pl-10 pr-4 py-2 rounded-lg border border-[var(--border)] bg-[var(--background)] text-sm"
/> />
{searchQuery && ( {searchQuery && (
<button <button
onClick={() => { onClick={() => {
setSearchQuery(""); setSearchQuery("");
setFilter("all"); setFilter("all");
fetchArticles(); fetchArticles();
}} }}
className="absolute right-3 top-1/2 -translate-y-1/2" className="absolute right-3 top-1/2 -translate-y-1/2"
> >
<X className="w-4 h-4 text-[var(--muted)]" /> <X className="w-4 h-4 text-[var(--muted)]" />
</button> </button>
)}
</div>
</div>
<span className="text-[var(--muted)] text-sm">
{articles.length} articles
</span>
{/* Sort dropdown */}
<div className="relative">
<button
onClick={() => setShowSortMenu(!showSortMenu)}
className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-[var(--muted)] hover:text-[var(--foreground)] hover:bg-[var(--surface)] transition-colors"
>
<ArrowUpDown className="w-4 h-4" />
<span className="hidden sm:inline">
{sortBy === "newest" && "Newest"}
{sortBy === "oldest" && "Oldest"}
{sortBy === "title-asc" && "A-Z"}
{sortBy === "title-desc" && "Z-A"}
</span>
</button>
{showSortMenu && (
<>
<div
className="fixed inset-0 z-10"
onClick={() => setShowSortMenu(false)}
/>
<div className="absolute right-0 top-full mt-1 bg-[var(--background)] border border-[var(--border)] rounded-lg shadow-lg z-20 py-1 min-w-[140px]">
{[
{ value: "newest", label: "Newest first" },
{ value: "oldest", label: "Oldest first" },
{ value: "title-asc", label: "Title A-Z" },
{ value: "title-desc", label: "Title Z-A" },
].map((option) => (
<button
key={option.value}
onClick={() => {
setSortBy(option.value as SortType);
setShowSortMenu(false);
}}
className={`w-full px-4 py-2 text-left text-sm hover:bg-[var(--surface)] transition-colors ${
sortBy === option.value ? "text-[var(--accent)] font-medium" : ""
}`}
>
{option.label}
</button>
))}
</div>
</>
)} )}
</div> </div>
</div>
<span className="text-[var(--muted)] text-sm"> {articles.length > 0 && (
{articles.length} articles <button
</span> onClick={() => setIsSelectMode(true)}
</header> className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-[var(--muted)] hover:text-[var(--foreground)] hover:bg-[var(--surface)] transition-colors"
>
<CheckSquare className="w-4 h-4" />
Select
</button>
)}
</header>
)}
<AddArticle onAdd={handleAddArticle} /> <AddArticle onAdd={handleAddArticle} />
@@ -387,7 +611,10 @@ export default function Home() {
) : ( ) : (
<ArticleList <ArticleList
articles={articles} articles={articles}
onSelect={setSelectedArticle} isSelectMode={isSelectMode}
selectedIds={selectedIds}
onSelect={handleSelectArticle}
onToggleSelect={handleToggleSelect}
onToggleFavorite={handleToggleFavorite} onToggleFavorite={handleToggleFavorite}
onToggleArchive={handleToggleArchive} onToggleArchive={handleToggleArchive}
onDelete={handleDelete} onDelete={handleDelete}

25
src/app/settings/page.tsx
View File

@@ -91,9 +91,28 @@ export default function SettingsPage() {
}; };
const copyToClipboard = async (text: string) => { const copyToClipboard = async (text: string) => {
await navigator.clipboard.writeText(text); try {
setCopied(true); await navigator.clipboard.writeText(text);
setTimeout(() => setCopied(false), 2000); setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch {
// Fallback for older browsers or permission denied
const textArea = document.createElement("textarea");
textArea.value = text;
textArea.style.position = "fixed";
textArea.style.left = "-9999px";
document.body.appendChild(textArea);
textArea.select();
try {
document.execCommand("copy");
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch {
// If all else fails, show the URL in a prompt
window.prompt("Copy this URL:", text);
}
document.body.removeChild(textArea);
}
}; };
const handleImport = async () => { const handleImport = async () => {

107
src/components/ArticleList.tsx
View File

@@ -1,13 +1,16 @@
"use client"; "use client";
import { Article } from "@/lib/types"; import { Article } from "@/lib/types";
import { Star, Archive, Trash2, ExternalLink, Clock } from "lucide-react"; import { Star, Archive, Trash2, ExternalLink, Clock, CheckSquare, Square } from "lucide-react";
import { formatDistanceToNow } from "@/lib/utils/date"; import { formatDistanceToNow, formatDate } from "@/lib/utils/date";
interface ArticleListProps { interface ArticleListProps {
articles: Article[]; articles: Article[];
selectedId?: string; selectedId?: string;
selectedIds?: Set<string>;
isSelectMode?: boolean;
onSelect: (article: Article) => void; onSelect: (article: Article) => void;
onToggleSelect?: (id: string) => void;
onToggleFavorite: (id: string, isFavorite: boolean) => void; onToggleFavorite: (id: string, isFavorite: boolean) => void;
onToggleArchive: (id: string, isArchived: boolean) => void; onToggleArchive: (id: string, isArchived: boolean) => void;
onDelete: (id: string) => void; onDelete: (id: string) => void;
@@ -16,7 +19,10 @@ interface ArticleListProps {
export function ArticleList({ export function ArticleList({
articles, articles,
selectedId, selectedId,
selectedIds = new Set(),
isSelectMode = false,
onSelect, onSelect,
onToggleSelect,
onToggleFavorite, onToggleFavorite,
onToggleArchive, onToggleArchive,
onDelete, onDelete,
@@ -51,46 +57,66 @@ export function ArticleList({
return ( return (
<div className="divide-y divide-[var(--border)]"> <div className="divide-y divide-[var(--border)]">
{articles.map((article) => ( {articles.map((article) => {
<div const isSelected = selectedIds.has(article.id);
key={article.id} return (
className={`p-4 cursor-pointer transition-colors hover:bg-[var(--surface)] ${ <div
selectedId === article.id ? "bg-[var(--surface)]" : "" key={article.id}
}`} className={`p-4 cursor-pointer transition-colors hover:bg-[var(--surface)] ${
onClick={() => onSelect(article)} selectedId === article.id ? "bg-[var(--surface)]" : ""
> } ${isSelected ? "bg-[var(--accent)]/10" : ""}`}
<div className="flex gap-4"> onClick={() => {
{article.leadImage && ( if (isSelectMode && onToggleSelect) {
<img onToggleSelect(article.id);
src={article.leadImage} } else {
alt="" onSelect(article);
className="w-20 h-20 object-cover rounded flex-shrink-0" }
/> }}
)} >
<div className="flex-1 min-w-0"> <div className="flex gap-4">
<h3 className="font-medium truncate mb-1">{article.title}</h3> {isSelectMode && (
<p className="text-sm text-[var(--muted)] mb-2"> <div className="flex-shrink-0 flex items-start pt-1">
{article.siteName} {isSelected ? (
{article.author && ` · ${article.author}`} <CheckSquare className="w-5 h-5 text-[var(--accent)]" />
</p> ) : (
{article.excerpt && ( <Square className="w-5 h-5 text-[var(--muted)]" />
<p className="text-sm text-[var(--muted)] line-clamp-2"> )}
{article.excerpt} </div>
</p>
)} )}
<div className="flex items-center gap-4 mt-2 text-xs text-[var(--muted)]"> {article.leadImage && !isSelectMode && (
<span className="flex items-center gap-1"> <img
<Clock className="w-3 h-3" /> src={article.leadImage}
{Math.ceil(article.wordCount / 200)} min read alt=""
</span> className="w-20 h-20 object-cover rounded flex-shrink-0"
<span>{formatDistanceToNow(article.createdAt)}</span> />
{article.readingProgress > 0 && article.readingProgress < 100 && ( )}
<span>{article.readingProgress}% read</span> <div className="flex-1 min-w-0">
<h3 className="font-medium truncate mb-1">{article.title}</h3>
<p className="text-sm text-[var(--muted)] mb-2">
{article.siteName}
{article.author && ` · ${article.author}`}
</p>
{!isSelectMode && article.excerpt && (
<p className="text-sm text-[var(--muted)] line-clamp-2">
{article.excerpt}
</p>
)} )}
<div className="flex items-center gap-4 mt-2 text-xs text-[var(--muted)]">
<span className="flex items-center gap-1">
<Clock className="w-3 h-3" />
{Math.ceil(article.wordCount / 200)} min read
</span>
{article.publishedAt && (
<span title="Published date">{formatDate(article.publishedAt)}</span>
)}
<span title="Added to library">{formatDistanceToNow(article.createdAt)}</span>
{article.readingProgress > 0 && article.readingProgress < 100 && (
<span>{article.readingProgress}% read</span>
)}
</div>
</div> </div>
</div> </div>
</div> {!isSelectMode && <div className="flex items-center gap-2 mt-3">
<div className="flex items-center gap-2 mt-3">
<button <button
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
@@ -141,9 +167,10 @@ export function ArticleList({
> >
<Trash2 className="w-4 h-4" /> <Trash2 className="w-4 h-4" />
</button> </button>
</div>}
</div> </div>
</div> );
))} })}
</div> </div>
); );
} }

9
src/components/Reader.tsx
View File

@@ -2,7 +2,8 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { Article, ReaderSettings } from "@/lib/types"; import { Article, ReaderSettings } from "@/lib/types";
import { ArrowLeft, Star, Archive, Trash2, Settings, ExternalLink } from "lucide-react"; import { ArrowLeft, Star, Archive, Trash2, Settings, ExternalLink, Calendar } from "lucide-react";
import { formatDate } from "@/lib/utils/date";
interface ReaderProps { interface ReaderProps {
article: Article; article: Article;
@@ -141,6 +142,12 @@ export function Reader({
<div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-[var(--muted)] text-sm"> <div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-[var(--muted)] text-sm">
{article.siteName && <span>{article.siteName}</span>} {article.siteName && <span>{article.siteName}</span>}
{article.author && <span>By {article.author}</span>} {article.author && <span>By {article.author}</span>}
{article.publishedAt && (
<span className="flex items-center gap-1">
<Calendar className="w-3.5 h-3.5" />
{formatDate(article.publishedAt)}
</span>
)}
<span>{Math.ceil(article.wordCount / 200)} min read</span> <span>{Math.ceil(article.wordCount / 200)} min read</span>
</div> </div>
</header> </header>

1
src/lib/db/schema.ts
View File

@@ -42,6 +42,7 @@ export const articles = sqliteTable("articles", {
updatedAt: integer("updated_at", { mode: "timestamp" }).$defaultFn(() => new Date()), updatedAt: integer("updated_at", { mode: "timestamp" }).$defaultFn(() => new Date()),
readAt: integer("read_at", { mode: "timestamp" }), readAt: integer("read_at", { mode: "timestamp" }),
finishedAt: integer("finished_at", { mode: "timestamp" }), // When reading was completed finishedAt: integer("finished_at", { mode: "timestamp" }), // When reading was completed
publishedAt: integer("published_at", { mode: "timestamp" }), // Original article publish date
}); });
// Highlights and notes // Highlights and notes

1
src/lib/types.ts
View File

@@ -19,6 +19,7 @@ export interface Article {
updatedAt: string; updatedAt: string;
readAt: string | null; readAt: string | null;
finishedAt: string | null; finishedAt: string | null;
publishedAt: string | null;
} }
export interface Folder { export interface Folder {

9
src/lib/utils/date.ts
View File

@@ -1,3 +1,12 @@
export function formatDate(date: string | Date): string {
const d = new Date(date);
return d.toLocaleDateString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
});
}
export function formatDistanceToNow(date: string | Date): string { export function formatDistanceToNow(date: string | Date): string {
const d = new Date(date); const d = new Date(date);
const now = new Date(); const now = new Date();

239
src/lib/utils/extract.ts
View File

@@ -1,5 +1,28 @@
import { Readability } from "@mozilla/readability"; import { Readability } from "@mozilla/readability";
import { JSDOM } from "jsdom"; import { JSDOM, VirtualConsole } from "jsdom";
// Create a virtual console that suppresses CSS parsing errors
// JSDOM has issues with modern CSS (variables, etc.) that don't affect Readability
function createVirtualConsole() {
const virtualConsole = new VirtualConsole();
virtualConsole.on("error", () => {
// Suppress CSS parsing errors
});
virtualConsole.on("warn", () => {
// Suppress warnings
});
return virtualConsole;
}
// Strip style tags and inline styles from HTML to prevent JSDOM CSS parsing errors
// Readability doesn't need CSS - it only needs the DOM structure
function stripStyles(html: string): string {
// Remove <style> tags and their contents
let cleaned = html.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, "");
// Remove style attributes (but keep the rest of the tag)
cleaned = cleaned.replace(/\s+style\s*=\s*["'][^"']*["']/gi, "");
return cleaned;
}
export interface ExtractedArticle { export interface ExtractedArticle {
title: string; title: string;
@@ -10,22 +33,122 @@ export interface ExtractedArticle {
textContent: string; textContent: string;
leadImage: string | null; leadImage: string | null;
wordCount: number; wordCount: number;
publishedAt: Date | null;
}
// Try to extract actual article URL from Google News redirect page
function extractGoogleNewsUrl(html: string): string | null {
// Google News embeds the real URL in various ways
// Look for data-n-au attribute (article URL)
const dataMatch = html.match(/data-n-au="([^"]+)"/);
if (dataMatch) return decodeURIComponent(dataMatch[1]);
// Look for canonical link
const canonicalMatch = html.match(/<link[^>]+rel=["']canonical["'][^>]+href=["']([^"']+)["']/i);
if (canonicalMatch && !canonicalMatch[1].includes('news.google.com')) {
return canonicalMatch[1];
}
// Look for og:url that's not Google News
const ogMatch = html.match(/<meta[^>]+property=["']og:url["'][^>]+content=["']([^"']+)["']/i);
if (ogMatch && !ogMatch[1].includes('news.google.com')) {
return ogMatch[1];
}
// Look for article link in jsdata or similar
const jsMatch = html.match(/jsdata="[^"]*https?:\/\/(?!news\.google\.com)[^"&\s]+/);
if (jsMatch) {
const urlMatch = jsMatch[0].match(/https?:\/\/[^"&\s]+/);
if (urlMatch) return urlMatch[0];
}
return null;
} }
export async function extractArticle(url: string): Promise<ExtractedArticle> { export async function extractArticle(url: string): Promise<ExtractedArticle> {
// Fetch the page // Resolve shortened/redirect URLs first
const response = await fetch(url, { let resolvedUrl = url;
// Follow redirects to get final URL
try {
const headResponse = await fetch(url, {
method: 'HEAD',
redirect: 'follow',
headers: {
"User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
},
});
resolvedUrl = headResponse.url;
} catch {
// If HEAD fails, continue with original URL
}
// Fetch the page with browser-like headers to avoid bot detection
const response = await fetch(resolvedUrl, {
headers: { headers: {
"User-Agent": "Mozilla/5.0 (compatible; ReadLater/1.0)", "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
"Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8",
"Accept-Language": "en-US,en;q=0.9",
"Accept-Encoding": "gzip, deflate, br",
"Cache-Control": "no-cache",
"Pragma": "no-cache",
"Sec-Ch-Ua": '"Not_A Brand";v="8", "Chromium";v="120", "Google Chrome";v="120"',
"Sec-Ch-Ua-Mobile": "?0",
"Sec-Ch-Ua-Platform": '"macOS"',
"Sec-Fetch-Dest": "document",
"Sec-Fetch-Mode": "navigate",
"Sec-Fetch-Site": "none",
"Sec-Fetch-User": "?1",
"Upgrade-Insecure-Requests": "1",
}, },
}); });
if (!response.ok) { if (!response.ok) {
// On 403/blocked, return minimal article with just URL info
if (response.status === 403 || response.status === 401) {
const hostname = new URL(url).hostname.replace(/^www\./, "");
return {
title: `Article from ${hostname}`,
author: null,
siteName: hostname,
excerpt: "This site blocked automated access. Use 'Open original' to read, or the Content Capture bookmarklet to save the full article.",
content: `<p>This site blocked automated access. <a href="${url}" target="_blank">Open original article</a> to read.</p><p>Tip: Use the Content Capture bookmarklet from the article page to save the full content.</p>`,
textContent: "This site blocked automated access. Open original article to read.",
leadImage: null,
wordCount: 0,
publishedAt: null,
};
}
throw new Error(`Failed to fetch: ${response.status} ${response.statusText}`); throw new Error(`Failed to fetch: ${response.status} ${response.statusText}`);
} }
const html = await response.text(); let html = await response.text();
const dom = new JSDOM(html, { url }); let finalUrl = resolvedUrl;
// Check if we landed on Google News - need to extract actual article URL
if (resolvedUrl.includes('news.google.com')) {
const realUrl = extractGoogleNewsUrl(html);
if (realUrl) {
// Fetch the actual article
const articleResponse = await fetch(realUrl, {
headers: {
"User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
"Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8",
"Accept-Language": "en-US,en;q=0.9",
},
});
if (articleResponse.ok) {
html = await articleResponse.text();
finalUrl = realUrl;
}
}
}
const cleanedHtml = stripStyles(html);
const dom = new JSDOM(cleanedHtml, {
url: finalUrl,
virtualConsole: createVirtualConsole(),
});
const document = dom.window.document; const document = dom.window.document;
// Extract using Readability // Extract using Readability
@@ -43,6 +166,34 @@ export async function extractArticle(url: string): Promise<ExtractedArticle> {
leadImage = ogImage.getAttribute("content"); leadImage = ogImage.getAttribute("content");
} }
// Try to find publish date from various meta tags
let publishedAt: Date | null = null;
const dateSelectors = [
'meta[property="article:published_time"]',
'meta[name="article:published_time"]',
'meta[property="og:published_time"]',
'meta[name="pubdate"]',
'meta[name="publishdate"]',
'meta[name="date"]',
'meta[itemprop="datePublished"]',
'time[datetime]',
'time[pubdate]',
];
for (const selector of dateSelectors) {
const el = document.querySelector(selector);
if (el) {
const dateStr = el.getAttribute("content") || el.getAttribute("datetime");
if (dateStr) {
const parsed = new Date(dateStr);
if (!isNaN(parsed.getTime())) {
publishedAt = parsed;
break;
}
}
}
}
const textContent = article.textContent || ""; const textContent = article.textContent || "";
const content = article.content || ""; const content = article.content || "";
@@ -52,11 +203,87 @@ export async function extractArticle(url: string): Promise<ExtractedArticle> {
return { return {
title: article.title || "Untitled", title: article.title || "Untitled",
author: article.byline || null, author: article.byline || null,
siteName: article.siteName || new URL(finalUrl).hostname,
excerpt: article.excerpt || null,
content,
textContent,
leadImage,
wordCount,
publishedAt,
};
}
// Extract article from provided HTML content (for bookmarklet with content capture)
export async function extractFromHtml(
html: string,
url: string,
fallbackTitle?: string
): Promise<ExtractedArticle> {
const cleanedHtml = stripStyles(html);
const dom = new JSDOM(cleanedHtml, {
url,
virtualConsole: createVirtualConsole(),
});
const document = dom.window.document;
// Extract using Readability
const reader = new Readability(document);
const article = reader.parse();
if (!article) {
throw new Error("Could not extract article content from provided HTML");
}
// Try to find lead image
let leadImage: string | null = null;
const ogImage = document.querySelector('meta[property="og:image"]');
if (ogImage) {
leadImage = ogImage.getAttribute("content");
}
// Try to find publish date from various meta tags
let publishedAt: Date | null = null;
const dateSelectors = [
'meta[property="article:published_time"]',
'meta[name="article:published_time"]',
'meta[property="og:published_time"]',
'meta[name="pubdate"]',
'meta[name="publishdate"]',
'meta[name="date"]',
'meta[itemprop="datePublished"]',
'time[datetime]',
'time[pubdate]',
];
for (const selector of dateSelectors) {
const el = document.querySelector(selector);
if (el) {
const dateStr = el.getAttribute("content") || el.getAttribute("datetime");
if (dateStr) {
const parsed = new Date(dateStr);
if (!isNaN(parsed.getTime())) {
publishedAt = parsed;
break;
}
}
}
}
const textContent = article.textContent || "";
const content = article.content || "";
// Calculate word count
const wordCount = textContent.split(/\s+/).filter(Boolean).length;
return {
title: article.title || fallbackTitle || "Untitled",
author: article.byline || null,
siteName: article.siteName || new URL(url).hostname, siteName: article.siteName || new URL(url).hostname,
excerpt: article.excerpt || null, excerpt: article.excerpt || null,
content, content,
textContent, textContent,
leadImage, leadImage,
wordCount, wordCount,
publishedAt,
}; };
} }