Enabled strict mode for typescript

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">

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">

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}>

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}

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}>

components/Layout.tsx

@@ -2,25 +2,29 @@ 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,
   h3: H3,
   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 = {

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 {

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">

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

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>

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"

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
 }

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
+}

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",

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

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>

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,