cosmik.network
A social knowledge tool for researchers built on ATProto
feat: add bookmarklet page for sharing URLs in Semble
Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <aider@aider.chat>
+135
src/webapp/app/bookmarklet/page.tsx
+135
src/webapp/app/bookmarklet/page.tsx
···
1
+
'use client';
2
+
3
+
import {
4
+
Container,
5
+
Title,
6
+
Text,
7
+
Stack,
8
+
Button,
9
+
Code,
10
+
Alert,
11
+
Box,
12
+
Group,
13
+
Anchor,
14
+
} from '@mantine/core';
15
+
import { useState } from 'react';
16
+
import { BiInfoCircle } from 'react-icons/bi';
17
+
import { RiDragDropLine } from 'react-icons/ri';
18
+
19
+
export default function BookmarkletPage() {
20
+
const [copied, setCopied] = useState(false);
21
+
22
+
const appUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000';
23
+
24
+
const bookmarkletCode = `javascript:(function(){
25
+
const currentUrl = encodeURIComponent(window.location.href);
26
+
const sembleUrl = '${appUrl}/url?id=' + currentUrl;
27
+
window.open(sembleUrl, '_blank');
28
+
})();`;
29
+
30
+
const handleCopy = async () => {
31
+
try {
32
+
await navigator.clipboard.writeText(bookmarkletCode);
33
+
setCopied(true);
34
+
setTimeout(() => setCopied(false), 2000);
35
+
} catch (err) {
36
+
console.error('Failed to copy bookmarklet:', err);
37
+
}
38
+
};
39
+
40
+
return (
41
+
<Container size="md" py="xl">
42
+
<Stack gap="xl">
43
+
<Stack gap="md">
44
+
<Title order={1}>Semble Bookmarklet</Title>
45
+
<Text size="lg" c="dimmed">
46
+
Add this bookmarklet to your browser to quickly open any webpage in Semble
47
+
and see what your network has shared about it.
48
+
</Text>
49
+
</Stack>
50
+
51
+
<Alert icon={<BiInfoCircle />} title="How to install" color="blue">
52
+
<Stack gap="sm">
53
+
<Text>
54
+
1. Copy the bookmarklet code below or drag the button to your bookmarks bar
55
+
</Text>
56
+
<Text>
57
+
2. When you're on any webpage, click the bookmarklet to open it in Semble
58
+
</Text>
59
+
<Text>
60
+
3. You'll see who in your network has shared that URL and any notes they've added
61
+
</Text>
62
+
</Stack>
63
+
</Alert>
64
+
65
+
<Stack gap="md">
66
+
<Title order={2} size="h3">
67
+
Method 1: Drag to Bookmarks Bar
68
+
</Title>
69
+
<Text c="dimmed">
70
+
Drag this button directly to your browser's bookmarks bar:
71
+
</Text>
72
+
<Group>
73
+
<Anchor
74
+
href={bookmarkletCode}
75
+
style={{
76
+
textDecoration: 'none',
77
+
padding: '8px 16px',
78
+
backgroundColor: 'var(--mantine-color-blue-6)',
79
+
color: 'white',
80
+
borderRadius: '4px',
81
+
display: 'inline-flex',
82
+
alignItems: 'center',
83
+
gap: '8px',
84
+
}}
85
+
>
86
+
<RiDragDropLine size={16} />
87
+
Open in Semble
88
+
</Anchor>
89
+
</Group>
90
+
</Stack>
91
+
92
+
<Stack gap="md">
93
+
<Title order={2} size="h3">
94
+
Method 2: Copy Code
95
+
</Title>
96
+
<Text c="dimmed">
97
+
Copy this code and create a new bookmark with it as the URL:
98
+
</Text>
99
+
<Box pos="relative">
100
+
<Code
101
+
block
102
+
p="md"
103
+
style={{
104
+
wordBreak: 'break-all',
105
+
whiteSpace: 'pre-wrap',
106
+
fontSize: '12px',
107
+
}}
108
+
>
109
+
{bookmarkletCode}
110
+
</Code>
111
+
<Button
112
+
size="xs"
113
+
variant="light"
114
+
onClick={handleCopy}
115
+
style={{
116
+
position: 'absolute',
117
+
top: '8px',
118
+
right: '8px',
119
+
}}
120
+
>
121
+
{copied ? 'Copied!' : 'Copy'}
122
+
</Button>
123
+
</Box>
124
+
</Stack>
125
+
126
+
<Alert icon={<BiInfoCircle />} title="Note" color="gray">
127
+
<Text>
128
+
This bookmarklet will open Semble in a new tab. Make sure you're logged in
129
+
to see personalized results from your network.
130
+
</Text>
131
+
</Alert>
132
+
</Stack>
133
+
</Container>
134
+
);
135
+
}