From e92f2c622d8e44e4d3e27dd546777ee1ab77773c Mon Sep 17 00:00:00 2001 From: Kyle Kemp Date: Sun, 23 Jun 2024 10:32:40 -0500 Subject: [PATCH] closes #4 closes #46 --- scripts/prebuild-routes.ts | 4 +++- src/app/app.component.ts | 11 +++++++++-- src/app/card/card.page.ts | 16 ++++++++++++++++ src/app/cards.service.ts | 6 +++++- src/app/locale.service.ts | 4 ++++ src/app/search.service.ts | 18 ++++++++++++++++-- src/app/seo.service.ts | 6 ++++++ 7 files changed, 59 insertions(+), 6 deletions(-) diff --git a/scripts/prebuild-routes.ts b/scripts/prebuild-routes.ts index f1b2250..a91cdf9 100644 --- a/scripts/prebuild-routes.ts +++ b/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')); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 71a6a73..e4f199f 100644 --- a/src/app/app.component.ts +++ b/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 diff --git a/src/app/card/card.page.ts b/src/app/card/card.page.ts index 26dcd23..a045b98 100644 --- a/src/app/card/card.page.ts +++ b/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 ?? ''); diff --git a/src/app/cards.service.ts b/src/app/cards.service.ts index fdc9fd6..e8f2d0f 100644 --- a/src/app/cards.service.ts +++ b/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 = {}; 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[] { diff --git a/src/app/locale.service.ts b/src/app/locale.service.ts index 0b63a34..dc041da 100644 --- a/src/app/locale.service.ts +++ b/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; } diff --git a/src/app/search.service.ts b/src/app/search.service.ts index 6fb161f..b720451 100644 --- a/src/app/search.service.ts +++ b/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([]); public queryDesc = signal(''); @@ -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) { diff --git a/src/app/seo.service.ts b/src/app/seo.service.ts index 7283adb..aecff80 100644 --- a/src/app/seo.service.ts +++ b/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 });