feat: add sports page and button component (#523)

src/app/app.routes.ts

@@ -3,6 +3,7 @@ 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'
+import { sportsPageRoutes } from './sports-page/sports-page.routes'
 
 export const routes: Routes = [
   // Metadata to add when '/' route is ready
@@ -21,5 +22,6 @@ export const routes: Routes = [
   ...resumePageRoutes,
   ...calendarPageRoutes,
   ...giftsPageRoutes,
+  ...sportsPageRoutes,
   ...notFoundPageRoutes,
 ]

src/app/resume-page/button/button.component.scss

@@ -0,0 +1,18 @@
+:host {
+  background-color: var(--sys-color-primary);
+  border: none;
+  color: var(--sys-color-on-primary);
+  border-radius: 1em;
+  font-size: 1em;
+  height: 2em;
+  padding: 0 1em;
+
+  &:hover {
+    background-color: color-mix(
+      in sRGB,
+      var(--sys-color-primary),
+      var(--sys-color-state-hover-on-prominent) 6%
+    );
+    color: var(--sys-color-on-primary);
+  }
+}

src/app/resume-page/button/button.component.spec.ts

@@ -0,0 +1,11 @@
+import { ButtonComponent } from './button.component'
+import { componentTestSetup } from '@/test/helpers/component-test-setup'
+
+describe('ButtonComponent', () => {
+  it('should create', () => {
+    const [fixture, component] = componentTestSetup(ButtonComponent)
+    fixture.detectChanges()
+
+    expect(component).toBeTruthy()
+  })
+})

src/app/resume-page/button/button.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core'
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'button[app-button]',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+  styleUrl: './button.component.scss',
+})
+export class ButtonComponent {}

src/app/sports-page/routes.ts

@@ -0,0 +1,21 @@
+import { Routes } from '@angular/router'
+import { NgxMetaRouteData } from '@davidlj95/ngx-meta/routing'
+import { GlobalMetadata } from '@davidlj95/ngx-meta/core'
+import { METADATA } from '../metadata'
+import { SPORTS_PATH } from './sports-page.routes'
+import { environment } from '../../environments'
+import { SportsPageComponent } from './sports-page.component'
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: SportsPageComponent,
+    data: {
+      meta: {
+        title: `👟 Sports | ${METADATA.nickname}`,
+        description: "Let's play some padel! Or go running together 🏃",
+        canonicalUrl: new URL(SPORTS_PATH + '/', environment.appBaseUrl),
+      },
+    } satisfies NgxMetaRouteData<GlobalMetadata>,
+  },
+]

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

@@ -0,0 +1,90 @@
+<h1>👟 Sports</h1>
+<p>
+  Physical activity is crucial for a healthy lifestyle. Sports are fun (some are
+  subjectively more than others 😜). So:
+</p>
+<img
+  class="sports-equation"
+  ngSrc="assets/img/sports-equation.png"
+  priority
+  alt="Sports = Health + Fun"
+  height="25"
+  width="260"
+/>
+<p>
+  Sports you keep healthy and have fun. Isn't that awesome? Here are the ones I
+  play.
+</p>
+<p>Come on, let's play a padel match, or go running together! 🏃</p>
+<h2>🎾 Padel</h2>
+<p>It's the sport I play the most lately. Twice or three times a week.</p>
+<p>
+  It's like tennis, but
+  <a href="https://en.m.wikipedia.org/wiki/Padel"
+    >typically played in doubles on a smaller enclosed court</a
+  >.
+</p>
+<p>
+  Do not confuse with
+  <a href="https://en.wikipedia.org/wiki/Paddleboarding">paddleboarding</a>
+</p>
+<ng-template #playtomicCard let-sport="sport">
+  <div class="minimal-card">
+    <app-card>
+      <app-card-header>
+        <a [href]="_playtomicProfileUrl">
+          <app-card-header-image
+            src="assets/img/playtomic.svg"
+            alt="Playtomic"
+          ></app-card-header-image>
+        </a>
+        <app-card-header-texts>
+          <app-card-header-title>
+            <a [href]="_playtomicProfileUrl"> {{ sport }} player profile </a>
+          </app-card-header-title>
+          <app-card-header-subtitle> Via Playtomic </app-card-header-subtitle>
+        </app-card-header-texts>
+      </app-card-header>
+      <form [action]="_playtomicProfileUrl" method="GET">
+        <button app-button>Let's play a match!</button>
+      </form>
+    </app-card>
+  </div>
+</ng-template>
+<ng-container
+  [ngTemplateOutlet]="playtomicCard"
+  [ngTemplateOutletContext]="{ sport: 'Padel' }"
+></ng-container>
+<h2>🏃 Running</h2>
+<p>Started on summer 2023 as a way to do some cardio ❤️</p>
+<p>
+  Better than running on a gym's treadmill: I'm under a roof most of the day 🧑‍💻
+  So it's a healthy way to get some sunlight ☀️
+</p>
+<p>Plus I challenge myself 💪 Whilst being quite cheap 🤑</p>
+<p>
+  👇 Checkout here my latest runs on
+  <a href="https://www.strava.com">Strava</a> 😳
+</p>
+<iframe
+  height="454"
+  width="300"
+  allowtransparency="true"
+  src="https://www.strava.com/athletes/116896062/latest-rides/2258b4e99aeb51898175a798dc9a4a15067dfc26"
+></iframe>
+<h2>🎾 Tennis</h2>
+<p>
+  Used to play it when I was a kid. 6+ years training every week. Some
+  competitions
+</p>
+<p>Haven't played for many years. But that can change...</p>
+<ng-container
+  [ngTemplateOutlet]="playtomicCard"
+  [ngTemplateOutletContext]="{ sport: 'Tennis' }"
+></ng-container>
+<h2>🏊 Swimming</h2>
+<p>Spent many years swimming as a school's extracurricular activity</p>
+<p>But don't fancy it much 🤷</p>
+<p>
+  Nowadays I prefer a bathing in a swimming pool, hot tube or in the sea 🌊😌 🍹
+</p>

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

