Translate main pages

frontend/src/components/Admonition.tsx

@@ -1,4 +1,6 @@
 import React from "react";
+import { useRouter } from 'next/router';
+const translateText = require('src/components/translates/Translate');
 
 type AdType = {
   ifmClass: string;
@@ -110,17 +112,20 @@ type Props = {
 const Admonition = ({ type, title, children }: Props) => {
   const adtype = types[type];
 
+  const router = useRouter();
+  const locale = router?.locale || "en"; // Use optional chaining to prevent accessing properties on null
+
   return (
     <div className={`admonition admonition-${type} alert alert--success`}>
       <div className="admonition-heading">
         <h5>
           <span className="admonition-icon">{adtype.svg}</span>
-          {adtype.keyword} {title}
+          {translateText(locale, "Docs", adtype.keyword)} : {title}
         </h5>
       </div>
       <div className="admonition-content">{children}</div>
     </div>
   );
 };
 
-export default Admonition;
+export default Admonition;

frontend/src/components/Search.tsx

@@ -6,6 +6,9 @@ import { Hit, SearchResults } from "src/types/_generated_SearchResult";
 
 const noExtension = (path: string) => path.replace(".md", "");
 
+import { useRouter } from 'next/router';
+const translateText = require('src/components/translates/Translate');
+
 const Search: FC = () => {
   const searchRef = useRef<HTMLDivElement>(null);
   const [query, setQuery] = useState("");
@@ -40,6 +43,9 @@ const Search: FC = () => {
     setActive(true);
     window.addEventListener("click", onClick);
   }, [onClick]);
+
+  const router = useRouter();
+  const locale = router?.locale || "en";
 
   return (
     <>
@@ -48,7 +54,7 @@ const Search: FC = () => {
           className="search"
           onChange={onChange}
           onFocus={onFocus}
-          placeholder="Search..."
+          placeholder={translateText(locale, "Docs", "Search...")}
           type="text"
           value={query}
         />

frontend/src/components/forum/BackLink.tsx

@@ -4,16 +4,21 @@ import { Link } from "@chakra-ui/layout";
 import NextLink from "next/link";
 import { FC } from "react";
 
+const translateText = require('src/components/translates/Translate');
+import { useRouter } from 'next/router';
+
 type Props = {
   to: string;
 };
 
 const BackLink: FC<Props> = ({ to }) => {
+  const router = useRouter();
+  const locale = router.locale || 'en';
   return (
     <NextLink href={to}>
       <Link className="black-80 hover-blue">
         <Button leftIcon={<ArrowBackIcon />} variant="outline">
-          Back
+        {translateText(locale, "General", "Back")}
         </Button>
       </Link>
     </NextLink>

frontend/src/components/listing/ServerRow.tsx

@@ -17,23 +17,31 @@ import { useIsAdmin } from "src/auth/hooks";
 import { useDeleteServer } from "src/components/listing/hooks";
 import { Essential } from "src/types/_generated_Server";
 
+const translateText = require('src/components/translates/Translate');
+import { useRouter } from 'next/router';
+
 type CopyBadgeProps = { text: string };
 const CopyBadge: FC<CopyBadgeProps> = ({ text }) => {
   const { onCopy, hasCopied } = useClipboard(text);
+
+  const router = useRouter();
+  const locale = router.locale || 'en';
+
   return (
-    <HStack>
-      <Text fontSize="xl" fontWeight="bold" marginTop="0">
-        {text}
-      </Text>
-      <Button
-        size="xs"
-        onClick={onCopy}
-        style={hasCopied ? { backgroundColor: "#81C784", color: "white" } : {}}
-      >
-        {hasCopied ? "COPIED" : "COPY"}
-      </Button>
-    </HStack>
-  );
+  <HStack>
+    <Text fontSize="xl" fontWeight="bold" marginTop="0">
+      {text}
+    </Text>
+    <Button
+      size="xs"
+      onClick={onCopy}
+      style={hasCopied ? { backgroundColor: "#81C784", color: "white" } : {}}
+    >
+      {hasCopied ? translateText(locale, "Servers", "COPIED") : translateText(locale, "Servers", "COPY")}
+    </Button>
+  </HStack>
+);
+
 };
 
 type ServerRowProps = { server: Essential };
@@ -45,6 +53,9 @@ const ServerRow: FC<ServerRowProps & ChakraProps> = ({ server, sx }) => {
   );
   const admin = useIsAdmin();
 
+  const router = useRouter();
+  const locale = router.locale || 'en';
+
   return (
     <Box sx={sx}>
       <Box>
@@ -66,7 +77,7 @@ const ServerRow: FC<ServerRowProps & ChakraProps> = ({ server, sx }) => {
               <Image
                 src="https://assets.open.mp/assets/images/assets/partners.png"
                 alt="partner server"
-                title="Has partnership!"
+                title={translateText(locale, "Servers", "Has partnership!")}
                 maxWidth={7}
                 maxHeight={7}
                 width={7}
@@ -78,7 +89,7 @@ const ServerRow: FC<ServerRowProps & ChakraProps> = ({ server, sx }) => {
               <Image
                 src="https://assets.open.mp/assets/images/assets/logo-light-trans.svg"
                 alt="open.mp server"
-                title="open.mp server"
+                title={translateText(locale, "Servers", "open.mp server")}
                 maxWidth={7}
                 maxHeight={7}
                 width={7}
@@ -114,7 +125,7 @@ const ServerRow: FC<ServerRowProps & ChakraProps> = ({ server, sx }) => {
               >
                 {server.pc}/{server.pm}
               </Text>
-              <Text style={{ marginTop: "0" }}>players</Text>
+              <Text style={{ marginTop: "0" }}>{translateText(locale, "Servers", "players")}</Text>
             </Flex>
 
             <Box display={admin ? "block" : "none"}>

frontend/src/components/site/Announcement.tsx

@@ -1,7 +1,14 @@
 import { Box, Heading, Text, useColorModeValue } from "@chakra-ui/react";
 import React, { FC } from "react";
 
+const translateText = require('src/components/translates/Translate');
+import { useRouter } from 'next/router';
+
 const Announcement: FC = () => {
+
+  const router = useRouter();
+  const locale = router.locale || 'en';
+
   return (
     <Box maxWidth="48em" mx="auto" px="0.5em">
       <Box
@@ -12,21 +19,28 @@ const Announcement: FC = () => {
         borderRadius="0.5em"
         backgroundColor={useColorModeValue("blue.50", "gray.800")}
       >
-        <Heading m="0" fontSize="1.5em">
-          open.mp launcher is out now and open source!
-        </Heading>
-
-        <Text>
-          open.mp released its own launcher to browse servers using a reliable
-          internet list and join your favorite servers!{" "}
-          <a href="https://github.com/openmultiplayer/launcher">
-            check out our github repository
-          </a>{" "}
-          <br />
-          <a href="https://github.com/openmultiplayer/launcher/releases/latest">
-            Download it from here.
-          </a>{" "}
-        </Text>
+
+
+      <Heading m="0" fontSize="1.5em">
+        {translateText(locale, "Announcements", "open.mp launcher is out now and open source!")}
+      </Heading>
+
+      <Text>
+      {translateText(locale, "Announcements", `open.mp released its own launcher to browse servers using a reliable internet list and join your favorite servers!`)}
+      {' '}
+      <a href="https://github.com/openmultiplayer/launcher">
+        {translateText(locale, "Announcements", "check out our github repository")}
+      </a>
+      {' '}
+      <br />
+      <a href="https://github.com/openmultiplayer/launcher/releases/latest">
+        {translateText(locale, "Announcements", "Download it from here.")}
+      </a>
+      {' '}
+    </Text>
+
+
+
       </Box>
     </Box>
   );

frontend/src/components/site/Footer.tsx

@@ -1,6 +1,10 @@
 import { Box, useColorModeValue } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 
+const translateText = require('src/components/translates/Translate');
+import { useRouter } from 'next/router';
+
+
 interface FooterItem {
   url?: string;
   imageUrl?: string;
@@ -81,6 +85,9 @@ const Footer: React.FC = () => {
     setFormattedItems(updatedItems);
   }, []);
 
+  const router = useRouter();
+  const locale = router.locale || 'en';
+
   return (
     <Box as="footer" bgColor={useColorModeValue("blackAlpha.800", "gray.900")} display="flex" justifyContent="space-between" padding="30px">
       <div className="near-white" style={{ display: "flex", flexDirection: isMobile ? "column" : "row", justifyContent: isMobile ? "center" : "space-between", alignItems: isMobile ? "center" : "center", flex: 1 }}>
@@ -97,8 +104,10 @@ const Footer: React.FC = () => {
               }}
             />
             <FooterList
-              heading="About us"
-              items={[{ text: "A multiplayer mod for Grand Theft Auto: San Andreas that is <b>fully backwards compatible</b> with <b>San Andreas Multiplayer</b>." }]}
+              heading={translateText(locale, "Footer", "About us")}
+              items={[
+                { text: translateText(locale, "Footer", "A multiplayer mod for Grand Theft Auto: San Andreas that is <b>fully backwards compatible</b> with <b>San Andreas Multiplayer</b>.") }
+              ]}
               alignment="center"
               maxWidth={'390px'} // Max width conditionally applied
               style={{
@@ -112,9 +121,10 @@ const Footer: React.FC = () => {
         {!isMobile && (
           <div style={{ display: 'flex', alignItems: 'center' }}>
             <FooterList
-              heading="About us"
-              items={[{ text: "A multiplayer mod for Grand Theft Auto: San Andreas that is <b>fully backwards compatible</b> with <b>San Andreas Multiplayer</b>." }]}
-              alignment="center"
+              heading={translateText(locale, "Footer", "About us")}
+              items={[
+                { text: translateText(locale, "Footer", "A multiplayer mod for Grand Theft Auto: San Andreas that is <b>fully backwards compatible</b> with <b>San Andreas Multiplayer</b>.") }
+              ]}              alignment="center"
               maxWidth={'390px'} // Max width conditionally applied
               style={{
                 whiteSpace: 'normal',
@@ -142,12 +152,12 @@ const Footer: React.FC = () => {
         )}
       <div className="near-white" style={{ textAlign: "right", flex: 1 }}>
         <FooterList
-          heading="Community"
+          heading={translateText(locale, "Footer", "Community")}
           items={formattedItems}
           alignment="right"
         />
         <FooterList
-          heading="More"
+          heading={translateText(locale, "Footer", "More")}
           items={[
             { url: "/blog", imageUrl: "/images/assets/blog.svg", text: "Blog" },
             { url: "https://github.com/openmultiplayer/", imageUrl: "/images/assets/github.svg", text: "GitHub" },

frontend/src/components/site/LanguageSelect.tsx

@@ -9,6 +9,8 @@ interface Props {
   title: string;
 }
 
+const translateText = require('src/components/translates/Translate');
+
 const LanguageSelect = forwardRef(({ title }: Props, ref) => {
   const { locale, locales, pathname, asPath, query, push } = useRouter();
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -81,7 +83,7 @@ const LanguageSelect = forwardRef(({ title }: Props, ref) => {
       <Modal isOpen={isOpen} onClose={onClose} size={modalSize}>
         <ModalOverlay />
         <ModalContent>
-          <ModalHeader>Change language from {getLanguageName(locale)}</ModalHeader>
+          <ModalHeader>{translateText(locale, "General", `Change language from ${getLanguageName(locale)}`)}</ModalHeader>
           <ModalCloseButton />
           <ModalBody>
             {/* Conditionally apply flexbox layout for mobile screens */}

frontend/src/components/site/NavMenu.tsx

@@ -11,6 +11,8 @@ import { useRouter } from "next/router";
 import NextLink from "next/link";
 import LanguageSelect from "./LanguageSelect";
 
+const translateText = require('src/components/translates/Translate');
+
 export type NavItem = {
   name: string;
   path: string;
@@ -124,14 +126,20 @@ const NavMenu: FC<Props> = ({ items, route }) => {
 
 type NavLinkProps = { item: NavItem; current: boolean };
 
-const NavLink: FC<NavLinkProps> = ({ item, current }) => (
-  <NextLink href={item.path} passHref>
-    <Link _hover={undefined} _focus={{ outline: 'none', border: 'none' }}>
-      <Button as="div" variant={current ? "outline" : "ghost"} size="sm">
-        {item.name}
-      </Button>
-    </Link>
-  </NextLink>
-);
+const NavLink: FC<NavLinkProps> = ({ item, current }) => {
+  const router = useRouter();
+  const locale = router.locale || 'en'; // Define locale using useRouter
+
+  return (
+    <NextLink href={item.path} passHref>
+      <Link _hover={undefined} _focus={{ outline: 'none', border: 'none' }}>
+        <Button as="div" variant={current ? 'outline' : 'ghost'} size="sm">
+          {/* Use translateText function to translate text */}
+          {translateText(locale, 'NavBar', item.name)}
+        </Button>
+      </Link>
+    </NextLink>
+  );
+};
 
 export default NavMenu;

frontend/src/components/translates/Translate.tsx

@@ -0,0 +1,28 @@
+const translateText = (locale, group, key, placeholders) => {
+  if (locale === 'en' && !placeholders) {
+    return key;
+  }
+
+  const plainText = key.replace(/<[^>]+>/g, '');
+
+  let translation = {};
+  try {
+    translation = require(`./translations/${locale}.json`);
+  } catch (error) {
+    return translateText('en', group, key, placeholders);
+  }
+
+  const translatedText = translation[group]?.[plainText] || plainText;
+
+  // Replace placeholders with corresponding params if placeholders are provided
+  let replacedText = translatedText;
+  if (placeholders && typeof placeholders === 'object') {
+    Object.entries(placeholders).forEach(([placeholder, value]) => {
+      replacedText = replacedText.replace(new RegExp(`{${placeholder}}`, 'g'), value);
+    });
+  }
+
+  return replacedText;
+};
+
+module.exports = translateText;