feat: add home page with demo board

package.json

@@ -32,6 +32,7 @@
     "firebase": "^9.9.1",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
+    "uuid": "^8.3.2",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
@@ -44,6 +45,7 @@
     "@angular/cli": "~14.1.0",
     "@angular/compiler-cli": "^14.1.0",
     "@types/jasmine": "~4.0.0",
+    "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "5.29.0",
     "@typescript-eslint/parser": "5.29.0",
     "angular-cli-ghpages": "^1.0.3",

src/app/app.module.ts

@@ -13,6 +13,7 @@ import { AngularFireAuthModule } from '@angular/fire/compat/auth';
 import { ErrorModule } from './error/error.module';
 import { DemoBoardComponent } from './home/demo-board/demo-board.component';
 import { KanbanModule } from './kanban/kanban.module';
+import { UserModule } from './user/user.module';
 
 @NgModule({
   declarations: [AppComponent, HomeComponent, DemoBoardComponent],

src/app/error/error.scss

@@ -2,7 +2,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  margin: 200px;
+  margin: 5vw;
 }
 
 .icon {

src/app/home/demo-board/demo-board.component.html

@@ -1 +1,10 @@
-<p>It works</p>
+<div class="container">
+  <div class="header">
+    <img src="assets/default-user.svg" class="avatar" />
+    <div>
+      <h1 class="title">Kanban Board of Foo Bar</h1>
+      <h2 class="subtitle">[email protected]</h2>
+    </div>
+  </div>
+  <app-board-list [boards]="boards"></app-board-list>
+</div>

src/app/home/demo-board/demo-board.component.scss

@@ -1 +1,24 @@
-/* Empty */
+.container {
+  margin: 30px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+}
+
+.avatar {
+  margin-right: 10px;
+  border-radius: 50%;
+  max-height: 60px;
+}
+
+.title {
+  margin-bottom: 0;
+}
+
+.subtitle {
+  margin-top: 0;
+  font-size: medium;
+  color: gray;
+}

src/app/home/demo-board/demo-board.component.ts

@@ -1,6 +1,7 @@
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { Component, OnInit } from '@angular/core';
 import { Board } from 'src/app/kanban/model/board.model';
+import * as uuid from 'uuid';
 
 @Component({
   selector: 'app-demo-board',
@@ -10,39 +11,49 @@ import { Board } from 'src/app/kanban/model/board.model';
 export class DemoBoardComponent {
   boards: Board[] = [
     {
-      id: '0',
+      id: uuid.v4(),
       title: 'Todo',
       priority: 0,
       tasks: [
         {
-          description: 'Plan my next awesome project',
-          label: 'yellow'
+          description: 'Define architecture 🏛',
+          label: 'blue'
+        },
+        {
+          description: 'Call back investor 💰',
+          label: 'purple'
         },
-        { description: 'Reschedule my meeting', label: 'blue' }
+        {
+          description: 'Set up cloud infrastructure ☁️',
+          label: 'green'
+        }
       ]
     },
     {
-      id: '1',
+      id: uuid.v4(),
       title: 'In progress',
       priority: 1,
       tasks: [
         {
-          description: 'Plan my next awesome project',
+          description: 'Plan my next awesome project 🔥',
           label: 'yellow'
         },
-        { description: 'Reschedule my meeting', label: 'blue' }
+        {
+          description: 'Get more coffee ☕️',
+          label: 'red'
+        }
       ]
     },
     {
-      id: '2',
+      id: uuid.v4(),
       title: 'Done',
       priority: 2,
       tasks: [
         {
-          description: 'Plan my next awesome project',
-          label: 'yellow'
+          description: 'Get some coffee ☕️',
+          label: 'gray'
         },
-        { description: 'Reschedule my meeting', label: 'blue' }
+        { description: 'Reschedule my meeting 🗓', label: 'gray' }
       ]
     }
   ];

src/app/home/home.component.html

@@ -1,3 +1,19 @@
-<header>
-  <h1>This is the Home Page</h1>
-</header>
+<div class="layout header">
+  <img class="logo" src="assets/app-logo.png" />
+  <h1>Welcome to Kanban 看板</h1>
+  <p>
+    The Kanban storyboard app inspired by Trello. <br />
+    Based on the course by
+    <a href="https://fireship.io/courses/angular/">Fireship</a>.
+  </p>
+  <p>Built with Angular and Firebase 🔥.</p>
+  <button routerLink="/login" mat-raised-button color="primary">
+    Sign up for Free
+  </button>
+</div>
+<div class="layout">
+  <h1>Play with the demo!</h1>
+  <div class="demo-board-container">
+    <mat-card><app-demo-board></app-demo-board></mat-card>
+  </div>
+</div>

src/app/home/home.component.scss

@@ -1,3 +1,17 @@
-header {
-  text-align: center;
+.layout {
+  max-width: 80vw;
+  margin: 5vh auto;
+}
+
+.logo {
+  max-height: 200px;
+}
+
+.header {
+  min-height: 20vh;
+}
+
+.demo-board-container {
+  display: flex;
+  justify-content: center;
 }

src/app/kanban/kanban-board/kanban-board.component.scss

@@ -4,12 +4,13 @@
 
 .header {
   display: flex;
+  align-items: center;
 }
 
 .avatar {
   margin-right: 10px;
   border-radius: 50%;
-  height: min-content;
+  max-height: 60px;
 }
 
 .title {

src/app/kanban/kanban.module.ts

@@ -26,6 +26,6 @@ import { KanbanBoardComponent } from './kanban-board/kanban-board.component';
     FormsModule,
     DragDropModule
   ],
-  exports: [BoardComponent]
+  exports: [BoardListComponent, BoardComponent]
 })
 export class KanbanModule {}

src/app/user/login-page/login-page.component.scss

@@ -7,8 +7,7 @@
 }
 
 mat-card {
-  min-width: 150px;
   max-width: 500px;
   width: 100%;
-  margin: 100px auto;
+  margin: 5vw auto;
 }