From feb747bb569039f68135a2bd5b821fc4c9093266 Mon Sep 17 00:00:00 2001 From: Mathew Guest Date: Fri, 2 Aug 2024 03:30:50 -0600 Subject: [PATCH] build: starting routing, main layout --- README.md | 6 + docker-compose.yml | 1 + src/app/app-routing.module.ts | 9 +- src/app/app.component.css | 306 +----------------- src/app/app.component.html | 46 ++- src/app/app.component.ts | 9 +- src/app/app.module.ts | 14 +- src/app/home-component/home.component.css | 0 src/app/home-component/home.component.html | 1 + src/app/home-component/home.component.ts | 8 + .../scouting-crypto.component.css | 0 .../scouting-crypto.component.html | 1 + .../scouting-crypto.component.ts | 8 + src/index.html | 25 +- src/styles.css | 22 +- tsconfig.app.json | 9 +- tsconfig.json | 8 +- 17 files changed, 141 insertions(+), 332 deletions(-) create mode 100644 src/app/home-component/home.component.css create mode 100644 src/app/home-component/home.component.html create mode 100644 src/app/home-component/home.component.ts create mode 100644 src/app/scouting-crypto/scouting-crypto.component.css create mode 100644 src/app/scouting-crypto/scouting-crypto.component.html create mode 100644 src/app/scouting-crypto/scouting-crypto.component.ts diff --git a/README.md b/README.md index dc6affe..5b3f573 100644 --- a/README.md +++ b/README.md @@ -56,6 +56,12 @@ https://hub.docker.com/r/wlucha/angular-starter - `npm run prettier` - Format the whole project - `npm run audit` - Audit this application using Sonatype OSS Index +## Creating components + +``` +npx ng generate component HomeComponent --module=app +``` + ## This app was created and started from https://github.com/wlucha/angular-starter Many thanks to all contributors!! and especially Wilfried wlucha. This starter angular scaffold was the best/up-to-date diff --git a/docker-compose.yml b/docker-compose.yml index 1fea268..a94068c 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -6,5 +6,6 @@ services: context: . dockerfile: Dockerfile ports: + # Serve on localhost 8000 -> mapped to port 80 inside the Docker container - "8000:80" restart: always diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 5a48d4e..961c877 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,13 +1,16 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -// import { HomeComponent } from './home/home.component'; +import { HomeComponent } from './home-component/home.component'; // import { AboutComponent } from './about/about.component'; // import { NotFoundComponent } from './not-found/not-found.component'; // + +import { ScoutingCryptoComponent } from 'app/scouting-crypto/scouting-crypto.component'; + const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full' }, - // { path: 'home', component: HomeComponent }, - // { path: 'about', component: AboutComponent }, + { path: 'home', component: HomeComponent }, + { path: 'scout', component: ScoutingCryptoComponent }, // { path: '**', component: NotFoundComponent } ]; diff --git a/src/app/app.component.css b/src/app/app.component.css index a7da176..7aaeca8 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -1,303 +1,7 @@ -:host { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", - "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 14px; - color: #333; - box-sizing: border-box; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - margin: 8px 0; -} - -p { +body { + background: red; + background: #171b26 !important; margin: 0; -} - -.spacer { - flex: 1; -} - -.toolbar { - position: absolute; - top: 0; - left: 0; - right: 0; - height: 60px; - display: flex; - align-items: center; - background-color: #1976d2; - color: white; - font-weight: 600; -} - -.toolbar img { - margin: 0 16px; -} - -.toolbar #twitter-logo { - height: 40px; - margin: 0 16px; -} - -.toolbar #twitter-logo:hover { - opacity: 0.8; -} - -.content { - display: flex; - margin: 82px auto 32px; - padding: 0 16px; - max-width: 960px; - flex-direction: column; - align-items: center; -} - -svg.material-icons { - height: 24px; - width: auto; -} - -svg.material-icons:not(:last-child) { - margin-right: 8px; -} - -.card svg.material-icons path { - fill: #888; -} - -.card-container { - display: flex; - flex-wrap: wrap; - justify-content: center; - margin-top: 16px; -} - -.card { - border-radius: 4px; - border: 1px solid #eee; - background-color: #fafafa; - height: 40px; - width: 200px; - margin: 0 8px 16px; - padding: 16px; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - transition: all 0.2s ease-in-out; - line-height: 24px; -} - -.card-container .card:not(:last-child) { - margin-right: 0; -} - -.card.card-small { - height: 16px; - width: 168px; -} - -.card-container .card:not(.highlight-card) { - cursor: pointer; -} - -.card-container .card:not(.highlight-card):hover { - transform: translateY(-3px); - box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35); -} - -.card-container .card:not(.highlight-card):hover .material-icons path { - fill: rgb(105, 103, 103); -} - -.card.highlight-card { - background-color: #1976d2; - color: white; - font-weight: 600; - border: none; - width: auto; - min-width: 30%; - position: relative; -} - -.card.card.highlight-card span { - margin-left: 60px; -} - -svg#rocket { - width: 80px; - position: absolute; - left: -10px; - top: -24px; -} - -svg#rocket-smoke { - height: calc(100vh - 95px); - position: absolute; - top: 10px; - right: 180px; - z-index: -10; -} - -a, -a:visited, -a:hover { - color: #1976d2; - text-decoration: none; -} - -a:hover { - color: #125699; -} - -.terminal { - position: relative; - width: 80%; - max-width: 600px; - border-radius: 6px; - padding-top: 45px; - margin-top: 8px; - overflow: hidden; - background-color: rgb(15, 15, 16); -} - -.terminal::before { - content: "\2022 \2022 \2022"; - position: absolute; - top: 0; - left: 0; - height: 4px; - background: rgb(58, 58, 58); - color: #c2c3c4; - width: 100%; - font-size: 2rem; - line-height: 0; - padding: 14px 0; - text-indent: 4px; -} - -.terminal pre { - font-family: - SFMono-Regular, - Consolas, - Liberation Mono, - Menlo, - monospace; - color: white; - padding: 0 1rem 1rem; - margin: 0; -} - -.circle-link { - height: 40px; - width: 40px; - border-radius: 40px; - margin: 8px; - background-color: white; - border: 1px solid #eeeeee; - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - box-shadow: - 0 1px 3px rgba(0, 0, 0, 0.12), - 0 1px 2px rgba(0, 0, 0, 0.24); - transition: 1s ease-out; -} - -.circle-link:hover { - transform: translateY(-0.25rem); - box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2); -} - -footer { - margin-top: 8px; - display: flex; - align-items: center; - line-height: 20px; -} - -footer a { - display: flex; - align-items: center; -} - -.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; - font-family: - -apple-system, - BlinkMacSystemFont, - Segoe UI, - Helvetica, - Arial, - sans-serif, - Apple Color Emoji, - Segoe UI Emoji, - Segoe UI Symbol; -} - -.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; -} - -svg#clouds { - position: fixed; - bottom: -160px; - left: -230px; - z-index: -10; - width: 1920px; -} - -/* Responsive Styles */ -@media screen and (max-width: 767px) { - .card-container > *:not(.circle-link), - .terminal { - width: 100%; - } - - .card:not(.highlight-card) { - height: 16px; - margin: 8px 0; - } - - .card.highlight-card span { - margin-left: 72px; - } - - svg#rocket-smoke { - right: 120px; - transform: rotate(-5deg); - } -} - -@media screen and (max-width: 575px) { - svg#rocket-smoke { - display: none; - visibility: hidden; - } + padding: 0; + font-family: sans-serif; } diff --git a/src/app/app.component.html b/src/app/app.component.html index 249b013..02bb917 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,10 +1,48 @@ - + $kriLL + + + + + + + +
+ +
+ +
+
+ + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 7d41234..038e15f 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,10 +1,15 @@ import { Component } from '@angular/core'; +import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router'; @Component({ selector: 'app-root', + //standalone: true, + // imports: [ + // RouterLink, RouterLinkActive, RouterOutlet + // ], templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + styleUrls: ['./app.component.css'], }) export class AppComponent { - title = 'angular-starter'; + title = 'Skrill - get rich or die trying!!'; } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4560633..196cbf4 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -6,10 +6,20 @@ import { AppRoutingModule } from './app-routing.module'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { HttpClientModule } from '@angular/common/http'; import { TranslocoRootModule } from './transloco-root.module'; +import { ScoutingCryptoComponent } from './scouting-crypto/scouting-crypto.component'; +import { HomeComponent } from './home-component/home.component'; +import { RouterModule } from '@angular/router'; @NgModule({ - declarations: [AppComponent], - imports: [AppRoutingModule, BrowserModule, BrowserAnimationsModule, HttpClientModule, TranslocoRootModule], + imports: [ + AppRoutingModule, + BrowserModule, + BrowserAnimationsModule, + HttpClientModule, + TranslocoRootModule, + RouterModule.forRoot([{ path: '', component: ScoutingCryptoComponent }]), + ], + declarations: [ScoutingCryptoComponent, HomeComponent, AppComponent], providers: [], bootstrap: [AppComponent], }) diff --git a/src/app/home-component/home.component.css b/src/app/home-component/home.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/home-component/home.component.html b/src/app/home-component/home.component.html new file mode 100644 index 0000000..d8eec9c --- /dev/null +++ b/src/app/home-component/home.component.html @@ -0,0 +1 @@ +

