chore(demo): improve LCP

taiga-family · Nov 7, 2023 · 61a2af9 · 61a2af9
1 parent b3cec10
commit 61a2af9
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 140 deletions.
diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
@@ -1,21 +1,21 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
 
-import {GettingStartedComponent} from './getting-started/getting-started.component';
-import {LandingComponent} from './landing/landing.component';
-
 export const ROUTES: Routes = [
     {
         path: ``,
-        component: LandingComponent,
+        loadChildren: async () =>
+            (await import(`./landing/landing.module`)).LandingModule,
         data: {
             title: `A powerful set of open source components for Angular`,
         },
     },
     // Documentation
     {
         path: `getting-started`,
-        component: GettingStartedComponent,
+        loadChildren: async () =>
+            (await import(`./getting-started/getting-started.module`))
+                .GettingStartedModule,
         data: {
             title: `Getting started`,
         },

diff --git a/projects/demo/src/modules/app/getting-started/getting-started.module.ts b/projects/demo/src/modules/app/getting-started/getting-started.module.ts
@@ -1,12 +1,21 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
 import {TuiDocPageModule} from '@taiga-ui/addon-doc';
 
 import {GettingStartedComponent} from './getting-started.component';
 
 @NgModule({
-    imports: [CommonModule, TuiDocPageModule],
+    imports: [
+        CommonModule,
+        TuiDocPageModule,
+        RouterModule.forChild([
+            {
+                path: ``,
+                component: GettingStartedComponent,
+            },
+        ]),
+    ],
     declarations: [GettingStartedComponent],
-    exports: [GettingStartedComponent],
 })
 export class GettingStartedModule {}
diff --git a/projects/demo/src/modules/app/landing/landing.component.ts b/projects/demo/src/modules/app/landing/landing.component.ts
@@ -10,7 +10,7 @@ import {
 } from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {INTERSECTION_ROOT} from '@ng-web-apis/intersection-observer';
-import {EMPTY_QUERY, TuiDay} from '@taiga-ui/cdk';
+import {EMPTY_QUERY} from '@taiga-ui/cdk';
 
 @Component({
     selector: 'landing',
@@ -30,12 +30,6 @@ export class LandingComponent implements OnInit {
 
     current = 0;
 
-    tags = ['Angular', 'Open source'];
-
-    date: TuiDay | null = null;
-
-    readonly labels = ['New', 'Read', 'Archived', 'Junk'];
-
     constructor(
         @Inject(Router) private readonly router: Router,
         @Inject(ActivatedRoute) private readonly activatedRoute: ActivatedRoute,
@@ -60,10 +54,6 @@ export class LandingComponent implements OnInit {
         }
     }
 
-    onDay(date: TuiDay): void {
-        this.date = date;
-    }
-
     onClick(): void {
         this.blocks.forEach(({nativeElement}, index) => {
             if (index === this.current + 1) {

diff --git a/projects/demo/src/modules/app/landing/landing.module.ts b/projects/demo/src/modules/app/landing/landing.module.ts
@@ -1,42 +1,20 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {IntersectionObserverModule} from '@ng-web-apis/intersection-observer';
 import {TuiAutoFocusModule, TuiRepeatTimesModule} from '@taiga-ui/cdk';
-import {
-    TuiButtonModule,
-    TuiCalendarModule,
-    TuiHintModule,
-    TuiTextfieldControllerModule,
-} from '@taiga-ui/core';
-import {
-    TuiCheckboxLabeledModule,
-    TuiInputDateModule,
-    TuiInputTagModule,
-    TuiSliderModule,
-    TuiToggleModule,
-} from '@taiga-ui/kit';
+import {TuiButtonModule} from '@taiga-ui/core';
 
 import {LandingComponent} from './landing.component';
 
 @NgModule({
     imports: [
         CommonModule,
-        RouterModule,
-        FormsModule,
-        IntersectionObserverModule,
         TuiButtonModule,
         TuiRepeatTimesModule,
-        TuiInputTagModule,
-        TuiInputDateModule,
-        TuiCalendarModule,
-        TuiTextfieldControllerModule,
-        TuiHintModule,
-        TuiCheckboxLabeledModule,
-        TuiToggleModule,
-        TuiSliderModule,
         TuiAutoFocusModule,
+        IntersectionObserverModule,
+        RouterModule.forChild([{path: ``, component: LandingComponent}]),
     ],
     declarations: [LandingComponent],
     exports: [LandingComponent],

diff --git a/projects/demo/src/modules/app/landing/landing.style.less b/projects/demo/src/modules/app/landing/landing.style.less
@@ -208,7 +208,6 @@
     height: 31.25rem;
     background: white;
     border-radius: 3.75rem;
-    padding: 2.75rem 3rem;
     box-sizing: border-box;
     overflow: hidden;
 

diff --git a/projects/demo/src/modules/app/landing/landing.template.html b/projects/demo/src/modules/app/landing/landing.template.html
@@ -16,99 +16,12 @@
         />
     </div>
     <div class="container">
-        <h2 class="title">
-            Dozens of
-            <br />
-            components
-        </h2>
-        <tui-input-tag
-            tuiHintContent="Customizable for any use case"
-            class="tui-space_vertical-10"
-            [tuiTextfieldLabelOutside]="true"
-            [(ngModel)]="tags"
-        ></tui-input-tag>
-        <div class="flex">
-            <div class="date">
-                <tui-input-date
-                    required
-                    [(ngModel)]="date"
-                    (click.capture.stop)="(0)"
-                    (keydown.capture.stop)="(0)"
-                    (mousedown.capture.stop)="(0)"
-                >
-                    Choose date
-                    <input
-                        placeholder="dd.mm.yyyy"
-                        tuiTextfield
-                    />
-                </tui-input-date>
-                <tui-calendar
-                    class="calendar"
-                    [value]="date"
-                    (dayClick)="onDay($event)"
-                    (event.prevent.silent)="(0)"
-                ></tui-calendar>
-            </div>
-            <div>
-                <tui-checkbox-labeled
-                    *ngFor="let label of labels"
-                    size="l"
-                    class="tui-space_bottom-4"
-                    [ngModel]="label === labels[1]"
-                >
-                    {{ label }}
-                </tui-checkbox-labeled>
-            </div>
-            <div class="controls">
-                <label>
-                    <tui-toggle
-                        size="l"
-                        class="tui-space_right-3"
-                        [ngModel]="true"
-                        [showIcons]="true"
-                    ></tui-toggle>
-                    Push notifications
-                </label>
-                <input
-                    size="m"
-                    step="any"
-                    tuiSlider
-                    type="range"
-                    class="tui-space_vertical-6"
-                    [max]="140"
-                    [ngModel]="80"
-                />
-                <div class="icons">
-                    <button
-                        appearance=""
-                        icon="tuiIconVolumeXLarge"
-                        shape="rounded"
-                        title="Mute speaker"
-                        tuiIconButton
-                        type="button"
-                        class="button"
-                    ></button>
-                    <button
-                        appearance=""
-                        icon="tuiIconMicOffLarge"
-                        shape="rounded"
-                        title="Mute microphone"
-                        tuiIconButton
-                        type="button"
-                        class="button"
-                    ></button>
-                    <button
-                        appearance=""
-                        icon="tuiIconPhoneForwardedLarge"
-                        shape="rounded"
-                        title="Forward call"
-                        tuiIconButton
-                        type="button"
-                        class="error"
-                    ></button>
-                </div>
-            </div>
-        </div>
+        <iframe
+            height="100%"
+            src="https://taiga-family.github.io/preview-landing-components/"
+            title="Preview of components"
+            width="100%"
+        ></iframe>
     </div>
     <div class="make">
         <svg

diff --git a/projects/demo/used-icons.ts b/projects/demo/used-icons.ts
@@ -8,9 +8,6 @@ export const TUI_USED_ICONS = [
     `tuiIconCheck`,
     `tuiIconAlertCircleLarge`,
     `tuiIconButton`,
-    `tuiIconVolumeXLarge`,
-    `tuiIconMicOffLarge`,
-    `tuiIconPhoneForwardedLarge`,
     `tuiIconClose`,
     `tuiIconSearchLarge`,
     `tuiIconCalendarLarge`,
@@ -80,6 +77,7 @@ export const TUI_USED_ICONS = [
     `tuiIconStar`,
     `tuiIconPlusCircleLarge`,
     `tuiIconMastercard`,
+    `tuiIconPhoneForwardedLarge`,
     `tuiIconMusicLarge`,
     `tuiIconMinus`,
     `tuiIconPhoneLarge`,