Fix missing translation for 'today'

components/About.tsx

@@ -22,7 +22,10 @@ export default function About({
 }) {
   const aboutMyself = messages.about.myself
     .replace("{currentAge}", String(currentAge))
-    .replace("{startDate}", formatDate(new Date(currentJob.startDate), locale))
+    .replace(
+      "{startDate}",
+      formatDate(new Date(currentJob.startDate), locale, messages)
+    )
     .replace("{jobTitle}", String(currentJob.title))
     .replace("{company}", currentJob.company);
 

components/DetailedItem.tsx

@@ -2,7 +2,7 @@ import { StaticImageData } from "next/image";
 import Image from "next-export-optimize-images/image";
 import styles from "./DetailedItem.module.scss";
 import { formatDateRange } from "@/util/date-time";
-import { Locale } from "@/util/i18n";
+import { Locale, Messages } from "@/util/i18n";
 
 export default function DetailedItem({
   startDate,
@@ -15,6 +15,7 @@ export default function DetailedItem({
   showDateRange,
   className,
   locale,
+  messages,
 }: {
   startDate?: Date;
   endDate?: Date;
@@ -26,6 +27,7 @@ export default function DetailedItem({
   showDateRange?: boolean;
   className?: string;
   locale?: Locale;
+  messages?: Messages;
 }) {
   return (
     <div className={[styles.detailedItem, className ?? ""].join(" ")}>
@@ -40,7 +42,7 @@ export default function DetailedItem({
         <h3>{educator}</h3>
         {showDateRange ? (
           <span className="education-date">
-            {formatDateRange(startDate, endDate, locale)}
+            {formatDateRange(startDate, endDate, locale, messages)}
           </span>
         ) : null}
         <h4>{title}</h4>

components/Education.tsx

@@ -29,7 +29,9 @@ export default function Education({
   return (
     <div id="education" className={styles.education}>
       <h2 className="heading">{messages.header.sections.education}</h2>
-      {education.map((item) => EducationTimelineItem({ ...item, locale }))}
+      {education.map((item) =>
+        EducationTimelineItem({ ...item, locale, messages })
+      )}
     </div>
   );
 }
@@ -53,12 +55,14 @@ function EducationTimelineItem({
   title,
   keyPoints,
   locale,
-}: EducationItem & { locale: Locale }) {
+  messages,
+}: EducationItem & { locale: Locale; messages: Messages }) {
   return (
     <DetailedItem
       key={`${educator}-${startDate.toISOString()}`}
       showDateRange
       locale={locale}
+      messages={messages}
       startDate={startDate}
       endDate={endDate}
       educator={getMultilingualContent(educator, locale)}

components/Experience.tsx

@@ -33,7 +33,7 @@ export default function ExperienceTimeline({
       <h2 className="heading">{messages.header.sections.experience}</h2>
       <div className={styles.experienceTimeline}>
         {experiences.map((experiences) =>
-          ExperienceTimelineItem({ ...experiences, locale })
+          ExperienceTimelineItem({ ...experiences, locale, messages })
         )}
       </div>
     </div>
@@ -59,7 +59,8 @@ function ExperienceTimelineItem({
   title,
   keyPoints,
   locale,
-}: ExperienceItem & { locale: Locale }) {
+  messages,
+}: ExperienceItem & { locale: Locale; messages: Messages }) {
   return (
     <div
       className={styles.experienceTimelinePoint}
@@ -70,7 +71,7 @@ function ExperienceTimelineItem({
       </div>
       <div>
         <span className={styles.experienceTimelineDate}>
-          {formatDateRange(startDate, endDate, locale)}
+          {formatDateRange(startDate, endDate, locale, messages)}
         </span>
         <DetailedItem
           className={styles.experienceTimelineContent}

messages/de.json

@@ -3,6 +3,11 @@
         "title": "Hendrik Schmitz | Mein Portfolio",
         "description": "Erfahrener Fullstack Software Engineer mit einem starken Fokus auf Frontend-Entwicklung. Entdecken Sie mein Portfolio mit innovativen Weblösungen und modernster Technologiekompetenz."
     },
+    "common": {
+        "dateTime": {
+            "today": "Heute"
+        }
+    },
     "header": {
         "sections": {
             "about": "Über mich",

messages/en.json

@@ -3,6 +3,11 @@
         "title": "Hendrik Schmitz | My Portfolio",
         "description": "Experienced Fullstack Software Engineer with a strong focus on Frontend Development. Explore my portfolio showcasing innovative web solutions and cutting-edge technology expertise."
     },
+    "common": {
+        "dateTime": {
+            "today": "Today"
+        }
+    },
     "header": {
         "sections": {
             "about": "About",

util/date-time.ts

@@ -1,7 +1,12 @@
-import { Locale, defaultLocale } from "./i18n";
+import { Locale, Messages, defaultLocale } from "./i18n";
+import defaultMessages from "@/messages/de.json";
 
-export function formatDate(date?: Date, locale = defaultLocale): string {
-  if (!date) return "Heute";
+export function formatDate(
+  date?: Date,
+  locale = defaultLocale,
+  messages = defaultMessages
+): string {
+  if (!date) return messages.common.dateTime.today;
   return new Intl.DateTimeFormat(locale, {
     month: "long",
     year: "numeric",
@@ -11,9 +16,10 @@ export function formatDate(date?: Date, locale = defaultLocale): string {
 export function formatDateRange(
   startDate?: Date,
   endDate?: Date,
-  locale?: Locale
+  locale?: Locale,
+  messages?: Messages
 ): string {
   return [startDate, endDate]
-    .map((date) => formatDate(date, locale))
+    .map((date) => formatDate(date, locale, messages))
     .join(" - ");
 }

util/i18n.ts

@@ -1,4 +1,4 @@
-import defaultMessages from '@/messages/de.json';
+import defaultMessages from "@/messages/de.json";
 export type Messages = typeof defaultMessages;
 
 export enum Locale {