feat: rewrite to use app config and rework docs (#143)

Co-authored-by: Daniel Roe <daniel@roe.dev>
Co-authored-by: Sébastien Chopin <seb@nuxt.com>

docs/content/2.elements/1.avatar.md

@@ -0,0 +1,100 @@
+---
+github: true
+---
+
+## Usage
+
+::component-card
+---
+props:
+  src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+  alt: 'Avatar'
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the Avatar.
+
+::component-card
+---
+props:
+  size: 'md'
+baseProps:
+  src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+  alt: 'Avatar'
+---
+::
+
+### Chip
+
+Use the `chipColor`, `chipVariant` and `chipPosition` props to display a chip on the Avatar.
+
+::component-card
+---
+props:
+  chipColor: 'primary'
+  chipVariant: 'solid'
+  chipPosition: 'top-right'
+baseProps:
+  src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+  alt: 'Avatar'
+---
+::
+
+### Placeholder
+
+If there is an error loading the `src` of the avatar or `src` is null a background placeholder will be displayed, customizable in `ui.avatar.background`.
+
+If there's an `alt` prop initials will be displayed on top of the background, customizable in `ui.avatar.placeholder`.
+
+::component-card
+---
+props:
+  alt: 'Benjamin Canac'
+---
+::
+
+### Group
+
+To stack avatars as a group, use the `AvatarGroup` component.
+
+- To limit the amount of avatars to show, use the `max` prop. It'll truncate the avatars and show a "+X" label (where X is the remaining avatars)
+- To size all the avatars equally, pass the `size` prop
+- To adjust the spacing or the ring between avatars, customize with `ui.avatarGroup.margin` or `ui.avatarGroup.ring`
+
+::component-card{slug="AvatarGroup"}
+---
+props:
+  size: 'md'
+  max: 2
+ui:
+  size:
+    '3xs': ''
+    '2xs': ''
+    xs: ''
+    sm: ''
+    md: ''
+    lg: ''
+    xl: ''
+    '2xl': ''
+    '3xl': ''
+code: |
+  <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
+    <UAvatar src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" />
+    <UAvatar src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" />
+---
+
+#default
+:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Avatar"}
+:u-avatar{src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Avatar"}
+:u-avatar{src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="Avatar"}
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset