feat: add custom ids and ci/cd script for validating that all translations are set

Author: dominicbachmann

.husky/commit-msg

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npx commitlint --edit $1

.husky/pre-commit

@@ -1,4 +1,2 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 npx lint-staged
+npm run i18n:validate-no-empty-translations

messages.json

@@ -1,36 +1,39 @@
 {
   "locale": "en",
   "translations": {
-    "5729418620241283277": "Events",
-    "4282290715877032507": "Organizers",
-    "5481284030283031915": "Website",
-    "8585369201408386550": " Join the community ",
-    "635264773021131084": " Starting from ",
-    "7097963028377891250": " To be announced ",
-    "457763919401259967": " Registration ",
-    "5891064527381218201": "Free",
-    "8291262399353359697": "Attendees",
-    "5260501588919384967": " Register now ",
-    "6364272713313334628": " No registration available ",
-    "926352149584380702": "Organized by",
-    "4862119345478890729": " Listen Now ",
-    "383604207727627418": "Try adjusting your search terms",
-    "6380110438893831255": "or browse all events above",
-    "6257229111292962180": "The Angular community hub for events, communities, and podcasts",
-    "6910865064463105075": "Communities",
-    "1984987229407697795": "Podcasts",
-    "3676011873566441889": "Curated list of Angular communities",
-    "1229359301315184889": "Curated list of Angular Events",
-    "3776293039808729401": "No events found",
-    "4118966711789506787": "We could not find any events matching your search criteria. Try different keywords or browse all available events.",
-    "8228704013073542414": "No upcoming events",
-    "5181869256727726277": "There are currently no upcoming Angular events scheduled. New events are added regularly, so please check back soon!",
-    "2104481506343485854": "Curated list of Angular Communities, Events, Podcasts, and Call for Papers.",
-    "8162118643101139148": "Developers interested in Angular and related technologies.",
-    "6829527508389756715": "Angular Events",
-    "8870711330013548872": "Online",
-    "6578397717654172779": "Page Not Found",
-    "1659745110459296080": "Go Back Home",
-    "5674307105789988119": "Curated list of Angular Talks"
+    "community-card.events": "Events",
+    "community-card.organizers": "Organizers",
+    "community-card.website": "Website",
+    "community-card.join": " Join the community ",
+    "event-card.starting-from": " Starting from ",
+    "event-card.tba": " To be announced ",
+    "event-card.registration": " Registration ",
+    "event-card.fee": "Free",
+    "event-card.attendees": "Attendees",
+    "event-card.register-now": " Register now ",
+    "event-card.no-registration": " No registration available ",
+    "event-card.organized-by": "Organized by",
+    "podcast-card.listen-now": " Listen Now ",
+    "message.empty-recommendation": "Try adjusting your search terms",
+    "message.browse-all": "or browse all events above",
+    "navigation.slogan": "The Angular community hub for events, communities, and podcasts",
+    "navigation.events": "Events",
+    "navigation.communities": "Communities",
+    "navigation.podcasts": "Podcasts",
+    "communities-page.meta-description": "Curated list of Angular communities",
+    "events-page.meta-description": "Curated list of Angular Events",
+    "events-page.og-title": "Curated list of Angular Events",
+    "events-page.empty-search-message-title": "No events found",
+    "events-page.empty-search-message-description": "We could not find any events matching your search criteria. Try different keywords or browse all available events.",
+    "events-page.empty-events-message-title": "No upcoming events",
+    "events-page.empty-events-message-description": "There are currently no upcoming Angular events scheduled. New events are added regularly, so please check back soon!",
+    "events-page.json-ld.description": "Curated list of Angular Communities, Events, Podcasts, and Call for Papers.",
+    "events-page.json-ld.audience-description": "Developers interested in Angular and related technologies.",
+    "events-page.json-ld.main-entity.name": "Angular Events",
+    "events-page.json-ld.main-entity.item.description": "Developers interested in Angular and related technologies.",
+    "events-page.json-ld.main-entity.item.online": "Online",
+    "not-found-page.not-found": "Page Not Found",
+    "not-found-page.go-home": "Go Back Home",
+    "podcasts-page.meta-description": "Curated list of Angular Talks"
   }
 }

