docs: add get-started improve styles

apps/docs/src/app/app.routes.ts

@@ -8,6 +8,21 @@ export const appRoutes: Route[] = [
         (m) => m.DocContainerPageComponent
       ),
     children: [
+      {
+        path: 'get-started',
+        loadComponent: () =>
+          import('./pages/get-started-page/get-started-page.component').then(
+            (g) => g.GetStartedPageComponent
+          ),
+      },
+      {
+        path: 'animatecss/defaults',
+        loadComponent: () =>
+          import('./pages/default-page/default-page.component').then(
+            (m) => m.DefaultPageComponent
+          ),
+        runGuardsAndResolvers: 'always',
+      },
       {
         path: ':libraryName/:motionName',
         loadComponent: () =>
@@ -18,7 +33,7 @@ export const appRoutes: Route[] = [
       },
       {
         path: '',
-        redirectTo: 'animatecss/flash',
+        redirectTo: 'get-started',
         pathMatch: 'full',
       },
     ],

apps/docs/src/app/core/api-table/api-table.component.html

@@ -1,4 +1,4 @@
-<h4 class="mb-2 mt-6 text-3xl capitalize">{{ label() }}</h4>
+<h4 class="mb-4 mt-6 text-3xl capitalize">{{ label() }}</h4>
 <table class="api-table table">
   <thead class="head">
     <tr class="capitalize">

apps/docs/src/app/core/sidebar/sidebar-link/sidebar-link.component.html

@@ -2,6 +2,7 @@
 
 <a
   [routerLinkActive]="'selected'"
+  [queryParams]="queryParams()"
   class="sidebar-link my-3 ml-0 flex h-8 cursor-pointer items-center justify-between rounded-md pl-4 pr-2 hover:bg-slate-100 hover:font-medium"
   [routerLink]="_link.url"
   >{{ _link.name }}

apps/docs/src/app/core/sidebar/sidebar-link/sidebar-link.component.ts

@@ -1,5 +1,5 @@
 import { Component, input } from '@angular/core';
-import { RouterLink, RouterLinkActive } from '@angular/router';
+import { Params, RouterLink, RouterLinkActive } from '@angular/router';
 import { SidebarLink } from '../sidebar.component';
 
 @Component({
@@ -10,4 +10,5 @@ import { SidebarLink } from '../sidebar.component';
 })
 export class SidebarLinkComponent {
   link = input.required<SidebarLink>();
+  queryParams = input<Params | null | undefined>();
 }

apps/docs/src/app/core/sidebar/sidebar.component.html

@@ -19,6 +19,14 @@
 
           @if (!collapsible.expanded()) {
             <ul @collapseOnLeave @expandOnEnter>
+              @if (route.default) {
+                <app-sidebar-link
+                  [link]="{
+                    name: 'Defaults',
+                    url: ['/doc', route.default, 'defaults'],
+                  }"
+                ></app-sidebar-link>
+              }
               @if (route.children) {
                 @for (link of route.children; track $index) {
                   <li>

apps/docs/src/app/core/sidebar/sidebar.component.ts

@@ -9,6 +9,7 @@ interface SidebarRoot {
   name: string;
   groups: SidebarGroup[];
   children?: SidebarLink[];
+  default?: string;
 }
 
 interface SidebarGroup {
@@ -18,17 +19,17 @@ interface SidebarGroup {
 
 export interface SidebarLink {
   name: string;
-  url: string;
+  url: string | string[];
   mode?: 'experimental';
 }
 
 export const SIDEBAR_ROUTES = [
   {
-    name: 'Getting Started',
+    name: 'Documentation',
     children: [
       {
-        name: 'Introduction',
-        url: '/doc/introduction',
+        name: 'Get Started',
+        url: '/doc/get-started',
       },
       {
         name: 'Installation',
@@ -47,6 +48,7 @@ export const SIDEBAR_ROUTES = [
   },
   {
     name: 'Animate CSS',
+    default: 'animatecss',
     groups: [
       {
         name: 'Attention Seekers',

apps/docs/src/app/motion-data/animate-css-data.ts

@@ -100,6 +100,7 @@ import {
 } from '@ngverse/motion/animatecss';
 
 import {
+  createDefaultOptionsDoc,
   MotionGroup,
   MotionItem,
   MotionOption,
@@ -167,6 +168,11 @@ function getAllLeaves(
 
 export const ANIMATE_CSS_DATA: MotionGroup = {
   name: 'animatecss',
+  title: 'Animate CSS',
+  description:
+    'Animations are implemented using the <a class="underline" href="https://animate.style/" target="_blank">Animate.css</a> library',
+  defaults: createDefaultOptionsDoc('1000', '0', 'ease-in-out'),
+  setDefault: 'setAnimatecssDefaults',
   motions: [
     /** Attention Seekers */
     getAllStates('attention_seekers', 'bounce', bounce),

apps/docs/src/app/motion-data/motion-data.ts

@@ -10,6 +10,10 @@ import { MotionData, TRIGGER_TYPES } from './motion-types';
 export const ANIMATE_DATA: MotionData = [
   {
     name: 'generalcss',
+    defaults: [],
+    setDefault: '',
+    description: '',
+    title: '',
     motions: [
       {
         name: 'expand',

apps/docs/src/app/motion-data/motion-types.ts

@@ -29,7 +29,52 @@ export interface MotionItem {
 
 export interface MotionGroup {
   name: string;
+  title: string;
   motions: MotionItem[];
+  defaults: MotionOption[];
+  setDefault: string;
+  description: string;
 }
 
 export type MotionData = Array<MotionGroup>;
+
+export function createDefaultOptionsDoc(
+  duration: string,
+  delay: string,
+  easing: string
+) {
+  return [
+    {
+      name: 'duration',
+      type: 'number',
+      default: duration,
+      description: 'The duration of the animation in milliseconds',
+    },
+    {
+      name: 'delay',
+      type: 'number',
+      default: delay,
+      description: 'The delay of the animation in milliseconds',
+    },
+    {
+      name: 'easing',
+      type: 'string',
+      default: easing,
+      description:
+        'The easing of the animation </br> <strong>Some animations require specific easing functions to be implemented; in that case, this parameter will not apply</strong> ',
+    },
+    {
+      name: 'children',
+      type: "'before' | 'after' | 'none'",
+      default: 'none',
+      description: `<p>Controls the order of child animations relative to the parent animation when using an animation trigger.</p>
+  <ul>
+    <li><strong>'none'</strong> (default) – Disables child animations, preventing them from running.</li>
+    <li><strong>'before'</strong> – Runs child animations first, then the parent animation.</li>
+    <li><strong>'after'</strong> – Runs the parent animation first, then the child animations.</li>
+  </ul>
+  <p>This property is only applicable when using animation triggers. If using raw animations, the execution order must be handled manually.</p>
+  `,
+    },
+  ];
+}

apps/docs/src/app/pages/default-page/default-page.component.html

@@ -0,0 +1,9 @@
+<h1 class="mb-4 text-7xl">{{ title() }}</h1>
+<p [innerHTML]="description()"></p>
+<app-api-table
+  label="Default Options"
+  [data]="defaults()"
+  [headers]="['Name', 'Type', 'Default', 'Description']"
+></app-api-table>
+<h4 class="mb-4 mt-6 text-3xl capitalize">Update function</h4>
+<app-source-code [code]="setDefaultCode()"></app-source-code>

apps/docs/src/app/core/animate-options.spec.ts → apps/docs/src/app/pages/default-page/default-page.component.spec.ts

@@ -1,16 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MotionOptionsComponent } from './motion-options';
 
-describe('MotionOptionsComponent', () => {
-  let component: MotionOptionsComponent;
-  let fixture: ComponentFixture<MotionOptionsComponent>;
+import { DefaultPageComponent } from './default-page.component';
+
+describe('DefaultPageComponent', () => {
+  let component: DefaultPageComponent;
+  let fixture: ComponentFixture<DefaultPageComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MotionOptionsComponent],
+      imports: [DefaultPageComponent],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(MotionOptionsComponent);
+    fixture = TestBed.createComponent(DefaultPageComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

apps/docs/src/app/pages/default-page/default-page.component.ts

@@ -0,0 +1,46 @@
+import { Component, computed, inject, signal } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ApiTableComponent } from '../../core/api-table/api-table.component';
+import { SourceCodeComponent } from '../../core/source-code/source-code.component';
+import { ANIMATE_DATA } from '../../motion-data/motion-data';
+import { MotionOption } from '../../motion-data/motion-types';
+
+@Component({
+  selector: 'app-default-page',
+  imports: [ApiTableComponent, SourceCodeComponent],
+  templateUrl: './default-page.component.html',
+  styleUrl: './default-page.component.css',
+})
+export class DefaultPageComponent {
+  defaults = signal<MotionOption[]>([]);
+  description = signal<string>('');
+  title = signal<string>('');
+  setDefault = signal<string>('');
+  libraryName = signal<string>('');
+  // private router = inject(Router);
+  private activatedRoute = inject(ActivatedRoute);
+  private router = inject(Router);
+
+  setDefaultCode = computed(() => {
+    return `import {${this.setDefault()}} from '@ngverse/motion/${this.libraryName()}'`;
+  });
+
+  constructor() {
+    this.updateData();
+    this.router.events.subscribe(() => {
+      this.updateData();
+    });
+  }
+
+  updateData() {
+    const libraryName = this.activatedRoute.snapshot.url[0].path;
+    const library = ANIMATE_DATA.find((a) => a.name === libraryName);
+    if (library && libraryName) {
+      this.libraryName.set(libraryName);
+      this.defaults.set(library.defaults);
+      this.description.set(library.description);
+      this.title.set(library.title);
+      this.setDefault.set(library.setDefault);
+    }
+  }
+}

apps/docs/src/app/pages/get-started-page/get-started-page.component.html

@@ -0,0 +1,78 @@
+<article class="prose prose-xl prose-h2:my-4 prose-p:mb-4 max-w-none">
+  <h1>&#64;ngverse/motion</h1>
+  <h2>Introduction</h2>
+  <p>
+    <app-project-name [code]="true"></app-project-name> is an Angular animation
+    library that implements animations from popular CSS animation libraries in
+    an Angular way using <code>&#64;angular/animations</code> . It is
+    customizable and includes relevant triggers for animations.
+  </p>
+  <h2>Installation</h2>
+  <p>Install the following package:</p>
+  <app-source-code
+    language="bash"
+    code="npm install @ngverse/motion --save"
+  ></app-source-code>
+  <h2>Usage</h2>
+  <p>
+    In order to use animation import the proper animation and attach it to any
+    trigger you want for example:
+  </p>
+  <app-source-code language="ts" [code]="exampleUsage"></app-source-code>
+  <p>
+    This will animate the element with <code>fadeIn</code> on
+    <code>:enter</code>
+  </p>
+  <p>
+    Animations are grouped by the library they originate from, so you should
+    import them using their specific import path.
+  </p>
+  <p>
+    In this case you are importing <code>fadeIn</code> from
+    <code>&#64;ngverse/motion/animatecss</code>
+  </p>
+  <h3>Triggers</h3>
+  <p>
+    Many times, we use animations with triggers like <code>:enter</code>,
+    <code>:leave</code>, etc. Therefore, all animations come with predefined
+    triggers that you can use in your component. There are four predefined
+    triggers:
+  </p>
+  <ul>
+    <li>:enter</li>
+    <li>:leave</li>
+    <li>:incr</li>
+    <li>:decr</li>
+  </ul>
+  <p>
+    Depending on the animation version, it may include all four triggers or only
+    entry triggers like <code>:enter</code> and <code>:incr</code>, or exit
+    triggers like <code>:leave</code> and <code>:decr</code>.
+  </p>
+  <p>So we can write the previous example like this:</p>
+  <app-source-code language="ts" [code]="enterExampleUsage"></app-source-code>
+  <h2>Configuration</h2>
+  <p>There are multiple levels of configuration:</p>
+  <ul>
+    <li>library configuration</li>
+    <li>animation type configuration</li>
+    <li>animation configuration</li>
+  </ul>
+  <h3>Library configuration</h3>
+  <p>
+    You can set global configuration for a whole library. For example in order
+    to set configuration for `animatecss` you can use `setAnimateCssDefaults`
+    methods
+  </p>
+  <h3>Animation type configuration</h3>
+  <p>
+    you can also set configuration per animation type. For example if you want
+    that all your <code>fadeIn</code>
+    animation duration to be 3000ms you can use `setFadeInDefaults`
+  </p>
+  <h3>Animation configuration</h3>
+  <p>
+    You can also set configuration per animation. This is pretty straitforward,
+    as you just pass different params to the animation
+  </p>
+</article>