@foxui/social 0.4.4 → 0.4.6

package/dist/components/emoji-picker/EmojiPicker.svelte

@@ -1,13 +1,42 @@
+<script lang="ts" module>
+	import { isEmojiSupported } from 'is-emoji-supported';
+
+	import Database from 'emoji-picker-element/database';
+
+	export let emojiDatabase: {
+		db: Database | undefined;
+	} = $state({
+		db: undefined
+	});
+
+	export function loadEmojis() {
+		if(emojiDatabase.db) return;
+
+		import('emoji-picker-element').then(({ Database }) => {
+			emojiDatabase.db = new Database();
+
+			// go through all groups and check if the emoji is supported (will be cached)
+			// so that things appear faster when we select a group
+			for (const group of allGroups) {
+				emojiDatabase.db.getEmojiByGroup(group.id).then((emojis) => {
+					for (const emoji of emojis) {
+						isEmojiSupported(emoji.unicode);
+					}
+				});
+			}
+		});
+		console.log('emojis loaded');
+	}
+</script>
+
 <script lang="ts">
 	import { cn, ScrollArea } from '@foxui/core';
-	import { isEmojiSupported } from 'is-emoji-supported';
 	import { allGroups } from './emoji';
-	import Database from 'emoji-picker-element/database';
 	import type { NativeEmoji } from 'emoji-picker-element/shared';
 	import { fade } from 'svelte/transition';
+	import { onMount } from 'svelte';
 
 	let currentGroup = $state(allGroups[0].id);
-	let db: Database | undefined = $state();
 
 	let {
 		onpicked,
@@ -23,22 +52,9 @@
 		class?: string;
 	} = $props();
 
-	$effect(() => {
-		if (db) return;
-		import('emoji-picker-element').then(({ Database }) => {
-			db = new Database();
-
-			// go through all groups and check if the emoji is supported (will be cached)
-			// so that things appear faster when we select a group
-			for (const group of allGroups) {
-				db.getEmojiByGroup(group.id).then((emojis) => {
-					for (const emoji of emojis) {
-						isEmojiSupported(emoji.unicode);
-					}
-				});
-			}
-		});
-	});
+	onMount(() => {
+		loadEmojis();
+	})
 </script>
 
 <div class={cn('flex flex-col', className)} style="height: {height}px; width: {width}px;">
@@ -46,7 +62,7 @@
 		class="grid w-full select-none space-y-0 px-2"
 		style="height: {height}px; grid-template-columns: repeat({columns}, minmax(0, 1fr));"
 	>
-		{#await db?.getEmojiByGroup(currentGroup) then emojis}
+		{#await emojiDatabase.db?.getEmojiByGroup(currentGroup) then emojis}
 			{#if emojis}
 				{#each emojis as emoji}
 					{#if isEmojiSupported(emoji.unicode)}
@@ -70,12 +86,12 @@
 			<button
 				onclick={() => (currentGroup = group.id)}
 				class={cn(
-					'[&>svg]:size-4.5 relative cursor-pointer [&>svg]:transition-all [&>svg]:duration-100 [&>svg]:hover:scale-105 py-2',
+					'[&>svg]:size-4.5 relative cursor-pointer py-2 [&>svg]:transition-all [&>svg]:duration-100 [&>svg]:hover:scale-105',
 					group.id === currentGroup
 						? 'text-accent-600 dark:text-accent-400'
 						: 'hover:text-accent-700 dark:hover:text-accent-300'
 				)}
-				>
+			>
 				{@html group.svg}
 				<span class="sr-only">{group.name}</span>
 

package/dist/components/emoji-picker/EmojiPicker.svelte.d.ts

@@ -1,3 +1,8 @@
+import Database from 'emoji-picker-element/database';
+export declare let emojiDatabase: {
+    db: Database | undefined;
+};
+export declare function loadEmojis(): void;
 import type { NativeEmoji } from 'emoji-picker-element/shared';
 type $$ComponentProps = {
     onpicked?: (emoji: NativeEmoji) => void;

package/dist/components/emoji-picker/index.d.ts

@@ -1,2 +1,3 @@
 export { default as EmojiPicker } from './EmojiPicker.svelte';
 export { default as PopoverEmojiPicker } from './PopoverEmojiPicker.svelte';
+export { loadEmojis } from './EmojiPicker.svelte';

package/dist/components/emoji-picker/index.js

@@ -1,2 +1,3 @@
 export { default as EmojiPicker } from './EmojiPicker.svelte';
 export { default as PopoverEmojiPicker } from './PopoverEmojiPicker.svelte';
+export { loadEmojis } from './EmojiPicker.svelte';

package/dist/components/index.d.ts

@@ -9,4 +9,5 @@ export * from './chat';
 export * from './emoji-picker';
 export * from './bluesky-post';
 export * from './nested-comments';
+export * from './link-card';
 export declare function numberToHumanReadable(number: number): string | number;

package/dist/components/index.js

@@ -9,6 +9,7 @@ export * from './chat';
 export * from './emoji-picker';
 export * from './bluesky-post';
 export * from './nested-comments';
+export * from './link-card';
 export function numberToHumanReadable(number) {
     if (number < 1000) {
         return number;

package/dist/components/link-card/LinkCard.svelte

@@ -0,0 +1,104 @@
+<script lang="ts" module>
+	import type { WithElementRef } from 'bits-ui';
+	import type { HTMLAnchorAttributes, HTMLAttributes } from 'svelte/elements';
+	import { cn } from '@foxui/core';
+
+	export type LinkCardProps = WithElementRef<HTMLAttributes<HTMLDivElement>> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			showMedia?: boolean;
+			showDescription?: boolean;
+			showTitle?: boolean;
+			showDomain?: boolean;
+			showGradient?: boolean;
+
+			meta: {
+				title: string;
+				description?: string;
+
+				image?: string;
+				imageAlt?: string;
+
+				video?: string;
+				videoType?: string;
+			};
+		};
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		ref = $bindable(null),
+		href,
+
+		target = '_blank',
+
+		showMedia = true,
+		showDescription = false,
+		showTitle = true,
+		showDomain = true,
+		showGradient = true,
+
+		meta,
+
+		children,
+		...restProps
+	}: LinkCardProps = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn(
+		'not-prose group border-base-300 dark:border-base-900 bg-base-200/50 dark:bg-base-950/50 group relative isolate my-6 flex aspect-[1200/630] max-w-lg flex-col justify-end overflow-hidden rounded-2xl border p-4',
+		'focus-within:outline-accent-500 focus-within:outline-2 focus-within:outline-offset-2',
+		className
+	)}
+	{...restProps}
+>
+	{#if showMedia}
+		{#if meta.video && meta.videoType}
+			<video
+				autoplay
+				loop
+				muted
+				preload="metadata"
+				width="1200"
+				height="630"
+				class="absolute inset-0 -z-10 h-full w-full rounded-2xl object-cover"
+			>
+				<source src={meta.video} type={meta.videoType} />
+			</video>
+		{:else if meta.image}
+			<img
+				src={meta.image}
+				alt={meta.imageAlt || ''}
+				width="1200"
+				height="630"
+				class="absolute inset-0 -z-10 h-full w-full rounded-2xl object-cover group-hover:scale-102 transition-all duration-300 ease-in-out"
+			/>
+		{/if}
+	{/if}
+
+	{#if showGradient}
+		<div
+			class="from-base-200/90 to-base-200/40 dark:from-base-950 dark:to-base-950/60 absolute inset-0 -z-10 rounded-xl bg-gradient-to-t"
+		></div>
+	{/if}
+
+	{#if showDomain}
+		<div class="dark:text-accent-400 text-accent-600 text-xs font-semibold">
+			{href ? new URL(href).hostname.replace('www.', '') : ''}
+		</div>
+	{/if}
+
+	<div class="text-base-950 dark:text-base-50 mt-2 text-lg font-semibold">
+		<a {href} {target} class="focus:outline-none">
+			<span class="absolute inset-0"></span>
+			<div class={showTitle ? '' : 'sr-only'}>{meta?.title ?? href}</div>
+		</a>
+	</div>
+	{#if showDescription}
+		<div class="dark:text-base-400 text-base-700 mt-1 line-clamp-2 text-xs/5">
+			{meta?.description ?? ''}
+		</div>
+	{/if}
+</div>

package/dist/components/link-card/LinkCard.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { WithElementRef } from 'bits-ui';
+import type { HTMLAnchorAttributes, HTMLAttributes } from 'svelte/elements';
+export type LinkCardProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & WithElementRef<HTMLAnchorAttributes> & {
+    showMedia?: boolean;
+    showDescription?: boolean;
+    showTitle?: boolean;
+    showDomain?: boolean;
+    showGradient?: boolean;
+    meta: {
+        title: string;
+        description?: string;
+        image?: string;
+        imageAlt?: string;
+        video?: string;
+        videoType?: string;
+    };
+};
+declare const LinkCard: import("svelte").Component<LinkCardProps, {}, "ref">;
+type LinkCard = ReturnType<typeof LinkCard>;
+export default LinkCard;

package/dist/components/link-card/index.d.ts

@@ -0,0 +1 @@
+export { default as LinkCard } from './LinkCard.svelte';

package/dist/components/link-card/index.js

@@ -0,0 +1 @@
+export { default as LinkCard } from './LinkCard.svelte';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@foxui/social",
   "private": false,
-  "version": "0.4.4",
+  "version": "0.4.6",
   "type": "module",
   "files": [
     "dist"
@@ -50,8 +50,8 @@
     "hls.js": "^1.6.2",
     "is-emoji-supported": "^0.0.5",
     "plyr": "^3.7.8",
-    "@foxui/core": "0.4.4",
-    "@foxui/time": "0.4.4"
+    "@foxui/core": "0.4.6",
+    "@foxui/time": "0.4.6"
   },
   "peerDependencies": {
     "svelte": ">=5",