home-component works!

diff --git a/src/app/home-component/home.component.ts b/src/app/home-component/home.component.ts new file mode 100644 index 0000000..12efe4c --- /dev/null +++ b/src/app/home-component/home.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-home-component', + templateUrl: './home.component.html', + styleUrl: './home.component.css', +}) +export class HomeComponent {} diff --git a/src/app/scouting-crypto/scouting-crypto.component.css b/src/app/scouting-crypto/scouting-crypto.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/scouting-crypto/scouting-crypto.component.html b/src/app/scouting-crypto/scouting-crypto.component.html new file mode 100644 index 0000000..47713c0 --- /dev/null +++ b/src/app/scouting-crypto/scouting-crypto.component.html @@ -0,0 +1 @@ +

scouting-crypto works!

diff --git a/src/app/scouting-crypto/scouting-crypto.component.ts b/src/app/scouting-crypto/scouting-crypto.component.ts new file mode 100644 index 0000000..a98aa64 --- /dev/null +++ b/src/app/scouting-crypto/scouting-crypto.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-scouting-crypto', + templateUrl: './scouting-crypto.component.html', + styleUrl: './scouting-crypto.component.css', +}) +export class ScoutingCryptoComponent {} diff --git a/src/index.html b/src/index.html index a56f36a..652526d 100644 --- a/src/index.html +++ b/src/index.html @@ -1,15 +1,16 @@ - - - AngularStarter - - - - - - - - - + + + $kriLL + + + + + + + + + + diff --git a/src/styles.css b/src/styles.css index 7e7239a..2c36cc5 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,4 +1,22 @@ /* You can add global styles to this file, and also import other style files */ -html, body { height: 100%; } -body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } +html, +body { + height: 100%; +} + +body { + background: #171b26; + margin: 0; + font-family: Roboto, "Helvetica Neue", sans-serif; +} + +main { + color: #ccc; +} + +footer { + border-top: 1px solid #545050; + background: rgba(28, 45, 58, 0.5); + color: #ccc; +} diff --git a/tsconfig.app.json b/tsconfig.app.json index 2722dbe..60af48d 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -2,9 +2,12 @@ "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/app", - "types": [] + "types": [], + "paths": { + "app/*": ["src/app/*"] + } }, "files": ["src/main.ts", "src/polyfills.ts"], - "include": ["src/**/*.d.ts"], - "exclude": ["**/*.stories.*"] + "include": ["src/**/*.d.ts", "src/app/home-component/home.component.ts"], + "exclude": [] } diff --git a/tsconfig.json b/tsconfig.json index d203c83..7bed384 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,15 +8,17 @@ "downlevelIteration": true, "experimentalDecorators": true, "esModuleInterop": true, - "module": "es2020", + "module": "es2022", "moduleResolution": "node", "importHelpers": true, "target": "ES2022", - "lib": ["es2018", "dom"], + "lib": ["ES2022", "dom"], "useDefineForClassFields": false }, "angularCompilerOptions": { "fullTemplateTypeCheck": true, "strictInjectionParameters": true - } + }, + + "include": ["src/**/*.ts"] }