feat(blog): translations for page titles (#281)

Author: majahendzel-va

apps/blog/src/assets/i18n/en.json

@@ -108,7 +108,11 @@
     "readLess": "Read less"
   },
   "seo": {
-    "metaDescription": "Angular.love - a place for all Angular enthusiasts created to inspire and educate."
+    "metaDescription": "Angular.love - a place for all Angular enthusiasts created to inspire and educate.",
+    "home": "Blog and community for Angular fans",
+    "aboutUs": "About us",
+    "becomeAuthor": "Become an author",
+    "notFound": "Not found"
   },
   "adBanner": {
     "registerButton": "Download for free",

apps/blog/src/assets/i18n/pl.json

@@ -111,7 +111,11 @@
     "readLess": "Czytaj mniej"
   },
   "seo": {
-    "metaDescription": "Angular.love - ciekawostki oraz rozwiązania dla średnio-zaawansowanych oraz zaawansowanych developerów Angulara."
+    "metaDescription": "Angular.love - ciekawostki oraz rozwiązania dla średnio-zaawansowanych oraz zaawansowanych developerów Angulara.",
+    "home": "Blog dla sympatyków Angulara",
+    "aboutUs": "O nas",
+    "becomeAuthor": "Zostań autorem",
+    "notFound": "Nie znaleziono"
   },
   "adBanner": {
     "registerButton": "Pobierz za darmo",

libs/blog/shared/util-seo/src/lib/services/seo.service.ts

@@ -1,7 +1,8 @@
 import { DOCUMENT } from '@angular/common';
-import { inject, Injectable, signal } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Meta, MetaDefinition, Title } from '@angular/platform-browser';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { TranslocoService } from '@jsverse/transloco';
 import { filter, map, switchMap } from 'rxjs';
 
 import { SeoMetaData } from '@angular-love/contracts/articles';
@@ -19,6 +20,7 @@ export class SeoService {
   private readonly _meta = inject(Meta);
   private readonly _document = inject(DOCUMENT);
   private readonly _seoConfig = inject(SEO_CONFIG);
+  private readonly _translocoService = inject(TranslocoService);
   private _url = '';
 
   init(): void {
@@ -47,7 +49,9 @@ export class SeoService {
         this.updateTag(seoConfig.siteName, 'ogSiteName');
 
         if (routeData && routeData['seo'] && routeData['seo']['title']) {
-          this.setTitle(`${routeData['seo']['title']} - ${seoConfig.title}`);
+          this.setTitle(
+            `${seoConfig.title} - ${this._translocoService.translate(routeData['seo']['title'])}`,
+          );
         } else {
           this.setTitle('');
         }

libs/blog/shell/feature-shell-web/src/lib/blog-shell.routes.ts

@@ -31,7 +31,7 @@ export const routes: Route[] = [
           (await import('@angular-love/blog/home/feature-home'))
             .HomePageComponent,
         data: {
-          seo: { title: 'Home' },
+          seo: { title: 'seo.home' },
         },
       },
       {
@@ -48,7 +48,7 @@ export const routes: Route[] = [
           (await import('@angular-love/feature-about-us'))
             .FeatureAboutUsComponent,
         data: {
-          seo: { title: 'About Us' },
+          seo: { title: 'seo.aboutUs' },
         },
       },
       {
@@ -63,7 +63,7 @@ export const routes: Route[] = [
           (await import('@angular-love/blog/become-author-page-feature'))
             .BecomeAuthorPageFeatureComponent,
         data: {
-          seo: { title: 'Become an author' },
+          seo: { title: 'seo.becomeAuthor' },
         },
       },
       {
@@ -78,7 +78,7 @@ export const routes: Route[] = [
           (await import('@angular-love/blog/shared/ui-not-found'))
             .NotFoundPageComponent,
         data: {
-          seo: { title: 'Not Found' },
+          seo: { title: 'seo.notFound' },
         },
       },
       ...articleRoutes,