Skip to content

Commit

Permalink
feat: install and configure react-i18next
Browse files Browse the repository at this point in the history
  • Loading branch information
martapanc committed Aug 24, 2023
1 parent 7b3a838 commit 385ba58
Show file tree
Hide file tree
Showing 8 changed files with 139 additions and 15 deletions.
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
"focus-trap-react": "^10.1.4",
"framer-motion": "^10.12.18",
"graphql": "^16.8.0",
"i18next": "^23.4.5",
"inquirer-fuzzy-path": "^2.3.0",
"next": "^13.4.9",
"next-cloudinary": "^4.18.0",
Expand All @@ -51,6 +52,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-headroom": "^3.2.1",
"react-i18next": "^13.2.0",
"react-icons": "^4.10.1",
"react-markdown": "^8.0.7",
"react-syntax-highlighter": "^15.5.0",
Expand Down
3 changes: 2 additions & 1 deletion src/app/(public)/about/work/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import ReactMarkdown from 'react-markdown';

import { flattenToArray, flattenToObject } from '@/lib/graphqlUtils';

import Heading from '@/components/atoms/Heading';
import Education from '@/components/organisms/about-work/Education';
import Languages from '@/components/organisms/about-work/Languages';
import Publications from '@/components/organisms/about-work/Publications';
Expand Down Expand Up @@ -99,7 +100,7 @@ const AboutPage = async () => {
<main className='min-h-main'>
<section className='dark:bg-dark bg-white'>
<div className='layout relative flex flex-col py-12'>
<h1 className='mb-5'>Work & Career</h1>
<Heading title='aboutWork.title' />

<div>
<div className='m-2 flex'>
Expand Down
21 changes: 21 additions & 0 deletions src/app/(public)/i18n.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

// Initialize i18next
i18n.use(initReactI18next).init({
resources: {
en: {
translation: require('../../locales/en.json'),
},
it: {
translation: require('../../locales/it.json'),
},
},
lng: 'en', // Default language
fallbackLng: 'en', // Fallback language
interpolation: {
escapeValue: false, // Allow interpolation in translations
},
});

export default i18n;
35 changes: 21 additions & 14 deletions src/app/(public)/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,25 +1,32 @@
'use client';

import { ReactNode } from 'react';
import { I18nextProvider } from 'react-i18next';

import '@/styles/globals.css';
import '@/styles/animations.css';

import LayoutClient from '@/app/(public)/layout-client';

import i18n from './i18n';

export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang='en'>
<head>
<title>MartaCodes.it</title>
<link
rel='icon'
type='image/png'
sizes='32x32'
href='/favicon/favicon.ico'
/>
</head>
<body>
<LayoutClient>{children}</LayoutClient>
</body>
</html>
<I18nextProvider i18n={i18n}>
<html lang='en'>
<head>
<title>MartaCodes.it</title>
<link
rel='icon'
type='image/png'
sizes='32x32'
href='/favicon/favicon.ico'
/>
</head>
<body>
<LayoutClient>{children}</LayoutClient>
</body>
</html>
</I18nextProvider>
);
}
16 changes: 16 additions & 0 deletions src/components/atoms/Heading.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
'use client';

import * as React from 'react';
import { useTranslation } from 'react-i18next';

interface HeadingProps {
title: string;
}

const Heading = ({ title }: HeadingProps) => {
const { t } = useTranslation();

return <h1 className='mb-5'>{t(title)}</h1>;
};

export default Heading;
25 changes: 25 additions & 0 deletions src/locales/en.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
{
"aboutWork": {
"title": "Work & Career",
"softwareDevelopment": {
"title": "Software Development",
"icon": "https://res.cloudinary.com/dwrurydlt/image/upload/v1692734473/laptop_4a3ba3b30c.svg"
},
"workExperience": {
"title": "Work Experience",
"icon": "https://res.cloudinary.com/dwrurydlt/image/upload/v1692894192/work_f1bb1eb3dd.svg"
},
"education": {
"title": "Education",
"icon": "https://res.cloudinary.com/dwrurydlt/image/upload/v1692894192/school_bbe225685d.svg"
},
"languages": {
"title": "Work Experience",
"icon": "https://res.cloudinary.com/dwrurydlt/image/upload/v1692894192/internet_60bf166c34.svg"
},
"publications": {
"title": "Publications",
"icon": "https://res.cloudinary.com/dwrurydlt/image/upload/v1692894192/newspaper_e15ec94d21.svg"
}
}
}
25 changes: 25 additions & 0 deletions src/locales/it.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
{
"aboutWork": {
"title": "Carriera Lavorativa",
"softwareDevelopment": {
"title": "Sviluppo Software",
"icon": "https://res.cloudinary.com/dwrurydlt/image/upload/v1692734473/laptop_4a3ba3b30c.svg"
},
"workExperience": {
"title": "Work Experience",
"icon": "https://res.cloudinary.com/dwrurydlt/image/upload/v1692894192/work_f1bb1eb3dd.svg"
},
"education": {
"title": "Education",
"icon": "https://res.cloudinary.com/dwrurydlt/image/upload/v1692894192/school_bbe225685d.svg"
},
"languages": {
"title": "Work Experience",
"icon": "https://res.cloudinary.com/dwrurydlt/image/upload/v1692894192/internet_60bf166c34.svg"
},
"publications": {
"title": "Publications",
"icon": "https://res.cloudinary.com/dwrurydlt/image/upload/v1692894192/newspaper_e15ec94d21.svg"
}
}
}
27 changes: 27 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -9714,6 +9714,13 @@ html-minifier-terser@^6.0.2:
relateurl "^0.2.7"
terser "^5.10.0"

