From c4f3ae4390b19dbade989ff2376c68de5af351b3 Mon Sep 17 00:00:00 2001
From: Guusvanmeerveld <guusvanmeerveld@live.nl>
Date: Tue, 9 Mar 2021 21:50:13 +0000
Subject: [PATCH] Added 404 page and Layout component

---
 components/Layout.tsx   | 12 ++++++++++++
 package-lock.json       | 14 ++++++++++++++
 package.json            |  1 +
 pages/404.tsx           | 23 +++++++++++------------
 pages/_app.tsx          |  1 +
 pages/binas.tsx         | 21 ++++++++++-----------
 pages/index.tsx         | 13 ++++++-------
 pages/thanks.tsx        | 25 ++++++++++++-------------
 pages/upload.tsx        | 12 ++++++++++++
 public/robots.txt       |  3 ++-
 styles/sass/upload.scss |  3 +++
 11 files changed, 84 insertions(+), 44 deletions(-)
 create mode 100644 components/Layout.tsx
 create mode 100644 pages/upload.tsx
 create mode 100644 styles/sass/upload.scss

diff --git a/components/Layout.tsx b/components/Layout.tsx
new file mode 100644
index 0000000..7963882
--- /dev/null
+++ b/components/Layout.tsx
@@ -0,0 +1,12 @@
+import Navbar from "./Navbar";
+import Footer from "./Footer";
+
+const Layout = ({ children }) => (
+  <>
+    <Navbar />
+    {children}
+    <Footer />
+  </>
+);
+
+export default Layout;
diff --git a/package-lock.json b/package-lock.json
index 35a514e..27cdfb2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "portfolio",
       "version": "0.1.0",
       "dependencies": {
+        "dotenv": "^8.2.0",
         "next": "10.0.8",
         "react": "17.0.1",
         "react-dom": "17.0.1",
@@ -821,6 +822,14 @@
         "npm": ">=1.2"
       }
     },
+    "node_modules/dotenv": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz",
+      "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.3.683",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.683.tgz",
@@ -2978,6 +2987,11 @@
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
       "integrity": "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA=="
     },
