Writing a better docs

packages/core/src/vuert.ts

@@ -57,12 +57,12 @@ export default class Vuert
                 const now = Date.now();
                 const last = this._throttlers.get(alert.id) ?? 0;
 
-                if ((now - last) > this._options.throttlingDuration)
-                {
-                    this._throttlers.set(alert.id, now);
+                this._throttlers.set(alert.id, now);
 
-                    return false;
-                }
+                if ((now - last) > this._options.throttlingDuration) { return false; }
+
+                // TODO: Debounce the alert instead of throttling it.
+                //        - Apply a maximum duration for the alert to be debounced.
 
                 return true;
             };

packages/docs/.vitepress/theme/index.ts

@@ -11,7 +11,7 @@ const VuertTheme: Theme = {
     Layout: VuertLayout,
     enhanceApp: (ctx: EnhanceAppContext): void =>
     {
-        const vuert = createVuert({ });
+        const vuert = createVuert({ throttlingDuration: 500 });
 
         ctx.app.use(vuert);
     }

packages/docs/pages/guide/your-first-alert.md

@@ -5,9 +5,13 @@
 
     const vuert = useVuert();
 
+    const id = Symbol("[vuert-docs]: your-first-alert");
+
     const emitAlert = () => vuert.emit({
+        id: id,
         message: "This is your first Vuert alert!",
-        timeout: 2500
+        timeout: 2500,
+        custom: "example"
     });
 </script>
 
@@ -24,23 +28,35 @@
 
 <template>
     <AlertHandler v-slot="{ alert, isOpen }">
-        <div v-if="isOpen" class="alert">
-            {{ alert.message }}
+        <div v-if="isOpen" class="alert-overlay">
+            <div class="alert">
+                {{ alert.message }}
+            </div>
         </div>
     </AlertHandler>
 </template>
 
 <style scoped>
-    .alert
+    .alert-overlay
     {
-        background-color: #E2E3E5;
-        border: 1px solid rgba(0, 0, 0, 0.5);
-        border-radius: 1rem;
-        box-shadow: 2.5px 2.5px 5px rgba(0, 0, 0, 0.5);
+        align-items: center;
+        display: flex;
+        justify-content: center;
         position: fixed;
         top: 2rem;
+        user-select: none;
+        width: 100%;
         z-index: 10;
     }
+    .alert
+    {
+        background-color: #FFFFFF;
+        border: 1px solid rgba(0, 0, 0, 0.125);
+        border-radius: 1rem;
+        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25);
+        padding: 0.75rem 1rem;
+        user-select: text;
+    }
 </style>
 ```
 

packages/docs/src/layouts/VuertLayout.vue

@@ -23,6 +23,13 @@
                        v-bind="alert.payload" />
         </Transition>
     </AlertHandler>
+    <AlertHandler v-slot="{ alert, isOpen }" :filter="exampleFilter">
+        <div v-if="isOpen" class="alert-container">
+            <div class="example-alert">
+                {{ alert.message }}
+            </div>
+        </div>
+    </AlertHandler>
     <DefaultTheme.Layout />
     <VuertFooter />
 </template>
@@ -47,6 +54,8 @@
     const modalFilter = (a: AlertOptions<unknown>) => a.priority === "high";
     const toastFilter = (a: AlertOptions<unknown>) => a.priority === "low";
 
+    const exampleFilter = (a: AlertOptions<unknown>) => a.custom === "example";
+
     const vuert = useVuert();
 
     const emitToast = () =>
@@ -93,6 +102,28 @@
     @import "@fortawesome/fontawesome-free/scss/solid";
     @import "@fortawesome/fontawesome-free/scss/brands";
 
+    .alert-container
+    {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        position: fixed;
+        top: calc(2rem + 64px);
+        width: 100%;
+        z-index: 10;
+        user-select: none;
+
+        & > .example-alert
+        {
+            background-color: #FFFFFF;
+            border: 1px solid rgba(0, 0, 0, 0.125);
+            border-radius: 1rem;
+            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25);
+            padding: 0.75rem 1rem;
+            user-select: text;
+        }
+    }
+
     :root
     {
         --vuert-strong-link-color: var(--vp-c-brand-dark);

packages/docs/src/types/vuert.d.ts

@@ -0,0 +1,9 @@
+import { AlertCustomOptions } from "@byloth/vuert";
+
+declare module "@byloth/vuert"
+{
+    export interface AlertCustomOptions
+    {
+        custom?: string;
+    }
+}