Made app next export compatible

.eslintrc.json

@@ -1,9 +1,7 @@
 {
-  "plugins": [
+	"plugins": ["prettier"],
-    "prettier"
+	"extends": "next/core-web-vitals",
-  ],
+	"rules": {
-  "extends": "next/core-web-vitals",
+		"prettier/prettier": "error"
-  "rules": {
+	}
-    "prettier/prettier": "error"
+}
-  }
-}

.github/workflows/build.yml

@@ -22,7 +22,7 @@ jobs:
 
       - name: ESlint check
         run: yarn lint
-        
+
   docker:
     needs: test
     runs-on: ubuntu-latest
@@ -35,7 +35,7 @@ jobs:
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
-          
+
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v1
 
@@ -58,4 +58,3 @@ jobs:
 
       - name: Image digest
         run: echo ${{ steps.docker_build.outputs.digest }}
-  

.prettierignore

@@ -8,4 +8,5 @@ LICENSE
 .env
 .prettierrc
 .next
-next-env.d.ts
+next-env.d.ts
+out

docker-compose.yml

@@ -1,7 +1,7 @@
 version: '3'
 
 services:
-    app:
+  app:
-        container_name: portfolio
+    container_name: portfolio
-        build: .
+    build: .
-        env_file: .env
+    env_file: .env

next.config.js

@@ -1,16 +1,18 @@
 // @ts-check
 
-const { i18n } = require('./next-i18next.config');
-
 /**
  * @type {import('next').NextConfig}
  */
 module.exports = {
-	i18n,
 	images: {
-		domains: [process.env.CDN_ENDPOINT],
+		loader: 'imgix',
+		path: process.env.IMGIX_PATH ?? 'https://guusvanmeerveld.imgix.net',
 	},
 	env: {
 		CDN_ENDPOINT: process.env.CDN_ENDPOINT,
 	},
+	webpack: (config) => {
+		config.module.rules.push({ test: /\.svg$/, use: ['@svgr/webpack'] });
+		return config;
+	},
 };

package.json

@@ -5,6 +5,7 @@
 	"scripts": {
 		"dev": "next dev",
 		"build": "next build",
+		"export": "next build && next export",
 		"start": "next start",
 		"prettify": "prettier --write .",
 		"lint": "next lint"
@@ -20,9 +21,11 @@
 		"react-dom": "^17.0.2",
 		"react-icons": "^4.2.0",
 		"sass": "^1.42.1",
-		"sharp": "^0.29.1"
+		"sharp": "^0.29.1",
+		"swr": "^1.0.1"
 	},
 	"devDependencies": {
+		"@svgr/webpack": "^5.5.0",
 		"@types/node": "^15.6.1",
 		"@types/react": "^17.0.6",
 		"eslint": "^7.27.0",

public/locales/en/404.json

@@ -1,5 +0,0 @@
-{
-	"title": "Page not found",
-	"description": "This page either doesn't exist or has been deleted",
-	"back": "Go back"
-}

public/locales/en/home.json

@@ -1,9 +0,0 @@
-{
-	"title": "Home",
-	"description": "A simple portfolio website to display my projects.",
-	"subtitle": "Hi, I am a full stack web developer",
-	"projects": {
-		"title": "Projects",
-		"button": "Check out my projects"
-	}
-}

public/locales/en/nav.json

@@ -1,6 +0,0 @@
-{
-	"title": "Portfolio",
-	"projects": "Projects",
-	"contact": "Contact",
-	"github": "Source code"
-}

public/locales/nl/404.json

@@ -1,5 +0,0 @@
-{
-	"title": "Pagina niet gevonden",
-	"description": "Deze pagina bestaat niet of is verwijderd",
-	"back": "Ga terug"
-}

public/locales/nl/home.json

@@ -1,9 +0,0 @@
-{
-	"title": "Thuis",
-	"description": "Een simpele portfolio website om mijn projecten te bekijken.",
-	"subtitle": "Hoi, Ik ben een full stack web developer",
-	"projects": {
-		"title": "Projecten",
-		"button": "Bekijk mijn projecten"
-	}
-}

public/locales/nl/nav.json

@@ -1,6 +0,0 @@
-{
-	"title": "Portfolio",
-	"projects": "Projecten",
-	"contact": "Contact",
-	"github": "Bron code"
-}

public/manifest.json

@@ -3,7 +3,7 @@
 	"name": "Guus van Meerveld's portfolio",
 	"icons": [
 		{
-			"src": "/assets/images/profile-192.png",
+			"src": "/favicon.ico",
 			"type": "image/png",
 			"sizes": "192x192"
 		}
@@ -13,4 +13,4 @@
 	"scope": "/",
 	"theme_color": "#388e3c",
 	"description": "A simple portfolio website to display my projects."
-}
+}

