From 16a6a05d89eca3630f404cce1a87a6416637324c Mon Sep 17 00:00:00 2001 From: Sergey Elpashev Date: Thu, 4 Jul 2024 16:58:32 +0300 Subject: [PATCH] feat: tailwind and header --- apps/NwaifuAnime/src/app/app.component.html | 16 +- apps/NwaifuAnime/src/app/app.component.ts | 8 +- apps/NwaifuAnime/src/app/app.routes.ts | 3 +- apps/NwaifuAnime/src/app/app.service.ts | 26 +- .../components/header/header.component.html | 17 + .../components/header/header.component.less | 0 .../app/components/header/header.component.ts | 9 + .../app/components/home/home.component.html | 1 + .../app/components/home/home.component.less | 0 .../src/app/components/home/home.component.ts | 11 + .../src/app/nx-welcome.component.ts | 965 ------------------ apps/NwaifuAnime/src/index.html | 17 +- apps/NwaifuAnime/src/styles.less | 4 +- apps/NwaifuAnime/tailwind.config.js | 14 + apps/NwaifuAnime/tsconfig.json | 5 +- apps/NwaifuAnime/tsconfig.spec.json | 11 - tsconfig.base.json | 4 +- 17 files changed, 100 insertions(+), 1011 deletions(-) create mode 100644 apps/NwaifuAnime/src/app/components/header/header.component.html create mode 100644 apps/NwaifuAnime/src/app/components/header/header.component.less create mode 100644 apps/NwaifuAnime/src/app/components/header/header.component.ts create mode 100644 apps/NwaifuAnime/src/app/components/home/home.component.html create mode 100644 apps/NwaifuAnime/src/app/components/home/home.component.less create mode 100644 apps/NwaifuAnime/src/app/components/home/home.component.ts delete mode 100644 apps/NwaifuAnime/src/app/nx-welcome.component.ts create mode 100644 apps/NwaifuAnime/tailwind.config.js delete mode 100644 apps/NwaifuAnime/tsconfig.spec.json diff --git a/apps/NwaifuAnime/src/app/app.component.html b/apps/NwaifuAnime/src/app/app.component.html index c65e554..fc8bdc9 100644 --- a/apps/NwaifuAnime/src/app/app.component.html +++ b/apps/NwaifuAnime/src/app/app.component.html @@ -1,7 +1,11 @@ -@if (hasUpdate) { -

Update available

- -} @else { -

Update not available

+@if (serviceWorkerEnabled) { + @if (hasUpdate) { +

Update available

+ + } @else { +

Update not available

+ } } - + +
+ diff --git a/apps/NwaifuAnime/src/app/app.component.ts b/apps/NwaifuAnime/src/app/app.component.ts index 59e55c5..1454a07 100644 --- a/apps/NwaifuAnime/src/app/app.component.ts +++ b/apps/NwaifuAnime/src/app/app.component.ts @@ -1,11 +1,11 @@ import { Component } from "@angular/core"; import { RouterModule } from "@angular/router"; import { AppService } from "./app.service"; -import { NxWelcomeComponent } from "./nx-welcome.component"; +import { HeaderComponent } from "./components/header/header.component"; @Component({ standalone: true, - imports: [NxWelcomeComponent, RouterModule], + imports: [RouterModule, HeaderComponent], selector: "app-root", templateUrl: "./app.component.html", styleUrl: "./app.component.less", @@ -22,4 +22,8 @@ export class AppComponent { update() { this.sw.update(); } + + get serviceWorkerEnabled() { + return this.sw.serviceWorkerEnabled; + } } diff --git a/apps/NwaifuAnime/src/app/app.routes.ts b/apps/NwaifuAnime/src/app/app.routes.ts index 0b3d5da..736341b 100644 --- a/apps/NwaifuAnime/src/app/app.routes.ts +++ b/apps/NwaifuAnime/src/app/app.routes.ts @@ -1,3 +1,4 @@ import { Route } from "@angular/router"; +import { HomeComponent } from "./components/home/home.component"; -export const appRoutes: Route[] = []; +export const appRoutes: Route[] = [{ path: "", component: HomeComponent }]; diff --git a/apps/NwaifuAnime/src/app/app.service.ts b/apps/NwaifuAnime/src/app/app.service.ts index d3e1e97..c855ee1 100644 --- a/apps/NwaifuAnime/src/app/app.service.ts +++ b/apps/NwaifuAnime/src/app/app.service.ts @@ -5,23 +5,29 @@ import { SwUpdate } from "@angular/service-worker"; export class AppService { private hasUpdate = false; constructor(private sw: SwUpdate) { - console.log("service init"); - this.sw.checkForUpdate(); + if (this.sw.isEnabled) { + console.log("service init"); + this.sw.checkForUpdate(); - this.sw.versionUpdates.subscribe((ev) => { - if (ev.type == "VERSION_DETECTED") { - console.log("update detected"); - this.hasUpdate = true; - } else { - console.log("no update"); - } - }); + this.sw.versionUpdates.subscribe((ev) => { + if (ev.type == "VERSION_DETECTED") { + console.log("update detected"); + this.hasUpdate = true; + } else { + console.log("no update"); + } + }); + } } get isUpdateAvailable() { return this.hasUpdate; } + get serviceWorkerEnabled() { + return this.sw.isEnabled; + } + update() { this.sw.activateUpdate().then((res) => { if (res) { diff --git a/apps/NwaifuAnime/src/app/components/header/header.component.html b/apps/NwaifuAnime/src/app/components/header/header.component.html new file mode 100644 index 0000000..5af9d50 --- /dev/null +++ b/apps/NwaifuAnime/src/app/components/header/header.component.html @@ -0,0 +1,17 @@ +
+

NwaifuAnime

+ +
diff --git a/apps/NwaifuAnime/src/app/components/header/header.component.less b/apps/NwaifuAnime/src/app/components/header/header.component.less new file mode 100644 index 0000000..e69de29 diff --git a/apps/NwaifuAnime/src/app/components/header/header.component.ts b/apps/NwaifuAnime/src/app/components/header/header.component.ts new file mode 100644 index 0000000..28a9125 --- /dev/null +++ b/apps/NwaifuAnime/src/app/components/header/header.component.ts @@ -0,0 +1,9 @@ +import { Component } from "@angular/core"; + +@Component({ + selector: "app-header", + templateUrl: "./header.component.html", + styleUrls: ["./header.component.less"], + standalone: true, +}) +export class HeaderComponent {} diff --git a/apps/NwaifuAnime/src/app/components/home/home.component.html b/apps/NwaifuAnime/src/app/components/home/home.component.html new file mode 100644 index 0000000..d0c9d2f --- /dev/null +++ b/apps/NwaifuAnime/src/app/components/home/home.component.html @@ -0,0 +1 @@ +

It's home component

diff --git a/apps/NwaifuAnime/src/app/components/home/home.component.less b/apps/NwaifuAnime/src/app/components/home/home.component.less new file mode 100644 index 0000000..e69de29 diff --git a/apps/NwaifuAnime/src/app/components/home/home.component.ts b/apps/NwaifuAnime/src/app/components/home/home.component.ts new file mode 100644 index 0000000..15aa64b --- /dev/null +++ b/apps/NwaifuAnime/src/app/components/home/home.component.ts @@ -0,0 +1,11 @@ +import { CommonModule } from "@angular/common"; +import { Component } from "@angular/core"; + +@Component({ + standalone: true, + selector: "app-home", + templateUrl: "./home.component.html", + styleUrls: ["./home.component.less"], + imports: [CommonModule], +}) +export class HomeComponent {} diff --git a/apps/NwaifuAnime/src/app/nx-welcome.component.ts b/apps/NwaifuAnime/src/app/nx-welcome.component.ts deleted file mode 100644 index a396ec6..0000000 --- a/apps/NwaifuAnime/src/app/nx-welcome.component.ts +++ /dev/null @@ -1,965 +0,0 @@ -import { CommonModule } from "@angular/common"; -import { Component, ViewEncapsulation } from "@angular/core"; - -@Component({ - selector: "app-nx-welcome", - standalone: true, - imports: [CommonModule], - template: ` - - -
-
- -
-

- Hello there, - Welcome NwaifuAnime 👋 -

-
- -
-
-

- - - - You're up and running -

- What's next? -
-
- - - -
-
- -
- - -
- -
-

Next steps

-

Here are some things you can do with Nx:

-
- - - - - Add UI library - - 
# Generate UI lib
-nx g @nx/angular:lib ui
-# Add a component
-nx g @nx/angular:component ui/src/lib/button
-
-
- - - - - View project details - - 
nx show project NwaifuAnime --web
-
-
- - - - - View interactive project graph - - 
nx graph
-
-
- - - - - Run affected commands - - 
# 's been affected by changes
-nx affected:graph
-# run tests for current changes
-nx affected:test
-# run e2e tests for current changes
-nx affected:e2e
-
-
-

- Carefully crafted with - - - -

-
-
- `, - styles: [], - encapsulation: ViewEncapsulation.None, -}) -export class NxWelcomeComponent {} diff --git a/apps/NwaifuAnime/src/index.html b/apps/NwaifuAnime/src/index.html index 6b7f2f5..d0044c5 100644 --- a/apps/NwaifuAnime/src/index.html +++ b/apps/NwaifuAnime/src/index.html @@ -1,16 +1,17 @@ - + NwaifuAnime - - - - - - + + + + + + + - + diff --git a/apps/NwaifuAnime/src/styles.less b/apps/NwaifuAnime/src/styles.less index 90d4ee0..b5c61c9 100644 --- a/apps/NwaifuAnime/src/styles.less +++ b/apps/NwaifuAnime/src/styles.less @@ -1 +1,3 @@ -/* You can add global styles to this file, and also import other style files */ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/apps/NwaifuAnime/tailwind.config.js b/apps/NwaifuAnime/tailwind.config.js new file mode 100644 index 0000000..65f2fec --- /dev/null +++ b/apps/NwaifuAnime/tailwind.config.js @@ -0,0 +1,14 @@ +const { createGlobPatternsForDependencies } = require("@nx/angular/tailwind"); +const { join } = require("path"); + +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [ + join(__dirname, "src/**/!(*.stories|*.spec).{ts,html}"), + ...createGlobPatternsForDependencies(__dirname), + ], + theme: { + extend: {}, + }, + plugins: [], +}; diff --git a/apps/NwaifuAnime/tsconfig.json b/apps/NwaifuAnime/tsconfig.json index a28fec9..cd7f311 100644 --- a/apps/NwaifuAnime/tsconfig.json +++ b/apps/NwaifuAnime/tsconfig.json @@ -18,9 +18,6 @@ }, { "path": "./tsconfig.app.json" - }, - { - "path": "./tsconfig.spec.json" } ], "extends": "../../tsconfig.base.json", @@ -30,4 +27,4 @@ "strictInputAccessModifiers": true, "strictTemplates": true } -} +} \ No newline at end of file diff --git a/apps/NwaifuAnime/tsconfig.spec.json b/apps/NwaifuAnime/tsconfig.spec.json deleted file mode 100644 index 7870b7c..0000000 --- a/apps/NwaifuAnime/tsconfig.spec.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../dist/out-tsc", - "module": "commonjs", - "target": "es2016", - "types": ["jest", "node"] - }, - "files": ["src/test-setup.ts"], - "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"] -} diff --git a/tsconfig.base.json b/tsconfig.base.json index 6b2eacc..d9fb16d 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -13,9 +13,7 @@ "skipLibCheck": true, "skipDefaultLibCheck": true, "paths": { - "@nwaifu-ui": [ - "nwaifu-ui/src/index.ts" - ] + "@nwaifu-ui": ["nwaifu-ui/src/index.ts"] }, "baseUrl": ".", "rootDir": "."