diff --git a/src/lib/EditableWebsite.svelte b/src/lib/EditableWebsite.svelte index 26f1755..8048050 100644 --- a/src/lib/EditableWebsite.svelte +++ b/src/lib/EditableWebsite.svelte @@ -271,7 +271,7 @@
@@ -334,7 +334,7 @@ activeDragElement.element = null; return true; }} - class="@container/grid relative col-span-3 px-2 py-8 @5xl/wrapper:px-8 @7xl/wrapper:col-span-2" + class="@container/grid relative col-span-3 px-2 py-8 @5xl/wrapper:px-8" > {#each items as item, i (item.id)} diff --git a/src/lib/Profile.svelte b/src/lib/Profile.svelte index 3dd3bbc..792454b 100644 --- a/src/lib/Profile.svelte +++ b/src/lib/Profile.svelte @@ -29,7 +29,7 @@
-
+
{#each items.toSorted(sortItems) as item} diff --git a/src/lib/cards/BaseCard/BaseEditingCard.svelte b/src/lib/cards/BaseCard/BaseEditingCard.svelte index 52c35b3..4e41020 100644 --- a/src/lib/cards/BaseCard/BaseEditingCard.svelte +++ b/src/lib/cards/BaseCard/BaseEditingCard.svelte @@ -133,11 +133,10 @@ document.removeEventListener('pointerup', handleResizeEnd); } - function canSetSize(w: number, h: number) { if (!cardDef) return false; - if(isMobile()) { + if (isMobile()) { w *= 2; h *= 2; } @@ -146,13 +145,14 @@ } function setSize(w: number, h: number) { - - if(isMobile()) { + if (isMobile()) { w *= 2; h *= 2; } onsetsize?.(w, h); } + + let settingsPopoverOpen = $state(false); @@ -189,11 +189,11 @@
{#snippet child({ props })} @@ -234,7 +234,6 @@ /> - {#if canSetSize(2, 2)} {/if} - {#if onshowsettings} - + {#if cardDef.settingsComponent} + + {#snippet child({ props })} + + {/snippet} + + {/if}
@@ -320,8 +317,11 @@ {#if cardDef.canResize !== false} - - {/if} {/if} {/snippet} diff --git a/src/lib/cards/LinkCard/EditingLinkCard.svelte b/src/lib/cards/LinkCard/EditingLinkCard.svelte index b94e7e2..4155997 100644 --- a/src/lib/cards/LinkCard/EditingLinkCard.svelte +++ b/src/lib/cards/LinkCard/EditingLinkCard.svelte @@ -6,12 +6,40 @@ let { item = $bindable() }: ContentComponentProps = $props(); let isMobile = getIsMobile(); + + let faviconHasError = $state(false);
{#if item.cardData.favicon} - + {#if !faviconHasError} + (faviconHasError = true)} + src={item.cardData.favicon} + alt="" + /> + {:else} +
+ + + +
+ {/if} {/if}
import { getIsMobile } from '$lib/helper'; import type { ContentComponentProps } from '../types'; - + let { item }: ContentComponentProps = $props(); let isMobile = getIsMobile(); + + let faviconHasError = $state(false);
{#if item.cardData.favicon} - + {#if !faviconHasError} + (faviconHasError = true)} + src={item.cardData.favicon} + alt="" + /> + {:else} +
+ + + +
+ {/if} {/if} -
{item.cardData.title}
+
+ {item.cardData.title} +
{item.cardData.domain} diff --git a/src/lib/cards/TextCard/EditingTextCard.svelte b/src/lib/cards/TextCard/EditingTextCard.svelte index 2c24e4b..541647c 100644 --- a/src/lib/cards/TextCard/EditingTextCard.svelte +++ b/src/lib/cards/TextCard/EditingTextCard.svelte @@ -1,5 +1,6 @@
diff --git a/src/lib/cards/TextCard/TextCard.svelte b/src/lib/cards/TextCard/TextCard.svelte index b645a68..004424a 100644 --- a/src/lib/cards/TextCard/TextCard.svelte +++ b/src/lib/cards/TextCard/TextCard.svelte @@ -1,6 +1,7 @@
- {@html marked.parse(item.cardData.text ?? '', { renderer })} + {@html marked.parse(item.cardData.text ?? '', { renderer })}
diff --git a/src/lib/cards/TextCard/TextCardSettings.svelte b/src/lib/cards/TextCard/TextCardSettings.svelte new file mode 100644 index 0000000..eb7e432 --- /dev/null +++ b/src/lib/cards/TextCard/TextCardSettings.svelte @@ -0,0 +1,122 @@ + + +
+ { + return item.cardData.textAlign ?? 'left'; + }, + (value) => { + if (!value) return; + item.cardData.textAlign = value; + } + } + > + + + + + + { + return item.cardData.verticalAlign ?? 'top'; + }, + (value) => { + if (!value) return; + item.cardData.verticalAlign = value; + } + } + > + + + + + +
diff --git a/src/lib/cards/TextCard/index.ts b/src/lib/cards/TextCard/index.ts index 096e268..8e2686f 100644 --- a/src/lib/cards/TextCard/index.ts +++ b/src/lib/cards/TextCard/index.ts @@ -1,6 +1,7 @@ import type { CardDefinition } from '../types'; import EditingTextCard from './EditingTextCard.svelte'; import TextCard from './TextCard.svelte'; +import TextCardSettings from './TextCardSettings.svelte'; export const TextCardDefinition = { type: 'text', @@ -11,5 +12,20 @@ export const TextCardDefinition = { card.cardData = { text: 'hello world' }; - } + }, + + settingsComponent: TextCardSettings } as CardDefinition & { type: 'text' }; + +export const textAlignClasses: Record = { + left: '', + center: 'text-center justify-center', + right: 'text-end justify-end' +}; + +export const verticalAlignClasses: Record = { + top: 'items-start', + center: 'items-center-safe', + bottom: 'items-end-safe' +}; + diff --git a/src/lib/cards/types.ts b/src/lib/cards/types.ts index 3b54279..c632cb2 100644 --- a/src/lib/cards/types.ts +++ b/src/lib/cards/types.ts @@ -37,6 +37,8 @@ export type CardDefinition = { sidebarComponent?: Component; sidebarButtonText?: string; + settingsComponent?: Component; + loadData?: ( items: Item[], { did, handle, platform }: { did: string; handle: string; platform?: App.Platform } diff --git a/src/lib/index.ts b/src/lib/index.ts index 02411f8..3a616cb 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -1,5 +1,5 @@ // place files you want to import through the `$lib` alias in this folder. -export const margin = 20; +export const margin = 16; export const mobileMargin = 12; export const COLUMNS = 8; \ No newline at end of file