@@ -0,0 +1,38 @@
+@use 'page';
+@use 'texts';
+@use 'theming';
+@use 'animations';
+@use 'margins';
+@use 'paddings';
+@use 'borders';
+
+:host {
+  display: block;
+  padding: page.$padding;
+
+  @include texts.page;
+  img.sports-equation {
+    @include animations.single-transition(filter, animations.$emphasized-style);
+  }
+  @include theming.only-dark-mode {
+    img.sports-equation {
+      filter: invert(1);
+    }
+  }
+
+  h2 {
+    font-weight: bold;
+  }
+
+  .minimal-card {
+    display: flex;
+  }
+
+  form {
+    text-align: center;
+  }
+
+  iframe {
+    border: none;
+  }
+}

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

@@ -0,0 +1,35 @@
+import { ComponentFixture } from '@angular/core/testing'
+
+import { SportsPageComponent } from './sports-page.component'
+import { componentTestSetup } from '@/test/helpers/component-test-setup'
+import { By } from '@angular/platform-browser'
+
+describe('SportsPageComponent', () => {
+  let component: SportsPageComponent
+  let fixture: ComponentFixture<SportsPageComponent>
+
+  beforeEach(async () => {
+    ;[fixture, component] = componentTestSetup(SportsPageComponent)
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+
+  it('should contain link to Playtomic profile', () => {
+    const playtomicAnchorElement = fixture.debugElement.query(
+      By.css('a[href="https://app.playtomic.io/profile/user/1463090"]'),
+    )
+    expect(playtomicAnchorElement).not.toBeNull()
+  })
+
+  it('should contain Strava latest activities embed', () => {
+    const stravaLatestRunsIframeElement = fixture.debugElement.query(
+      By.css(
+        'iframe[src="https://www.strava.com/athletes/116896062/latest-rides/2258b4e99aeb51898175a798dc9a4a15067dfc26"]',
+      ),
+    )
+    expect(stravaLatestRunsIframeElement).not.toBeNull()
+  })
+})

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

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core'
+import { NgOptimizedImage, NgTemplateOutlet } from '@angular/common'
+import { CardComponent } from '../resume-page/card/card.component'
+import { CardHeaderImageComponent } from '../resume-page/card/card-header/card-header-image/card-header-image.component'
+import { CardHeaderComponent } from '../resume-page/card/card-header/card-header.component'
+import { CardHeaderTitleComponent } from '../resume-page/card/card-header/card-header-title/card-header-title.component'
+import { CardHeaderSubtitleComponent } from '../resume-page/card/card-header/card-header-subtitle/card-header-subtitle.component'
+import { CardHeaderTextsComponent } from '../resume-page/card/card-header/card-header-texts/card-header-texts.component'
+import { ButtonComponent } from '../resume-page/button/button.component'
+import { CardHeaderDetailComponent } from '../resume-page/card/card-header/card-header-detail/card-header-detail.component'
+
+@Component({
+  selector: 'app-sports-page',
+  standalone: true,
+  imports: [
+    NgOptimizedImage,
+    CardComponent,
+    CardHeaderImageComponent,
+    CardHeaderComponent,
+    CardHeaderTitleComponent,
+    CardHeaderSubtitleComponent,
+    CardHeaderTextsComponent,
+    ButtonComponent,
+    CardHeaderDetailComponent,
+    NgTemplateOutlet,
+  ],
+  templateUrl: './sports-page.component.html',
+  styleUrl: './sports-page.component.scss',
+})
+export class SportsPageComponent {
+  protected readonly _playtomicProfileUrl =
+    'https://app.playtomic.io/profile/user/1463090'
+}

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

@@ -0,0 +1,10 @@
+import { Routes } from '@angular/router'
+
+export const SPORTS_PATH = 'sports'
+const SPORTS_PATHS = [SPORTS_PATH, '👟', '🎾', '🏃']
+export const sportsPageRoutes: Routes = [
+  ...SPORTS_PATHS.map((path) => ({
+    path,
+    loadChildren: () => import('./routes').then((m) => m.routes),
+  })),
+]

src/sass/_theming.scss

@@ -45,3 +45,16 @@
     }
   }
 }
