diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 1c407ba0..24105b28 100644 --- a/src/app/app.routes.ts +++ b/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, ] diff --git a/src/app/calendar-page/calendar-page.routes.ts b/src/app/calendar-page/calendar-page.routes.ts index 435cdb7d..12b9f8f1 100644 --- a/src/app/calendar-page/calendar-page.routes.ts +++ b/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), })), ] diff --git a/src/app/gifts-page/gifts-page.component.html b/src/app/gifts-page/gifts-page.component.html new file mode 100644 index 00000000..f9e0f9a9 --- /dev/null +++ b/src/app/gifts-page/gifts-page.component.html @@ -0,0 +1,53 @@ +

🎁 Gifts

+

+ If you're thinking about gifting me something, first of all... + thanks πŸ™

Just the fact you're thinking about + that is much appreciated and I'm very grateful already ❀️

Let me + help you at least making this easier😊 +

+ +

Preferences

+

+ Checkout my + 🎁 gift preferences + to: +

+
+ + +

Wishlist

+

+ Checkout my + πŸ“‹βœ¨ wishlist + to know about my current desires and each one's +

+
+ + +

Credits

+

+ + Powered by Giftster +
+ Giftser logo +
+
+ You can also + create your wishlist + for free +

diff --git a/src/app/gifts-page/gifts-page.component.scss b/src/app/gifts-page/gifts-page.component.scss new file mode 100644 index 00000000..35903316 --- /dev/null +++ b/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; + } +} diff --git a/src/app/gifts-page/gifts-page.component.spec.ts b/src/app/gifts-page/gifts-page.component.spec.ts new file mode 100644 index 00000000..43d4b899 --- /dev/null +++ b/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 + + 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() + }) +}) diff --git a/src/app/gifts-page/gifts-page.component.ts b/src/app/gifts-page/gifts-page.component.ts new file mode 100644 index 00000000..4798a043 --- /dev/null +++ b/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 {} diff --git a/src/app/gifts-page/gifts-page.routes.ts b/src/app/gifts-page/gifts-page.routes.ts new file mode 100644 index 00000000..155fa068 --- /dev/null +++ b/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), + })), +] diff --git a/src/app/gifts-page/routes.ts b/src/app/gifts-page/routes.ts new file mode 100644 index 00000000..d98792b4 --- /dev/null +++ b/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, + }, +] diff --git a/src/assets/img/giftster.png b/src/assets/img/giftster.png new file mode 100644 index 00000000..3dc99213 Binary files /dev/null and b/src/assets/img/giftster.png differ diff --git a/src/sass/_page.scss b/src/sass/_page.scss index cc2b7882..4ba99b1b 100644 --- a/src/sass/_page.scss +++ b/src/sass/_page.scss @@ -1,5 +1,9 @@ +@use 'paddings'; + @mixin full-size { position: absolute; width: 100%; min-height: 100%; } + +$padding: paddings.$l;