mirror of
https://github.com/Tony0410/readlater.git
synced 2026-05-24 22:01:41 +08:00
1022b1ddca
- 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>
277 lines
7.9 KiB
TypeScript
277 lines
7.9 KiB
TypeScript
import { NextRequest, NextResponse } from "next/server";
|
|
import { db, schema } from "@/lib/db";
|
|
import { extractArticle, extractFromHtml } from "@/lib/utils/extract";
|
|
import { v4 as uuidv4 } from "uuid";
|
|
import { eq } from "drizzle-orm";
|
|
|
|
// GET /api/save?url=... - Save article and return HTML response for bookmarklet
|
|
export async function GET(request: NextRequest) {
|
|
const searchParams = request.nextUrl.searchParams;
|
|
const url = searchParams.get("url");
|
|
|
|
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" },
|
|
});
|
|
};
|
|
|
|
if (!url) {
|
|
return htmlResponse("error", "No URL provided");
|
|
}
|
|
|
|
try {
|
|
const decodedUrl = decodeURIComponent(url);
|
|
|
|
// Check if article already exists
|
|
const existing = await db
|
|
.select()
|
|
.from(schema.articles)
|
|
.where(eq(schema.articles.url, decodedUrl))
|
|
.limit(1);
|
|
|
|
if (existing.length > 0) {
|
|
return htmlResponse("exists", `"${existing[0].title}" is already in your reading list`);
|
|
}
|
|
|
|
// Extract article content
|
|
const extracted = await extractArticle(decodedUrl);
|
|
|
|
const id = uuidv4();
|
|
const newArticle: schema.NewArticle = {
|
|
id,
|
|
url: decodedUrl,
|
|
title: extracted.title,
|
|
author: extracted.author,
|
|
siteName: extracted.siteName,
|
|
excerpt: extracted.excerpt,
|
|
content: extracted.content,
|
|
textContent: extracted.textContent,
|
|
leadImage: extracted.leadImage,
|
|
wordCount: extracted.wordCount,
|
|
};
|
|
|
|
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:", error);
|
|
return htmlResponse(
|
|
"error",
|
|
error instanceof Error ? error.message : "Failed to save article"
|
|
);
|
|
}
|
|
}
|
|
|
|
// 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,
|
|
};
|
|
|
|
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"
|
|
);
|
|
}
|
|
}
|