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
+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 + }