cabbage/aishare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve captured page citations and navigation

Browse Source
This commit is contained in:
Codex
2026-07-08 08:43:39 +00:00
parent 37a5450107
commit 8734bc1f07
2 changed files with 150 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/render.ts
+23 -4
View File
@@ -20,7 +20,9 @@ const icons = {
share: `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8.5 12.5 15.5 8.5M8.5 11.5 15.5 15.5"/><circle cx="6.5" cy="12" r="2.5"/><circle cx="17.5" cy="7.5" r="2.5"/><circle cx="17.5" cy="16.5" r="2.5"/></svg>`,
chevron: `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m8 10 4 4 4-4"/></svg>`,
sun: `<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 3v2m0 14v2M3 12h2m14 0h2M5.6 5.6 7 7m10 10 1.4 1.4M18.4 5.6 17 7M7 17l-1.4 1.4"/></svg>`,
moon: `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 14.6A7.6 7.6 0 0 1 9.4 4 8 8 0 1 0 20 14.6Z"/></svg>`
moon: `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 14.6A7.6 7.6 0 0 1 9.4 4 8 8 0 1 0 20 14.6Z"/></svg>`,
arrowUp: `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 14 6-6 6 6"/><path d="M12 8v12"/></svg>`,
arrowDown: `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 10 6 6 6-6"/><path d="M12 4v12"/></svg>`
};
function css(): string {
@@ -59,7 +61,7 @@ html[data-theme="dark"] {
--bg: #212121; --panel: #212121; --text: #ececec; --muted: #a8a8a8; --border: #3f3f46; --soft: #2f2f2f; --code: #e5e7eb; --code-bg: #171717; --user-bubble: #303030;
}
* { box-sizing: border-box; }
body, .topbar, .message.user .content, .content pre, .content :not(pre) > code, .code-block, .code-block .code-header, .content th, .content td, .content blockquote, .downloads, .icon-button, .shot-menu, .shot-menu button, .toast {
body, .topbar, .message.user .content, .content pre, .content :not(pre) > code, .code-block, .code-block .code-header, .content th, .content td, .content blockquote, .content a[data-citation], .downloads, .icon-button, .shot-menu, .shot-menu button, .toast {
transition: background-color .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease;
}
body { margin: 0; background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.65; }
@@ -108,8 +110,10 @@ h1 { margin: 0; font-size: clamp(28px, 5vw, 44px); line-height: 1.12; letter-spa
.content th, .content td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: top; }
.content blockquote { border-left: 3px solid var(--border); margin: 1em 0; padding-left: 14px; color: var(--muted); }
.content img { max-width: 100%; height: auto; border-radius: 8px; }
.content a[data-citation] { color: var(--muted); font-size: 0.92em; white-space: nowrap; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.content a[data-citation] img { width: 14px; height: 14px; max-width: 14px; max-height: 14px; border-radius: 3px; object-fit: cover; vertical-align: -2px; margin: 0 3px 0 4px; }
.content a[data-citation] { display: inline-flex; align-items: center; gap: 5px; max-width: min(100%, 260px); min-height: 24px; margin: 0 2px; padding: 2px 8px 2px 5px; border: 1px solid var(--border); border-radius: 999px; background: var(--soft); color: var(--text); font-size: 0.88em; line-height: 1.25; white-space: nowrap; text-decoration: none; vertical-align: -5px; }
.content a[data-citation]:hover { background: color-mix(in srgb, var(--soft) 82%, var(--text) 18%); }
.content a[data-citation] img { width: 16px; height: 16px; max-width: 16px; max-height: 16px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.content a[data-citation] span { overflow: hidden; text-overflow: ellipsis; }
.downloads { position: relative; z-index: 3; border-top: 1px solid var(--border); background: var(--soft); }
.downloads-inner { max-width: 880px; margin: 0 auto; padding: 14px 20px; display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; overflow: visible; }
.icon-button { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); padding: 0; display: inline-grid; place-items: center; flex: 0 0 auto; cursor: pointer; text-decoration: none; }
@@ -127,6 +131,8 @@ h1 { margin: 0; font-size: clamp(28px, 5vw, 44px); line-height: 1.12; letter-spa
.toast-region { position: fixed; left: 50%; bottom: 22px; z-index: 40; display: grid; justify-items: center; pointer-events: none; transform: translateX(-50%); }
.toast { max-width: min(calc(100vw - 32px), 320px); border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); padding: 9px 12px; font-size: 13px; line-height: 1.35; box-shadow: 0 12px 30px rgba(0,0,0,.14); opacity: 0; transform: translateY(8px); transition: opacity .16s ease, transform .16s ease; }
.toast[data-visible="true"] { opacity: 1; transform: translateY(0); }
.jump-controls { position: fixed; right: 18px; bottom: 18px; z-index: 30; display: grid; gap: 8px; }
.jump-controls .icon-button { box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.source { max-width: 880px; margin: 0 auto; padding: 18px 20px 34px; color: var(--muted); font-size: 12px; }
.source a { color: var(--muted); }
.failure { max-width: 720px; margin: 0 auto; padding: 80px 20px; }
@@ -144,6 +150,7 @@ h1 { margin: 0; font-size: clamp(28px, 5vw, 44px); line-height: 1.12; letter-spa
.avatar, .assistant-icon { width: 26px; height: 26px; }
.content ul, .content ol { padding-left: 1.25em; }
.downloads-inner { padding: 12px 16px; }
.jump-controls { right: 12px; bottom: 12px; }
}`;
}
@@ -216,6 +223,14 @@ function pageScript(slug: string): string {
if (copy) copy.addEventListener("click", async function () {
await copyText(location.href.replace(/[?#].*$/, ""), "Link copied");
});
var jumpTop = document.querySelector("[data-jump-top]");
if (jumpTop) jumpTop.addEventListener("click", function () {
scrollTo({ top: 0, behavior: "smooth" });
});
var jumpBottom = document.querySelector("[data-jump-bottom]");
if (jumpBottom) jumpBottom.addEventListener("click", function () {
scrollTo({ top: document.documentElement.scrollHeight, behavior: "smooth" });
});
document.querySelectorAll("[data-copy-code]").forEach(function (button) {
button.addEventListener("click", async function () {
var block = button.closest(".code-block");
@@ -296,6 +311,10 @@ export function renderConversationPage(slug: string, conversation: NormalizedCon
Captured from ChatGPT on ${escapeHtml(new Date(conversation.capturedAt).toLocaleString())}.
Source: <a href="${escapeHtml(conversation.sourceUrl)}" rel="nofollow noreferrer">${escapeHtml(conversation.sourceUrl)}</a>
</footer>
<div class="jump-controls" aria-label="Page navigation">
<button class="icon-button" type="button" data-jump-top aria-label="Jump to top" title="Jump to top">${icons.arrowUp}</button>
<button class="icon-button" type="button" data-jump-bottom aria-label="Jump to bottom" title="Jump to bottom">${icons.arrowDown}</button>
</div>
<div class="toast-region" data-toast-region aria-live="polite" aria-atomic="true"></div>
</div>
<script>${pageScript(slug)}</script>