22 japanese home page (#31)

* refactor i18n keys

* make english keys

* add ja translation

* update header

* update the link to a forever link, improve testing, add a test stub

* fix key

src/components/Header/DesktopHeader.tsx

@@ -6,6 +6,7 @@ import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
 import SideDrawer from '../SideDrawer/SideDrawer';
 import StyledNavLink from '@/components/StyledNavLink/StyledNavLink'
+import { useTranslation } from 'react-i18next';
 
 
 const StyledToolbar = styled(Toolbar)(({ theme }) => ({
@@ -22,16 +23,18 @@ const StyledToolbar = styled(Toolbar)(({ theme }) => ({
 
 
 const DesktopHeader: FC = () => {
+    const { t } = useTranslation();
+
     return <StyledToolbar aria-label="desktop-toolbar">
         <Stack direction='row' spacing={2} sx={{ alignItems: 'center' }}>
             <SideDrawer />
             <StyledNavLink to="/" style={{ textDecoration: 'none', color: 'white' }}>
                 <Typography variant="h1">WiSE Japan</Typography>
-                <Typography variant="caption">Women in Software Engineering Japan</Typography>
+                <Typography variant="caption">{t('header.subtitle')}</Typography>
             </StyledNavLink>
 
             <StyledNavLink to="/codeofconduct" style={{ textDecoration: 'none', color: 'white' }}>
-                <Typography variant="overline">Code of Conduct</Typography>
+                <Typography variant="overline">{t('header.codeOfConduct')}</Typography>
             </StyledNavLink>
         </Stack>
     </StyledToolbar>

src/i18n/en/translation.json

@@ -1,5 +1,13 @@
 {
-    "codeOfConduct": "Code of Conduct",
-    "helloWorld": "✨ Hello World ✨",
-    "joinUs": "✨ Join us on Slack ✨"
+    "header": {
+        "codeOfConduct": "Code of Conduct",
+        "subtitle": "Women in Software Engineering Japan"
+    },
+    "home": {
+        "helloWorld": "✨ Hello World ✨",
+        "joinUs": "✨ Join us on Slack ✨",
+        "paragraph1": "Many of us were saddened to hear of the sudden closure of Women Who Code. There is a need for an organization to empower diverse women in technology careers in Tokyo and across Japan.",
+        "paragraph2": "We are not giving up on this mission. Please join us in rebuilding community so that we can empower women in Japan in Software Engineering careers.",
+        "paragraph3": "Our events target professional women in software careers with 2+ years of experience. Beginners to seasoned professionals are welcome to participate. While this organization focuses on women, all genders are welcome at our events. Software-adjacent roles like Data Science, Product, UI/UX, Machine Learning, etc., are welcome, too."
+    }
 }

src/i18n/ja/translation.json

@@ -1,5 +1,13 @@
 {
-    "codeOfConduct": "行動規範",
-    "helloWorld": "✨ Hello 世界 ✨",
-    "joinUs": "✨ スラックに参加する ✨"
+    "header": {
+        "codeOfConduct": "行動規範",
+        "subtitle": "ウーマン・イン・ソフトウェアエンジニアリング"
+    },
+    "home": {
+        "helloWorld": "✨ Hello 世界 ✨",
+        "joinUs": "✨ スラックに参加する ✨",
+        "paragraph1": "Women Who Code(WWCode)の活動中止のニュースに対し、多くの人々が悲しみました。東京や日本全体で、IT業界の多様な女性を支援する組織が必要とされています。",
+        "paragraph2": "この使命を諦めるつもりはありません。WWCodeの志を引き継ぐために、日本の女性がソフトウェアエンジニアとしてキャリアを築けるよう、私たちと共にコミュニティを再構築していきます。",
+        "paragraph3": "私たちのイベントは、2年以上の経験を持つITプロフェッショナルの女性を中心に、新卒からベテランまでどなたでも参加できるイベントをやっています。この組織は女性に焦点を当てていますが、イベントにはすべてのジェンダーの方が歓迎されています。また、データサイエンティスト、プロダクトマネジャー、UI/UXデザイナー、機械学習エンジニアなどのソフトウェアに関連した役割も歓迎いたします。"
+    }
 }

src/routes/CodeOfConduct/CodeOfConduct.tsx

@@ -10,7 +10,7 @@ const CodeOfConduct: FC = () => {
     return <Container style={{ padding: 32 }}>
         <Stack spacing={2}>
             <Typography variant='h1'>
-                {t('codeOfConduct')}
+                {t('header.codeOfConduct')}
             </Typography>
             <Typography variant='body2' >
                 Women in Software Engineering Japan (WiSE Japan) is dedicated to providing an empowering experience for everyone who participates in or supports our community. Our events are intended to inspire women to excel in technology careers, and anyone who is there for this purpose is welcome. Because we value the safety and security of our members and strive to have an inclusive community, we do not tolerate harassment of members or event participants in any form. This Code of Conduct was created to clearly define what we mean by a harassment-free experience, so that our community and those who support it are clear about our intent and have access to procedures for addressing issues, should they arise.

src/routes/Home/Home.tsx

@@ -10,28 +10,24 @@ const Home: FC = () => {
 
     return <Container style={{ padding: 32 }}>
         <Stack spacing={2}>
-            <Typography variant="h1">{t('helloWorld')}</Typography>
+            <Typography variant="h1">{t('home.helloWorld')}</Typography>
             <Typography variant="body1">
-                Many of us were saddened to hear of the sudden closure of Women Who Code.
-                There is a need for an organization to empower diverse women in technology careers in Tokyo and across Japan.
+                {t('home.paragraph1')}
             </Typography>
             <Typography>
-                We are not giving up on this mission.
-                Please join us in rebuilding community so that we can empower women in Japan in Software Engineering careers.
+                {t('home.paragraph2')}
             </Typography>
 
             <Typography>
-                Our events target professional women in software careers with 2+ years of experience. Beginners to seasoned professionals are welcome to participate.
-                While this organization focuses on women, all genders are welcome at our events.
-                Software-adjacent roles like Data Science, Product, UI/UX, Machine Learning, etc., are welcome, too.
+                {t('home.paragraph3')}
             </Typography>
 
             <Button
                 variant='contained'
-                href='https://join.slack.com/t/womencodersjapan/shared_invite/zt-2h79966bm-dE7SyiGvv2CXBxbz_0JzKw'
+                href='https://join.slack.com/t/wise-japan/shared_invite/zt-2h79966bm-dE7SyiGvv2CXBxbz_0JzKw'
                 target='_blank'
             >
-                {t('joinUs')}
+                {t('home.joinUs')}
             </Button>
         </Stack>
     </Container>

src/routes/Home/__test__/Home.test.tsx

@@ -8,6 +8,14 @@ describe('Home Route', () => {
         render(<Home />)
         const hello = await screen.findByText('✨ Hello World ✨')
         expect(hello).toBeVisible()
+
+        const link = await screen.findByRole('link', { name: '✨ Join us on Slack ✨' })
+        expect(link).toBeEnabled()
+        expect(link).toHaveAttribute('href', 'https://join.slack.com/t/wise-japan/shared_invite/zt-2h79966bm-dE7SyiGvv2CXBxbz_0JzKw')
+        expect(link).toHaveAttribute('target', '_blank')
     })
 
+    it.todo('should show text in Japanese when the ja locale is set', async () => {
+
+    })
 })