From d9cf5f1bf50023fed04823b028e67fd060558c97 Mon Sep 17 00:00:00 2001
From: Max Petretta <git@maxpetretta.com>
Date: Fri, 16 Sep 2022 13:53:50 -0400
Subject: [PATCH] Added type definitons to functions

---
 components/Accordion.tsx          |   2 +-
 components/Heading.tsx            |   2 +-
 components/Post.tsx               |   3 +-
 components/Title.tsx              |   2 +-
 lib/jobs.ts                       |   3 +-
 lib/posts.ts                      |   5 +-
 lib/types.ts                      |  23 ++++++
 pages/_document.tsx               | 131 ++++++++++++++----------------
 pages/blog.tsx                    |   7 +-
 pages/index.tsx                   |   5 +-
 public/scripts/fade-in.js         |   2 +-
 public/scripts/update-selector.js |   2 +-
 12 files changed, 101 insertions(+), 86 deletions(-)
 create mode 100644 lib/types.ts

diff --git a/components/Accordion.tsx b/components/Accordion.tsx
index afdada5..9ff6db5 100644
--- a/components/Accordion.tsx
+++ b/components/Accordion.tsx
@@ -60,7 +60,7 @@ export default function Accordion({ job }) {
             dangerouslySetInnerHTML={{ __html: job.description }}
           />
           <ul className="grid grid-cols-3 xs:m-2 md:w-1/3 md:grid-cols-1 md:grid-rows-3">
-            {job.skills.map((skill) => {
+            {job.skills.map((skill: string) => {
               return (
                 <li className=" md:ml-6" key={skill}>
                   <Badge logo={skill} />
diff --git a/components/Heading.tsx b/components/Heading.tsx
index 1bc9db7..5c72d31 100644
--- a/components/Heading.tsx
+++ b/components/Heading.tsx
@@ -16,7 +16,7 @@ export default function Heading({ tag, children }) {
   )
 }
 
-function getAnchor(text) {
+function getAnchor(text: string): string {
   return text
     .toLowerCase()
     .replace(/[^a-z0-9 ]/g, "")
diff --git a/components/Post.tsx b/components/Post.tsx
index 65888fd..37deb84 100644
--- a/components/Post.tsx
+++ b/components/Post.tsx
@@ -1,3 +1,4 @@
+import { Post as PostType } from "../lib/types"
 import Layout from "./Layout"
 import PostCard from "./PostCard"
 import Title from "./Title"
@@ -32,7 +33,7 @@ export default function Post({ meta, children }) {
   )
 }
 
-export function getPostBySlug(slug) {
+export function getPostBySlug(slug: string): PostType {
   const post = require(`../pages/blog/${slug}.mdx`)
 
   return {
diff --git a/components/Title.tsx b/components/Title.tsx
index 31139b8..a5fc50a 100644
--- a/components/Title.tsx
+++ b/components/Title.tsx
@@ -11,7 +11,7 @@ export default function Title({ meta }) {
           })}
         </time>
         <div className="flex">
-          {meta.tags.map((tag) => {
+          {meta.tags.map((tag: string) => {
             return (
               <span className="chip my-1 first:ml-0" key={tag}>
                 {tag}
diff --git a/lib/jobs.ts b/lib/jobs.ts
index b8ca0ad..cb7c2c5 100644
--- a/lib/jobs.ts
+++ b/lib/jobs.ts
@@ -1,9 +1,10 @@
 import fs from "fs"
 import path from "path"
+import { Job } from "./types"
 
 const dataDirectory = path.join(process.cwd(), "/public/data")
 
-export function getJobs() {
+export function getJobs(): Job[] {
   const file = fs.readFileSync(dataDirectory + "/jobs.json").toString()
   const jobs = JSON.parse(file)
 
diff --git a/lib/posts.ts b/lib/posts.ts
index 123d483..2f207c3 100644
--- a/lib/posts.ts
+++ b/lib/posts.ts
@@ -1,9 +1,10 @@
 import fs from "fs"
 import path from "path"
+import { Post } from "./types"
 
 const postDirectory = path.join(process.cwd(), "/pages/blog")
 
-export function getAllPosts() {
+export function getAllPosts(): Post[] {
   const files = fs.readdirSync(postDirectory)
   const posts = files.map((file) => {
     const post = require(`../pages/blog/${file}`)
@@ -13,6 +14,6 @@ export function getAllPosts() {
       ...post.meta,
     }
   })
-
+  console.log(posts)
   return posts
 }
diff --git a/lib/types.ts b/lib/types.ts
new file mode 100644
index 0000000..e5e9fcd
--- /dev/null
+++ b/lib/types.ts
@@ -0,0 +1,23 @@
+export type Job = {
+  id: number
+  company: string
+  title: string
+  startDate: string
+  endDate: string
+  location: string
+  image: string
+  skills: string[]
+  description: string
+}
+
+export type Post = {
+  slug: string
+  title: string
+  description: string
+  date: string
+  tags: string[]
+  image: string
+  alt: string
+  icon: string
+  related: string
+}
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 78151b1..a087e44 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -1,75 +1,62 @@
-import Document, { Head, Html, Main, NextScript } from "next/document"
+import { Head, Html, Main, NextScript } from "next/document"
 import Script from "next/script"
 
-class MyDocument extends Document {
-  static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx)
-    return { ...initialProps }
-  }
-
-  render() {
-    return (
-      <Html lang="en">
-        <Head>
-          {/* Favicons */}
-          <link
-            rel="apple-touch-icon"
-            sizes="180x180"
-            href="/favicons/apple-touch-icon.png"
-          />
-          <link
-            rel="icon"
-            type="image/png"
-            sizes="32x32"
-            href="/favicons/favicon-32x32.png"
-          />
-          <link
-            rel="icon"
-            type="image/png"
-            sizes="16x16"
-            href="/favicons/favicon-16x16.png"
-          />
-          <link rel="manifest" href="/favicons/site.webmanifest" />
-          <link
-            rel="mask-icon"
-            href="/favicons/safari-pinned-tab.svg"
-            color="#4361a2"
-          />
-          <meta name="msapplication-TileColor" content="#c73156" />
-          <meta name="theme-color" content="#111827" />
-          {/* Preconnects */}
-          <link rel="preconnect" href="https://vitals.vercel-insights.com" />
-          <link rel="preconnect" href="https://www.googletagmanager.com" />
-          <link rel="preconnect" href="https://www.google-analytics.com" />
-        </Head>
-        <body>
-          <Main />
-          <NextScript />
-          <Script
-            src="/scripts/fade-in.js"
-            type="module"
-            strategy="beforeInteractive"
-          />
-          <Script src="/scripts/update-selector.js" />
-          <Script src="/scripts/smoothscroll.min.js" />
-          <Script src="/scripts/smoothscroll-anchor.min.js" />
-          <Script
-            src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}
-          />
-          <Script id="gtag">
-            {`
-              window.dataLayer = window.dataLayer || [];
-              function gtag(){dataLayer.push(arguments);}
-              gtag('js', new Date());
-              gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
-                page_path: window.location.pathname,
-              });
-            `}
-          </Script>
-        </body>
-      </Html>
-    )
-  }
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head>
+        {/* Favicons */}
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href="/favicons/apple-touch-icon.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="32x32"
+          href="/favicons/favicon-32x32.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="16x16"
+          href="/favicons/favicon-16x16.png"
+        />
+        <link rel="manifest" href="/favicons/site.webmanifest" />
+        <link
+          rel="mask-icon"
+          href="/favicons/safari-pinned-tab.svg"
+          color="#4361a2"
+        />
+        <meta name="msapplication-TileColor" content="#c73156" />
+        <meta name="theme-color" content="#111827" />
+        {/* Preconnects */}
+        <link rel="preconnect" href="https://vitals.vercel-insights.com" />
+        <link rel="preconnect" href="https://www.googletagmanager.com" />
+        <link rel="preconnect" href="https://www.google-analytics.com" />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+        <Script src="/scripts/fade-in.js" strategy="beforeInteractive" />
+        <Script src="/scripts/update-selector.js" />
+        <Script src="/scripts/smoothscroll.min.js" />
+        <Script src="/scripts/smoothscroll-anchor.min.js" />
+        <Script
+          src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}
+        />
+        <Script id="gtag">
+          {`
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
+              page_path: window.location.pathname,
+            });
+          `}
+        </Script>
+      </body>
+    </Html>
+  )
 }
-
-export default MyDocument
diff --git a/pages/blog.tsx b/pages/blog.tsx
index e8fd0fe..ede10d5 100644
--- a/pages/blog.tsx
+++ b/pages/blog.tsx
@@ -3,6 +3,7 @@ import Entry from "../components/Entry"
 import Layout from "../components/Layout"
 import PostCard from "../components/PostCard"
 import { getAllPosts } from "../lib/posts"
+import { Post } from "../lib/types"
 
 export default function Blog({ posts, postCount, postsByYear, years }) {
   return (
@@ -24,13 +25,13 @@ export default function Blog({ posts, postCount, postsByYear, years }) {
             })}
           </div>
         </section>
-        {years.map((year) => {
+        {years.map((year: string) => {
           return (
             <section key={year}>
               <h2 className="mb-0">{year}</h2>
               <hr className="mt-2 mb-8 md:mt-3 md:mb-10" />
               <ul className="list">
-                {postsByYear[year].map((post) => {
+                {postsByYear[year].map((post: Post) => {
                   return <Entry key={post.slug} post={post} />
                 })}
               </ul>
@@ -60,7 +61,7 @@ export const getStaticProps: GetStaticProps = async () => {
   }
 }
 
-export function getFeaturedPosts(posts) {
+export function getFeaturedPosts(posts: Post[]): Post[] {
   const featured = ["twitt3r", "tech-stack"]
 
   const sorted = posts
diff --git a/pages/index.tsx b/pages/index.tsx
index d0ac419..18ef130 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -5,6 +5,7 @@ import Badge from "../components/Badge"
 import Layout from "../components/Layout"
 import SkillCard from "../components/SkillCard"
 import { getJobs } from "../lib/jobs"
+import { Job } from "../lib/types"
 
 export default function Home({ jobs }) {
   return (
@@ -168,8 +169,8 @@ export default function Home({ jobs }) {
           <p className="mt-14">Languages I know:</p>
           <ul className="fade grid grid-cols-3 md:grid-cols-4 md:gap-2">
             {[
-              "Solidity",
               "TypeScript",
+              "Solidity",
               "Python",
               "Terraform",
               "Java",
@@ -215,7 +216,7 @@ export default function Home({ jobs }) {
           </h2>
           <hr className="mt-2 mb-8 md:mt-3 md:mb-10" />
           <ul className="list">
-            {jobs.map((job) => {
+            {jobs.map((job: Job) => {
               return <Accordion key={job.title} job={job} />
             })}
           </ul>
diff --git a/public/scripts/fade-in.js b/public/scripts/fade-in.js
index 50ce5a7..b4a2616 100644
--- a/public/scripts/fade-in.js
+++ b/public/scripts/fade-in.js
@@ -1,4 +1,4 @@
-export async function fadeIn() {
+async function fadeIn() {
   const entries = document.querySelectorAll(".fade, .animate-fade-in")
   const options = {
     root: null,
diff --git a/public/scripts/update-selector.js b/public/scripts/update-selector.js
index e37fd16..fe09d74 100644
--- a/public/scripts/update-selector.js
+++ b/public/scripts/update-selector.js
@@ -1,4 +1,4 @@
-export async function updateSelector() {
+async function updateSelector() {
   const classes = [
     "translate-x-0",
     "translate-x-full",