Skip to content

Commit

Permalink
docs: change titles and headers wording
Browse files Browse the repository at this point in the history
  • Loading branch information
BobbieGoede committed Oct 11, 2024
1 parent c095b67 commit 5ecd9bb
Show file tree
Hide file tree
Showing 22 changed files with 94 additions and 42 deletions.
6 changes: 5 additions & 1 deletion docs/content/1.getting-started/2.nuxt.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
# Nuxt Usage
---
title: Nuxt Usage
description: Easily set up motions in your Nuxt project using the nuxt import.
---


If you are using [Nuxt](https://nuxtjs.org/), this package has a specific implementation that makes the declaration of custom directives even easier.

Expand Down
2 changes: 1 addition & 1 deletion docs/content/2.features/0.presets.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: Presets
description: Presets are a set of animations that are bundled with the package.
description: Presets are a set of animations bundled with the package.
toc: false
---

Expand Down
5 changes: 4 additions & 1 deletion docs/content/2.features/1.component-usage.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
# Component usage
---
title: Component usage
description: Directly use motions using components
---

vueuse/motion allows you to implement your animations directly within the template of your components without the need to wrap target elements in any additional components.

Expand Down
5 changes: 4 additions & 1 deletion docs/content/2.features/1.directive-usage.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
# Directive Usage
---
title: Directive usage
description: Directly use motions using directives
---

vueuse/motion allows you to write your animations right from the template of your components without having to wrap the target elements in any wrapper component.

Expand Down
6 changes: 5 additions & 1 deletion docs/content/2.features/2.composable-usage.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
# Composable Usage
---
title: Composable usage
description: Programmatic motions using composables
---


vueuse/motion is written using Composition API.

Expand Down
5 changes: 4 additions & 1 deletion docs/content/2.features/3.motion-properties.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
# Motion Properties
---
title: Motion Properties
description: The animatable properties of an element used for motions
---

Motion properties are represented by an object containing all the animatable properties of an element.

Expand Down
5 changes: 5 additions & 0 deletions docs/content/2.features/4.transition-properties.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
---
title: Transition Properties
description: Tweak your motions by setting transition properties
---

# Transition Properties

Transition properties are represented by an object containing all transition parameters of a variant.
Expand Down
5 changes: 4 additions & 1 deletion docs/content/2.features/5.variants.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
# Variants
---
title: Variants
description: Variants are the states motions animate between
---

Variants represent an animatable state for your element.

Expand Down
5 changes: 5 additions & 0 deletions docs/content/2.features/6.motion-instance.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
---
title: Motion Instance
description: The instance that exposes motions for programmatic usage
---

# Motion Instance

Motion instance is the object exposed when binding to a target element using [v-motion](/features/directive-usage) or [useMotion](/features/composable-usage).
Expand Down
7 changes: 4 additions & 3 deletions docs/content/3.api/1.use-motion.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# useMotion

useMotion is the core composable of this package.
---
title: useMotion
description: The core composable of this package.
---

This composable imports every other composable and expose a motion instance.

Expand Down
9 changes: 5 additions & 4 deletions docs/content/3.api/10.use-element-transform.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
# useElementTransform
---
title: useElementTransform
description: A composable used to sync a reactive object to a target element CSS transform.
---

useElementTransform is used to sync a reactive object to a target element CSS transform.

It uses [reactiveTransform](https://github.com/vueuse/motion/blob/main/src/reactiveTransform.ts) and binds it to a target.
This uses [reactiveTransform](https://github.com/vueuse/motion/blob/main/src/reactiveTransform.ts) and binds it to a target.

## Parameters

Expand Down
7 changes: 4 additions & 3 deletions docs/content/3.api/11.reactive-style.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# reactiveStyle

reactiveStyle is an helper function creating a reactive object compatible with an HTML `style` attribute.
---
title: reactiveStyle
description: A helper function creating a reactive object compatible with an HTML `style` attribute.
---

## Parameters

Expand Down
7 changes: 4 additions & 3 deletions docs/content/3.api/12.reactive-transform.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# reactiveTransform

reactiveTransform is an helper function creating a reactive object compatible with an HTML `style` attribute.
---
title: reactiveTransform
description: A helper function creating a reactive object compatible with an HTML `style` attribute.
---

## Parameters

Expand Down
5 changes: 4 additions & 1 deletion docs/content/3.api/2.use-spring.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
# useSpring
---
title: useSprint
description: Animate elements using spring animations.
---

useSpring is a simpler hook than [useMotion](/api/use-motion) and makes it possible to animate HTML or SVG Elements in your Vue components using spring animations.

Expand Down
5 changes: 4 additions & 1 deletion docs/content/3.api/3.use-motions.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
# useMotions
---
title: useMotions
description: Provides access to motion instances declared the template.
---

useMotions is used to access the motion instances from v-motion directives declared from templates.

Expand Down
5 changes: 5 additions & 0 deletions docs/content/3.api/4.use-motion-properties.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
---
title: useMotionProperties
description: Access the Motion Properties of an element.
---

# useMotionProperties

useMotionProperties is used to access [Motion Properties](/features/motion-properties) for a target element.
Expand Down
5 changes: 5 additions & 0 deletions docs/content/3.api/5.use-motion-variants.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
---
title: useMotionVariants
description: Access and modify the variant state.
---

# useMotionVariants

useMotionVariants is used to handle the [Variants](/features/variants) state and selection.
Expand Down
5 changes: 5 additions & 0 deletions docs/content/3.api/6.use-motion-transitions.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
---
title: useMotionTransitions
description: Handle animations of your elements.
---

# useMotionTransitions

useMotionTransitions is used to handle the multiple animations created when you animate your elements.
Expand Down
5 changes: 4 additions & 1 deletion docs/content/3.api/7.use-motion-controls.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
# useMotionControls
---
title: useMotionControls
description: Creates controls for motion properties and transitions.
---

useMotionControls is used to create motion controls from motion properties and motion transitions.

Expand Down
7 changes: 4 additions & 3 deletions docs/content/3.api/8.use-motion-features.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# useMotionFeatures

useMotionFeatures is used to register features such as variant sync, event listeners.
---
title: useMotionFeatures
description: A composable used to register features such as variant sync, event listeners.
---

## Parameters

Expand Down
9 changes: 5 additions & 4 deletions docs/content/3.api/9.use-element-style.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
# useElementStyle
---
title: useElementStyle
description: Sync a reactive object to the CSS style of a target element.
---

useElementStyle is used to sync a reactive object to a target element CSS styling.

It uses [reactiveStyle](https://github.com/vueuse/motion/blob/main/src/reactiveStyle.ts) and bind it to a target.
This uses [reactiveStyle](https://github.com/vueuse/motion/blob/main/src/reactiveStyle.ts) and binds it to a target.

## Parameters

Expand Down
16 changes: 4 additions & 12 deletions docs/content/index.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -20,25 +20,17 @@ hero:
```
features:
title: 'Let''s put things in motion'
title: "Let's put things in motion"

Check failure on line 23 in docs/content/index.yaml

View workflow job for this annotation

GitHub Actions / test (ubuntu-latest, 18)

Strings must use singlequote

items:
- title: Smooth animations
description: based on [Popmotion](https://popmotion.io/)
icon: i-heroicons-arrow-right-20-solid
description: Based on Popmotion
- title: Declarative API
description: inspired by [Framer Motion](https://www.framer.com/motion/)
description: Inspired by Framer Motion
- title: Plug & play
description: with 20+ presets
- title: SSR Ready
description:
- title: First-class support for Nuxt 3
- title: First-class support for Nuxt
- title: Written in TypeScript
- title: Lightweight with <20kb bundle size

links:
- label: Get Started
trailingIcon: i-heroicons-arrow-right-20-solid
to: /getting-started
size: lg
color: white

0 comments on commit 5ecd9bb

Please sign in to comment.