From 7c2bf618db020aed2df8c1dd8e09b9f5b55cd49b Mon Sep 17 00:00:00 2001
From: Max Petretta <git@maxpetretta.com>
Date: Sun, 18 Sep 2022 22:35:25 -0400
Subject: [PATCH] Enabled strict mode for typescript

---
 components/Accordion.tsx |  3 ++-
 components/Badge.tsx     |  2 +-
 components/Entry.tsx     |  3 ++-
 components/Header.tsx    |  3 +++
 components/Heading.tsx   | 12 ++++++++++--
 components/Layout.tsx    | 16 ++++++++++------
 components/Post.tsx      | 13 ++++++++++---
 components/PostCard.tsx  |  3 ++-
 components/TabBar.tsx    | 20 ++++++++++++--------
 components/Title.tsx     |  4 +++-
 components/Toggle.tsx    | 10 +++++++++-
 lib/posts.ts             |  5 ++---
 lib/types.ts             | 23 ++++++++++++++++++++++-
 package-lock.json        | 19 +++++++++++++++++++
 package.json             |  1 +
 pages/blog.tsx           | 20 +++++++++++++++-----
 pages/index.tsx          |  2 +-
 tsconfig.json            |  2 +-
 18 files changed, 125 insertions(+), 36 deletions(-)

diff --git a/components/Accordion.tsx b/components/Accordion.tsx
index 9ff6db5..1c40f08 100644
--- a/components/Accordion.tsx
+++ b/components/Accordion.tsx
@@ -1,7 +1,8 @@
 import Image from "next/image"
+import { Job } from "../lib/types"
 import Badge from "./Badge"
 
