closes #4 closes #46

scripts/prebuild-routes.ts

@@ -2,6 +2,8 @@ const fs = require('fs-extra');
 const cards = require('../ssgdata/cards.json');
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const cardRoutes = cards.map((c: any) => `/card/${encodeURIComponent(c.id)}`);
+const cardRoutes = cards
+  .filter((c: any) => c.locale === 'en-US')
+  .map((c: any) => `/card/${encodeURIComponent(c.id)}`);
 
 fs.writeFileSync('routes.txt', cardRoutes.join('\n'));

src/app/app.component.ts

@@ -1,6 +1,7 @@
-import { Component, inject, type OnInit } from '@angular/core';
+import { Component, effect, inject, type OnInit } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { filter, map, mergeMap } from 'rxjs';
+import { LocaleService } from './locale.service';
 import { SEOService } from './seo.service';
 
 @Component({
@@ -12,8 +13,14 @@ export class AppComponent implements OnInit {
   private router = inject(Router);
   private route = inject(ActivatedRoute);
   private seo = inject(SEOService);
+  private locale = inject(LocaleService);
 
-  constructor() {}
+  constructor() {
+    effect(() => {
+      const currentLocale = this.locale.currentLocale();
+      this.seo.updatePageLanguage(currentLocale);
+    });
+  }
 
   ngOnInit(): void {
     this.router.events

src/app/card/card.page.ts

@@ -1,8 +1,10 @@
 import {
   Component,
   computed,
+  effect,
   inject,
   signal,
+  untracked,
   viewChild,
   type ElementRef,
   type OnDestroy,
@@ -27,6 +29,7 @@ import { environment } from '../../environments/environment';
 import { WINDOW } from '../_shared/helpers';
 import { ErrataService } from '../errata.service';
 import { FAQService } from '../faq.service';
+import { LocaleService } from '../locale.service';
 import { NotifyService } from '../notify.service';
 import { SEOService } from '../seo.service';
 
@@ -46,6 +49,7 @@ export class CardPage implements OnInit, OnDestroy {
   private seo = inject(SEOService);
 
   private translateService = inject(TranslateService);
+  private localeService = inject(LocaleService);
   private cardsService = inject(CardsService);
   private faqService = inject(FAQService);
   private errataService = inject(ErrataService);
@@ -83,6 +87,18 @@ export class CardPage implements OnInit, OnDestroy {
     this.nav.back();
   };
 
+  constructor() {
+    effect(() => {
+      if (!this.cardData) return;
+
+      this.localeService.currentLocale();
+
+      untracked(() => {
+        this.loadCardData(this.route.snapshot.paramMap.get('id') ?? '');
+      });
+    });
+  }
+
   ngOnInit() {
     const cardId = this.route.snapshot.paramMap.get('id');
     this.loadCardData(cardId ?? '');

src/app/cards.service.ts

@@ -9,6 +9,7 @@ import { type ICard, type IProductFilter } from '../../interfaces';
 import { numericalOperator } from '../../search/operators/_helpers';
 import { parseQuery, type ParserOperator } from '../../search/search';
 import { environment } from '../environments/environment';
+import { LocaleService } from './locale.service';
 import { MetaService } from './meta.service';
 
 @Injectable({
@@ -20,6 +21,7 @@ export class CardsService {
   private cardsById: Record<string, ICard> = {};
 
   private http = inject(HttpClient);
+  private localeService = inject(LocaleService);
   private metaService = inject(MetaService);
 
   public get allCards(): ICard[] {
@@ -89,7 +91,9 @@ export class CardsService {
   }
 
   public getCardById(id: string): ICard | undefined {
-    return this.cards.find((c) => c.id === id);
+    return this.cards.find(
+      (c) => c.id === id && c.locale === this.localeService.currentLocale()
+    );
   }
 
   public getAllUniqueAttributes(attribute: keyof ICard): string[] {

src/app/locale.service.ts

@@ -1,5 +1,6 @@
 import { inject, Injectable, signal } from '@angular/core';
 import { LocalStorageService } from 'ngx-webstorage';
+import { environment } from '../environments/environment';
 
 @Injectable({
   providedIn: 'root',
@@ -11,6 +12,9 @@ export class LocaleService {
   private validLocales: string[] = [];
 
   public get allLocales() {
+    if (!environment.production) {
+      return [...this.validLocales, 'te-ST'];
+    }
     return this.validLocales;
   }
 

src/app/search.service.ts

@@ -1,10 +1,11 @@
-import { inject, Injectable, signal } from '@angular/core';
+import { effect, inject, Injectable, signal, untracked } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { sortBy } from 'lodash';
 import { LocalStorageService } from 'ngx-webstorage';
 import type { ICard } from '../../interfaces';
 import { queryToText } from '../../search/search';
 import { CardsService } from './cards.service';
+import { LocaleService } from './locale.service';
 
 export type QueryDisplay = 'images' | 'text';
 export type QuerySort = keyof ICard;
@@ -18,6 +19,7 @@ export class SearchService {
   private route = inject(ActivatedRoute);
   private cardsService = inject(CardsService);
   private storageService = inject(LocalStorageService);
+  private localeService = inject(LocaleService);
 
   public visibleCards = signal<ICard[]>([]);
   public queryDesc = signal<string>('');
@@ -41,6 +43,16 @@ export class SearchService {
   public querySortValue: QuerySort = 'name';
   public querySortByValue: QuerySortBy = 'asc';
 
+  constructor() {
+    effect(() => {
+      this.localeService.currentLocale();
+
+      untracked(() => {
+        this.redoCurrentSearch();
+      });
+    });
+  }
+
   search(query: string, changePage = true, setPage = -1) {
     this.isSearching.set(true);
 
@@ -51,7 +63,9 @@ export class SearchService {
     this.displayTotal.set(0);
     this.displayMaximum.set(0);
 
-    this.queriedCards = this.cardsService.searchCards(this.queryValue);
+    this.queriedCards = this.cardsService
+      .searchCards(this.queryValue)
+      .filter((c) => c.locale === this.localeService.currentLocale());
     this.doExtraSorting();
 
     if (changePage) {

src/app/seo.service.ts

@@ -1,3 +1,4 @@
+import { DOCUMENT } from '@angular/common';
 import { inject, Injectable } from '@angular/core';
 
 import { Meta, Title } from '@angular/platform-browser';
@@ -8,6 +9,11 @@ import { Meta, Title } from '@angular/platform-browser';
 export class SEOService {
   private pageMeta = inject(Meta);
   private title = inject(Title);
+  private document = inject(DOCUMENT);
+
+  public updatePageLanguage(lang: string): void {
+    this.document.documentElement.lang = lang;
+  }
 
   public updateOGTitle(newTitle: string): void {
     this.pageMeta.updateTag({ property: 'og:title', content: newTitle });