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 @@ + + + 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 @@ + + + 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 @@ + + + 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 @@ + + + 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 @@ - - - - - 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) => {