your personal website on atproto - mirror
blento.app
margin.at card
+311
-1
4 changed files
src
lib
cards
social
MarginCard
+3
-1
src/lib/cards/index.ts
+3
-1
src/lib/cards/index.ts
···
47
47
import { LastFMTopAlbumsCardDefinition } from './media/LastFMCard/LastFMTopAlbumsCard';
48
48
import { LastFMProfileCardDefinition } from './media/LastFMCard/LastFMProfileCard';
49
49
import { PlyrFMCardDefinition } from './media/PlyrFMCard';
50
50
+
import { MarginCardDefinition } from './social/MarginCard';
50
51
// import { Model3DCardDefinition } from './visual/Model3DCard';
51
52
52
53
export const AllCardDefinitions = [
···
98
99
LastFMTopTracksCardDefinition,
99
100
LastFMTopAlbumsCardDefinition,
100
101
LastFMProfileCardDefinition,
101
101
-
PlyrFMCardDefinition
102
102
+
PlyrFMCardDefinition,
103
103
+
MarginCardDefinition
102
104
] as const;
103
105
104
106
export const CardDefinitionsByType = AllCardDefinitions.reduce(
+183
src/lib/cards/social/MarginCard/MarginCard.svelte
+183
src/lib/cards/social/MarginCard/MarginCard.svelte
···
1
1
+
<script lang="ts">
2
2
+
import type { Item } from '$lib/types';
3
3
+
import { onMount } from 'svelte';
4
4
+
import {
5
5
+
getAdditionalUserData,
6
6
+
getCanEdit,
7
7
+
getDidContext,
8
8
+
getHandleContext
9
9
+
} from '$lib/website/context';
10
10
+
import { CardDefinitionsByType } from '../..';
11
11
+
import type { MarginEntry } from './index';
12
12
+
import { Button } from '@foxui/core';
13
13
+
14
14
+
let { item }: { item: Item } = $props();
15
15
+
16
16
+
const data = getAdditionalUserData();
17
17
+
// svelte-ignore state_referenced_locally
18
18
+
let entries = $state(data[item.cardType] as MarginEntry[] | undefined);
19
19
+
20
20
+
let did = getDidContext();
21
21
+
let handle = getHandleContext();
22
22
+
23
23
+
onMount(async () => {
24
24
+
if (!entries) {
25
25
+
entries = (await CardDefinitionsByType[item.cardType]?.loadData?.([], {
26
26
+
did,
27
27
+
handle
28
28
+
})) as MarginEntry[];
29
29
+
30
30
+
data[item.cardType] = entries;
31
31
+
}
32
32
+
});
33
33
+
34
34
+
let canEdit = getCanEdit();
35
35
+
36
36
+
let filtered = $derived(
37
37
+
entries?.filter((e) => {
38
38
+
if (e.type === 'bookmark' && item.cardData.showBookmarks === false) return false;
39
39
+
if (e.type === 'annotation' && item.cardData.showAnnotations === false) return false;
40
40
+
if (e.type === 'highlight' && item.cardData.showHighlights === false) return false;
41
41
+
return true;
42
42
+
})
43
43
+
);
44
44
+
45
45
+
function getMarginUrl(entry: MarginEntry) {
46
46
+
const rkey = entry.uri.split('/').pop();
47
47
+
return `https://margin.at/${handle}/${entry.type}/${rkey}`;
48
48
+
}
49
49
+
50
50
+
function getDisplayUrl(url: string) {
51
51
+
try {
52
52
+
const u = new URL(url);
53
53
+
return u.hostname + (u.pathname !== '/' ? u.pathname : '');
54
54
+
} catch {
55
55
+
return url;
56
56
+
}
57
57
+
}
58
58
+
59
59
+
function truncate(text: string, max: number) {
60
60
+
if (text.length <= max) return text;
61
61
+
return text.slice(0, max) + '…';
62
62
+
}
63
63
+
</script>
64
64
+
65
65
+
<div class={['flex h-full flex-col overflow-y-auto px-5 py-4', item.cardData.label ? 'pt-12' : '']}>
66
66
+
{#if filtered && filtered.length > 0}
67
67
+
<div class="flex flex-col gap-3">
68
68
+
{#each filtered as entry (entry.uri)}
69
69
+
{@const source =
70
70
+
entry.type === 'bookmark' ? entry.value.source : entry.value.target?.source}
71
71
+
<a
72
72
+
href={getMarginUrl(entry)}
73
73
+
target="_blank"
74
74
+
rel="noopener noreferrer"
75
75
+
class="bg-base-100 dark:bg-base-800 accent:bg-black/10 hover:bg-base-200 dark:hover:bg-base-700 accent:hover:bg-black/15 flex flex-col gap-1.5 rounded-xl px-5 py-3 transition-colors"
76
76
+
>
77
77
+
<div class="flex items-center gap-2 pb-1">
78
78
+
{#if entry.type === 'bookmark'}
79
79
+
<svg
80
80
+
xmlns="http://www.w3.org/2000/svg"
81
81
+
fill="none"
82
82
+
viewBox="0 0 24 24"
83
83
+
stroke-width="2"
84
84
+
stroke="currentColor"
85
85
+
class="text-accent-500 accent:text-black size-3.5 shrink-0"
86
86
+
>
87
87
+
<path
88
88
+
stroke-linecap="round"
89
89
+
stroke-linejoin="round"
90
90
+
d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z"
91
91
+
/>
92
92
+
</svg>
93
93
+
{:else if entry.type === 'annotation'}
94
94
+
<svg
95
95
+
xmlns="http://www.w3.org/2000/svg"
96
96
+
fill="none"
97
97
+
viewBox="0 0 24 24"
98
98
+
stroke-width="2"
99
99
+
stroke="currentColor"
100
100
+
class="text-accent-500 accent:text-black size-3.5 shrink-0"
101
101
+
>
102
102
+
<path
103
103
+
stroke-linecap="round"
104
104
+
stroke-linejoin="round"
105
105
+
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
106
106
+
/>
107
107
+
</svg>
108
108
+
{:else}
109
109
+
<svg
110
110
+
xmlns="http://www.w3.org/2000/svg"
111
111
+
viewBox="0 0 24 24"
112
112
+
fill="none"
113
113
+
stroke="currentColor"
114
114
+
stroke-width="2"
115
115
+
stroke-linecap="round"
116
116
+
stroke-linejoin="round"
117
117
+
class="text-accent-500 accent:text-black size-3.5 shrink-0"
118
118
+
>
119
119
+
<path d="m9 11-6 6v3h9l3-3" />
120
120
+
<path d="m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4" />
121
121
+
</svg>
122
122
+
{/if}
123
123
+
<span class="text-base-500 dark:text-base-400 accent:text-black/80 text-xs capitalize"
124
124
+
>{entry.type}</span
125
125
+
>
126
126
+
<span class="text-base-400 dark:text-base-500 accent:text-black/60 ml-auto text-xs">
127
127
+
{new Date(entry.createdAt).toLocaleDateString()}
128
128
+
</span>
129
129
+
</div>
130
130
+
131
131
+
{#if entry.type === 'bookmark' && entry.value.title}
132
132
+
<span
133
133
+
class="text-base-900 dark:text-base-100 accent:text-black text-sm leading-snug font-medium"
134
134
+
>
135
135
+
{truncate(entry.value.title as string, 80)}
136
136
+
</span>
137
137
+
{/if}
138
138
+
139
139
+
{#if entry.type === 'annotation' && entry.value.body?.value}
140
140
+
<span class="text-base-900 dark:text-base-100 accent:text-black text-sm leading-snug font-medium">
141
141
+
{truncate(entry.value.body.value as string, 120)}
142
142
+
</span>
143
143
+
{/if}
144
144
+
145
145
+
{#if entry.type === 'highlight' && entry.value.target?.selector}
146
146
+
{@const selectors = Array.isArray(entry.value.target.selector)
147
147
+
? entry.value.target.selector
148
148
+
: [entry.value.target.selector]}
149
149
+
{@const quote = selectors.find((s: any) => s.exact)?.exact}
150
150
+
{#if quote}
151
151
+
<span
152
152
+
class="text-base-700 dark:text-base-300 accent:text-black/80 border-accent-500 accent:border-black/60 border-l-2 pl-3 text-sm leading-snug italic"
153
153
+
>
154
154
+
{truncate(quote as string, 120)}
155
155
+
</span>
156
156
+
{/if}
157
157
+
{/if}
158
158
+
159
159
+
{#if source}
160
160
+
<span class="text-base-400 dark:text-base-500 accent:text-black/60 truncate text-xs">
161
161
+
{getDisplayUrl(source as string)}
162
162
+
</span>
163
163
+
{/if}
164
164
+
</a>
165
165
+
{/each}
166
166
+
</div>
167
167
+
{:else if filtered}
168
168
+
<div class="flex h-full w-full flex-col items-center justify-center gap-4 text-center text-sm">
169
169
+
No margin entries yet.
170
170
+
{#if canEdit()}
171
171
+
<Button href="https://margin.at" target="_blank" rel="noopener noreferrer">
172
172
+
Try Margin
173
173
+
</Button>
174
174
+
{/if}
175
175
+
</div>
176
176
+
{:else}
177
177
+
<div
178
178
+
class="text-base-500 dark:text-base-400 accent:text-black/60 flex h-full w-full items-center justify-center text-center text-sm"
179
179
+
>
180
180
+
Loading...
181
181
+
</div>
182
182
+
{/if}
183
183
+
</div>
+63
src/lib/cards/social/MarginCard/MarginCardSettings.svelte
+63
src/lib/cards/social/MarginCard/MarginCardSettings.svelte
···
1
1
+
<script lang="ts">
2
2
+
import type { SettingsComponentProps } from '../../types';
3
3
+
import { Checkbox, Label } from '@foxui/core';
4
4
+
5
5
+
let { item }: SettingsComponentProps = $props();
6
6
+
</script>
7
7
+
8
8
+
<div class="flex flex-col gap-3">
9
9
+
<div class="flex items-center space-x-2">
10
10
+
<Checkbox
11
11
+
bind:checked={
12
12
+
() => item.cardData.showBookmarks !== false, (val) => (item.cardData.showBookmarks = val)
13
13
+
}
14
14
+
id="show-bookmarks"
15
15
+
aria-labelledby="show-bookmarks-label"
16
16
+
variant="secondary"
17
17
+
/>
18
18
+
<Label
19
19
+
id="show-bookmarks-label"
20
20
+
for="show-bookmarks"
21
21
+
class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
22
22
+
>
23
23
+
Bookmarks
24
24
+
</Label>
25
25
+
</div>
26
26
+
27
27
+
<div class="flex items-center space-x-2">
28
28
+
<Checkbox
29
29
+
bind:checked={
30
30
+
() => item.cardData.showAnnotations !== false,
31
31
+
(val) => (item.cardData.showAnnotations = val)
32
32
+
}
33
33
+
id="show-annotations"
34
34
+
aria-labelledby="show-annotations-label"
35
35
+
variant="secondary"
36
36
+
/>
37
37
+
<Label
38
38
+
id="show-annotations-label"
39
39
+
for="show-annotations"
40
40
+
class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
41
41
+
>
42
42
+
Annotations
43
43
+
</Label>
44
44
+
</div>
45
45
+
46
46
+
<div class="flex items-center space-x-2">
47
47
+
<Checkbox
48
48
+
bind:checked={
49
49
+
() => item.cardData.showHighlights !== false, (val) => (item.cardData.showHighlights = val)
50
50
+
}
51
51
+
id="show-highlights"
52
52
+
aria-labelledby="show-highlights-label"
53
53
+
variant="secondary"
54
54
+
/>
55
55
+
<Label
56
56
+
id="show-highlights-label"
57
57
+
for="show-highlights"
58
58
+
class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
59
59
+
>
60
60
+
Highlights
61
61
+
</Label>
62
62
+
</div>
63
63
+
</div>
+62
src/lib/cards/social/MarginCard/index.ts
+62
src/lib/cards/social/MarginCard/index.ts
···
1
1
+
import type { CardDefinition } from '../../types';
2
2
+
import { listRecords } from '$lib/atproto';
3
3
+
import MarginCard from './MarginCard.svelte';
4
4
+
import MarginCardSettings from './MarginCardSettings.svelte';
5
5
+
6
6
+
export type MarginEntry = {
7
7
+
type: 'bookmark' | 'annotation' | 'highlight';
8
8
+
uri: string;
9
9
+
value: any;
10
10
+
createdAt: string;
11
11
+
};
12
12
+
13
13
+
export const MarginCardDefinition = {
14
14
+
type: 'margin',
15
15
+
contentComponent: MarginCard,
16
16
+
settingsComponent: MarginCardSettings,
17
17
+
createNew: (card) => {
18
18
+
card.w = 4;
19
19
+
card.mobileW = 8;
20
20
+
card.h = 4;
21
21
+
card.mobileH = 6;
22
22
+
},
23
23
+
loadData: async (_items, { did }) => {
24
24
+
const [bookmarks, annotations, highlights] = await Promise.all([
25
25
+
listRecords({ did, collection: 'at.margin.bookmark' }).catch(() => []),
26
26
+
listRecords({ did, collection: 'at.margin.annotation' }).catch(() => []),
27
27
+
listRecords({ did, collection: 'at.margin.highlight' }).catch(() => [])
28
28
+
]);
29
29
+
30
30
+
const entries: MarginEntry[] = [
31
31
+
...bookmarks.map((r: any) => ({
32
32
+
type: 'bookmark' as const,
33
33
+
uri: r.uri,
34
34
+
value: r.value,
35
35
+
createdAt: r.value.createdAt
36
36
+
})),
37
37
+
...annotations.map((r: any) => ({
38
38
+
type: 'annotation' as const,
39
39
+
uri: r.uri,
40
40
+
value: r.value,
41
41
+
createdAt: r.value.createdAt
42
42
+
})),
43
43
+
...highlights.map((r: any) => ({
44
44
+
type: 'highlight' as const,
45
45
+
uri: r.uri,
46
46
+
value: r.value,
47
47
+
createdAt: r.value.createdAt
48
48
+
}))
49
49
+
];
50
50
+
51
51
+
entries.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
52
52
+
53
53
+
return entries;
54
54
+
},
55
55
+
minH: 2,
56
56
+
canHaveLabel: true,
57
57
+
58
58
+
keywords: ['margin', 'bookmarks', 'annotations', 'highlights', 'reading', 'web'],
59
59
+
groups: ['Social'],
60
60
+
name: 'Margin highlights, bookmarks, annotations',
61
61
+
icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z" /></svg>`
62
62
+
} as CardDefinition & { type: 'margin' };