Add footer with copyright (#22)

devinshoemaker · Jan 29, 2021 · 991cb5a · 991cb5a · vercel · Jan 29, 2021
1 parent cce277b
commit 991cb5a
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 5 deletions.
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -0,0 +1,9 @@
+export default function Footer() {
+  return (
+    <footer className="absolute bottom-0 h-16 w-full flex justify-center items-center">
+      <span className="text-gray-900 dark:text-gray-100">
+        Copyright © {new Date().getFullYear()} Devin Shoemaker
+      </span>
+    </footer>
+  );
+}
diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -1,6 +1,6 @@
 export default function Layout({ children }) {
   return (
-    <div className="pl-6 pr-6 pt-20 pb-12 lg:max-w-3xl lg:mx-auto">
+    <div className="pl-6 pr-6 pt-24 pb-24 lg:max-w-3xl lg:mx-auto">
       {children}
     </div>
   );

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,12 +1,14 @@
 import { AppProps } from 'next/dist/next-server/lib/router/router';
+import Footer from '../components/Footer';
 import NavBar from '../components/NavBar';
 import '../styles/globals.css';
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <div>
+    <div className="relative min-h-screen">
       <NavBar />
       <Component {...pageProps} />
+      <Footer />
     </div>
   );
 }

diff --git a/pages/blog/index.tsx b/pages/blog/index.tsx
@@ -20,7 +20,7 @@ export default function Blog({ sortedPostData }) {
       <Head>
         <title>Blog</title>
       </Head>
-      {sortedPostData.map((postData) => (
+      {sortedPostData.map((postData: any, index: number) => (
         <article key={postData.id}>
           <Link href={`/blog/${postData.id}`}>
             <a className="text-6xl text-gray-900 dark:text-gray-100 underline">
@@ -34,7 +34,9 @@ export default function Blog({ sortedPostData }) {
             className={styles.markdown}
             dangerouslySetInnerHTML={{ __html: postData.contentHtml }}
           />
-          <hr className="mt-16 mb-16 border-gray-900 dark:border-gray-100 w-2/3 mx-auto" />
+          {index < sortedPostData.length - 1 && (
+            <hr className="mt-16 mb-16 border-gray-900 dark:border-gray-100 w-2/3 mx-auto" />
+          )}
         </article>
       ))}
     </Layout>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -3,7 +3,7 @@ import Image from 'next/image';
 
 export default function Home() {
   return (
-    <div className="p-12 pt-24">
+    <div className="p-12 pt-24 pb-24">
       <Head>
         <title>Devin Shoemaker</title>
         <link rel="icon" href="/favicon.ico" />