Merge pull request #184 from humanspeak/initial-creation

jaysin586 · web-flow · commit 01d1fcb572c6 · 2025-09-28T08:14:23.000-05:00
Enhancemenet: README update &amp; Docs update
diff --git a/README.md b/README.md
@@ -105,12 +105,13 @@ This package carefully selects its dependencies to provide a robust and maintain
 
 ### Examples
 
-| Motion                                                                                                   | Demo / Route                             | REPL                                                                                           |
+| Motion                                                                                                   | Demo / Route                             | Live Demo                                                                                      |
 | -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------- |
 | [React - Enter Animation](https://examples.motion.dev/react/enter-animation)                             | `/tests/motion/enter-animation`          | [View Example](https://svelte.dev/playground/7f60c347729f4ea48b1a4590c9dedc02?version=5.38.10) |
-| [HTML Content (0→100 counter)](https://examples.motion.dev/react/html-content)                           | `/tests/motion/html-content`             | [View Example](https://svelte.dev/playground/31cd72df4a3242b4b4589501a25e774f?version=5.38.10) |
+| [HTML Content (0→100 counter)](https://examples.motion.dev/react/html-content)                           | `/tests/motion/html-content`             | [View Example](https://motion.svelte.page/examples/html-content)                               |
 | [Aspect Ratio](https://examples.motion.dev/react/aspect-ratio)                                           | `/tests/motion/aspect-ratio`             | [View Example](https://svelte.dev/playground/1bf60e745fae44f5becb4c830fde9b6e?version=5.38.10) |
-| [Hover + Tap (whileHover + whileTap)](https://motion.dev/docs/react?platform=react#hover-tap-animation)  | `/tests/motion/hover-and-tap`            | [View Example](https://svelte.dev/playground/674c7d58f2c740baa4886b01340a97ea?version=5.38.10) |
+| [Hover + Tap (whileHover + whileTap)](https://examples.motion.dev/react/gestures)                        | `/tests/motion/hover-and-tap`            | [View Example](https://motion.svelte.page/examples/hover-and-tap)                              |
+| [Rotate](https://examples.motion.dev/react/rotate)                                                       | `/tests/motion/rotate`                   | [View Example](https://motion.svelte.page/examples/rotate)                                     |
 | [Random - Shiny Button](https://www.youtube.com/watch?v=jcpLprT5F0I) by [@verse\_](https://x.com/verse_) | `/tests/random/shiny-button`             | [View Example](https://svelte.dev/playground/96f9e0bf624f4396adaf06c519147450?version=5.38.10) |
 | [Fancy Like Button](https://github.com/DRlFTER/fancyLikeButton)                                          | `/tests/random/fancy-like-button`        | [View Example](https://svelte.dev/playground/c34b7e53d41c48b0ab1eaf21ca120c6e?version=5.38.10) |
 | [Keyframes (square → circle → square; scale 1→2→1)](https://motion.dev/docs/react-animation#keyframes)   | `/tests/motion/keyframes`                | [View Example](https://svelte.dev/playground/05595ce0db124c1cbbe4e74fda68d717?version=5.38.10) |
diff --git a/docs/scripts/generate-sitemap-manifest.mjs b/docs/scripts/generate-sitemap-manifest.mjs
@@ -105,8 +105,9 @@ async function updateExamplesPageTs(examples) {
         let content = await readFile(examplesPageTs, 'utf8')
 
         // Find the examples object in the file and replace it
-        const examplesObjectRegex = /const examples = \{[\s\S]*?\n {4}\}/
-        const newExamplesObject = `const examples = ${JSON.stringify(examples, null, 8).replace(/^/gm, '    ')}`
+        // More robust regex that matches the entire examples object declaration
+        const examplesObjectRegex = /const examples\s*=\s*\{[\s\S]*?\n\s*\}(?=\s*\n\s*return)/
+        const newExamplesObject = `const examples = ${JSON.stringify(examples, null, 4).replace(/^/gm, '    ')}`
 
         if (examplesObjectRegex.test(content)) {
             content = content.replace(examplesObjectRegex, newExamplesObject)
diff --git a/docs/src/lib/components/general/Example.svelte b/docs/src/lib/components/general/Example.svelte
@@ -1,8 +1,15 @@
 <script lang="ts">
     import { motion } from '@humanspeak/svelte-motion'
     import { cn } from '$lib/shadcn/utils'
+    import type { Snippet } from 'svelte'
 
-    const { children, isSmall = false } = $props()
+    type ExampleProps = {
+        children: Snippet
+        isSmall?: boolean
+        motionUrl?: string
+    }
+
+    const { children, isSmall = false, motionUrl }: ExampleProps = $props()
 
     let refreshId = $state(0)
     const refreshMotion = () => {
@@ -21,6 +28,16 @@
         <div class="flex flex-1 items-center gap-4"></div>
         <div class="flex flex-1 items-center justify-center gap-4"></div>
         <div class="flex flex-1 items-center justify-end gap-4">
+            {#if motionUrl}
+                <motion.button
+                    onclick={() => window.open(motionUrl, '_blank')}
+                    whileTap={{ scale: 0.9 }}
+                    whileHover={{ scale: 1.1 }}
+                    class="inline-flex items-center justify-center rounded-md border border-border-muted px-2 py-1 text-sm text-text-muted transition-colors hover:border-border-mid hover:text-text-secondary"
+                >
+                    Motion.dev
+                </motion.button>
+            {/if}
             <motion.button
                 onclick={refreshMotion}
                 whileTap={{ scale: 0.9 }}
diff --git a/docs/src/lib/examples/HTMLContent.svelte b/docs/src/lib/examples/HTMLContent.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+    import { motion, animate } from '@humanspeak/svelte-motion'
+    import { onMount } from 'svelte'
+
+    let count = $state(0)
+
+    onMount(() => {
+        const controls = animate(0, 100, {
+            duration: 5,
+            onUpdate: (latest: number) => {
+                count = Math.round(latest)
+            }
+        }) as unknown as { stop: () => void }
+        return () => controls.stop()
+    })
+</script>
+
+<motion.pre style="font-size: 64px; color: #8df0cc;">{count}</motion.pre>
diff --git a/docs/src/routes/examples/+page.ts b/docs/src/routes/examples/+page.ts
@@ -14,6 +14,11 @@ export const load: PageLoad = async () => {
             description: 'Interactive hover and tap animation example using Svelte Motion.',
             sourceUrl: 'https://examples.motion.dev/react/gestures'
         },
+        'html-content': {
+            title: 'HTML Content',
+            description: 'Interactive html content animation example using Svelte Motion.',
+            sourceUrl: 'https://examples.motion.dev/react/html-content'
+        },
         rotate: {
             title: 'Rotate',
             description: 'Interactive rotate animation example using Svelte Motion.',
diff --git a/docs/src/routes/examples/animated-button/+page.svelte b/docs/src/routes/examples/animated-button/+page.svelte
@@ -4,7 +4,6 @@
     import AnimatedButton from '$lib/examples/AnimatedButton.svelte'
 
     // Placeholder canvas; hook up live example later.
-
     const breadcrumbs = $derived(getBreadcrumbContext())
     $effect(() => {
         if (breadcrumbs) {
diff --git a/docs/src/routes/examples/animated-button/+page.ts b/docs/src/routes/examples/animated-button/+page.ts
@@ -2,7 +2,6 @@ import type { PageLoad } from './$types'
 
 export const load: PageLoad = async () => {
     return {
-        title: 'Animated Button',
-        sourceUrl: 'https://examples.motion.dev/react/animated-button?utm_source=embed'
+        title: 'Animated Button'
     }
 }
diff --git a/docs/src/routes/examples/hover-and-tap/+page.svelte b/docs/src/routes/examples/hover-and-tap/+page.svelte
@@ -4,7 +4,7 @@
     import HoverAndTap from '$lib/examples/HoverAndTap.svelte'
 
     // Placeholder canvas; hook up live example later.
-
+    let { data } = $props()
     const breadcrumbs = $derived(getBreadcrumbContext())
     $effect(() => {
         if (breadcrumbs) {
@@ -16,6 +16,6 @@
     })
 </script>
 
-<Example>
+<Example motionUrl={data.sourceUrl}>
     <HoverAndTap />
 </Example>
diff --git a/docs/src/routes/examples/html-content/+page.svelte b/docs/src/routes/examples/html-content/+page.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+    import { getBreadcrumbContext } from '$lib/components/contexts/Breadcrumb/Breadcrumb.context'
+    import Example from '$lib/components/general/Example.svelte'
+    import HTMLContent from '$lib/examples/HTMLContent.svelte'
+
+    // Placeholder canvas; hook up live example later.
+    let { data } = $props()
+
+    const breadcrumbs = $derived(getBreadcrumbContext())
+    $effect(() => {
+        if (breadcrumbs) {
+            breadcrumbs.breadcrumbs = [
+                { title: 'Examples', href: '/examples' },
+                { title: 'HTML Content' }
+            ]
+        }
+    })
+</script>
+
+<Example motionUrl={data.sourceUrl}>
+    <HTMLContent />
+</Example>
diff --git a/docs/src/routes/examples/html-content/+page.ts b/docs/src/routes/examples/html-content/+page.ts
@@ -0,0 +1,8 @@
+import type { PageLoad } from './$types'
+
+export const load: PageLoad = async () => {
+    return {
+        title: 'HTML Content',
+        sourceUrl: 'https://examples.motion.dev/react/html-content'
+    }
+}
diff --git a/docs/src/routes/examples/rotate/+page.svelte b/docs/src/routes/examples/rotate/+page.svelte
@@ -4,7 +4,7 @@
     import Rotate from '$lib/examples/Rotate.svelte'
 
     // Placeholder canvas; hook up live example later.
-
+    let { data } = $props()
     const breadcrumbs = $derived(getBreadcrumbContext())
     $effect(() => {
         if (breadcrumbs) {
@@ -16,6 +16,6 @@
     })
 </script>
 
-<Example>
+<Example motionUrl={data.sourceUrl}>
     <Rotate />
 </Example>
diff --git a/src/routes/tests/motion/html-content/+page.svelte b/src/routes/tests/motion/html-content/+page.svelte
@@ -1,19 +1,18 @@
 <script lang="ts">
     import { motion, animate } from '$lib/index'
     import { onMount } from 'svelte'
-    import { writable } from 'svelte/store'
 
-    const count = writable(0)
+    let count = $state(0)
 
     onMount(() => {
         const controls = animate(0, 100, {
             duration: 5,
             onUpdate: (latest: number) => {
-                count.set(Math.round(latest))
+                count = Math.round(latest)
             }
         }) as unknown as { stop: () => void }
         return () => controls.stop()
     })
 </script>
 
-<motion.pre style="font-size: 64px; color: #8df0cc;">{$count}</motion.pre>
+<motion.pre style="font-size: 64px; color: #8df0cc;">{count}</motion.pre>

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,6 @@ import type { PageLoad } from './$types'`
`2`	`2`
`3`	`3`	`export const load: PageLoad = async () => {`
`4`	`4`	`return {`
`5`		`- title: 'Animated Button',`
`6`		`- sourceUrl: 'https://examples.motion.dev/react/animated-button?utm_source=embed'`
	`5`	`+ title: 'Animated Button'`
`7`	`6`	`}`
`8`	`7`	`}`