Translation improvements

i18next-parser.config.mjs

@@ -0,0 +1,108 @@
+// i18next-parser.config.js
+
+export default {
+  contextSeparator: '_',
+  // Key separator used in your translation keys
+
+  createOldCatalogs: true,
+  // Save the \_old files
+
+  defaultNamespace: 'translation',
+  // Default namespace used in your i18next config
+
+  defaultValue: (locale, namespace, key, value) => value ? value : key,
+  // Default value to give to keys with no value
+  // You may also specify a function accepting the locale, namespace, key, and value as arguments
+
+  indentation: 4,
+  // Indentation of the catalog files
+
+  keepRemoved: false,
+  // Keep keys from the catalog that are no longer in code
+
+  keySeparator: false,
+  // Key separator used in your translation keys
+  // If you want to use plain english keys, separators such as `.` and `:` will conflict. You might want to set `keySeparator: false` and `namespaceSeparator: false`. That way, `t('Status: Loading...')` will not think that there are a namespace and three separator dots for instance.
+
+  // see below for more details
+  lexers: {
+    hbs: ['HandlebarsLexer'],
+    handlebars: ['HandlebarsLexer'],
+
+    htm: ['HTMLLexer'],
+    html: ['HTMLLexer'],
+
+    mjs: ['JavascriptLexer'],
+    js: ['JsxLexer'], // if you're writing jsx inside .js files, change this to JsxLexer
+    ts: ['JavascriptLexer'],
+    jsx: ['JsxLexer'],
+    tsx: ['JsxLexer'],
+
+    default: ['JavascriptLexer'],
+  },
+
+  lineEnding: 'auto',
+  // Control the line ending. See options at https://github.com/ryanve/eol
+
+  locales: ['de', 'en', 'es', 'fr', 'it', 'ja', 'pl', 'ru'],
+  // An array of the locales in your applications
+
+  namespaceSeparator: false,
+  // Namespace separator used in your translation keys
+  // If you want to use plain english keys, separators such as `.` and `:` will conflict. You might want to set `keySeparator: false` and `namespaceSeparator: false`. That way, `t('Status: Loading...')` will not think that there are a namespace and three separator dots for instance.
+
+  output: 'src/translations/$LOCALE/$NAMESPACE.json',
+  // Supports $LOCALE and $NAMESPACE injection
+  // Supports JSON (.json) and YAML (.yml) file formats
+  // Where to write the locale files relative to process.cwd()
+
+  pluralSeparator: '_',
+  // Plural separator used in your translation keys
+  // If you want to use plain english keys, separators such as `_` might conflict. You might want to set `pluralSeparator` to a different string that does not occur in your keys.
+
+  input: ['src/App.js', 'src/pages/**/*.{js,jsx}', 'src/components/**/*.{js,jsx}'],
+  // An array of globs that describe where to look for source files
+  // relative to the location of the configuration file
+
+  sort: false,
+  // Whether or not to sort the catalog. Can also be a [compareFunction](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#parameters)
+
+  verbose: false,
+  // Display info about the parsing including some stats
+
+  failOnWarnings: false,
+  // Exit with an exit code of 1 on warnings
+
+  failOnUpdate: false,
+  // Exit with an exit code of 1 when translations are updated (for CI purpose)
+
+  customValueTemplate: null,
+  // If you wish to customize the value output the value as an object, you can set your own format.
+  // ${defaultValue} is the default value you set in your translation function.
+  // Any other custom property will be automatically extracted.
+  //
+  // Example:
+  // {
+  //   message: "${defaultValue}",
+  //   description: "${maxLength}", // t('my-key', {maxLength: 150})
+  // }
+
+  resetDefaultValueLocale: null,
+  // The locale to compare with default values to determine whether a default value has been changed.
+  // If this is set and a default value differs from a translation in the specified locale, all entries
+  // for that key across locales are reset to the default value, and existing translations are moved to
+  // the `_old` file.
+
+  i18nextOptions: null,
+  // If you wish to customize options in internally used i18next instance, you can define an object with any
+  // configuration property supported by i18next (https://www.i18next.com/overview/configuration-options).
+  // { compatibilityJSON: 'v3' } can be used to generate v3 compatible plurals.
+
+  yamlOptions: null,
+  // If you wish to customize options for yaml output, you can define an object here.
+  // Configuration options are here (https://github.com/nodeca/js-yaml#dump-object---options-).
+  // Example:
+  // {
+  //   lineWidth: -1,
+  // }
+}

