Social Annotations in the Atmosphere
feat: show url on annotation component
+137
-525
+7
-5
landing/landing.ts
+7
-5
landing/landing.ts
···
12
12
const loadMoreContainer = document.getElementById('load-more');
13
13
const loadMoreBtn = document.getElementById('load-more-btn');
14
14
15
+
// Determine proxy base URL for annotation source links
16
+
const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
17
+
const proxyBaseUrl = isLocal ? 'http://127.0.0.1:8081' : 'https://sure.seams.so';
18
+
15
19
// Fetch actor profile (avatar) from Bluesky
16
20
async function fetchActorProfile(did: string) {
17
21
if (avatarCache.has(did)) {
···
84
88
const card = document.createElement('seams-annotation-card') as SeamsAnnotationCard;
85
89
card.annotation = annotation;
86
90
card.comments = []; // No comments on landing for now
91
+
card.showSourceInfo = true;
92
+
card.proxyBaseUrl = proxyBaseUrl;
87
93
88
94
fragment.appendChild(card);
89
95
}
···
129
135
url = 'https://' + url;
130
136
}
131
137
132
-
// Determine proxy base URL (port 8081 is the static server that serves the proxy client)
133
-
const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
134
-
const proxyBase = isLocal ? 'http://127.0.0.1:8081' : 'https://sure.seams.so';
135
-
136
138
// Redirect to hash-based proxy URL
137
-
window.location.href = `${proxyBase}/#${url}`;
139
+
window.location.href = `${proxyBaseUrl}/#${url}`;
138
140
});
139
141
}
+2
-2
package.json
+2
-2
package.json
···
10
10
"build:landing": "vite build --config vite.landing.config.ts",
11
11
"build:proxy": "vite build --config vite.proxy.config.ts && vite build --config vite.proxy-inject.config.ts",
12
12
"dev:proxy": "NODE_ENV=development VITE_BACKEND_URL=https://seams.so pnpm build:proxy && concurrently \"cd proxy/cors-proxy && npm run dev\" \"npx serve proxy/dist -l 8081\"",
13
-
"dev:server": "NODE_ENV=development pnpm run build:landing && cd server && air",
14
-
"dev:all": "NODE_ENV=development VITE_BACKEND_URL=http://127.0.0.1:8080 pnpm build:proxy && concurrently --names \"server,cors,proxy\" -c \"green,yellow,blue\" \"cd server && air\" \"cd proxy/cors-proxy && npm run dev\" \"npx serve proxy/dist -l 8081\"",
13
+
"dev:server": "NODE_ENV=development BACKEND_URL=http://localhost:8080 pnpm run build:landing && cd server && air",
14
+
"dev:all": "NODE_ENV=development VITE_BACKEND_URL=http://127.0.0.1:8080 pnpm build:proxy && concurrently --names \"server,proxy\" -c \"green,yellow,blue\" \"pnpm dev:server\" \"pnpm dev:proxy\"",
15
15
"test": "pnpm --filter @seams/core test",
16
16
"test:coverage": "pnpm --filter @seams/core test:coverage",
17
17
"test:watch": "pnpm --filter @seams/core test:watch",
+55
-7
packages/core/src/components/annotation-card.ts
+55
-7
packages/core/src/components/annotation-card.ts
···
1
1
import { Annotation } from '../types';
2
2
import { formatRelativeTime } from '../utils/date';
3
3
import { escapeHtml } from '../utils/sanitize';
4
+
import { extractDomain } from '../utils/url';
4
5
5
6
const STYLES = `
6
7
:host {
···
79
80
text-decoration: underline;
80
81
}
81
82
83
+
84
+
82
85
.annotation-source {
83
-
color: #1a1a1a;
86
+
display: inline-flex;
87
+
align-items: center;
88
+
gap: 4px;
89
+
color: #666;
84
90
text-decoration: none;
85
-
font-weight: 500;
91
+
font-size: 12px;
92
+
}
93
+
94
+
.annotation-source:hover {
95
+
text-decoration: underline;
86
96
}
87
97
`;
88
98
89
99
export class SeamsAnnotationCard extends HTMLElement {
90
100
private _annotation: Annotation | null = null;
101
+
private _showSourceInfo: boolean = false;
102
+
private _proxyBaseUrl: string = '';
91
103
92
104
static get observedAttributes() {
93
105
return ['annotation'];
···
111
123
return this._annotation;
112
124
}
113
125
126
+
/**
127
+
* When true, displays the source domain and link arrow.
128
+
* Set to true for landing page, false (default) for sidebar.
129
+
*/
130
+
set showSourceInfo(val: boolean) {
131
+
this._showSourceInfo = val;
132
+
this.render();
133
+
}
134
+
135
+
get showSourceInfo() {
136
+
return this._showSourceInfo;
137
+
}
138
+
139
+
/**
140
+
* Base URL for the proxy (e.g., 'https://sure.seams.so').
141
+
* When set, source links will point to proxyBaseUrl/#<url>.
142
+
* When empty, links point directly to the source URL.
143
+
*/
144
+
set proxyBaseUrl(val: string) {
145
+
this._proxyBaseUrl = val;
146
+
this.render();
147
+
}
148
+
149
+
get proxyBaseUrl() {
150
+
return this._proxyBaseUrl;
151
+
}
152
+
114
153
private render() {
115
154
if (!this.shadowRoot) return;
116
155
if (!this._annotation) {
···
126
165
const authorHandle = ann.author?.handle || (authorDid.includes(':') ? authorDid.split(':').pop() : authorDid);
127
166
const avatarSrc = ann.author?.avatar || `https://api.dicebear.com/7.x/initials/svg?seed=${encodeURIComponent(authorHandle || authorDid)}`;
128
167
168
+
// Generate source info HTML only when showSourceInfo is true
169
+
let sourceInfoHtml = '';
170
+
if (this._showSourceInfo && ann.value.target.url) {
171
+
const domain = extractDomain(ann.value.target.url);
172
+
const linkUrl = this._proxyBaseUrl
173
+
? `${this._proxyBaseUrl}/#${ann.value.target.url}`
174
+
: ann.value.target.url;
175
+
176
+
sourceInfoHtml = `
177
+
<a href="${escapeHtml(linkUrl)}" target="_blank" class="annotation-source">${escapeHtml(domain)} ↗</a>
178
+
`;
179
+
}
180
+
129
181
const html = `
130
182
<style>${STYLES}</style>
131
183
<article class="annotation-card" data-uri="${ann.uri}">
···
140
192
</a>
141
193
</div>
142
194
<span>${formatRelativeTime(ann.value.createdAt)}</span>
143
-
${ann.value.target.url ? `
144
-
<a href="${escapeHtml(ann.value.target.url)}" target="_blank" class="annotation-source">
145
-
↗
146
-
</a>
147
-
` : ''}
195
+
${sourceInfoHtml}
148
196
</div>
149
197
</article>
150
198
`;
+47
-1
packages/core/src/utils/__tests__/url.test.ts
+47
-1
packages/core/src/utils/__tests__/url.test.ts
···
1
1
import { describe, it, expect } from 'vitest';
2
-
import { normalizeUrl } from '../url';
2
+
import { normalizeUrl, extractDomain } from '../url';
3
3
4
4
describe('normalizeUrl', () => {
5
5
it('removes hash fragments', () => {
···
50
50
);
51
51
});
52
52
});
53
+
54
+
describe('extractDomain', () => {
55
+
it('extracts domain from a simple URL', () => {
56
+
expect(extractDomain('https://example.com/page')).toBe('example.com');
57
+
});
58
+
59
+
it('removes www prefix', () => {
60
+
expect(extractDomain('https://www.example.com/page')).toBe('example.com');
61
+
});
62
+
63
+
it('preserves subdomains other than www', () => {
64
+
expect(extractDomain('https://blog.example.com/post')).toBe('blog.example.com');
65
+
});
66
+
67
+
it('handles complex paths without including them', () => {
68
+
expect(extractDomain('https://www.nytimes.com/2024/01/15/technology/ai.html')).toBe('nytimes.com');
69
+
});
70
+
71
+
it('handles URLs with ports', () => {
72
+
expect(extractDomain('https://example.com:8080/page')).toBe('example.com');
73
+
});
74
+
75
+
it('handles URLs with query strings', () => {
76
+
expect(extractDomain('https://example.com/search?q=test')).toBe('example.com');
77
+
});
78
+
79
+
it('handles URLs with hash fragments', () => {
80
+
expect(extractDomain('https://example.com/page#section')).toBe('example.com');
81
+
});
82
+
83
+
it('returns empty string for invalid URLs', () => {
84
+
expect(extractDomain('not-a-url')).toBe('');
85
+
});
86
+
87
+
it('returns empty string for empty input', () => {
88
+
expect(extractDomain('')).toBe('');
89
+
});
90
+
91
+
it('handles multiple subdomains', () => {
92
+
expect(extractDomain('https://api.v2.example.com/endpoint')).toBe('api.v2.example.com');
93
+
});
94
+
95
+
it('removes only www prefix, not other w-prefixed subdomains', () => {
96
+
expect(extractDomain('https://web.example.com/page')).toBe('web.example.com');
97
+
});
98
+
});
+26
packages/core/src/utils/url.ts
+26
packages/core/src/utils/url.ts
···
16
16
return url;
17
17
}
18
18
}
19
+
20
+
/**
21
+
* Extracts the domain from a URL, removing 'www.' prefix if present.
22
+
* Returns only the hostname (no path, query, or port).
23
+
*
24
+
* @example
25
+
* extractDomain('https://www.example.com/page') // 'example.com'
26
+
* extractDomain('https://blog.example.com/post') // 'blog.example.com'
27
+
*/
28
+
export function extractDomain(url: string): string {
29
+
if (!url) return '';
30
+
31
+
try {
32
+
const parsed = new URL(url);
33
+
let hostname = parsed.hostname;
34
+
35
+
// Remove 'www.' prefix if present
36
+
if (hostname.startsWith('www.')) {
37
+
hostname = hostname.slice(4);
38
+
}
39
+
40
+
return hostname;
41
+
} catch {
42
+
return '';
43
+
}
44
+
}