docs: get docs home page in

Author: nartc

apps/demo/project.json

@@ -7,15 +7,24 @@
     "targets": {
         "build": {
             "executor": "@angular-devkit/build-angular:browser",
-            "outputs": ["{options.outputPath}"],
+            "outputs": [
+                "{options.outputPath}"
+            ],
             "options": {
                 "outputPath": "dist/apps/documentation/demo",
                 "index": "apps/demo/src/index.html",
                 "main": "apps/demo/src/main.ts",
-                "polyfills": ["zone.js"],
+                "polyfills": [
+                    "zone.js"
+                ],
                 "tsConfig": "apps/demo/tsconfig.app.json",
-                "assets": ["apps/demo/src/favicon.ico", "apps/demo/src/assets"],
-                "styles": ["apps/demo/src/styles.css"],
+                "assets": [
+                    "apps/demo/src/favicon.png",
+                    "apps/demo/src/assets"
+                ],
+                "styles": [
+                    "apps/demo/src/styles.css"
+                ],
                 "scripts": []
             },
             "configurations": {
@@ -66,9 +75,14 @@
         },
         "lint": {
             "executor": "@nrwl/linter:eslint",
-            "outputs": ["{options.outputFile}"],
+            "outputs": [
+                "{options.outputFile}"
+            ],
             "options": {
-                "lintFilePatterns": ["apps/demo/**/*.ts", "apps/demo/**/*.html"]
+                "lintFilePatterns": [
+                    "apps/demo/**/*.ts",
+                    "apps/demo/**/*.html"
+                ]
             }
         }
     },

apps/demo/src/app/app.routes.ts

@@ -1,7 +1,24 @@
 import { Routes } from '@angular/router';
 
 export const routes: Routes = [
-    { path: '', redirectTo: 'test', pathMatch: 'full' },
-    { path: 'test', loadComponent: () => import('./test/test.component') },
-    { path: 'view-cube', loadComponent: () => import('./view-cube/view-cube.component') },
+    { path: '', redirectTo: 'home', pathMatch: 'full' },
+    { path: 'home', loadComponent: () => import('./home/home.component') },
+    {
+        path: 'cubes',
+        loadComponent: () => import('./cubes/cubes.component'),
+        data: {
+            description: 'Simple cubes',
+            link: '/cubes',
+            asset: 'assets/demo/cubes',
+        },
+    },
+    {
+        path: 'view-cube',
+        loadComponent: () => import('./view-cube/view-cube.component'),
+        data: {
+            description: 'Heads-up display using NgtPortal',
+            link: '/view-cube',
+            asset: 'assets/demo/view-cube',
+        },
+    },
 ];

apps/demo/src/app/cubes/cubes.component.ts

@@ -0,0 +1,73 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, Input } from '@angular/core';
+import { extend, NgtArgs, NgtBeforeRenderEvent, NgtCanvas, NgtStore } from 'angular-three';
+import * as THREE from 'three';
+import { OrbitControls } from 'three-stdlib';
+
+extend({ OrbitControls });
+
+@Component({
+    selector: 'demo-cube',
+    standalone: true,
+    template: `
+        <ngt-mesh
+            (click)="active = !active"
+            (pointerover)="hover = true"
+            (pointerout)="hover = false"
+            [scale]="active ? 1.5 : 1"
+            (beforeRender)="onBeforeRender($any($event))"
+            [position]="position"
+        >
+            <ngt-box-geometry />
+            <ngt-mesh-standard-material [color]="hover ? 'goldenrod' : 'darkred'" />
+        </ngt-mesh>
+    `,
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class Cube {
+    @Input() position = [0, 0, 0];
+
+    active = false;
+    hover = false;
+
+    onBeforeRender({ object }: NgtBeforeRenderEvent<THREE.Mesh>) {
+        object.rotation.x += 0.01;
+        object.rotation.y += 0.01;
+    }
+}
+
+@Component({
+    selector: 'demo-cubes-scene',
+    standalone: true,
+    template: `
+        <ngt-color *args="['#BFD1E5']" attach="background" />
+
+        <ngt-ambient-light [intensity]="0.5" />
+        <ngt-spot-light [intensity]="0.5" [position]="10" [angle]="0.15" [penumbra]="1" />
+        <ngt-point-light [intensity]="0.5" [position]="-10" />
+
+        <demo-cube [position]="[1.5, 0, 0]" />
+        <demo-cube [position]="[-1.5, 0, 0]" />
+
+        <ngt-orbit-controls
+            *args="[camera, glDom]"
+            [enableDamping]="true"
+            (beforeRender)="$any($event).object.update()"
+        />
+    `,
+    imports: [NgtArgs, Cube],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class Scene {
+    private readonly store = inject(NgtStore);
+    readonly camera = this.store.get('camera');
+    readonly glDom = this.store.get('gl', 'domElement');
+}
+
+@Component({
+    standalone: true,
+    template: `<ngt-canvas [sceneGraph]="Scene" />`,
+    imports: [NgtCanvas],
+})
+export default class DemoCubes {
+    readonly Scene = Scene;
+}

apps/demo/src/app/home/home.component.ts

@@ -0,0 +1,128 @@
+import { Platform } from '@angular/cdk/platform';
+import { NgFor } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Directive, ElementRef, HostListener, inject, Input } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { routes } from '../app.routes';
+
+interface Demo {
+    description: string;
+    link: string;
+    asset: string;
+}
+
+@Directive({
+    selector: 'video[demoAutoplay]',
+    standalone: true,
+})
+export class Autoplay {
+    private readonly videoElementRef: ElementRef<HTMLVideoElement> = inject(ElementRef, { self: true });
+
+    @HostListener('mouseover')
+    onMouseOver() {
+        this.videoElementRef.nativeElement.play().catch(() => {});
+    }
+
+    @HostListener('mouseout')
+    onMouseOut() {
+        this.videoElementRef.nativeElement.pause();
+        this.videoElementRef.nativeElement.currentTime = 0;
+    }
+}
+
+@Component({
+    selector: 'demo-home-demo-item',
+    standalone: true,
+    template: `
+        <a [routerLink]="[demo.link]">
+            <video
+                demoAutoplay
+                muted
+                playsinline
+                class="w-full h-full max-h-48 object-cover cursor-pointer"
+                [title]="demo.description"
+                [poster]="isIOS ? demo.asset + '.gif' : ''"
+            >
+                <source
+                    *ngFor="let source of ['webm', 'mp4']"
+                    [src]="demo.asset + '.' + source"
+                    [type]="'video/' + source"
+                />
+                <img
+                    class="w-full h-full max-h-48 object-cover cursor-pointer"
+                    [src]="demo.asset + '.gif'"
+                    [alt]="demo.description"
+                    loading="lazy"
+                />
+            </video>
+        </a>
+    `,
+    imports: [Autoplay, NgFor, RouterLink],
+    host: { class: 'space-y-6 xl:space-y-10 relative block w-full h-full' },
+})
+export class DemoItem {
+    @Input() demo!: Demo;
+
+    readonly isIOS = inject(Platform).IOS;
+}
+
+@Component({
+    selector: 'demo-home-demo-list',
+    standalone: true,
+    template: `
+        <ul role="list" class="space-y-4 sm:grid sm:grid-cols-2 sm:gap-6 sm:space-y-0 lg:grid-cols-3 lg:gap-8">
+            <li
+                *ngFor="let demo of demos"
+                class="bg-black rounded-xl overflow-hidden xl:text-left flex justify-center items-center"
+            >
+                <demo-home-demo-item [demo]="demo" />
+            </li>
+        </ul>
+    `,
+    imports: [NgFor, DemoItem],
+})
+export class DemoList {
+    readonly demos = routes.filter((route) => !!route.data).map((route) => route.data) as Demo[];
+}
+
+@Component({
+    selector: 'demo-home-header',
+    standalone: true,
+    template: `
+        <h2 class="text-3xl font-bold text-gray-800 tracking-tight sm:text-4xl">Angular Three Demos</h2>
+        <p class="text-xl text-gray-600">
+            Here are some example of things you can do with
+            <a href="https://github.com/angular-threejs/angular-three/tree/main/apps/demo" class="hover:underline">
+                <strong>AngularThree</strong>
+            </a>
+        </p>
+    `,
+    host: { class: 'space-y-5 sm:space-y-4 md:max-w-xl lg:max-w-3xl xl:max-w-none block mb-4' },
+})
+export class Header {}
+
+@Component({
+    standalone: true,
+    template: `
+        <small class="absolute right-4 font-xs italic">
+            * Interact (click anywhere) on the page to enable example play on hover
+        </small>
+        <div class="header-background bg-white">
+            <div class="mx-auto py-12 px-4 max-w-7xl sm:px-6 lg:px-8 lg:py-24">
+                <demo-home-header />
+                <demo-home-demo-list />
+            </div>
+        </div>
+    `,
+    imports: [Header, DemoList],
+    styles: [
+        `
+            .header-background {
+                background-image: url(../../assets/header-background.svg);
+                background-size: contain;
+                background-repeat: repeat;
+            }
+        `,
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class Home {}