src/components/Footer.tsx

@@ -1,26 +1,21 @@
-import Image from 'next/image';
 import Link from 'next/link';
 
 import { FaTwitter, FaYoutube, FaCoffee, FaGithub } from 'react-icons/fa';
 
 import { FC } from 'react';
 
+import { ProfileImage } from '@svg/index';
+
 import styles from './Footer.module.scss';
 
 const Footer: FC = () => {
 	return (
 		<footer className={styles.body}>
 			<div className="container">
-				<Image
+				<ProfileImage className={styles.profile + ' profile'} width={50} height={50} />
-					src="/assets/images/profile.svg"
-					width={50}
-					height={50}
-					alt=""
-					className={styles.profile + ' profile'}
-				/>
 				<div className={styles.branding}>
 					Guus van Meerveld <br />
-					&#169; 2021
+					&#169; 2017 - {new Date().getFullYear()}
 				</div>
 				<div className={styles.socials}>
 					<Link passHref href="https://twitter.com/GuusvanMeerveld" aria-label="twitter link">

src/components/Navbar.module.scss

@@ -21,9 +21,8 @@
 .header {
 	flex: 1;
 
-	// height: max-content;
+	display: flex;
-
+	align-items: center;
-	font-size: 2rem;
 }
 
 .select {

src/components/Navbar.tsx

@@ -1,38 +1,18 @@
-import { useRouter } from 'next/router';
 import { useTheme } from 'next-themes';
 import Link from 'next/link';
 
-import React, { ChangeEvent, FC } from 'react';
+import { useTranslation } from 'next-i18next';
+
+import React, { FC } from 'react';
 
 import { BiMoon } from 'react-icons/bi';
 import { ImSun } from 'react-icons/im';
 
 import styles from './Navbar.module.scss';
-import { useTranslation } from 'next-i18next';
-
-const LanguageSelector: FC = () => {
-	const router = useRouter();
 
-	const locale = router.locale;
+import { ProfileImage } from '@svg/index';
-
-	const updateLocale = (e: ChangeEvent<HTMLSelectElement>) => {
-		router.push('', '', { locale: e.target.value });
-	};
-
-	return (
-		<select className={styles.select} onChange={updateLocale} defaultValue={locale}>
-			{router.locales.map((locale) => (
-				<option key={locale} value={locale}>
-					{locale.toUpperCase()}
-				</option>
-			))}
-		</select>
-	);
-};
 
 const Navbar: FC = () => {
-	const { t } = useTranslation('nav');
-
 	const { theme, setTheme } = useTheme();
 	const switchTheme = (): void => setTheme(theme == 'dark' ? 'light' : 'dark');
 
@@ -40,22 +20,26 @@ const Navbar: FC = () => {
 		<nav className={styles.bar}>
 			<div className="container">
 				<div className={styles.content}>
-					<div className={styles.header}>{t('title')}</div>
+					<div className={styles.header}>
+						<Link href="/">
+							<a>
+								<ProfileImage className="profile" width={32} height={32} />
+							</a>
+						</Link>
+					</div>
 					<div className={styles.items}>
 						<Link href="/#projects">
-							<a>{t('projects')}</a>
+							<a>Projects</a>
+						</Link>
+						<Link href="/blog">
+							<a>Contact</a>
 						</Link>
-						{/* <Link href="/contact">
-							<a>{t('contact')}</a>
-						</Link> */}
 						<Link href="https://github.com/guusvanmeerveld/portfolio">
-							<a>{t('github')}</a>
+							<a>Github</a>
 						</Link>
 
 						<BiMoon onClick={switchTheme} className={styles.moon} />
 						<ImSun onClick={switchTheme} className={styles.sun} />
-
-						<LanguageSelector />
 					</div>
 				</div>
 			</div>

src/components/Page.tsx

@@ -16,7 +16,7 @@ const Page: FC<{
 			<meta name="description" content={description} />
 			<meta name="keywords" content="guus van meerveld argo magister tempo discord" />
 			<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-			<link rel="apple-touch-icon" sizes="192x192" href="/assets/images/profile-192.png" />
+			<link rel="apple-touch-icon" sizes="192x192" href="/favicon.ico" />
 		</Head>
 		{children}
 	</>

src/components/Project.tsx

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

src/models/svg.d.ts

@@ -0,0 +1,5 @@
+declare module '*svg' {
+	import React from 'react';
+	const SVG: React.VFC<React.SVGProps<SVGSVGElement>>;
+	export default SVG;
+}

src/pages/404.tsx

@@ -7,23 +7,16 @@ import Layout from '@components/Layout';
 import PageBuilder from '@components/PageBuilder';
 
 const NotFound: NextPage = () => {
-	const { t } = useTranslation('404');
+	const title = 'Page not found';
+	const description = "This page either doesn't exist or has been deleted";
 
 	return (
-		<Page title={t('title')} description={t('description')}>
+		<Page title={title} description={description}>
 			<Layout>
-				<PageBuilder button={t('back')} header={t('title')} subtitle={t('description')} />
+				<PageBuilder button="Go back" header={title} subtitle={description} />
 			</Layout>
 		</Page>
 	);
 };
 
-export const getStaticProps: GetStaticProps = async ({ locale }) => {
-	return {
-		props: {
-			...(await serverSideTranslations(locale, ['404', 'nav'])),
-		},
-	};
-};
-
 export default NotFound;

src/pages/index.tsx

@@ -3,36 +3,35 @@ import { GetStaticProps, NextPage } from 'next';
 import axios, { AxiosError } from 'axios';
 import chalk from 'chalk';
 
-import Image from 'next/image';
-
 import { useTranslation } from 'next-i18next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 
+import ProjectModel from '@models/project';
+
 import Layout from '@components/Layout';
 import Page from '@components/Page';
 
 import Project from '@components/Project';
-import ProjectModel from '@models/project';
+
+import { ProfileImage } from '@svg/index';
 
 import styles from './Index.module.scss';
 
 const Home: NextPage<{ projects: ProjectModel[] }> = ({ projects }) => {
-	const { t } = useTranslation('home');
-
 	return (
-		<Page description={t('description')} title={t('title')}>
+		<Page description="A simple portfolio website to display my projects." title="Home">
 			<Layout>
 				<div className={styles.body}>
 					<div className={styles.content + ' container'}>
-						<div className={styles.profile + ' profile'}>
+						<div className={styles.profile}>
-							<Image src="/assets/images/profile.svg" width={100} height={100} alt="" />
+							<ProfileImage height={100} width={100} className="profile" />
 						</div>
 
 						<h1>Guus van Meerveld</h1>
-						<h4 className={styles.subtitle}>{t('subtitle')}</h4>
+						<h4 className={styles.subtitle}>Full-stack developer</h4>
 
 						<a href="#projects" className="button">
-							{t('projects.button')}
+							Check out my projects
 						</a>
 					</div>
 				</div>
@@ -40,7 +39,7 @@ const Home: NextPage<{ projects: ProjectModel[] }> = ({ projects }) => {
 				<div className={styles.projects}>
 					<div className="container">
 						<h1 className={styles.projectsHeader} id="projects">
-							{t('projects.title')}
+							Projects
 						</h1>
 
 						{projects.map((project, i) => {
@@ -54,12 +53,9 @@ const Home: NextPage<{ projects: ProjectModel[] }> = ({ projects }) => {
 	);
 };
 
-export const getStaticProps: GetStaticProps = async ({ locale }) => {
+export const getStaticProps: GetStaticProps = async () => {
-	const translation = await serverSideTranslations(locale, ['home', 'nav']);
+	const projects: ProjectModel[] | undefined = await axios
-
+		.get(`https://${process.env.CDN_ENDPOINT}/portfolio/projects-en.json`)
-	const projects: ProjectModel[] | undefined = await axios(
-		`https://${process.env.CDN_ENDPOINT}/portfolio/projects-${locale}.json`
-	)
 		.then(({ data }) => {
 			console.log(
 				chalk`{magenta event} - retrieved projects from ` +
@@ -78,7 +74,6 @@ export const getStaticProps: GetStaticProps = async ({ locale }) => {
 	if (projects) {
 		return {
 			props: {
-				...translation,
 				projects,
 			},
 		};

src/svg/index.ts

@@ -0,0 +1 @@
+export { default as ProfileImage } from './profile.svg';

tsconfig.json

@@ -3,11 +3,10 @@
 		"baseUrl": "src",
 		"paths": {
 			"@components/*": ["components/*"],
-			
+			"@svg/*": ["svg/*"],
 			"@styles/*": ["styles/*"],
 			"@models/*": ["models/*"],
 			"@config/*": ["config/*"],
-			"@utils/*": ["utils/*"],
 			"@src/*": ["./*"]
 		},
 		"target": "es5",