feat: got app

apps/got/src/app/app.component.html

@@ -1 +1,19 @@
-<app-nx-welcome></app-nx-welcome> <router-outlet></router-outlet>
+<header class="flex">
+  <h1>Welcome to {{ title }}!</h1>
+</header>
+<main>
+  <ul class="resources">
+    <li class="col-span-2">
+      <a class="resource flex" [routerLink]="['books']"> Books </a>
+    </li>
+    <li class="col-span-2">
+      <a class="resource flex" [routerLink]="['houses']"> Houses </a>
+    </li>
+  </ul>
+</main>
+
+<div style="padding: 8px; border: red dashed 2px">
+  <xng-breadcrumb></xng-breadcrumb>
+</div>
+
+<router-outlet></router-outlet>

apps/got/src/app/app.component.ts

@@ -1,14 +1,146 @@
 import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { NxWelcomeComponent } from './nx-welcome.component';
+import { BreadcrumbComponent, BreadcrumbItemDirective } from 'xng-breadcrumb';
 
 @Component({
   standalone: true,
-  imports: [NxWelcomeComponent, RouterModule],
+  imports: [RouterModule, BreadcrumbComponent, BreadcrumbItemDirective],
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styles: ``,
+  styles: `
+
+:host {
+  display: block;
+  font-family: sans-serif;
+  min-width: 300px;
+  max-width: 600px;
+  margin: 50px auto;
+}
+
+.gutter-left {
+  margin-left: 9px;
+}
+
+.col-span-2 {
+  grid-column: span 2;
+}
+
+.flex {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+header {
+  background-color: #143055;
+  color: white;
+  padding: 5px;
+  border-radius: 3px;
+}
+
+main {
+  padding: 0 36px;
+}
+
+p {
+  text-align: center;
+}
+
+h1 {
+  text-align: center;
+  margin-left: 18px;
+  font-size: 24px;
+}
+
+h2 {
+  text-align: center;
+  font-size: 20px;
+  margin: 40px 0 10px 0;
+}
+
+.resources {
+  text-align: center;
+  list-style: none;
+  padding: 0;
+  display: grid;
+  grid-gap: 9px;
+  grid-template-columns: 1fr 1fr;
+}
+
+.resource {
+  color: #0094ba;
+  height: 36px;
+  background-color: rgba(0, 0, 0, 0);
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 4px;
+  padding: 3px 9px;
+  text-decoration: none;
+}
+
+.resource:hover {
+  background-color: rgba(68, 138, 255, 0.04);
+}
+
+pre {
+  padding: 9px;
+  border-radius: 4px;
+  background-color: black;
+  color: #eee;
+}
+
+details {
+  border-radius: 4px;
+  color: #333;
+  background-color: rgba(0, 0, 0, 0);
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  padding: 3px 9px;
+  margin-bottom: 9px;
+}
+
+summary {
+  cursor: pointer;
+  outline: none;
+  height: 36px;
+  line-height: 36px;
+}
+
+.github-star-container {
+  margin-top: 12px;
+  line-height: 20px;
+}
+
+.github-star-container a {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: #333;
+}
+
+.github-star-badge {
+  color: #24292e;
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  padding: 3px 10px;
+  border: 1px solid rgba(27, 31, 35, 0.2);
+  border-radius: 3px;
+  background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
+  margin-left: 4px;
+  font-weight: 600;
+}
+
+.github-star-badge:hover {
+  background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
+  border-color: rgba(27, 31, 35, 0.35);
+  background-position: -0.5em;
+}
+.github-star-badge .material-icons {
+  height: 16px;
+  width: 16px;
+  margin-right: 4px;
+}
+`,
 })
 export class AppComponent {
-  title = 'game-of-thrones';
+  title = 'Game Of Thrones';
 }

apps/got/src/app/app.config.ts

@@ -1,7 +1,9 @@
 import { ApplicationConfig } from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { appRoutes } from './app.routes';
+import { DataService } from './data.service';
+import { provideHttpClient } from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(appRoutes)],
+  providers: [provideHttpClient(), DataService, provideRouter(appRoutes)],
 };

apps/got/src/app/app.routes.ts

@@ -1,3 +1,26 @@
 import { Route } from '@angular/router';
+import { BookComponent } from './book/book.component';
+import { BooksComponent } from './books/books.component';
+import { CharacterComponent } from './character/character.component';
+import { HousesComponent } from './houses/houses.component';
 
