+1

.github/FUNDING.yml

··· 1 1 + github: flo-bit

+2

.gitignore

··· 21 21 # Vite 22 22 vite.config.js.timestamp-* 23 23 vite.config.ts.timestamp-* 24 24 + 25 25 + references

+1 -1

README.md

··· 16 16 17 17 Should blento.app shut down at some point, someone else can also spin up a new version that shows all blentos (note: it's MIT licensed so you _could_ do that now too and offer a competing service, but please don't (except for self-hosting your own profile ofc), legal != nice). 18 18 19 19 - One other note: for most independence I encourage everyone to get their own domain see [how to setup a custom domain](./docs/CustomDomain.md), selfhosting on the other hand while currently possible is not encourage *yet* before this project reaches a more stable state (if you do want to selfhost though, see [here](./docs/Selfhosting.md)). 19 19 + One other note: for most independence I encourage everyone to get their own domain see [how to setup a custom domain](./docs/CustomDomain.md), selfhosting on the other hand while currently possible is not encourage _yet_ before this project reaches a more stable state (if you do want to selfhost though, see [here](./docs/Selfhosting.md)). 20 20 21 21 ## Making Custom cards 22 22

+1 -1

docs/CustomCards.md

··· 9 9 - in light/dark mode 10 10 - with and without colored cards 11 11 - in edit mode and not in edit mode 12 12 - - on mobile and desktop (note that there's two different mobile "modes", one dependent on screen size and one enabled when pointer: coarse) 12 12 + - on mobile and desktop (note that there's two different mobile "modes", one dependent on screen size and one enabled when pointer: coarse)

+1 -2

docs/Selfhosting.md

··· 1 1 # Selfhosting with cloudflare workers 2 2 3 3 - I currently advise everyone to *not* selfhost, as long as this project is still in the beginning stages with lots of changes every day, isntead I'd suggest setting up a custom domain (see [here](./CustomDomain.md)) and only later once this project is more stable to selfhost, thanks to the magic of atproto, you'll just have to change where your domain points to and setup the selfhosted version and your content will magically transfer over. 3 3 + I currently advise everyone to _not_ selfhost, as long as this project is still in the beginning stages with lots of changes every day, isntead I'd suggest setting up a custom domain (see [here](./CustomDomain.md)) and only later once this project is more stable to selfhost, thanks to the magic of atproto, you'll just have to change where your domain points to and setup the selfhosted version and your content will magically transfer over. 4 4 5 5 If you do still want to give selfhosting a try now, some features/cards may break on your selfhosted version, in that case sync with the upstream repo. 6 6 - 7 6 8 7 1. fork this repo 9 8 2. create a cloudflare worker application and connect it to your fork

+2 -1

package.json