public/index.html

@@ -13,20 +13,22 @@
   <meta name="theme-color" content="#ffffff">
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
   <meta name="theme-color" content="#000000" />
-  <meta name="description" content="Escape from Tarkov - Ammo visualization, loot tiers, profit calculators, community driven API, and much more! Enjoy our best in class EFT toolkit." />
+
+  <title>Tarkov.dev</title>
+  <meta name="description" content="Checkout all information for items, crafts, barters, maps, loot tiers, hideout profits, trader details, a free API, and more with tarkov.dev! A free, community made, and open source ecosystem of Escape from Tarkov tools and guides." />
 
   <!-- Open Graph / Facebook -->
   <meta property="og:type" content="website">
   <meta property="og:url" content="https://tarkov.dev/">
   <meta property="og:title" content="Tarkov.dev">
-  <meta property="og:description" content="Escape from Tarkov - Ammo visualization, loot tiers, profit calculators, community driven API, and much more! Enjoy our best in class EFT toolkit.">
+  <meta property="og:description" content="Checkout all information for items, crafts, barters, maps, loot tiers, hideout profits, trader details, a free API, and more with tarkov.dev! A free, community made, and open source ecosystem of Escape from Tarkov tools and guides.">
   <meta property="og:image" content="">
 
   <!-- Twitter -->
   <meta property="twitter:card" content="summary_large_image">
   <meta property="twitter:url" content="https://tarkov.dev/">
   <meta property="twitter:title" content="Tarkov.dev">
-  <meta property="twitter:description" content="Escape from Tarkov - Ammo visualization, loot tiers, profit calculators, community driven API, and much more! Enjoy our best in class EFT toolkit.">
+  <meta property="twitter:description" content="Checkout all information for items, crafts, barters, maps, loot tiers, hideout profits, trader details, a free API, and more with tarkov.dev! A free, community made, and open source ecosystem of Escape from Tarkov tools and guides.">
   <meta property="twitter:image" content="">
 
   <style>
@@ -77,7 +79,6 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-  <title>Tarkov.dev</title>
   <link rel="dns-prefetch" href="https://wombatstats.com">
   <link rel="preconnect" href="https://wombatstats.com">
   <link rel="dns-prefetch" href="https://assets.tarkov.dev">
@@ -88,7 +89,19 @@
 </head>
 
 <body>
-  <div id="root"></div>
+  <div id="root">
+    <noscript>
+      <div style="display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center;">
+        <a href="/">
+          <img alt="Tarkov.dev" width="300" height="48" loading="lazy" src="/tarkov-dev-logo.svg">
+        </a>
+        <h1>tarkov.dev is an open source tool kit for Escape from Tarkov.</h1>
+        <h2>It is designed and maintained by the community to help you with quests, flea market trading, and improving your game!</h2>
+        <h2>The API is also freely available for you to build your own tools and services related to EFT.</h2>
+        <h3 style="color:red">Enable JavaScript and start using tarkov.dev right now!</span>
+      </div>
+    </noscript>
+  </div>
   <!-- Matomo Analytics -->
   <script defer src="%PUBLIC_URL%/custom-user-stats.js"></script>
 </body>

src/App.css

