Merge pull request #97 from paulmojicatech/video-2-start

Video 2 start
paulmojicatech · Jun 11, 2023 · de06a4c · de06a4c
2 parents 1adc6ef + 0d7ed42
commit de06a4c
Show file tree

Hide file tree

Showing 42 changed files with 12,656 additions and 859 deletions.
diff --git a/apps/fantalytic-ssr/.eslintrc.json b/apps/fantalytic-ssr/.eslintrc.json
@@ -0,0 +1,36 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nx/nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "FantalyticSsr",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "fantalytic-ssr",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/apps/fantalytic-ssr/index.html b/apps/fantalytic-ssr/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>MyApp</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="/src/favicon.ico" />
+    <link rel="stylesheet" href="/src/styles.css" />
+  </head>
+  <body>
+    <fantalytic-ssr-root></fantalytic-ssr-root>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/apps/fantalytic-ssr/postcss.config.js b/apps/fantalytic-ssr/postcss.config.js
@@ -0,0 +1,10 @@
+const { join } = require('path');
+
+module.exports = {
+  plugins: {
+    tailwindcss: {
+      config: join(__dirname, 'tailwind.config.js'),
+    },
+    autoprefixer: {},
+  },
+};
diff --git a/apps/fantalytic-ssr/project.json b/apps/fantalytic-ssr/project.json
@@ -0,0 +1,70 @@
+{
+  "name": "fantalytic-ssr",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "apps/fantalytic-ssr/src",
+  "targets": {
+    "build": {
+      "executor": "@nx/vite:build",
+      "outputs": [
+        "{options.outputPath}",
+        "dist/apps/fantalytic-ssr/.nitro",
+        "dist/apps/fantalytic-ssr/ssr",
+        "dist/apps/fantalytic-ssr/analog"
+      ],
+      "options": {
+        "main": "apps/fantalytic-ssr/src/main.ts",
+        "configFile": "apps/fantalytic-ssr/vite.config.ts",
+        "outputPath": "dist/apps/fantalytic-ssr/client"
+      },
+      "defaultConfiguration": "production",
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "sourcemap": false,
+          "mode": "production"
+        }
+      }
+    },
+    "serve": {
+      "executor": "@nx/vite:dev-server",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "fantalytic-ssr:build",
+        "port": 4200
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "fantalytic-ssr:build:development",
+          "hmr": true
+        },
+        "production": {
+          "buildTarget": "fantalytic-ssr:build:production"
+        }
+      }
+    },
+    "extract-i18n": {
+      "executor": "@angular-devkit/build-angular:extract-i18n",
+      "options": {
+        "browserTarget": "fantalytic-ssr:build"
+      }
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "apps/fantalytic-ssr/**/*.ts",
+          "apps/fantalytic-ssr/**/*.html"
+        ]
+      }
+    },
+    "test": {
+      "executor": "@nx/vite:test",
+      "outputs": ["apps/fantalytic-ssr/coverage"]
+    }
+  },
+  "tags": []
+}
diff --git a/apps/fantalytic-ssr/src/app.config.server.ts b/apps/fantalytic-ssr/src/app.config.server.ts
@@ -0,0 +1,9 @@
+import { ApplicationConfig, mergeApplicationConfig } from '@angular/core';
+import { provideServerRendering } from '@angular/platform-server';
+import { appConfig } from './app.config';
+
+const serverConfig: ApplicationConfig = {
+  providers: [provideServerRendering()],
+};
+
+export const config = mergeApplicationConfig(appConfig, serverConfig);
diff --git a/apps/fantalytic-ssr/src/app.config.ts b/apps/fantalytic-ssr/src/app.config.ts
@@ -0,0 +1,8 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideClientHydration } from '@angular/platform-browser';
+import { provideFileRouter } from '@analogjs/router';
+import { provideHttpClient } from '@angular/common/http';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideFileRouter(), provideClientHydration(), provideHttpClient()],
+};
diff --git a/apps/fantalytic-ssr/src/app/app.component.spec.ts b/apps/fantalytic-ssr/src/app/app.component.spec.ts
@@ -0,0 +1,17 @@
+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RouterTestingModule, AppComponent],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+});
diff --git a/apps/fantalytic-ssr/src/app/app.component.ts b/apps/fantalytic-ssr/src/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'fantalytic-ssr-root',
+  standalone: true,
+  imports: [RouterOutlet],
+  template: ` <router-outlet></router-outlet> `,
+})
+export class AppComponent {}
diff --git a/apps/fantalytic-ssr/src/app/pages/index.page.ts b/apps/fantalytic-ssr/src/app/pages/index.page.ts
@@ -0,0 +1,45 @@
+import { AsyncPipe, DatePipe, NgFor, NgIf } from '@angular/common';
+import { Component, inject } from '@angular/core';
+import { EspnRssFeedService } from '../topics/services/espn-rss-feed.service';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import {MatCardModule} from '@angular/material/card';
+
+@Component({
+  selector: 'fantalytic-ssr-home',
+  standalone: true,
+  imports: [AsyncPipe, NgFor, DatePipe, NgIf, MatToolbarModule, MatCardModule],
+  host: {
+    class:
+      'flex min-h-screen flex-col text-zinc-900 bg-zinc-50 w-[100vw]',
+  },
+  template: `
+    <mat-toolbar color="primary">
+      <span class="text-white">Fantalytic.io</span>
+    </mat-toolbar>
+    <main class="p-0 w-[100vw] flex flex-wrap">
+      <div *ngFor="let topic of topics$ | async" class="w-[30%] m-2">
+        <mat-card class="h-full">
+          <mat-card-header>
+            <mat-card-title>
+              {{topic.title}}
+            </mat-card-title>
+          </mat-card-header>
+          <mat-card-content>
+            <img mat-card-image src="{{topic.imageUrl}}" alt="ESPN Image" />
+            <div class="mt-2">{{topic.description}}</div>
+          </mat-card-content>
+          <mat-card-actions>
+            <span class="absolute bottom-2 right-2">
+              <a mat-button href="{{topic.link}}" target="_blank">Read More</a>
+            </span>
+            
+          </mat-card-actions>
+        </mat-card>
+      </div>      
+    </main>
+  `,
+})
+export default class HomeComponent {
+  private _espnRssFeedSvc = inject(EspnRssFeedService);
+  topics$ = this._espnRssFeedSvc.getTopics();
+}
diff --git a/apps/fantalytic-ssr/src/app/topics/services/espn-rss-feed.service.spec.ts b/apps/fantalytic-ssr/src/app/topics/services/espn-rss-feed.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { EspnRssFeedService } from './espn-rss-feed.service';
+
+describe('EspnRssFeedService', () => {
+  let service: EspnRssFeedService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(EspnRssFeedService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/apps/fantalytic-ssr/src/app/topics/services/espn-rss-feed.service.ts b/apps/fantalytic-ssr/src/app/topics/services/espn-rss-feed.service.ts
@@ -0,0 +1,28 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable, inject } from '@angular/core';
+import { Topic, parseESPNRSSFeed } from 'libs/fantalytic-shared-v2/src';
+import { Observable, catchError, map, throwError } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EspnRssFeedService {
+
+  private readonly RSS_URL = `https://www.espn.com/espn/rss/news`;
+
+  private _http = inject(HttpClient);
+
+  getTopics(): Observable<Topic[]> {
+    const options = {responseType: 'text' as 'json'};
+    return this._http.get<any>(this.RSS_URL, options).pipe(
+      map(resp => {
+        return parseESPNRSSFeed(resp);
+      }),
+      catchError(err => {
+        console.error('ERROR', err);
+        return throwError(() => err);
+      })
+    )
+  }
+
+}
diff --git a/apps/fantalytic-ssr/src/favicon.ico b/apps/fantalytic-ssr/src/favicon.ico
diff --git a/apps/fantalytic-ssr/src/main.server.ts b/apps/fantalytic-ssr/src/main.server.ts
@@ -0,0 +1,20 @@
+import 'zone.js/node';
+import { enableProdMode } from '@angular/core';
+import { renderApplication } from '@angular/platform-server';
+import { AppComponent } from './app/app.component';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { config } from './app.config.server';
+
+if (import.meta.env.PROD) {
+  enableProdMode();
+}
+
+const bootstrap = () => bootstrapApplication(AppComponent, config);
+
+export default async function render(url: string, document: string) {
+  const html = await renderApplication(bootstrap, {
+    document,
+    url,
+  });
+  return html;
+}
diff --git a/apps/fantalytic-ssr/src/main.ts b/apps/fantalytic-ssr/src/main.ts
@@ -0,0 +1,9 @@
+import 'zone.js';
+import { bootstrapApplication } from '@angular/platform-browser';
+
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app.config';
+
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
+  console.error(err)
+);
diff --git a/apps/fantalytic-ssr/src/public/assets/.gitkeep b/apps/fantalytic-ssr/src/public/assets/.gitkeep