+    "dotenv": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz",
+      "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw=="
+    },
     "electron-to-chromium": {
       "version": "1.3.683",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.683.tgz",
diff --git a/package.json b/package.json
index 7c67dc0..7939543 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "dotenv": "^8.2.0",
     "next": "10.0.8",
     "react": "17.0.1",
     "react-dom": "17.0.1",
diff --git a/pages/404.tsx b/pages/404.tsx
index 7d1d455..97601d2 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -1,20 +1,19 @@
 import Page from "../components/Page";
-import Navbar from "../components/Navbar";
-import Footer from "../components/Footer";
+import Layout from "../components/Layout";
 
 const NotFound = () => (
   <Page title="Page not found" description="This page either doesn't exist or has been deleted">
-    <Navbar />
-    <div className="message">
-      <div>
-        <div className="header">Not found</div>
-        <div className="subtitle">This page either doesn't exist or has been deleted</div>
-        <a href="/" className="link button">
-          Go back
-        </a>
+    <Layout>
+      <div className="message">
+        <div>
+          <div className="header">Not found</div>
+          <div className="subtitle">This page either doesn't exist or has been deleted</div>
+          <a href="/" className="link button">
+            Go back
+          </a>
+        </div>
       </div>
-    </div>
-    <Footer />
+    </Layout>
   </Page>
 );
 
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 32dc688..f0a523e 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -4,6 +4,7 @@ import "../styles/raleway.css";
 import "../styles/sass/index.scss";
 import "../styles/sass/thanks.scss";
 import "../styles/sass/binas.scss";
+import "../styles/sass/upload.scss";
 
 function App({ Component, pageProps }) {
   return <Component {...pageProps} />;
diff --git a/pages/binas.tsx b/pages/binas.tsx
index ca9d9a1..8e35aab 100644
--- a/pages/binas.tsx
+++ b/pages/binas.tsx
@@ -1,8 +1,7 @@
 import Page from "../components/Page";
-import Footer from "../components/Footer";
-import Navbar from "../components/Navbar";
 import LazyLoad from "react-lazyload";
 import { Component } from "react";
+import Layout from "../components/Layout";
 
 class Binas extends Component {
   links: string[];
@@ -23,15 +22,15 @@ class Binas extends Component {
   render() {
     return (
       <Page title="Binas" description="Voor wanneer je effe de binas nodig hebt">
-        <Navbar />
-        <div className="binas">
-          {this.links.map((link) => (
-            <LazyLoad height={100} offset={100}>
-              <img src={link} alt="" />
-            </LazyLoad>
-          ))}
-        </div>
-        <Footer />
+        <Layout>
+          <div className="binas">
+            {this.links.map((link) => (
+              <LazyLoad height={100} offset={100}>
+                <img src={link} alt="" />
+              </LazyLoad>
+            ))}
+          </div>
+        </Layout>
       </Page>
     );
   }
diff --git a/pages/index.tsx b/pages/index.tsx
index 5a7c591..c43de2c 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,17 +1,16 @@
 import Page from "../components/Page";
-import Navbar from "../components/Navbar";
 import Landing from "../components/Landing";
 import Projects from "../components/Projects";
 import Contact from "../components/Contact";
-import Footer from "../components/Footer";
+import Layout from "../components/Layout";
 
 const Home = () => (
   <Page description="A simple portfolio website to display my projects." title="Projects">
-    <Navbar />
-    <Landing />
-    <Projects />
-    <Contact />
-    <Footer />
+    <Layout>
+      <Landing />
+      <Projects />
+      <Contact />
+    </Layout>
   </Page>
 );
 
diff --git a/pages/thanks.tsx b/pages/thanks.tsx
index 26672b1..86cc416 100644
--- a/pages/thanks.tsx
+++ b/pages/thanks.tsx
@@ -1,21 +1,20 @@
 import Page from "../components/Page";
-import Navbar from "../components/Navbar";
-import Footer from "../components/Footer";
+import Layout from "../components/Layout";
 
 const Thanks = () => (
   <Page title="Thanks!" description="Thanks for submitting your contact form!">
-    <Navbar />
-    <div className="message">
-      <div>
-        <div className="icon">❤️</div>
-        <div className="header">Thank you!</div>
-        <div className="subtitle">Your submission is greatly appreciated!</div>
-        <a href="/" className="link button">
-          Go back
-        </a>
+    <Layout>
+      <div className="message">
+        <div>
+          <div className="icon">❤️</div>
+          <div className="header">Thank you!</div>
+          <div className="subtitle">Your submission is greatly appreciated!</div>
+          <a href="/" className="link button">
+            Go back
+          </a>
+        </div>
       </div>
-    </div>
-    <Footer />
+    </Layout>
   </Page>
 );
 
diff --git a/pages/upload.tsx b/pages/upload.tsx
new file mode 100644
index 0000000..53c7dc9
--- /dev/null
+++ b/pages/upload.tsx
@@ -0,0 +1,12 @@
+import Page from "../components/Page";
+import Layout from "../components/Layout";
+
+const Upload = () => (
+  <Page title="Upload" description="Upload a custom file to the cdn">
+    <Layout>
+      <div className="container upload"></div>
+    </Layout>
+  </Page>
+);
+
+export default Upload;
diff --git a/public/robots.txt b/public/robots.txt
index ee81536..3cf1db2 100644
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -1 +1,2 @@
-Disallow /binas
\ No newline at end of file
+Disallow /binas
+Disallow /upload
\ No newline at end of file
diff --git a/styles/sass/upload.scss b/styles/sass/upload.scss
new file mode 100644
index 0000000..fe8ff80
--- /dev/null
+++ b/styles/sass/upload.scss
@@ -0,0 +1,3 @@
+.upload {
+  padding-top: 6rem;
+}