Something went wrong. Try again.
(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension web atproto comments
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174---import BaseLayout from '../layouts/BaseLayout.astro';import AppShell from '../views/AppShell';import { atUriForDid, type AtTags } from '../lib/atTags';
const user = Astro.locals.user ?? null;const path = Astro.params.appPath || '';const segments = path.split('/');
const API_URL = process.env.API_URL || `http://localhost:${process.env.API_PORT || 8081}`;const BASE_URL = process.env.BASE_URL || 'https://margin.at';
let title = 'Margin';let description = 'Annotate the web';let image = `${BASE_URL}/og.png`;const atTags: Required<AtTags> = { canonical: [], alternate: [], author: [] };
try { let uri = '';
if (segments.length === 2 && segments[0] === 'annotation' && segments[1]) { uri = decodeURIComponent(segments[1]); } else if (segments.length === 3 && segments[0] === 'at') { uri = `at://${segments[1]}/at.margin.note/${segments[2]}`; } else if (segments.length === 4 && segments[0] === 'at') { uri = `at://${segments[1]}/${segments[2]}/${segments[3]}`; } else if (segments.length === 3) { const [handle, type, rkey] = segments; const contentTypes = ['note', 'annotation', 'highlight', 'bookmark', 'collection']; if (contentTypes.includes(type) && rkey) { let did = handle; if (!handle.startsWith('did:')) { const resolveRes = await fetch( `https://public.api.bsky.app/xrpc/com.atproto.identity.resolveHandle?handle=${encodeURIComponent(handle)}` ); if (resolveRes.ok) { const data = await resolveRes.json(); did = data.did; } } const collectionMap: Record<string, string> = { note: 'at.margin.note', annotation: 'at.margin.annotation', highlight: 'at.margin.highlight', bookmark: 'at.margin.bookmark', collection: 'at.margin.collection', }; uri = `at://${did}/${collectionMap[type]}/${rkey}`; } }
if (uri) { atTags.canonical.push(uri); const isCollection = uri.includes('/at.margin.collection/'); const endpoint = isCollection ? 'collection' : 'annotation'; const res = await fetch(`${API_URL}/api/${endpoint}?uri=${encodeURIComponent(uri)}`); if (res.ok) { const item = await res.json(); const author = item.author || item.creator || {}; const authorUri = atUriForDid(author.did); if (authorUri) atTags.author.push(authorUri); const handle = author.handle || author.did || 'someone'; const bodyText = item.body?.value || item.bodyValue || item.text || ''; const selectorText = item.target?.selector?.exact || item.selector?.exact || ''; const motivation = item.motivation || ''; const targetTitle = item.target?.title || item.title || '';
if (motivation === 'highlighting' || uri.includes('/at.margin.highlight/')) { title = selectorText ? `"${selectorText.slice(0, 100)}" — highlighted by @${handle}` : `Highlight by @${handle}`; description = targetTitle || 'A highlight on Margin'; } else if (uri.includes('/at.margin.bookmark/')) { title = targetTitle ? `${targetTitle} — bookmarked by @${handle}` : `Bookmark by @${handle}`; description = bodyText?.slice(0, 200) || 'A bookmark on Margin'; } else if (isCollection) { title = `${item.name || 'Collection'} by @${handle}`; description = item.description?.slice(0, 200) || 'A collection on Margin'; } else { title = bodyText ? `${bodyText.slice(0, 100)} — @${handle}` : `Note by @${handle}`; description = selectorText ? `"${selectorText.slice(0, 200)}"` : targetTitle || 'A note on Margin'; }
image = `${BASE_URL}/og-image?uri=${encodeURIComponent(uri)}`; } }
if (segments.length === 2 && segments[0] === 'profile' && segments[1]) { const did = segments[1]; const profileRes = await fetch(`${API_URL}/api/profile/${encodeURIComponent(did)}`); if (profileRes.ok) { const profile = await profileRes.json(); const name = profile.displayName || profile.handle || did; title = `${name} — Margin`; description = profile.description?.slice(0, 200) || `${name}'s profile on Margin`; if (profile.uri) atTags.canonical.push(profile.uri); } }
if (segments.length === 2 && segments[0] === 'reading-room' && segments[1]) { const rrHandle = decodeURIComponent(segments[1]); const rrRes = await fetch(`${API_URL}/api/reading-room/${rrHandle}`); if (rrRes.ok) { const rr = await rrRes.json(); const name = rr.displayName || rr.handle || rrHandle; title = rr.title || `${name}'s Reading Room`; description = (rr.subtitle === "null" ? "" : rr.subtitle) || (rr.description === "null" ? "" : rr.description) || `Highlights and annotations by ${name}`; image = `${BASE_URL}/og-image?readingRoom=${rrHandle}`; if (atUriForDid(rr.did)) { atTags.canonical.push(`at://${rr.did}/site.standard.publication/reading-room`); } } }
if (segments.length === 3 && segments[0] === 'reading-room' && segments[2] === 'note') { const rrHandle = decodeURIComponent(segments[1]); const noteUri = Astro.url.searchParams.get('uri'); if (noteUri) { const noteRes = await fetch( `${API_URL}/api/reading-room/${rrHandle}/note?uri=${encodeURIComponent(noteUri)}` ); if (noteRes.ok) { const payload = await noteRes.json(); const note = payload.note || {}; const name = payload.displayName || rrHandle; const roomName = payload.roomTitle || `${name}'s Reading Room`; const bodyText = note.body?.value || ''; const selectorText = note.target?.selector?.exact || ''; const targetTitle = note.target?.title || '';
if (note.motivation === 'highlighting') { title = selectorText ? `"${selectorText.slice(0, 100)}" — highlighted by ${name}` : `Highlight by ${name}`; description = targetTitle || `From ${roomName}`; } else if (note.motivation === 'bookmarking') { title = targetTitle ? `${targetTitle} — bookmarked by ${name}` : `Bookmark by ${name}`; description = bodyText?.slice(0, 200) || `From ${roomName}`; } else { title = bodyText ? `${bodyText.slice(0, 100)} — ${name}` : `Note by ${name}`; description = selectorText ? `"${selectorText.slice(0, 200)}"` : targetTitle || `From ${roomName}`; }
image = `${BASE_URL}/og-image?readingRoom=${rrHandle}&uri=${encodeURIComponent(noteUri)}`; atTags.canonical.push(noteUri); const rrAuthorUri = atUriForDid(payload.did); if (rrAuthorUri) { atTags.alternate.push(`at://${payload.did}/site.standard.publication/reading-room`); atTags.author.push(rrAuthorUri); } } } }} catch (e) { // Fall through}---
<BaseLayout title={title} description={description} image={image} atTags={atTags}> <script is:inline define:vars={{ initialUser: user }}> window.__MARGIN_USER__ = initialUser; </script> <AppShell client:only="react" /></BaseLayout>