-export const appRoutes: Route[] = [];
+export const appRoutes: Route[] = [
+  {
+    path: 'books',
+    component: BooksComponent,
+  },
+  {
+    path: 'books/:bookId',
+    component: BookComponent,
+    children: [
+      {
+        path: 'characters/:id',
+        component: CharacterComponent,
+      },
+    ],
+  },
+  {
+    path: 'houses',
+    component: HousesComponent,
+  },
+];

apps/got/src/app/book/book.component.html

@@ -0,0 +1,8 @@
+<div *ngIf="book$ | async as book; else loading">
+  <ul>
+    <li *ngFor="let character of book.characters" class="list-item">
+      <a [routerLink]="['./characters', character.split('/').pop()]">{{ character }}</a>
+    </li>
+  </ul>
+</div>
+<ng-template #loading>loading ...</ng-template>

apps/got/src/app/book/book.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+import { DataService } from '../data.service';
+import { Observable } from 'rxjs';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { NgIf, NgFor, AsyncPipe } from '@angular/common';
+
+@Component({
+  selector: 'app-book',
+  templateUrl: './book.component.html',
+  standalone: true,
+  imports: [NgIf, NgFor, RouterLink, AsyncPipe],
+})
+export class BookComponent implements OnInit {
+  book$: Observable<{ characters: string[] }>;
+  constructor(private dataService: DataService, private route: ActivatedRoute) {}
+
+  ngOnInit(): void {
+    this.book$ = this.dataService.getBook(this.route.snapshot.paramMap.get('bookId'));
+  }
+}

apps/got/src/app/books/books.component.html

@@ -0,0 +1,10 @@
+<router-outlet></router-outlet>
+
+<div *ngIf="books$ | async as books; else loading">
+  <ul>
+    <li *ngFor="let book of books" class="list-item">
+      <a [routerLink]="['/books', book.url[book.url.length - 1]]" style="margin: 12px">{{ book.name }}</a>
+    </li>
+  </ul>
+</div>
+<ng-template #loading>loading ...</ng-template>

apps/got/src/app/books/books.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+import { DataService } from '../data.service';
+import { Observable } from 'rxjs';
+import { NgIf, NgFor, AsyncPipe } from '@angular/common';
+import { RouterOutlet, RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'app-books',
+  templateUrl: './books.component.html',
+  standalone: true,
+  imports: [RouterOutlet, NgIf, NgFor, RouterLink, AsyncPipe],
+})
+export class BooksComponent implements OnInit {
+  books$: Observable<{ url: string; numberOfPages: string; name: string }[]>;
+  constructor(private dataService: DataService) {}
+
+  ngOnInit(): void {
+    this.books$ = this.dataService.getBooks();
+  }
+}

apps/got/src/app/character/character.component.html

@@ -0,0 +1 @@
+<p>character works!</p>

apps/got/src/app/character/character.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-character',
+    templateUrl: './character.component.html',
+    standalone: true,
+})
+export class CharacterComponent {}

apps/got/src/app/data.service.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DataService {
+  private API = `https://www.anapioficeandfire.com/api`;
+
+  constructor(private http: HttpClient) {}
+
+  getBooks(): Observable<{ url: string; numberOfPages: string; name: string }[]> {
+    return this.http.get<{ url: string; numberOfPages: string; name: string }[]>(`${this.API}/books`);
+  }
+
+  getBook(id: string): Observable<{ characters: string[] }> {
+    return this.http.get<{ characters: string[] }>(`${this.API}/books/${id}`);
+  }
+
+  getCharacters(): Observable<unknown[]> {
+    return this.http.get<unknown[]>(`${this.API}/characters`);
+  }
+
+  getHouses(): Observable<{ name: string }[]> {
+    return this.http.get<{ name: string }[]>(`${this.API}/houses`);
+  }
+}

apps/got/src/app/houses/houses.component.html

@@ -0,0 +1,8 @@
+<div *ngIf="houses$ | async as houses; else loading">
+  <ul>
+    <li *ngFor="let house of houses" class="list-item">
+      {{ house.name }}
+    </li>
+  </ul>
+</div>
+<ng-template #loading>loading ...</ng-template>

apps/got/src/app/houses/houses.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { DataService } from '../data.service';
+import { NgIf, NgFor, AsyncPipe } from '@angular/common';
+
+@Component({
+  selector: 'app-houses',
+  templateUrl: './houses.component.html',
+  standalone: true,
+  imports: [NgIf, NgFor, AsyncPipe],
+})
+export class HousesComponent implements OnInit {
+  houses$: Observable<{ name: string }[]>;
+  constructor(private dataService: DataService) {}
+
+  ngOnInit(): void {
+    this.houses$ = this.dataService.getHouses();
+  }
+}