html-parse-stringify@^3.0.1:
version "3.0.1"
resolved "https://verdaccio.mein-recycling.de/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz#dfc1017347ce9f77c8141a507f233040c59c55d2"
integrity sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==
dependencies:
void-elements "3.1.0"

html-tags@^3.1.0:
version "3.3.1"
resolved "https://verdaccio.mein-recycling.de/html-tags/-/html-tags-3.3.1.tgz#a04026a18c882e4bba8a01a3d39cfe465d40b5ce"
Expand Down Expand Up @@ -9810,6 +9817,13 @@ husky@^7.0.4:
resolved "https://verdaccio.mein-recycling.de/husky/-/husky-7.0.4.tgz#242048245dc49c8fb1bf0cc7cfb98dd722531535"
integrity sha512-vbaCKN2QLtP/vD4yvs6iz6hBEo6wkSzs8HpRah1Z6aGmF2KW5PdYuAd7uX5a+OyBZHBhd+TFLqgjUgytQr4RvQ==

i18next@^23.4.5:
version "23.4.5"
resolved "https://verdaccio.mein-recycling.de/i18next/-/i18next-23.4.5.tgz#3405926b7cd4a4682d6521633e9f836b3d81c5e7"
integrity sha512-XXALnva7/5H+kg7TjDsmzY3jRypuSJvjR1eUWtt11yUgsOqjZFq/mnaujJ/XpVWhUJU75QhCUhrZqAarlYpOSQ==
dependencies:
"@babel/runtime" "^7.22.5"

iconv-lite@0.4.24, iconv-lite@^0.4.24:
version "0.4.24"
resolved "https://verdaccio.mein-recycling.de/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
Expand Down Expand Up @@ -13520,6 +13534,14 @@ react-hook-form@^7.45.1:
resolved "https://verdaccio.mein-recycling.de/react-hook-form/-/react-hook-form-7.45.1.tgz#e352c7f4dbc7540f0756abbb4dcfd1122fecc9bb"
integrity sha512-6dWoFJwycbuFfw/iKMcl+RdAOAOHDiF11KWYhNDRN/OkUt+Di5qsZHwA0OwsVnu9y135gkHpTw9DJA+WzCeR9w==

react-i18next@^13.2.0:
version "13.2.0"
resolved "https://verdaccio.mein-recycling.de/react-i18next/-/react-i18next-13.2.0.tgz#9d7a574144738e46dd4c66573907f56942435ced"
integrity sha512-YD8xMc+I0jkHHLotd8ERMzZ53hMaCBVLCndbcbBveJn3FbppRP4jyYOAkmR8XItN01sTD9ilAjoEjpH1i42IgA==
dependencies:
"@babel/runtime" "^7.22.5"
html-parse-stringify "^3.0.1"

react-icons@^4.10.1:
version "4.10.1"
resolved "https://verdaccio.mein-recycling.de/react-icons/-/react-icons-4.10.1.tgz#3f3b5eec1f63c1796f6a26174a1091ca6437a500"
Expand Down Expand Up @@ -16064,6 +16086,11 @@ vm-browserify@^1.1.2:
resolved "https://verdaccio.mein-recycling.de/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==

void-elements@3.1.0:
version "3.1.0"
resolved "https://verdaccio.mein-recycling.de/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
integrity sha1-YU9/v42AHwu18GYfWy9XhXUOTwk=

w3c-hr-time@^1.0.2:
version "1.0.2"
resolved "https://verdaccio.mein-recycling.de/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"
Expand Down

0 comments on commit 385ba58

Please sign in to comment.