Projects on homepage now have locale support

.env

@@ -0,0 +1 @@
+API_ENDPOINT=cdn.guusvanmeerveld.dev

.gitignore

@@ -31,6 +31,4 @@ yarn-error.log*
 .env.production.local
 
 # vercel
-.vercel
-
-.env
+.vercel

next.config.js

@@ -1,5 +1,16 @@
+// @ts-check
+
 const { i18n } = require('./next-i18next.config');
 
+/**
+ * @type {import('next').NextConfig}
+ */
 module.exports = {
 	i18n,
+	images: {
+		domains: [process.env.API_ENDPOINT],
+	},
+	env: {
+		API_ENDPOINT: process.env.API_ENDPOINT,
+	},
 };

package.json

@@ -10,6 +10,7 @@
 		"lint": "next lint"
 	},
 	"dependencies": {
+		"axios": "^0.21.4",
 		"milligram": "^1.4.1",
 		"next": "^11.1.2",
 		"next-i18next": "^8.8.0",

src/components/Navbar.tsx

@@ -45,9 +45,9 @@ const Navbar: FC = () => {
 						<Link href="/#projects">
 							<a>{t('projects')}</a>
 						</Link>
-						<Link href="/contact">
+						{/* <Link href="/contact">
 							<a>{t('contact')}</a>
-						</Link>
+						</Link> */}
 						<Link href="https://github.com/guusvanmeerveld/portfolio">
 							<a>{t('github')}</a>
 						</Link>

src/components/Project.tsx

@@ -27,7 +27,12 @@ const Project: FC<ProjectComponent> = ({ name, description, buttons, cover, righ
 				</div>
 				{cover ? (
 					<div className={styles.cover}>
-						<Image src={`/assets/images/${cover}`} width={200} height={200} alt={name} />
+						<Image
+							src={`https://${process.env.API_ENDPOINT}/portfolio/${cover}`}
+							width={200}
+							height={200}
+							alt={name}
+						/>
 					</div>
 				) : null}
 			</div>

src/config/projects.json

@@ -1,61 +0,0 @@
-[
-    {
-        "name": "Argo",
-        "description": "Argo is a new app for Magister 6, made with Dart and Flutter. It will soon beavailable on the Google Play store and (maybe) even the App store! For more information, click either of the buttons below.",
-        "cover": "argo.png",
-        "buttons": [
-            {
-                "link": "https://argo-magister.net",
-                "text": "Website"
-            },
-            {
-                "link": "https://github.com/argo-client/app",
-                "text": "Github"
-            }
-        ]
-    },
-    {
-        "name": "Tempo",
-        "description": "Tempo is a 'simple' Discord bot which can be used to play YouTube, SoundCloud and even Spotify songs. It's made in pure TypeScript and has plentiful settings.",
-        "cover": "tempo.png",
-        "buttons": [
-            {
-                "link": "https://tempo.g-vm.nl",
-                "text": "Website"
-            },
-            {
-                "link": "https://tempo.g-vm.nl/invite",
-                "text": "Invite"
-            }
-        ]
-    },
-    {
-        "name": "Keyzo",
-        "description": "Keyzo is an electron-based program written in JavaScript and CSS but I am planning on moving to TypeScript. It's main use is to bring every keybind you will every need into a single program, with a simple and neat interface.",
-        "buttons": [
-            {
-                "link": "https://keyzo.net",
-                "text": "Website"
-            },
-            {
-                "link": "https://github.com/Guusvanmeerveld/Keyzo",
-                "text": "Github"
-            }
-        ]
-    },
-    {
-        "name": "Magister Auto-Login",
-        "description": "Magister Auto-Login is a chrome extension that automatically logs into Magister 6 for you.",
-        "buttons": [
-            {
-                "link": "https://chrome.google.com/webstore/detail/magister-auto-login/cekhhgcjpkahghpgeafhmkkjhidodplk?hl=nl",
-                "text": "Add to Chrome"
-            },
-            {
-                "link": "https://github.com/Guusvanmeerveld/Magister-Auto-Login",
-                "text": "Github"
-            }
-        ],
-        "cover": "autologin.png"
-    }
-]

src/models/shifts.ts

@@ -1,4 +0,0 @@
-export default interface Shift {
-	start: string;
-	end: string;
-}

src/pages/index.tsx

@@ -1,5 +1,7 @@
 import { GetStaticProps, NextPage } from 'next';
 
+import axios from 'axios';
+
 import Image from 'next/image';
 
 import { useTranslation } from 'next-i18next';
@@ -9,11 +11,11 @@ import Layout from '@components/Layout';
 import Page from '@components/Page';
 
 import Project from '@components/Project';
-import projects from '@config/projects.json';
+import ProjectModel from '@models/project';
 
 import styles from './Index.module.scss';
 
-const Home: NextPage = () => {
+const Home: NextPage<{ projects: ProjectModel[] }> = ({ projects }) => {
 	const { t } = useTranslation('home');
 
 	return (
@@ -52,9 +54,14 @@ const Home: NextPage = () => {
 };
 
 export const getStaticProps: GetStaticProps = async ({ locale }) => {
+	const { data: projects } = await axios(
+		`https://${process.env.API_ENDPOINT}/portfolio/projects-${locale}.json`
+	);
+
 	return {
 		props: {
 			...(await serverSideTranslations(locale, ['home', 'nav'])),
+			projects,
 		},
 	};
 };

tsconfig.json

@@ -1,14 +1,14 @@
 {
 	"compilerOptions": {
-		"baseUrl": ".",
+		"baseUrl": "src",
 		"paths": {
-			"@components/*": ["src/components/*"],
-			"@public/*": ["src/public/*"],
-			"@styles/*": ["src/styles/*"],
-			"@models/*": ["src/models/*"],
-			"@config/*": ["src/config/*"],
-			"@utils/*": ["src/utils/*"],
-			"@locales/*": ["src/locales/*"]
+			"@components/*": ["components/*"],
+			
+			"@styles/*": ["styles/*"],
+			"@models/*": ["models/*"],
+			"@config/*": ["config/*"],
+			"@utils/*": ["utils/*"],
+			"@src/*": ["./*"]
 		},
 		"target": "es5",
 		"lib": ["dom", "dom.iterable", "esnext"],

yarn.lock

@@ -473,6 +473,13 @@ axe-core@^4.0.2:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.3.3.tgz#b55cd8e8ddf659fe89b064680e1c6a4dceab0325"
   integrity sha512-/lqqLAmuIPi79WYfRpy2i8z+x+vxU3zX2uAm0gs1q52qTuKwolOj1P8XbufpXcsydrpKx2yGn2wzAnxCMV86QA==
 
+axios@^0.21.4:
+  version "0.21.4"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.4.tgz#c67b90dc0568e5c1cf2b0b858c43ba28e2eda575"
+  integrity sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==
+  dependencies:
+    follow-redirects "^1.14.0"
+
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -1424,6 +1431,11 @@ flatted@^3.1.0:
   resolved "https://registry.npmjs.org/flatted/-/flatted-3.1.1.tgz"
   integrity sha512-zAoAQiudy+r5SvnSw3KJy5os/oRJYHzrzja/tBDqrZtNhUw8bt6y8OBzMWcjWr+8liV8Eb6yOhw8WZ7VFZ5ZzA==
 
+follow-redirects@^1.14.0:
+  version "1.14.4"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.4.tgz#838fdf48a8bbdd79e52ee51fb1c94e3ed98b9379"
+  integrity sha512-zwGkiSXC1MUJG/qmeIFH2HBJx9u0V46QGUe3YR1fXG8bXQxq7fLj0RjLZQ5nubr9qNJUZrH+xUcwXEoXNpfS+g==
+
 foreach@^2.0.5:
   version "2.0.5"
   resolved "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz"