your personal website on atproto - mirror
blento.app
fix formatting
+49
-33
+3
-1
.gitignore
+3
-1
.gitignore
+3
.prettierignore
+3
.prettierignore
+1
eslint.config.js
+1
eslint.config.js
+35
-20
scripts/simulate-load.ts
+35
-20
scripts/simulate-load.ts
···
4
4
*
5
5
* Usage: npx tsx scripts/atproto.ts listRecords <handle> app.blento.card 2>/dev/null | npx tsx scripts/simulate-load.ts
6
6
*/
7
-
import {
8
-
correctBounds,
9
-
verticalCompactor,
10
-
type LayoutItem
11
-
} from 'react-grid-layout/core';
7
+
import { correctBounds, verticalCompactor, type LayoutItem } from 'react-grid-layout/core';
12
8
import * as fs from 'fs';
13
9
14
10
const COLUMNS = 8;
15
11
16
12
type Item = {
17
13
id: string;
18
-
x: number; y: number; w: number; h: number;
19
-
mobileX: number; mobileY: number; mobileW: number; mobileH: number;
14
+
x: number;
15
+
y: number;
16
+
w: number;
17
+
h: number;
18
+
mobileX: number;
19
+
mobileY: number;
20
+
mobileW: number;
21
+
mobileH: number;
20
22
cardType: string;
21
23
};
22
24
···
33
35
for (const l of layout) {
34
36
const item = map.get(l.i);
35
37
if (!item) continue;
36
-
if (mobile) { item.mobileX = l.x; item.mobileY = l.y; }
37
-
else { item.x = l.x; item.y = l.y; }
38
+
if (mobile) {
39
+
item.mobileX = l.x;
40
+
item.mobileY = l.y;
41
+
} else {
42
+
item.x = l.x;
43
+
item.y = l.y;
44
+
}
38
45
}
39
46
}
40
47
···
60
67
.filter((r: any) => r.value.cardType && (!r.value.page || r.value.page === 'blento.self'))
61
68
.map((r: any) => ({
62
69
id: r.value.id,
63
-
x: r.value.x, y: r.value.y, w: r.value.w, h: r.value.h,
64
-
mobileX: r.value.mobileX, mobileY: r.value.mobileY,
65
-
mobileW: r.value.mobileW, mobileH: r.value.mobileH,
70
+
x: r.value.x,
71
+
y: r.value.y,
72
+
w: r.value.w,
73
+
h: r.value.h,
74
+
mobileX: r.value.mobileX,
75
+
mobileY: r.value.mobileY,
76
+
mobileW: r.value.mobileW,
77
+
mobileH: r.value.mobileH,
66
78
cardType: r.value.cardType
67
79
}));
68
80
···
86
98
console.log(
87
99
`${orig.cardType.padEnd(20)} id=${orig.id}` +
88
100
(dChanged ? ` DESKTOP: (${orig.x},${orig.y}) → (${card.x},${card.y})` : '') +
89
-
(mChanged ? ` MOBILE: (${orig.mobileX},${orig.mobileY}) → (${card.mobileX},${card.mobileY})` : '')
101
+
(mChanged
102
+
? ` MOBILE: (${orig.mobileX},${orig.mobileY}) → (${card.mobileX},${card.mobileY})`
103
+
: '')
90
104
);
91
105
if (dChanged) desktopChanges++;
92
106
if (mChanged) mobileChanges++;
···
101
115
102
116
// Check for ORDER changes in mobile layout
103
117
console.log('\n=== Mobile reading order (y, then x) ===');
104
-
const sortByMobile = (items: { id: string; mobileX: number; mobileY: number; cardType: string }[]) =>
105
-
[...items].sort((a, b) => a.mobileY - b.mobileY || a.mobileX - b.mobileX);
118
+
const sortByMobile = (
119
+
items: { id: string; mobileX: number; mobileY: number; cardType: string }[]
120
+
) => [...items].sort((a, b) => a.mobileY - b.mobileY || a.mobileX - b.mobileX);
106
121
107
122
const origOrder = sortByMobile(originals);
108
123
const newOrder = sortByMobile(cards);
···
111
126
for (let i = 0; i < origOrder.length; i++) {
112
127
const same = origOrder[i].id === newOrder[i].id;
113
128
if (!same) orderChanges++;
114
-
const orig = originals.find(o => o.id === newOrder[i].id)!;
115
-
const card = cards.find(c => c.id === newOrder[i].id)!;
129
+
const orig = originals.find((o) => o.id === newOrder[i].id)!;
130
+
const card = cards.find((c) => c.id === newOrder[i].id)!;
116
131
console.log(
117
132
`${i.toString().padStart(2)}: ${same ? ' ' : '!!'} ` +
118
-
`${card.cardType.padEnd(20)} ` +
119
-
`was (${orig.mobileX},${orig.mobileY}) → now (${card.mobileX},${card.mobileY})` +
120
-
(!same ? ` [was #${origOrder.findIndex(o => o.id === newOrder[i].id)}]` : '')
133
+
`${card.cardType.padEnd(20)} ` +
134
+
`was (${orig.mobileX},${orig.mobileY}) → now (${card.mobileX},${card.mobileY})` +
135
+
(!same ? ` [was #${origOrder.findIndex((o) => o.id === newOrder[i].id)}]` : '')
121
136
);
122
137
}
123
138
console.log(`\n${orderChanges} order changes in mobile layout.`);
-1
src/lib/cards/media/SecretImageCard/EditingSecretImageCard.svelte
-1
src/lib/cards/media/SecretImageCard/EditingSecretImageCard.svelte
+1
-3
src/lib/cards/media/StatusphereCard/EditStatusphereCard.svelte
+1
-3
src/lib/cards/media/StatusphereCard/EditStatusphereCard.svelte
···
29
29
let mode = $derived(item.cardData?.mode ?? 'emoji');
30
30
// Emoji mode: use cardData. Statusphere mode: use latest record or preview.
31
31
let emoji = $derived(
32
-
mode === 'statusphere'
33
-
? (item.cardData?.emoji ?? record?.value?.status)
34
-
: item.cardData?.emoji
32
+
mode === 'statusphere' ? (item.cardData?.emoji ?? record?.value?.status) : item.cardData?.emoji
35
33
);
36
34
37
35
let showPopover = $state(false);
+1
-3
src/lib/cards/media/StatusphereCard/StatusphereCard.svelte
+1
-3
src/lib/cards/media/StatusphereCard/StatusphereCard.svelte
···
11
11
12
12
let mode = $derived(item.cardData?.mode ?? 'emoji');
13
13
// Emoji mode: use cardData. Statusphere mode: use latest record from PDS.
14
-
let emoji = $derived(
15
-
mode === 'statusphere' ? record?.value?.status : item.cardData?.emoji
16
-
);
14
+
let emoji = $derived(mode === 'statusphere' ? record?.value?.status : item.cardData?.emoji);
17
15
let animated = $derived(emojiToNotoAnimatedWebp(emoji));
18
16
</script>
19
17
+2
-2
src/lib/website/EditableWebsite.svelte
+2
-2
src/lib/website/EditableWebsite.svelte
···
586
586
<p class="text-base-700 dark:text-base-300 text-xl font-bold">Layout Auto-Fixed</p>
587
587
<p class="text-base-500 dark:text-base-400 text-sm">
588
588
Your card layout had overlapping cards from an older version. This has been automatically
589
-
fixed, but some cards may have moved. Please check your layout and rearrange if needed,
590
-
then save to keep the changes.
589
+
fixed, but some cards may have moved. Please check your layout and rearrange if needed, then
590
+
save to keep the changes.
591
591
</p>
592
592
<Button class="w-full" onclick={acknowledgeLayoutFix}>Got it</Button>
593
593
</div>