add: readme

Author: fiveam-lukas

README.md

@@ -7,36 +7,77 @@ Find and replace all on all files (CMD+SHIFT+F):
 - Description: My new Nuxt module
 -->
 
-# My Module
+# Glaze for Nuxt
 
 [![npm version][npm-version-src]][npm-version-href]
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
-[![License][license-src]][license-href]
-[![Nuxt][nuxt-src]][nuxt-href]
+[![License][license-src]][license-href] [![Nuxt][nuxt-src]][nuxt-href]
 
-My new Nuxt module for doing amazing things.
+An (unofficial) [Glaze](https://glaze.dev/) module for Nuxt
 
-- [✨  Release Notes](/CHANGELOG.md)
-<!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
-<!-- - [📖 &nbsp;Documentation](https://example.com) -->
-
-## Features
-
-<!-- Highlight some of the features your module provide here -->
-- ⛰ &nbsp;Foo
-- 🚠 &nbsp;Bar
-- 🌲 &nbsp;Baz
+![](public/images/og_image.png)
 
 ## Quick Setup
 
 Install the module to your Nuxt application with one command:
 
 ```bash
-npx nuxi module add my-module
+npx nuxi module add nuxt-glaze
+```
+
+That's it! You can now use [Glaze](https://glaze.dev/) in your Nuxt app ✨
+
+Examples (from their docs):
+
+```ts
+<div data-animate='from:opacity-0.5 to:opacity-1'></div>
+```
+
+```ts
+<div data-animate='to:scale.x-2|scale.y-2'></div>
+```
+
+## Configuration
+
+You can use all settings for glaze in your `nuxt.config.ts` under the key
+`glaze` like so:
+
+```typescript
+export default defineNuxtConfig({
+  modules: [...],
+
+  glaze: {
+    // the root element which will be searched for elements
+    element: document,
+    // the attribute to search for
+    dataAttribute: 'data-animate',
+    // custom breakpoints
+    breakpoints: {
+      default: '(min-width: 1px)',
+    },
+    // defaults for animations
+    defaults: {
+      tl: 'ease-power2.inOut',
+      element: 'to:x-500',
+    },
+    // custom presets
+    presets: {
+      helicopter: 'from:rotate-2160|duration-10',
+    },
+    // watch elements for changes and restart animations with new settings
+    watch: false,
+  },
+})
 ```
 
-That's it! You can now use My Module in your Nuxt app ✨
+Find a full list of options here:
+[Config options for glaze](https://glaze.dev/documentation/install#config)
 
+## Docs
+
+### Find the full docs and examples here:
+
+[Documentation](https://glaze.dev/documentation)
 
 ## Contribution
 
@@ -58,27 +99,20 @@ That's it! You can now use My Module in your Nuxt app ✨
 
   # Run ESLint
   npm run lint
-  
-  # Run Vitest
-  npm run test
-  npm run test:watch
-  
-  # Release new version
-  npm run release
   ```
 
 </details>
 
-
 <!-- Badges -->
-[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82
-[npm-version-href]: https://npmjs.com/package/my-module
 
-[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-src]:
+  https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/my-module
+[npm-downloads-src]:
+  https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82
 [npm-downloads-href]: https://npm.chart.dev/my-module
-
-[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=020420&colorB=00DC82
+[license-src]:
+  https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=020420&colorB=00DC82
 [license-href]: https://npmjs.com/package/my-module
-
 [nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
 [nuxt-href]: https://nuxt.com

playground/nuxt.config.ts

@@ -1,9 +1,26 @@
 export default defineNuxtConfig({
-  modules: [
-    '../src/module',
-    '@nuxtjs/tailwindcss',
-  ],
+  modules: ['../src/module', '@nuxtjs/tailwindcss'],
   devtools: { enabled: true },
   compatibilityDate: '2025-01-08',
-  glaze: {},
+  glaze: {
+    // the root element which will be searched for elements
+    element: document,
+    // the attribute to search for
+    dataAttribute: 'data-animate',
+    // custom breakpoints
+    breakpoints: {
+      default: '(min-width: 1px)',
+    },
+    // defaults for animations
+    defaults: {
+      tl: 'ease-power2.inOut',
+      element: 'to:x-500',
+    },
+    // custom presets
+    presets: {
+      helicopter: 'from:rotate-2160|duration-10',
+    },
+    // watch elements for changes and restart animations with new settings
+    watch: false,
+  },
 })