Enhance SEO and add GSAP to home page

.gitignore

@@ -24,3 +24,4 @@ vite.config.ts.timestamp-*
 
 ./scripts
 
+/src/lib/components/motion-sv-examples

fancy-components.json

@@ -218,6 +218,27 @@
 			"registryDependencies": [],
 			"dependencies": ["motion-sv"]
 		},
+		{
+			"name": "text-rotate",
+			"type": "registry:block",
+			"title": "Text Rotate",
+			"author": "SikandarJODD",
+			"description": "Rotate through multiple text strings with per-character, per-word, or per-line motion and imperative controls.",
+			"files": [
+				{
+					"path": "./src/lib/components/fancy/text-rotate/text-rotate.svelte",
+					"type": "registry:component",
+					"target": "fancy/text-rotate/text-rotate.svelte"
+				},
+				{
+					"path": "./src/lib/components/fancy/text-rotate/index.ts",
+					"type": "registry:file",
+					"target": "fancy/text-rotate/index.ts"
+				}
+			],
+			"registryDependencies": [],
+			"dependencies": ["motion-sv"]
+		},
 		{
 			"name": "underline-to-background",
 			"type": "registry:block",

package.json

@@ -46,6 +46,7 @@
 		"@neoconfetti/svelte": "^2.2.2",
 		"@shikijs/langs": "^3.21.0",
 		"@shikijs/themes": "^3.21.0",
+		"gsap": "^3.15.0",
 		"isomorphic-dompurify": "2.25.0",
 		"lenis": "^1.3.23",
 		"mode-watcher": "^1.1.0",
@@ -61,10 +62,5 @@
 		"svelte-meta-tags": "^4.5.0",
 		"svelte-sonner": "^1.0.7",
 		"svelte-toolbelt": "^0.10.6"
-	},
-	"pnpm": {
-		"onlyBuiltDependencies": [
-			"esbuild"
-		]
 	}
 }

src/lib/components/docs/base/ComponentDocPage.svelte

@@ -31,7 +31,12 @@
 	import PackageBadges from "$lib/components/docs/base/PackageBadges.svelte";
 	import APITable from "$lib/components/docs/base/APITable.svelte";
 	import { CopyPageDropdown } from "$lib/components/docs/copy-page-dropdown";