@@ -185,6 +185,7 @@ cite {
     flex-grow: 1;
     text-align: center;
     white-space: initial;
+    display: inline-flex;
 }
 
 div.tippy-box {

src/App.js

@@ -3,7 +3,6 @@ import React, { useEffect, useCallback, Suspense } from 'react';
 import { Routes, Route, useNavigate, Navigate } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import { useDispatch, useSelector } from 'react-redux';
-import { useTranslation } from 'react-i18next';
 
 import './App.css';
 import i18n from './i18n';
@@ -37,7 +36,7 @@ import ApiUsers from './pages/api-users';
 import Moobot from './pages/moobot';
 
 import Items from './pages/items/';
-import Armor from './pages/items/armor';
+import Armors from './pages/items/armors';
 import Backpacks from './pages/items/backpacks';
 import BarterItems from './pages/items/barter-items';
 import Containers from './pages/items/containers';
@@ -63,7 +62,6 @@ import Boss from './pages/bosses/boss';
 import Trader from './pages/traders/trader';
 import Traders from './pages/traders';
 
-import HistoryGraphs from './pages/history-graphs';
 import ItemTracker from './pages/item-tracker/';
 import Hideout from './pages/hideout';
 import WipeLength from './pages/wipe-length';
@@ -97,7 +95,6 @@ function App() {
     const controlId = useSelector((state) => state.sockets.controlId);
     let navigate = useNavigate();
     const dispatch = useDispatch();
-    const { t } = useTranslation();
 
     if (connectToId) {
         dispatch(enableConnection());
@@ -262,13 +259,6 @@ function App() {
         <div className="App">
             <Helmet htmlAttributes={{ lang: i18n.language }}>
                 <meta charSet="utf-8" />
-                <title>Tarkov.dev</title>
-                <meta
-                    name="description"
-                    content={t(
-                        'Checkout all information for items, crafts, barters, maps, loot tiers, hideout profits, spending guides, and more with tarkov.dev! A free, community made, and open source ecosystem of Escape from Tarkov tools and guides.',
-                    )}
-                />
             </Helmet>
             <Menu />
             {/* <Suspense fallback={<Loading />}> */}
@@ -283,34 +273,14 @@ function App() {
                 <Route
                     path={'/ammo'}
                     element={[
-                        <div className="display-wrapper" key="ammo-wrapper">
-                            <Helmet>
-                                <meta charSet="utf-8" />
-                                <title>Tarkov Ammo Chart</title>
-                                <meta
-                                    name="description"
-                                    content={t('Visualization of all ammo types in Escape from Tarkov')}
-                                />
-                            </Helmet>
-                            <Ammo />
-                        </div>,
+                        <Ammo key="ammo-wrapper" />,
                         remoteControlSessionElement,
                     ]}
                 />
                 <Route
                     path={'/ammo/:currentAmmo'}
                     element={[
-                        <div className="display-wrapper" key="ammo-wrapper">
-                            <Helmet>
-                                <meta charSet="utf-8" />
-                                <title>Tarkov Ammo Chart</title>
-                                <meta
-                                    name="description"
-                                    content={t('Visualization of all ammo types in Escape from Tarkov')}
-                                />
-                            </Helmet>
-                            <Ammo />
-                        </div>,
+                        <Ammo key="ammo-wrapper" />,
                         remoteControlSessionElement,
                     ]}
                 />
@@ -324,9 +294,7 @@ function App() {
                 <Route
                     path="/map/:currentMap"
                     element={[
-                        <div className="display-wrapper" key="map-wrapper">
-                            <Map />
-                        </div>,
+                        <Map key="map-wrapper" />,
                         remoteControlSessionElement,
                     ]}
                 />
@@ -390,9 +358,9 @@ function App() {
                     ]}
                 />
                 <Route
-                    path={'/items/armor'}
+                    path={'/items/armors'}
                     element={[
-                        <Armor sessionID={sessionID} key="armor-wrapper" />,
+                        <Armors sessionID={sessionID} key="armors-wrapper" />,
                         remoteControlSessionElement,
                     ]}
                 />
@@ -658,18 +626,6 @@ function App() {
                         remoteControlSessionElement,
                     ]}
                 />
-                <Route
-                    path={'/history-graphs'}
-                    element={[
-                        <Suspense
-                            fallback={<Loading />}
-                            key="history-graphs-wrapper"
-                        >
-                            <HistoryGraphs />
-                        </Suspense>,
-                        remoteControlSessionElement,
-                    ]}
-                />
                 <Route
                     path={'/hideout'}
                     element={[

src/components/Map.jsx

@@ -46,6 +46,10 @@ function Map() {
         for(const map of mapsGroup.maps) {
             allMaps[map.key] = {
                 ...map,
+                normalizedName: mapsGroup.normalizedName,
+                description: mapsGroup.description,
+                duration: mapsGroup.duration,
+                players: mapsGroup.players,
                 image: `/maps/${map.key}.jpg`,
             }
         }
@@ -55,18 +59,19 @@ function Map() {
         return <ErrorPage />;
     }
 
-    const { displayText, image, source, sourceLink, duration, players } = allMaps[currentMap];
+    const { displayText, source, sourceLink, normalizedName, description, duration, players, image } = allMaps[currentMap];
     const infoString = `${displayText} Map`;
 
     return [
         <Helmet>
             <meta charSet="utf-8" />
             <title>{infoString}</title>
-            <meta name="description" content={infoString} />
+            <meta name="description" content={description} />
         </Helmet>,
-        <div>
+        <div className="display-wrapper" key="map-wrapper">
             <Time
                 currentMap={currentMap}
+                normalizedName={normalizedName}
                 duration={duration}
                 players={players}
                 source={source}

src/components/Time.jsx

@@ -88,7 +88,7 @@ function MapSource(props) {
         overlayItem.push(
             <div key={`${props.currentMap}-attribution`}>
                 {t('By')}
-                <span>:</span> <a href={props.sourceLink}>{props.source}</a>
+                <span>:</span> <a href={props.sourceLink} target="_blank" rel="noopener noreferrer">{props.source}</a>
             </div>,
         );
     }
@@ -99,7 +99,7 @@ function MapSource(props) {
 function Time(props) {
     const time = useDate(new Date(), 50);
 
-    if (props?.currentMap === 'factory') {
+    if (props?.normalizedName === 'factory') {
         return (
             <div className="time-wrapper">
                 <div>15:28:00</div>
@@ -109,7 +109,7 @@ function Time(props) {
         );
     }
 
-    if (props?.currentMap === 'labs') {
+    if (props?.normalizedName === 'labs') {
         return (
             <div className="time-wrapper">
                 <MapSource {...props} />

src/components/barter-tooltip/index.js

@@ -33,7 +33,7 @@ function BarterToolip({ barter, source, requiredItems, showTitle = true, title,
                     size={1}
                     className="icon-with-text"
                 />
-                {t('Barter at')} {source}
+                {t('Barter at {{trader}}', { trader: source })}
             </h3>
         );
         if (title) {

src/components/contributors/index.js

@@ -31,7 +31,7 @@ function Contributors(props) {
         return (
             <>
                 {contributorJson.map((contributor) => (
-                    <a href={contributor.html_url} key={contributor.login}>
+                    <a href={contributor.html_url} target="_blank" rel="noopener noreferrer" key={contributor.login}>
                         <Avatar
                             key={contributor.login}
                             size={props.size}

src/components/crafts-table/index.js

@@ -220,7 +220,7 @@ function CraftTable({ selectedStation, freeFuel, nameFilter, itemFilter, showAll
                         name: craftRow.rewardItems[0].item.name,
                         wikiLink: craftRow.rewardItems[0].item.wikiLink,
                         itemLink: `/item/${craftRow.rewardItems[0].item.normalizedName}`,
-                        source: `${t(station)} (${t('Level')} ${level})`,
+                        source: `${station} (${t('Level')} ${level})`,
                         iconLink: craftRow.rewardItems[0].item.iconLink || 'https://tarkov.dev/images/unknown-item-icon.jpg',
                         count: craftRow.rewardItems[0].count,
                         sellValue: 0,