diff --git a/src/lib/cards/DinoGameCard/DinoGameCard.svelte b/src/lib/cards/GameCards/DinoGameCard/DinoGameCard.svelte similarity index 91% rename from src/lib/cards/DinoGameCard/DinoGameCard.svelte rename to src/lib/cards/GameCards/DinoGameCard/DinoGameCard.svelte index 39a40d0..b8280a6 100644 --- a/src/lib/cards/DinoGameCard/DinoGameCard.svelte +++ b/src/lib/cards/GameCards/DinoGameCard/DinoGameCard.svelte @@ -1,5 +1,5 @@ - - { - const target = event.target; - - const active = document.activeElement; - const isEditable = - active instanceof HTMLInputElement || - active instanceof HTMLTextAreaElement || - active?.isContentEditable; - - if (isEditable) { - // Let normal paste happen - return; - } - - const text = event.clipboardData?.getData('text/plain'); - - if (!text) return; - - try { - const url = new URL(text); - - let item: Item = { - id: TID.nextStr(), - x: 0, - y: 0, - w: 2, - h: 2, - mobileH: 4, - mobileW: 4, - mobileX: 0, - mobileY: 0, - cardType: '', - cardData: {} - }; - - newItem.item = item; - - for (const cardDef of AllCardDefinitions) { - if (cardDef.onUrlHandler?.(text, item)) { - item.cardType = cardDef.type; - saveNewItem(); - } - } - - newItem = {}; - } catch (e) { - return; - } - }} -/> - - - -{#if !dev} -
- Editing on mobile is not supported yet. Please use a desktop browser. -
-{/if} - -{#if showingMobileView} -
-{/if} - -{#if newItem.modal && newItem.item} - { - saveNewItem(); - }} - bind:item={newItem.item} - oncancel={() => { - newItem = {}; - }} - /> -{/if} - -
- - -
-
- -
{ - e.preventDefault(); - - const cell = getDragXY(e); - if (!cell) return; - - activeDragElement.x = cell.x; - activeDragElement.y = cell.y; - - if (activeDragElement.item) { - if (isMobile) { - activeDragElement.item.mobileX = cell.x; - activeDragElement.item.mobileY = cell.y; - } else { - activeDragElement.item.x = cell.x; - activeDragElement.item.y = cell.y; - } - - fixCollisions(items, activeDragElement.item, isMobile); - } - - // Auto-scroll when dragging near top or bottom of viewport - const scrollZone = 100; - const scrollSpeed = 10; - const viewportHeight = window.innerHeight; - - if (e.clientY < scrollZone) { - // Near top - scroll up - const intensity = 1 - e.clientY / scrollZone; - window.scrollBy(0, -scrollSpeed * intensity); - } else if (e.clientY > viewportHeight - scrollZone) { - // Near bottom - scroll down - const intensity = 1 - (viewportHeight - e.clientY) / scrollZone; - window.scrollBy(0, scrollSpeed * intensity); - } - }} - ondragend={async (e) => { - e.preventDefault(); - const cell = getDragXY(e); - if (!cell) return; - - if (activeDragElement.item) { - if (isMobile) { - activeDragElement.item.mobileX = cell.x; - activeDragElement.item.mobileY = cell.y; - } else { - activeDragElement.item.x = cell.x; - activeDragElement.item.y = cell.y; - } - - fixCollisions(items, activeDragElement.item, isMobile); - } - activeDragElement.x = -1; - activeDragElement.y = -1; - activeDragElement.element = null; - return true; - }} - class="@container/grid relative col-span-3 px-2 py-8 @5xl/wrapper:px-8" - > - {#each items as item, i (item.id)} - - { - items = items.filter((it) => it !== item); - compactItems(items, isMobile); - }} - onsetsize={(newW: number, newH: number) => { - if (isMobile) { - item.mobileW = newW; - item.mobileH = newH; - } else { - item.w = newW; - item.h = newH; - } - - fixCollisions(items, item, isMobile); - }} - ondragstart={(e) => { - const target = e.currentTarget as HTMLDivElement; - activeDragElement.element = target; - activeDragElement.w = item.w; - activeDragElement.h = item.h; - activeDragElement.item = item; - - const rect = target.getBoundingClientRect(); - activeDragElement.mouseDeltaX = rect.left - e.clientX; - activeDragElement.mouseDeltaY = rect.top - e.clientY; - console.log(activeDragElement.mouseDeltaY); - console.log(rect.width); - }} - > - - - - {/each} - -
-
-
-
- - - - -
- {#each sidebarItems as cardDef} - {#if cardDef.sidebarComponent} - newCard(cardDef.type)} /> - {:else if cardDef.sidebarButtonText} - - {/if} - {/each} -
- - -{#if dev || (!client.isLoggedIn && !client.isInitializing) || client.profile?.did === did} - -
- {#if dev} - - {/if} - - - - - - - - - - {#if handle === 'blento.app'} - - {/if} -
-
- - {#if client.isLoggedIn} - - {:else} - { - await login(handle); - return true; - }} - /> - {/if} -
- -{/if} - - diff --git a/src/lib/Settings.svelte b/src/lib/Settings.svelte deleted file mode 100644 index 2aed7a6..0000000 --- a/src/lib/Settings.svelte +++ /dev/null @@ -1,11 +0,0 @@ - - -Settings diff --git a/src/lib/Website.svelte b/src/lib/Website.svelte deleted file mode 100644 index dfdb907..0000000 --- a/src/lib/Website.svelte +++ /dev/null @@ -1,65 +0,0 @@ - - -
- - -
-
-
- {#each items.toSorted(sortItems) as item} - - - - {/each} -
-
-
- -
- made with blento -
-
diff --git a/src/lib/cards/ATProtoCollectionsCard/ATProtoCollectionsCard.svelte b/src/lib/cards/ATProtoCollectionsCard/ATProtoCollectionsCard.svelte index a0e31da..9bdec81 100644 --- a/src/lib/cards/ATProtoCollectionsCard/ATProtoCollectionsCard.svelte +++ b/src/lib/cards/ATProtoCollectionsCard/ATProtoCollectionsCard.svelte @@ -1,9 +1,8 @@ {#if item.cardData.image} diff --git a/src/lib/cards/BlueskyMediaCard/CreateBlueskyMediaCardModal.svelte b/src/lib/cards/BlueskyMediaCard/CreateBlueskyMediaCardModal.svelte index 4285d89..dae69fc 100644 --- a/src/lib/cards/BlueskyMediaCard/CreateBlueskyMediaCardModal.svelte +++ b/src/lib/cards/BlueskyMediaCard/CreateBlueskyMediaCardModal.svelte @@ -4,7 +4,6 @@ import { onMount } from 'svelte'; import { AtpBaseClient } from '@atproto/api'; import { getDidContext } from '$lib/website/context'; - import { getImageBlobUrl } from '$lib/website/utils'; let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props(); diff --git a/src/lib/cards/BlueskyPostCard/BlueskyPostCard.svelte b/src/lib/cards/BlueskyPostCard/BlueskyPostCard.svelte index 3d34247..c7d62db 100644 --- a/src/lib/cards/BlueskyPostCard/BlueskyPostCard.svelte +++ b/src/lib/cards/BlueskyPostCard/BlueskyPostCard.svelte @@ -1,9 +1,8 @@ + +{@render children()} diff --git a/src/lib/website/EditableWebsite.svelte b/src/lib/website/EditableWebsite.svelte new file mode 100644 index 0000000..50ec4bf --- /dev/null +++ b/src/lib/website/EditableWebsite.svelte @@ -0,0 +1,650 @@ + + + { + if (isTyping()) return; + + const text = event.clipboardData?.getData('text/plain'); + + if (!text) return; + + try { + const url = new URL(text); + + let item: Item = { + id: TID.nextStr(), + x: 0, + y: 0, + w: 2, + h: 2, + mobileH: 4, + mobileW: 4, + mobileX: 0, + mobileY: 0, + cardType: '', + cardData: {} + }; + + newItem.item = item; + + for (const cardDef of AllCardDefinitions) { + if (cardDef.onUrlHandler?.(text, item)) { + item.cardType = cardDef.type; + saveNewItem(); + return; + } + } + + newItem = {}; + } catch (e) { + return; + } + }} +/> + + + + + + + + + {#if !dev} +
+ Editing on mobile is not supported yet. Please use a desktop browser. +
+ {/if} + + {#if showingMobileView} +
+ {/if} + + {#if newItem.modal && newItem.item} + { + saveNewItem(); + }} + bind:item={newItem.item} + oncancel={() => { + newItem = {}; + }} + /> + {/if} + +
+ {#if !getHideProfile(data)} + + {/if} + +
+
+ +
{ + e.preventDefault(); + + const cell = getDragXY(e); + if (!cell) return; + + activeDragElement.x = cell.x; + activeDragElement.y = cell.y; + + if (activeDragElement.item) { + if (isMobile) { + activeDragElement.item.mobileX = cell.x; + activeDragElement.item.mobileY = cell.y; + } else { + activeDragElement.item.x = cell.x; + activeDragElement.item.y = cell.y; + } + + fixCollisions(items, activeDragElement.item, isMobile); + } + + // Auto-scroll when dragging near top or bottom of viewport + const scrollZone = 100; + const scrollSpeed = 10; + const viewportHeight = window.innerHeight; + + if (e.clientY < scrollZone) { + // Near top - scroll up + const intensity = 1 - e.clientY / scrollZone; + window.scrollBy(0, -scrollSpeed * intensity); + } else if (e.clientY > viewportHeight - scrollZone) { + // Near bottom - scroll down + const intensity = 1 - (viewportHeight - e.clientY) / scrollZone; + window.scrollBy(0, scrollSpeed * intensity); + } + }} + ondragend={async (e) => { + e.preventDefault(); + const cell = getDragXY(e); + if (!cell) return; + + if (activeDragElement.item) { + if (isMobile) { + activeDragElement.item.mobileX = cell.x; + activeDragElement.item.mobileY = cell.y; + } else { + activeDragElement.item.x = cell.x; + activeDragElement.item.y = cell.y; + } + + fixCollisions(items, activeDragElement.item, isMobile); + } + activeDragElement.x = -1; + activeDragElement.y = -1; + activeDragElement.element = null; + return true; + }} + class="@container/grid relative col-span-3 px-2 py-8 @5xl/wrapper:px-8" + > + {#each items as item, i (item.id)} + + { + items = items.filter((it) => it !== item); + compactItems(items, isMobile); + }} + onsetsize={(newW: number, newH: number) => { + if (isMobile) { + item.mobileW = newW; + item.mobileH = newH; + } else { + item.w = newW; + item.h = newH; + } + + fixCollisions(items, item, isMobile); + }} + ondragstart={(e) => { + const target = e.currentTarget as HTMLDivElement; + activeDragElement.element = target; + activeDragElement.w = item.w; + activeDragElement.h = item.h; + activeDragElement.item = item; + + const rect = target.getBoundingClientRect(); + activeDragElement.mouseDeltaX = rect.left - e.clientX; + activeDragElement.mouseDeltaY = rect.top - e.clientY; + console.log(activeDragElement.mouseDeltaY); + console.log(rect.width); + }} + > + + + + {/each} + +
+
+
+
+ + + + +
+ {#each sidebarItems as cardDef} + {#if cardDef.sidebarComponent} + newCard(cardDef.type)} /> + {:else if cardDef.sidebarButtonText} + + {/if} + {/each} +
+ + + {#if dev || (!client.isLoggedIn && !client.isInitializing) || client.profile?.did === data.did} + +
+ {#if dev} + + {/if} + + + + + + + +
+
+ + {#if client.isLoggedIn} + + {:else} + { + await login(handle); + return true; + }} + /> + {/if} +
+ + {/if} + + + diff --git a/src/lib/Head.svelte b/src/lib/website/Head.svelte similarity index 50% rename from src/lib/Head.svelte rename to src/lib/website/Head.svelte index 9e0d06d..9b768f8 100644 --- a/src/lib/Head.svelte +++ b/src/lib/website/Head.svelte @@ -1,5 +1,10 @@ @@ -17,4 +22,10 @@ {/if} + + {#if description} + + + + {/if} diff --git a/src/lib/Profile.svelte b/src/lib/website/Profile.svelte similarity index 58% rename from src/lib/Profile.svelte rename to src/lib/website/Profile.svelte index c5ab71b..8c0d347 100644 --- a/src/lib/Profile.svelte +++ b/src/lib/website/Profile.svelte @@ -1,59 +1,55 @@ - -
- {#if profileData?.avatar?.ref?.$link} + {#if data.profile.avatar} {:else}
{/if} +
- {profileData?.displayName || handle} + {getName(data)}
-
+
- {@html marked.parse(profileData?.description ?? '', { renderer })} + {@html marked.parse(getDescription(data), { + renderer + })}
- {#if showEditButton && client.isLoggedIn && client.profile?.did === did} + {#if showEditButton && client.isLoggedIn && client.profile?.did === data.did}
+ {:else} +
{/if} - {#if !env.PUBLIC_IS_SELFHOSTED && handle === 'blento.app' && client.profile?.handle !== handle} + {#if !env.PUBLIC_IS_SELFHOSTED && data.handle === 'blento.app' && client.profile?.handle !== data.handle} {#if !client.isInitializing && !client.isLoggedIn}
@@ -120,47 +118,3 @@
- - diff --git a/src/lib/website/Settings.svelte b/src/lib/website/Settings.svelte new file mode 100644 index 0000000..d342af9 --- /dev/null +++ b/src/lib/website/Settings.svelte @@ -0,0 +1,74 @@ + + + + Settings + + + +