chore: Clean up docs

Author: Joepocalyptic

README.md

@@ -9,7 +9,7 @@ Run lightweight, heavily customizable particle simulations in your Nuxt project
 
 - [📖  Documentation](https://nuxt-particles.joeypereira.dev)
 - [✨  Release Notes](/CHANGELOG.md)
-- [🏀 Online playground](https://stackblitz.com/github/your-org/nuxt-particles?file=playground%2Fapp.vue)
+- [🏀 Online playground](https://stackblitz.com/github/Joepocalyptic/nuxt-particles?file=playground%2Fapp.vue)
 
 ## Features
 

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

@@ -51,5 +51,5 @@ export default defineNuxtConfig({
 Learn more about the available options in the [Configuration](/getting-started/configuration) section.
 
 ::alert{type="success"}
-✨ You're all set! Start using the [<NuxtParticles>](/) component in your application.
+✨ You're all set! Start using the [<NuxtParticles>](/components/nuxt-particles) component in your application.
 ::

docs/content/1.getting-started/_dir.yml

@@ -1,2 +1,3 @@
-icon: ph:star-duotone
+title: Getting Started
+icon: material-symbols:bolt-rounded
 navigation.redirect: /getting-started/setup

docs/content/2.components/1.nuxt-particles.md

@@ -0,0 +1,124 @@
+# `<NuxtParticles>`
+
+The `<NuxtParticles>` component renders a [tsParticles](https://particles.js.org) instance inside of a `<div>` element
+with the chosen `id`.
+
+## Example
+
+```vue
+
+<template>
+  <NuxtParticles
+    id="tsparticles"
+    :options="options"
+    @load="onLoad"
+  >
+
+  </NuxtParticles>
+
+  <!-- or -->
+
+  <NuxtParticles
+    id="tsparticles2"
+    url="/path/to/particle-options.json"
+    @load="onLoad"
+  >
+
+  </NuxtParticles>
+</template>
+
+<script setup lang="ts">
+import type { Container } from 'tsparticles-engine'
+
+// See tsParticles documentation for all available options
+const options = {
+  fullScreen: {
+    enable: true,
+    zIndex: -1
+  },
+  background: {
+    color: {
+      value: '#fff'
+    }
+  },
+  particles: {
+    color: {
+      value: "#000"
+    },
+    links: {
+      color: "#000",
+      enable: true
+    },
+    move: {
+      enable: true
+    },
+    number: {
+      value: 100
+    }
+  }
+}
+
+const onLoad = (container: Container) => {
+  // Do something with the container
+  container.pause()
+  setTimeout(() => container.play(), 2000)
+}
+</script>
+```
+
+## Props
+
+### `id`
+
+- Type: `string`
+- Required: `true`
+
+Used by tsParticles to differentiate between multiple instances on the same page. Must be unique.
+
+### `options`
+
+- Type: `IOptions` (see [tsParticles docs](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html))
+- Required: `false`
+
+The options object to pass to tsParticles. May be used in place of the `url` prop to directly pass a JSON object instead
+of loading a configuration file.
+
+### `url`
+
+- Type: `string`
+- Required: `false`
+
+The URL of the JSON file containing the particle configuration. May be used in place of the `options` prop to
+load a configuration file instead of directly passing a JSON object.
+
+## Events
+
+### `load`
+
+- Type: `(container: Container) => void` (see [tsParticles docs](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html))
+
+Called when tsParticles has successfully loaded its canvas. Provides a `container` object that can be used to interact
+with the instance. Some useful methods include:
+
+```ts
+// Pause the animation
+container.pause()
+// Play the animation
+container.play()
+// Refresh the instance
+container.refresh()
+// Destroy the instance
+container.destroy()
+```
+
+## Usage notes
+
+This component automatically lazy-loads the tsParticles library if the `particles.lazy` option is set to `true` in
+your Nuxt configuration. Otherwise, the library is loaded immediately before your entire application is rendered.
+
+Using multiple instances of this component on the same page is safe as long as each instance has a unique `id`. This
+may have performance implications, however, as each instance will be rendering its own canvas. Use one instance with
+multiple particle emitters whenever possible.
+
+If you are using a custom bundle, you must [manually initialize the library](/getting-started/configuration#custom-mode)
+in your application.

docs/content/2.components/_dir.yml

@@ -0,0 +1,3 @@
+title: Components
+icon: material-symbols:grid-view-rounded
+navigation.redirect: /components/nuxt-particles

playground/app.vue

@@ -17,11 +17,19 @@
   </div>
 </template>
 
-<script setup>
-import { ref } from '#imports'
+<script setup lang="ts">
+import { ref, useRuntimeConfig } from '#imports'
+import {loadFull} from 'tsparticles'
+import {tsParticles} from 'tsparticles-engine'
+
+const { mode } = useRuntimeConfig().public.particles
 
 const show = ref(false)
 
+if(process.client && mode === 'custom') {
+  await loadFull(tsParticles)
+}
+
 const options = {
   fullScreen: {
     enable: true,

src/module.ts

@@ -22,7 +22,7 @@ export default defineNuxtModule<ModuleOptions>({
   setup (options, nuxt) {
     const resolver = createResolver(import.meta.url)
 
-    if(!options.lazy) {
+    if(!options.lazy && options.mode !== 'custom') {
       addPlugin(resolver.resolve('./runtime/plugins/particle-loader.client'))
     }
 

src/runtime/plugins/particle-loader.client.ts

@@ -8,9 +8,5 @@ export default defineNuxtPlugin(async (nuxtApp) => {
   const runtimeConfig = useRuntimeConfig()
   const { mode } = runtimeConfig.public.particles
 
-  if (mode === 'custom') {
-    return
-  }
-
   await loadParticles(tsParticles, mode)
 })