Started on locales

3 years ago · 5a56643ead
parent 46db5d1fd1
commit 5a56643ead
9 changed files with 136 additions and 41 deletions
--- a/next.config.js
+++ b/next.config.js
@ -1,6 +1,6 @@
 module.exports = {
    i18n: {
-        locales: ['en-US', 'nl-NL'],
-        defaultLocale: 'en-US',
+        locales: ['en', 'nl'],
+        defaultLocale: 'en',
    },
 }
--- a/package.json
+++ b/package.json
@ -10,10 +10,10 @@
 		"lint": "eslint src"
 	},
 	"dependencies": {
-		"@types/luxon": "^1.27.1",
 		"luxon": "^2.0.1",
 		"milligram": "^1.4.1",
 		"next": "^10.2.3",
+		"next-localization": "^0.11.0",
 		"next-themes": "^0.0.14",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",
@ -23,6 +23,7 @@
 		"swr": "^0.5.6"
 	},
 	"devDependencies": {
+		"@types/luxon": "^1.27.1",
 		"@types/node": "^15.6.1",
 		"@types/react": "^17.0.6",
 		"@types/react-google-recaptcha": "^2.1.0",
@ -36,4 +37,4 @@
 		"prettier": "^2.3.0",
 		"typescript": "^4.2.4"
 	}
-}
+}
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@ -1,4 +1,6 @@
+import { useI18n } from 'next-localization';
 import { useTheme } from 'next-themes';
+import { GetStaticProps } from 'next';
 import Link from 'next/link';

 import { BiMoon } from 'react-icons/bi';
@ -9,6 +11,8 @@ import { FC } from 'react';
 import styles from './Navbar.module.scss';

 const Navbar: FC = () => {
+	const { t } = useI18n();
+
 	const { theme, setTheme } = useTheme();
 	const switchTheme = (): void => setTheme(theme == 'dark' ? 'light' : 'dark');

@ -18,13 +22,13 @@ const Navbar: FC = () => {
 				<span className={styles.header}>Portfolio</span>
 				<div className={styles.items}>
 					<Link href="/#projects">
-						<a>Projects</a>
+						<a>{t('nav.projects')}</a>
 					</Link>
 					<Link href="/contact">
-						<a>Contact</a>
+						<a>{t('nav.contact')}</a>
 					</Link>
 					<Link href="https://github.com/guusvanmeerveld/portfolio">
-						<a>Source code</a>
+						<a>{t('nav.github')}</a>
 					</Link>

 					<BiMoon onClick={switchTheme} className={styles.moon} />
@ -35,4 +39,12 @@ const Navbar: FC = () => {
 	);
 };

+export const getStaticProps: GetStaticProps = async ({ locale }) => {
+	const { default: lngDict = {} } = await import(`../locales/${locale}.json`);
+
+	return {
+		props: { lngDict },
+	};
+};
+
 export default Navbar;
--- a/src/locales/en.json
+++ b/src/locales/en.json
@ -0,0 +1,17 @@
+{
+    "pages": {
+        "home": {
+            "title": "Home",
+            "description": "A simple portfolio website to display my projects.",
+            "subtitle": "Hi, I am a full stack web developer",
+            "projects": {
+                "button": "Check out my projects"
+            }
+        }
+    },
+    "nav": {
+        "projects": "Projects",
+        "contact": "Contact",
+        "github": "Source code"
+    }
+}
--- a/src/locales/nl.json
+++ b/src/locales/nl.json
@ -0,0 +1,17 @@
+{
+    "pages": {
+        "home": {
+            "title": "Thuis",
+            "description": "Een simpele portfolio website om mijn projecten te bekijken.",
+            "subtitle": "Hoi, Ik ben een full stack web developer",
+            "projects": {
+                "button": "Bekijk mijn projecten"
+            }
+        }
+    },
+    "nav": {
+        "projects": "Projecten",
+        "contact": "Contact",
+        "github": "Bron code"
+    }
+}
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@ -1,5 +1,8 @@
 import { ThemeProvider } from 'next-themes';

+import { I18nProvider } from 'next-localization';
+import { useRouter } from 'next/router';
+
 import type { AppProps } from 'next/app';

 import 'milligram';
@ -9,10 +12,15 @@ import '@styles/roboto.css';
 import '@styles/globals.scss';

 function App({ Component, pageProps }: AppProps): JSX.Element {
+	const router = useRouter();
+	const { lngDict, ...rest } = pageProps;
+
 	return (
-		<ThemeProvider>
-			<Component {...pageProps} />
-		</ThemeProvider>
+		<I18nProvider lngDict={lngDict} locale={router.locale}>
+			<ThemeProvider>
+				<Component {...rest} />
+			</ThemeProvider>
+		</I18nProvider>
 	);
 }

--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@ -1,4 +1,6 @@
-import { NextPage } from 'next';
+import { GetStaticProps, NextPage } from 'next';
+
+import { useI18n } from 'next-localization';

 import Image from 'next/image';

@ -10,38 +12,50 @@ import projects from '@config/projects.json';

 import styles from './Home.module.scss';

-const Home: NextPage = () => (
-	<Page description="A simple portfolio website to display my projects." title="Home">
-		<Layout>
-			<div className={styles.body}>
-				<div className={styles.content + ' container'}>
-					<span className={styles.profile + ' profile'}>
-						<Image src="/assets/images/profile.svg" width={100} height={100} alt="" />
-					</span>
-
-					<span className={styles.title}>Guus van Meerveld</span>
-					<span className={styles.subtitle}>Hi, I am a full stack web developer</span>
-
-					<a href="#projects" className="button d-block m-auto">
-						Check out my projects
-					</a>
-				</div>
-			</div>
+const Home: NextPage = () => {
+	const { t } = useI18n();
+
+	return (
+		<Page description={t('pages.home.description')} title={t('pages.home.title')}>
+			<Layout>
+				<div className={styles.body}>
+					<div className={styles.content + ' container'}>
+						<span className={styles.profile + ' profile'}>
+							<Image src="/assets/images/profile.svg" width={100} height={100} alt="" />
+						</span>
+
+						<span className={styles.title}>Guus van Meerveld</span>
+						<span className={styles.subtitle}>{t('pages.home.subtitle')}</span>

-			<div className={styles.projects}>
-				<div className="container">
-					<div className={styles.header} id="projects">
-						Projects
+						<a href="#projects" className="button">
+							{t('pages.home.projects.button')}
+						</a>
 					</div>
+				</div>
+
+				<div className={styles.projects}>
+					<div className="container">
+						<div className={styles.header} id="projects">
+							Projects
+						</div>

-					{projects.map((project, i) => {
-						const props = { ...project, right: (i + 1) % 2 == 0 };
-						return <Project key={project.name} {...props} />;
-					})}
+						{projects.map((project, i) => {
+							const props = { ...project, right: (i + 1) % 2 == 0 };
+							return <Project key={project.name} {...props} />;
+						})}
+					</div>
 				</div>
-			</div>
-		</Layout>
-	</Page>
-);
+			</Layout>
+		</Page>
+	);
+};
+
+export const getStaticProps: GetStaticProps = async ({ locale }) => {
+	const { default: lngDict = {} } = await import(`../locales/${locale}.json`);
+
+	return {
+		props: { lngDict },
+	};
+};

 export default Home;
--- a/tsconfig.json
+++ b/tsconfig.json
@ -7,7 +7,8 @@
 			"@styles/*": ["src/styles/*"],
 			"@models/*": ["src/models/*"],
 			"@config/*": ["src/config/*"],
-			"@utils/*": ["src/utils/*"]
+			"@utils/*": ["src/utils/*"],
+			"@locales/*": ["src/locales/*"]
 		},
 		"target": "es5",
 		"lib": ["dom", "dom.iterable", "esnext"],
