Merge pull request #866 from remap-keys/release-announce-for-i18n

Announce Japanese Language support.

Author: yoichiro

src/components/documents/Documents.tsx

@@ -18,6 +18,7 @@ import Encoders from './encoders/Encoders';
 import Build from './build/Build';
 import SupportCodeEditing from './support-code-editing/SupportCodeEditing';
 import Statistics from './statistics/Statistics';
+import Internationalization from './i18n/Internationalization';
 
 type RouteParams = {
   docId: string;
@@ -66,6 +67,9 @@ export default function Documents(props: DocumentsPropsType) {
   } else if (docId === 'statistics') {
     page = <Statistics />;
     sendEventToGoogleAnalytics('docs/statistics');
+  } else if (docId === 'i18n') {
+    page = <Internationalization />;
+    sendEventToGoogleAnalytics('docs/statistics');
   } else {
     page = <Index />;
   }

src/components/documents/i18n/Internationalization.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Typography } from '@mui/material';
+
+export default function Internationalization() {
+  return (
+    <React.Fragment>
+      <Typography variant="h3">Japanese Language Support</Typography>
+      <section>
+        <Typography variant="body1" gutterBottom={true}>
+          Remap has always been available in English only, but now it also
+          supports Japanese. If your web browser&apos;s language is set to
+          Japanese, Remap will automatically be displayed in Japanese. This
+          update enhances convenience for users whose native language is
+          Japanese.
+        </Typography>
+        <Typography variant="body1" gutterBottom={true}>
+          If you prefer Japanese but the interface is still in English, please
+          check whether your web browser&apos;s language settings are set to
+          Japanese. Additionally, verify that your OS language settings are also
+          set to Japanese.
+        </Typography>
+        <Typography variant="body1" gutterBottom={true}>
+          If you wish to continue using Remap in English, you can do one of the
+          following:
+          <ul>
+            <li>
+              Change your web browser&apos;s language settings to English.
+            </li>
+            <li>
+              Add <code>?lng=en</code> to the end of the URL when accessing
+              Remap.
+            </li>
+          </ul>
+        </Typography>
+        <Typography variant="body1" gutterBottom={true}>
+          By appending <code>?lng=en</code> or <code>?lng=ja</code> to the URL,
+          you can force Remap to display in the specified language. The selected
+          language will be remembered the next time you access Remap.
+          Specifically, the language setting is stored in{' '}
+          <code>localStorage</code> under the key name <code>i18nextLng</code>.
+          If you encounter any issues, try deleting the
+          <code>i18nextLng</code> entry from <code>localStorage</code>.
+        </Typography>
+      </section>
+    </React.Fragment>
+  );
+}

src/components/documents/index/Index.tsx

@@ -7,6 +7,11 @@ export default function Index() {
       <Paper>
         <Typography variant="h3">News</Typography>
         <section>
+          <Typography variant="body1" gutterBottom={true}>
+            <Link href="/docs/i18n">
+              [Feb 26th, 2025] Japanese Language Support
+            </Link>
+          </Typography>
           <Typography variant="body1" gutterBottom={true}>
             <Link href="/docs/statistics">
               [Dec 19th, 2023] The statistics feature is available

src/components/top/Top.tsx

@@ -17,13 +17,15 @@ import './Top.scss';
 import { TopActionsType, TopStateType } from './Top.container';
 import { useNavigate } from 'react-router';
 import {
+  Alert,
   AppBar,
   Button,
   Card,
   CardContent,
   Container,
   CssBaseline,
   Grid,
+  Link,
   Toolbar,
   Typography,
 } from '@mui/material';
@@ -92,6 +94,14 @@ export default function Top(props: TopPropsType) {
           <Logo width={128} color={'white'} />
         </Toolbar>
       </AppBar>
+      <Alert severity="info">
+        <strong>Info: </strong>
+        [Feb 26th, 2025] Japanese Language Support. See{' '}
+        <Link href="/docs/i18n" target="_blank">
+          for more details
+        </Link>{' '}
+        .
+      </Alert>
       <main>
         <div className="hero-content">
           <Container maxWidth="xl">