package.json

@@ -3,14 +3,16 @@
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
+    "prepare": "husky",
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
     "serve:ssr:angular-hub": "node dist/angular-hub/server/server.mjs",
     "i18n:extract": "ng extract-i18n --format json",
-    "i18n:merge-translations": "node ./scripts/merge-translations.js"
+    "i18n:merge-translations": "node scripts/merge-translations.mjs",
+    "i18n:validate-no-empty-translations": "npm run i18n:extract && npm run i18n:merge-translations && node scripts/validate-no-empty-translations.mjs"
   },
   "private": true,
   "prettier": {

scripts/merge-translations.js renamed to scripts/merge-translations.mjs

@@ -1,8 +1,8 @@
 import { readFile, writeFile } from "node:fs/promises";
-import config from '../angular.json' with { type: 'json' };
 import messagesFile from '../messages.json' with { type: 'json' };
+import {getLocaleFilePaths} from "./translations/get-locale-files.mjs";
 
-const localesFilePaths = Object.values(config.projects["angular-hub"].i18n.locales).map((locale) => locale.translation);
+const localesFilePaths = getLocaleFilePaths();
 
 const messages = Object.entries(messagesFile.translations);
 
@@ -14,7 +14,7 @@ const newLocales = await Promise.all(localesFilePaths.map(async (localeFilePath)
   const updatedTranslations = messages.reduce((acc, [key, value]) => {
     return {
       ...acc,
-      [key]: key in localeFileData.translations ? localeFileData.translations[key] : value
+      [key]: key in localeFileData.translations ? localeFileData.translations[key] : ""
     }
   }, {});
 

scripts/translations/get-locale-files.mjs

@@ -0,0 +1,3 @@
+import config from "../../angular.json" with { type: 'json' };
+
+  export const getLocaleFilePaths = () => Object.values(config.projects["angular-hub"].i18n.locales).map((locale) => locale.translation);

scripts/validate-no-empty-translations.mjs

@@ -0,0 +1,22 @@
+import {getLocaleFilePaths} from "./translations/get-locale-files.mjs";
+import {readFile} from "node:fs/promises";
+
+const localesFilePaths = getLocaleFilePaths();
+
+const missingKeysPerLocale = await Promise.all(localesFilePaths.map(async (localeFilePath) => {
+  const localeFile = await readFile(localeFilePath, { encoding: 'utf-8' });
+
+  return {
+    localeFilePath,
+    missingTranslations: Object.entries(JSON.parse(localeFile).translations).filter(([_key, value]) => value === "").map(([key]) => key),
+  }
+}));
+
+const hasMissingTranslations = missingKeysPerLocale.some((file) => file.missingTranslations.length);
+
+if (hasMissingTranslations) {
+  console.error('Missing translations', missingKeysPerLocale);
+  process.exitCode = 1;
+}else {
+  process.exit(0);
+}

src/app/components/cards/community-card.ts

@@ -32,7 +32,7 @@ import { Community } from '../../../models/community.model';
               class="text-sm hover:underline flex items-center gap-2"
             >
               <i class="pi pi-calendar text-2xl text-[#BF25B9]"></i>
-              <span i18n>Events</span>
+              <span i18n="@@community-card.events">Events</span>
             </a>
           </li>
         }
@@ -44,7 +44,7 @@ import { Community } from '../../../models/community.model';
               class="text-sm hover:underline flex items-center gap-2"
             >
               <i class="pi pi-users text-2xl text-[#0077B5]"></i>
-              <span i18n>Organizers</span>
+              <span i18n="@@community-card.organizers">Organizers</span>
             </a>
           </li>
         }
@@ -56,7 +56,7 @@ import { Community } from '../../../models/community.model';
               class="text-sm hover:underline flex items-center gap-2"
             >
               <i class="pi pi-globe text-2xl text-[#0077B5]"></i>
-              <span i18n>Website</span>
+              <span i18n="@@community-card.website">Website</span>
             </a>
           </li>
         }
