From c79ddb1abf0820c3608df40301794ecd5ee903d6 Mon Sep 17 00:00:00 2001
From: JP Hastings-Spital <jp@byjp.me>
Date: Thu, 25 Jun 2026 14:13:06 +0000
Subject: [PATCH] Use book title for ISBN urns

If a book urn:isbn: is the target source for the annotation, then use the annotation's title & an open library url as the reference link, rather than the (unuseful) urn.
---
 web/src/components/common/Card.tsx | 34 +++++++++++++++++++++++++---------
 1 file(s) changed, 25 insertion(s)(+), 9 deletion(s)(-)

diff --git a/web/src/components/common/Card.tsx b/web/src/components/common/Card.tsx
--- a/web/src/components/common/Card.tsx
+++ b/web/src/components/common/Card.tsx
@@ -21,6 +21,7 @@
   Send,
   X,
   Bookmark,
+  BookOpen,
 } from "lucide-react";
 import ShareMenu from "../modals/ShareMenu";
 import AddToCollectionModal from "../modals/AddToCollectionModal";
@@ -338,6 +339,20 @@
       })()
     : null;
 
+  const isbn = pageUrl?.match(/^urn:isbn:(.+)$/i)?.[1].replace(/-/g, "");
+  const bookUrl = isbn ? `https://openlibrary.org/isbn/${isbn}` : null;
+  const bookTitle =
+    item.target?.title || item.title || (isbn ? `ISBN ${isbn}` : null);
+
+  const quoteLinkUrl = (() => {
+    const sel = item.target?.selector;
+    if (!sel?.exact) return null;
+    if (bookUrl) return bookUrl;
+    const prefix = sel.prefix ? encodeURIComponent(sel.prefix) + "-," : "";
+    const suffix = sel.suffix ? ",-" + encodeURIComponent(sel.suffix) : "";
+    return `${pageUrl}#:~:text=${prefix}${encodeURIComponent(sel.exact)}${suffix}`;
+  })();
+
   const decodeHTMLEntities = (text: string) => {
     if (!text.includes("&")) return text;
     try {
@@ -549,14 +564,18 @@
 
           {pageUrl && !isBookmark && !(contentWarning && !contentRevealed) && (
             <a
-              href={pageUrl}
+              href={bookUrl || pageUrl}
               target="_blank"
               rel="noopener noreferrer"
-              onClick={(e) => handleExternalClick(e, pageUrl)}
+              onClick={(e) => handleExternalClick(e, bookUrl || pageUrl)}
               className="inline-flex items-center gap-1 text-xs text-primary-600 dark:text-primary-400 hover:underline mt-0.5 max-w-full"
             >
-              <ExternalLink size={10} className="flex-shrink-0" />
-              <span className="truncate">{displayUrl}</span>
+              {isbn ? (
+                <BookOpen size={10} className="flex-shrink-0" />
+              ) : (
+                <ExternalLink size={10} className="flex-shrink-0" />
+              )}
+              <span className="truncate">{isbn ? bookTitle : displayUrl}</span>
             </a>
           )}
         </div>
@@ -697,14 +716,11 @@
               }
             >
               <a
-                href={`${pageUrl}#:~:text=${item.target.selector.prefix ? encodeURIComponent(item.target.selector.prefix) + "-," : ""}${encodeURIComponent(item.target.selector.exact)}${item.target.selector.suffix ? ",-" + encodeURIComponent(item.target.selector.suffix) : ""}`}
+                href={quoteLinkUrl || undefined}
                 target="_blank"
                 rel="noopener noreferrer"
                 onClick={(e) => {
-                  const sel = item.target?.selector;
-                  if (!sel) return;
-                  const url = `${pageUrl}#:~:text=${sel.prefix ? encodeURIComponent(sel.prefix) + "-," : ""}${encodeURIComponent(sel.exact)}${sel.suffix ? ",-" + encodeURIComponent(sel.suffix) : ""}`;
-                  handleExternalClick(e, url);
+                  if (quoteLinkUrl) handleExternalClick(e, quoteLinkUrl);
                 }}
                 className="block break-words"
               >

--
tangled.sh