finished translating homepage

akai-org · Jul 4, 2024 · 76f644a · 76f644a
1 parent 3a70934
commit 76f644a
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 20 deletions.
diff --git a/src/components/Project.astro b/src/components/Project.astro
@@ -10,7 +10,7 @@ import icon_github_white from "@assets/icon_github_white.svg";
 import { getRelativeTime } from "@utilities/getRelativeTime";
 import { placeWhitespaces } from "@utilities/stringUtils";
 import { Duration } from "@utilities/Duration.enum";
-import { getLangFromUrl } from "@i18n/utils";
+import { getLangFromUrl, useTranslations } from "@i18n/utils";
 
 type Props = Project;
 const {
@@ -24,14 +24,16 @@ const {
 } = Astro.props;
 
 const currentLang = getLangFromUrl(Astro.url) as string;
+const translate = useTranslations(currentLang);
+
 const projectUrl = new URL(`${currentLang}/projects/${name}`,
   isProd ? Astro.site : "http://localhost:4321",
 );
 
 const langLimit = 5;
 const tooManyLangs = languages.length > langLimit;
 
-const timeFromUpdate = getRelativeTime(updatedAt, Duration.Day);
+const timeFromUpdate = getRelativeTime(updatedAt, Duration.Day, currentLang);
 const updateDate = new Date(updatedAt).toLocaleDateString("en-GB", {
   timeZone: "Europe/Warsaw",
 });
@@ -122,12 +124,12 @@ const icon = metadata?.logoUrl ? metadata.logoUrl : defaultIcon;
   </div>
   <div class="flex items-end justify-between" id="updateDate">
     <p class="cursor-help text-sm" title={updateDate}>
-      Ostatnia akutalizacja: <i>{timeFromUpdate}</i>
+      {translate("project.lastUpdate")}: <i>{timeFromUpdate}</i>
     </p>
     <a
       href={projectUrl}
       class="border-1 flex justify-center gap-0.5 rounded-md bg-gradient-to-br from-blue-400 to-sky-400 px-3 py-2 font-bold text-white"
-      >Więcej <Image
+      >{translate("project.more")} <Image
         src={icon_arrow_right}
         width={20}
         alt={"strzałka skierowana w prawo"}

diff --git a/src/components/filters/SearchFilter.astro b/src/components/filters/SearchFilter.astro
@@ -3,12 +3,12 @@ import { getLangFromUrl, useTranslations } from "@i18n/utils";
 const translate = useTranslations(getLangFromUrl(Astro.url));
 ---
 <label class="grid gap-y-1">
-  <span class="font-semibold dark:text-white">{translate("filters.byName")}</span>
+  <span class="font-semibold dark:text-white">{translate("filters.search")}</span>
   <input
     type="search"
     id="search"
     name="search"
-    placeholder="Szukaj..."
+    placeholder={translate("filters.searchPlaceholder")}
     class="rounded-lg border-2 border-zinc-200 bg-gray-100 p-3 dark:border-zinc-500 dark:bg-neutral-600 dark:text-white"
   />
 </label>
diff --git a/src/components/filters/Sort.astro b/src/components/filters/Sort.astro
@@ -1,15 +1,19 @@
+---
+import { getLangFromUrl, useTranslations } from "@i18n/utils";
+const translate = useTranslations(getLangFromUrl(Astro.url));
+---
 <label class="grid gap-y-1 text-black dark:text-white">
-  <span class="font-semibold">Sortuj</span>
+  <span class="font-semibold">{translate("filters.sort")}</span>
   <select
     name="sort"
     id="sort"
     class="rounded-lg border-2 p-3 dark:border-zinc-500 dark:bg-neutral-600 dark:text-white"
   >
-    <option value="alpha_ascend">Nazwa: od A do Z</option>
-    <option value="alpha_descend">Nazwa: od Z do A</option>
-    <option value="star_ascend">Gwiazdki: rosnąco</option>
-    <option value="star_descend">Gwiazdki: malejąco</option>
-    <option value="date_ascend">Data: od najwcześniejszych</option>
-    <option value="date_descend">Data: od najpóźniejszych</option>
+    <option value="alpha_ascend">{translate("sort.AlphaAsc")}</option>
+    <option value="alpha_descend">{translate("sort.AlphaDesc")}</option>
+    <option value="star_ascend">{translate("sort.StarsAsc")}</option>
+    <option value="star_descend">{translate("sort.StarsDesc")}</option>
+    <option value="date_ascend">{translate("sort.DateAsc")}</option>
+    <option value="date_descend">{translate("sort.DateDesc")}</option>
   </select>
 </label>
diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts
@@ -7,24 +7,44 @@ export const defaultLang = "pl";
 
 export const ui: any = {
     pl: {
+        "page.lastUpdate": "Dane aktualizowane ostatni raz",
         "header.title": "Aplikacje stworzone przez członków AKAI.",
         "projects.total": "Wyświetlono",
         "projects.valid": "Aktualne",
         "projects.archived": "Zarchiwizowane",
         "projects.noun": "projekty",
+        "project.lastUpdate": "Ostatnia aktualizacja",
+        "project.more": "Więcej",
         "filters.sort": "Sortuj",
-        "filters.byName": "Szukaj",
+        "sort.AlphaAsc": "Nazwa: od A do Z",
+        "sort.AlphaDesc": "Nazwa: od Z do A",
+        "sort.StarsAsc": "Gwiazdki: Rosnąco",
+        "sort.StarsDesc": "Gwiazdki: Malejąco",
+        "sort.DateAsc": "Data: od najwcześniejszych",
+        "sort.DateDesc": "Data: od najpóźniejszych",
+        "filters.search": "Szukaj",
+        "filters.searchPlaceholder": "Nazwa projektu...",
         "filters.Langs": "Języki programowania",
         "filters.clear": "Wyczyść"
     },
     en: {
+        "page.lastUpdate": "Time of the last page update:",
         "header.title": "Applications created by AKAI members.",
         "projects.total": "Displayed",
         "projects.valid": "Valid",
         "projects.archived": "Archived",
         "projects.noun": "projects",
+        "project.lastUpdate": "Last update",
+        "project.more": "More",
         "filters.sort": "Sort",
-        "filters.byName": "Search",
+        "sort.AlphaAsc": "Name: from A to Z",
+        "sort.AlphaDesc": "Name: from Z to A",
+        "sort.StarsAsc": "Stars: Ascending",
+        "sort.StarsDesc": "Stars: Descending",
+        "sort.DateAsc": "Date: from earliest",
+        "sort.DateDesc": "Date: from latest",
+        "filters.search": "Search",
+        "filters.searchPlaceholder": "Project name...",
         "filters.Langs": "Programming languages",
         "filters.clear": "Clear"
     }

diff --git a/src/layouts/HomePageLayout.astro b/src/layouts/HomePageLayout.astro
@@ -1,4 +1,6 @@
 ---
+import { getLangFromUrl, useTranslations } from "@i18n/utils";
+const translate = useTranslations(getLangFromUrl(Astro.url));
 const current_time = new Date().toLocaleString("en-GB", {
   timeZone: "Europe/Warsaw",
 });
@@ -14,7 +16,7 @@ const current_time = new Date().toLocaleString("en-GB", {
 </section>
 <footer class="p-2 text-center text-sm">
   <p>
-    Dane aktualizowane ostatni raz: <span class="font-mono">{current_time}</span
+    {translate("page.lastUpdate")}: <span class="font-mono">{current_time}</span
     >
   </p>
 </footer>
diff --git a/src/utilities/getRelativeTime.ts b/src/utilities/getRelativeTime.ts
@@ -1,13 +1,13 @@
 import { Duration } from "./Duration.enum";
 
-export const relativeTimeFormatter = new Intl.RelativeTimeFormat("pl", {
-  numeric: "auto",
-});
-
 export function getRelativeTime(
   date: string | number | Date,
   smallestDuration: Duration = Duration.Second,
+  lang: string
 ) {
+  const relativeTimeFormatter = new Intl.RelativeTimeFormat(lang, {
+    numeric: "auto",
+  });
   const timeDifferenceInMs = new Date().getTime() - new Date(date).getTime();
   const { unit, time } = getTimeUnit(timeDifferenceInMs, smallestDuration);
   const formatedTime = relativeTimeFormatter.format(-time, unit);