feat: add gifts page (#513)

* feat: add gifts page

* test: add some for gifts page

src/app/app.routes.ts

@@ -2,6 +2,7 @@ import { Routes } from '@angular/router'
 import { notFoundPageRoutes } from './not-found-page/not-found-page.routes'
 import { resumePageRoutes } from './resume-page/resume-page.routes'
 import { calendarPageRoutes } from './calendar-page/calendar-page.routes'
+import { giftsPageRoutes } from './gifts-page/gifts-page.routes'
 
 export const routes: Routes = [
   // Metadata to add when '/' route is ready
@@ -19,5 +20,6 @@ export const routes: Routes = [
   // },
   ...resumePageRoutes,
   ...calendarPageRoutes,
+  ...giftsPageRoutes,
   ...notFoundPageRoutes,
 ]

src/app/calendar-page/calendar-page.routes.ts

@@ -3,8 +3,8 @@ import { Routes } from '@angular/router'
 export const CALENDAR_PATH = 'calendar'
 const CALENDAR_PATHS = [CALENDAR_PATH, '📅', '🗓️', '📆']
 export const calendarPageRoutes: Routes = [
-  ...CALENDAR_PATHS.map((calendarEmoji) => ({
-    path: calendarEmoji,
+  ...CALENDAR_PATHS.map((path) => ({
+    path,
     loadChildren: () => import('./routes').then((m) => m.routes),
   })),
 ]

src/app/gifts-page/gifts-page.component.html

@@ -0,0 +1,53 @@
+<h1>🎁 Gifts</h1>
+<p>
+  If you're thinking about gifting me something, first of all...
+  <strong>thanks 🙏</strong> <br /><br />Just the fact you're thinking about
+  that is much appreciated and I'm very grateful already ❤️ <br /><br />Let me
+  help you at least making this easier😊
+</p>
+
+<h2>Preferences</h2>
+<p>
+  Checkout my
+  <a href="https://www.giftster.com/preferences/1747782/"
+    >🎁 gift preferences</a
+  >
+  to:
+</p>
+<br />
+<ul>
+  <li>Get some general ideas</li>
+  <li>Know about my clothes sizes</li>
+</ul>
+
+<h2>Wishlist</h2>
+<p>
+  Checkout my
+  <a href="https://www.giftster.com/list/hz6ij/">📋✨ wishlist</a>
+  to know about my current desires and each one's
+</p>
+<br />
+<ul>
+  <li>Price</li>
+  <li>Store</li>
+  <li>Preference (stars)</li>
+  <li>Details</li>
+</ul>
+
+<h2>Credits</h2>
+<p>
+  <a href="https://www.giftster.com/">
+    Powered by Giftster
+    <br />
+    <img
+      ngSrc="/assets/img/giftster.png"
+      alt="Giftser logo"
+      width="320"
+      height="129"
+    />
+  </a>
+  <br />
+  You can also
+  <a href="https://www.giftster.com/account/register/">create your wishlist</a>
+  for free
+</p>

src/app/gifts-page/gifts-page.component.scss

@@ -0,0 +1,21 @@
+@use 'page';
+@use 'paddings';
+
+:host {
+  display: block;
+  padding: page.$padding;
+
+  ul {
+    list-style-type: square;
+    margin-inline-start: 1em;
+    padding-inline-start: 1em;
+  }
+
+  h1 {
+    padding-bottom: paddings.$m;
+  }
+
+  h2 {
+    padding: paddings.$m 0;
+  }
+}

src/app/gifts-page/gifts-page.component.spec.ts

@@ -0,0 +1,33 @@
+import { ComponentFixture } from '@angular/core/testing'
+
+import { GiftsPageComponent } from './gifts-page.component'
+import { componentTestSetup } from '@/test/helpers/component-test-setup'
+import { By } from '@angular/platform-browser'
+
+describe('GiftsPageComponent', () => {
+  let component: GiftsPageComponent
+  let fixture: ComponentFixture<GiftsPageComponent>
+
+  beforeEach(async () => {
+    ;[fixture, component] = componentTestSetup(GiftsPageComponent)
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+
+  it('should contain link to gift preferences', () => {
+    const giftPreferencesAnchorElement = fixture.debugElement.query(
+      By.css('a[href="https://www.giftster.com/preferences/1747782/"]'),
+    )
+    expect(giftPreferencesAnchorElement).not.toBeNull()
+  })
+
+  it('should contain link to wishlist', () => {
+    const wishlistAnchorElement = fixture.debugElement.query(
+      By.css('a[href="https://www.giftster.com/list/hz6ij/"]'),
+    )
+    expect(wishlistAnchorElement).not.toBeNull()
+  })
+})

src/app/gifts-page/gifts-page.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core'
+import { NgOptimizedImage } from '@angular/common'
+
+@Component({
+  selector: 'app-gifts-page',
+  standalone: true,
+  imports: [NgOptimizedImage],
+  templateUrl: './gifts-page.component.html',
+  styleUrl: './gifts-page.component.scss',
+})
+export class GiftsPageComponent {}

src/app/gifts-page/gifts-page.routes.ts

@@ -0,0 +1,10 @@
+import { Routes } from '@angular/router'
+
+export const GIFTS_PATH = 'gifts'
+const GIFTS_PATHS = [GIFTS_PATH, '🎁', '🧧']
+export const giftsPageRoutes: Routes = [
+  ...GIFTS_PATHS.map((path) => ({
+    path,
+    loadChildren: () => import('./routes').then((m) => m.routes),
+  })),
+]

src/app/gifts-page/routes.ts

@@ -0,0 +1,22 @@
+import { Routes } from '@angular/router'
+import { NgxMetaRouteData } from '@davidlj95/ngx-meta/routing'
+import { GlobalMetadata } from '@davidlj95/ngx-meta/core'
+import { METADATA } from '../metadata'
+import { GIFTS_PATH } from './gifts-page.routes'
+import { environment } from '../../environments'
+import { GiftsPageComponent } from './gifts-page.component'
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: GiftsPageComponent,
+    data: {
+      meta: {
+        title: `🎁 Gifts | ${METADATA.nickname}`,
+        description:
+          "If you want to give me a gift, here's the page to help you out. Thanks in advance by the way. Much appreciated ❤️",
+        canonicalUrl: new URL(GIFTS_PATH + '/', environment.appBaseUrl),
+      },
+    } satisfies NgxMetaRouteData<GlobalMetadata>,
+  },
+]

src/sass/_page.scss

@@ -1,5 +1,9 @@
+@use 'paddings';
+
 @mixin full-size {
   position: absolute;
   width: 100%;
   min-height: 100%;
 }
+
+$padding: paddings.$l;