··· 5 5 "type": "module", 6 6 "scripts": { 7 7 "dev": "vite dev", 8 8 - "build": "vite build", 8 8 + "build": "NODE_OPTIONS='--max-old-space-size=4096' vite build", 9 9 "preview": "pnpm run build && wrangler dev", 10 10 "prepare": "svelte-kit sync || echo ''", 11 11 "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", ··· 81 81 "perfect-freehand": "^1.2.2", 82 82 "plyr": "^3.8.4", 83 83 "qr-code-styling": "^1.8.6", 84 84 + "react-grid-layout": "^2.2.2", 84 85 "simple-icons": "^16.6.0", 85 86 "svelte-sonner": "^1.0.7", 86 87 "tailwind-merge": "^3.4.0",

+110

pnpm-lock.yaml

··· 134 134 qr-code-styling: 135 135 specifier: ^1.8.6 136 136 version: 1.9.2 137 137 + react-grid-layout: 138 138 + specifier: ^2.2.2 139 139 + version: 2.2.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4) 137 140 simple-icons: 138 141 specifier: ^16.6.0 139 142 version: 16.6.0 ··· 1967 1970 fast-deep-equal@3.1.3: 1968 1971 resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} 1969 1972 1973 1973 + fast-equals@4.0.3: 1974 1974 + resolution: {integrity: sha512-G3BSX9cfKttjr+2o1O22tYMLq0DPluZnYtq1rXumE1SpL/F/SLIfHx08WYQoWSIpeMYf8sRbJ8++71+v6Pnxfg==, tarball: https://registry.npmjs.org/fast-equals/-/fast-equals-4.0.3.tgz} 1975 1975 + 1970 1976 fast-json-stable-stringify@2.1.0: 1971 1977 resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==} 1972 1978 ··· 2103 2109 resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==} 2104 2110 hasBin: true 2105 2111 2112 2112 + js-tokens@4.0.0: 2113 2113 + resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==, tarball: https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz} 2114 2114 + 2106 2115 js-yaml@4.1.1: 2107 2116 resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==} 2108 2117 hasBin: true ··· 2239 2248 lodash.merge@4.6.2: 2240 2249 resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==} 2241 2250 2251 2251 + loose-envify@1.4.0: 2252 2252 + resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==, tarball: https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz} 2253 2253 + hasBin: true 2254 2254 + 2242 2255 lz-string@1.5.0: 2243 2256 resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==} 2244 2257 hasBin: true ··· 2340 2353 number-flow@0.5.9: 2341 2354 resolution: {integrity: sha512-o3102c/4qRd6eV4n+rw6B/UP8+FosbhIxj4uA6GsjhryrGZRVtCtKIKEeBiOwUV52cUGJneeu0treELcV7U/lw==} 2342 2355 2356 2356 + object-assign@4.1.1: 2357 2357 + resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==, tarball: https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz} 2358 2358 + engines: {node: '>=0.10.0'} 2359 2359 + 2343 2360 obug@2.1.1: 2344 2361 resolution: {integrity: sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==} 2345 2362 ··· 2526 2543 engines: {node: '>=14'} 2527 2544 hasBin: true 2528 2545 2546 2546 + prop-types@15.8.1: 2547 2547 + resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==, tarball: https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz} 2548 2548 + 2529 2549 prosemirror-changeset@2.3.1: 2530 2550 resolution: {integrity: sha512-j0kORIBm8ayJNl3zQvD1TTPHJX3g042et6y/KQhZhnPrruO8exkTgG8X+NRpj7kIyMMEx74Xb3DyMIBtO0IKkQ==} 2531 2551 ··· 2608 2628 rangetouch@2.0.1: 2609 2629 resolution: {integrity: sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA==} 2610 2630 2631 2631 + react-dom@19.2.4: 2632 2632 + resolution: {integrity: sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==, tarball: https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz} 2633 2633 + peerDependencies: 2634 2634 + react: ^19.2.4 2635 2635 + 2636 2636 + react-draggable@4.5.0: 2637 2637 + resolution: {integrity: sha512-VC+HBLEZ0XJxnOxVAZsdRi8rD04Iz3SiiKOoYzamjylUcju/hP9np/aZdLHf/7WOD268WMoNJMvYfB5yAK45cw==, tarball: https://registry.npmjs.org/react-draggable/-/react-draggable-4.5.0.tgz} 2638 2638 + peerDependencies: 2639 2639 + react: '>= 16.3.0' 2640 2640 + react-dom: '>= 16.3.0' 2641 2641 + 2642 2642 + react-grid-layout@2.2.2: 2643 2643 + resolution: {integrity: sha512-yNo9pxQWoxHWRAwHGSVT4DEGELYPyQ7+q9lFclb5jcqeFzva63/2F72CryS/jiTIr/SBIlTaDdyjqH+ODg8oBw==, tarball: https://registry.npmjs.org/react-grid-layout/-/react-grid-layout-2.2.2.tgz} 2644 2644 + peerDependencies: 2645 2645 + react: '>= 16.3.0' 2646 2646 + react-dom: '>= 16.3.0' 2647 2647 + 2648 2648 + react-is@16.13.1: 2649 2649 + resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==, tarball: https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz} 2650 2650 + 2651 2651 + react-resizable@3.1.3: 2652 2652 + resolution: {integrity: sha512-liJBNayhX7qA4tBJiBD321FDhJxgGTJ07uzH5zSORXoE8h7PyEZ8mLqmosST7ppf6C4zUsbd2gzDMmBCfFp9Lw==, tarball: https://registry.npmjs.org/react-resizable/-/react-resizable-3.1.3.tgz} 2653 2653 + peerDependencies: 2654 2654 + react: '>= 16.3' 2655 2655 + react-dom: '>= 16.3' 2656 2656 + 2657 2657 + react@19.2.4: 2658 2658 + resolution: {integrity: sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==, tarball: https://registry.npmjs.org/react/-/react-19.2.4.tgz} 2659 2659 + engines: {node: '>=0.10.0'} 2660 2660 + 2611 2661 readdirp@4.1.2: 2612 2662 resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==} 2613 2663 engines: {node: '>= 14.18.0'} ··· 2619 2669 require-from-string@2.0.2: 2620 2670 resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==} 2621 2671 engines: {node: '>=0.10.0'} 2672 2672 + 2673 2673 + resize-observer-polyfill@1.5.1: 2674 2674 + resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==, tarball: https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz} 2622 2675 2623 2676 resolve-from@4.0.0: 2624 2677 resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==} ··· 2676 2729 resolution: {integrity: sha512-abovcqmwl97WKioxpkfuMeZmndB1TuDFY/R+FymrZyiGP+pMYomvgSzVPnbNMWHHESOPosVHGL352oFbdAnJcA==} 2677 2730 engines: {node: '>=16'} 2678 2731 2732 2732 + scheduler@0.27.0: 2733 2733 + resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==, tarball: https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz} 2734 2734 + 2679 2735 semver@7.7.3: 2680 2736 resolution: {integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==} 2681 2737 engines: {node: '>=10'} ··· 4731 4787 4732 4788 fast-deep-equal@3.1.3: {} 4733 4789 4790 4790 + fast-equals@4.0.3: {} 4791 4791 + 4734 4792 fast-json-stable-stringify@2.1.0: {} 4735 4793 4736 4794 fast-levenshtein@2.0.6: {} ··· 4836 4894 iso-datestring-validator@2.2.2: {} 4837 4895 4838 4896 jiti@2.6.1: {} 4897 4897 + 4898 4898 + js-tokens@4.0.0: {} 4839 4899 4840 4900 js-yaml@4.1.1: 4841 4901 dependencies: ··· 4942 5002 4943 5003 lodash.merge@4.6.2: {} 4944 5004 5005 5005 + loose-envify@1.4.0: 5006 5006 + dependencies: 5007 5007 + js-tokens: 4.0.0 5008 5008 + 4945 5009 lz-string@1.5.0: {} 4946 5010 4947 5011 maath@0.10.8(@types/three@0.176.0)(three@0.176.0): ··· 5066 5130 number-flow@0.5.9: 5067 5131 dependencies: 5068 5132 esm-env: 1.2.2 5133 5133 + 5134 5134 + object-assign@4.1.1: {} 5069 5135 5070 5136 obug@2.1.1: {} 5071 5137 ··· 5200 5266 5201 5267 prettier@3.8.1: {} 5202 5268 5269 5269 + prop-types@15.8.1: 5270 5270 + dependencies: 5271 5271 + loose-envify: 1.4.0 5272 5272 + object-assign: 4.1.1 5273 5273 + react-is: 16.13.1 5274 5274 + 5203 5275 prosemirror-changeset@2.3.1: 5204 5276 dependencies: 5205 5277 prosemirror-transform: 1.11.0 ··· 5319 5391 5320 5392 rangetouch@2.0.1: {} 5321 5393 5394 5394 + react-dom@19.2.4(react@19.2.4): 5395 5395 + dependencies: 5396 5396 + react: 19.2.4 5397 5397 + scheduler: 0.27.0 5398 5398 + 5399 5399 + react-draggable@4.5.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4): 5400 5400 + dependencies: 5401 5401 + clsx: 2.1.1 5402 5402 + prop-types: 15.8.1 5403 5403 + react: 19.2.4 5404 5404 + react-dom: 19.2.4(react@19.2.4) 5405 5405 + 5406 5406 + react-grid-layout@2.2.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4): 5407 5407 + dependencies: 5408 5408 + clsx: 2.1.1 5409 5409 + fast-equals: 4.0.3 5410 5410 + prop-types: 15.8.1 5411 5411 + react: 19.2.4 5412 5412 + react-dom: 19.2.4(react@19.2.4) 5413 5413 + react-draggable: 4.5.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4) 5414 5414 + react-resizable: 3.1.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4) 5415 5415 + resize-observer-polyfill: 1.5.1 5416 5416 + 5417 5417 + react-is@16.13.1: {} 5418 5418 + 5419 5419 + react-resizable@3.1.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4): 5420 5420 + dependencies: 5421 5421 + prop-types: 15.8.1 5422 5422 + react: 19.2.4 5423 5423 + react-dom: 19.2.4(react@19.2.4) 5424 5424 + react-draggable: 4.5.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4) 5425 5425 + 5426 5426 + react@19.2.4: {} 5427 5427 + 5322 5428 readdirp@4.1.2: {} 5323 5429 5324 5430 regexparam@3.0.0: {} 5325 5431 5326 5432 require-from-string@2.0.2: {} 5433 5433 + 5434 5434 + resize-observer-polyfill@1.5.1: {} 5327 5435 5328 5436 resolve-from@4.0.0: {} 5329 5437 ··· 5412 5520 parse-css-color: 0.2.1 5413 5521 postcss-value-parser: 4.2.0 5414 5522 yoga-wasm-web: 0.3.3 5523 5523 + 5524 5524 + scheduler@0.27.0: {} 5415 5525 5416 5526 semver@7.7.3: {} 5417 5527

+1 -11

src/lib/cards/_base/BaseCard/BaseCard.svelte

··· 5 5 import type { Snippet } from 'svelte'; 6 6 import type { HTMLAttributes } from 'svelte/elements'; 7 7 import { getColor } from '../..'; 8 8 - import { getIsCoarse } from '$lib/website/context'; 9 9 - 10 10 - function tryGetIsCoarse(): (() => boolean) | undefined { 11 11 - try { 12 12 - return getIsCoarse(); 13 13 - } catch { 14 14 - return undefined; 15 15 - } 16 16 - } 17 17 - const isCoarse = tryGetIsCoarse(); 18 8 19 9 const colors = { 20 10 base: 'bg-base-200/50 dark:bg-base-950/50', ··· 49 39 id={item.id} 50 40 data-flip-id={item.id} 51 41 bind:this={ref} 52 52 - draggable={isEditing && !locked && !isCoarse?.()} 42 42 + draggable={false} 53 43 class={[ 54 44 'card group/card selection:bg-accent-600/50 focus-within:outline-accent-500 @container/card absolute isolate z-0 rounded-3xl outline-offset-2 transition-all duration-200 focus-within:outline-2', 55 45 color ? (colors[color] ?? colors.accent) : colors.base,

+4 -7

src/lib/cards/_base/BaseCard/BaseEditingCard.svelte

··· 15 15 getSelectCard 16 16 } from '$lib/website/context'; 17 17 import PlainTextEditor from '$lib/components/PlainTextEditor.svelte'; 18 18 - import { fixAllCollisions, fixCollisions } from '$lib/helper'; 19 18 20 19 let colorsChoices = [ 21 20 { class: 'text-base-500', label: 'base' }, ··· 194 193 ]} 195 194 {...rest} 196 195 > 197 197 - {#if isCoarse?.() ? !isSelected : !item.cardData?.locked} 196 196 + {#if isCoarse?.() && !isSelected} 198 197 <!-- svelte-ignore a11y_click_events_have_key_events --> 199 198 <div 200 199 role="button" 201 200 tabindex="-1" 202 202 - class={['absolute inset-0', isCoarse?.() ? 'z-20 cursor-pointer' : 'cursor-grab']} 201 201 + class="absolute inset-0 z-20 cursor-pointer" 203 202 onclick={(e) => { 204 204 - if (isCoarse?.()) { 205 205 - e.stopPropagation(); 206 206 - selectCard?.(item.id); 207 207 - } 203 203 + e.stopPropagation(); 204 204 + selectCard?.(item.id); 208 205 }} 209 206 ></div> 210 207 {/if}

+13 -1

src/lib/cards/index.ts

··· 40 40 import { GitHubContributorsCardDefinition } from './social/GitHubContributorsCard'; 41 41 import { ProductHuntCardDefinition } from './social/ProductHuntCard'; 42 42 import { KickstarterCardDefinition } from './social/KickstarterCard'; 43 43 + import { NpmxLikesCardDefinition } from './social/NpmxLikesCard'; 44 44 + import { NpmxLikesLeaderboardCardDefinition } from './social/NpmxLikesLeaderboardCard'; 45 45 + import { LastFMRecentTracksCardDefinition } from './media/LastFMCard/LastFMRecentTracksCard'; 46 46 + import { LastFMTopTracksCardDefinition } from './media/LastFMCard/LastFMTopTracksCard'; 47 47 + import { LastFMTopAlbumsCardDefinition } from './media/LastFMCard/LastFMTopAlbumsCard'; 48 48 + import { LastFMProfileCardDefinition } from './media/LastFMCard/LastFMProfileCard'; 43 49 // import { Model3DCardDefinition } from './visual/Model3DCard'; 44 50 45 51 export const AllCardDefinitions = [ ··· 84 90 FriendsCardDefinition, 85 91 GitHubContributorsCardDefinition, 86 92 ProductHuntCardDefinition, 87 87 - KickstarterCardDefinition 93 93 + KickstarterCardDefinition, 94 94 + NpmxLikesCardDefinition, 95 95 + NpmxLikesLeaderboardCardDefinition, 96 96 + LastFMRecentTracksCardDefinition, 97 97 + LastFMTopTracksCardDefinition, 98 98 + LastFMTopAlbumsCardDefinition, 99 99 + LastFMProfileCardDefinition 88 100 ] as const; 89 101 90 102 export const CardDefinitionsByType = AllCardDefinitions.reduce(

+60

src/lib/cards/media/LastFMCard/CreateLastFMCardModal.svelte

··· 1 1 + <script lang="ts"> 2 2 + import { Button, Input, Modal, Subheading } from '@foxui/core'; 3 3 + import type { CreationModalComponentProps } from '../../types'; 4 4 + 5 5 + let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props(); 6 6 + 7 7 + let errorMessage = $state(''); 8 8 + </script> 9 9 + 10 10 + <Modal open={true} closeButton={false}> 11 11 + <form 12 12 + onsubmit={() => { 13 13 + let input = item.cardData.href?.trim(); 14 14 + if (!input) return; 15 15 + 16 16 + let username: string | undefined; 17 17 + 18 18 + try { 19 19 + const parsed = new URL(input); 20 20 + if (/^(www\.)?last\.fm$/.test(parsed.hostname)) { 21 21 + const segments = parsed.pathname.split('/').filter(Boolean); 22 22 + if (segments.length >= 2 && segments[0] === 'user') { 23 23 + username = segments[1]; 24 24 + } 25 25 + } 26 26 + } catch { 27 27 + if (/^[a-zA-Z0-9_-]{2,15}$/.test(input)) { 28 28 + username = input; 29 29 + } 30 30 + } 31 31 + 32 32 + if (!username) { 33 33 + errorMessage = 'Please enter a valid Last.fm username or profile URL'; 34 34 + return; 35 35 + } 36 36 + 37 37 + item.cardData.lastfmUsername = username; 38 38 + item.cardData.href = `https://www.last.fm/user/${username}`; 39 39 + 40 40 + oncreate?.(); 41 41 + }} 42 42 + class="flex flex-col gap-2" 43 43 + > 44 44 + <Subheading>Enter a Last.fm username or profile URL</Subheading> 45 45 + <Input 46 46 + bind:value={item.cardData.href} 47 47 + placeholder="username or https://www.last.fm/user/username" 48 48 + class="mt-4" 49 49 + /> 50 50 + 51 51 + {#if errorMessage} 52 52 + <p class="mt-2 text-sm text-red-600">{errorMessage}</p> 53 53 + {/if} 54 54 + 55 55 + <div class="mt-4 flex justify-end gap-2"> 56 56 + <Button onclick={oncancel} variant="ghost">Cancel</Button> 57 57 + <Button type="submit">Create</Button> 58 58 + </div> 59 59 + </form> 60 60 + </Modal>

+50

src/lib/cards/media/LastFMCard/LastFMAlbumArt.svelte

··· 1 1 + <script lang="ts"> 2 2 + let { 3 3 + images, 4 4 + alt = '', 5 5 + size = 'medium' 6 6 + }: { images?: { '#text': string; size: string }[]; alt?: string; size?: string } = $props(); 7 7 + 8 8 + let isLoading = $state(true); 9 9 + let hasError = $state(false); 10 10 + 11 11 + const imageUrl = $derived.by(() => { 12 12 + if (!images || images.length === 0) return ''; 13 13 + const preferred = ['extralarge', 'large', 'medium', 'small']; 14 14 + for (const pref of preferred) { 15 15 + const img = images.find((i) => i.size === pref); 16 16 + if (img?.['#text']) return img['#text']; 17 17 + } 18 18 + return images[images.length - 1]?.['#text'] || ''; 19 19 + }); 20 20 + </script> 21 21 + 22 22 + {#if !imageUrl || hasError} 23 23 + <div 24 24 + class="bg-base-200 dark:bg-base-700 accent:bg-accent-700/50 flex h-full w-full items-center justify-center rounded-lg" 25 25 + > 26 26 + <svg 27 27 + class="text-base-500 dark:text-base-400 accent:text-accent-200 h-5 w-5" 28 28 + fill="currentColor" 29 29 + viewBox="0 0 20 20" 30 30 + > 31 31 + <path 32 32 + d="M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v9.114A4.369 4.369 0 005 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.37 4.37 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z" 33 33 + /> 34 34 + </svg> 35 35 + </div> 36 36 + {:else} 37 37 + {#if isLoading} 38 38 + <div class="bg-base-200 dark:bg-base-800 h-full w-full animate-pulse rounded-lg"></div> 39 39 + {/if} 40 40 + <img 41 41 + src={imageUrl} 42 42 + {alt} 43 43 + class="h-full w-full rounded-lg object-cover {isLoading && 'hidden'}" 44 44 + onload={() => (isLoading = false)} 45 45 + onerror={() => { 46 46 + isLoading = false; 47 47 + hasError = true; 48 48 + }} 49 49 + /> 50 50 + {/if}

+36

src/lib/cards/media/LastFMCard/LastFMPeriodSettings.svelte

··· 1 1 + <script lang="ts"> 2 2 + import type { SettingsComponentProps } from '../../types'; 3 3 + import { Label } from '@foxui/core'; 4 4 + 5 5 + let { item = $bindable() }: SettingsComponentProps = $props(); 6 6 + 7 7 + const periodOptions = [ 8 8 + { value: '7day', label: '7 Days' }, 9 9 + { value: '1month', label: '1 Month' }, 10 10 + { value: '3month', label: '3 Months' }, 11 11 + { value: '6month', label: '6 Months' }, 12 12 + { value: '12month', label: '12 Months' }, 13 13 + { value: 'overall', label: 'All Time' } 14 14 + ]; 15 15 + 16 16 + let period = $derived(item.cardData.period ?? '7day'); 17 17 + </script> 18 18 + 19 19 + <div class="flex flex-col gap-2"> 20 20 + <Label>Time Period</Label> 21 21 + <div class="flex flex-wrap gap-2"> 22 22 + {#each periodOptions as opt (opt.value)} 23 23 + <button 24 24 + class={[ 25 25 + 'rounded-xl border px-3 py-2 text-sm transition-colors', 26 26 + period === opt.value 27 27 + ? 'bg-accent-500 border-accent-500 text-white' 28 28 + : 'bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 text-base-900 dark:text-base-100 hover:border-accent-400' 29 29 + ]} 30 30 + onclick={() => (item.cardData.period = opt.value)} 31 31 + > 32 32 + {opt.label} 33 33 + </button> 34 34 + {/each} 35 35 + </div> 36 36 + </div>

+113

src/lib/cards/media/LastFMCard/LastFMProfileCard/LastFMProfileCard.svelte

··· 1 1 + <script lang="ts"> 2 2 + import { onMount } from 'svelte'; 3 3 + import { siLastdotfm } from 'simple-icons'; 4 4 + import { getAdditionalUserData } from '$lib/website/context'; 5 5 + import type { ContentComponentProps } from '../../../types'; 6 6 + import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte'; 7 7 + 8 8 + interface UserInfo { 9 9 + name: string; 10 10 + realname: string; 11 11 + url: string; 12 12 + image: { '#text': string; size: string }[]; 13 13 + playcount: string; 14 14 + registered: { unixtime: string }; 15 15 + } 16 16 + 17 17 + let { item, isEditing }: ContentComponentProps = $props(); 18 18 + 19 19 + const data = getAdditionalUserData(); 20 20 + const cacheKey = $derived(`lastfmProfile:${item.cardData.lastfmUsername}`); 21 21 + 22 22 + // svelte-ignore state_referenced_locally 23 23 + let userInfo = $state(data[cacheKey] as UserInfo | undefined); 24 24 + 25 25 + onMount(async () => { 26 26 + if (userInfo) return; 27 27 + if (!item.cardData.lastfmUsername) return; 28 28 + 29 29 + try { 30 30 + const response = await fetch( 31 31 + `/api/lastfm?method=user.getInfo&user=${encodeURIComponent(item.cardData.lastfmUsername)}` 32 32 + ); 33 33 + if (response.ok) { 34 34 + const result = await response.json(); 35 35 + userInfo = result?.user; 36 36 + data[cacheKey] = userInfo; 37 37 + } 38 38 + } catch (error) { 39 39 + console.error('Failed to fetch Last.fm profile:', error); 40 40 + } 41 41 + }); 42 42 + 43 43 + const profileUrl = $derived(`https://www.last.fm/user/${item.cardData.lastfmUsername}`); 44 44 + 45 45 + const avatarUrl = $derived.by(() => { 46 46 + if (!userInfo?.image) return ''; 47 47 + const preferred = ['extralarge', 'large', 'medium']; 48 48 + for (const pref of preferred) { 49 49 + const img = userInfo.image.find((i) => i.size === pref); 50 50 + if (img?.['#text']) return img['#text']; 51 51 + } 52 52 + return ''; 53 53 + }); 54 54 + 55 55 + const memberSince = $derived.by(() => { 56 56 + if (!userInfo?.registered?.unixtime) return ''; 57 57 + const date = new Date(parseInt(userInfo.registered.unixtime) * 1000); 58 58 + return date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' }); 59 59 + }); 60 60 + </script> 61 61 + 62 62 + <div class="h-full overflow-hidden p-4"> 63 63 + <div class="flex h-full flex-col justify-between"> 64 64 + <div class="flex items-center gap-3"> 65 65 + <div 66 66 + class="fill-base-950 accent:fill-white size-6 shrink-0 dark:fill-white [&_svg]:size-full" 67 67 + > 68 68 + {@html siLastdotfm.svg} 69 69 + </div> 70 70 + <span class="truncate text-2xl font-bold"> 71 71 + {item.cardData.lastfmUsername} 72 72 + </span> 73 73 + </div> 74 74 + 75 75 + {#if userInfo} 76 76 + <div class="flex items-center gap-4"> 77 77 + {#if avatarUrl} 78 78 + <img src={avatarUrl} alt={userInfo.name} class="size-12 rounded-full object-cover" /> 79 79 + {/if} 80 80 + <div class="min-w-0 flex-1"> 81 81 + <div class="text-lg font-semibold"> 82 82 + {parseInt(userInfo.playcount).toLocaleString()} scrobbles 83 83 + </div> 84 84 + {#if memberSince} 85 85 + <div class="text-sm opacity-60"> 86 86 + Since {memberSince} 87 87 + </div> 88 88 + {/if} 89 89 + </div> 90 90 + </div> 91 91 + {:else} 92 92 + <div class="text-sm opacity-60">Loading profile...</div> 93 93 + {/if} 94 94 + </div> 95 95 + </div> 96 96 + 97 97 + {#if !isEditing} 98 98 + <a 99 99 + href={profileUrl} 100 100 + class="absolute inset-0 h-full w-full" 101 101 + target="_blank" 102 102 + rel="noopener noreferrer" 103 103 + use:qrOverlay={{ 104 104 + context: { 105 105 + title: item.cardData.lastfmUsername, 106 106 + icon: siLastdotfm.svg, 107 107 + iconColor: '#' + siLastdotfm.hex 108 108 + } 109 109 + }} 110 110 + > 111 111 + <span class="sr-only">View on Last.fm</span> 112 112 + </a> 113 113 + {/if}

+40

src/lib/cards/media/LastFMCard/LastFMProfileCard/index.ts

··· 1 1 + import type { CardDefinition } from '../../../types'; 2 2 + import CreateLastFMCardModal from '../CreateLastFMCardModal.svelte'; 3 3 + import LastFMProfileCard from './LastFMProfileCard.svelte'; 4 4 + 5 5 + export const LastFMProfileCardDefinition = { 6 6 + type: 'lastfmProfile', 7 7 + contentComponent: LastFMProfileCard, 8 8 + creationModalComponent: CreateLastFMCardModal, 9 9 + createNew: (card) => { 10 10 + card.w = 4; 11 11 + card.mobileW = 8; 12 12 + card.h = 2; 13 13 + card.mobileH = 3; 14 14 + }, 15 15 + loadData: async (items) => { 16 16 + const allData: Record<string, unknown> = {}; 17 17 + for (const item of items) { 18 18 + const username = item.cardData.lastfmUsername; 19 19 + if (!username) continue; 20 20 + try { 21 21 + const response = await fetch( 22 22 + `https://blento.app/api/lastfm?method=user.getInfo&user=${encodeURIComponent(username)}` 23 23 + ); 24 24 + if (!response.ok) continue; 25 25 + const text = await response.text(); 26 26 + const result = JSON.parse(text); 27 27 + allData[`lastfmProfile:${username}`] = result?.user; 28 28 + } catch (error) { 29 29 + console.error('Failed to fetch Last.fm profile:', error); 30 30 + } 31 31 + } 32 32 + return allData; 33 33 + }, 34 34 + minW: 2, 35 35 + minH: 2, 36 36 + name: 'Last.fm Profile', 37 37 + keywords: ['music', 'scrobble', 'profile', 'lastfm', 'last.fm'], 38 38 + groups: ['Media'], 39 39 + 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="m9 9 10.5-3m0 6.553v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 1 1-.99-3.467l2.31-.66a2.25 2.25 0 0 0 1.632-2.163Zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 0 1-.99-3.467l2.31-.66A2.25 2.25 0 0 0 9 15.553Z" /></svg>` 40 40 + } as CardDefinition & { type: 'lastfmProfile' };

+103

src/lib/cards/media/LastFMCard/LastFMRecentTracksCard/LastFMRecentTracksCard.svelte

··· 1 1 + <script lang="ts"> 2 2 + import { onMount } from 'svelte'; 3 3 + import { getAdditionalUserData } from '$lib/website/context'; 4 4 + import type { ContentComponentProps } from '../../../types'; 5 5 + import LastFMAlbumArt from '../LastFMAlbumArt.svelte'; 6 6 + import { RelativeTime } from '@foxui/time'; 7 7 + 8 8 + interface Track { 9 9 + name: string; 10 10 + artist: { '#text': string }; 11 11 + album: { '#text': string }; 12 12 + image: { '#text': string; size: string }[]; 13 13 + url: string; 14 14 + date?: { uts: string }; 15 15 + '@attr'?: { nowplaying: string }; 16 16 + } 17 17 + 18 18 + let { item }: ContentComponentProps = $props(); 19 19 + 20 20 + const data = getAdditionalUserData(); 21 21 + const cacheKey = $derived(`lastfmRecentTracks:${item.cardData.lastfmUsername}`); 22 22 + 23 23 + // svelte-ignore state_referenced_locally 24 24 + let tracks = $state(data[cacheKey] as Track[] | undefined); 25 25 + let error = $state(false); 26 26 + 27 27 + onMount(async () => { 28 28 + if (tracks) return; 29 29 + if (!item.cardData.lastfmUsername) return; 30 30 + 31 31 + try { 32 32 + const response = await fetch( 33 33 + `/api/lastfm?method=user.getRecentTracks&user=${encodeURIComponent(item.cardData.lastfmUsername)}&limit=50` 34 34 + ); 35 35 + if (response.ok) { 36 36 + const result = await response.json(); 37 37 + tracks = result?.recenttracks?.track ?? []; 38 38 + data[cacheKey] = tracks; 39 39 + } else { 40 40 + error = true; 41 41 + } 42 42 + } catch { 43 43 + error = true; 44 44 + } 45 45 + }); 46 46 + </script> 47 47 + 48 48 + <div class="z-10 flex h-full w-full flex-col gap-3 overflow-y-scroll p-4"> 49 49 + {#if tracks && tracks.length > 0} 50 50 + {#each tracks as track, i (track.url + i)} 51 51 + <a 52 52 + href={track.url} 53 53 + target="_blank" 54 54 + rel="noopener noreferrer" 55 55 + class="flex w-full items-center gap-3" 56 56 + > 57 57 + <div class="size-10 shrink-0"> 58 58 + <LastFMAlbumArt images={track.image} alt={track.album?.['#text']} /> 59 59 + </div> 60 60 + <div class="min-w-0 flex-1"> 61 61 + <div class="inline-flex w-full max-w-full justify-between gap-2"> 62 62 + <div 63 63 + class="text-accent-500 accent:text-accent-950 min-w-0 flex-1 shrink truncate font-semibold" 64 64 + > 65 65 + {track.name} 66 66 + </div> 67 67 + {#if track['@attr']?.nowplaying === 'true'} 68 68 + <div class="flex shrink-0 items-center gap-1 text-xs text-green-500"> 69 69 + <span class="inline-block size-2 animate-pulse rounded-full bg-green-500"></span> 70 70 + Now 71 71 + </div> 72 72 + {:else if track.date?.uts} 73 73 + <div class="shrink-0 text-xs"> 74 74 + <RelativeTime date={new Date(parseInt(track.date.uts) * 1000)} locale="en-US" /> ago 75 75 + </div> 76 76 + {/if} 77 77 + </div> 78 78 + <div class="my-1 min-w-0 truncate text-xs whitespace-nowrap"> 79 79 + {track.artist?.['#text']} 80 80 + </div> 81 81 + </div> 82 82 + </a> 83 83 + {/each} 84 84 + {:else if error} 85 85 + <div 86 86 + class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center text-center text-sm" 87 87 + > 88 88 + Failed to load tracks. 89 89 + </div> 90 90 + {:else if tracks} 91 91 + <div 92 92 + class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center text-center text-sm" 93 93 + > 94 94 + No recent tracks found. 95 95 + </div> 96 96 + {:else} 97 97 + <div 98 98 + class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center text-center text-sm" 99 99 + > 100 100 + Loading tracks... 101 101 + </div> 102 102 + {/if} 103 103 + </div>

+70

src/lib/cards/media/LastFMCard/LastFMRecentTracksCard/index.ts

··· 1 1 + import type { CardDefinition } from '../../../types'; 2 2 + import CreateLastFMCardModal from '../CreateLastFMCardModal.svelte'; 3 3 + import LastFMRecentTracksCard from './LastFMRecentTracksCard.svelte'; 4 4 + 5 5 + export const LastFMRecentTracksCardDefinition = { 6 6 + type: 'lastfmRecentTracks', 7 7 + contentComponent: LastFMRecentTracksCard, 8 8 + creationModalComponent: CreateLastFMCardModal, 9 9 + createNew: (card) => { 10 10 + card.w = 4; 11 11 + card.mobileW = 8; 12 12 + card.h = 3; 13 13 + card.mobileH = 6; 14 14 + }, 15 15 + loadData: async (items) => { 16 16 + const allData: Record<string, unknown> = {}; 17 17 + for (const item of items) { 18 18 + const username = item.cardData.lastfmUsername; 19 19 + if (!username) continue; 20 20 + try { 21 21 + const response = await fetch( 22 22 + `https://blento.app/api/lastfm?method=user.getRecentTracks&user=${encodeURIComponent(username)}&limit=50` 23 23 + ); 24 24 + if (!response.ok) continue; 25 25 + const text = await response.text(); 26 26 + const result = JSON.parse(text); 27 27 + allData[`lastfmRecentTracks:${username}`] = result?.recenttracks?.track ?? []; 28 28 + } catch (error) { 29 29 + console.error('Failed to fetch Last.fm recent tracks:', error); 30 30 + } 31 31 + } 32 32 + return allData; 33 33 + }, 34 34 + onUrlHandler: (url, item) => { 35 35 + const username = getLastFMUsername(url); 36 36 + if (!username) return null; 37 37 + 38 38 + item.cardData.lastfmUsername = username; 39 39 + item.cardData.href = `https://www.last.fm/user/${username}`; 40 40 + item.w = 4; 41 41 + item.mobileW = 8; 42 42 + item.h = 3; 43 43 + item.mobileH = 6; 44 44 + item.cardType = 'lastfmRecentTracks'; 45 45 + return item; 46 46 + }, 47 47 + urlHandlerPriority: 5, 48 48 + minW: 3, 49 49 + minH: 2, 50 50 + canHaveLabel: true, 51 51 + name: 'Last.fm Recent Tracks', 52 52 + keywords: ['music', 'scrobble', 'listening', 'songs', 'lastfm', 'last.fm'], 53 53 + groups: ['Media'], 54 54 + 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="m9 9 10.5-3m0 6.553v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 1 1-.99-3.467l2.31-.66a2.25 2.25 0 0 0 1.632-2.163Zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 0 1-.99-3.467l2.31-.66A2.25 2.25 0 0 0 9 15.553Z" /></svg>` 55 55 + } as CardDefinition & { type: 'lastfmRecentTracks' }; 56 56 + 57 57 + function getLastFMUsername(url: string | undefined): string | undefined { 58 58 + if (!url) return; 59 59 + try { 60 60 + const parsed = new URL(url); 61 61 + if (!/^(www\.)?last\.fm$/.test(parsed.hostname)) return undefined; 62 62 + const segments = parsed.pathname.split('/').filter(Boolean); 63 63 + if (segments.length >= 2 && segments[0] === 'user') { 64 64 + return segments[1]; 65 65 + } 66 66 + return undefined; 67 67 + } catch { 68 68 + return undefined; 69 69 + } 70 70 + }

+103

src/lib/cards/media/LastFMCard/LastFMTopAlbumsCard/LastFMTopAlbumsCard.svelte

··· 1 1 + <script lang="ts"> 2 2 + import { onMount } from 'svelte'; 3 3 + import type { ContentComponentProps } from '../../../types'; 4 4 + import { getAdditionalUserData } from '$lib/website/context'; 5 5 + import ImageGrid from '$lib/components/ImageGrid.svelte'; 6 6 + 7 7 + interface Album { 8 8 + name: string; 9 9 + playcount: string; 10 10 + url: string; 11 11 + artist: { name: string; url: string }; 12 12 + image: { '#text': string; size: string }[]; 13 13 + } 14 14 + 15 15 + let { item }: ContentComponentProps = $props(); 16 16 + 17 17 + const data = getAdditionalUserData(); 18 18 + 19 19 + let period = $derived(item.cardData.period ?? '7day'); 20 20 + let layout: 'grid' | 'cinema' = $derived(item.cardData.layout ?? 'grid'); 21 21 + const cacheKey = $derived(`lastfmTopAlbums:${item.cardData.lastfmUsername}:${period}`); 22 22 + 23 23 + // svelte-ignore state_referenced_locally 24 24 + let albums = $state(data[cacheKey] as Album[] | undefined); 25 25 + let loading = $state(false); 26 26 + let error = $state(false); 27 27 + 28 28 + async function fetchAlbums() { 29 29 + if (!item.cardData.lastfmUsername) return; 30 30 + loading = true; 31 31 + 32 32 + try { 33 33 + const response = await fetch( 34 34 + `/api/lastfm?method=user.getTopAlbums&user=${encodeURIComponent(item.cardData.lastfmUsername)}&period=${period}&limit=50` 35 35 + ); 36 36 + if (response.ok) { 37 37 + const result = await response.json(); 38 38 + albums = result?.topalbums?.album ?? []; 39 39 + data[cacheKey] = albums; 40 40 + } else { 41 41 + error = true; 42 42 + } 43 43 + } catch { 44 44 + error = true; 45 45 + } finally { 46 46 + loading = false; 47 47 + } 48 48 + } 49 49 + 50 50 + onMount(() => { 51 51 + if (!albums) fetchAlbums(); 52 52 + }); 53 53 + 54 54 + $effect(() => { 55 55 + const _period = period; 56 56 + const cached = data[cacheKey] as Album[] | undefined; 57 57 + if (cached) { 58 58 + albums = cached; 59 59 + } else { 60 60 + fetchAlbums(); 61 61 + } 62 62 + }); 63 63 + 64 64 + function getImageUrl(album: Album): string | null { 65 65 + if (!album.image || album.image.length === 0) return null; 66 66 + const preferred = ['extralarge', 'large', 'medium', 'small']; 67 67 + for (const pref of preferred) { 68 68 + const img = album.image.find((i) => i.size === pref); 69 69 + if (img?.['#text']) return img['#text']; 70 70 + } 71 71 + return album.image[album.image.length - 1]?.['#text'] || null; 72 72 + } 73 73 + 74 74 + let gridItems = $derived( 75 75 + (albums ?? []).map((album) => ({ 76 76 + imageUrl: getImageUrl(album), 77 77 + link: album.url, 78 78 + label: `${album.name} - ${album.artist.name}` 79 79 + })) 80 80 + ); 81 81 + </script> 82 82 + 83 83 + {#if error} 84 84 + <div class="flex h-full w-full items-center justify-center"> 85 85 + <span class="text-base-500 dark:text-base-400 accent:text-white/60 text-sm"> 86 86 + Failed to load albums. 87 87 + </span> 88 88 + </div> 89 89 + {:else if albums && gridItems.length > 0} 90 90 + <ImageGrid items={gridItems} {layout} tooltip /> 91 91 + {:else if loading || !albums} 92 92 + <div class="flex h-full w-full items-center justify-center"> 93 93 + <span class="text-base-500 dark:text-base-400 accent:text-white/60 text-sm"> 94 94 + Loading albums... 95 95 + </span> 96 96 + </div> 97 97 + {:else} 98 98 + <div class="flex h-full w-full items-center justify-center"> 99 99 + <span class="text-base-500 dark:text-base-400 accent:text-white/60 text-sm"> 100 100 + No top albums found. 101 101 + </span> 102 102 + </div> 103 103 + {/if}

+63

src/lib/cards/media/LastFMCard/LastFMTopAlbumsCard/LastFMTopAlbumsCardSettings.svelte

··· 1 1 + <script lang="ts"> 2 2 + import type { SettingsComponentProps } from '../../../types'; 3 3 + import { Label } from '@foxui/core'; 4 4 + 5 5 + let { item = $bindable() }: SettingsComponentProps = $props(); 6 6 + 7 7 + const periodOptions = [ 8 8 + { value: '7day', label: '7 Days' }, 9 9 + { value: '1month', label: '1 Month' }, 10 10 + { value: '3month', label: '3 Months' }, 11 11 + { value: '6month', label: '6 Months' }, 12 12 + { value: '12month', label: '12 Months' }, 13 13 + { value: 'overall', label: 'All Time' } 14 14 + ]; 15 15 + 16 16 + const layoutOptions = [ 17 17 + { value: 'grid', label: 'Grid' }, 18 18 + { value: 'cinema', label: 'Cinema' } 19 19 + ]; 20 20 + 21 21 + let period = $derived(item.cardData.period ?? '7day'); 22 22 + let layout = $derived(item.cardData.layout ?? 'grid'); 23 23 + </script> 24 24 + 25 25 + <div class="flex flex-col gap-4"> 26 26 + <div class="flex flex-col gap-2"> 27 27 + <Label>Time Period</Label> 28 28 + <div class="flex flex-wrap gap-2"> 29 29 + {#each periodOptions as opt (opt.value)} 30 30 + <button 31 31 + class={[ 32 32 + 'rounded-xl border px-3 py-2 text-sm transition-colors', 33 33 + period === opt.value 34 34 + ? 'bg-accent-500 border-accent-500 text-white' 35 35 + : 'bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 text-base-900 dark:text-base-100 hover:border-accent-400' 36 36 + ]} 37 37 + onclick={() => (item.cardData.period = opt.value)} 38 38 + > 39 39 + {opt.label} 40 40 + </button> 41 41 + {/each} 42 42 + </div> 43 43 + </div> 44 44 + 45 45 + <div class="flex flex-col gap-2"> 46 46 + <Label>Layout</Label> 47 47 + <div class="flex gap-2"> 48 48 + {#each layoutOptions as opt (opt.value)} 49 49 + <button 50 50 + class={[ 51 51 + 'flex-1 rounded-xl border px-3 py-2 text-sm transition-colors', 52 52 + layout === opt.value 53 53 + ? 'bg-accent-500 border-accent-500 text-white' 54 54 + : 'bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 text-base-900 dark:text-base-100 hover:border-accent-400' 55 55 + ]} 56 56 + onclick={() => (item.cardData.layout = opt.value)} 57 57 + > 58 58 + {opt.label} 59 59 + </button> 60 60 + {/each} 61 61 + </div> 62 62 + </div> 63 63 + </div>

+47

src/lib/cards/media/LastFMCard/LastFMTopAlbumsCard/index.ts

··· 1 1 + import type { CardDefinition } from '../../../types'; 2 2 + import CreateLastFMCardModal from '../CreateLastFMCardModal.svelte'; 3 3 + import LastFMTopAlbumsCard from './LastFMTopAlbumsCard.svelte'; 4 4 + import LastFMTopAlbumsCardSettings from './LastFMTopAlbumsCardSettings.svelte'; 5 5 + 6 6 + export const LastFMTopAlbumsCardDefinition = { 7 7 + type: 'lastfmTopAlbums', 8 8 + contentComponent: LastFMTopAlbumsCard, 9 9 + creationModalComponent: CreateLastFMCardModal, 10 10 + settingsComponent: LastFMTopAlbumsCardSettings, 11 11 + createNew: (card) => { 12 12 + card.w = 4; 13 13 + card.h = 3; 14 14 + card.mobileW = 8; 15 15 + card.mobileH = 4; 16 16 + card.cardData.period = '7day'; 17 17 + }, 18 18 + loadData: async (items) => { 19 19 + const allData: Record<string, unknown> = {}; 20 20 + for (const item of items) { 21 21 + const username = item.cardData.lastfmUsername; 22 22 + const period = item.cardData.period ?? '7day'; 23 23 + if (!username) continue; 24 24 + try { 25 25 + const response = await fetch( 26 26 + `https://blento.app/api/lastfm?method=user.getTopAlbums&user=${encodeURIComponent(username)}&period=${period}&limit=50` 27 27 + ); 28 28 + if (!response.ok) continue; 29 29 + const text = await response.text(); 30 30 + const result = JSON.parse(text); 31 31 + allData[`lastfmTopAlbums:${username}:${period}`] = result?.topalbums?.album ?? []; 32 32 + } catch (error) { 33 33 + console.error('Failed to fetch Last.fm top albums:', error); 34 34 + } 35 35 + } 36 36 + return allData; 37 37 + }, 38 38 + allowSetColor: true, 39 39 + defaultColor: 'base', 40 40 + minW: 2, 41 41 + minH: 2, 42 42 + canHaveLabel: true, 43 43 + name: 'Last.fm Top Albums', 44 44 + keywords: ['music', 'scrobble', 'albums', 'lastfm', 'last.fm', 'top'], 45 45 + groups: ['Media'], 46 46 + 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="m9 9 10.5-3m0 6.553v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 1 1-.99-3.467l2.31-.66a2.25 2.25 0 0 0 1.632-2.163Zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 0 1-.99-3.467l2.31-.66A2.25 2.25 0 0 0 9 15.553Z" /></svg>` 47 47 + } as CardDefinition & { type: 'lastfmTopAlbums' };

+117

src/lib/cards/media/LastFMCard/LastFMTopTracksCard/LastFMTopTracksCard.svelte

··· 1 1 + <script lang="ts"> 2 2 + import { onMount } from 'svelte'; 3 3 + import { getAdditionalUserData } from '$lib/website/context'; 4 4 + import type { ContentComponentProps } from '../../../types'; 5 5 + import LastFMAlbumArt from '../LastFMAlbumArt.svelte'; 6 6 + 7 7 + interface Track { 8 8 + name: string; 9 9 + playcount: string; 10 10 + artist: { name: string; url: string }; 11 11 + image: { '#text': string; size: string }[]; 12 12 + url: string; 13 13 + } 14 14 + 15 15 + let { item }: ContentComponentProps = $props(); 16 16 + 17 17 + const data = getAdditionalUserData(); 18 18 + 19 19 + let period = $derived(item.cardData.period ?? '7day'); 20 20 + const cacheKey = $derived(`lastfmTopTracks:${item.cardData.lastfmUsername}:${period}`); 21 21 + 22 22 + // svelte-ignore state_referenced_locally 23 23 + let tracks = $state(data[cacheKey] as Track[] | undefined); 24 24 + let error = $state(false); 25 25 + let loading = $state(false); 26 26 + 27 27 + async function fetchTracks() { 28 28 + if (!item.cardData.lastfmUsername) return; 29 29 + loading = true; 30 30 + 31 31 + try { 32 32 + const response = await fetch( 33 33 + `/api/lastfm?method=user.getTopTracks&user=${encodeURIComponent(item.cardData.lastfmUsername)}&period=${period}&limit=50` 34 34 + ); 35 35 + if (response.ok) { 36 36 + const result = await response.json(); 37 37 + tracks = result?.toptracks?.track ?? []; 38 38 + data[cacheKey] = tracks; 39 39 + } else { 40 40 + error = true; 41 41 + } 42 42 + } catch { 43 43 + error = true; 44 44 + } finally { 45 45 + loading = false; 46 46 + } 47 47 + } 48 48 + 49 49 + onMount(() => { 50 50 + if (!tracks) fetchTracks(); 51 51 + }); 52 52 + 53 53 + $effect(() => { 54 54 + const _period = period; 55 55 + const cached = data[cacheKey] as Track[] | undefined; 56 56 + if (cached) { 57 57 + tracks = cached; 58 58 + } else { 59 59 + fetchTracks(); 60 60 + } 61 61 + }); 62 62 + </script> 63 63 + 64 64 + <div class="z-10 flex h-full w-full flex-col gap-3 overflow-y-scroll p-4"> 65 65 + {#if tracks && tracks.length > 0} 66 66 + {#each tracks as track, i (track.url)} 67 67 + <a 68 68 + href={track.url} 69 69 + target="_blank" 70 70 + rel="noopener noreferrer" 71 71 + class="flex w-full items-center gap-3" 72 72 + > 73 73 + <div 74 74 + class="text-base-400 dark:text-base-500 accent:text-white/40 w-5 shrink-0 text-right text-xs font-bold" 75 75 + > 76 76 + {i + 1} 77 77 + </div> 78 78 + <div class="size-10 shrink-0"> 79 79 + <LastFMAlbumArt images={track.image} alt={track.name} /> 80 80 + </div> 81 81 + <div class="min-w-0 flex-1"> 82 82 + <div class="inline-flex w-full max-w-full justify-between gap-2"> 83 83 + <div 84 84 + class="text-accent-500 accent:text-accent-950 min-w-0 flex-1 shrink truncate font-semibold" 85 85 + > 86 86 + {track.name} 87 87 + </div> 88 88 + <div class="shrink-0 text-xs"> 89 89 + {parseInt(track.playcount).toLocaleString()} plays 90 90 + </div> 91 91 + </div> 92 92 + <div class="my-1 min-w-0 truncate text-xs whitespace-nowrap"> 93 93 + {track.artist?.name} 94 94 + </div> 95 95 + </div> 96 96 + </a> 97 97 + {/each} 98 98 + {:else if error} 99 99 + <div 100 100 + class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center text-center text-sm" 101 101 + > 102 102 + Failed to load tracks. 103 103 + </div> 104 104 + {:else if tracks || loading} 105 105 + <div 106 106 + class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center text-center text-sm" 107 107 + > 108 108 + {tracks?.length === 0 ? 'No top tracks found.' : 'Loading tracks...'} 109 109 + </div> 110 110 + {:else} 111 111 + <div 112 112 + class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center text-center text-sm" 113 113 + > 114 114 + Loading tracks... 115 115 + </div> 116 116 + {/if} 117 117 + </div>

+45

src/lib/cards/media/LastFMCard/LastFMTopTracksCard/index.ts

··· 1 1 + import type { CardDefinition } from '../../../types'; 2 2 + import CreateLastFMCardModal from '../CreateLastFMCardModal.svelte'; 3 3 + import LastFMPeriodSettings from '../LastFMPeriodSettings.svelte'; 4 4 + import LastFMTopTracksCard from './LastFMTopTracksCard.svelte'; 5 5 + 6 6 + export const LastFMTopTracksCardDefinition = { 7 7 + type: 'lastfmTopTracks', 8 8 + contentComponent: LastFMTopTracksCard, 9 9 + creationModalComponent: CreateLastFMCardModal, 10 10 + settingsComponent: LastFMPeriodSettings, 11 11 + createNew: (card) => { 12 12 + card.w = 4; 13 13 + card.mobileW = 8; 14 14 + card.h = 3; 15 15 + card.mobileH = 6; 16 16 + card.cardData.period = '7day'; 17 17 + }, 18 18 + loadData: async (items) => { 19 19 + const allData: Record<string, unknown> = {}; 20 20 + for (const item of items) { 21 21 + const username = item.cardData.lastfmUsername; 22 22 + const period = item.cardData.period ?? '7day'; 23 23 + if (!username) continue; 24 24 + try { 25 25 + const response = await fetch( 26 26 + `https://blento.app/api/lastfm?method=user.getTopTracks&user=${encodeURIComponent(username)}&period=${period}&limit=50` 27 27 + ); 28 28 + if (!response.ok) continue; 29 29 + const text = await response.text(); 30 30 + const result = JSON.parse(text); 31 31 + allData[`lastfmTopTracks:${username}:${period}`] = result?.toptracks?.track ?? []; 32 32 + } catch (error) { 33 33 + console.error('Failed to fetch Last.fm top tracks:', error); 34 34 + } 35 35 + } 36 36 + return allData; 37 37 + }, 38 38 + minW: 3, 39 39 + minH: 2, 40 40 + canHaveLabel: true, 41 41 + name: 'Last.fm Top Tracks', 42 42 + keywords: ['music', 'scrobble', 'songs', 'lastfm', 'last.fm', 'top'], 43 43 + groups: ['Media'], 44 44 + 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="m9 9 10.5-3m0 6.553v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 1 1-.99-3.467l2.31-.66a2.25 2.25 0 0 0 1.632-2.163Zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 0 1-.99-3.467l2.31-.66A2.25 2.25 0 0 0 9 15.553Z" /></svg>` 45 45 + } as CardDefinition & { type: 'lastfmTopTracks' };

+9 -1

src/lib/cards/social/BigSocialCard/BigSocialCard.svelte

··· 7 7 8 8 const platform = $derived(item.cardData.platform as string); 9 9 const platformData = $derived(platformsData[platform]); 10 10 + 11 11 + // Color logic: 12 12 + // - base/transparent/undefined: background = brand color, icon = white 13 13 + // - other: background = that color (from BaseCard), icon = white 14 14 + const useBrandBackground = $derived( 15 15 + !item.color || item.color === 'base' || item.color === 'transparent' 16 16 + ); 17 17 + const brandColor = $derived(`#${item.cardData.color}`); 10 18 </script> 11 19 12 20 <div 13 21 class="flex h-full w-full items-center justify-center p-10" 14 14 - style={`background-color: #${item.cardData.color}`} 22 22 + style={useBrandBackground ? `background-color: ${brandColor}` : ''} 15 23 > 16 24 <div 17 25 class="flex aspect-square max-h-full max-w-full items-center justify-center [&_svg]:size-full [&_svg]:max-w-60 [&_svg]:fill-white"

+24 -3

src/lib/cards/social/BigSocialCard/index.ts

··· 36 36 return item; 37 37 }, 38 38 name: 'Social Icon', 39 39 - allowSetColor: false, 40 40 - defaultColor: 'transparent', 39 39 + allowSetColor: true, 40 40 + defaultColor: 'base', 41 41 minW: 2, 42 42 minH: 2, 43 43 onUrlHandler: (url, item) => { ··· 167 167 168 168 tangled: /(?:tangled\.org)/i, 169 169 170 170 - mail: /(?:mailto:)/i 170 170 + mail: /(?:mailto:)/i, 171 171 + 172 172 + npmx: /(?:npmx\.dev)/i 171 173 }; 172 174 173 175 export const platformsData: Record<string, SimpleIcon> = { ··· 277 279 </g> 278 280 <defs> 279 281 <clipPath id="clip0_0_3"> 282 282 + <rect width="24" height="24" fill="white"/> 283 283 + </clipPath> 284 284 + </defs> 285 285 + </svg>` 286 286 + }, 287 287 + 288 288 + npmx: { 289 289 + slug: 'npmx', 290 290 + path: '', 291 291 + title: 'npmx', 292 292 + source: '', 293 293 + hex: '0A0A0A', 294 294 + svg: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 295 295 + <g clip-path="url(#clip0_4_2)"> 296 296 + <path d="M6.12765 16.4049H2V20.5326H6.12765V16.4049Z" fill="#525252"/> 297 297 + <path d="M10.9049 23.8485L19.6885 -1H22L13.2164 23.8485H10.9049Z" fill="#FAFAFA"/> 298 298 + </g> 299 299 + <defs> 300 300 + <clipPath id="clip0_4_2"> 280 301 <rect width="24" height="24" fill="white"/> 281 302 </clipPath> 282 303 </defs>

+14 -135

src/lib/cards/social/GitHubContributorsCard/GitHubContributorsCard.svelte

··· 1 1 <script lang="ts"> 2 2 import { onMount } from 'svelte'; 3 3 import type { ContentComponentProps } from '../../types'; 4 4 - import { getAdditionalUserData, getCanEdit, getIsMobile } from '$lib/website/context'; 4 4 + import { getAdditionalUserData, getCanEdit } from '$lib/website/context'; 5 5 import type { GitHubContributor, GitHubContributorsLoadedData } from '.'; 6 6 + import ImageGrid from '$lib/components/ImageGrid.svelte'; 6 7 7 8 let { item }: ContentComponentProps = $props(); 8 9 9 9 - const isMobile = getIsMobile(); 10 10 const canEdit = getCanEdit(); 11 11 const additionalData = getAdditionalUserData(); 12 12 ··· 53 53 } 54 54 } 55 55 56 56 - let containerWidth = $state(0); 57 57 - let containerHeight = $state(0); 58 58 - 59 59 - let totalItems = $derived(namedContributors.length); 60 60 - 61 61 - const GAP = 6; 62 62 - const MIN_SIZE = 16; 63 63 - const MAX_SIZE = 120; 64 64 - 65 65 - function cinemaCapacity(size: number, availW: number, availH: number): number { 66 66 - const colsWide = Math.floor((availW + GAP) / (size + GAP)); 67 67 - if (colsWide < 1) return 0; 68 68 - const colsNarrow = Math.max(1, colsWide - 1); 69 69 - const maxRows = Math.floor((availH + GAP) / (size + GAP)); 70 70 - let capacity = 0; 71 71 - // Pattern: narrow, wide, narrow, wide... (row 0 is narrow) 72 72 - for (let r = 0; r < maxRows; r++) { 73 73 - capacity += r % 2 === 0 ? colsNarrow : colsWide; 74 74 - } 75 75 - return capacity; 76 76 - } 77 77 - 78 78 - function gridCapacity(size: number, availW: number, availH: number): number { 79 79 - const cols = Math.floor((availW + GAP) / (size + GAP)); 80 80 - const rows = Math.floor((availH + GAP) / (size + GAP)); 81 81 - return cols * rows; 82 82 - } 83 83 - 84 84 - let computedSize = $derived.by(() => { 85 85 - if (!containerWidth || !containerHeight || totalItems === 0) return 40; 86 86 - 87 87 - let lo = MIN_SIZE; 88 88 - let hi = MAX_SIZE; 89 89 - const capacityFn = layout === 'cinema' ? cinemaCapacity : gridCapacity; 90 90 - 91 91 - while (lo <= hi) { 92 92 - const mid = Math.floor((lo + hi) / 2); 93 93 - const availW = containerWidth - (layout === 'cinema' ? mid / 2 : 0); 94 94 - const availH = containerHeight - (layout === 'cinema' ? mid / 2 : 0); 95 95 - if (availW <= 0 || availH <= 0) { 96 96 - hi = mid - 1; 97 97 - continue; 98 98 - } 99 99 - if (capacityFn(mid, availW, availH) >= totalItems) { 100 100 - lo = mid + 1; 101 101 - } else { 102 102 - hi = mid - 1; 103 103 - } 104 104 - } 105 105 - 106 106 - return Math.max(MIN_SIZE, hi); 107 107 - }); 108 108 - 109 109 - let padding = $derived(layout === 'cinema' ? computedSize / 4 : 0); 110 110 - 111 111 - let rows = $derived.by(() => { 112 112 - const availW = containerWidth - (layout === 'cinema' ? computedSize / 4 : 0); 113 113 - if (availW <= 0) return [] as GitHubContributor[][]; 114 114 - 115 115 - const colsWide = Math.floor((availW + GAP) / (computedSize + GAP)); 116 116 - const colsNarrow = layout === 'cinema' ? Math.max(1, colsWide - 1) : colsWide; 117 117 - 118 118 - // Calculate row sizes from bottom up, then reverse for incomplete row at top 119 119 - const rowSizes: number[] = []; 120 120 - let remaining = namedContributors.length; 121 121 - let rowNum = 0; 122 122 - while (remaining > 0) { 123 123 - const cols = layout === 'cinema' && rowNum % 2 === 0 ? colsNarrow : colsWide; 124 124 - rowSizes.push(Math.min(cols, remaining)); 125 125 - remaining -= cols; 126 126 - rowNum++; 127 127 - } 128 128 - rowSizes.reverse(); 129 129 - 130 130 - // Fill rows with contributors in order 131 131 - const result: GitHubContributor[][] = []; 132 132 - let idx = 0; 133 133 - for (const size of rowSizes) { 134 134 - result.push(namedContributors.slice(idx, idx + size)); 135 135 - idx += size; 136 136 - } 137 137 - return result; 138 138 - }); 139 139 - 140 140 - let textSize = $derived( 141 141 - computedSize < 24 ? 'text-[10px]' : computedSize < 40 ? 'text-xs' : 'text-sm' 56 56 + let gridItems = $derived( 57 57 + namedContributors.map((c) => ({ 58 58 + imageUrl: c.avatarUrl, 59 59 + link: `https://github.com/${c.username}`, 60 60 + label: c.username 61 61 + })) 142 62 ); 143 143 - 144 144 - let shapeClass = $derived(shape === 'circle' ? 'rounded-full' : 'rounded-lg'); 145 63 </script> 146 64 147 147 - <div 148 148 - class="flex h-full w-full items-center justify-center overflow-hidden px-2" 149 149 - bind:clientWidth={containerWidth} 150 150 - bind:clientHeight={containerHeight} 151 151 - > 152 152 - {#if !owner || !repo} 153 153 - {#if canEdit()} 65 65 + {#if !owner || !repo} 66 66 + {#if canEdit()} 67 67 + <div class="flex h-full w-full items-center justify-center"> 154 68 <span class="text-base-400 dark:text-base-500 accent:text-accent-300 text-sm"> 155 69 Enter a repository 156 70 </span> 157 157 - {/if} 158 158 - {:else if totalItems > 0} 159 159 - <div style="padding: {padding}px;"> 160 160 - <div class="flex flex-col items-center" style="gap: {GAP}px;"> 161 161 - {#each rows as row, rowIdx (rowIdx)} 162 162 - <div class="flex justify-center" style="gap: {GAP}px;"> 163 163 - {#each row as contributor (contributor.username)} 164 164 - <a 165 165 - href="https://github.com/{contributor.username}" 166 166 - target="_blank" 167 167 - rel="noopener noreferrer" 168 168 - class="accent:ring-accent-500 block {shapeClass} ring-2 ring-white transition-transform hover:scale-110 dark:ring-neutral-900" 169 169 - > 170 170 - {#if contributor.avatarUrl} 171 171 - <img 172 172 - src={contributor.avatarUrl} 173 173 - alt={contributor.username} 174 174 - class="{shapeClass} object-cover" 175 175 - style="width: {computedSize}px; height: {computedSize}px;" 176 176 - /> 177 177 - {:else} 178 178 - <div 179 179 - class="bg-base-200 dark:bg-base-700 accent:bg-accent-400 flex items-center justify-center {shapeClass}" 180 180 - style="width: {computedSize}px; height: {computedSize}px;" 181 181 - > 182 182 - <span 183 183 - class="text-base-500 dark:text-base-400 accent:text-accent-100 {textSize} font-medium" 184 184 - > 185 185 - {contributor.username.charAt(0).toUpperCase()} 186 186 - </span> 187 187 - </div> 188 188 - {/if} 189 189 - </a> 190 190 - {/each} 191 191 - </div> 192 192 - {/each} 193 193 - </div> 194 71 </div> 195 72 {/if} 196 196 - </div> 73 73 + {:else} 74 74 + <ImageGrid items={gridItems} {layout} {shape} tooltip /> 75 75 + {/if}

+103

src/lib/cards/social/NpmxLikesCard/NpmxLikesCard.svelte

··· 1 1 + <script lang="ts"> 2 2 + import type { Item } from '$lib/types'; 3 3 + import { onMount } from 'svelte'; 4 4 + import { getAdditionalUserData, getDidContext, getHandleContext } from '$lib/website/context'; 5 5 + import { NpmxLikesCardDefinition } from '.'; 6 6 + import { RelativeTime } from '@foxui/time'; 7 7 + 8 8 + interface NpmxLike { 9 9 + uri: string; 10 10 + value: { 11 11 + subjectRef: string; 12 12 + createdAt: string; 13 13 + }; 14 14 + } 15 15 + 16 16 + let { item }: { item: Item } = $props(); 17 17 + 18 18 + const data = getAdditionalUserData(); 19 19 + // svelte-ignore state_referenced_locally 20 20 + let feed = $state(data[item.cardType] as NpmxLike[] | undefined); 21 21 + 22 22 + let did = getDidContext(); 23 23 + let handle = getHandleContext(); 24 24 + 25 25 + onMount(async () => { 26 26 + if (feed) return; 27 27 + 28 28 + feed = (await NpmxLikesCardDefinition.loadData?.([], { 29 29 + did, 30 30 + handle 31 31 + })) as NpmxLike[] | undefined; 32 32 + 33 33 + data[item.cardType] = feed; 34 34 + }); 35 35 + 36 36 + function getPackageName(like: NpmxLike): string { 37 37 + return like.value.subjectRef.split('/package/')[1] ?? like.value.subjectRef; 38 38 + } 39 39 + </script> 40 40 + 41 41 + {#snippet likeItem(like: NpmxLike)} 42 42 + <div class="flex w-full items-center gap-3"> 43 43 + <div 44 44 + class="text-accent-500 accent:text-accent-950 flex size-8 shrink-0 items-center justify-center" 45 45 + > 46 46 + <svg 47 47 + xmlns="http://www.w3.org/2000/svg" 48 48 + fill="none" 49 49 + viewBox="0 0 24 24" 50 50 + stroke-width="1.5" 51 51 + stroke="currentColor" 52 52 + class="size-5" 53 53 + > 54 54 + <path 55 55 + stroke-linecap="round" 56 56 + stroke-linejoin="round" 57 57 + d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" 58 58 + /> 59 59 + </svg> 60 60 + </div> 61 61 + <div class="min-w-0 flex-1"> 62 62 + <div class="inline-flex w-full max-w-full items-baseline justify-between gap-2"> 63 63 + <div 64 64 + class="text-accent-500 accent:text-accent-950 min-w-0 flex-1 shrink truncate text-sm font-semibold" 65 65 + > 66 66 + {getPackageName(like)} 67 67 + </div> 68 68 + {#if like.value.createdAt} 69 69 + <div class="text-base-500 dark:text-base-400 accent:text-white/60 shrink-0 text-xs"> 70 70 + <RelativeTime date={new Date(like.value.createdAt)} locale="en-US" /> ago 71 71 + </div> 72 72 + {/if} 73 73 + </div> 74 74 + </div> 75 75 + </div> 76 76 + {/snippet} 77 77 + 78 78 + <div class="z-10 flex h-full w-full flex-col gap-3 overflow-y-scroll p-4"> 79 79 + {#if feed && feed.length > 0} 80 80 + {#each feed as like (like.uri)} 81 81 + <a 82 82 + href="https://npmx.dev/package/{getPackageName(like)}" 83 83 + target="_blank" 84 84 + rel="noopener noreferrer" 85 85 + class="w-full" 86 86 + > 87 87 + {@render likeItem(like)} 88 88 + </a> 89 89 + {/each} 90 90 + {:else if feed} 91 91 + <div 92 92 + class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center text-center text-sm" 93 93 + > 94 94 + No liked packages found. 95 95 + </div> 96 96 + {:else} 97 97 + <div 98 98 + class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center text-center text-sm" 99 99 + > 100 100 + Loading likes... 101 101 + </div> 102 102 + {/if} 103 103 + </div>

+31

src/lib/cards/social/NpmxLikesCard/index.ts

··· 1 1 + import type { CardDefinition } from '../../types'; 2 2 + import { listRecords } from '$lib/atproto'; 3 3 + import NpmxLikesCard from './NpmxLikesCard.svelte'; 4 4 + 5 5 + export const NpmxLikesCardDefinition = { 6 6 + type: 'npmxLikes', 7 7 + contentComponent: NpmxLikesCard, 8 8 + createNew: (card) => { 9 9 + card.w = 4; 10 10 + card.mobileW = 8; 11 11 + card.h = 3; 12 12 + card.mobileH = 6; 13 13 + }, 14 14 + loadData: async (items, { did }) => { 15 15 + const data = await listRecords({ 16 16 + did, 17 17 + collection: 'dev.npmx.feed.like', 18 18 + limit: 99 19 19 + }); 20 20 + 21 21 + return data; 22 22 + }, 23 23 + minW: 4, 24 24 + canHaveLabel: true, 25 25 + 26 26 + keywords: ['npm', 'package', 'npmx', 'likes'], 27 27 + name: 'npmx Likes', 28 28 + 29 29 + groups: ['Social'], 30 30 + 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="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>` 31 31 + } as CardDefinition & { type: 'npmxLikes' };

+116

src/lib/cards/social/NpmxLikesLeaderboardCard/NpmxLikesLeaderboardCard.svelte

··· 1 1 + <script lang="ts"> 2 2 + import type { Item } from '$lib/types'; 3 3 + import { onMount } from 'svelte'; 4 4 + import { getAdditionalUserData, getDidContext, getHandleContext } from '$lib/website/context'; 5 5 + import { NpmxLikesLeaderboardCardDefinition } from '.'; 6 6 + 7 7 + interface LeaderboardEntry { 8 8 + subjectRef: string; 9 9 + totalLikes: number; 10 10 + } 11 11 + 12 12 + interface LeaderboardData { 13 13 + totalLikes: number; 14 14 + totalUniqueLikers: number; 15 15 + leaderBoard: LeaderboardEntry[]; 16 16 + } 17 17 + 18 18 + let { item }: { item: Item } = $props(); 19 19 + 20 20 + const data = getAdditionalUserData(); 21 21 + // svelte-ignore state_referenced_locally 22 22 + let leaderboard = $state(data[item.cardType] as LeaderboardData | undefined); 23 23 + 24 24 + let did = getDidContext(); 25 25 + let handle = getHandleContext(); 26 26 + 27 27 + onMount(async () => { 28 28 + if (leaderboard) return; 29 29 + 30 30 + leaderboard = (await NpmxLikesLeaderboardCardDefinition.loadData?.([], { 31 31 + did, 32 32 + handle 33 33 + })) as LeaderboardData | undefined; 34 34 + 35 35 + data[item.cardType] = leaderboard; 36 36 + }); 37 37 + 38 38 + function getPackageName(entry: LeaderboardEntry): string { 39 39 + return entry.subjectRef.split('/package/')[1] ?? entry.subjectRef; 40 40 + } 41 41 + </script> 42 42 + 43 43 + {#snippet leaderboardRow(entry: LeaderboardEntry, index: number)} 44 44 + <div 45 45 + class="hover:bg-base-100 dark:hover:bg-base-800 accent:hover:bg-white/10 flex w-full items-center gap-3 rounded-lg px-2 py-1.5 transition-colors" 46 46 + > 47 47 + <div 48 48 + class="text-base-600 dark:text-base-400 accent:text-white/60 w-6 shrink-0 text-right text-xs font-medium" 49 49 + > 50 50 + #{index + 1} 51 51 + </div> 52 52 + <div class="min-w-0 flex-1"> 53 53 + <div class="inline-flex w-full max-w-full items-center justify-between gap-2"> 54 54 + <div 55 55 + class="text-accent-500 accent:text-accent-50 dark:text-accent-400 min-w-0 flex-1 shrink truncate text-sm font-semibold" 56 56 + > 57 57 + {getPackageName(entry)} 58 58 + </div> 59 59 + <div 60 60 + class="text-base-500 dark:text-base-400 accent:text-white/60 flex shrink-0 items-center gap-1 text-xs" 61 61 + > 62 62 + <svg 63 63 + xmlns="http://www.w3.org/2000/svg" 64 64 + viewBox="0 0 24 24" 65 65 + fill="currentColor" 66 66 + class="accent:text-accent-200 text-accent-400 size-3.5" 67 67 + > 68 68 + <path 69 69 + d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z" 70 70 + /> 71 71 + </svg> 72 72 + {entry.totalLikes} 73 73 + </div> 74 74 + </div> 75 75 + </div> 76 76 + </div> 77 77 + {/snippet} 78 78 + 79 79 + <div class="z-10 flex h-full w-full flex-col overflow-hidden"> 80 80 + {#if leaderboard && leaderboard.leaderBoard.length > 0} 81 81 + <div class="flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto p-4 pb-10"> 82 82 + {#each leaderboard.leaderBoard as entry, index (entry.subjectRef)} 83 83 + <a 84 84 + href="https://npmx.dev/package/{getPackageName(entry)}" 85 85 + target="_blank" 86 86 + rel="noopener noreferrer" 87 87 + class="w-full" 88 88 + > 89 89 + {@render leaderboardRow(entry, index)} 90 90 + </a> 91 91 + {/each} 92 92 + </div> 93 93 + <div 94 94 + class="from-base-200 dark:from-base-950 accent:from-accent-500 pointer-events-none absolute inset-x-0 bottom-0 z-10 h-12 bg-linear-to-t from-40% to-transparent" 95 95 + ></div> 96 96 + <div 97 97 + class="text-base-500 dark:text-base-400 accent:text-white/60 bg-base-200 dark:bg-base-950/50 accent:bg-accent-500/20 relative z-10 flex shrink-0 items-center justify-center gap-3 px-4 pb-3 text-xs" 98 98 + > 99 99 + <span>{leaderboard.totalLikes} likes</span> 100 100 + <span class="text-base-300 dark:text-base-600 accent:text-white/20">&middot;</span> 101 101 + <span>{leaderboard.totalUniqueLikers} unique likers</span> 102 102 + </div> 103 103 + {:else if leaderboard} 104 104 + <div 105 105 + class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center p-4 text-center text-sm" 106 106 + > 107 107 + No leaderboard data. 108 108 + </div> 109 109 + {:else} 110 110 + <div 111 111 + class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center p-4 text-center text-sm" 112 112 + > 113 113 + Loading leaderboard... 114 114 + </div> 115 115 + {/if} 116 116 + </div>

+26

src/lib/cards/social/NpmxLikesLeaderboardCard/index.ts

··· 1 1 + import type { CardDefinition } from '../../types'; 2 2 + import NpmxLikesLeaderboardCard from './NpmxLikesLeaderboardCard.svelte'; 3 3 + 4 4 + export const NpmxLikesLeaderboardCardDefinition = { 5 5 + type: 'npmxLikesLeaderboard', 6 6 + contentComponent: NpmxLikesLeaderboardCard, 7 7 + createNew: (card) => { 8 8 + card.w = 4; 9 9 + card.mobileW = 8; 10 10 + card.h = 4; 11 11 + card.mobileH = 6; 12 12 + }, 13 13 + loadData: async () => { 14 14 + const res = await fetch('https://blento.app/api/npmx-leaderboard'); 15 15 + const data = await res.json(); 16 16 + return data; 17 17 + }, 18 18 + minW: 3, 19 19 + canHaveLabel: true, 20 20 + 21 21 + keywords: ['npm', 'package', 'npmx', 'likes', 'leaderboard', 'ranking'], 22 22 + name: 'npmx Likes Leaderboard', 23 23 + 24 24 + //groups: ['Social'], 25 25 + 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="M16.5 18.75h-9m9 0a3 3 0 0 1 3 3h-15a3 3 0 0 1 3-3m9 0v-4.5A3.375 3.375 0 0 0 13.125 10.875h-2.25A3.375 3.375 0 0 0 7.5 14.25v4.5m6-6V6.375a3.375 3.375 0 0 0-3-3.353A3.375 3.375 0 0 0 7.5 6.375v1.5" /></svg>` 26 26 + } as CardDefinition & { type: 'npmxLikesLeaderboard' };

+4 -2

src/lib/cards/special/UpdatedBlentos/index.ts

··· 46 46 47 47 let result = [...(await Promise.all(profiles)), ...existingUsersArray]; 48 48 49 49 - result = result.filter((v) => v && v.handle !== 'handle.invalid'); 49 49 + result = result.filter( 50 50 + (v) => v && v.handle !== 'handle.invalid' && !v.handle.endsWith('.pds.rip') 51 51 + ); 50 52 51 53 if (cache) { 52 54 await cache?.put('updatedBlentos', JSON.stringify(result)); 53 55 } 54 54 - return JSON.parse(JSON.stringify(result)); 56 56 + return JSON.parse(JSON.stringify(result.slice(0, 20))); 55 57 } catch (error) { 56 58 console.error('error fetching updated blentos', error); 57 59 return [];

+86 -10

src/lib/cards/visual/FluidTextCard/FluidTextCard.svelte

··· 1 1 <script lang="ts"> 2 2 - import { colorToHue, getCSSVar, getHexOfCardColor } from '../../helper'; 2 2 + import { colorToHue, getHexCSSVar, getHexOfCardColor } from '../../helper'; 3 3 import type { ContentComponentProps } from '../../types'; 4 4 import { onMount, onDestroy, tick } from 'svelte'; 5 5 let { item }: ContentComponentProps = $props(); ··· 7 7 let container: HTMLDivElement; 8 8 let fluidCanvas: HTMLCanvasElement; 9 9 let maskCanvas: HTMLCanvasElement; 10 10 + let shadowCanvas: HTMLCanvasElement; 10 11 let animationId: number; 11 12 let splatIntervalId: ReturnType<typeof setInterval>; 12 13 let maskDrawRaf = 0; 13 14 let maskReady = false; 14 15 let isInitialized = $state(false); 15 16 let resizeObserver: ResizeObserver | null = null; 17 17 + let themeObserver: MutationObserver | null = null; 16 18 17 19 // Pure hash function for shader keyword caching 18 20 function hashCode(s: string) { ··· 122 124 if (width === 0 || height === 0) return; 123 125 124 126 const dpr = window.devicePixelRatio || 1; 127 127 + const isDark = document.documentElement.classList.contains('dark'); 128 128 + 129 129 + // Draw shadow behind fluid (light mode only, transparent only) 130 130 + if (shadowCanvas && item.color === 'transparent') { 131 131 + shadowCanvas.width = width * dpr; 132 132 + shadowCanvas.height = height * dpr; 133 133 + const shadowCtx = shadowCanvas.getContext('2d')!; 134 134 + shadowCtx.setTransform(1, 0, 0, 1, 0, 0); 135 135 + shadowCtx.clearRect(0, 0, shadowCanvas.width, shadowCanvas.height); 136 136 + shadowCtx.scale(dpr, dpr); 137 137 + 138 138 + const textFontSize = Math.round(width * fontSize); 139 139 + shadowCtx.font = `${fontWeight} ${textFontSize}px ${fontFamily}`; 140 140 + shadowCtx.textAlign = 'center'; 141 141 + 142 142 + const metrics = shadowCtx.measureText(text); 143 143 + let textY = height / 2; 144 144 + if ( 145 145 + metrics.actualBoundingBoxAscent !== undefined && 146 146 + metrics.actualBoundingBoxDescent !== undefined 147 147 + ) { 148 148 + shadowCtx.textBaseline = 'alphabetic'; 149 149 + textY = (height + metrics.actualBoundingBoxAscent - metrics.actualBoundingBoxDescent) / 2; 150 150 + } else { 151 151 + shadowCtx.textBaseline = 'middle'; 152 152 + } 153 153 + 154 154 + // Draw darkened text shape behind fluid 155 155 + shadowCtx.fillStyle = getHexCSSVar(isDark ? '--color-base-950' : '--color-base-200'); 156 156 + shadowCtx.fillText(text, width / 2, textY); 157 157 + } else if (shadowCanvas) { 158 158 + // Clear shadow canvas when not transparent 159 159 + shadowCanvas.width = 1; 160 160 + shadowCanvas.height = 1; 161 161 + } 125 162 126 163 maskCanvas.width = width * dpr; 127 164 maskCanvas.height = height * dpr; ··· 132 169 ctx.clearRect(0, 0, maskCanvas.width, maskCanvas.height); 133 170 ctx.scale(dpr, dpr); 134 171 135 135 - //const color = getCSSVar('--color-base-900'); 136 136 - 137 137 - ctx.fillStyle = 'black'; 172 172 + const bgColor = 173 173 + item.color === 'transparent' 174 174 + ? getHexCSSVar(isDark ? '--color-base-900' : '--color-base-50') 175 175 + : 'black'; 176 176 + ctx.fillStyle = bgColor; 138 177 ctx.fillRect(0, 0, width, height); 139 178 140 179 // Font size as percentage of container width 141 180 const textFontSize = Math.round(width * fontSize); 142 181 ctx.font = `${fontWeight} ${textFontSize}px ${fontFamily}`; 143 182 144 144 - ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)'; 145 145 - ctx.lineWidth = 2; 183 183 + ctx.lineWidth = 3; 146 184 ctx.textAlign = 'center'; 147 185 148 186 const metrics = ctx.measureText(text); ··· 157 195 ctx.textBaseline = 'middle'; 158 196 } 159 197 160 160 - ctx.strokeText(text, width / 2, textY); 198 198 + if (item.color === 'transparent') { 199 199 + // Partially cut out the stroke area so fluid shows through 200 200 + ctx.globalCompositeOperation = 'destination-out'; 201 201 + ctx.globalAlpha = 0.7; 202 202 + ctx.strokeStyle = 'white'; 203 203 + ctx.strokeText(text, width / 2, textY); 204 204 + ctx.globalAlpha = 1; 205 205 + ctx.globalCompositeOperation = 'source-over'; 206 206 + 207 207 + // Add overlay: brighten in dark mode, darken in light mode 208 208 + ctx.strokeStyle = isDark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.4)'; 209 209 + ctx.strokeText(text, width / 2, textY); 210 210 + } else { 211 211 + ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)'; 212 212 + ctx.strokeText(text, width / 2, textY); 213 213 + } 214 214 + 161 215 ctx.globalCompositeOperation = 'destination-out'; 162 216 ctx.fillText(text, width / 2, textY); 163 217 ctx.globalCompositeOperation = 'source-over'; ··· 214 268 if (isInitialized) scheduleMaskDraw(); 215 269 }); 216 270 } 271 271 + 272 272 + // Watch for dark mode changes to redraw mask with correct background 273 273 + if (item.color === 'transparent') { 274 274 + themeObserver = new MutationObserver(() => { 275 275 + if (isInitialized) scheduleMaskDraw(); 276 276 + }); 277 277 + themeObserver.observe(document.documentElement, { 278 278 + attributes: true, 279 279 + attributeFilter: ['class'] 280 280 + }); 281 281 + } 217 282 }); 218 283 219 284 onDestroy(() => { ··· 221 286 if (splatIntervalId) clearInterval(splatIntervalId); 222 287 if (maskDrawRaf) cancelAnimationFrame(maskDrawRaf); 223 288 if (resizeObserver) resizeObserver.disconnect(); 289 289 + if (themeObserver) themeObserver.disconnect(); 224 290 }); 225 291 226 292 function initFluidSimulation(startHue: number, endHue: number) { ··· 246 312 COLOR_UPDATE_SPEED: 10, 247 313 PAUSED: false, 248 314 BACK_COLOR: { r: 0, g: 0, b: 0 }, 249 249 - TRANSPARENT: false, 315 315 + TRANSPARENT: item.color === 'transparent', 250 316 BLOOM: false, 251 317 BLOOM_ITERATIONS: 8, 252 318 BLOOM_RESOLUTION: 256, ··· 1701 1767 } 1702 1768 </script> 1703 1769 1704 1704 - <div bind:this={container} class="relative h-full w-full overflow-hidden bg-black"> 1705 1705 - <canvas bind:this={fluidCanvas} class="absolute h-full w-full"></canvas> 1770 1770 + <div 1771 1771 + bind:this={container} 1772 1772 + class="relative h-full w-full overflow-hidden rounded-[inherit] {item.color === 'transparent' 1773 1773 + ? 'bg-base-50 dark:bg-base-900' 1774 1774 + : 'bg-black'}" 1775 1775 + > 1776 1776 + <canvas 1777 1777 + bind:this={shadowCanvas} 1778 1778 + class="absolute inset-0.5 h-[calc(100%-4px)] w-[calc(100%-4px)] rounded-[inherit]" 1779 1779 + ></canvas> 1780 1780 + <canvas bind:this={fluidCanvas} class="absolute inset-0.5 h-[calc(100%-4px)] w-[calc(100%-4px)]" 1781 1781 + ></canvas> 1706 1782 <canvas bind:this={maskCanvas} class="absolute h-full w-full"></canvas> 1707 1783 </div>

+180

src/lib/components/ImageGrid.svelte

··· 1 1 + <script lang="ts"> 2 2 + import { Tooltip } from 'bits-ui'; 3 3 + 4 4 + export type ImageGridItem = { 5 5 + imageUrl: string | null; 6 6 + link: string; 7 7 + label: string; 8 8 + }; 9 9 + 10 10 + let { 11 11 + items, 12 12 + layout = 'grid', 13 13 + shape = 'square', 14 14 + tooltip = false 15 15 + }: { 16 16 + items: ImageGridItem[]; 17 17 + layout?: 'grid' | 'cinema'; 18 18 + shape?: 'square' | 'circle'; 19 19 + tooltip?: boolean; 20 20 + } = $props(); 21 21 + 22 22 + let containerWidth = $state(0); 23 23 + let containerHeight = $state(0); 24 24 + 25 25 + let totalItems = $derived(items.length); 26 26 + 27 27 + const GAP = 6; 28 28 + const MIN_SIZE = 16; 29 29 + const MAX_SIZE = 120; 30 30 + 31 31 + function cinemaCapacity(size: number, availW: number, availH: number): number { 32 32 + const colsWide = Math.floor((availW + GAP) / (size + GAP)); 33 33 + if (colsWide < 1) return 0; 34 34 + const colsNarrow = Math.max(1, colsWide - 1); 35 35 + const maxRows = Math.floor((availH + GAP) / (size + GAP)); 36 36 + let capacity = 0; 37 37 + for (let r = 0; r < maxRows; r++) { 38 38 + capacity += r % 2 === 0 ? colsNarrow : colsWide; 39 39 + } 40 40 + return capacity; 41 41 + } 42 42 + 43 43 + function gridCapacity(size: number, availW: number, availH: number): number { 44 44 + const cols = Math.floor((availW + GAP) / (size + GAP)); 45 45 + const rows = Math.floor((availH + GAP) / (size + GAP)); 46 46 + return cols * rows; 47 47 + } 48 48 + 49 49 + let computedSize = $derived.by(() => { 50 50 + if (!containerWidth || !containerHeight || totalItems === 0) return 40; 51 51 + 52 52 + let lo = MIN_SIZE; 53 53 + let hi = MAX_SIZE; 54 54 + const capacityFn = layout === 'cinema' ? cinemaCapacity : gridCapacity; 55 55 + 56 56 + while (lo <= hi) { 57 57 + const mid = Math.floor((lo + hi) / 2); 58 58 + const availW = containerWidth - (layout === 'cinema' ? mid / 2 : 0); 59 59 + const availH = containerHeight - (layout === 'cinema' ? mid / 2 : 0); 60 60 + if (availW <= 0 || availH <= 0) { 61 61 + hi = mid - 1; 62 62 + continue; 63 63 + } 64 64 + if (capacityFn(mid, availW, availH) >= totalItems) { 65 65 + lo = mid + 1; 66 66 + } else { 67 67 + hi = mid - 1; 68 68 + } 69 69 + } 70 70 + 71 71 + return Math.max(MIN_SIZE, hi); 72 72 + }); 73 73 + 74 74 + let padding = $derived(layout === 'cinema' ? computedSize / 4 : 0); 75 75 + 76 76 + let rows = $derived.by(() => { 77 77 + const availW = containerWidth - (layout === 'cinema' ? computedSize / 4 : 0); 78 78 + if (availW <= 0) return [] as ImageGridItem[][]; 79 79 + 80 80 + const colsWide = Math.floor((availW + GAP) / (computedSize + GAP)); 81 81 + const colsNarrow = layout === 'cinema' ? Math.max(1, colsWide - 1) : colsWide; 82 82 + 83 83 + const rowSizes: number[] = []; 84 84 + let remaining = items.length; 85 85 + let rowNum = 0; 86 86 + while (remaining > 0) { 87 87 + const cols = layout === 'cinema' && rowNum % 2 === 0 ? colsNarrow : colsWide; 88 88 + rowSizes.push(Math.min(cols, remaining)); 89 89 + remaining -= cols; 90 90 + rowNum++; 91 91 + } 92 92 + rowSizes.reverse(); 93 93 + 94 94 + const result: ImageGridItem[][] = []; 95 95 + let idx = 0; 96 96 + for (const size of rowSizes) { 97 97 + result.push(items.slice(idx, idx + size)); 98 98 + idx += size; 99 99 + } 100 100 + return result; 101 101 + }); 102 102 + 103 103 + let textSize = $derived( 104 104 + computedSize < 24 ? 'text-[10px]' : computedSize < 40 ? 'text-xs' : 'text-sm' 105 105 + ); 106 106 + 107 107 + let shapeClass = $derived(shape === 'circle' ? 'rounded-full' : 'rounded-lg'); 108 108 + </script> 109 109 + 110 110 + {#snippet gridItem(item: ImageGridItem)} 111 111 + {#if item.imageUrl} 112 112 + <img 113 113 + src={item.imageUrl} 114 114 + alt={item.label} 115 115 + class="{shapeClass} object-cover" 116 116 + style="width: {computedSize}px; height: {computedSize}px;" 117 117 + /> 118 118 + {:else} 119 119 + <div 120 120 + class="bg-base-200 dark:bg-base-700 accent:bg-accent-400 flex items-center justify-center {shapeClass}" 121 121 + style="width: {computedSize}px; height: {computedSize}px;" 122 122 + > 123 123 + <span class="text-base-500 dark:text-base-400 accent:text-accent-100 {textSize} font-medium"> 124 124 + {item.label.charAt(0).toUpperCase()} 125 125 + </span> 126 126 + </div> 127 127 + {/if} 128 128 + {/snippet} 129 129 + 130 130 + <div 131 131 + class="flex h-full w-full items-center justify-center overflow-hidden px-2" 132 132 + bind:clientWidth={containerWidth} 133 133 + bind:clientHeight={containerHeight} 134 134 + > 135 135 + {#if totalItems > 0} 136 136 + <div style="padding: {padding}px;"> 137 137 + <div class="flex flex-col items-center" style="gap: {GAP}px;"> 138 138 + {#each rows as row, rowIdx (rowIdx)} 139 139 + <div class="flex justify-center" style="gap: {GAP}px;"> 140 140 + {#each row as item (item.link)} 141 141 + {#if tooltip} 142 142 + <Tooltip.Root> 143 143 + <Tooltip.Trigger> 144 144 + <a 145 145 + href={item.link} 146 146 + target="_blank" 147 147 + rel="noopener noreferrer" 148 148 + class="accent:ring-accent-500 block {shapeClass} ring-2 ring-white transition-transform hover:scale-110 dark:ring-neutral-900" 149 149 + > 150 150 + {@render gridItem(item)} 151 151 + </a> 152 152 + </Tooltip.Trigger> 153 153 + <Tooltip.Portal> 154 154 + <Tooltip.Content 155 155 + side="top" 156 156 + sideOffset={4} 157 157 + class="bg-base-900 dark:bg-base-800 text-base-100 z-50 rounded-lg px-3 py-1.5 text-xs font-medium shadow-md" 158 158 + > 159 159 + {item.label} 160 160 + </Tooltip.Content> 161 161 + </Tooltip.Portal> 162 162 + </Tooltip.Root> 163 163 + {:else} 164 164 + <a 165 165 + href={item.link} 166 166 + target="_blank" 167 167 + rel="noopener noreferrer" 168 168 + class="accent:ring-accent-500 block {shapeClass} ring-2 ring-white transition-transform hover:scale-110 dark:ring-neutral-900" 169 169 + title={item.label} 170 170 + > 171 171 + {@render gridItem(item)} 172 172 + </a> 173 173 + {/if} 174 174 + {/each} 175 175 + </div> 176 176 + {/each} 177 177 + </div> 178 178 + </div> 179 179 + {/if} 180 180 + </div>

+28 -5

src/lib/components/qr/qrOverlay.svelte.ts

··· 18 18 const LONG_PRESS_DURATION = 500; 19 19 let longPressTimer: ReturnType<typeof setTimeout> | null = null; 20 20 let isLongPress = false; 21 21 + let touchActive = false; 22 22 + 23 23 + // Prevent iOS link preview on long-press 24 24 + const originalCallout = node.style.getPropertyValue('-webkit-touch-callout'); 25 25 + node.style.setProperty('-webkit-touch-callout', 'none'); 21 26 22 27 function getHref() { 23 28 return params.href || (node as HTMLAnchorElement).href || ''; 24 29 } 25 30 26 26 - function startLongPress() { 31 31 + function startLongPress(e: PointerEvent) { 27 32 if (params.disabled) return; 33 33 + // Only start long press for primary button (touch/left-click), not right-click 34 34 + if (e.button !== 0) return; 35 35 + touchActive = e.pointerType === 'touch'; 28 36 isLongPress = false; 29 37 longPressTimer = setTimeout(() => { 30 38 isLongPress = true; ··· 37 45 clearTimeout(longPressTimer); 38 46 longPressTimer = null; 39 47 } 48 48 + touchActive = false; 40 49 } 41 50 42 51 function handleClick(e: MouseEvent) { 43 52 if (isLongPress) { 44 53 e.preventDefault(); 45 54 isLongPress = false; 55 55 + return; 56 56 + } 57 57 + 58 58 + // Shift-click opens QR modal 59 59 + if (e.shiftKey && !params.disabled) { 60 60 + e.preventDefault(); 61 61 + openModal?.(getHref(), params.context ?? {}); 46 62 } 47 63 } 48 64 49 49 - function handleContextMenu(e: MouseEvent) { 50 50 - if (params.disabled) return; 51 51 - e.preventDefault(); 52 52 - openModal?.(getHref(), params.context ?? {}); 65 65 + function handleContextMenu(e: Event) { 66 66 + // Prevent context menu during touch to avoid iOS preview 67 67 + if (touchActive || isLongPress) { 68 68 + e.preventDefault(); 69 69 + } 53 70 } 54 71 55 72 node.addEventListener('pointerdown', startLongPress); ··· 71 88 node.removeEventListener('click', handleClick); 72 89 node.removeEventListener('contextmenu', handleContextMenu); 73 90 cancelLongPress(); 91 91 + // Restore original style 92 92 + if (originalCallout) { 93 93 + node.style.setProperty('-webkit-touch-callout', originalCallout); 94 94 + } else { 95 95 + node.style.removeProperty('-webkit-touch-callout'); 96 96 + } 74 97 } 75 98 }; 76 99 }

+9 -353

src/lib/helper.ts

··· 3 3 import { CardDefinitionsByType } from './cards'; 4 4 import { deleteRecord, getCDNImageBlobUrl, putRecord, uploadBlob } from '$lib/atproto'; 5 5 import * as TID from '@atcute/tid'; 6 6 - 7 6 export function clamp(value: number, min: number, max: number): number { 8 7 return Math.min(Math.max(value, min), max); 9 8 } ··· 28 27 'bg-rose-500' 29 28 ]; 30 29 31 31 - export const overlaps = (a: Item, b: Item, mobile: boolean = false) => { 32 32 - if (a === b) return false; 33 33 - if (mobile) { 34 34 - return ( 35 35 - a.mobileX < b.mobileX + b.mobileW && 36 36 - a.mobileX + a.mobileW > b.mobileX && 37 37 - a.mobileY < b.mobileY + b.mobileH && 38 38 - a.mobileY + a.mobileH > b.mobileY 39 39 - ); 40 40 - } 41 41 - return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y; 42 42 - }; 43 43 - 44 44 - export function fixCollisions( 45 45 - items: Item[], 46 46 - movedItem: Item, 47 47 - mobile: boolean = false, 48 48 - skipCompact: boolean = false 49 49 - ) { 50 50 - const clampX = (item: Item) => { 51 51 - if (mobile) item.mobileX = clamp(item.mobileX, 0, COLUMNS - item.mobileW); 52 52 - else item.x = clamp(item.x, 0, COLUMNS - item.w); 53 53 - }; 54 54 - 55 55 - // Push `target` down until it no longer overlaps with any item (including movedItem), 56 56 - // while keeping target.x fixed. Any item we collide with gets pushed down first (cascade). 57 57 - const pushDownCascade = (target: Item, blocker: Item) => { 58 58 - // Keep x fixed always when pushing down 59 59 - const fixedX = mobile ? target.mobileX : target.x; 60 60 - const prevY = mobile ? target.mobileY : target.y; 61 61 - 62 62 - // We need target to move just below `blocker` 63 63 - const desiredY = mobile ? blocker.mobileY + blocker.mobileH : blocker.y + blocker.h; 64 64 - if (!mobile && target.y < desiredY) target.y = desiredY; 65 65 - if (mobile && target.mobileY < desiredY) target.mobileY = desiredY; 66 66 - 67 67 - const newY = mobile ? target.mobileY : target.y; 68 68 - const targetH = mobile ? target.mobileH : target.h; 69 69 - 70 70 - // fall trough fix 71 71 - if (newY > prevY) { 72 72 - const prevBottom = prevY + targetH; 73 73 - const newBottom = newY + targetH; 74 74 - for (const it of items) { 75 75 - if (it === target || it === movedItem || it === blocker) continue; 76 76 - const itY = mobile ? it.mobileY : it.y; 77 77 - const itH = mobile ? it.mobileH : it.h; 78 78 - const itBottom = itY + itH; 79 79 - if (itBottom <= prevBottom || itY >= newBottom) continue; 80 80 - // horizontal overlap check 81 81 - const hOverlap = mobile 82 82 - ? target.mobileX < it.mobileX + it.mobileW && target.mobileX + target.mobileW > it.mobileX 83 83 - : target.x < it.x + it.w && target.x + target.w > it.x; 84 84 - if (hOverlap) { 85 85 - pushDownCascade(it, target); 86 86 - } 87 87 - } 88 88 - } 89 89 - 90 90 - // Now resolve any collisions that creates by pushing those items down first 91 91 - // Repeat until target is clean. 92 92 - while (true) { 93 93 - const hit = items.find((it) => it !== target && overlaps(target, it, mobile)); 94 94 - if (!hit) break; 95 95 - 96 96 - // push the hit item down first (cascade), keeping its x fixed 97 97 - pushDownCascade(hit, target); 98 98 - 99 99 - // after moving the hit item, target.x must remain fixed 100 100 - if (mobile) target.mobileX = fixedX; 101 101 - else target.x = fixedX; 102 102 - } 103 103 - }; 104 104 - 105 105 - // Ensure moved item is in bounds 106 106 - clampX(movedItem); 107 107 - 108 108 - // Find all items colliding with movedItem, and push them down in a stable order: 109 109 - // top-to-bottom so you get the nice chain reaction (0,0 -> 0,1 -> 0,2). 110 110 - const colliders = items 111 111 - .filter((it) => it !== movedItem && overlaps(movedItem, it, mobile)) 112 112 - .toSorted((a, b) => 113 113 - mobile ? a.mobileY - b.mobileY || a.mobileX - b.mobileX : a.y - b.y || a.x - b.x 114 114 - ); 115 115 - 116 116 - for (const it of colliders) { 117 117 - // keep x clamped, but do NOT change x during push (we rely on fixed x) 118 118 - clampX(it); 119 119 - 120 120 - // push it down just below movedItem; cascade handles the rest 121 121 - pushDownCascade(it, movedItem); 122 122 - 123 123 - // enforce "x stays the same" during pushing (clamp already applied) 124 124 - if (mobile) it.mobileX = clamp(it.mobileX, 0, COLUMNS - it.mobileW); 125 125 - else it.x = clamp(it.x, 0, COLUMNS - it.w); 126 126 - } 127 127 - 128 128 - if (!skipCompact) { 129 129 - compactItems(items, mobile); 130 130 - } 131 131 - } 132 132 - 133 133 - // Fix all collisions between items (not just one moved item) 134 134 - // Items higher on the page have priority and stay in place 135 135 - export function fixAllCollisions(items: Item[], mobile: boolean = false) { 136 136 - // Sort by Y position (top-to-bottom, then left-to-right) 137 137 - // Items at the top have priority and won't be moved 138 138 - const sortedItems = items.toSorted((a, b) => 139 139 - mobile ? a.mobileY - b.mobileY || a.mobileX - b.mobileX : a.y - b.y || a.x - b.x 140 140 - ); 141 141 - 142 142 - // Process each item and push it down if it overlaps with any item above it 143 143 - for (let i = 0; i < sortedItems.length; i++) { 144 144 - const item = sortedItems[i]; 145 145 - 146 146 - // Clamp X to valid range 147 147 - if (mobile) { 148 148 - item.mobileX = clamp(item.mobileX, 0, COLUMNS - item.mobileW); 149 149 - } else { 150 150 - item.x = clamp(item.x, 0, COLUMNS - item.w); 151 151 - } 152 152 - 153 153 - // Check for collisions with all items that come before (higher priority) 154 154 - let hasCollision = true; 155 155 - while (hasCollision) { 156 156 - hasCollision = false; 157 157 - for (let j = 0; j < i; j++) { 158 158 - const other = sortedItems[j]; 159 159 - if (overlaps(item, other, mobile)) { 160 160 - // Push item down below the colliding item 161 161 - if (mobile) { 162 162 - item.mobileY = other.mobileY + other.mobileH; 163 163 - } else { 164 164 - item.y = other.y + other.h; 165 165 - } 166 166 - hasCollision = true; 167 167 - break; // Restart collision check from the beginning 168 168 - } 169 169 - } 170 170 - } 171 171 - } 172 172 - 173 173 - compactItems(items, mobile); 174 174 - } 175 175 - 176 176 - // Move all items up as far as possible without collisions 177 177 - export function compactItems(items: Item[], mobile: boolean = false) { 178 178 - // Sort by Y position (top-to-bottom) so upper items settle first. 179 179 - const sortedItems = items.toSorted((a, b) => 180 180 - mobile ? a.mobileY - b.mobileY || a.mobileX - b.mobileX : a.y - b.y || a.x - b.x 181 181 - ); 182 182 - 183 183 - for (const item of sortedItems) { 184 184 - // Try moving item up row by row until we hit y=0 or a collision 185 185 - while (true) { 186 186 - const currentY = mobile ? item.mobileY : item.y; 187 187 - if (currentY <= 0) break; 188 188 - 189 189 - // Temporarily move up by 1 190 190 - if (mobile) item.mobileY -= 1; 191 191 - else item.y -= 1; 192 192 - 193 193 - // Check for collision with any other item 194 194 - const hasCollision = items.some((other) => other !== item && overlaps(item, other, mobile)); 195 195 - 196 196 - if (hasCollision) { 197 197 - // Revert the move 198 198 - if (mobile) item.mobileY += 1; 199 199 - else item.y += 1; 200 200 - break; 201 201 - } 202 202 - // No collision, keep the new position and try moving up again 203 203 - } 204 204 - } 205 205 - } 206 206 - 207 207 - // Simulate where an item would end up after fixCollisions + compaction 208 208 - export function simulateFinalPosition( 209 209 - items: Item[], 210 210 - movedItem: Item, 211 211 - newX: number, 212 212 - newY: number, 213 213 - mobile: boolean = false 214 214 - ): { x: number; y: number } { 215 215 - // Deep clone positions for simulation 216 216 - const clonedItems: Item[] = items.map((item) => ({ 217 217 - ...item, 218 218 - x: item.x, 219 219 - y: item.y, 220 220 - mobileX: item.mobileX, 221 221 - mobileY: item.mobileY 222 222 - })); 223 223 - 224 224 - const clonedMovedItem = clonedItems.find((item) => item.id === movedItem.id); 225 225 - if (!clonedMovedItem) return { x: newX, y: newY }; 226 226 - 227 227 - // Set the new position 228 228 - if (mobile) { 229 229 - clonedMovedItem.mobileX = newX; 230 230 - clonedMovedItem.mobileY = newY; 231 231 - } else { 232 232 - clonedMovedItem.x = newX; 233 233 - clonedMovedItem.y = newY; 234 234 - } 235 235 - 236 236 - // Run fixCollisions on the cloned data 237 237 - fixCollisions(clonedItems, clonedMovedItem, mobile); 238 238 - 239 239 - // Return the final position of the moved item 240 240 - return mobile 241 241 - ? { x: clonedMovedItem.mobileX, y: clonedMovedItem.mobileY } 242 242 - : { x: clonedMovedItem.x, y: clonedMovedItem.y }; 243 243 - } 244 244 - 245 30 export function sortItems(a: Item, b: Item) { 246 31 return a.y * COLUMNS + a.x - b.y * COLUMNS - b.x; 247 32 } ··· 264 49 ); 265 50 } 266 51 267 267 - export function setPositionOfNewItem( 268 268 - newItem: Item, 269 269 - items: Item[], 270 270 - viewportCenter?: { gridY: number; isMobile: boolean } 271 271 - ) { 272 272 - if (viewportCenter) { 273 273 - const { gridY, isMobile } = viewportCenter; 274 274 - 275 275 - if (isMobile) { 276 276 - // Place at viewport center Y 277 277 - newItem.mobileY = Math.max(0, Math.round(gridY - newItem.mobileH / 2)); 278 278 - newItem.mobileY = Math.floor(newItem.mobileY / 2) * 2; 279 279 - 280 280 - // Try to find a free X at this Y 281 281 - let found = false; 282 282 - for ( 283 283 - newItem.mobileX = 0; 284 284 - newItem.mobileX <= COLUMNS - newItem.mobileW; 285 285 - newItem.mobileX += 2 286 286 - ) { 287 287 - if (!items.some((item) => overlaps(newItem, item, true))) { 288 288 - found = true; 289 289 - break; 290 290 - } 291 291 - } 292 292 - if (!found) { 293 293 - newItem.mobileX = 0; 294 294 - } 295 295 - 296 296 - // Desktop: derive from mobile 297 297 - newItem.y = Math.max(0, Math.round(newItem.mobileY / 2)); 298 298 - found = false; 299 299 - for (newItem.x = 0; newItem.x <= COLUMNS - newItem.w; newItem.x += 2) { 300 300 - if (!items.some((item) => overlaps(newItem, item, false))) { 301 301 - found = true; 302 302 - break; 303 303 - } 304 304 - } 305 305 - if (!found) { 306 306 - newItem.x = 0; 307 307 - } 308 308 - } else { 309 309 - // Place at viewport center Y 310 310 - newItem.y = Math.max(0, Math.round(gridY - newItem.h / 2)); 311 311 - 312 312 - // Try to find a free X at this Y 313 313 - let found = false; 314 314 - for (newItem.x = 0; newItem.x <= COLUMNS - newItem.w; newItem.x += 2) { 315 315 - if (!items.some((item) => overlaps(newItem, item, false))) { 316 316 - found = true; 317 317 - break; 318 318 - } 319 319 - } 320 320 - if (!found) { 321 321 - newItem.x = 0; 322 322 - } 323 323 - 324 324 - // Mobile: derive from desktop 325 325 - newItem.mobileY = Math.max(0, Math.round(newItem.y * 2)); 326 326 - found = false; 327 327 - for ( 328 328 - newItem.mobileX = 0; 329 329 - newItem.mobileX <= COLUMNS - newItem.mobileW; 330 330 - newItem.mobileX += 2 331 331 - ) { 332 332 - if (!items.some((item) => overlaps(newItem, item, true))) { 333 333 - found = true; 334 334 - break; 335 335 - } 336 336 - } 337 337 - if (!found) { 338 338 - newItem.mobileX = 0; 339 339 - } 340 340 - } 341 341 - return; 342 342 - } 343 343 - 344 344 - let foundPosition = false; 345 345 - while (!foundPosition) { 346 346 - for (newItem.x = 0; newItem.x <= COLUMNS - newItem.w; newItem.x++) { 347 347 - const collision = items.find((item) => overlaps(newItem, item)); 348 348 - if (!collision) { 349 349 - foundPosition = true; 350 350 - break; 351 351 - } 352 352 - } 353 353 - if (!foundPosition) newItem.y += 1; 354 354 - } 355 355 - 356 356 - let foundMobilePosition = false; 357 357 - while (!foundMobilePosition) { 358 358 - for (newItem.mobileX = 0; newItem.mobileX <= COLUMNS - newItem.mobileW; newItem.mobileX += 1) { 359 359 - const collision = items.find((item) => overlaps(newItem, item, true)); 360 360 - 361 361 - if (!collision) { 362 362 - foundMobilePosition = true; 363 363 - break; 364 364 - } 365 365 - } 366 366 - if (!foundMobilePosition) newItem.mobileY! += 1; 367 367 - } 368 368 - } 369 369 - 370 370 - /** 371 371 - * Find a valid position for a new item in a single mode (desktop or mobile). 372 372 - * This modifies the item's position properties in-place. 373 373 - */ 374 374 - export function findValidPosition(newItem: Item, items: Item[], mobile: boolean) { 375 375 - if (mobile) { 376 376 - let foundPosition = false; 377 377 - newItem.mobileY = 0; 378 378 - while (!foundPosition) { 379 379 - for (newItem.mobileX = 0; newItem.mobileX <= COLUMNS - newItem.mobileW; newItem.mobileX++) { 380 380 - const collision = items.find((item) => overlaps(newItem, item, true)); 381 381 - if (!collision) { 382 382 - foundPosition = true; 383 383 - break; 384 384 - } 385 385 - } 386 386 - if (!foundPosition) newItem.mobileY! += 1; 387 387 - } 388 388 - } else { 389 389 - let foundPosition = false; 390 390 - newItem.y = 0; 391 391 - while (!foundPosition) { 392 392 - for (newItem.x = 0; newItem.x <= COLUMNS - newItem.w; newItem.x++) { 393 393 - const collision = items.find((item) => overlaps(newItem, item, false)); 394 394 - if (!collision) { 395 395 - foundPosition = true; 396 396 - break; 397 397 - } 398 398 - } 399 399 - if (!foundPosition) newItem.y += 1; 400 400 - } 401 401 - } 402 402 - } 403 403 - 404 52 export async function refreshData(data: { updatedAt?: number; handle: string }) { 405 53 const TEN_MINUTES = 10 * 60 * 1000; 406 54 const now = Date.now(); ··· 553 201 originalPublication: string 554 202 ) { 555 203 const promises = []; 204 204 + 205 205 + // Build a lookup of original cards by ID for O(1) access 206 206 + const originalCardsById = new Map<string, Item>(); 207 207 + for (const card of data.cards) { 208 208 + originalCardsById.set(card.id, card); 209 209 + } 210 210 + 556 211 // find all cards that have been updated (where items differ from originalItems) 557 212 for (let item of currentItems) { 558 558 - const originalItem = data.cards.find((i) => cardsEqual(i, item)); 213 213 + const orig = originalCardsById.get(item.id); 214 214 + const originalItem = orig && cardsEqual(orig, item) ? orig : undefined; 559 215 560 216 if (!originalItem) { 561 217 console.log('updated or new item', item);

+398

src/lib/layout/EditableGrid.svelte

··· 1 1 + <script lang="ts"> 2 2 + import type { Snippet } from 'svelte'; 3 3 + import type { Item } from '$lib/types'; 4 4 + import { getGridPosition, pixelToGrid, type DragState, type GridPosition } from './grid'; 5 5 + import { fixCollisions } from './algorithms'; 6 6 + 7 7 + let { 8 8 + items = $bindable(), 9 9 + isMobile, 10 10 + selectedCardId, 11 11 + isCoarse, 12 12 + children, 13 13 + ref = $bindable<HTMLDivElement | undefined>(undefined), 14 14 + onlayoutchange, 15 15 + ondeselect, 16 16 + onfiledrop 17 17 + }: { 18 18 + items: Item[]; 19 19 + isMobile: boolean; 20 20 + selectedCardId: string | null; 21 21 + isCoarse: boolean; 22 22 + children: Snippet; 23 23 + ref?: HTMLDivElement | undefined; 24 24 + onlayoutchange: () => void; 25 25 + ondeselect: () => void; 26 26 + onfiledrop?: (files: File[], gridX: number, gridY: number) => void; 27 27 + } = $props(); 28 28 + 29 29 + // Internal container ref (synced with bindable ref) 30 30 + let container: HTMLDivElement | undefined = $state(); 31 31 + $effect(() => { 32 32 + ref = container; 33 33 + }); 34 34 + 35 35 + const getY = (item: Item) => (isMobile ? (item.mobileY ?? item.y) : item.y); 36 36 + const getH = (item: Item) => (isMobile ? (item.mobileH ?? item.h) : item.h); 37 37 + let maxHeight = $derived(items.reduce((max, item) => Math.max(max, getY(item) + getH(item)), 0)); 38 38 + 39 39 + // --- Drag state --- 40 40 + type Phase = 'idle' | 'pending' | 'active'; 41 41 + 42 42 + let phase: Phase = $state('idle'); 43 43 + let pointerId: number = $state(0); 44 44 + let startClientX = $state(0); 45 45 + let startClientY = $state(0); 46 46 + 47 47 + let dragState: DragState = $state({ 48 48 + item: null as unknown as Item, 49 49 + mouseDeltaX: 0, 50 50 + mouseDeltaY: 0, 51 51 + originalPositions: new Map(), 52 52 + lastTargetId: null, 53 53 + lastPlacement: null 54 54 + }); 55 55 + 56 56 + let lastGridPos: GridPosition | null = $state(null); 57 57 + 58 58 + // Ref to the dragged card DOM element (for visual feedback) 59 59 + let draggedCardEl: HTMLElement | null = null; 60 60 + 61 61 + // --- File drag state --- 62 62 + let fileDragOver = $state(false); 63 63 + 64 64 + // --- Pointer event handlers --- 65 65 + 66 66 + function handlePointerDown(e: PointerEvent) { 67 67 + if (phase !== 'idle') return; 68 68 + 69 69 + const cardEl = (e.target as HTMLElement)?.closest?.('.card') as HTMLDivElement | null; 70 70 + if (!cardEl) return; 71 71 + 72 72 + // On touch devices, only drag the selected card 73 73 + if (e.pointerType === 'touch' && cardEl.id !== selectedCardId) return; 74 74 + 75 75 + // On mouse, don't intercept interactive elements 76 76 + if (e.pointerType === 'mouse') { 77 77 + const tag = (e.target as HTMLElement)?.tagName; 78 78 + if ( 79 79 + tag === 'BUTTON' || 80 80 + tag === 'INPUT' || 81 81 + tag === 'TEXTAREA' || 82 82 + (e.target as HTMLElement)?.isContentEditable 83 83 + ) { 84 84 + return; 85 85 + } 86 86 + } 87 87 + 88 88 + const item = items.find((i) => i.id === cardEl.id); 89 89 + if (!item || item.cardData?.locked) return; 90 90 + 91 91 + phase = 'pending'; 92 92 + pointerId = e.pointerId; 93 93 + startClientX = e.clientX; 94 94 + startClientY = e.clientY; 95 95 + draggedCardEl = cardEl; 96 96 + 97 97 + // Pre-compute mouse delta from card rect 98 98 + const rect = cardEl.getBoundingClientRect(); 99 99 + dragState.item = item; 100 100 + dragState.mouseDeltaX = rect.left - e.clientX; 101 101 + dragState.mouseDeltaY = rect.top - e.clientY; 102 102 + 103 103 + document.addEventListener('pointermove', handlePointerMove); 104 104 + document.addEventListener('pointerup', handlePointerUp); 105 105 + document.addEventListener('pointercancel', handlePointerCancel); 106 106 + } 107 107 + 108 108 + function activateDrag(e: PointerEvent) { 109 109 + phase = 'active'; 110 110 + 111 111 + try { 112 112 + (e.target as HTMLElement)?.setPointerCapture?.(pointerId); 113 113 + } catch { 114 114 + // setPointerCapture can throw if pointer is already released 115 115 + } 116 116 + 117 117 + // Visual feedback: lift the dragged card 118 118 + draggedCardEl?.classList.add('dragging'); 119 119 + 120 120 + // Store original positions of all items 121 121 + dragState.originalPositions = new Map(); 122 122 + for (const it of items) { 123 123 + dragState.originalPositions.set(it.id, { 124 124 + x: it.x, 125 125 + y: it.y, 126 126 + mobileX: it.mobileX, 127 127 + mobileY: it.mobileY 128 128 + }); 129 129 + } 130 130 + dragState.lastTargetId = null; 131 131 + dragState.lastPlacement = null; 132 132 + 133 133 + document.body.style.userSelect = 'none'; 134 134 + } 135 135 + 136 136 + function handlePointerMove(e: PointerEvent) { 137 137 + if (!container) return; 138 138 + 139 139 + if (phase === 'pending') { 140 140 + // Check 3px threshold 141 141 + const dx = e.clientX - startClientX; 142 142 + const dy = e.clientY - startClientY; 143 143 + if (dx * dx + dy * dy < 9) return; 144 144 + activateDrag(e); 145 145 + } 146 146 + 147 147 + if (phase !== 'active') return; 148 148 + 149 149 + // Auto-scroll near edges 150 150 + const scrollZone = 100; 151 151 + const scrollSpeed = 10; 152 152 + const viewportHeight = window.innerHeight; 153 153 + 154 154 + if (e.clientY < scrollZone) { 155 155 + const intensity = 1 - e.clientY / scrollZone; 156 156 + window.scrollBy(0, -scrollSpeed * intensity); 157 157 + } else if (e.clientY > viewportHeight - scrollZone) { 158 158 + const intensity = 1 - (viewportHeight - e.clientY) / scrollZone; 159 159 + window.scrollBy(0, scrollSpeed * intensity); 160 160 + } 161 161 + 162 162 + const result = getGridPosition(e.clientX, e.clientY, container, dragState, items, isMobile); 163 163 + if (!result || !dragState.item) return; 164 164 + 165 165 + // Skip redundant work if grid position hasn't changed 166 166 + if ( 167 167 + lastGridPos && 168 168 + lastGridPos.x === result.x && 169 169 + lastGridPos.y === result.y && 170 170 + lastGridPos.swapWithId === result.swapWithId && 171 171 + lastGridPos.placement === result.placement 172 172 + ) { 173 173 + return; 174 174 + } 175 175 + lastGridPos = result; 176 176 + 177 177 + const draggedOrigPos = dragState.originalPositions.get(dragState.item.id); 178 178 + 179 179 + // Reset all items to original positions first 180 180 + for (const it of items) { 181 181 + const origPos = dragState.originalPositions.get(it.id); 182 182 + if (origPos && it !== dragState.item) { 183 183 + if (isMobile) { 184 184 + it.mobileX = origPos.mobileX; 185 185 + it.mobileY = origPos.mobileY; 186 186 + } else { 187 187 + it.x = origPos.x; 188 188 + it.y = origPos.y; 189 189 + } 190 190 + } 191 191 + } 192 192 + 193 193 + // Update dragged item position 194 194 + if (isMobile) { 195 195 + dragState.item.mobileX = result.x; 196 196 + dragState.item.mobileY = result.y; 197 197 + } else { 198 198 + dragState.item.x = result.x; 199 199 + dragState.item.y = result.y; 200 200 + } 201 201 + 202 202 + // Handle horizontal swap 203 203 + if (result.swapWithId && draggedOrigPos) { 204 204 + const swapTarget = items.find((it) => it.id === result.swapWithId); 205 205 + if (swapTarget) { 206 206 + if (isMobile) { 207 207 + swapTarget.mobileX = draggedOrigPos.mobileX; 208 208 + swapTarget.mobileY = draggedOrigPos.mobileY; 209 209 + } else { 210 210 + swapTarget.x = draggedOrigPos.x; 211 211 + swapTarget.y = draggedOrigPos.y; 212 212 + } 213 213 + } 214 214 + } 215 215 + 216 216 + fixCollisions( 217 217 + items, 218 218 + dragState.item, 219 219 + isMobile, 220 220 + false, 221 221 + draggedOrigPos 222 222 + ? { 223 223 + x: isMobile ? draggedOrigPos.mobileX : draggedOrigPos.x, 224 224 + y: isMobile ? draggedOrigPos.mobileY : draggedOrigPos.y 225 225 + } 226 226 + : undefined 227 227 + ); 228 228 + } 229 229 + 230 230 + function handlePointerUp() { 231 231 + if (phase === 'active' && dragState.item) { 232 232 + fixCollisions(items, dragState.item, isMobile); 233 233 + onlayoutchange(); 234 234 + } 235 235 + cleanup(); 236 236 + } 237 237 + 238 238 + function handlePointerCancel() { 239 239 + if (phase === 'active') { 240 240 + // Restore all items to original positions 241 241 + for (const it of items) { 242 242 + const origPos = dragState.originalPositions.get(it.id); 243 243 + if (origPos) { 244 244 + it.x = origPos.x; 245 245 + it.y = origPos.y; 246 246 + it.mobileX = origPos.mobileX; 247 247 + it.mobileY = origPos.mobileY; 248 248 + } 249 249 + } 250 250 + } 251 251 + cleanup(); 252 252 + } 253 253 + 254 254 + function cleanup() { 255 255 + draggedCardEl?.classList.remove('dragging'); 256 256 + draggedCardEl = null; 257 257 + phase = 'idle'; 258 258 + lastGridPos = null; 259 259 + document.body.style.userSelect = ''; 260 260 + 261 261 + document.removeEventListener('pointermove', handlePointerMove); 262 262 + document.removeEventListener('pointerup', handlePointerUp); 263 263 + document.removeEventListener('pointercancel', handlePointerCancel); 264 264 + } 265 265 + 266 266 + // Ensure cleanup on unmount 267 267 + $effect(() => { 268 268 + return () => { 269 269 + if (phase !== 'idle') cleanup(); 270 270 + }; 271 271 + }); 272 272 + 273 273 + // For touch: register non-passive touchstart to prevent scroll when touching selected card 274 274 + $effect(() => { 275 275 + if (!container || !selectedCardId) return; 276 276 + container.addEventListener('touchstart', handleTouchStart, { passive: false }); 277 277 + return () => { 278 278 + container?.removeEventListener('touchstart', handleTouchStart); 279 279 + }; 280 280 + }); 281 281 + 282 282 + // For touch: register non-passive touchmove to prevent scroll during active drag 283 283 + $effect(() => { 284 284 + if (phase !== 'active' || !container) return; 285 285 + function preventTouch(e: TouchEvent) { 286 286 + e.preventDefault(); 287 287 + } 288 288 + container.addEventListener('touchmove', preventTouch, { passive: false }); 289 289 + return () => { 290 290 + container?.removeEventListener('touchmove', preventTouch); 291 291 + }; 292 292 + }); 293 293 + 294 294 + function handleClick(e: MouseEvent) { 295 295 + // Deselect when tapping empty grid space 296 296 + if (e.target === e.currentTarget || !(e.target as HTMLElement)?.closest?.('.card')) { 297 297 + ondeselect(); 298 298 + } 299 299 + } 300 300 + 301 301 + function handleTouchStart(e: TouchEvent) { 302 302 + // On touch, prevent scrolling when touching the selected card 303 303 + // This must happen on touchstart (not pointerdown) to claim the gesture 304 304 + const cardEl = (e.target as HTMLElement)?.closest?.('.card') as HTMLElement | null; 305 305 + if (cardEl && cardEl.id === selectedCardId) { 306 306 + const item = items.find((i) => i.id === cardEl.id); 307 307 + if (item && !item.cardData?.locked) { 308 308 + e.preventDefault(); 309 309 + } 310 310 + } 311 311 + } 312 312 + 313 313 + // --- File drop handlers --- 314 314 + 315 315 + function hasImageFile(dt: DataTransfer): boolean { 316 316 + if (dt.items) { 317 317 + for (let i = 0; i < dt.items.length; i++) { 318 318 + const item = dt.items[i]; 319 319 + if (item && item.kind === 'file' && item.type.startsWith('image/')) { 320 320 + return true; 321 321 + } 322 322 + } 323 323 + } else if (dt.files) { 324 324 + for (let i = 0; i < dt.files.length; i++) { 325 325 + const file = dt.files[i]; 326 326 + if (file?.type.startsWith('image/')) { 327 327 + return true; 328 328 + } 329 329 + } 330 330 + } 331 331 + return false; 332 332 + } 333 333 + 334 334 + function handleFileDragOver(event: DragEvent) { 335 335 + const dt = event.dataTransfer; 336 336 + if (!dt) return; 337 337 + 338 338 + if (hasImageFile(dt)) { 339 339 + event.preventDefault(); 340 340 + event.stopPropagation(); 341 341 + fileDragOver = true; 342 342 + } 343 343 + } 344 344 + 345 345 + function handleFileDragLeave(event: DragEvent) { 346 346 + event.preventDefault(); 347 347 + event.stopPropagation(); 348 348 + fileDragOver = false; 349 349 + } 350 350 + 351 351 + function handleFileDrop(event: DragEvent) { 352 352 + event.preventDefault(); 353 353 + event.stopPropagation(); 354 354 + fileDragOver = false; 355 355 + 356 356 + if (!event.dataTransfer?.files?.length || !onfiledrop || !container) return; 357 357 + 358 358 + const imageFiles = Array.from(event.dataTransfer.files).filter((f) => 359 359 + f?.type.startsWith('image/') 360 360 + ); 361 361 + if (imageFiles.length === 0) return; 362 362 + 363 363 + const cardW = isMobile ? 4 : 2; 364 364 + const { gridX, gridY } = pixelToGrid(event.clientX, event.clientY, container, isMobile, cardW); 365 365 + 366 366 + onfiledrop(imageFiles, gridX, gridY); 367 367 + } 368 368 + </script> 369 369 + 370 370 + <svelte:window 371 371 + ondragover={handleFileDragOver} 372 372 + ondragleave={handleFileDragLeave} 373 373 + ondrop={handleFileDrop} 374 374 + /> 375 375 + 376 376 + <!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events --> 377 377 + <div 378 378 + bind:this={container} 379 379 + onpointerdown={handlePointerDown} 380 380 + onclick={handleClick} 381 381 + ondragstart={(e) => e.preventDefault()} 382 382 + class={[ 383 383 + '@container/grid pointer-events-auto relative col-span-3 rounded-4xl px-2 py-8 @5xl/wrapper:px-8', 384 384 + fileDragOver && 'outline-accent-500 outline-3 -outline-offset-10 outline-dashed' 385 385 + ]} 386 386 + > 387 387 + {@render children()} 388 388 + 389 389 + <div style="height: {((maxHeight + 2) / 8) * 100}cqw;"></div> 390 390 + </div> 391 391 + 392 392 + <style> 393 393 + :global(.card.dragging) { 394 394 + z-index: 50 !important; 395 395 + scale: 1.03; 396 396 + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); 397 397 + } 398 398 + </style>

+254

src/lib/layout/algorithms.ts

··· 1 1 + import { type LayoutItem, type Layout } from 'react-grid-layout/core'; 2 2 + import { 3 3 + collides, 4 4 + moveElement, 5 5 + correctBounds, 6 6 + getFirstCollision, 7 7 + verticalCompactor 8 8 + } from 'react-grid-layout/core'; 9 9 + import type { Item } from '../types'; 10 10 + import { COLUMNS } from '$lib'; 11 11 + import { clamp } from '../helper'; 12 12 + 13 13 + function toLayoutItem(item: Item, mobile: boolean): LayoutItem { 14 14 + if (mobile) { 15 15 + return { 16 16 + x: item.mobileX, 17 17 + y: item.mobileY, 18 18 + w: item.mobileW, 19 19 + h: item.mobileH, 20 20 + i: item.id 21 21 + }; 22 22 + } 23 23 + return { 24 24 + x: item.x, 25 25 + y: item.y, 26 26 + w: item.w, 27 27 + h: item.h, 28 28 + i: item.id 29 29 + }; 30 30 + } 31 31 + 32 32 + function toLayout(items: Item[], mobile: boolean): LayoutItem[] { 33 33 + return items.map((i) => toLayoutItem(i, mobile)); 34 34 + } 35 35 + 36 36 + function applyLayout(items: Item[], layout: LayoutItem[], mobile: boolean): void { 37 37 + const itemsMap: Map<string, Item> = new Map(); 38 38 + 39 39 + for (const item of items) { 40 40 + itemsMap.set(item.id, item); 41 41 + } 42 42 + for (const l of layout) { 43 43 + const item = itemsMap.get(l.i); 44 44 + 45 45 + if (!item) { 46 46 + console.error('item not found in layout!! this should never happen!'); 47 47 + continue; 48 48 + } 49 49 + 50 50 + if (mobile) { 51 51 + item.mobileX = l.x; 52 52 + item.mobileY = l.y; 53 53 + } else { 54 54 + item.x = l.x; 55 55 + item.y = l.y; 56 56 + } 57 57 + } 58 58 + } 59 59 + 60 60 + export function overlaps(a: Item, b: Item, mobile: boolean) { 61 61 + if (a === b) return false; 62 62 + return collides(toLayoutItem(a, mobile), toLayoutItem(b, mobile)); 63 63 + } 64 64 + 65 65 + export function fixCollisions( 66 66 + items: Item[], 67 67 + item: Item, 68 68 + mobile: boolean = false, 69 69 + skipCompact: boolean = false, 70 70 + originalPos?: { x: number; y: number } 71 71 + ) { 72 72 + if (mobile) item.mobileX = clamp(item.mobileX, 0, COLUMNS - item.mobileW); 73 73 + else item.x = clamp(item.x, 0, COLUMNS - item.w); 74 74 + 75 75 + const targetX = mobile ? item.mobileX : item.x; 76 76 + const targetY = mobile ? item.mobileY : item.y; 77 77 + 78 78 + let layout = toLayout(items, mobile); 79 79 + 80 80 + const movedLayoutItem = layout.find((i) => i.i === item.id); 81 81 + 82 82 + if (!movedLayoutItem) { 83 83 + console.error('item not found in layout! this should never happen!'); 84 84 + return; 85 85 + } 86 86 + 87 87 + // If we know the original position, set it on the layout item so 88 88 + // moveElement can detect direction and push items properly. 89 89 + if (originalPos) { 90 90 + movedLayoutItem.x = originalPos.x; 91 91 + movedLayoutItem.y = originalPos.y; 92 92 + } 93 93 + 94 94 + layout = moveElement(layout, movedLayoutItem, targetX, targetY, true, false, 'vertical', COLUMNS); 95 95 + 96 96 + if (!skipCompact) layout = verticalCompactor.compact(layout, COLUMNS) as LayoutItem[]; 97 97 + 98 98 + applyLayout(items, layout, mobile); 99 99 + } 100 100 + 101 101 + export function fixAllCollisions(items: Item[], mobile: boolean) { 102 102 + let layout = toLayout(items, mobile); 103 103 + correctBounds(layout as any, { cols: COLUMNS }); 104 104 + layout = verticalCompactor.compact(layout, COLUMNS) as LayoutItem[]; 105 105 + applyLayout(items, layout, mobile); 106 106 + } 107 107 + 108 108 + export function compactItems(items: Item[], mobile: boolean) { 109 109 + const layout = toLayout(items, mobile); 110 110 + const compacted = verticalCompactor.compact(layout, COLUMNS) as LayoutItem[]; 111 111 + applyLayout(items, compacted, mobile); 112 112 + } 113 113 + 114 114 + export function setPositionOfNewItem( 115 115 + newItem: Item, 116 116 + items: Item[], 117 117 + viewportCenter?: { gridY: number; isMobile: boolean } 118 118 + ) { 119 119 + const desktopLayout = toLayout(items, false); 120 120 + const mobileLayout = toLayout(items, true); 121 121 + 122 122 + function hasCollision(mobile: boolean): boolean { 123 123 + const layout = mobile ? mobileLayout : desktopLayout; 124 124 + return getFirstCollision(layout, toLayoutItem(newItem, mobile)) !== undefined; 125 125 + } 126 126 + 127 127 + if (viewportCenter) { 128 128 + const { gridY, isMobile } = viewportCenter; 129 129 + 130 130 + if (isMobile) { 131 131 + // Place at viewport center Y 132 132 + newItem.mobileY = Math.max(0, Math.round(gridY - newItem.mobileH / 2)); 133 133 + newItem.mobileY = Math.floor(newItem.mobileY / 2) * 2; 134 134 + 135 135 + // Try to find a free X at this Y 136 136 + let found = false; 137 137 + for ( 138 138 + newItem.mobileX = 0; 139 139 + newItem.mobileX <= COLUMNS - newItem.mobileW; 140 140 + newItem.mobileX += 2 141 141 + ) { 142 142 + if (!hasCollision(true)) { 143 143 + found = true; 144 144 + break; 145 145 + } 146 146 + } 147 147 + if (!found) { 148 148 + newItem.mobileX = 0; 149 149 + } 150 150 + 151 151 + // Desktop: derive from mobile 152 152 + newItem.y = Math.max(0, Math.round(newItem.mobileY / 2)); 153 153 + found = false; 154 154 + for (newItem.x = 0; newItem.x <= COLUMNS - newItem.w; newItem.x += 2) { 155 155 + if (!hasCollision(false)) { 156 156 + found = true; 157 157 + break; 158 158 + } 159 159 + } 160 160 + if (!found) { 161 161 + newItem.x = 0; 162 162 + } 163 163 + } else { 164 164 + // Place at viewport center Y 165 165 + newItem.y = Math.max(0, Math.round(gridY - newItem.h / 2)); 166 166 + 167 167 + // Try to find a free X at this Y 168 168 + let found = false; 169 169 + for (newItem.x = 0; newItem.x <= COLUMNS - newItem.w; newItem.x += 2) { 170 170 + if (!hasCollision(false)) { 171 171 + found = true; 172 172 + break; 173 173 + } 174 174 + } 175 175 + if (!found) { 176 176 + newItem.x = 0; 177 177 + } 178 178 + 179 179 + // Mobile: derive from desktop 180 180 + newItem.mobileY = Math.max(0, Math.round(newItem.y * 2)); 181 181 + found = false; 182 182 + for ( 183 183 + newItem.mobileX = 0; 184 184 + newItem.mobileX <= COLUMNS - newItem.mobileW; 185 185 + newItem.mobileX += 2 186 186 + ) { 187 187 + if (!hasCollision(true)) { 188 188 + found = true; 189 189 + break; 190 190 + } 191 191 + } 192 192 + if (!found) { 193 193 + newItem.mobileX = 0; 194 194 + } 195 195 + } 196 196 + return; 197 197 + } 198 198 + 199 199 + let foundPosition = false; 200 200 + while (!foundPosition) { 201 201 + for (newItem.x = 0; newItem.x <= COLUMNS - newItem.w; newItem.x++) { 202 202 + if (!hasCollision(false)) { 203 203 + foundPosition = true; 204 204 + break; 205 205 + } 206 206 + } 207 207 + if (!foundPosition) newItem.y += 1; 208 208 + } 209 209 + 210 210 + let foundMobilePosition = false; 211 211 + while (!foundMobilePosition) { 212 212 + for (newItem.mobileX = 0; newItem.mobileX <= COLUMNS - newItem.mobileW; newItem.mobileX += 1) { 213 213 + if (!hasCollision(true)) { 214 214 + foundMobilePosition = true; 215 215 + break; 216 216 + } 217 217 + } 218 218 + if (!foundMobilePosition) newItem.mobileY! += 1; 219 219 + } 220 220 + } 221 221 + 222 222 + /** 223 223 + * Find a valid position for a new item in a single mode (desktop or mobile). 224 224 + * This modifies the item's position properties in-place. 225 225 + */ 226 226 + export function findValidPosition(newItem: Item, items: Item[], mobile: boolean) { 227 227 + const layout = toLayout(items, mobile); 228 228 + 229 229 + if (mobile) { 230 230 + let foundPosition = false; 231 231 + newItem.mobileY = 0; 232 232 + while (!foundPosition) { 233 233 + for (newItem.mobileX = 0; newItem.mobileX <= COLUMNS - newItem.mobileW; newItem.mobileX++) { 234 234 + if (!getFirstCollision(layout, toLayoutItem(newItem, true))) { 235 235 + foundPosition = true; 236 236 + break; 237 237 + } 238 238 + } 239 239 + if (!foundPosition) newItem.mobileY! += 1; 240 240 + } 241 241 + } else { 242 242 + let foundPosition = false; 243 243 + newItem.y = 0; 244 244 + while (!foundPosition) { 245 245 + for (newItem.x = 0; newItem.x <= COLUMNS - newItem.w; newItem.x++) { 246 246 + if (!getFirstCollision(layout, toLayoutItem(newItem, false))) { 247 247 + foundPosition = true; 248 248 + break; 249 249 + } 250 250 + } 251 251 + if (!foundPosition) newItem.y += 1; 252 252 + } 253 253 + } 254 254 + }

+190

src/lib/layout/grid.ts

··· 1 1 + import { COLUMNS, margin, mobileMargin } from '$lib'; 2 2 + import { clamp } from '$lib/helper'; 3 3 + import type { Item } from '$lib/types'; 4 4 + 5 5 + export type GridPosition = { 6 6 + x: number; 7 7 + y: number; 8 8 + swapWithId: string | null; 9 9 + placement: 'above' | 'below' | null; 10 10 + }; 11 11 + 12 12 + export type DragState = { 13 13 + item: Item; 14 14 + mouseDeltaX: number; 15 15 + mouseDeltaY: number; 16 16 + originalPositions: Map<string, { x: number; y: number; mobileX: number; mobileY: number }>; 17 17 + lastTargetId: string | null; 18 18 + lastPlacement: 'above' | 'below' | null; 19 19 + }; 20 20 + 21 21 + /** 22 22 + * Convert client coordinates to a grid position with swap detection and hysteresis. 23 23 + * Returns undefined if container or dragState.item is missing. 24 24 + * Mutates dragState.lastTargetId and dragState.lastPlacement for hysteresis tracking. 25 25 + */ 26 26 + export function getGridPosition( 27 27 + clientX: number, 28 28 + clientY: number, 29 29 + container: HTMLElement, 30 30 + dragState: DragState, 31 31 + items: Item[], 32 32 + isMobile: boolean 33 33 + ): GridPosition | undefined { 34 34 + if (!dragState.item) return; 35 35 + 36 36 + // x, y represent the top-left corner of the dragged card 37 37 + const x = clientX + dragState.mouseDeltaX; 38 38 + const y = clientY + dragState.mouseDeltaY; 39 39 + 40 40 + const rect = container.getBoundingClientRect(); 41 41 + const currentMargin = isMobile ? mobileMargin : margin; 42 42 + const cellSize = (rect.width - currentMargin * 2) / COLUMNS; 43 43 + 44 44 + // Get card dimensions based on current view mode 45 45 + const cardW = isMobile ? dragState.item.mobileW : dragState.item.w; 46 46 + const cardH = isMobile ? dragState.item.mobileH : dragState.item.h; 47 47 + 48 48 + // Get dragged card's original position 49 49 + const draggedOrigPos = dragState.originalPositions.get(dragState.item.id); 50 50 + const draggedOrigY = draggedOrigPos ? (isMobile ? draggedOrigPos.mobileY : draggedOrigPos.y) : 0; 51 51 + 52 52 + // Calculate raw grid position based on top-left of dragged card 53 53 + let gridX = clamp(Math.round((x - rect.left - currentMargin) / cellSize), 0, COLUMNS - cardW); 54 54 + gridX = Math.floor(gridX / 2) * 2; 55 55 + 56 56 + let gridY = Math.max(Math.round((y - rect.top - currentMargin) / cellSize), 0); 57 57 + 58 58 + if (isMobile) { 59 59 + gridX = Math.floor(gridX / 2) * 2; 60 60 + gridY = Math.floor(gridY / 2) * 2; 61 61 + } 62 62 + 63 63 + // Find if we're hovering over another card (using ORIGINAL positions) 64 64 + const centerGridY = gridY + cardH / 2; 65 65 + const centerGridX = gridX + cardW / 2; 66 66 + 67 67 + let swapWithId: string | null = null; 68 68 + let placement: 'above' | 'below' | null = null; 69 69 + 70 70 + for (const other of items) { 71 71 + if (other === dragState.item) continue; 72 72 + 73 73 + // Use original positions for hit testing 74 74 + const origPos = dragState.originalPositions.get(other.id); 75 75 + if (!origPos) continue; 76 76 + 77 77 + const otherX = isMobile ? origPos.mobileX : origPos.x; 78 78 + const otherY = isMobile ? origPos.mobileY : origPos.y; 79 79 + const otherW = isMobile ? other.mobileW : other.w; 80 80 + const otherH = isMobile ? other.mobileH : other.h; 81 81 + 82 82 + // Check if dragged card's center point is within this card's original bounds 83 83 + if ( 84 84 + centerGridX >= otherX && 85 85 + centerGridX < otherX + otherW && 86 86 + centerGridY >= otherY && 87 87 + centerGridY < otherY + otherH 88 88 + ) { 89 89 + // Check if this is a swap situation: 90 90 + // Cards have the same dimensions and are on the same row 91 91 + const canSwap = cardW === otherW && cardH === otherH && draggedOrigY === otherY; 92 92 + 93 93 + if (canSwap) { 94 94 + // Swap positions 95 95 + swapWithId = other.id; 96 96 + gridX = otherX; 97 97 + gridY = otherY; 98 98 + placement = null; 99 99 + 100 100 + dragState.lastTargetId = other.id; 101 101 + dragState.lastPlacement = null; 102 102 + } else { 103 103 + // Vertical placement (above/below) 104 104 + // Detect drag direction: if dragging up, always place above 105 105 + const isDraggingUp = gridY < draggedOrigY; 106 106 + 107 107 + if (isDraggingUp) { 108 108 + // When dragging up, always place above 109 109 + placement = 'above'; 110 110 + } else { 111 111 + // When dragging down, use top/bottom half logic 112 112 + const midpointY = otherY + otherH / 2; 113 113 + const hysteresis = 0.3; 114 114 + 115 115 + if (dragState.lastTargetId === other.id && dragState.lastPlacement) { 116 116 + if (dragState.lastPlacement === 'above') { 117 117 + placement = centerGridY > midpointY + hysteresis ? 'below' : 'above'; 118 118 + } else { 119 119 + placement = centerGridY < midpointY - hysteresis ? 'above' : 'below'; 120 120 + } 121 121 + } else { 122 122 + placement = centerGridY < midpointY ? 'above' : 'below'; 123 123 + } 124 124 + } 125 125 + 126 126 + dragState.lastTargetId = other.id; 127 127 + dragState.lastPlacement = placement; 128 128 + 129 129 + if (placement === 'above') { 130 130 + gridY = otherY; 131 131 + } else { 132 132 + gridY = otherY + otherH; 133 133 + } 134 134 + } 135 135 + break; 136 136 + } 137 137 + } 138 138 + 139 139 + // If we're not over any card, clear the tracking 140 140 + if (!swapWithId && !placement) { 141 141 + dragState.lastTargetId = null; 142 142 + dragState.lastPlacement = null; 143 143 + } 144 144 + 145 145 + return { x: gridX, y: gridY, swapWithId, placement }; 146 146 + } 147 147 + 148 148 + /** 149 149 + * Get the grid Y coordinate at the viewport center. 150 150 + */ 151 151 + export function getViewportCenterGridY( 152 152 + container: HTMLElement, 153 153 + isMobile: boolean 154 154 + ): { gridY: number; isMobile: boolean } { 155 155 + const rect = container.getBoundingClientRect(); 156 156 + const currentMargin = isMobile ? mobileMargin : margin; 157 157 + const cellSize = (rect.width - currentMargin * 2) / COLUMNS; 158 158 + const viewportCenterY = window.innerHeight / 2; 159 159 + const gridY = (viewportCenterY - rect.top - currentMargin) / cellSize; 160 160 + return { gridY, isMobile }; 161 161 + } 162 162 + 163 163 + /** 164 164 + * Convert pixel drop coordinates to grid position. Used for file drops. 165 165 + */ 166 166 + export function pixelToGrid( 167 167 + clientX: number, 168 168 + clientY: number, 169 169 + container: HTMLElement, 170 170 + isMobile: boolean, 171 171 + cardW: number 172 172 + ): { gridX: number; gridY: number } { 173 173 + const rect = container.getBoundingClientRect(); 174 174 + const currentMargin = isMobile ? mobileMargin : margin; 175 175 + const cellSize = (rect.width - currentMargin * 2) / COLUMNS; 176 176 + 177 177 + let gridX = clamp( 178 178 + Math.round((clientX - rect.left - currentMargin) / cellSize), 179 179 + 0, 180 180 + COLUMNS - cardW 181 181 + ); 182 182 + gridX = Math.floor(gridX / 2) * 2; 183 183 + 184 184 + let gridY = Math.max(Math.round((clientY - rect.top - currentMargin) / cellSize), 0); 185 185 + if (isMobile) { 186 186 + gridY = Math.floor(gridY / 2) * 2; 187 187 + } 188 188 + 189 189 + return { gridX, gridY }; 190 190 + }

+15

src/lib/layout/index.ts

··· 1 1 + export { 2 2 + overlaps, 3 3 + fixCollisions, 4 4 + fixAllCollisions, 5 5 + compactItems, 6 6 + setPositionOfNewItem, 7 7 + findValidPosition 8 8 + } from './algorithms'; 9 9 + 10 10 + export { shouldMirror, mirrorItemSize, mirrorLayout } from './mirror'; 11 11 + 12 12 + export { getGridPosition, getViewportCenterGridY, pixelToGrid } from './grid'; 13 13 + export type { GridPosition, DragState } from './grid'; 14 14 + 15 15 + export { default as EditableGrid } from './EditableGrid.svelte';

+73

src/lib/layout/mirror.ts

··· 1 1 + import { COLUMNS } from '$lib'; 2 2 + import { CardDefinitionsByType } from '$lib/cards'; 3 3 + import { clamp } from '$lib/helper'; 4 4 + import { fixAllCollisions, findValidPosition } from './algorithms'; 5 5 + import type { Item } from '$lib/types'; 6 6 + 7 7 + /** 8 8 + * Returns true when mirroring should still happen (i.e. user hasn't edited both layouts). 9 9 + * editedOn: 0/undefined = never, 1 = desktop only, 2 = mobile only, 3 = both 10 10 + */ 11 11 + export function shouldMirror(editedOn: number | undefined): boolean { 12 12 + return (editedOn ?? 0) !== 3; 13 13 + } 14 14 + 15 15 + /** Snap a value to the nearest even integer (min 2). */ 16 16 + function snapEven(v: number): number { 17 17 + return Math.max(2, Math.round(v / 2) * 2); 18 18 + } 19 19 + 20 20 + /** 21 21 + * Compute the other layout's size for a single item, preserving aspect ratio. 22 22 + * Clamps to the card definition's minW/maxW/minH/maxH if defined. 23 23 + * Mutates the item in-place. 24 24 + */ 25 25 + export function mirrorItemSize(item: Item, fromMobile: boolean): void { 26 26 + const def = CardDefinitionsByType[item.cardType]; 27 27 + 28 28 + if (fromMobile) { 29 29 + // Mobile → Desktop: halve both dimensions, then clamp to card def constraints 30 30 + // (constraints are in desktop units) 31 31 + item.w = clamp(snapEven(item.mobileW / 2), def?.minW ?? 2, def?.maxW ?? COLUMNS); 32 32 + item.h = clamp(Math.round(item.mobileH / 2), def?.minH ?? 1, def?.maxH ?? Infinity); 33 33 + } else { 34 34 + // Desktop → Mobile: double both dimensions 35 35 + // (don't apply card def constraints — they're in desktop units) 36 36 + item.mobileW = Math.min(item.w * 2, COLUMNS); 37 37 + item.mobileH = Math.max(item.h * 2, 2); 38 38 + } 39 39 + } 40 40 + 41 41 + /** 42 42 + * Mirror the full layout from one view to the other. 43 43 + * Copies sizes proportionally and maps positions, then resolves collisions. 44 44 + * Mutates items in-place. 45 45 + */ 46 46 + export function mirrorLayout(items: Item[], fromMobile: boolean): void { 47 47 + // Mirror sizes first 48 48 + for (const item of items) { 49 49 + mirrorItemSize(item, fromMobile); 50 50 + } 51 51 + 52 52 + if (fromMobile) { 53 53 + // Mobile → Desktop: reflow items to use the full grid width. 54 54 + // Sort by mobile position so items are placed in reading order. 55 55 + const sorted = items.toSorted((a, b) => a.mobileY - b.mobileY || a.mobileX - b.mobileX); 56 56 + 57 57 + // Place each item into the first available spot on the desktop grid 58 58 + const placed: Item[] = []; 59 59 + for (const item of sorted) { 60 60 + item.x = 0; 61 61 + item.y = 0; 62 62 + findValidPosition(item, placed, false); 63 63 + placed.push(item); 64 64 + } 65 65 + } else { 66 66 + // Desktop → Mobile: proportional positions 67 67 + for (const item of items) { 68 68 + item.mobileX = clamp(Math.floor((item.x * 2) / 2) * 2, 0, COLUMNS - item.mobileW); 69 69 + item.mobileY = Math.max(0, Math.round(item.y * 2)); 70 70 + } 71 71 + fixAllCollisions(items, true); 72 72 + } 73 73 + }

+1 -3

src/lib/website/EditableProfile.svelte

··· 3 3 import { getImage, compressImage, getProfilePosition } from '$lib/helper'; 4 4 import PlainTextEditor from '$lib/components/PlainTextEditor.svelte'; 5 5 import MarkdownTextEditor from '$lib/components/MarkdownTextEditor.svelte'; 6 6 - import { Avatar, Button } from '@foxui/core'; 7 7 - import { getIsMobile } from './context'; 6 6 + import { Avatar } from '@foxui/core'; 8 7 import MadeWithBlento from './MadeWithBlento.svelte'; 9 9 - import { SelectThemePopover } from '$lib/components/select-theme'; 10 8 11 9 let { data = $bindable(), hideBlento = false }: { data: WebsiteData; hideBlento?: boolean } = 12 10 $props();

+56 -579

src/lib/website/EditableWebsite.svelte

··· 1 1 <script lang="ts"> 2 2 - import { Button, Modal, toast, Toaster, Sidebar } from '@foxui/core'; 3 3 - import { COLUMNS, margin, mobileMargin } from '$lib'; 2 2 + import { Button, Modal, toast, Toaster } from '@foxui/core'; 3 3 + import { COLUMNS } from '$lib'; 4 4 import { 5 5 checkAndUploadImage, 6 6 - clamp, 7 7 - compactItems, 8 6 createEmptyCard, 9 9 - findValidPosition, 10 10 - fixAllCollisions, 11 11 - fixCollisions, 12 7 getHideProfileSection, 13 8 getProfilePosition, 14 9 getName, 15 10 isTyping, 16 11 savePage, 17 12 scrollToItem, 18 18 - setPositionOfNewItem, 19 13 validateLink, 20 14 getImage 21 15 } from '../helper'; ··· 32 26 import Context from './Context.svelte'; 33 27 import Head from './Head.svelte'; 34 28 import Account from './Account.svelte'; 35 35 - import { SelectThemePopover } from '$lib/components/select-theme'; 36 29 import EditBar from './EditBar.svelte'; 37 30 import SaveModal from './SaveModal.svelte'; 38 31 import FloatingEditButton from './FloatingEditButton.svelte'; ··· 41 34 import { launchConfetti } from '@foxui/visual'; 42 35 import Controls from './Controls.svelte'; 43 36 import CardCommand from '$lib/components/card-command/CardCommand.svelte'; 44 44 - import { shouldMirror, mirrorLayout } from './layout-mirror'; 45 37 import { SvelteMap } from 'svelte/reactivity'; 38 38 + import { 39 39 + fixCollisions, 40 40 + compactItems, 41 41 + fixAllCollisions, 42 42 + setPositionOfNewItem, 43 43 + shouldMirror, 44 44 + mirrorLayout, 45 45 + getViewportCenterGridY, 46 46 + EditableGrid 47 47 + } from '$lib/layout'; 46 48 47 49 let { 48 50 data ··· 53 55 // Check if floating login button will be visible (to hide MadeWithBlento) 54 56 const showLoginOnEditPage = $derived(!user.isInitializing && !user.isLoggedIn); 55 57 56 56 - function updateTheme(newAccent: string, newBase: string) { 57 57 - data.publication.preferences ??= {}; 58 58 - data.publication.preferences.accentColor = newAccent; 59 59 - data.publication.preferences.baseColor = newBase; 60 60 - data = { ...data }; 61 61 - } 62 62 - 63 63 - let imageDragOver = $state(false); 64 64 - 65 58 // svelte-ignore state_referenced_locally 66 59 let items: Item[] = $state(data.cards); 67 60 68 61 // svelte-ignore state_referenced_locally 69 62 let publication = $state(JSON.stringify(data.publication)); 70 63 71 71 - // Track saved state for comparison 72 64 // svelte-ignore state_referenced_locally 73 73 - let savedItems = $state(JSON.stringify(data.cards)); 74 74 - // svelte-ignore state_referenced_locally 75 75 - let savedPublication = $state(JSON.stringify(data.publication)); 65 65 + let savedItemsSnapshot = JSON.stringify(data.cards); 76 66 77 67 let hasUnsavedChanges = $state(false); 78 68 69 69 + // Detect card content and publication changes (e.g. sidebar edits) 70 70 + // The guard ensures JSON.stringify only runs while no changes are detected yet. 71 71 + // Once hasUnsavedChanges is true, Svelte still fires this effect on item mutations 72 72 + // but the early return makes it effectively free. 79 73 $effect(() => { 80 80 - if (!hasUnsavedChanges) { 81 81 - hasUnsavedChanges = 82 82 - JSON.stringify(items) !== savedItems || 83 83 - JSON.stringify(data.publication) !== savedPublication; 74 74 + if (hasUnsavedChanges) return; 75 75 + if ( 76 76 + JSON.stringify(items) !== savedItemsSnapshot || 77 77 + JSON.stringify(data.publication) !== publication 78 78 + ) { 79 79 + hasUnsavedChanges = true; 84 80 } 85 81 }); 86 82 ··· 97 93 return () => window.removeEventListener('beforeunload', handleBeforeUnload); 98 94 }); 99 95 100 100 - let container: HTMLDivElement | undefined = $state(); 101 101 - 102 102 - let activeDragElement: { 103 103 - element: HTMLDivElement | null; 104 104 - item: Item | null; 105 105 - w: number; 106 106 - h: number; 107 107 - x: number; 108 108 - y: number; 109 109 - mouseDeltaX: number; 110 110 - mouseDeltaY: number; 111 111 - // For hysteresis - track last decision to prevent flickering 112 112 - lastTargetId: string | null; 113 113 - lastPlacement: 'above' | 'below' | null; 114 114 - // Store original positions to reset from during drag 115 115 - originalPositions: Map<string, { x: number; y: number; mobileX: number; mobileY: number }>; 116 116 - } = $state({ 117 117 - element: null, 118 118 - item: null, 119 119 - w: 0, 120 120 - h: 0, 121 121 - x: -1, 122 122 - y: -1, 123 123 - mouseDeltaX: 0, 124 124 - mouseDeltaY: 0, 125 125 - lastTargetId: null, 126 126 - lastPlacement: null, 127 127 - originalPositions: new Map() 128 128 - }); 96 96 + let gridContainer: HTMLDivElement | undefined = $state(); 129 97 130 98 let showingMobileView = $state(false); 131 99 let isMobile = $derived(showingMobileView || (innerWidth.current ?? 1000) < 1024); ··· 137 105 let editedOn = $state(data.publication.preferences?.editedOn ?? 0); 138 106 139 107 function onLayoutChanged() { 108 108 + hasUnsavedChanges = true; 140 109 // Set the bit for the current layout: desktop=1, mobile=2 141 110 editedOn = editedOn | (isMobile ? 2 : 1); 142 111 if (shouldMirror(editedOn)) { ··· 159 128 160 129 const getY = (item: Item) => (isMobile ? (item.mobileY ?? item.y) : item.y); 161 130 const getH = (item: Item) => (isMobile ? (item.mobileH ?? item.h) : item.h); 162 162 - 163 131 let maxHeight = $derived(items.reduce((max, item) => Math.max(max, getY(item) + getH(item)), 0)); 164 164 - 165 165 - function getViewportCenterGridY(): { gridY: number; isMobile: boolean } | undefined { 166 166 - if (!container) return undefined; 167 167 - const rect = container.getBoundingClientRect(); 168 168 - const currentMargin = isMobile ? mobileMargin : margin; 169 169 - const cellSize = (rect.width - currentMargin * 2) / COLUMNS; 170 170 - const viewportCenterY = window.innerHeight / 2; 171 171 - const gridY = (viewportCenterY - rect.top - currentMargin) / cellSize; 172 172 - return { gridY, isMobile }; 173 173 - } 174 132 175 133 function newCard(type: string = 'link', cardData?: any) { 176 134 selectedCardId = null; ··· 220 178 if (!newItem.item) return; 221 179 const item = newItem.item; 222 180 223 223 - const viewportCenter = getViewportCenterGridY(); 181 181 + const viewportCenter = gridContainer 182 182 + ? getViewportCenterGridY(gridContainer, isMobile) 183 183 + : undefined; 224 184 setPositionOfNewItem(item, items, viewportCenter); 225 185 226 186 items = [...items, item]; ··· 238 198 await tick(); 239 199 cleanupDialogArtifacts(); 240 200 241 241 - scrollToItem(item, isMobile, container); 201 201 + scrollToItem(item, isMobile, gridContainer); 242 202 } 243 203 244 204 let isSaving = $state(false); ··· 266 226 267 227 publication = JSON.stringify(data.publication); 268 228 269 269 - // Update saved state 270 270 - savedItems = JSON.stringify(items); 271 271 - savedPublication = JSON.stringify(data.publication); 229 229 + savedItemsSnapshot = JSON.stringify(items); 230 230 + hasUnsavedChanges = false; 272 231 273 232 saveSuccess = true; 274 233 ··· 542 501 return; 543 502 } 544 503 545 545 - fixAllCollisions(copiedCards); 504 504 + fixAllCollisions(copiedCards, false); 546 505 fixAllCollisions(copiedCards, true); 547 547 - compactItems(copiedCards); 506 506 + compactItems(copiedCards, false); 548 507 compactItems(copiedCards, true); 549 508 550 509 items = copiedCards; ··· 558 517 } 559 518 } 560 519 561 561 - let debugPoint = $state({ x: 0, y: 0 }); 562 562 - 563 563 - function getGridPosition( 564 564 - clientX: number, 565 565 - clientY: number 566 566 - ): 567 567 - | { x: number; y: number; swapWithId: string | null; placement: 'above' | 'below' | null } 568 568 - | undefined { 569 569 - if (!container || !activeDragElement.item) return; 570 570 - 571 571 - // x, y represent the top-left corner of the dragged card 572 572 - const x = clientX + activeDragElement.mouseDeltaX; 573 573 - const y = clientY + activeDragElement.mouseDeltaY; 574 574 - 575 575 - const rect = container.getBoundingClientRect(); 576 576 - const currentMargin = isMobile ? mobileMargin : margin; 577 577 - const cellSize = (rect.width - currentMargin * 2) / COLUMNS; 578 578 - 579 579 - // Get card dimensions based on current view mode 580 580 - const cardW = isMobile 581 581 - ? (activeDragElement.item?.mobileW ?? activeDragElement.w) 582 582 - : activeDragElement.w; 583 583 - const cardH = isMobile 584 584 - ? (activeDragElement.item?.mobileH ?? activeDragElement.h) 585 585 - : activeDragElement.h; 586 586 - 587 587 - // Get dragged card's original position 588 588 - const draggedOrigPos = activeDragElement.originalPositions.get(activeDragElement.item.id); 589 589 - 590 590 - const draggedOrigY = draggedOrigPos 591 591 - ? isMobile 592 592 - ? draggedOrigPos.mobileY 593 593 - : draggedOrigPos.y 594 594 - : 0; 595 595 - 596 596 - // Calculate raw grid position based on top-left of dragged card 597 597 - let gridX = clamp(Math.round((x - rect.left - currentMargin) / cellSize), 0, COLUMNS - cardW); 598 598 - gridX = Math.floor(gridX / 2) * 2; 599 599 - 600 600 - let gridY = Math.max(Math.round((y - rect.top - currentMargin) / cellSize), 0); 601 601 - 602 602 - if (isMobile) { 603 603 - gridX = Math.floor(gridX / 2) * 2; 604 604 - gridY = Math.floor(gridY / 2) * 2; 605 605 - } 606 606 - 607 607 - // Find if we're hovering over another card (using ORIGINAL positions) 608 608 - const centerGridY = gridY + cardH / 2; 609 609 - const centerGridX = gridX + cardW / 2; 610 610 - 611 611 - let swapWithId: string | null = null; 612 612 - let placement: 'above' | 'below' | null = null; 613 613 - 614 614 - for (const other of items) { 615 615 - if (other === activeDragElement.item) continue; 616 616 - 617 617 - // Use original positions for hit testing 618 618 - const origPos = activeDragElement.originalPositions.get(other.id); 619 619 - if (!origPos) continue; 620 620 - 621 621 - const otherX = isMobile ? origPos.mobileX : origPos.x; 622 622 - const otherY = isMobile ? origPos.mobileY : origPos.y; 623 623 - const otherW = isMobile ? other.mobileW : other.w; 624 624 - const otherH = isMobile ? other.mobileH : other.h; 625 625 - 626 626 - // Check if dragged card's center point is within this card's original bounds 627 627 - if ( 628 628 - centerGridX >= otherX && 629 629 - centerGridX < otherX + otherW && 630 630 - centerGridY >= otherY && 631 631 - centerGridY < otherY + otherH 632 632 - ) { 633 633 - // Check if this is a swap situation: 634 634 - // Cards have the same dimensions and are on the same row 635 635 - const canSwap = cardW === otherW && cardH === otherH && draggedOrigY === otherY; 636 636 - 637 637 - if (canSwap) { 638 638 - // Swap positions 639 639 - swapWithId = other.id; 640 640 - gridX = otherX; 641 641 - gridY = otherY; 642 642 - placement = null; 643 643 - 644 644 - activeDragElement.lastTargetId = other.id; 645 645 - activeDragElement.lastPlacement = null; 646 646 - } else { 647 647 - // Vertical placement (above/below) 648 648 - // Detect drag direction: if dragging up, always place above 649 649 - const isDraggingUp = gridY < draggedOrigY; 650 650 - 651 651 - if (isDraggingUp) { 652 652 - // When dragging up, always place above 653 653 - placement = 'above'; 654 654 - } else { 655 655 - // When dragging down, use top/bottom half logic 656 656 - const midpointY = otherY + otherH / 2; 657 657 - const hysteresis = 0.3; 658 658 - 659 659 - if (activeDragElement.lastTargetId === other.id && activeDragElement.lastPlacement) { 660 660 - if (activeDragElement.lastPlacement === 'above') { 661 661 - placement = centerGridY > midpointY + hysteresis ? 'below' : 'above'; 662 662 - } else { 663 663 - placement = centerGridY < midpointY - hysteresis ? 'above' : 'below'; 664 664 - } 665 665 - } else { 666 666 - placement = centerGridY < midpointY ? 'above' : 'below'; 667 667 - } 668 668 - } 669 669 - 670 670 - activeDragElement.lastTargetId = other.id; 671 671 - activeDragElement.lastPlacement = placement; 672 672 - 673 673 - if (placement === 'above') { 674 674 - gridY = otherY; 675 675 - } else { 676 676 - gridY = otherY + otherH; 677 677 - } 678 678 - } 679 679 - break; 680 680 - } 681 681 - } 682 682 - 683 683 - // If we're not over any card, clear the tracking 684 684 - if (!swapWithId && !placement) { 685 685 - activeDragElement.lastTargetId = null; 686 686 - activeDragElement.lastPlacement = null; 687 687 - } 688 688 - 689 689 - debugPoint.x = x - rect.left; 690 690 - debugPoint.y = y - rect.top + currentMargin; 691 691 - 692 692 - return { x: gridX, y: gridY, swapWithId, placement }; 693 693 - } 694 694 - 695 695 - function getDragXY( 696 696 - e: DragEvent & { 697 697 - currentTarget: EventTarget & HTMLDivElement; 698 698 - } 699 699 - ) { 700 700 - return getGridPosition(e.clientX, e.clientY); 701 701 - } 702 702 - 703 703 - // Touch drag system (instant drag on selected card) 704 704 - let touchDragActive = $state(false); 705 705 - 706 706 - function touchStart(e: TouchEvent) { 707 707 - if (!selectedCardId || !container) return; 708 708 - const touch = e.touches[0]; 709 709 - if (!touch) return; 710 710 - 711 711 - // Check if the touch is on the selected card element 712 712 - const target = (e.target as HTMLElement)?.closest?.('.card'); 713 713 - if (!target || target.id !== selectedCardId) return; 714 714 - 715 715 - const item = items.find((i) => i.id === selectedCardId); 716 716 - if (!item || item.cardData?.locked) return; 717 717 - 718 718 - // Start dragging immediately 719 719 - touchDragActive = true; 720 720 - 721 721 - const cardEl = container.querySelector(`#${CSS.escape(selectedCardId)}`) as HTMLDivElement; 722 722 - if (!cardEl) return; 723 723 - 724 724 - activeDragElement.element = cardEl; 725 725 - activeDragElement.w = item.w; 726 726 - activeDragElement.h = item.h; 727 727 - activeDragElement.item = item; 728 728 - 729 729 - // Store original positions of all items 730 730 - activeDragElement.originalPositions = new Map(); 731 731 - for (const it of items) { 732 732 - activeDragElement.originalPositions.set(it.id, { 733 733 - x: it.x, 734 734 - y: it.y, 735 735 - mobileX: it.mobileX, 736 736 - mobileY: it.mobileY 737 737 - }); 738 738 - } 739 739 - 740 740 - const rect = cardEl.getBoundingClientRect(); 741 741 - activeDragElement.mouseDeltaX = rect.left - touch.clientX; 742 742 - activeDragElement.mouseDeltaY = rect.top - touch.clientY; 743 743 - } 744 744 - 745 745 - function touchMove(e: TouchEvent) { 746 746 - if (!touchDragActive) return; 747 747 - 748 748 - const touch = e.touches[0]; 749 749 - if (!touch) return; 750 750 - 751 751 - e.preventDefault(); 752 752 - 753 753 - const result = getGridPosition(touch.clientX, touch.clientY); 754 754 - if (!result || !activeDragElement.item) return; 755 755 - 756 756 - const draggedOrigPos = activeDragElement.originalPositions.get(activeDragElement.item.id); 757 757 - 758 758 - // Reset all items to original positions first 759 759 - for (const it of items) { 760 760 - const origPos = activeDragElement.originalPositions.get(it.id); 761 761 - if (origPos && it !== activeDragElement.item) { 762 762 - if (isMobile) { 763 763 - it.mobileX = origPos.mobileX; 764 764 - it.mobileY = origPos.mobileY; 765 765 - } else { 766 766 - it.x = origPos.x; 767 767 - it.y = origPos.y; 768 768 - } 769 769 - } 770 770 - } 771 771 - 772 772 - // Update dragged item position 773 773 - if (isMobile) { 774 774 - activeDragElement.item.mobileX = result.x; 775 775 - activeDragElement.item.mobileY = result.y; 776 776 - } else { 777 777 - activeDragElement.item.x = result.x; 778 778 - activeDragElement.item.y = result.y; 779 779 - } 780 780 - 781 781 - // Handle horizontal swap 782 782 - if (result.swapWithId && draggedOrigPos) { 783 783 - const swapTarget = items.find((it) => it.id === result.swapWithId); 784 784 - if (swapTarget) { 785 785 - if (isMobile) { 786 786 - swapTarget.mobileX = draggedOrigPos.mobileX; 787 787 - swapTarget.mobileY = draggedOrigPos.mobileY; 788 788 - } else { 789 789 - swapTarget.x = draggedOrigPos.x; 790 790 - swapTarget.y = draggedOrigPos.y; 791 791 - } 792 792 - } 793 793 - } 794 794 - 795 795 - fixCollisions(items, activeDragElement.item, isMobile); 796 796 - 797 797 - // Auto-scroll near edges 798 798 - const scrollZone = 100; 799 799 - const scrollSpeed = 10; 800 800 - const viewportHeight = window.innerHeight; 801 801 - 802 802 - if (touch.clientY < scrollZone) { 803 803 - const intensity = 1 - touch.clientY / scrollZone; 804 804 - window.scrollBy(0, -scrollSpeed * intensity); 805 805 - } else if (touch.clientY > viewportHeight - scrollZone) { 806 806 - const intensity = 1 - (viewportHeight - touch.clientY) / scrollZone; 807 807 - window.scrollBy(0, scrollSpeed * intensity); 808 808 - } 809 809 - } 810 810 - 811 811 - function touchEnd() { 812 812 - if (touchDragActive && activeDragElement.item) { 813 813 - // Finalize position 814 814 - fixCollisions(items, activeDragElement.item, isMobile); 815 815 - onLayoutChanged(); 816 816 - 817 817 - activeDragElement.x = -1; 818 818 - activeDragElement.y = -1; 819 819 - activeDragElement.element = null; 820 820 - activeDragElement.item = null; 821 821 - activeDragElement.lastTargetId = null; 822 822 - activeDragElement.lastPlacement = null; 823 823 - } 824 824 - 825 825 - touchDragActive = false; 826 826 - } 827 827 - 828 828 - // Only register non-passive touchmove when actively dragging 829 829 - $effect(() => { 830 830 - const el = container; 831 831 - if (!touchDragActive || !el) return; 832 832 - 833 833 - el.addEventListener('touchmove', touchMove, { passive: false }); 834 834 - return () => { 835 835 - el.removeEventListener('touchmove', touchMove); 836 836 - }; 837 837 - }); 838 838 - 839 520 let linkValue = $state(''); 840 521 841 522 function addLink(url: string, specificCardDef?: CardDefinition) { ··· 959 640 fixCollisions(items, item, isMobile); 960 641 fixCollisions(items, item, !isMobile); 961 642 } else { 962 962 - const viewportCenter = getViewportCenterGridY(); 643 643 + const viewportCenter = gridContainer 644 644 + ? getViewportCenterGridY(gridContainer, isMobile) 645 645 + : undefined; 963 646 setPositionOfNewItem(item, items, viewportCenter); 964 647 items = [...items, item]; 965 648 fixCollisions(items, item, false, true); ··· 972 655 973 656 await tick(); 974 657 975 975 - scrollToItem(item, isMobile, container); 658 658 + scrollToItem(item, isMobile, gridContainer); 976 659 } 977 660 978 978 - function handleImageDragOver(event: DragEvent) { 979 979 - const dt = event.dataTransfer; 980 980 - if (!dt) return; 981 981 - 982 982 - let hasImage = false; 983 983 - if (dt.items) { 984 984 - for (let i = 0; i < dt.items.length; i++) { 985 985 - const item = dt.items[i]; 986 986 - if (item && item.kind === 'file' && item.type.startsWith('image/')) { 987 987 - hasImage = true; 988 988 - break; 989 989 - } 990 990 - } 991 991 - } else if (dt.files) { 992 992 - for (let i = 0; i < dt.files.length; i++) { 993 993 - const file = dt.files[i]; 994 994 - if (file?.type.startsWith('image/')) { 995 995 - hasImage = true; 996 996 - break; 997 997 - } 998 998 - } 999 999 - } 1000 1000 - 1001 1001 - if (hasImage) { 1002 1002 - event.preventDefault(); 1003 1003 - event.stopPropagation(); 1004 1004 - 1005 1005 - imageDragOver = true; 1006 1006 - } 1007 1007 - } 1008 1008 - 1009 1009 - function handleImageDragLeave(event: DragEvent) { 1010 1010 - event.preventDefault(); 1011 1011 - event.stopPropagation(); 1012 1012 - imageDragOver = false; 1013 1013 - } 1014 1014 - 1015 1015 - async function handleImageDrop(event: DragEvent) { 1016 1016 - event.preventDefault(); 1017 1017 - event.stopPropagation(); 1018 1018 - const dropX = event.clientX; 1019 1019 - const dropY = event.clientY; 1020 1020 - imageDragOver = false; 1021 1021 - 1022 1022 - if (!event.dataTransfer?.files?.length) return; 1023 1023 - 1024 1024 - const imageFiles = Array.from(event.dataTransfer.files).filter((f) => 1025 1025 - f?.type.startsWith('image/') 1026 1026 - ); 1027 1027 - if (imageFiles.length === 0) return; 1028 1028 - 1029 1029 - // Calculate starting grid position from drop coordinates 1030 1030 - let gridX = 0; 1031 1031 - let gridY = 0; 1032 1032 - if (container) { 1033 1033 - const rect = container.getBoundingClientRect(); 1034 1034 - const currentMargin = isMobile ? mobileMargin : margin; 1035 1035 - const cellSize = (rect.width - currentMargin * 2) / COLUMNS; 1036 1036 - const cardW = isMobile ? 4 : 2; 1037 1037 - 1038 1038 - gridX = clamp(Math.round((dropX - rect.left - currentMargin) / cellSize), 0, COLUMNS - cardW); 1039 1039 - gridX = Math.floor(gridX / 2) * 2; 1040 1040 - 1041 1041 - gridY = Math.max(Math.round((dropY - rect.top - currentMargin) / cellSize), 0); 1042 1042 - if (isMobile) { 1043 1043 - gridY = Math.floor(gridY / 2) * 2; 1044 1044 - } 1045 1045 - } 1046 1046 - 1047 1047 - for (let i = 0; i < imageFiles.length; i++) { 661 661 + async function handleFileDrop(files: File[], gridX: number, gridY: number) { 662 662 + for (let i = 0; i < files.length; i++) { 1048 663 // First image gets the drop position, rest use normal placement 1049 664 if (i === 0) { 1050 1050 - await processImageFile(imageFiles[i], gridX, gridY); 665 665 + await processImageFile(files[i], gridX, gridY); 1051 666 } else { 1052 1052 - await processImageFile(imageFiles[i]); 667 667 + await processImageFile(files[i]); 1053 668 } 1054 669 } 1055 670 } ··· 1097 712 objectUrl 1098 713 }; 1099 714 1100 1100 - const viewportCenter = getViewportCenterGridY(); 715 715 + const viewportCenter = gridContainer 716 716 + ? getViewportCenterGridY(gridContainer, isMobile) 717 717 + : undefined; 1101 718 setPositionOfNewItem(item, items, viewportCenter); 1102 719 items = [...items, item]; 1103 720 fixCollisions(items, item, false, true); ··· 1109 726 1110 727 await tick(); 1111 728 1112 1112 - scrollToItem(item, isMobile, container); 729 729 + scrollToItem(item, isMobile, gridContainer); 1113 730 } 1114 731 1115 732 async function handleVideoInputChange(event: Event) { ··· 1141 758 }} 1142 759 /> 1143 760 1144 1144 - <svelte:window 1145 1145 - ondragover={handleImageDragOver} 1146 1146 - ondragleave={handleImageDragLeave} 1147 1147 - ondrop={handleImageDrop} 1148 1148 - /> 1149 1149 - 1150 761 <Head 1151 762 favicon={getImage(data.publication, data.did, 'icon') || data.profile.avatar} 1152 763 title={getName(data)} ··· 1256 867 ]} 1257 868 > 1258 869 <div class="pointer-events-none"></div> 1259 1259 - <!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events --> 1260 1260 - <div 1261 1261 - bind:this={container} 1262 1262 - onclick={(e) => { 1263 1263 - // Deselect when tapping empty grid space 1264 1264 - if (e.target === e.currentTarget || !(e.target as HTMLElement)?.closest?.('.card')) { 1265 1265 - selectedCardId = null; 1266 1266 - } 1267 1267 - }} 1268 1268 - ontouchstart={touchStart} 1269 1269 - ontouchend={touchEnd} 1270 1270 - ondragover={(e) => { 1271 1271 - e.preventDefault(); 1272 1272 - 1273 1273 - const result = getDragXY(e); 1274 1274 - if (!result) return; 1275 1275 - 1276 1276 - activeDragElement.x = result.x; 1277 1277 - activeDragElement.y = result.y; 1278 1278 - 1279 1279 - if (activeDragElement.item) { 1280 1280 - // Get dragged card's original position for swapping 1281 1281 - const draggedOrigPos = activeDragElement.originalPositions.get( 1282 1282 - activeDragElement.item.id 1283 1283 - ); 1284 1284 - 1285 1285 - // Reset all items to original positions first 1286 1286 - for (const it of items) { 1287 1287 - const origPos = activeDragElement.originalPositions.get(it.id); 1288 1288 - if (origPos && it !== activeDragElement.item) { 1289 1289 - if (isMobile) { 1290 1290 - it.mobileX = origPos.mobileX; 1291 1291 - it.mobileY = origPos.mobileY; 1292 1292 - } else { 1293 1293 - it.x = origPos.x; 1294 1294 - it.y = origPos.y; 1295 1295 - } 1296 1296 - } 1297 1297 - } 1298 1298 - 1299 1299 - // Update dragged item position 1300 1300 - if (isMobile) { 1301 1301 - activeDragElement.item.mobileX = result.x; 1302 1302 - activeDragElement.item.mobileY = result.y; 1303 1303 - } else { 1304 1304 - activeDragElement.item.x = result.x; 1305 1305 - activeDragElement.item.y = result.y; 1306 1306 - } 1307 1307 - 1308 1308 - // Handle horizontal swap 1309 1309 - if (result.swapWithId && draggedOrigPos) { 1310 1310 - const swapTarget = items.find((it) => it.id === result.swapWithId); 1311 1311 - if (swapTarget) { 1312 1312 - // Move swap target to dragged card's original position 1313 1313 - if (isMobile) { 1314 1314 - swapTarget.mobileX = draggedOrigPos.mobileX; 1315 1315 - swapTarget.mobileY = draggedOrigPos.mobileY; 1316 1316 - } else { 1317 1317 - swapTarget.x = draggedOrigPos.x; 1318 1318 - swapTarget.y = draggedOrigPos.y; 1319 1319 - } 1320 1320 - } 1321 1321 - } 1322 1322 - 1323 1323 - // Now fix collisions (with compacting) 1324 1324 - fixCollisions(items, activeDragElement.item, isMobile); 1325 1325 - } 1326 1326 - 1327 1327 - // Auto-scroll when dragging near top or bottom of viewport 1328 1328 - const scrollZone = 100; 1329 1329 - const scrollSpeed = 10; 1330 1330 - const viewportHeight = window.innerHeight; 1331 1331 - 1332 1332 - if (e.clientY < scrollZone) { 1333 1333 - // Near top - scroll up 1334 1334 - const intensity = 1 - e.clientY / scrollZone; 1335 1335 - window.scrollBy(0, -scrollSpeed * intensity); 1336 1336 - } else if (e.clientY > viewportHeight - scrollZone) { 1337 1337 - // Near bottom - scroll down 1338 1338 - const intensity = 1 - (viewportHeight - e.clientY) / scrollZone; 1339 1339 - window.scrollBy(0, scrollSpeed * intensity); 1340 1340 - } 1341 1341 - }} 1342 1342 - ondragend={async (e) => { 1343 1343 - e.preventDefault(); 1344 1344 - // safari fix 1345 1345 - activeDragElement.x = -1; 1346 1346 - activeDragElement.y = -1; 1347 1347 - activeDragElement.element = null; 1348 1348 - activeDragElement.item = null; 1349 1349 - activeDragElement.lastTargetId = null; 1350 1350 - activeDragElement.lastPlacement = null; 1351 1351 - return true; 870 870 + <EditableGrid 871 871 + bind:items 872 872 + bind:ref={gridContainer} 873 873 + {isMobile} 874 874 + {selectedCardId} 875 875 + {isCoarse} 876 876 + onlayoutchange={onLayoutChanged} 877 877 + ondeselect={() => { 878 878 + selectedCardId = null; 1352 879 }} 1353 1353 - class={[ 1354 1354 - '@container/grid pointer-events-auto relative col-span-3 rounded-4xl px-2 py-8 @5xl/wrapper:px-8', 1355 1355 - imageDragOver && 'outline-accent-500 outline-3 -outline-offset-10 outline-dashed' 1356 1356 - ]} 880 880 + onfiledrop={handleFileDrop} 1357 881 > 1358 882 {#each items as item, i (item.id)} 1359 1359 - <!-- {#if item !== activeDragElement.item} --> 1360 883 <BaseEditingCard 1361 884 bind:item={items[i]} 1362 885 ondelete={() => { ··· 1377 900 fixCollisions(items, item, isMobile); 1378 901 onLayoutChanged(); 1379 902 }} 1380 1380 - ondragstart={(e: DragEvent) => { 1381 1381 - const target = e.currentTarget as HTMLDivElement; 1382 1382 - activeDragElement.element = target; 1383 1383 - activeDragElement.w = item.w; 1384 1384 - activeDragElement.h = item.h; 1385 1385 - activeDragElement.item = item; 1386 1386 - // fix for div shadow during drag and drop 1387 1387 - const transparent = document.createElement('div'); 1388 1388 - transparent.style.position = 'fixed'; 1389 1389 - transparent.style.top = '-1000px'; 1390 1390 - transparent.style.width = '1px'; 1391 1391 - transparent.style.height = '1px'; 1392 1392 - document.body.appendChild(transparent); 1393 1393 - e.dataTransfer?.setDragImage(transparent, 0, 0); 1394 1394 - requestAnimationFrame(() => transparent.remove()); 1395 1395 - 1396 1396 - // Store original positions of all items 1397 1397 - activeDragElement.originalPositions = new Map(); 1398 1398 - for (const it of items) { 1399 1399 - activeDragElement.originalPositions.set(it.id, { 1400 1400 - x: it.x, 1401 1401 - y: it.y, 1402 1402 - mobileX: it.mobileX, 1403 1403 - mobileY: it.mobileY 1404 1404 - }); 1405 1405 - } 1406 1406 - 1407 1407 - const rect = target.getBoundingClientRect(); 1408 1408 - activeDragElement.mouseDeltaX = rect.left - e.clientX; 1409 1409 - activeDragElement.mouseDeltaY = rect.top - e.clientY; 1410 1410 - }} 1411 903 > 1412 904 <EditingCard bind:item={items[i]} /> 1413 905 </BaseEditingCard> 1414 1414 - <!-- {/if} --> 1415 906 {/each} 1416 1416 - 1417 1417 - <div style="height: {((maxHeight + 2) / 8) * 100}cqw;"></div> 1418 1418 - </div> 907 907 + </EditableGrid> 1419 908 </div> 1420 909 </div> 1421 910 ··· 1472 961 class="bg-base-900/70 text-base-100 fixed top-2 right-2 z-50 flex items-center gap-2 rounded px-2 py-1 font-mono text-xs" 1473 962 > 1474 963 <span>editedOn: {editedOn}</span> 1475 1475 - <button class="underline" onclick={addAllCardTypes}>+ all cards</button> 1476 1476 - <input 1477 1477 - bind:value={copyInput} 1478 1478 - placeholder="handle/page" 1479 1479 - class="bg-base-800 text-base-100 w-32 rounded px-1 py-0.5" 1480 1480 - onkeydown={(e) => { 1481 1481 - if (e.key === 'Enter') copyPageFrom(); 1482 1482 - }} 1483 1483 - /> 1484 1484 - <button class="underline" onclick={copyPageFrom} disabled={isCopying}> 1485 1485 - {isCopying ? 'copying...' : 'copy'} 1486 1486 - </button> 1487 964 </div> 1488 965 {/if} 1489 966 </Context>

+32

src/lib/website/ThemeScript.svelte

··· 1 1 <script lang="ts"> 2 2 + import { browser } from '$app/environment'; 3 3 + 2 4 let { 3 5 accentColor = 'pink', 4 6 baseColor = 'stone' ··· 7 9 baseColor?: string; 8 10 } = $props(); 9 11 12 12 + const allAccentColors = [ 13 13 + 'red', 14 14 + 'orange', 15 15 + 'amber', 16 16 + 'yellow', 17 17 + 'lime', 18 18 + 'green', 19 19 + 'emerald', 20 20 + 'teal', 21 21 + 'cyan', 22 22 + 'sky', 23 23 + 'blue', 24 24 + 'indigo', 25 25 + 'violet', 26 26 + 'purple', 27 27 + 'fuchsia', 28 28 + 'pink', 29 29 + 'rose' 30 30 + ]; 31 31 + const allBaseColors = ['gray', 'stone', 'zinc', 'neutral', 'slate']; 32 32 + 10 33 const safeJson = (v: string) => JSON.stringify(v).replace(/</g, '\\u003c'); 11 34 35 35 + // SSR: inline script for initial page load (no FOUC) 12 36 let script = $derived( 13 37 `<script>(function(){document.documentElement.classList.add(${safeJson(accentColor)},${safeJson(baseColor)});})();<` + 14 38 '/script>' 15 39 ); 40 40 + 41 41 + // Client: reactive effect for client-side navigations 42 42 + $effect(() => { 43 43 + if (!browser) return; 44 44 + const el = document.documentElement; 45 45 + el.classList.remove(...allAccentColors, ...allBaseColors); 46 46 + el.classList.add(accentColor, baseColor); 47 47 + }); 16 48 </script> 17 49 18 50 <svelte:head>

-72

src/lib/website/layout-mirror.ts

··· 1 1 - import { COLUMNS } from '$lib'; 2 2 - import { CardDefinitionsByType } from '$lib/cards'; 3 3 - import { clamp, findValidPosition, fixAllCollisions } from '$lib/helper'; 4 4 - import type { Item } from '$lib/types'; 5 5 - 6 6 - /** 7 7 - * Returns true when mirroring should still happen (i.e. user hasn't edited both layouts). 8 8 - * editedOn: 0/undefined = never, 1 = desktop only, 2 = mobile only, 3 = both 9 9 - */ 10 10 - export function shouldMirror(editedOn: number | undefined): boolean { 11 11 - return (editedOn ?? 0) !== 3; 12 12 - } 13 13 - 14 14 - /** Snap a value to the nearest even integer (min 2). */ 15 15 - function snapEven(v: number): number { 16 16 - return Math.max(2, Math.round(v / 2) * 2); 17 17 - } 18 18 - 19 19 - /** 20 20 - * Compute the other layout's size for a single item, preserving aspect ratio. 21 21 - * Clamps to the card definition's minW/maxW/minH/maxH if defined. 22 22 - * Mutates the item in-place. 23 23 - */ 24 24 - export function mirrorItemSize(item: Item, fromMobile: boolean): void { 25 25 - const def = CardDefinitionsByType[item.cardType]; 26 26 - 27 27 - if (fromMobile) { 28 28 - // Mobile → Desktop: halve both dimensions, then clamp to card def constraints 29 29 - // (constraints are in desktop units) 30 30 - item.w = clamp(snapEven(item.mobileW / 2), def?.minW ?? 2, def?.maxW ?? COLUMNS); 31 31 - item.h = clamp(Math.round(item.mobileH / 2), def?.minH ?? 1, def?.maxH ?? Infinity); 32 32 - } else { 33 33 - // Desktop → Mobile: double both dimensions 34 34 - // (don't apply card def constraints — they're in desktop units) 35 35 - item.mobileW = Math.min(item.w * 2, COLUMNS); 36 36 - item.mobileH = Math.max(item.h * 2, 2); 37 37 - } 38 38 - } 39 39 - 40 40 - /** 41 41 - * Mirror the full layout from one view to the other. 42 42 - * Copies sizes proportionally and maps positions, then resolves collisions. 43 43 - * Mutates items in-place. 44 44 - */ 45 45 - export function mirrorLayout(items: Item[], fromMobile: boolean): void { 46 46 - // Mirror sizes first 47 47 - for (const item of items) { 48 48 - mirrorItemSize(item, fromMobile); 49 49 - } 50 50 - 51 51 - if (fromMobile) { 52 52 - // Mobile → Desktop: reflow items to use the full grid width. 53 53 - // Sort by mobile position so items are placed in reading order. 54 54 - const sorted = items.toSorted((a, b) => a.mobileY - b.mobileY || a.mobileX - b.mobileX); 55 55 - 56 56 - // Place each item into the first available spot on the desktop grid 57 57 - const placed: Item[] = []; 58 58 - for (const item of sorted) { 59 59 - item.x = 0; 60 60 - item.y = 0; 61 61 - findValidPosition(item, placed, false); 62 62 - placed.push(item); 63 63 - } 64 64 - } else { 65 65 - // Desktop → Mobile: proportional positions 66 66 - for (const item of items) { 67 67 - item.mobileX = clamp(Math.floor((item.x * 2) / 2) * 2, 0, COLUMNS - item.mobileW); 68 68 - item.mobileY = Math.max(0, Math.round(item.y * 2)); 69 69 - } 70 70 - fixAllCollisions(items, true); 71 71 - } 72 72 - }

+23 -24

src/lib/website/load.ts

··· 1 1 import { getDetailedProfile, listRecords, resolveHandle, parseUri, getRecord } from '$lib/atproto'; 2 2 import { CardDefinitionsByType } from '$lib/cards'; 3 3 import type { Item, UserCache, WebsiteData } from '$lib/types'; 4 4 - import { compactItems, fixAllCollisions } from '$lib/helper'; 5 4 import { error } from '@sveltejs/kit'; 6 5 import type { ActorIdentifier, Did } from '@atcute/lexicons'; 7 6 8 7 import { isDid, isHandle } from '@atcute/lexicons/syntax'; 8 8 + import { fixAllCollisions, compactItems } from '$lib/layout'; 9 9 10 10 const CURRENT_CACHE_VERSION = 1; 11 11 ··· 73 73 throw error(404); 74 74 } 75 75 76 76 - const cards = await listRecords({ did, collection: 'app.blento.card' }).catch(() => { 77 77 - console.error('error getting records for collection app.blento.card'); 78 78 - return [] as Awaited<ReturnType<typeof listRecords>>; 79 79 - }); 80 80 - 81 81 - const mainPublication = await getRecord({ 82 82 - did, 83 83 - collection: 'site.standard.publication', 84 84 - rkey: 'blento.self' 85 85 - }).catch(() => { 86 86 - console.error('error getting record for collection site.standard.publication'); 87 87 - return undefined; 88 88 - }); 89 89 - 90 90 - const pages = await listRecords({ did, collection: 'app.blento.page' }).catch(() => { 91 91 - console.error('error getting records for collection app.blento.page'); 92 92 - return [] as Awaited<ReturnType<typeof listRecords>>; 93 93 - }); 94 94 - 95 95 - const profile = await getDetailedProfile({ did }); 76 76 + const [cards, mainPublication, pages, profile] = await Promise.all([ 77 77 + listRecords({ did, collection: 'app.blento.card' }).catch(() => { 78 78 + console.error('error getting records for collection app.blento.card'); 79 79 + return [] as Awaited<ReturnType<typeof listRecords>>; 80 80 + }), 81 81 + getRecord({ 82 82 + did, 83 83 + collection: 'site.standard.publication', 84 84 + rkey: 'blento.self' 85 85 + }).catch(() => { 86 86 + console.error('error getting record for collection site.standard.publication'); 87 87 + return undefined; 88 88 + }), 89 89 + listRecords({ did, collection: 'app.blento.page' }).catch(() => { 90 90 + console.error('error getting records for collection app.blento.page'); 91 91 + return [] as Awaited<ReturnType<typeof listRecords>>; 92 92 + }), 93 93 + getDetailedProfile({ did }) 94 94 + ]); 96 95 97 96 const cardTypes = new Set(cards.map((v) => v.value.cardType ?? '') as string[]); 98 97 const cardTypesArray = Array.from(cardTypes); ··· 144 143 const stringifiedResult = JSON.stringify(result); 145 144 await cache?.put?.(handle, stringifiedResult); 146 145 147 147 - const parsedResult = JSON.parse(stringifiedResult); 146 146 + const parsedResult = structuredClone(result) as any; 148 147 149 148 parsedResult.publication = ( 150 149 parsedResult.publications as Awaited<ReturnType<typeof listRecords>> ··· 203 202 const cards = data.cards.filter((v) => v.page === data.page); 204 203 205 204 if (cards.length > 0) { 206 206 - fixAllCollisions(cards); 205 205 + fixAllCollisions(cards, false); 207 206 fixAllCollisions(cards, true); 208 207 209 209 - compactItems(cards); 208 208 + compactItems(cards, false); 210 209 compactItems(cards, true); 211 210 } 212 211

+2 -1

src/params/handle.ts

··· 1 1 + import { isActorIdentifier } from '@atcute/lexicons/syntax'; 1 2 import type { ParamMatcher } from '@sveltejs/kit'; 2 3 3 4 export const match = ((param: string) => { 4 4 - return param.includes('.') || param.startsWith('did:'); 5 5 + return isActorIdentifier(param); 5 6 }) satisfies ParamMatcher;

+4 -1

src/routes/+layout.svelte

··· 1 1 <script lang="ts"> 2 2 import '../app.css'; 3 3 4 4 + import { Tooltip } from 'bits-ui'; 4 5 import { ThemeToggle, Toaster, toast } from '@foxui/core'; 5 6 import { onMount } from 'svelte'; 6 7 import { initClient } from '$lib/atproto'; ··· 28 29 }); 29 30 </script> 30 31 31 31 - {@render children()} 32 32 + <Tooltip.Provider delayDuration={300}> 33 33 + {@render children()} 34 34 + </Tooltip.Provider> 32 35 33 36 <ThemeToggle class="fixed top-2 left-2 z-10" /> 34 37 <Toaster />

+13

src/routes/[handle=handle]/(pages)/+layout.server.ts

··· 1 1 + import { loadData } from '$lib/website/load'; 2 2 + import { env } from '$env/dynamic/private'; 3 3 + import { error } from '@sveltejs/kit'; 4 4 + import type { UserCache } from '$lib/types'; 5 5 + import type { Handle } from '@atcute/lexicons'; 6 6 + 7 7 + export async function load({ params, platform }) { 8 8 + if (env.PUBLIC_IS_SELFHOSTED) error(404); 9 9 + 10 10 + const cache = platform?.env?.USER_DATA_CACHE as unknown; 11 11 + 12 12 + return await loadData(params.handle as Handle, cache as UserCache, false, params.page); 13 13 + }

+13

src/routes/[handle=handle]/(pages)/+page.svelte

··· 1 1 + <script lang="ts"> 2 2 + import { refreshData } from '$lib/helper.js'; 3 3 + import Website from '$lib/website/Website.svelte'; 4 4 + import { onMount } from 'svelte'; 5 5 + 6 6 + let { data } = $props(); 7 7 + 8 8 + onMount(() => { 9 9 + refreshData(data); 10 10 + }); 11 11 + </script> 12 12 + 13 13 + <Website {data} />

+6

src/routes/[handle=handle]/(pages)/edit/+page.svelte

··· 1 1 + <script lang="ts"> 2 2 + import EditableWebsite from '$lib/website/EditableWebsite.svelte'; 3 3 + let { data } = $props(); 4 4 + </script> 5 5 + 6 6 + <EditableWebsite {data} />

+13

src/routes/[handle=handle]/(pages)/p/[[page]]/+page.svelte

··· 1 1 + <script lang="ts"> 2 2 + import { refreshData } from '$lib/helper.js'; 3 3 + import Website from '$lib/website/Website.svelte'; 4 4 + import { onMount } from 'svelte'; 5 5 + 6 6 + let { data } = $props(); 7 7 + 8 8 + onMount(() => { 9 9 + refreshData(data); 10 10 + }); 11 11 + </script> 12 12 + 13 13 + <Website {data} />

+252

src/routes/[handle=handle]/(pages)/p/[[page]]/copy/+page.svelte

··· 1 1 + <script lang="ts"> 2 2 + import { 3 3 + putRecord, 4 4 + deleteRecord, 5 5 + listRecords, 6 6 + uploadBlob, 7 7 + getCDNImageBlobUrl 8 8 + } from '$lib/atproto/methods'; 9 9 + import { user } from '$lib/atproto/auth.svelte'; 10 10 + import { goto } from '$app/navigation'; 11 11 + import * as TID from '@atcute/tid'; 12 12 + import { Button } from '@foxui/core'; 13 13 + import { loginModalState } from '$lib/atproto/UI/LoginModal.svelte'; 14 14 + 15 15 + let { data } = $props(); 16 16 + 17 17 + let destinationPage = $state(''); 18 18 + let copying = $state(false); 19 19 + let error = $state(''); 20 20 + let success = $state(false); 21 21 + 22 22 + const sourceHandle = $derived(data.handle); 23 23 + 24 24 + const sourcePage = $derived( 25 25 + data.page === 'blento.self' ? 'main' : data.page.replace('blento.', '') 26 26 + ); 27 27 + const sourceCards = $derived(data.cards); 28 28 + 29 29 + // Re-upload blobs from source repo to current user's repo 30 30 + async function reuploadBlobs(obj: any, sourceDid: string): Promise<void> { 31 31 + if (!obj || typeof obj !== 'object') return; 32 32 + 33 33 + for (const key of Object.keys(obj)) { 34 34 + const value = obj[key]; 35 35 + 36 36 + if (value && typeof value === 'object') { 37 37 + // Check if this is a blob reference 38 38 + if (value.$type === 'blob' && value.ref?.$link) { 39 39 + try { 40 40 + // Get the blob URL from source repo 41 41 + const blobUrl = getCDNImageBlobUrl({ did: sourceDid, blob: value }); 42 42 + if (!blobUrl) continue; 43 43 + 44 44 + // Fetch the blob via proxy to avoid CORS 45 45 + const response = await fetch(`/api/image-proxy?url=${encodeURIComponent(blobUrl)}`); 46 46 + if (!response.ok) { 47 47 + console.error('Failed to fetch blob:', blobUrl); 48 48 + continue; 49 49 + } 50 50 + 51 51 + // Upload to current user's repo 52 52 + const blob = await response.blob(); 53 53 + const newBlobRef = await uploadBlob({ blob }); 54 54 + 55 55 + if (newBlobRef) { 56 56 + // Replace with new blob reference 57 57 + obj[key] = newBlobRef; 58 58 + } 59 59 + } catch (err) { 60 60 + console.error('Failed to re-upload blob:', err); 61 61 + } 62 62 + } else { 63 63 + // Recursively check nested objects 64 64 + await reuploadBlobs(value, sourceDid); 65 65 + } 66 66 + } 67 67 + } 68 68 + } 69 69 + 70 70 + async function copyPage() { 71 71 + if (!user.isLoggedIn || !user.did) { 72 72 + error = 'You must be logged in to copy pages'; 73 73 + return; 74 74 + } 75 75 + 76 76 + copying = true; 77 77 + error = ''; 78 78 + 79 79 + try { 80 80 + const targetPage = 81 81 + destinationPage.trim() === '' ? 'blento.self' : `blento.${destinationPage.trim()}`; 82 82 + 83 83 + // Fetch existing cards from destination page and delete them 84 84 + const existingCards = await listRecords({ 85 85 + did: user.did, 86 86 + collection: 'app.blento.card' 87 87 + }); 88 88 + 89 89 + const cardsToDelete = existingCards.filter( 90 90 + (card: { value: { page?: string } }) => card.value.page === targetPage 91 91 + ); 92 92 + 93 93 + // Delete existing cards from destination page 94 94 + const deletePromises = cardsToDelete.map((card: { uri: string }) => { 95 95 + const rkey = card.uri.split('/').pop()!; 96 96 + return deleteRecord({ 97 97 + collection: 'app.blento.card', 98 98 + rkey 99 99 + }); 100 100 + }); 101 101 + 102 102 + await Promise.all(deletePromises); 103 103 + 104 104 + // Copy each card with a new ID to the destination page 105 105 + // Re-upload blobs from source repo to current user's repo 106 106 + for (const card of sourceCards) { 107 107 + const newCard = { 108 108 + ...structuredClone(card), 109 109 + id: TID.now(), 110 110 + page: targetPage, 111 111 + updatedAt: new Date().toISOString(), 112 112 + version: 2 113 113 + }; 114 114 + 115 115 + // Re-upload any blobs in cardData 116 116 + await reuploadBlobs(newCard.cardData, data.did); 117 117 + 118 118 + await putRecord({ 119 119 + collection: 'app.blento.card', 120 120 + rkey: newCard.id, 121 121 + record: newCard 122 122 + }); 123 123 + } 124 124 + 125 125 + const userHandle = user.profile?.handle ?? data.handle; 126 126 + 127 127 + // Copy publication data if it exists 128 128 + if (data.publication) { 129 129 + const publicationCopy = structuredClone(data.publication) as Record<string, unknown>; 130 130 + 131 131 + // Re-upload any blobs in publication (e.g., icon) 132 132 + await reuploadBlobs(publicationCopy, data.did); 133 133 + 134 134 + // Update the URL to point to the user's page 135 135 + publicationCopy.url = `https://blento.app/${userHandle}`; 136 136 + if (targetPage !== 'blento.self') { 137 137 + publicationCopy.url += '/' + targetPage.replace('blento.', ''); 138 138 + } 139 139 + 140 140 + // Save to appropriate collection based on destination page type 141 141 + if (targetPage === 'blento.self') { 142 142 + await putRecord({ 143 143 + collection: 'site.standard.publication', 144 144 + rkey: targetPage, 145 145 + record: publicationCopy 146 146 + }); 147 147 + } else { 148 148 + await putRecord({ 149 149 + collection: 'app.blento.page', 150 150 + rkey: targetPage, 151 151 + record: publicationCopy 152 152 + }); 153 153 + } 154 154 + } 155 155 + 156 156 + // Refresh the logged-in user's cache 157 157 + await fetch(`/${userHandle}/api/refresh`); 158 158 + 159 159 + success = true; 160 160 + 161 161 + // Redirect to the logged-in user's destination page edit 162 162 + const destPath = destinationPage.trim() === '' ? '' : `/${destinationPage.trim()}`; 163 163 + setTimeout(() => { 164 164 + goto(`/${userHandle}${destPath}/edit`); 165 165 + }, 1000); 166 166 + } catch (e) { 167 167 + error = e instanceof Error ? e.message : 'Failed to copy page'; 168 168 + } finally { 169 169 + copying = false; 170 170 + } 171 171 + } 172 172 + </script> 173 173 + 174 174 + <div class="bg-base-50 dark:bg-base-900 flex min-h-screen items-center justify-center p-4"> 175 175 + <div class="bg-base-100 dark:bg-base-800 w-full max-w-md rounded-2xl p-6 shadow-lg"> 176 176 + {#if user.isLoggedIn} 177 177 + <h1 class="text-base-900 dark:text-base-50 mb-6 text-2xl font-bold">Copy Page</h1> 178 178 + 179 179 + <div class="mb-4"> 180 180 + <div class="text-base-700 dark:text-base-300 mb-1 block text-sm font-medium"> 181 181 + Source Page 182 182 + </div> 183 183 + <div 184 184 + class="bg-base-200 dark:bg-base-700 text-base-900 dark:text-base-100 rounded-lg px-3 py-2" 185 185 + > 186 186 + {sourceHandle}/{sourcePage || 'main'} 187 187 + </div> 188 188 + <p class="text-base-500 mt-1 text-sm">{sourceCards.length} cards</p> 189 189 + </div> 190 190 + 191 191 + <div class="mb-6"> 192 192 + <label 193 193 + for="destination" 194 194 + class="text-base-700 dark:text-base-300 mb-1 block text-sm font-medium" 195 195 + > 196 196 + Destination Page (on your profile: {user.profile?.handle}) 197 197 + </label> 198 198 + <input 199 199 + id="destination" 200 200 + type="text" 201 201 + bind:value={destinationPage} 202 202 + placeholder="Leave empty for main page" 203 203 + class="bg-base-50 dark:bg-base-700 border-base-300 dark:border-base-600 text-base-900 dark:text-base-100 focus:ring-accent-500 w-full rounded-lg border px-3 py-2 focus:ring-2 focus:outline-none" 204 204 + /> 205 205 + </div> 206 206 + 207 207 + {#if error} 208 208 + <div 209 209 + class="mb-4 rounded-lg bg-red-100 p-3 text-red-700 dark:bg-red-900/30 dark:text-red-400" 210 210 + > 211 211 + {error} 212 212 + </div> 213 213 + {/if} 214 214 + 215 215 + {#if success} 216 216 + <div 217 217 + class="mb-4 rounded-lg bg-green-100 p-3 text-green-700 dark:bg-green-900/30 dark:text-green-400" 218 218 + > 219 219 + Page copied successfully! Redirecting... 220 220 + </div> 221 221 + {/if} 222 222 + 223 223 + <div class="flex gap-3"> 224 224 + <a 225 225 + href="/{data.handle}/{sourcePage === 'main' ? '' : sourcePage}" 226 226 + class="bg-base-200 hover:bg-base-300 dark:bg-base-700 dark:hover:bg-base-600 text-base-700 dark:text-base-300 flex-1 rounded-lg px-4 py-2 text-center font-medium transition-colors" 227 227 + > 228 228 + Cancel 229 229 + </a> 230 230 + <button 231 231 + onclick={copyPage} 232 232 + disabled={copying || success} 233 233 + class="bg-accent-500 hover:bg-accent-600 flex-1 rounded-lg px-4 py-2 font-medium text-white transition-colors disabled:cursor-not-allowed disabled:opacity-50" 234 234 + > 235 235 + {#if copying} 236 236 + Copying... 237 237 + {:else} 238 238 + Copy {sourceCards.length} cards 239 239 + {/if} 240 240 + </button> 241 241 + </div> 242 242 + {:else} 243 243 + <h1 class="text-base-900 dark:text-base-50 mb-6 text-2xl font-bold"> 244 244 + You must be signed in to copy a page! 245 245 + </h1> 246 246 + 247 247 + <div class="flex w-full justify-center"> 248 248 + <Button size="lg" onclick={() => loginModalState.show()}>Login</Button> 249 249 + </div> 250 250 + {/if} 251 251 + </div> 252 252 + </div>

+6

src/routes/[handle=handle]/(pages)/p/[[page]]/edit/+page.svelte

··· 1 1 + <script lang="ts"> 2 2 + import EditableWebsite from '$lib/website/EditableWebsite.svelte'; 3 3 + let { data } = $props(); 4 4 + </script> 5 5 + 6 6 + <EditableWebsite {data} />

-13

src/routes/[handle=handle]/[[page]]/+layout.server.ts

··· 1 1 - import { loadData } from '$lib/website/load'; 2 2 - import { env } from '$env/dynamic/private'; 3 3 - import { error } from '@sveltejs/kit'; 4 4 - import type { UserCache } from '$lib/types'; 5 5 - import type { Handle } from '@atcute/lexicons'; 6 6 - 7 7 - export async function load({ params, platform }) { 8 8 - if (env.PUBLIC_IS_SELFHOSTED) error(404); 9 9 - 10 10 - const cache = platform?.env?.USER_DATA_CACHE as unknown; 11 11 - 12 12 - return await loadData(params.handle as Handle, cache as UserCache, false, params.page); 13 13 - }

-13

src/routes/[handle=handle]/[[page]]/+page.svelte

··· 1 1 - <script lang="ts"> 2 2 - import { refreshData } from '$lib/helper.js'; 3 3 - import Website from '$lib/website/Website.svelte'; 4 4 - import { onMount } from 'svelte'; 5 5 - 6 6 - let { data } = $props(); 7 7 - 8 8 - onMount(() => { 9 9 - refreshData(data); 10 10 - }); 11 11 - </script> 12 12 - 13 13 - <Website {data} />

-6

src/routes/[handle=handle]/[[page]]/edit/+page.svelte

··· 1 1 - <script lang="ts"> 2 2 - import EditableWebsite from '$lib/website/EditableWebsite.svelte'; 3 3 - let { data } = $props(); 4 4 - </script> 5 5 - 6 6 - <EditableWebsite {data} />

+89

src/routes/api/lastfm/+server.ts

··· 1 1 + import { json } from '@sveltejs/kit'; 2 2 + import type { RequestHandler } from './$types'; 3 3 + import { env } from '$env/dynamic/private'; 4 4 + 5 5 + const LASTFM_API_URL = 'https://ws.audioscrobbler.com/2.0/'; 6 6 + 7 7 + const ALLOWED_METHODS = [ 8 8 + 'user.getRecentTracks', 9 9 + 'user.getTopTracks', 10 10 + 'user.getTopAlbums', 11 11 + 'user.getInfo' 12 12 + ]; 13 13 + 14 14 + const CACHE_TTL: Record<string, number> = { 15 15 + 'user.getRecentTracks': 15 * 60 * 1000, 16 16 + 'user.getTopTracks': 60 * 60 * 1000, 17 17 + 'user.getTopAlbums': 60 * 60 * 1000, 18 18 + 'user.getInfo': 12 * 60 * 60 * 1000 19 19 + }; 20 20 + 21 21 + export const GET: RequestHandler = async ({ url, platform }) => { 22 22 + const method = url.searchParams.get('method'); 23 23 + const user = url.searchParams.get('user'); 24 24 + const period = url.searchParams.get('period') || '7day'; 25 25 + const limit = url.searchParams.get('limit') || '50'; 26 26 + 27 27 + if (!method || !user) { 28 28 + return json({ error: 'Missing method or user parameter' }, { status: 400 }); 29 29 + } 30 30 + 31 31 + if (!ALLOWED_METHODS.includes(method)) { 32 32 + return json({ error: 'Method not allowed' }, { status: 400 }); 33 33 + } 34 34 + 35 35 + const cacheKey = `#lastfm:${method}:${user}:${period}:${limit}`; 36 36 + const cachedData = await platform?.env?.USER_DATA_CACHE?.get(cacheKey); 37 37 + 38 38 + if (cachedData) { 39 39 + const parsed = JSON.parse(cachedData); 40 40 + const ttl = CACHE_TTL[method] || 60 * 60 * 1000; 41 41 + 42 42 + if (Date.now() - (parsed._cachedAt || 0) < ttl) { 43 43 + return json(parsed); 44 44 + } 45 45 + } 46 46 + 47 47 + const apiKey = env?.LASTFM_API_KEY; 48 48 + if (!apiKey) { 49 49 + return json({ error: 'Last.fm API key not configured' }, { status: 500 }); 50 50 + } 51 51 + 52 52 + try { 53 53 + const params = new URLSearchParams({ 54 54 + method, 55 55 + user, 56 56 + api_key: apiKey, 57 57 + format: 'json', 58 58 + limit 59 59 + }); 60 60 + 61 61 + if (method === 'user.getTopTracks' || method === 'user.getTopAlbums') { 62 62 + params.set('period', period); 63 63 + } 64 64 + 65 65 + const response = await fetch(`${LASTFM_API_URL}?${params}`); 66 66 + 67 67 + if (!response.ok) { 68 68 + return json( 69 69 + { error: 'Failed to fetch Last.fm data: ' + response.statusText }, 70 70 + { status: response.status } 71 71 + ); 72 72 + } 73 73 + 74 74 + const data = await response.json(); 75 75 + 76 76 + if (data.error) { 77 77 + return json({ error: data.message || 'Last.fm API error' }, { status: 400 }); 78 78 + } 79 79 + 80 80 + data._cachedAt = Date.now(); 81 81 + 82 82 + await platform?.env?.USER_DATA_CACHE?.put(cacheKey, JSON.stringify(data)); 83 83 + 84 84 + return json(data); 85 85 + } catch (error) { 86 86 + console.error('Error fetching Last.fm data:', error); 87 87 + return json({ error: 'Failed to fetch Last.fm data' }, { status: 500 }); 88 88 + } 89 89 + };

+44

src/routes/api/npmx-leaderboard/+server.ts

··· 1 1 + import { json } from '@sveltejs/kit'; 2 2 + import type { RequestHandler } from './$types'; 3 3 + 4 4 + const LEADERBOARD_API_URL = 5 5 + 'https://npmx-likes-leaderboard-api-production.up.railway.app/api/leaderboard/likes?limit=20'; 6 6 + 7 7 + export const GET: RequestHandler = async ({ platform }) => { 8 8 + const cacheKey = '#npmx-leaderboard:likes'; 9 9 + const cachedData = await platform?.env?.USER_DATA_CACHE?.get(cacheKey); 10 10 + 11 11 + if (cachedData) { 12 12 + const parsedCache = JSON.parse(cachedData); 13 13 + 14 14 + const TWELVE_HOURS = 12 * 60 * 60 * 1000; 15 15 + const now = Date.now(); 16 16 + 17 17 + if (now - (parsedCache.updatedAt || 0) < TWELVE_HOURS) { 18 18 + return json(parsedCache.data); 19 19 + } 20 20 + } 21 21 + 22 22 + try { 23 23 + const response = await fetch(LEADERBOARD_API_URL); 24 24 + 25 25 + if (!response.ok) { 26 26 + return json( 27 27 + { error: 'Failed to fetch npmx leaderboard ' + response.statusText }, 28 28 + { status: response.status } 29 29 + ); 30 30 + } 31 31 + 32 32 + const data = await response.json(); 33 33 + 34 34 + await platform?.env?.USER_DATA_CACHE?.put( 35 35 + cacheKey, 36 36 + JSON.stringify({ data, updatedAt: Date.now() }) 37 37 + ); 38 38 + 39 39 + return json(data); 40 40 + } catch (error) { 41 41 + console.error('Error fetching npmx leaderboard:', error); 42 42 + return json({ error: 'Failed to fetch npmx leaderboard' }, { status: 500 }); 43 43 + } 44 44 + };

+25

src/routes/p/[[page]]/+layout.server.ts

··· 1 1 + import { loadData } from '$lib/website/load'; 2 2 + import { env } from '$env/dynamic/public'; 3 3 + import type { UserCache } from '$lib/types'; 4 4 + import type { Did, Handle } from '@atcute/lexicons'; 5 5 + 6 6 + export async function load({ params, platform, request }) { 7 7 + const cache = platform?.env?.USER_DATA_CACHE as unknown; 8 8 + 9 9 + const handle = env.PUBLIC_HANDLE; 10 10 + 11 11 + const kv = platform?.env?.CUSTOM_DOMAINS; 12 12 + 13 13 + const customDomain = request.headers.get('X-Custom-Domain')?.toLocaleLowerCase(); 14 14 + 15 15 + if (kv && customDomain) { 16 16 + try { 17 17 + const did = await kv.get(customDomain); 18 18 + return await loadData(did as Did, cache as UserCache, false, params.page); 19 19 + } catch { 20 20 + console.error('failed'); 21 21 + } 22 22 + } 23 23 + 24 24 + return await loadData(handle as Handle, cache as UserCache, false, params.page); 25 25 + }

+13

src/routes/p/[[page]]/+page.svelte

··· 1 1 + <script lang="ts"> 2 2 + import { refreshData } from '$lib/helper.js'; 3 3 + import Website from '$lib/website/Website.svelte'; 4 4 + import { onMount } from 'svelte'; 5 5 + 6 6 + let { data } = $props(); 7 7 + 8 8 + onMount(() => { 9 9 + refreshData(data); 10 10 + }); 11 11 + </script> 12 12 + 13 13 + <Website {data} />

+252

src/routes/p/[[page]]/copy/+page.svelte

··· 1 1 + <script lang="ts"> 2 2 + import { 3 3 + putRecord, 4 4 + deleteRecord, 5 5 + listRecords, 6 6 + uploadBlob, 7 7 + getCDNImageBlobUrl 8 8 + } from '$lib/atproto/methods'; 9 9 + import { user } from '$lib/atproto/auth.svelte'; 10 10 + import { goto } from '$app/navigation'; 11 11 + import * as TID from '@atcute/tid'; 12 12 + import { Button } from '@foxui/core'; 13 13 + import { loginModalState } from '$lib/atproto/UI/LoginModal.svelte'; 14 14 + 15 15 + let { data } = $props(); 16 16 + 17 17 + let destinationPage = $state(''); 18 18 + let copying = $state(false); 19 19 + let error = $state(''); 20 20 + let success = $state(false); 21 21 + 22 22 + const sourceHandle = $derived(data.handle); 23 23 + 24 24 + const sourcePage = $derived( 25 25 + data.page === 'blento.self' ? 'main' : data.page.replace('blento.', '') 26 26 + ); 27 27 + const sourceCards = $derived(data.cards); 28 28 + 29 29 + // Re-upload blobs from source repo to current user's repo 30 30 + async function reuploadBlobs(obj: any, sourceDid: string): Promise<void> { 31 31 + if (!obj || typeof obj !== 'object') return; 32 32 + 33 33 + for (const key of Object.keys(obj)) { 34 34 + const value = obj[key]; 35 35 + 36 36 + if (value && typeof value === 'object') { 37 37 + // Check if this is a blob reference 38 38 + if (value.$type === 'blob' && value.ref?.$link) { 39 39 + try { 40 40 + // Get the blob URL from source repo 41 41 + const blobUrl = getCDNImageBlobUrl({ did: sourceDid, blob: value }); 42 42 + if (!blobUrl) continue; 43 43 + 44 44 + // Fetch the blob via proxy to avoid CORS 45 45 + const response = await fetch(`/api/image-proxy?url=${encodeURIComponent(blobUrl)}`); 46 46 + if (!response.ok) { 47 47 + console.error('Failed to fetch blob:', blobUrl); 48 48 + continue; 49 49 + } 50 50 + 51 51 + // Upload to current user's repo 52 52 + const blob = await response.blob(); 53 53 + const newBlobRef = await uploadBlob({ blob }); 54 54 + 55 55 + if (newBlobRef) { 56 56 + // Replace with new blob reference 57 57 + obj[key] = newBlobRef; 58 58 + } 59 59 + } catch (err) { 60 60 + console.error('Failed to re-upload blob:', err); 61 61 + } 62 62 + } else { 63 63 + // Recursively check nested objects 64 64 + await reuploadBlobs(value, sourceDid); 65 65 + } 66 66 + } 67 67 + } 68 68 + } 69 69 + 70 70 + async function copyPage() { 71 71 + if (!user.isLoggedIn || !user.did) { 72 72 + error = 'You must be logged in to copy pages'; 73 73 + return; 74 74 + } 75 75 + 76 76 + copying = true; 77 77 + error = ''; 78 78 + 79 79 + try { 80 80 + const targetPage = 81 81 + destinationPage.trim() === '' ? 'blento.self' : `blento.${destinationPage.trim()}`; 82 82 + 83 83 + // Fetch existing cards from destination page and delete them 84 84 + const existingCards = await listRecords({ 85 85 + did: user.did, 86 86 + collection: 'app.blento.card' 87 87 + }); 88 88 + 89 89 + const cardsToDelete = existingCards.filter( 90 90 + (card: { value: { page?: string } }) => card.value.page === targetPage 91 91 + ); 92 92 + 93 93 + // Delete existing cards from destination page 94 94 + const deletePromises = cardsToDelete.map((card: { uri: string }) => { 95 95 + const rkey = card.uri.split('/').pop()!; 96 96 + return deleteRecord({ 97 97 + collection: 'app.blento.card', 98 98 + rkey 99 99 + }); 100 100 + }); 101 101 + 102 102 + await Promise.all(deletePromises); 103 103 + 104 104 + // Copy each card with a new ID to the destination page 105 105 + // Re-upload blobs from source repo to current user's repo 106 106 + for (const card of sourceCards) { 107 107 + const newCard = { 108 108 + ...structuredClone(card), 109 109 + id: TID.now(), 110 110 + page: targetPage, 111 111 + updatedAt: new Date().toISOString(), 112 112 + version: 2 113 113 + }; 114 114 + 115 115 + // Re-upload any blobs in cardData 116 116 + await reuploadBlobs(newCard.cardData, data.did); 117 117 + 118 118 + await putRecord({ 119 119 + collection: 'app.blento.card', 120 120 + rkey: newCard.id, 121 121 + record: newCard 122 122 + }); 123 123 + } 124 124 + 125 125 + const userHandle = user.profile?.handle ?? data.handle; 126 126 + 127 127 + // Copy publication data if it exists 128 128 + if (data.publication) { 129 129 + const publicationCopy = structuredClone(data.publication) as Record<string, unknown>; 130 130 + 131 131 + // Re-upload any blobs in publication (e.g., icon) 132 132 + await reuploadBlobs(publicationCopy, data.did); 133 133 + 134 134 + // Update the URL to point to the user's page 135 135 + publicationCopy.url = `https://blento.app/${userHandle}`; 136 136 + if (targetPage !== 'blento.self') { 137 137 + publicationCopy.url += '/' + targetPage.replace('blento.', ''); 138 138 + } 139 139 + 140 140 + // Save to appropriate collection based on destination page type 141 141 + if (targetPage === 'blento.self') { 142 142 + await putRecord({ 143 143 + collection: 'site.standard.publication', 144 144 + rkey: targetPage, 145 145 + record: publicationCopy 146 146 + }); 147 147 + } else { 148 148 + await putRecord({ 149 149 + collection: 'app.blento.page', 150 150 + rkey: targetPage, 151 151 + record: publicationCopy 152 152 + }); 153 153 + } 154 154 + } 155 155 + 156 156 + // Refresh the logged-in user's cache 157 157 + await fetch(`/${userHandle}/api/refresh`); 158 158 + 159 159 + success = true; 160 160 + 161 161 + // Redirect to the logged-in user's destination page edit 162 162 + const destPath = destinationPage.trim() === '' ? '' : `/${destinationPage.trim()}`; 163 163 + setTimeout(() => { 164 164 + goto(`/${userHandle}${destPath}/edit`); 165 165 + }, 1000); 166 166 + } catch (e) { 167 167 + error = e instanceof Error ? e.message : 'Failed to copy page'; 168 168 + } finally { 169 169 + copying = false; 170 170 + } 171 171 + } 172 172 + </script> 173 173 + 174 174 + <div class="bg-base-50 dark:bg-base-900 flex min-h-screen items-center justify-center p-4"> 175 175 + <div class="bg-base-100 dark:bg-base-800 w-full max-w-md rounded-2xl p-6 shadow-lg"> 176 176 + {#if user.isLoggedIn} 177 177 + <h1 class="text-base-900 dark:text-base-50 mb-6 text-2xl font-bold">Copy Page</h1> 178 178 + 179 179 + <div class="mb-4"> 180 180 + <div class="text-base-700 dark:text-base-300 mb-1 block text-sm font-medium"> 181 181 + Source Page 182 182 + </div> 183 183 + <div 184 184 + class="bg-base-200 dark:bg-base-700 text-base-900 dark:text-base-100 rounded-lg px-3 py-2" 185 185 + > 186 186 + {sourceHandle}/{sourcePage || 'main'} 187 187 + </div> 188 188 + <p class="text-base-500 mt-1 text-sm">{sourceCards.length} cards</p> 189 189 + </div> 190 190 + 191 191 + <div class="mb-6"> 192 192 + <label 193 193 + for="destination" 194 194 + class="text-base-700 dark:text-base-300 mb-1 block text-sm font-medium" 195 195 + > 196 196 + Destination Page (on your profile: {user.profile?.handle}) 197 197 + </label> 198 198 + <input 199 199 + id="destination" 200 200 + type="text" 201 201 + bind:value={destinationPage} 202 202 + placeholder="Leave empty for main page" 203 203 + class="bg-base-50 dark:bg-base-700 border-base-300 dark:border-base-600 text-base-900 dark:text-base-100 focus:ring-accent-500 w-full rounded-lg border px-3 py-2 focus:ring-2 focus:outline-none" 204 204 + /> 205 205 + </div> 206 206 + 207 207 + {#if error} 208 208 + <div 209 209 + class="mb-4 rounded-lg bg-red-100 p-3 text-red-700 dark:bg-red-900/30 dark:text-red-400" 210 210 + > 211 211 + {error} 212 212 + </div> 213 213 + {/if} 214 214 + 215 215 + {#if success} 216 216 + <div 217 217 + class="mb-4 rounded-lg bg-green-100 p-3 text-green-700 dark:bg-green-900/30 dark:text-green-400" 218 218 + > 219 219 + Page copied successfully! Redirecting... 220 220 + </div> 221 221 + {/if} 222 222 + 223 223 + <div class="flex gap-3"> 224 224 + <a 225 225 + href="/{data.handle}/{sourcePage === 'main' ? '' : sourcePage}" 226 226 + class="bg-base-200 hover:bg-base-300 dark:bg-base-700 dark:hover:bg-base-600 text-base-700 dark:text-base-300 flex-1 rounded-lg px-4 py-2 text-center font-medium transition-colors" 227 227 + > 228 228 + Cancel 229 229 + </a> 230 230 + <button 231 231 + onclick={copyPage} 232 232 + disabled={copying || success} 233 233 + class="bg-accent-500 hover:bg-accent-600 flex-1 rounded-lg px-4 py-2 font-medium text-white transition-colors disabled:cursor-not-allowed disabled:opacity-50" 234 234 + > 235 235 + {#if copying} 236 236 + Copying... 237 237 + {:else} 238 238 + Copy {sourceCards.length} cards 239 239 + {/if} 240 240 + </button> 241 241 + </div> 242 242 + {:else} 243 243 + <h1 class="text-base-900 dark:text-base-50 mb-6 text-2xl font-bold"> 244 244 + You must be signed in to copy a page! 245 245 + </h1> 246 246 + 247 247 + <div class="flex w-full justify-center"> 248 248 + <Button size="lg" onclick={() => loginModalState.show()}>Login</Button> 249 249 + </div> 250 250 + {/if} 251 251 + </div> 252 252 + </div>

+6

src/routes/p/[[page]]/edit/+page.svelte

··· 1 1 + <script lang="ts"> 2 2 + import EditableWebsite from '$lib/website/EditableWebsite.svelte'; 3 3 + let { data } = $props(); 4 4 + </script> 5 5 + 6 6 + <EditableWebsite {data} />