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>
Add content capture bookmarklet for paywalled sites
2026-05-24 22:01:41 +08:00 · 2026-01-23 09:19:22 +00:00 · 2026-01-23 09:14:09 +00:00
4 changed files with 305 additions and 37 deletions
--- a/src/app/api/save/route.ts
+++ b/src/app/api/save/route.ts
@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
 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 { eq } from "drizzle-orm";

@@ -138,3 +138,139 @@ 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,
+    };
+
+    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"
+    );
+  }
+}
--- a/src/app/bookmarklet/page.tsx
+++ b/src/app/bookmarklet/page.tsx
@@ -1,23 +1,34 @@
 "use client";

 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";

 export default function BookmarkletPage() {
  const [baseUrl, setBaseUrl] = useState("");
-  const [copied, setCopied] = useState(false);
+  const [copiedSimple, setCopiedSimple] = useState(false);
+  const [copiedAdvanced, setCopiedAdvanced] = useState(false);

  useEffect(() => {
    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 () => {
-    await navigator.clipboard.writeText(bookmarkletCode);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
+  // Advanced bookmarklet - captures page content directly (works for paywalled/protected sites)
+  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);})();`;
+
+  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 (
@@ -31,31 +42,76 @@ export default function BookmarkletPage() {
          Back to ReadLater
        </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">
-          <h2 className="text-xl font-semibold mb-4">Quick Save Bookmarklet</h2>
-          <p className="text-[var(--muted)] mb-6">
-            Drag this button to your bookmarks bar, or right-click and &quot;Add to Bookmarks&quot;.
-            Then click it on any page to save the article to ReadLater.
+        {/* Advanced Bookmarklet - Recommended */}
+        <div className="bg-[var(--surface)] rounded-lg p-6 mb-6 border-2 border-[var(--accent)]">
+          <div className="flex items-center gap-2 mb-4">
+            <Zap className="w-5 h-5 text-[var(--accent)]" />
+            <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>

          <div className="flex flex-col sm:flex-row gap-4 items-start">
            <a
-              href={bookmarkletCode}
+              href={advancedBookmarklet}
              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"
              title="Drag to bookmarks bar"
            >
-              <BookOpen className="w-5 h-5" />
+              <Zap className="w-5 h-5" />
              Save to ReadLater
            </a>

            <button
-              onClick={handleCopy}
-              className="inline-flex items-center gap-2 px-4 py-3 border border-[var(--border)] rounded-lg hover:bg-[var(--surface)] transition-colors"
+              onClick={handleCopyAdvanced}
+              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" />
                  Copied!
@@ -71,22 +127,21 @@ export default function BookmarkletPage() {
        </div>

        <div className="bg-[var(--surface)] rounded-lg p-6">
-          <h2 className="text-xl font-semibold mb-4">Manual Installation</h2>
-          <p className="text-[var(--muted)] mb-4">
-            If dragging doesn&apos;t work, create a new bookmark and paste this as the URL:
-          </p>
-          <pre className="bg-[var(--background)] p-4 rounded-lg overflow-x-auto text-sm">
-            <code className="text-[var(--muted)]">{bookmarkletCode}</code>
-          </pre>
+          <h2 className="text-xl font-semibold mb-4">Installation</h2>
+          <ol className="list-decimal list-inside space-y-2 text-[var(--muted)]">
+            <li><strong>Drag</strong> the button above to your bookmarks bar</li>
+            <li>Or <strong>right-click</strong> → &quot;Add to Bookmarks&quot;</li>
+            <li>Or <strong>copy the code</strong> and create a bookmark manually</li>
+          </ol>
        </div>

        <div className="mt-8 text-[var(--muted)] text-sm">
-          <h3 className="font-semibold mb-2">How it works:</h3>
-          <ol className="list-decimal list-inside space-y-1">
-            <li>Click the bookmarklet on any article page</li>
-            <li>A popup will confirm the article was saved</li>
-            <li>The article appears in your ReadLater list</li>
-          </ol>
+          <h3 className="font-semibold mb-2">Tips:</h3>
+          <ul className="list-disc list-inside space-y-1">
+            <li>Use the <strong>Content Capture</strong> bookmarklet for paywalled sites you&apos;re subscribed to</li>
+            <li>Make sure you&apos;re logged in to see the full article before clicking</li>
+            <li>The bookmarklet sends the visible page content directly to ReadLater</li>
+          </ul>
        </div>
      </div>
    </div>
--- a/src/app/settings/page.tsx
+++ b/src/app/settings/page.tsx
@@ -91,9 +91,28 @@ export default function SettingsPage() {
  };

  const copyToClipboard = async (text: string) => {
+    try {
      await navigator.clipboard.writeText(text);
      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 () => {
--- a/src/lib/utils/extract.ts
+++ b/src/lib/utils/extract.ts
@@ -13,14 +13,30 @@ export interface ExtractedArticle {
 }

 export async function extractArticle(url: string): Promise<ExtractedArticle> {
-  // Fetch the page
+  // Fetch the page with browser-like headers to avoid bot detection
  const response = await fetch(url, {
    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.status === 403) {
+      throw new Error(`This site blocks automated access (403 Forbidden). Try using the bookmarklet from the article page instead - it can capture content your browser can see.`);
+    }
    throw new Error(`Failed to fetch: ${response.status} ${response.statusText}`);
  }

@@ -60,3 +76,45 @@ export async function extractArticle(url: string): Promise<ExtractedArticle> {
    wordCount,
  };
 }
+
+// Extract article from provided HTML content (for bookmarklet with content capture)
+export async function extractFromHtml(
+  html: string,
+  url: string,
+  fallbackTitle?: string
+): Promise<ExtractedArticle> {
+  const dom = new JSDOM(html, { url });
+  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");
+  }
+
+  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,
+    excerpt: article.excerpt || null,
+    content,
+    textContent,
+    leadImage,
+    wordCount,
+  };
+}