-	import SEOComponent from "$lib/seo/SEO.svelte";
+	import { MetaTags } from "svelte-meta-tags";
+	import {
+		buildSpellKeywords,
+		SPELL_SOCIAL_IMAGE,
+		SPELL_TITLE_TEMPLATE,
+	} from "$lib/seo/spell";
 
 	let {
 		id,
@@ -55,6 +60,25 @@
 	let installUrl = $derived(
 		`${page.url.origin}/${installPathPrefix ?? (isSpellRoute ? "s" : "r")}/${id}.json`
 	);
+	let canonical = $derived(page.url.href.split("?")[0].split("#")[0]);
+	let resolvedTitleTemplate = $derived(
+		seo.titleTemplate ?? (isSpellRoute ? SPELL_TITLE_TEMPLATE : "%s | Svelte Animations")
+	);
+	let resolvedKeywords = $derived(
+		isSpellRoute
+			? buildSpellKeywords(seo.keywords, [
+					seo.title,
+					`${seo.title} Svelte component`,
+					`${seo.title} Spell UI`,
+				])
+			: seo.keywords
+	);
+	let resolvedSocialTitle = $derived(
+		isSpellRoute ? `${seo.title} | Svelte Spell UI` : seo.title
+	);
+	let resolvedImages = $derived(
+		seo.images ?? (isSpellRoute ? [SPELL_SOCIAL_IMAGE] : undefined)
+	);
 
 	let getURLPath = (url: string) => {
 		// clean url by removing query params and hash
@@ -65,7 +89,36 @@
 	let llmsTxtUrl = $derived(`${getURLPath(page.url.href)}/llms.txt`);
 </script>
 
-<SEOComponent title={seo.title} description={seo.description} keywords={seo.keywords} />
+<MetaTags
+	title={seo.title}
+	titleTemplate={resolvedTitleTemplate}
+	description={seo.description}
+	keywords={resolvedKeywords}
+	{canonical}
+	robots="index,follow"
+	additionalRobotsProps={{
+		maxSnippet: -1,
+		maxImagePreview: "large",
+		maxVideoPreview: -1,
+	}}
+	openGraph={{
+		url: canonical,
+		title: resolvedSocialTitle,
+		description: seo.description,
+		type: "article",
+		siteName: isSpellRoute ? "Svelte Spell UI" : "Svelte Animations",
+		images: resolvedImages,
+	}}
+	twitter={{
+		creator: "@Sikandar_Bhide",
+		site: "@Sikandar_Bhide",
+		cardType: "summary_large_image",
+		title: resolvedSocialTitle,
+		description: seo.description,
+		image: resolvedImages?.[0]?.url,
+		imageAlt: resolvedImages?.[0]?.alt,
+	}}
+/>
 <div class="space-y-6 md:space-y-8">
 	<section>
 		<div class="flex flex-col justify-between gap-3 md:flex-row md:items-center md:gap-4">

src/lib/components/docs/base/support-work.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as Card from "$lib/components/ui/card/index.js";
+	import { fly } from "svelte/transition";
+
+	let isHovered = $state(false);
+</script>
+
+{#if isHovered}
+	<div in:fly={{ y: 20, duration: 280 }} out:fly={{ duration: 200, y: 20 }} class="w-full left-0">
+		<div
+			class="h-7 flex items-center w-[80%] mx-auto gap-1.5 rounded-t-md border-t border-x border-sky-600/80 bg-sky-50 dark:bg-sky-800/20 px-4 text-white text-xs font-medium"
+		>
+			<span
+				><img
+					src="https://github.com/SikandarJODD.png"
+					class="size-4 rounded-full"
+					alt="Bhide Svelte"
+				/></span
+			>
+			<span class="text-sky-600 dark:text-white">Thankyouu soo much 😍</span>
+		</div>
+	</div>
+{/if}
+
+<Card.Root
+	onmouseenter={() => (isHovered = true)}
+	onmouseleave={() => (isHovered = false)}
+	class="relative gap-2 py-4 ring-0 dark:bg-card z-50 border border-sky-500 dark:border-sky-700/60"
+>
+	<Card.Header class="px-4 z-50">
+		<Card.Title class="text-sm">
+			<span>Sponsor My Work</span>
+		</Card.Title>
+		<Card.Description class="text-xs">
+			It would help me build and maintain open-source projects for the community.
+		</Card.Description>
+	</Card.Header>
+	<Card.Content class="mt-2 border-none px-4!">
+		<Button
+			class="w-full"
+			target="_blank"
+			data-s-event="sponsor_click"
+			href="https://github.com/sponsors/SikandarJODD"
+		>
+			Sponsor Bhide Svelte
+		</Button>
+	</Card.Content>
+</Card.Root>

src/lib/components/docs/registry/fancy_ui.ts

@@ -12,13 +12,13 @@ export interface FancyComponent {
 }
 
 export const fancyUIComponents: FancyComponent[] = [
-	// {
-	// 	id: "overview",
-	// 	name: "Overview",
-	// 	href: "/fancy",
-	// 	category: "Overview",
-	// 	desc: "A landing page for the Fancy component collection.",
-	// },
+	{
+		id: "overview",
+		name: "Introduction",
+		href: "/fancy",
+		category: "Overview",
+		desc: "Introduction",
+	},
 	{
 		id: "media-between-text",
 		name: "Media Between Text",
@@ -75,6 +75,14 @@ export const fancyUIComponents: FancyComponent[] = [
 		category: "Components",
 		desc: "Sweep a highlight background across inline text on hover, in view, or on demand.",
 	},
+	{
+		id: "text-rotate",
+		name: "Text Rotate",
+		href: "/fancy/text-rotate",
+		category: "Components",
+		desc: "Rotate through multiple text strings with per-character, per-word, or per-line motion and imperative controls.",
+		badge: "New",
+	},
 	{
 		id: "underline-to-background",
 		name: "Underline To Background",

src/lib/components/fancy/text-rotate/index.ts

@@ -0,0 +1,3 @@
+import TextRotate from './text-rotate.svelte';
+
+export { TextRotate };