rename to v-gsap // add playground to docs

Author: holux-design

README.md

@@ -7,17 +7,15 @@
 Install the module to your Nuxt application with one command:
 
 ```bash
-npx nuxi module add v-gsap-nuxt
+npx nuxi module add v-gsap
 ```
 
 That's it! You can now use My Module in your Nuxt app ✨
 
 ## Docs
 
-
 ### Find the full docs and examples here: [Documentation](https://v-gsap-nuxt.vercel.app/)
 
-
 ## Contribution
 
 <details>

docs/assets/css/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

docs/components/BoxComponent.vue

@@ -0,0 +1,50 @@
+<template>
+  <div
+    class="relative bg-white/5 border border-white/10 rounded-lg flex flex-col items-center justify-center gap-3 w-full aspect-[3/2]"
+    :style="{ overflow: `${overflow}` }"
+  >
+    <slot />
+
+    <div class="Crosshair">
+      <div
+        class="Vertical absolute inset-y-0 left-1/2 translate-x-[-50%] w-[1px] bg-white/5 z-[-1]"
+      />
+      <div
+        class="Horizontal absolute inset-x-0 top-1/2 translate-y-[-50%] h-[1px] bg-white/5 z-[-1]"
+      />
+    </div>
+
+    <div class="absolute top-2 left-4 text-white/80">
+      <pre>title</pre>
+    </div>
+
+    <button
+      class="text-white/25 absolute bottom-2 inset-x-0 px-4 overflow-scroll text-[14px]"
+      @click="copy(code)"
+    >
+      <pre v-html="code?.trim()" />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    title?: string
+    crosshair?: boolean
+    code?: string
+    overflow?: string
+  }>(),
+  {
+    crosshair: true,
+    overflow: 'hidden',
+  },
+)
+
+function copy(code?: string) {
+  if (!code) return
+  navigator.clipboard.writeText(code)
+
+  alert('Copied to clipboard')
+}
+</script>

docs/components/DemoComponent.vue

@@ -0,0 +1,8 @@
+<template>
+  <button
+    type="button"
+    class="z-[999] text-white !bg-gradient-to-r to-green-600 from-green-700 shadow-2xl shadow-black font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
+  >
+    Hello World
+  </button>
+</template>

docs/content/0.index.md

@@ -8,14 +8,16 @@ main:
 
 :ellipsis{right=0px width=75% blur=150px}
 
-::block-hero
----
+## ::block-hero
+
 cta:
-  - Get started
-  - /installation/getting-started
-secondary:
-  - Open on GitHub →
-  - https://github.com/holux-design/v-gsap-nuxt
+
+- Get started
+- /installation/getting-started
+  secondary:
+- Open on GitHub →
+- https://github.com/holux-design/v-gsap-nuxt
+
 ---
 
 #title
@@ -30,18 +32,24 @@ Write [GSAP](https://gsap.com/) Animations directly in your Nuxt Website as Dire
 ```
 
 #extra
-  ::list
-  - **v-gsap** directive directly on elements
-  - **Zero-Configuration** needed
-  - **Readable** syntax
-  - **Dumbed-down** predefined Animations
+::list
+
+- **v-gsap** directive directly on elements
+- **Zero-Configuration** needed
+- **Readable** syntax
+- **Dumbed-down** predefined Animations
   ::
 
 #support
-  ::terminal
-  ---
-  content:
-  - npx nuxi module add v-gsap-nuxt
-  ---
-  ::
-::
+::terminal
+
+---
+
+content:
+
+- npx nuxi module add v-gsap
+
+---
+
+::
+::

docs/content/1.installation/1.getting-started.md

@@ -1,34 +1,31 @@
 # Getting Started
 
-`v-gsap-nuxt` is a batteries-included module for easy access to the power of GSAP
-
+`v-gsap` is a batteries-included module for easy access to the power of GSAP
 
 ## Auto install
 
-
 ```bash [npx]
-npx nuxi module add v-gsap-nuxt
+npx nuxi module add v-gsap
 ```
 
-
 ## Install manually
 
 1. Install from npm
 
 ::code-group
 
-  ```bash [npm]
-  npm i v-gsap-nuxt
-  ```
+```bash [npm]
+npm i v-gsap
+```
+
 ::
 
 2. Add module to your `nuxt.config.ts`
 
 ::code-group
 
-  ```ts [nuxt.config.ts]
-  modules: [
-    'v-gsap-nuxt'
-  ]
-  ```
-::
+```ts [nuxt.config.ts]
+modules: ["v-gsap"];
+```
+
+::

docs/nuxt.config.ts

@@ -2,7 +2,7 @@ export default defineNuxtConfig({
   // https://github.com/nuxt-themes/docus
   extends: ['@nuxt-themes/docus'],
 
-  modules: [],
+  modules: ['../src/module', '@nuxtjs/tailwindcss'],
   devtools: { enabled: true },
   compatibilityDate: '2024-10-24',
 
@@ -12,4 +12,18 @@ export default defineNuxtConfig({
       dir: '../.vercel/output',
     },
   },
+
+  vgsap: {
+    presets: [
+      {
+        name: 'rotate',
+        modifiers: 'inifinitely.to',
+        value: {
+          rotate: '360deg',
+          ease: 'linear',
+          duration: 10,
+        },
+      },
+    ],
+  },
 })