Translations

Author: stever

apps/web/src/components/ActivityFeed.jsx

@@ -11,7 +11,7 @@ import { formatDistanceToNow } from "date-fns";
 import { fetchActivityFeed } from "../redux/social/actions";
 import { getLanguageLabel } from "../lib/lang";
 import ProjectThumbnail from "./ProjectThumbnail";
-import { useTranslation } from "@zxplay/i18n";
+import { useTranslation, useDateFnsLocale } from "@zxplay/i18n";
 import { sep } from "../constants";
 
 function getLanguageColor(lang) {
@@ -29,6 +29,7 @@ function getLanguageColor(lang) {
 
 export default function ActivityFeed() {
   const { t } = useTranslation();
+  const locale = useDateFnsLocale();
   const dispatch = useDispatch();
 
   const currentUserId = useSelector((state) => state?.identity.userId);
@@ -139,7 +140,7 @@ export default function ActivityFeed() {
                                 {t("feed.updated")}{" "}
                                 {formatDistanceToNow(
                                   new Date(project.updated_at),
-                                  { addSuffix: true }
+                                  { addSuffix: true, locale }
                                 )}
                               </div>
                             </div>

apps/web/src/components/FollowList.jsx

@@ -15,7 +15,7 @@ import { sep } from "../constants";
 import { formatDistanceToNow } from "date-fns";
 import { followUser, unfollowUser } from "../redux/social/actions";
 import { generateRetroAvatar } from "../lib/avatar";
-import { useTranslation } from "@zxplay/i18n";
+import { useTranslation, useDateFnsLocale } from "@zxplay/i18n";
 
 const GET_USER_WITH_FOLLOWS = gql`
   query GetUserWithFollows(
@@ -88,6 +88,7 @@ const CHECK_FOLLOWING_STATUS = gql`
 
 function UserCard({ user, isFollowing, onFollowToggle, currentUserId }) {
   const { t } = useTranslation();
+  const locale = useDateFnsLocale();
   const isOwnProfile = currentUserId === user.user_id;
   // Fall back to the user id if a slug is missing; /u/<uuid> canonicalises to the slug.
   const profileUrl = `/u/${user.slug || user.user_id}`;
@@ -138,6 +139,7 @@ function UserCard({ user, isFollowing, onFollowToggle, currentUserId }) {
             {t("follow.joined", {
               when: formatDistanceToNow(new Date(user.created_at), {
                 addSuffix: true,
+                locale,
               }),
             })}
           </span>

apps/web/src/components/ProjectList.jsx

@@ -11,10 +11,11 @@ import {
 } from "../redux/projectList/actions";
 import { Dropdown } from "primereact/dropdown";
 import { getLanguageLabel } from "../lib/lang";
-import { useTranslation } from "@zxplay/i18n";
+import { useTranslation, useDateFnsLocale } from "@zxplay/i18n";
 
 export default function ProjectList() {
   const { t } = useTranslation();
+  const locale = useDateFnsLocale();
   const dispatch = useDispatch();
 
   const projects = useSelector((state) => state?.projectList.projectList);
@@ -64,12 +65,12 @@ export default function ProjectList() {
 
   function formatCreated(data) {
     const date = new Date(data["created_at"]);
-    return formatDistance(date, now, { addSuffix: true });
+    return formatDistance(date, now, { addSuffix: true, locale });
   }
 
   function formatUpdated(data) {
     const date = new Date(data["updated_at"]);
-    return formatDistance(date, now, { addSuffix: true });
+    return formatDistance(date, now, { addSuffix: true, locale });
   }
 
   const onPage = (event) => {

apps/web/src/components/PublicProfiles.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { Titled } from "react-titled";
-import { useTranslation } from "@zxplay/i18n";
+import { useTranslation, useDateFnsLocale } from "@zxplay/i18n";
 import { Card } from "primereact/card";
 import { Avatar } from "primereact/avatar";
 import { Dropdown } from "primereact/dropdown";
@@ -77,6 +77,8 @@ const SORT_OPTIONS = [
 ];
 
 function ProfileCard({ user }) {
+  const { t } = useTranslation();
+  const locale = useDateFnsLocale();
   const projectCount = user.projects_aggregate?.aggregate?.count || 0;
   const followerCount = user.followers_aggregate?.aggregate?.count || 0;
   const followingCount = user.following_aggregate?.aggregate?.count || 0;
@@ -108,16 +110,18 @@ function ProfileCard({ user }) {
               <p className="text-400 m-0 mt-2 text-sm">{user.bio}</p>
             )}
             <div className="text-400 text-sm mt-2">
-              <span>{projectCount} public projects</span>
+              <span>{t("profiles.projectsCount", { count: projectCount })}</span>
               <span className="mx-2">·</span>
-              <span>{followerCount} followers</span>
+              <span>{t("profiles.followersCount", { count: followerCount })}</span>
               <span className="mx-2">·</span>
-              <span>{followingCount} following</span>
+              <span>{t("profiles.followingCount", { count: followingCount })}</span>
               <span className="mx-2">·</span>
               <span>
-                Joined{" "}
-                {formatDistanceToNow(new Date(user.created_at), {
-                  addSuffix: true,
+                {t("follow.joined", {
+                  when: formatDistanceToNow(new Date(user.created_at), {
+                    addSuffix: true,
+                    locale,
+                  }),
                 })}
               </span>
             </div>

apps/web/src/components/PublicUserProfile.jsx

@@ -40,7 +40,7 @@ import ProjectThumbnail from "./ProjectThumbnail";
 import { generateRetroAvatar } from "../lib/avatar";
 import { generateRetroSpriteAvatar } from "../lib/retroSpriteAvatar";
 import AvatarSelector from "./AvatarSelector";
-import { useTranslation } from "@zxplay/i18n";
+import { useTranslation, useDateFnsLocale } from "@zxplay/i18n";
 
 const UPDATE_PROJECT_ORDER = gql`
   mutation UpdateProjectOrder($projectId: uuid!, $displayOrder: Int!) {
@@ -149,6 +149,7 @@ const GET_USER_BY_ID = gql`
 // Sortable project card component for drag and drop
 function SortableProjectCard({ project, projectUrl, isDragging }) {
   const { t } = useTranslation();
+  const locale = useDateFnsLocale();
   const navigate = useNavigate();
   const {
     attributes,
@@ -230,9 +231,10 @@ function SortableProjectCard({ project, projectUrl, isDragging }) {
           />
 
           <div className="mt-auto text-400 text-sm relative z-1">
-            Updated{" "}
+            {t("feed.updated")}{" "}
             {formatDistanceToNow(new Date(project.updated_at), {
               addSuffix: true,
+              locale,
             })}
           </div>
         </div>
@@ -256,6 +258,7 @@ function getLanguageColor(lang) {
 
 export default function PublicUserProfile() {
   const { t } = useTranslation();
+  const locale = useDateFnsLocale();
   const { id } = useParams(); // This could be either slug or UUID
   const navigate = useNavigate();
   const dispatch = useDispatch();
@@ -539,6 +542,7 @@ export default function PublicUserProfile() {
   const displayName = user.greeting_name || t("profile.defaultName");
   const memberSince = formatDistanceToNow(new Date(user.created_at), {
     addSuffix: true,
+    locale,
   });
 
   return (
@@ -663,11 +667,15 @@ export default function PublicUserProfile() {
           <Card
             title={
               <div className="flex align-items-center justify-content-between">
-                <span>Public Projects ({projects?.length || 0})</span>
+                <span>
+                  {t("profile.publicProjects", {
+                    count: projects?.length || 0,
+                  })}
+                </span>
                 {isOwnProfile && isSaving && (
                   <Tag
                     severity="info"
-                    value="Saving order..."
+                    value={t("profile.savingOrder")}
                     icon="pi pi-spin pi-spinner"
                   />
                 )}
@@ -742,10 +750,10 @@ export default function PublicUserProfile() {
                               />
 
                               <div className="mt-auto text-400 text-sm relative z-1">
-                                Updated{" "}
+                                {t("feed.updated")}{" "}
                                 {formatDistanceToNow(
                                   new Date(project.updated_at),
-                                  { addSuffix: true }
+                                  { addSuffix: true, locale }
                                 )}
                               </div>
                             </div>
@@ -761,9 +769,7 @@ export default function PublicUserProfile() {
                 <i className="pi pi-inbox text-4xl text-300 mb-3" />
                 <p className="text-500">{t("profile.noProjects")}</p>
                 {isOwnProfile && (
-                  <p className="text-sm">
-                    Make your projects public to display them here
-                  </p>
+                  <p className="text-sm">{t("profile.makePublicHint")}</p>
                 )}
               </div>
             )}

apps/web/src/locales/bg/web.json

@@ -36,7 +36,10 @@
   },
   "profiles": {
     "title": "Публични профили",
-    "none": "Все още няма публични профили"
+    "none": "Все още няма публични профили",
+    "projectsCount": "{{count}} публични проекта",
+    "followersCount": "{{count}} последователи",
+    "followingCount": "{{count}} следвани"
   },
   "follow": {
     "networkTitle": "Мрежа на {{name}}",
@@ -58,7 +61,10 @@
     "dragToReorder": "Плъзнете за пренареждане",
     "defaultName": "Потребител",
     "private": "Този профил е частен",
-    "privateOwn": "Профилът ви в момента е частен"
+    "privateOwn": "Профилът ви в момента е частен",
+    "publicProjects": "Публични проекти ({{count}})",
+    "savingOrder": "Запазване на реда...",
+    "makePublicHint": "Направете проектите си публични, за да се показват тук"
   },
   "about": {
     "createProjects": "Създаване на проекти",

apps/web/src/locales/cs/web.json

@@ -36,7 +36,10 @@
   },
   "profiles": {
     "title": "Veřejné profily",
-    "none": "Zatím žádné veřejné profily"
+    "none": "Zatím žádné veřejné profily",
+    "projectsCount": "{{count}} veřejných projektů",
+    "followersCount": "{{count}} sledujících",
+    "followingCount": "{{count}} sledováno"
   },
   "follow": {
     "networkTitle": "Síť uživatele {{name}}",
@@ -58,7 +61,10 @@
     "dragToReorder": "Přetažením změníte pořadí",
     "defaultName": "Uživatel",
     "private": "Tento profil je soukromý",
-    "privateOwn": "Váš profil je momentálně soukromý"
+    "privateOwn": "Váš profil je momentálně soukromý",
+    "publicProjects": "Veřejné projekty ({{count}})",
+    "savingOrder": "Ukládání pořadí...",
+    "makePublicHint": "Zveřejněte své projekty, aby se zde zobrazily"
   },
   "about": {
     "createProjects": "Vytváření projektů",

apps/web/src/locales/en/web.json

@@ -36,7 +36,10 @@
   },
   "profiles": {
     "title": "Public Profiles",
-    "none": "No public profiles yet"
+    "none": "No public profiles yet",
+    "projectsCount": "{{count}} public projects",
+    "followersCount": "{{count}} followers",
+    "followingCount": "{{count}} following"
   },
   "follow": {
     "networkTitle": "{{name}}'s Network",
@@ -58,7 +61,10 @@
     "dragToReorder": "Drag to reorder",
     "defaultName": "User",
     "private": "This profile is private",
-    "privateOwn": "Your profile is currently private"
+    "privateOwn": "Your profile is currently private",
+    "publicProjects": "Public Projects ({{count}})",
+    "savingOrder": "Saving order...",
+    "makePublicHint": "Make your projects public to display them here"
   },
   "about": {
     "createProjects": "Create Projects",

apps/web/src/locales/es/web.json

@@ -36,7 +36,10 @@
   },
   "profiles": {
     "title": "Perfiles públicos",
-    "none": "Aún no hay perfiles públicos"
+    "none": "Aún no hay perfiles públicos",
+    "projectsCount": "{{count}} proyectos públicos",
+    "followersCount": "{{count}} seguidores",
+    "followingCount": "{{count}} siguiendo"
   },
   "follow": {
     "networkTitle": "Red de {{name}}",
@@ -58,7 +61,10 @@
     "dragToReorder": "Arrastra para reordenar",
     "defaultName": "Usuario",
     "private": "Este perfil es privado",
-    "privateOwn": "Tu perfil es actualmente privado"
+    "privateOwn": "Tu perfil es actualmente privado",
+    "publicProjects": "Proyectos públicos ({{count}})",
+    "savingOrder": "Guardando orden...",
+    "makePublicHint": "Haz públicos tus proyectos para mostrarlos aquí"
   },
   "about": {
     "createProjects": "Crear proyectos",

apps/web/src/locales/pl/web.json

@@ -36,7 +36,10 @@
   },
   "profiles": {
     "title": "Profile publiczne",
-    "none": "Brak publicznych profili"
+    "none": "Brak publicznych profili",
+    "projectsCount": "{{count}} publicznych projektów",
+    "followersCount": "{{count}} obserwujących",
+    "followingCount": "{{count}} obserwowanych"
   },
   "follow": {
     "networkTitle": "Sieć użytkownika {{name}}",
@@ -58,7 +61,10 @@
     "dragToReorder": "Przeciągnij, aby zmienić kolejność",
     "defaultName": "Użytkownik",
     "private": "Ten profil jest prywatny",
-    "privateOwn": "Twój profil jest obecnie prywatny"
+    "privateOwn": "Twój profil jest obecnie prywatny",
+    "publicProjects": "Projekty publiczne ({{count}})",
+    "savingOrder": "Zapisywanie kolejności...",
+    "makePublicHint": "Ustaw projekty jako publiczne, aby wyświetlić je tutaj"
   },
   "about": {
     "createProjects": "Twórz projekty",