diff --git a/docs/app.config.ts b/docs/app.config.ts index 1846b749..2e8e7b10 100644 --- a/docs/app.config.ts +++ b/docs/app.config.ts @@ -1,24 +1,185 @@ +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', - }, - aside: { - level: 1, - }, - header: { - title: '@vueuse/motion', - }, - footer: { - credits: { - icon: 'IconDocus', - text: 'Powered by Docus', - href: 'https://docus.dev', + ui: { + primary: 'cyan', + gray: 'neutral', + }, + header: { + search: true, + colorMode: true, + links: [ + { + 'icon': 'i-simple-icons-github', + 'to': 'https://github.com/vueuse/motion', + 'target': '_blank', + 'aria-label': 'VueUse Motion', + }, + ], + }, + seo: { siteName: '@vueuse/motion' }, + footer: { + credits: `Copyright ยฉ ${new Date().getFullYear()}`, + colorMode: false, + links: [ + { + 'icon': 'i-simple-icons-github', + 'to': 'https://github.com/vueuse/motion', + 'target': '_blank', + 'aria-label': 'VueUse Motion', }, + ], + }, + toc: { + title: 'Table of Contents', + 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..9f5bfbd8 --- /dev/null +++ b/docs/app.vue @@ -0,0 +1,78 @@ + + + + + diff --git a/docs/components/OgImage/OgImageDocs.vue b/docs/components/OgImage/OgImageDocs.vue new file mode 100644 index 00000000..fc37c11b --- /dev/null +++ b/docs/components/OgImage/OgImageDocs.vue @@ -0,0 +1,92 @@ + + + diff --git a/docs/components/TheFooter.vue b/docs/components/TheFooter.vue new file mode 100644 index 00000000..694ecbc4 --- /dev/null +++ b/docs/components/TheFooter.vue @@ -0,0 +1,23 @@ + + + diff --git a/docs/components/TheHeader.vue b/docs/components/TheHeader.vue new file mode 100644 index 00000000..1fe3470e --- /dev/null +++ b/docs/components/TheHeader.vue @@ -0,0 +1,44 @@ + + + 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 index 223f0c2b..48c9b459 100644 --- a/docs/components/content/Features.vue +++ b/docs/components/content/Features.vue @@ -7,17 +7,20 @@ export default defineComponent({ { icon: '๐Ÿ•น', title: 'Declarative Animations', - details: 'Write animations right from your template or config control them from your script.', + details: + 'Write animations right from your template or config control them from your script.', }, { icon: '๐ŸŽ', title: 'Fast and Lightweight', - details: 'Animations powered by Popmotion. Bundle size <20kb gzipped.', + details: + 'Animations powered by Popmotion. Bundle size <20kb gzipped.', }, { icon: '๐Ÿ’š', title: 'Plug and Play', - details: 'Compatible with Vue 2, 3 and Nuxt. Start with defaults, write yours with ease.', + details: + 'Compatible with Vue 2, 3 and Nuxt. Start with defaults, write yours with ease.', }, ] @@ -30,19 +33,6 @@ export default defineComponent({ () 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) => {