Merge pull request #28 from maxpetretta/dev

Dev

.eslintrc.js

@@ -11,4 +11,12 @@ module.exports = {
   rules: {
     "react/no-unescaped-entities": "off",
   },
+  overrides: [
+    {
+      files: ["*.ts", "*.tsx"],
+      rules: {
+        "no-undef": "off",
+      },
+    },
+  ],
 }

.gitignore

@@ -11,6 +11,7 @@
 # next.js
 /.next/
 /out/
+next-env.d.ts
 
 # production
 /build

components/Accordion.jsx → 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} />

components/Header.jsx → components/Header.tsx

@@ -1,8 +1,8 @@
-import Link from "next/link"
-import Toggle from "./Toggle"
-import TabBar from "./TabBar"
 import { useTheme } from "next-themes"
+import Link from "next/link"
 import { useRouter } from "next/router"
+import TabBar from "./TabBar"
+import Toggle from "./Toggle"
 
 export default function Header() {
   const router = useRouter()
@@ -47,18 +47,20 @@ export default function Header() {
         </a>
       </Link>
       <nav className="flex max-w-lg flex-grow items-center justify-end">
-        {navigation}
-        <Toggle
-          id="toggleTheme"
-          alt="Toggle dark mode"
-          onClick={() => {
-            document.body.classList.add("transition-stop")
-            setTheme(theme === "dark" ? "light" : "dark")
-            setTimeout(() => {
-              document.body.classList.remove("transition-stop")
-            }, 1000)
-          }}
-        />
+        <>
+          {navigation}
+          <Toggle
+            id="toggleTheme"
+            alt="Toggle dark mode"
+            onClick={() => {
+              document.body.classList.add("transition-stop")
+              setTheme(theme === "dark" ? "light" : "dark")
+              setTimeout(() => {
+                document.body.classList.remove("transition-stop")
+              }, 1000)
+            }}
+          />
+        </>
       </nav>
     </header>
   )

components/Heading.jsx → components/Heading.tsx

@@ -1,5 +1,5 @@
 export default function Heading({ tag, children }) {
-  const HTag = `${tag}`
+  const HTag = `${tag}` as keyof JSX.IntrinsicElements
   const anchor = getAnchor(children)
   const link = `#${anchor}`
   return (
@@ -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, "")

components/Post.jsx → components/Post.tsx

@@ -1,6 +1,7 @@
-import Title from "../components/Title"
-import Layout from "../components/Layout"
-import PostCard from "../components/PostCard"
+import { Post as PostType } from "../lib/types"
+import Layout from "./Layout"
+import PostCard from "./PostCard"
+import Title from "./Title"
 
 export default function Post({ meta, children }) {
   return (
@@ -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 {

components/Title.jsx → 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}

components/Toggle.jsx → components/Toggle.tsx

@@ -2,7 +2,6 @@ export default function Toggle({ id, alt, onClick }) {
   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"
-      alt={alt}
       aria-label={"A toggle controlling " + alt}
     >
       <input

lib/jobs.js → lib/jobs.ts

@@ -1,10 +1,11 @@
 import fs from "fs"
 import path from "path"
+import { Job } from "./types"
 
 const dataDirectory = path.join(process.cwd(), "/public/data")
 
-export function getJobs() {
-  const file = fs.readFileSync(dataDirectory + "/jobs.json")
+export function getJobs(): Job[] {
+  const file = fs.readFileSync(dataDirectory + "/jobs.json").toString()
   const jobs = JSON.parse(file)
 
   return jobs

lib/posts.js → 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
 }

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

next.config.js

@@ -28,6 +28,6 @@ const withMDX = require("@next/mdx")({
 module.exports = {
   ...config,
   ...withMDX({
-    pageExtensions: ["js", "jsx", "mdx"],
+    pageExtensions: ["ts", "tsx", "mdx"],
   }),
 }

package.json

@@ -25,6 +25,8 @@
     "shiki": "^0.10.1"
   },
   "devDependencies": {
+    "@types/node": "^18.7.16",
+    "@types/react": "^18.0.19",
     "autoprefixer": "^10.4.2",
     "eslint": "^8.6.0",
     "eslint-config-next": "^12.0.7",
@@ -34,7 +36,8 @@
     "postcss": "^8.4.5",
     "prettier": "^2.5.1",
     "prettier-plugin-tailwindcss": "^0.1.4",
-    "tailwindcss": "^3.0.13"
+    "tailwindcss": "^3.0.13",
+    "typescript": "^4.8.3"
   },
   "lint-staged": {
     "**/*": "prettier --write --ignore-unknown"

pages/_app.tsx

@@ -0,0 +1,13 @@
+import { ThemeProvider } from "next-themes"
+import type { AppProps } from "next/app"
+import "../styles/globals.css"
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <>
+      <ThemeProvider attribute="class" defaultTheme="light">
+        <Component {...pageProps} />
+      </ThemeProvider>
+    </>
+  )
+}