Skip to content

Commit 447cbad

Browse files
BobbieGoedeBobbieGoede
committed
feat: update documentation
1 parent 12d1020 commit 447cbad

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+2919
-1205
lines changed

‎docs/app.config.ts

Lines changed: 32 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,37 @@
11
export default defineAppConfig({
2-
docus: {
3-
title: '@vueuse/motion',
4-
description: '🤹 Vue Composables putting your components in motion',
5-
image: 'https://motion.vueuse.org/banner.png',
6-
socials: {
7-
twitter: 'yaeeelglx',
8-
github: 'vueuse/motion',
9-
},
10-
aside: {
11-
level: 1,
12-
},
13-
header: {
14-
title: '@vueuse/motion',
15-
},
16-
footer: {
17-
credits: {
18-
icon: 'IconDocus',
19-
text: 'Powered by Docus',
20-
href: 'https://docus.dev',
2+
ui: {
3+
primary: 'cyan',
4+
gray: 'neutral',
5+
},
6+
header: {
7+
search: true,
8+
colorMode: true,
9+
links: [
10+
{
11+
'icon': 'i-simple-icons-github',
12+
'to': 'https://github.com/vueuse/motion',
13+
'target': '_blank',
14+
'aria-label': 'VueUse Motion',
2115
},
16+
],
17+
},
18+
seo: { siteName: '@vueuse/motion' },
19+
footer: {
20+
credits: `Copyright © ${new Date().getFullYear()}`,
21+
colorMode: false,
22+
links: [
23+
{
24+
'icon': 'i-simple-icons-github',
25+
'to': 'https://github.com/vueuse/motion',
26+
'target': '_blank',
27+
'aria-label': 'VueUse Motion',
28+
},
29+
],
30+
},
31+
toc: {
32+
title: 'Table of Contents',
33+
bottom: {
34+
edit: 'https://github.com/vueuse/motion/docs/edit/main/content',
2235
},
2336
},
2437
})

‎docs/app.vue

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<script setup lang="ts">
2+
// @ts-expect-error This is because we're using Nuxt Content v2.8.2 instead of the new version which includes these types. We're using the old version because the latest has issues with highlighting
3+
import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
4+
import type { PageLink } from '#ui-pro/types'
5+
6+
// Seo
7+
const { seo } = useAppConfig()
8+
useHead({ htmlAttrs: { lang: 'en' }, link: [{ rel: 'icon', href: '/favicon.ico' }] })
9+
useSeoMeta({
10+
titleTemplate: `%s - ${seo.siteName}`,
11+
ogSiteName: seo.siteName,
12+
twitterCard: 'summary_large_image',
13+
})
14+
15+
// Navigation Data
16+
const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
17+
provide('navigation', navigation)
18+
19+
// Search
20+
const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', {
21+
default: () => [],
22+
server: false,
23+
})
24+
25+
// Header
26+
const route = useRoute()
27+
const links: PageLink[] = [
28+
{
29+
label: 'Docs',
30+
to: `/docs/getting-started`,
31+
icon: 'i-heroicons-rocket-launch',
32+
active: route.path.startsWith('/docs'),
33+
},
34+
]
35+
</script>
36+
37+
<template>
38+
<div>
39+
<TheHeader :links="links" />
40+
41+
<NuxtLayout>
42+
<NuxtPage />
43+
</NuxtLayout>
44+
45+
<TheFooter />
46+
47+
<ClientOnly>
48+
<LazyUDocsSearch :files="files" :navigation="navigation" :links="links" />
49+
</ClientOnly>
50+
51+
<UNotifications />
52+
</div>
53+
</template>

‎docs/components/TheFooter.vue

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script setup lang="ts">
2+
const { footer } = useAppConfig()
3+
</script>
4+
5+
<template>
6+
<UFooter>
7+
<template #left>
8+
{{ footer.credits }}
9+
</template>
10+
11+
<template #right>
12+
<UColorModeButton v-if="footer?.colorMode" />
13+
14+
<template v-if="footer?.links">
15+
<UButton
16+
v-for="(link, index) of footer?.links"
17+
:key="index"
18+
v-bind="{ color: 'gray', variant: 'ghost', ...link }"
19+
/>
20+
</template>
21+
</template>
22+
</UFooter>
23+
</template>

‎docs/components/TheHeader.vue

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<script setup lang="ts">
2+
// @ts-expect-error This is because we're using Nuxt Content v2.8.2 instead of the new version which includes these types. We're using the old version because the latest has issues with highlighting
3+
import type { NavItem } from '@nuxt/content/dist/runtime/types'
4+
import type { HeaderLink } from '#ui-pro/types'
5+
6+
defineProps<{ links?: HeaderLink[] }>()
7+
8+
const { header } = useAppConfig()
9+
const { metaSymbol } = useShortcuts()
10+
const navigation = inject<NavItem[]>('navigation', [])
11+
</script>
12+
13+
<template>
14+
<UHeader :links="links">
15+
<template #logo>
16+
<div style="display: flex; align-items: center;">
17+
<img src="/logo.svg" class="w-auto h-8" style="margin-right: .5em">
18+
<span class="text-primary">VueUse</span>Motion
19+
</div>
20+
</template>
21+
22+
<template #right>
23+
<UTooltip text="Search" :shortcuts="[metaSymbol, 'K']">
24+
<UContentSearchButton :label="null" />
25+
</UTooltip>
26+
27+
<UTooltip text="Toggle Theme">
28+
<UColorModeButton v-if="header?.colorMode" />
29+
</UTooltip>
30+
31+
<template v-if="header?.links">
32+
<UButton
33+
v-for="(link, index) of header.links"
34+
:key="index"
35+
v-bind="{ color: 'gray', variant: 'ghost', ...link }"
36+
/>
37+
</template>
38+
</template>
39+
40+
<template #panel>
41+
<UNavigationTree :links="mapContentNavigation(navigation)" />
42+
</template>
43+
</UHeader>
44+
</template>

‎docs/components/content/ComponentProps.vue

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<script setup lang="ts">
2+
import { camelCase, upperFirst } from 'scule'
3+
4+
const props = defineProps({
5+
slug: {
6+
type: String,
7+
default: null,
8+
},
9+
})
10+
11+
const route = useRoute()
12+
13+
let name = props.slug || `U${upperFirst(camelCase(route.params.slug[route.params.slug.length - 1]))}`
14+
15+
// TODO: Remove once merged on `main` branch
16+
if (['AvatarGroup', 'ButtonGroup', 'MeterGroup'].includes(name)) {
17+
name = `U${name}`
18+
}
19+
if (['avatar-group', 'button-group', 'radio'].includes(name)) {
20+
name = `U${upperFirst(camelCase(name))}`
21+
}
22+
23+
const meta = await fetchComponentMeta(name)
24+
</script>
25+
26+
<template>
27+
<div>
28+
<FieldGroup>
29+
<ComponentPropsField v-for="prop in meta?.meta?.props" :key="prop.name" :prop="prop" />
30+
</FieldGroup>
31+
</div>
32+
</template>

‎docs/components/content/Face.vue

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<script setup lang="ts">
2+
import { ref } from 'vue'
3+
4+
// const bigBottomCircle = ref<SVGElement>()
5+
// const smallBottomCircle = ref<SVGElement>()
6+
// const bigTopCircle = ref<SVGElement>()
7+
const head = ref<SVGElement>()
8+
// const arms = ref<SVGElement>()
9+
// const legs = ref<SVGElement>()
10+
const leftEye = ref<SVGElement>()
11+
const rightEye = ref<SVGElement>()
12+
const mouth = ref<SVGElement>()
13+
14+
// const refs = [
15+
// head,
16+
// leftEye,
17+
// rightEye,
18+
// mouth
19+
// ]
20+
21+
// refs.forEach((ref, index) => {
22+
// const { variant } = useMotion(ref, {
23+
// initial: {
24+
// scale: 1,
25+
// y: 100,
26+
// opacity: 0,
27+
// },
28+
// enter: {
29+
// y: 0,
30+
// opacity: 1,
31+
// transition: {
32+
// type: 'spring',
33+
// stiffness: 320,
34+
// damping: 20,
35+
// delay: index * 50,
36+
// onComplete: () => {
37+
// variant.value = 'levitate'
38+
// },
39+
// },
40+
// },
41+
// levitate: {
42+
// y: 15,
43+
// transition: {
44+
// duration: 1500,
45+
// repeat: Number.POSITIVE_INFINITY,
46+
// ease: 'easeInOut',
47+
// repeatType: 'mirror',
48+
// },
49+
// },
50+
// })
51+
// })
52+
</script>
53+
54+
<template>
55+
<div>
56+
<svg
57+
viewBox="0 0 76 70" version="1.1"
58+
59+
xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;overflow:visible;"
60+
>
61+
<g transform="matrix(1,0,0,1,-263.171,-57.6087)">
62+
<mask id="mask2" mask-type="alpha">
63+
<path fill-rule="evenodd" clip-rule="evenodd" d="M279.597,67.539C298.034,55.475 306.832,56.307 320.241,67.539C333.649,78.772 346.638,96.661 324.85,113.302C303.061,129.943 293.005,128.695 275.826,113.302C258.647,97.909 261.161,79.604 279.597,67.539Z" style="fill:rgb(122,216,223);" />
64+
</mask>
65+
<g ref="head" mask="url(#mask2)">
66+
<path fill-rule="evenodd" clip-rule="evenodd" d="M279.597,67.539C298.034,55.475 306.832,56.307 320.241,67.539C333.649,78.772 346.638,96.661 324.85,113.302C303.061,129.943 293.005,128.695 275.826,113.302C258.647,97.909 261.161,79.604 279.597,67.539Z" style="fill:rgb(122,216,223);" />
67+
<path d="M328.005,117.453L327.623,117.567C324.607,118.49 322.412,119.62 314.753,123.891C308.589,127.328 304.84,134.184 305.408,140.658C306.03,147.737 311.523,152.832 321.053,153.851C330.671,154.879 338.92,151.037 343.573,144.174C347.98,137.673 348.242,129.675 343.934,123.943C342.296,121.764 340.674,120.122 339.024,118.964C335.68,116.615 332.216,116.214 328.005,117.453ZM338.803,119.274C340.418,120.408 342.012,122.021 343.628,124.17C347.833,129.765 347.577,137.587 343.256,143.961C338.682,150.708 330.571,154.486 321.093,153.473C311.738,152.472 306.394,147.515 305.789,140.624C305.234,134.301 308.906,127.588 314.94,124.223L317.357,122.879C323.35,119.564 325.279,118.651 328.113,117.817C332.218,116.61 335.561,116.997 338.803,119.274Z" style="fill:white;fill-rule:nonzero;" />
68+
<path d="M329.148,106.11C326.216,106.94 323.044,108.216 319.236,110.05L317.037,111.127C315.051,112.117 313.367,113.018 306.478,116.718C295.964,122.363 289.567,133.626 290.536,144.258C291.595,155.874 300.952,164.232 317.215,165.907C333.638,167.598 347.719,161.283 355.661,150.001C363.182,139.318 363.628,126.18 356.283,116.768C353.485,113.184 350.715,110.484 347.902,108.582C342.211,104.733 336.322,104.077 329.148,106.11ZM347.687,108.897C350.464,110.775 353.206,113.446 355.981,117.001C363.218,126.274 362.778,139.23 355.348,149.783C347.486,160.952 333.54,167.205 317.254,165.529C301.165,163.873 291.959,155.649 290.917,144.223C289.962,133.746 296.278,122.627 306.66,117.052L312.855,113.731C315.58,112.279 316.569,111.777 318.294,110.932L318.726,110.72C322.821,108.717 326.173,107.347 329.253,106.475C336.324,104.472 342.095,105.115 347.687,108.897Z" style="fill:white;fill-rule:nonzero;" />
69+
<path d="M327.037,125.514L326.727,125.603C325.005,126.115 323.693,126.762 319.291,129.104C315.668,131.033 313.461,134.882 313.797,138.521C314.163,142.506 317.399,145.371 322.994,145.942C328.632,146.517 333.471,144.366 336.202,140.521C338.794,136.873 338.949,132.378 336.41,129.155C335.45,127.935 334.497,127.015 333.527,126.365C331.557,125.044 329.513,124.819 327.037,125.514ZM333.314,126.68C334.248,127.307 335.172,128.199 336.109,129.389C338.537,132.472 338.39,136.783 335.89,140.302C333.239,144.034 328.534,146.125 323.033,145.564C317.611,145.011 314.526,142.279 314.177,138.487C313.857,135.003 315.98,131.297 319.472,129.439L321.212,128.517C324.444,126.816 325.547,126.327 327.14,125.879C329.515,125.213 331.442,125.426 333.314,126.68Z" style="fill:white;fill-rule:nonzero;" />
70+
<path d="M302.132,49.303C287.448,52.221 268.256,65.279 254.033,81.091C239.568,97.171 234.446,111.379 242.974,116.393C255.02,123.477 271.593,123.477 292.687,116.41C314.527,105.197 327.893,94.476 332.809,84.218C336.678,76.145 336.506,65.927 332.019,58.644C326.775,50.131 316.527,46.442 302.132,49.303ZM331.693,58.843C336.11,66.012 336.279,76.094 332.464,84.054C327.592,94.219 314.284,104.894 292.538,116.061C271.567,123.084 255.104,123.084 243.169,116.066C234.962,111.24 240.003,97.258 254.318,81.345C268.492,65.588 287.617,52.575 302.207,49.675C316.453,46.845 326.538,50.474 331.693,58.843Z" style="fill:white;fill-rule:nonzero;" />
71+
<path d="M298.339,57.817C287.546,60.039 273.448,69.975 263,82.007C252.364,94.253 248.595,105.081 254.893,108.916C263.752,114.313 275.936,114.313 291.435,108.933C307.484,100.399 317.304,92.241 320.918,84.429C323.764,78.279 323.638,70.495 320.336,64.944C316.475,58.451 308.928,55.638 298.339,57.817ZM320.007,65.137C323.243,70.576 323.367,78.229 320.571,84.27C316.999,91.988 307.237,100.1 291.282,108.587C275.908,113.919 263.839,113.919 255.092,108.592C249.104,104.945 252.797,94.336 263.289,82.255C273.687,70.281 287.719,60.391 298.417,58.189C308.854,56.041 316.233,58.793 320.007,65.137Z" style="fill:white;fill-rule:nonzero;" />
72+
<path d="M294.286,67.437C287.268,68.856 278.112,75.193 271.325,82.867C264.4,90.698 261.941,97.636 266.083,100.114C271.849,103.563 279.771,103.563 289.841,100.131L290.462,99.804C300.526,94.476 306.699,89.38 309.005,84.486C310.86,80.548 310.778,75.565 308.624,72.008C306.103,67.846 301.18,66.044 294.286,67.437ZM308.296,72.204C310.382,75.648 310.462,80.497 308.659,84.325C306.35,89.225 300.027,94.383 289.69,99.783C279.744,103.17 271.934,103.17 266.28,99.788C262.492,97.522 264.787,90.917 271.41,83.348L271.613,83.118C278.349,75.501 287.439,69.209 294.362,67.81C301.106,66.447 305.865,68.189 308.296,72.204Z" style="fill:white;fill-rule:nonzero;" />
73+
<path d="M289.735,77.474C286.778,78.199 282.945,81.417 280.103,85.314L279.903,85.592C277.143,89.475 276.196,92.883 277.942,94.149C280.384,95.92 283.729,95.92 287.961,94.172C292.343,91.399 295.016,88.754 296.005,86.208C296.785,84.198 296.751,81.658 295.843,79.839C294.771,77.692 292.662,76.756 289.735,77.474ZM295.5,80.008C296.358,81.727 296.391,84.157 295.648,86.071C294.694,88.525 292.075,91.118 287.785,93.836C283.694,95.523 280.485,95.523 278.168,93.843C276.636,92.731 277.617,89.371 280.413,85.537C283.206,81.706 286.975,78.542 289.827,77.843C292.582,77.167 294.509,78.023 295.5,80.008Z" style="fill:white;fill-rule:nonzero;" />
74+
<path d="M331.339,95.775C329.783,97.701 329.87,99.403 331.314,100.704C332.477,101.749 334.488,102.467 336.53,102.674C340.285,103.054 342.916,99.628 341.795,95.841C340.625,91.894 334.587,91.755 331.339,95.775ZM341.427,95.949C342.475,99.483 340.045,102.647 336.569,102.295C334.601,102.096 332.664,101.406 331.571,100.422C330.28,99.259 330.205,97.786 331.637,96.014C334.712,92.208 340.358,92.337 341.427,95.949Z" style="fill:white;fill-rule:nonzero;" />
75+
<path d="M216.231,24.113C211.427,33.433 207.679,42.521 204.989,51.376L204.788,52.045L204.815,52.108C208.53,60.734 219.389,65.768 237.363,67.238C249.957,68.268 266.636,62.056 278.765,52.641C291.089,43.075 294.755,33.276 286.056,28.429C276.674,23.201 261.03,18.586 247.062,17.006C231.148,15.207 219.666,17.446 216.231,24.113ZM247.019,17.384C260.939,18.958 276.534,23.559 285.869,28.76C294.227,33.417 290.673,42.916 278.53,52.341C266.471,61.702 249.881,67.881 237.395,66.86L236.862,66.815C219.51,65.315 208.99,60.439 205.278,52.211L205.194,52.021L205.174,52.088C207.87,43.065 211.669,33.798 216.57,24.286C219.906,17.814 231.253,15.601 247.019,17.384Z" style="fill:white;fill-rule:nonzero;" />
76+
<path d="M218.062,20.152C214.106,29.235 211.018,38.093 208.798,46.724L208.615,47.443L208.635,47.498C211.704,55.933 220.686,60.861 235.545,62.299C245.964,63.308 259.752,57.23 269.777,48.02C279.958,38.667 282.981,29.104 275.794,24.365C268.04,19.251 255.112,14.737 243.569,13.193C230.41,11.432 220.904,13.625 218.062,20.152ZM243.518,13.569C255.007,15.107 267.879,19.601 275.583,24.681C282.483,29.232 279.543,38.531 269.517,47.741C259.565,56.884 245.877,62.918 235.583,61.921L235.142,61.877C220.825,60.413 212.151,55.654 209.086,47.616L209.013,47.422L209,47.48C211.227,38.66 214.364,29.601 218.413,20.303C221.163,13.986 230.512,11.829 243.518,13.569Z" style="fill:white;fill-rule:nonzero;" />
77+
</g>
78+
</g>
79+
<g transform="matrix(1,0,0,1,-263.171,-57.6087)">
80+
<path ref="mouth" d="M306.632,98.486L306.584,98.515C305.623,99.087 304.687,99.535 303.717,99.831C302.748,100.129 301.757,100.277 300.764,100.28C299.771,100.278 298.78,100.129 297.813,99.83C296.842,99.535 295.905,99.085 294.946,98.511L294.898,98.481C294.57,98.285 294.144,98.275 293.799,98.49C293.309,98.793 293.162,99.432 293.47,99.915C294.207,101.072 295.317,102.021 296.592,102.666C297.869,103.312 299.316,103.651 300.763,103.653C302.211,103.655 303.659,103.315 304.937,102.671C306.212,102.027 307.323,101.079 308.059,99.92C308.262,99.6 308.28,99.181 308.069,98.836C307.771,98.348 307.127,98.191 306.632,98.486Z" />
81+
<path ref="rightEye" d="M310.334,89.171C311.554,89.373 312.889,88.753 313.446,87.656C314.676,85.231 311.842,83.127 309.596,84.153C307.238,85.232 307.807,88.752 310.334,89.171Z" style="fill-rule:nonzero;" />
82+
<path ref="leftEye" d="M290.984,89.171C289.764,89.373 288.429,88.753 287.872,87.656C286.641,85.231 289.476,83.127 291.722,84.153C294.08,85.232 293.511,88.752 290.984,89.171Z" style="fill-rule:nonzero;" />
83+
</g>
84+
</svg>
85+
</div>
86+
</template>
87+
88+
<style>
89+
.person {
90+
display: flex;
91+
align-items: center;
92+
justify-content: center;
93+
width: 100%;
94+
}
95+
</style>

0 commit comments

Comments
 (0)