@@ -121,7 +121,7 @@ import { Community } from '../../../models/community.model';
           [href]="community().eventsUrl"
           target="_blank"
           class="w-full flex items-center justify-center text-sm bg-[#26A0D9] text-white p-2 rounded-lg"
-          i18n
+          i18n="@@community-card.join"
         >
           Join the community
         </a>

src/app/components/cards/event-card.ts

@@ -45,7 +45,7 @@ import { CommunityEvent } from '../../../models/community-event.model';
         >
           @if (!event().isFree) {
             <div class="flex flex-col">
-              <div class="text-sm text-gray-500 dark:text-gray-200" i18n>
+              <div class="text-sm text-gray-500 dark:text-gray-200" i18n="@@event-card.starting-from">
                 Starting from
               </div>
               <div class="font-bold text-[#26A0D9] flex items-end gap-1">
@@ -55,23 +55,23 @@ import { CommunityEvent } from '../../../models/community-event.model';
                   </span>
                   <span class="text-2xl"> {{ event().startingPrice }}* </span>
                 } @else {
-                  <ng-container i18n>
+                  <ng-container i18n="@@event-card.tba">
                     To be announced
                   </ng-container>
                 }
               </div>
             </div>
           } @else {
             <div class="flex flex-col">
-              <div class="text-sm text-gray-500 dark:text-gray-200" i18n>
+              <div class="text-sm text-gray-500 dark:text-gray-200" i18n="@@event-card.registration">
                 Registration
               </div>
-              <div class="font-bold text-2xl text-[#26A0D9]" i18n>Free</div>
+              <div class="font-bold text-2xl text-[#26A0D9]" i18n="@@event-card.fee">Free</div>
             </div>
           }
           @if (event().attendeesCount) {
             <div class="flex flex-col items-center">
-              <div class="text-sm text-gray-500" i18n>Attendees</div>
+              <div class="text-sm text-gray-500" i18n="@@event-card.attendees">Attendees</div>
               <div class="text-sm font-bold">{{ event().attendeesCount }}</div>
             </div>
           }
@@ -81,14 +81,14 @@ import { CommunityEvent } from '../../../models/community-event.model';
             [href]="event().url"
             target="_blank"
             class="w-full flex items-center justify-center text-sm bg-[#26A0D9] text-white p-2 rounded-lg"
-            i18n
+            i18n="@@event-card.register-now"
           >
             Register now
           </a>
         } @else {
           <div
             class="w-full flex items-center justify-center text-sm bg-gray-200 p-2 rounded-lg dark:text-gray-900"
-            i18n
+            i18n="@@event-card.no-registration"
           >
             No registration available
           </div>
@@ -98,7 +98,7 @@ import { CommunityEvent } from '../../../models/community-event.model';
           target="_blank"
           class="flex items-center gap-2 text-xs hover:underline hover:text-[#26A0D9]"
         >
-          <span i18n>Organized by</span>
+          <span i18n="@@event-card.organized-by">Organized by</span>
           <div
             class="w-6 h-6 rounded-full p-1 bg-gray-100 flex items-center justify-center"
           >

src/app/components/cards/podcast-card.ts

@@ -48,7 +48,7 @@ import { Podcast } from '../../../models/podcast.model';
           <i
             class="pi pi-play-circle text-purple-600 text-2xl dark:text-purple-300"
           ></i>
-          <span class="font-medium text-purple-600 dark:text-purple-300" i18n>
+          <span class="font-medium text-purple-600 dark:text-purple-300" i18n="@@podcast-card.listen-now">
             Listen Now
           </span>
         </div>