-export default function Accordion({ job }) {
+export default function Accordion({ job }: { job: Job }) {
   return (
     <li className="link m-0 list-none rounded-none p-0" key={job.id}>
       <label className="flex flex-wrap items-center">
diff --git a/components/Badge.tsx b/components/Badge.tsx
index b257cbf..7a53794 100644
--- a/components/Badge.tsx
+++ b/components/Badge.tsx
@@ -1,6 +1,6 @@
 import Image from "next/image"
 
-export default function Badge({ logo }) {
+export default function Badge({ logo }: { logo: string }) {
   return (
     <div className="m-1 flex max-w-xs transform items-center rounded-lg bg-gray-300 shadow-md transition-transform duration-300 hover:-translate-y-2 dark:bg-gray-700">
       <div className="m-1 flex h-6 w-6 items-center justify-center rounded bg-white p-0.5 dark:bg-gray-300 md:m-2 md:h-14 md:w-14 md:rounded-lg md:p-2">
diff --git a/components/Entry.tsx b/components/Entry.tsx
index f2fe87a..0423a71 100644
--- a/components/Entry.tsx
+++ b/components/Entry.tsx
@@ -1,6 +1,7 @@
 import Link from "next/link"
+import { PostMeta } from "../lib/types"
 
-export default function Entry({ post }) {
+export default function Entry({ post }: { post: PostMeta }) {
   return (
     <li className="list-none" key={post.slug}>
       <Link href={"/blog/" + post.slug}>
diff --git a/components/Header.tsx b/components/Header.tsx
index bd1c5aa..c37dfa8 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -34,6 +34,9 @@ export default function Header() {
           className="no-link hidden xs:inline"
           aria-label="A link to the homepage"
         >
+          {
+            // eslint-disable-next-line
+          }
           <img
             width={48}
             height={48}
diff --git a/components/Heading.tsx b/components/Heading.tsx
index 5c72d31..4a33c11 100644
--- a/components/Heading.tsx
+++ b/components/Heading.tsx
@@ -1,6 +1,14 @@
-export default function Heading({ tag, children }) {
+import { ReactNode } from "react"
+
+export default function Heading({
+  tag,
+  children,
+}: {
+  tag: string
+  children: ReactNode
+}) {
   const HTag = `${tag}` as keyof JSX.IntrinsicElements
-  const anchor = getAnchor(children)
+  const anchor = getAnchor(children as string)
   const link = `#${anchor}`
   return (
     <HTag className="group flex items-center" id={anchor}>
diff --git a/components/Layout.tsx b/components/Layout.tsx
index a8cc65e..ac61fc5 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -2,14 +2,16 @@ import { MDXProvider } from "@mdx-js/react"
 import { Tweet } from "mdx-embed"
 import Head from "next/head"
 import { useRouter } from "next/router"
+import { ReactNode } from "react"
+import { HeadingProps, LayoutProps } from "../lib/types"
 import Footer from "./Footer"
 import Header from "./Header"
 import Heading from "./Heading"
 
-const H2 = (props) => <Heading tag="h2" {...props} />
-const H3 = (props) => <Heading tag="h3" {...props} />
-const H4 = (props) => <Heading tag="h4" {...props} />
-const H5 = (props) => <Heading tag="h5" {...props} />
+const H2 = (props: HeadingProps) => <Heading tag="h2" {...props} />
+const H3 = (props: HeadingProps) => <Heading tag="h3" {...props} />
+const H4 = (props: HeadingProps) => <Heading tag="h4" {...props} />
+const H5 = (props: HeadingProps) => <Heading tag="h5" {...props} />
 
 const components = {
   h2: H2,
@@ -17,10 +19,12 @@ const components = {
   h4: H4,
   h5: H5,
   Tweet,
-  pre: (props) => <pre style={{ background: "#2d2a2e" }}>{props.children}</pre>,
+  pre: (props: { children: ReactNode }) => (
+    <pre style={{ background: "#2d2a2e" }}>{props.children}</pre>
+  ),
 }
 
-export default function Layout(props) {
+export default function Layout(props: LayoutProps) {
   const { children, ...pageMeta } = props
   const router = useRouter()
   const meta = {
diff --git a/components/Post.tsx b/components/Post.tsx
index 37deb84..814c892 100644
--- a/components/Post.tsx
+++ b/components/Post.tsx
@@ -1,9 +1,16 @@
-import { Post as PostType } from "../lib/types"
+import { ReactNode } from "react"
+import { PostMeta } from "../lib/types"
 import Layout from "./Layout"
 import PostCard from "./PostCard"
 import Title from "./Title"
 
-export default function Post({ meta, children }) {
+export default function Post({
+  meta,
+  children,
+}: {
+  meta: PostMeta
+  children: ReactNode
+}) {
   return (
     <>
       <Layout
@@ -33,7 +40,7 @@ export default function Post({ meta, children }) {
   )
 }
 
-export function getPostBySlug(slug: string): PostType {
+export function getPostBySlug(slug: string): PostMeta {
   const post = require(`../pages/blog/${slug}.mdx`)
 
   return {
diff --git a/components/PostCard.tsx b/components/PostCard.tsx
index c451abc..a3cb1c1 100644
--- a/components/PostCard.tsx
+++ b/components/PostCard.tsx
@@ -1,7 +1,8 @@
 import Image from "next/image"
 import Link from "next/link"
+import { PostMeta } from "../lib/types"
 
-export default function PostCard({ post }) {
+export default function PostCard({ post }: { post: PostMeta }) {
   return (
     <Link href={"/blog/" + post.slug}>
       <a className="no-link card max-w-md transform flex-col transition duration-300 hover:scale-105 hover:shadow-xl md:w-5/12">
diff --git a/components/TabBar.tsx b/components/TabBar.tsx
index 846271c..4b74aa6 100644
--- a/components/TabBar.tsx
+++ b/components/TabBar.tsx
@@ -1,5 +1,7 @@
-export default function TabBar({ sections }) {
-  var tabs = []
+import { Tabs } from "../lib/types"
+
+export default function TabBar({ sections }: { sections: string[] }) {
+  var tabs: Tabs[] = []
   const widths = ["w-full", "w-1/2", "w-1/3", "w-1/4", "w-1/5", "w-1/6"]
   const classes = [
     "translate-x-0",
@@ -24,12 +26,14 @@ export default function TabBar({ sections }) {
     <div
       className="relative ml-0 flex h-8 flex-1 rounded-lg border-3 border-gray-400 bg-gray-400 text-sm dark:border-gray-700 dark:bg-gray-700 xs:ml-2 md:w-96 md:text-lg"
       onClick={() => {
-        var selector = document.getElementById("selector")
-        selector.classList.remove(...classes)
-        selector.classList.add(current.class, "clicked")
-        setTimeout(() => {
-          selector.classList.remove("clicked")
-        }, 1000)
+        if (document.getElementById("selector")) {
+          var selector = document.getElementById("selector")!
+          selector.classList.remove(...classes)
+          selector.classList.add(current.class, "clicked")
+          setTimeout(() => {
+            selector.classList.remove("clicked")
+          }, 1000)
+        }
       }}
     >
       <div
diff --git a/components/Title.tsx b/components/Title.tsx
index a5fc50a..6f55ef2 100644
--- a/components/Title.tsx
+++ b/components/Title.tsx
@@ -1,4 +1,6 @@
-export default function Title({ meta }) {
+import { PostMeta } from "../lib/types"
+
+export default function Title({ meta }: { meta: PostMeta }) {
   return (
     <>
       <h1 className="mb-3 md:mb-4">{meta.title}</h1>
diff --git a/components/Toggle.tsx b/components/Toggle.tsx
index 4f1c324..08df7f4 100644
--- a/components/Toggle.tsx
+++ b/components/Toggle.tsx
@@ -1,4 +1,12 @@
-export default function Toggle({ id, alt, onClick }) {
+export default function Toggle({
+  id,
+  alt,
+  onClick,
+}: {
+  id: string
+  alt: string
+  onClick: React.MouseEventHandler
+}) {
   return (
     <label
       className="ml-2 inline-flex h-6 w-10 flex-shrink-0 cursor-pointer rounded-full bg-gray-400 align-middle shadow-inner dark:bg-gray-500 xs:h-7 xs:w-12 md:ml-5"
diff --git a/lib/posts.ts b/lib/posts.ts
index 2f207c3..6d17177 100644
--- a/lib/posts.ts
+++ b/lib/posts.ts
@@ -1,10 +1,10 @@
 import fs from "fs"
 import path from "path"
-import { Post } from "./types"
+import { PostMeta } from "../lib/types"
 
 const postDirectory = path.join(process.cwd(), "/pages/blog")
 
-export function getAllPosts(): Post[] {
+export function getAllPosts(): PostMeta[] {
   const files = fs.readdirSync(postDirectory)
   const posts = files.map((file) => {
     const post = require(`../pages/blog/${file}`)
@@ -14,6 +14,5 @@ export function getAllPosts(): Post[] {
       ...post.meta,
     }
   })
-  console.log(posts)
   return posts
 }
diff --git a/lib/types.ts b/lib/types.ts
index e5e9fcd..2ce60e6 100644
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -1,3 +1,5 @@
+import { ReactNode } from "react"
+
 export type Job = {
   id: number
   company: string
@@ -10,7 +12,7 @@ export type Job = {
   description: string
 }
 
-export type Post = {
+export type PostMeta = {
   slug: string
   title: string
   description: string
@@ -21,3 +23,22 @@ export type Post = {
   icon: string
   related: string
 }
+
+export type LayoutProps = {
+  title?: string
+  description?: string
+  image?: string
+  date?: string
+  type?: string
+  children?: React.ReactNode
+}
+
+export type HeadingProps = {
+  tag?: string
+  children: ReactNode
+}
+
+export type Tabs = {
+  section: string
+  class: string
+}
diff --git a/package-lock.json b/package-lock.json
index 65cc2c9..f39b084 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "shiki": "^0.10.1"
       },
       "devDependencies": {
+        "@types/mdx-js__react": "^1.5.5",
         "@types/node": "^18.7.16",
         "@types/react": "^18.0.19",
         "autoprefixer": "^10.4.2",
@@ -848,6 +849,15 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/mdx-js__react": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@types/mdx-js__react/-/mdx-js__react-1.5.5.tgz",
+      "integrity": "sha512-k8pnaP6JXVlQh18HgL5X6sYFNC/qZnzO7R2+HsmwrwUd+JnnsU0d9lyyT0RQrHg1anxDU36S98TI/fsGtmYqqg==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "18.7.16",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.7.16.tgz",
@@ -6599,6 +6609,15 @@
         "@types/unist": "*"
       }
     },
+    "@types/mdx-js__react": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@types/mdx-js__react/-/mdx-js__react-1.5.5.tgz",
+      "integrity": "sha512-k8pnaP6JXVlQh18HgL5X6sYFNC/qZnzO7R2+HsmwrwUd+JnnsU0d9lyyT0RQrHg1anxDU36S98TI/fsGtmYqqg==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/node": {
       "version": "18.7.16",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.7.16.tgz",
diff --git a/package.json b/package.json
index f1a58ae..09f3e95 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "shiki": "^0.10.1"
   },
   "devDependencies": {
+    "@types/mdx-js__react": "^1.5.5",
     "@types/node": "^18.7.16",
     "@types/react": "^18.0.19",
     "autoprefixer": "^10.4.2",
diff --git a/pages/blog.tsx b/pages/blog.tsx
index ede10d5..979a19d 100644
--- a/pages/blog.tsx
+++ b/pages/blog.tsx
@@ -3,9 +3,19 @@ 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"
+import { PostMeta } from "../lib/types"
 
-export default function Blog({ posts, postCount, postsByYear, years }) {
+export default function Blog({
+  posts,
+  postCount,
+  postsByYear,
+  years,
+}: {
+  posts: PostMeta[]
+  postCount: number
+  postsByYear: any
+  years: string[]
+}) {
   return (
     <>
       <Layout title="Blog | Max Petretta">
@@ -31,7 +41,7 @@ export default function Blog({ posts, postCount, postsByYear, years }) {
               <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: Post) => {
+                {postsByYear[year].map((post: PostMeta) => {
                   return <Entry key={post.slug} post={post} />
                 })}
               </ul>
@@ -47,7 +57,7 @@ export default function Blog({ posts, postCount, postsByYear, years }) {
 export const getStaticProps: GetStaticProps = async () => {
   const posts = getAllPosts().reverse()
   const postCount = posts.length
-  let postsByYear = {}
+  let postsByYear: any = {}
 
   posts.map((post) => {
     const year = post.date.split("-")[0]
@@ -61,7 +71,7 @@ export const getStaticProps: GetStaticProps = async () => {
   }
 }
 
-export function getFeaturedPosts(posts: Post[]): Post[] {
+export function getFeaturedPosts(posts: PostMeta[]): PostMeta[] {
   const featured = ["twitt3r", "tech-stack"]
 
   const sorted = posts
diff --git a/pages/index.tsx b/pages/index.tsx
index 18ef130..da5d3ec 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -7,7 +7,7 @@ import SkillCard from "../components/SkillCard"
 import { getJobs } from "../lib/jobs"
 import { Job } from "../lib/types"
 
-export default function Home({ jobs }) {
+export default function Home({ jobs }: { jobs: Job[] }) {
   return (
     <>
       <Layout>
diff --git a/tsconfig.json b/tsconfig.json
index 281d072..fcb9fbf 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,7 +4,7 @@
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": false,
+    "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "incremental": true,