feature/Image-optimization

.github/workflows/deploy.yml

@@ -12,10 +12,10 @@ on:
   # A workflow run id made up one or more jobs that can run sequentially or in parallel
 jobs:
   build-and-deploy:
-    # The type of runner that the job will run on 
+    # The type of runner that the job will run on
     runs-on: ubuntu-latest
-      # Steps represent a sequence of tasks that will be executed as part of the job 
-    steps: 
+      # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
         # Checks-out your repository under $GITHUB_WORKSPACE, so the job can access it
       - name: Checkout
         uses: actions/checkout@v4.1.0
@@ -24,12 +24,15 @@ jobs:
         uses: actions/setup-node@v3.8.1
         with:
           node-version: "18"
+        # Create environment file
+      - name: Create environment file
+        run: touch src/environments/environment.ts
         # Install dependencies
       - name: Install Dependencies
         run: npm i
-        # Build app por production
+        # Build app por production and create environment file
       - name: Build app bundle
-        run: npm run build:prod
+        run: npm run build
         #Replace the secret variables
       - name: Replace secret
         uses: cschleiden/replace-tokens@v1.2
@@ -49,7 +52,7 @@ jobs:
           build_dir: dist/clothes-catalog
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        
-            
-    
-  
+
+
+
+

src/app/Domain/state/cloth/cloth.effect.ts

@@ -17,7 +17,6 @@ export class ClothEffect {
             .getSpreadsheet()
             .pipe(
               map((spreadsheetData: Spreadsheet) => {
-                console.log('xxxx', spreadsheetData);
                 return ({
                   type: ClothActions.GET_CLOTHES,
                   spreadsheet: spreadsheetData,

src/app/UI/main/main.component.html

@@ -1,3 +1,7 @@
-<div *ngFor="let cloth of clothes">
-  <app-card [data] ="cloth"> </app-card>
+<div class="container">
+  <div
+    class="container--card"
+    *ngFor="let cloth of clothes">
+    <app-card [data] ="cloth"> </app-card>
+  </div>
 </div>

src/app/UI/main/main.component.scss

@@ -0,0 +1,19 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  align-content: center;
+}
+
+@media only screen and (min-width: 600px) {
+  .container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+
+    &--card {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}

src/app/UI/widgets/card/card.component.html

@@ -1,7 +1,13 @@
 <div class="container">
   <article class="card">
     <div class="background">
-      <img class="background--img" [src]="data.photo" [alt]="data.description">
+      <img
+        [alt]="data.description"
+        [ngSrc]="data.photo ?? ''"
+        class="background--img"
+        height="660"
+        loading="lazy"
+        width="660">
     </div>
     <div class="content">
       <h2 class="content--h2">{{ data.cloth}}</h2>

src/app/UI/widgets/card/card.component.scss

@@ -13,10 +13,15 @@ $primary-violet: #7370F4;
   max-width: clamp(320px, 45vw, 740px);
   min-width: 320px;
   min-height: 280px;
+  margin-top: 10px;
 
   &:hover {
     box-shadow: rgba(0, 0, 0, 0.3)
-    0px 5px 15px;
+    0 5px 15px;
+  }
+
+  &:last-child {
+    margin-bottom: 10px;
   }
 }
 
@@ -37,9 +42,9 @@ $primary-violet: #7370F4;
   padding: 16px;
 
   &--h2 {
-    font-size: clamp (1.3rem, 2.5vw, 1.8rem);
+    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
     font-weight: 700;
-    margin-bottom: clamp (0.35rem, 2vw, 0.55rem);
+    margin-bottom: clamp(0.35rem, 2vw, 0.55rem);
   }
 
   &--p {
@@ -54,7 +59,7 @@ $primary-violet: #7370F4;
   gap: 12px;
   flex-wrap: wrap;
   list-style-type: none;
-  padding: 12px 0px 16px 0px;
+  padding: 12px 0 16px 0;
 }
 
 .chip {

src/app/app.module.ts

@@ -12,6 +12,7 @@ import { AppRoutingModule } from './app-routing.module';
 import { CardComponent } from './UI/widgets/card/card.component';
 import { ClothEffect } from './Domain/state/cloth/cloth.effect';
 import { MainComponent } from './UI/main/main.component';
+import { NgOptimizedImage } from '@angular/common';
 
 @NgModule({
   declarations: [
@@ -20,12 +21,13 @@ import { MainComponent } from './UI/main/main.component';
     MainComponent
   ],
   imports: [
-    BrowserModule,
     AppRoutingModule,
+    BrowserModule,
+    EffectsModule.forRoot([ ClothEffect ]),
     HttpClientModule,
+    NgOptimizedImage,
+    StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: !isDevMode() }),
     StoreModule.forRoot(appReducer, {}),
-    EffectsModule.forRoot([ ClothEffect ]),
-    StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: !isDevMode() })
   ],
   providers: [],
   bootstrap: [AppComponent]

src/index.html

@@ -6,6 +6,7 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="preconnect" href="https://onedrive.live.com">
 </head>
 <body>
   <app-root></app-root>