--- a/yarn.lock
+++ b/yarn.lock
@ -891,6 +891,11 @@ dir-glob@^3.0.1:
  dependencies:
    path-type "^4.0.0"

+dlv@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
+  integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
+
 doctrine@^2.1.0:
  version "2.1.0"
  resolved "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz"
@ -1911,6 +1916,13 @@ natural-compare@^1.4.0:
  resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
  integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=

+next-localization@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/next-localization/-/next-localization-0.11.0.tgz#4676d2b1c556f5e8d6d841d10cf88b5c3ff3a51f"
+  integrity sha512-W+b0jxdAVoGvIy+LLSBOOwHlyLZXyUlgTWddl4TWvSX82mHM+NzRsAVn8bmV38h8uL5vSnBcoSWsYqoQjvYcTQ==
+  dependencies:
+    rosetta "1.1.0"
+
 next-themes@^0.0.14:
  version "0.0.14"
  resolved "https://registry.npmjs.org/next-themes/-/next-themes-0.0.14.tgz"
@ -2487,6 +2499,14 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
    hash-base "^3.0.0"
    inherits "^2.0.1"

+rosetta@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/rosetta/-/rosetta-1.1.0.tgz#41ecc0f3cb38ce34b981b0dcfca2f4c94721738c"
+  integrity sha512-3jQaCo2ySoDqLIPjy7+AvN3rluLfkG8A27hg0virL0gRAB5BJ3V35IBdkL/t6k1dGK0TVTyUEwXVUJsygyx4pA==
+  dependencies:
+    dlv "^1.1.3"
+    templite "^1.1.0"
+
 run-parallel@^1.1.9:
  version "1.2.0"
  resolved "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz"
@ -2806,6 +2826,11 @@ table@^6.0.9:
    string-width "^4.2.0"
    strip-ansi "^6.0.0"

+templite@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/templite/-/templite-1.1.0.tgz#4f2eab732234fdac996628427d72817b3a47ce06"
+  integrity sha512-DtXicIurbnJS5/eu3nMLLspt4bZ8F/811IpcI7DgSE63UhES6ld3CxoTcLXBuGhliYx2wMVmyNzHf3c7mqwIIA==
+
 text-table@^0.2.0:
  version "0.2.0"
  resolved "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz"