diff --git a/docs/.env.example b/docs/.env.example new file mode 100644 index 00000000..8f0079ca --- /dev/null +++ b/docs/.env.example @@ -0,0 +1,5 @@ +# Production license for @nuxt/ui-pro, get one at https://ui.nuxt.com/pro/purchase +NUXT_UI_PRO_LICENSE= + +# Public URL, used for OG Image when running nuxt generate +NUXT_PUBLIC_SITE_URL= diff --git a/docs/.gitignore b/docs/.gitignore new file mode 100644 index 00000000..6bbb425a --- /dev/null +++ b/docs/.gitignore @@ -0,0 +1,27 @@ +# Nuxt dev/build outputs +.output +.data +.nuxt +.nitro +.cache +dist + +# Node dependencies +node_modules + +# Logs +logs +*.log + +# Misc +.DS_Store +.fleet +.idea + +# Local env files +.env +.env.* +!.env.example + +# VSC +.history diff --git a/docs/app.config.ts b/docs/app.config.ts index 1846b749..53139f4e 100644 --- a/docs/app.config.ts +++ b/docs/app.config.ts @@ -1,24 +1,215 @@ +const motions = { + common: { + initial: { + y: 100, + opacity: 0, + transition: { mass: 0.5, damping: 10 }, + }, + visibleOnce: { + y: 0, + opacity: 1, + transition: { mass: 0.5, damping: 10 }, + }, + }, + presetSection: { + initial: { y: 100, opacity: 0 }, + visibleOnce: { y: 0, opacity: 1 }, + }, + a: { + initial: { + y: '0em', + opacity: 1, + scale: 1, + transition: { stiffness: 250, mass: 0.5, damping: 5 }, + }, + visibleOnce: { + y: '0em', + opacity: 1, + rotate: 0, + scale: 1, + transition: { stiffness: 250, mass: 0.5, damping: 5 }, + }, + hovered: { + scale: 1.1, + transition: { stiffness: 250, mass: 0.5, damping: 5 }, + }, + tapped: { + scale: 0.95, + transition: { stiffness: 250, mass: 0.5, damping: 5 }, + }, + }, + codeGroupButton: { + initial: { + scale: 1, + transition: { stiffness: 250, mass: 0.5, damping: 5 }, + }, + hovered: { + scale: 1.1, + transition: { stiffness: 250, mass: 0.5, damping: 5 }, + }, + tapped: { + scale: 0.95, + transition: { stiffness: 250, mass: 0.5, damping: 5 }, + }, + }, + pre: { + initial: { y: 100, opacity: 0, transition: { mass: 0.1, damping: 10 } }, + visibleOnce: { y: 0, opacity: 1, transition: { mass: 0.1, damping: 10 } }, + }, + code: { + initial: { + scaleY: 0.5, + opacity: 0, + transition: { stiffness: 250, mass: 0.5, damping: 10 }, + }, + visibleOnce: { + scaleY: 1, + opacity: 1, + transition: { stiffness: 250, mass: 0.5, damping: 10 }, + }, + }, + ul: { + initial: { x: 100, y: 100, opacity: 0 }, + visibleOnce: { x: 0, y: 0, opacity: 1 }, + }, + li: { + initial: { x: 40, y: 20, opacity: 0 }, + hovered: { + x: 10, + opacity: 1, + transition: { mass: 1, delay: 0 }, + }, + visibleOnce: { + x: 0, + y: 0, + opacity: 1, + transition: { mass: 1 }, + }, + }, + pageHeader: { + initial: { y: 100, opacity: 0, transition: { mass: 0.25, damping: 10 } }, + visibleOnce: { + y: 0, + opacity: 1, + transition: { mass: 0.25, damping: 10 }, + }, + }, + headers: { + h1: { + initial: { + y: 100, + opacity: 0, + transition: { mass: 0.85, damping: 10 }, + }, + visibleOnce: { + y: 0, + opacity: 1, + transition: { mass: 0.85, damping: 10 }, + }, + }, + common: { + initial: { + y: 100, + opacity: 0, + transition: { mass: 0.75, damping: 10 }, + }, + visibleOnce: { + y: 0, + opacity: 1, + transition: { mass: 0.75, damping: 10 }, + }, + }, + }, +} + +/** + * This is to disable animations, the animations are a bit much and need tweaking + * we should also provide a way for users to disable them when enabled. + */ +for (const val of Object.values(motions)) { + // set each variant to an empty object + for (const k of Object.keys(val)) { + // h1,common are nested reset their variants to an empty object + if (['h1', 'common'].includes(k)) { + // @ts-expect-error not specific + for (const nestedK of Object.keys(val[k])) { + // @ts-expect-error not specific + val[k][nestedK] = {} + } + } else { + // @ts-expect-error not specific + val[k] = {} + } + } +} + export default defineAppConfig({ - docus: { - title: '@vueuse/motion', - description: '🤹 Vue Composables putting your components in motion', - image: 'https://motion.vueuse.org/banner.png', - socials: { - twitter: 'yaeeelglx', - github: 'vueuse/motion', + legacy: { + ui: { + primary: 'cyan', + neutral: 'slate', }, - aside: { - level: 1, + }, + default: { + ui: { + primary: 'cyan', + neutral: 'zinc', }, - header: { - title: '@vueuse/motion', + }, + theme: { + radius: 0.25, + }, + ui: { + colors: { + primary: 'cyan', + neutral: 'zinc', }, + }, + uiPro: { footer: { - credits: { - icon: 'IconDocus', - text: 'Powered by Docus', - href: 'https://docus.dev', + bottom: { + left: 'text-sm text-gray-500 dark:text-gray-400', + wrapper: 'border-t border-gray-200 dark:border-gray-800', + }, + }, + }, + seo: { siteName: '@vueuse/motion' }, + header: { + search: true, + colorMode: true, + links: [ + { + icon: 'i-simple-icons-github', + to: 'https://github.com/vueuse/motion', + target: '_blank', + 'aria-label': 'VueUse Motion', + }, + ], + }, + footer: { + credits: `Copyright © ${new Date().getFullYear()}`, + colorMode: false, + links: [ + { + icon: 'i-simple-icons-nuxtdotjs', + to: 'https://nuxt.com', + target: '_blank', + 'aria-label': 'Nuxt Website', }, + { + icon: 'i-simple-icons-github', + to: 'https://github.com/vueuse/motion', + target: '_blank', + 'aria-label': 'VueUse Motion', + }, + ], + }, + toc: { + title: 'On this page', + bottom: { + edit: 'https://github.com/vueuse/motion/edit/main/content', }, }, + + motions, }) diff --git a/docs/app.vue b/docs/app.vue new file mode 100644 index 00000000..daebc353 --- /dev/null +++ b/docs/app.vue @@ -0,0 +1,82 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/docs/assets/css/main.css b/docs/assets/css/main.css new file mode 100644 index 00000000..e3cb22a0 --- /dev/null +++ b/docs/assets/css/main.css @@ -0,0 +1,24 @@ +@import 'tailwindcss'; +@import '@nuxt/ui-pro'; + +@theme { + --container-8xl: 90rem; + --font-sans: 'Public Sans', sans-serif; + /* --font-sans: 'DM Sans', sans-serif; */ + + --color-green-50: #effdf5; + --color-green-100: #d9fbe8; + --color-green-200: #b3f5d1; + --color-green-300: #75edae; + --color-green-400: #00dc82; + --color-green-500: #00c16a; + --color-green-600: #00a155; + --color-green-700: #007f45; + --color-green-800: #016538; + --color-green-900: #0a5331; + --color-green-950: #052e16; +} + +:root { + --ui-container: var(--container-8xl); +} diff --git a/docs/components/Footer.vue b/docs/components/Footer.vue new file mode 100644 index 00000000..b8859719 --- /dev/null +++ b/docs/components/Footer.vue @@ -0,0 +1,23 @@ + + + + + + {{ footer.credits }} + + + + + + + + + + + diff --git a/docs/components/Header.vue b/docs/components/Header.vue new file mode 100644 index 00000000..b2307465 --- /dev/null +++ b/docs/components/Header.vue @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {{ link.title }} + + + + + + diff --git a/docs/components/Logo.vue b/docs/components/Logo.vue new file mode 100644 index 00000000..0e618285 --- /dev/null +++ b/docs/components/Logo.vue @@ -0,0 +1,17 @@ + + + + VueUse + Motion + + + + diff --git a/docs/components/OgImage/OgImageDocs.vue b/docs/components/OgImage/OgImageDocs.vue new file mode 100644 index 00000000..dfe1084c --- /dev/null +++ b/docs/components/OgImage/OgImageDocs.vue @@ -0,0 +1,92 @@ + + + + + + + + + + + + + + + + + + + + {{ headline }} + + + {{ title }} + + + {{ description.slice(0, 200) }} + + + + + + + + + diff --git a/docs/components/content/Face.vue b/docs/components/content/Face.vue new file mode 100644 index 00000000..f5668aff --- /dev/null +++ b/docs/components/content/Face.vue @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/components/content/Features.vue b/docs/components/content/Features.vue deleted file mode 100644 index 223f0c2b..00000000 --- a/docs/components/content/Features.vue +++ /dev/null @@ -1,133 +0,0 @@ - - - - - - - - - diff --git a/docs/components/content/Hero.vue b/docs/components/content/Hero.vue deleted file mode 100644 index 4c917135..00000000 --- a/docs/components/content/Hero.vue +++ /dev/null @@ -1,213 +0,0 @@ - - - - - - @vueuse - / - motion - - - Vue Composables putting your components in - motion - - - - - - - - - - - - Source - - - - - - - diff --git a/docs/components/content/Illustration.vue b/docs/components/content/Illustration.vue index 4f98c970..0ee87ee6 100644 --- a/docs/components/content/Illustration.vue +++ b/docs/components/content/Illustration.vue @@ -15,7 +15,20 @@ const mouth = ref() const eyeLeft = ref() const eyeRight = ref() -const refs = [buttons, browser, card, search, circleBottom, circleTop, head, mouth, eyeLeft, eyeRight, armLeft, armRight] +const refs = [ + buttons, + browser, + card, + search, + circleBottom, + circleTop, + head, + mouth, + eyeLeft, + eyeRight, + armLeft, + armRight, +] refs.forEach((ref, index) => { const { variant } = useMotion(ref, { @@ -50,8 +63,17 @@ refs.forEach((ref, index) => { - - + + { stroke-linecap="round" stroke-linejoin="round" /> - + { stroke-linejoin="round" /> - + { d="M286.116 425.069C254.061 461.774 239.701 514.406 263.952 555.783C282.474 587.384 318.552 607.383 355.47 619.702C411.533 638.409 474.914 642.46 530.76 623.223C586.606 603.985 633.193 559.399 643.466 505.803C651.538 463.693 644.924 412.408 586.391 381.722C541.385 358.128 362.388 337.733 286.116 425.069Z" fill="var(--colors-primary-400)" /> - - - - - - - - + + + + + + + + - + { fill="white" /> - + { fill="white" /> - + () const rightEye = ref() const mouth = ref() -const refs = [bigBottomCircle, smallBottomCircle, bigTopCircle, head, arms, legs, leftEye, rightEye, mouth] +const refs = [ + bigBottomCircle, + smallBottomCircle, + bigTopCircle, + head, + arms, + legs, + leftEye, + rightEye, + mouth, +] refs.forEach((ref, index) => { const { variant } = useMotion(ref, { @@ -49,8 +59,21 @@ refs.forEach((ref, index) => { - - + + { fill="white" /> - + { fill="white" /> - + { fill="white" /> - + { fill-rule="evenodd" clip-rule="evenodd" d="M440.919 341.115C466.576 346.42 482.198 363.856 487.438 396.256C490.132 412.916 483.074 426.317 467.799 436.472C454.946 445.017 436.526 451.128 413.876 455.102C395.632 458.302 375.36 459.979 355.25 460.338L353.443 460.367C339.025 460.563 325.71 460.015 320.653 459.202C319.695 459.048 318.727 459.415 318.079 460.183L318 460.282L309.964 470.658C306.939 474.565 300.843 472.56 300.527 467.695L300.519 467.546L300.5 467.068L300.481 467.546C300.283 472.469 294.215 474.562 291.129 470.775L291.036 470.658L283 460.282C282.354 459.447 281.345 459.042 280.347 459.202L279.849 459.277C274.225 460.081 260.398 460.6 245.75 460.338C225.64 459.979 205.368 458.302 187.124 455.102C164.474 451.128 146.054 445.017 133.201 436.472C117.926 426.317 110.868 412.916 113.562 396.256C118.802 363.856 134.424 346.42 160.081 341.115C171.029 338.851 183.772 338.778 198.818 340.625L199.473 340.707C212.292 342.32 226.343 345.211 244.65 349.77C245.723 350.037 246.375 351.12 246.107 352.188C245.838 353.256 244.751 353.906 243.678 353.638L241.652 353.137C224.471 348.902 211.127 346.193 198.971 344.663C184.043 342.783 171.512 342.824 160.896 345.019C136.921 349.977 122.5 366.072 117.516 396.89C115.091 411.888 121.371 423.813 135.425 433.156C147.733 441.339 165.667 447.289 187.819 451.174C205.504 454.277 225.164 455.933 244.715 456.33L246.714 456.366C261.262 456.595 274.828 456.05 279.709 455.265C282.112 454.879 284.522 455.817 286.065 457.713L286.172 457.847L294.208 468.223C294.932 469.159 296.36 468.705 296.473 467.474L296.479 467.386L297.764 435.516C297.85 433.374 296.361 431.522 294.741 431.559C275.169 431.999 257.145 428.366 235.892 420.565L234.401 420.013C228.897 417.959 223.204 415.653 216.128 412.648L213.045 411.33C209.075 409.619 196.254 404.071 192.057 402.293L190.359 401.577C190.311 401.559 190.264 401.539 190.218 401.518L189.921 401.392C185.238 399.424 180.959 397.679 176.75 396.03C175.721 395.627 175.215 394.47 175.62 393.445C176.025 392.42 177.187 391.916 178.216 392.319C180.93 393.382 183.672 394.485 186.529 395.659L183.068 389.437C182.533 388.474 182.883 387.26 183.85 386.727C184.786 386.211 185.958 386.52 186.518 387.414L186.572 387.505L192.49 398.147L195.13 399.265C200.955 401.754 213.803 407.316 215.598 408.084L217.695 408.978C225.064 412.108 230.911 414.469 236.601 416.574C257.713 424.386 275.431 428.004 294.65 427.572C297.115 427.517 299.23 428.886 300.5 430.907C301.77 428.886 303.885 427.517 306.35 427.572C325.57 428.004 343.289 424.386 364.402 416.573L365.596 416.129C370.914 414.135 376.453 411.889 383.307 408.977L386.121 407.775C389.759 406.208 403.069 400.448 407.375 398.624L408.512 398.143L414.429 387.505C414.965 386.542 416.183 386.194 417.151 386.727C418.087 387.244 418.445 388.397 417.981 389.343L417.932 389.437L414.472 395.659C417.329 394.485 420.07 393.382 422.784 392.319C423.813 391.916 424.975 392.42 425.38 393.445C425.785 394.47 425.279 395.627 424.25 396.03L422.985 396.528C419.096 398.064 415.12 399.692 410.796 401.511C410.736 401.54 410.676 401.565 410.614 401.588C410.534 401.621 410.454 401.655 410.373 401.689L407.249 403.015C401.352 405.537 388.772 410.982 386.985 411.747L385.394 412.426C377.728 415.688 371.687 418.131 365.797 420.311C344.244 428.287 326.042 432.003 306.259 431.559C304.671 431.523 303.21 433.301 303.233 435.388L303.237 435.516L304.521 467.387C304.572 468.654 305.984 469.158 306.741 468.286L306.792 468.223L314.829 457.846C316.367 455.861 318.833 454.87 321.291 455.265C326.172 456.05 339.739 456.595 354.287 456.366L355.178 456.351C375.093 455.995 395.163 454.335 413.182 451.174C435.333 447.289 453.267 441.339 465.575 433.156C479.629 423.813 485.909 411.888 483.484 396.89C478.5 366.072 464.079 349.977 440.105 345.019C429.488 342.824 416.957 342.783 402.029 344.663L401.08 344.784C388.701 346.397 375.034 349.228 357.322 353.638C356.249 353.906 355.162 353.256 354.893 352.188C354.625 351.12 355.277 350.037 356.35 349.77L358.392 349.264C375.485 345.051 388.838 342.331 401.046 340.768L401.527 340.707C416.859 338.776 429.813 338.818 440.919 341.115Z" - fill="#001D2D" + fill="#333" + style="opacity: 0" /> - + { fill="white" /> - + { fill-rule="evenodd" clip-rule="evenodd" d="M308.685 128.97L308.622 129.008C307.364 129.757 306.138 130.344 304.867 130.731C303.598 131.121 302.301 131.315 301.001 131.319C299.7 131.317 298.402 131.121 297.136 130.73C295.864 130.343 294.638 129.754 293.382 129.002L293.319 128.963C292.889 128.707 292.332 128.693 291.879 128.975C291.238 129.372 291.045 130.208 291.449 130.841C292.414 132.356 293.867 133.599 295.537 134.444C297.209 135.289 299.104 135.734 300.999 135.736C302.895 135.739 304.791 135.294 306.465 134.45C308.135 133.607 309.589 132.366 310.554 130.847C310.819 130.429 310.843 129.88 310.567 129.428C310.176 128.789 309.333 128.583 308.685 128.97Z" - fill="#001D2D" + fill="#000" + style="opacity: 0" /> diff --git a/docs/components/content/PresetSection.vue b/docs/components/content/PresetSection.vue index 0a48c9a9..f3e81035 100644 --- a/docs/components/content/PresetSection.vue +++ b/docs/components/content/PresetSection.vue @@ -1,8 +1,30 @@ - - + {{ name.replace(/[A-Z]/g, (s: any) => ` ${s}`) }} - - - {{ ` - - ` }} - - - - - - - - - - - - - + + + + + + + + + + + + + - +
+ {{ headline }} +
+ {{ description.slice(0, 200) }} +
- Vue Composables putting your components in - motion -