+
+@mixin only-dark-mode {
+  @at-root {
+    ::ng-deep html[data-color-scheme='dark'] {
+      @content;
+    }
+    @media (prefers-color-scheme: dark) {
+      ::ng-deep html:not([data-color-scheme]) {
+        @content;
+      }
+    }
+  }
+}

src/sass/themes/_devtools-common-scheme.scss

@@ -5,9 +5,11 @@ $devtools-common-scheme: (
   vars: (
     // https://github.com/ChromeDevTools/devtools-frontend/blob/7500d2916c463c136fc5ce2547ceb469c61454b4/front_end/ui/legacy/tokens.css
     // Or locally by `devtools://theme/colors.css?sets=ui,chrome` (may change depending on current theme)
+    ref-palette-primary20: rgb(6 46 111 / 100%),
     ref-palette-primary40: rgb(11 87 208 / 100%),
     ref-palette-primary80: rgb(168 199 250 / 100%),
     ref-palette-primary90: rgb(211 227 253 / 100%),
+    ref-palette-primary100: rgb(255 255 255 / 100%),
     ref-palette-secondary50: rgb(4 125 183 / 100%),
     ref-palette-neutral10: rgb(31 31 31 / 100%),
     ref-palette-neutral15: rgb(40 40 40 / 100%),

src/sass/themes/_devtools-dark-scheme.scss

@@ -40,8 +40,11 @@ $devtools-dark-scheme: (
     sys-color-neutral-outline: var(--ref-palette-neutral50),
     sys-color-neutral-container: var(--ref-palette-neutral25),
     sys-color-state-hover-dim-blend-protection: rgb(31 31 31/10%),
-    adorner-border-color: var(--sys-color-tonal-outline),
     sys-color-tonal-outline: var(--ref-palette-secondary50),
+    sys-color-on-primary: var(--ref-palette-primary20),
+    sys-color-state-hover-on-prominent:
+      color-mix(in sRGB, var(--ref-palette-neutral99) 10%, transparent),
+    adorner-border-color: var(--sys-color-tonal-outline),
     img-filter: grayscale(0.5),
   ),
 );

src/sass/themes/_devtools-light-scheme.scss

@@ -39,6 +39,9 @@ $devtools-light-scheme: (
     sys-color-neutral-outline: var(--ref-palette-neutral80),
     sys-color-neutral-container: var(--ref-palette-neutral95),
     sys-color-state-hover-dim-blend-protection: rgb(6 46 111/18%),
+    sys-color-on-primary: var(--ref-palette-primary100),
+    sys-color-state-hover-on-prominent:
+      color-mix(in sRGB, var(--ref-palette-neutral10) 6%, transparent),
     adorner-border-color: var(--sys-color-neutral-outline),
     img-filter: none,
   ),