refactor: use typescript

.eslintrc.js

@@ -19,4 +19,34 @@ module.exports = {
     'react/require-default-props': 'off',
     'react/jsx-props-no-spreading': 'off',
   },
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      parser: '@typescript-eslint/parser',
+      extends: [
+        'plugin:@typescript-eslint/recommended',
+        'plugin:react/recommended',
+        'airbnb',
+        'prettier',
+      ],
+      plugins: ['@typescript-eslint', 'react', 'prettier'],
+      rules: {
+        'prettier/prettier': 'error',
+        'react/jsx-filename-extension': [1, {extensions: ['.tsx']}],
+        'react/prop-types': 'off',
+        'react/require-default-props': 'off',
+        'react/jsx-props-no-spreading': 'off',
+        'no-use-before-define': 'off',
+        '@typescript-eslint/no-use-before-define': 'error',
+        'import/extensions': [
+          'error',
+          'ignorePackages',
+          {ts: 'never', tsx: 'never', js: 'never', jsx: 'never'},
+        ],
+      },
+      settings: {
+        'import/resolver': {typescript: {}},
+      },
+    },
+  ],
 };

.nvmrc

@@ -1 +1 @@
-18
+24

gatsby-browser.tsx

@@ -0,0 +1,12 @@
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import type { GatsbyBrowser } from "gatsby";
+
+export { wrapPageElement } from "./src/utils/wrapPageElement";
+
+export const shouldUpdateScroll: GatsbyBrowser["shouldUpdateScroll"] =
+  () => false;
+
+export const onClientEntry: GatsbyBrowser["onClientEntry"] = () => {
+  gsap.registerPlugin(ScrollTrigger);
+};

gatsby-node.ts

@@ -0,0 +1,121 @@
+import type { GatsbyNode } from "gatsby";
+
+export const onCreateNode: GatsbyNode["onCreateNode"] = ({
+  node,
+  getNodesByType,
+  actions: { createParentChildLink },
+}) => {
+  if (node.internal.type === "contentfulCsv") {
+    const { thumbnail, cover } = node as Record<string, string>;
+
+    const files = getNodesByType("File");
+
+    const file = files.find(
+      (f) => (f as Record<string, string>).relativePath === thumbnail
+    );
+
+    if (file) {
+      createParentChildLink({ parent: node, child: file });
+    }
+    if (cover) {
+      const coverfile = files.find(
+        (f) => (f as Record<string, string>).relativePath === cover
+      );
+
+      if (!coverfile) return;
+
+      createParentChildLink({ parent: node, child: coverfile });
+    }
+  }
+};
+
+export const createResolvers: GatsbyNode["createResolvers"] = ({
+  createResolvers: createResolversFn,
+}) => {
+  createResolversFn({
+    ProjectsCsv: {
+      cover: {
+        type: "File",
+        resolve: async (
+          source: Record<string, string>,
+          _args: unknown,
+          context: Record<string, any>
+        ) => {
+          const { cover } = source;
+
+          const file = await context.nodeModel.findOne({
+            type: "File",
+            query: {
+              filter: {
+                relativePath: {
+                  eq: cover,
+                },
+              },
+            },
+          });
+          return file;
+        },
+      },
+      thumbnail: {
+        type: "File",
+        resolve: async (
+          source: Record<string, string>,
+          _args: unknown,
+          context: Record<string, any>
+        ) => {
+          const { thumbnail } = source;
+
+          const file = await context.nodeModel.findOne({
+            type: "File",
+            query: {
+              filter: {
+                relativePath: {
+                  eq: thumbnail,
+                },
+              },
+            },
+          });
+          return file;
+        },
+      },
+      isPagePublic: {
+        type: "Boolean",
+        resolve: ({ isPagePublic }: { isPagePublic: string }) =>
+          !(
+            !isPagePublic ||
+            isPagePublic === "null" ||
+            isPagePublic === "false" ||
+            isPagePublic === ""
+          ),
+      },
+      roles: {
+        type: ["String"],
+        resolve: ({ roles }: { roles: string }) => roles.split(","),
+      },
+      type: {
+        type: ["String"],
+        resolve: ({ type }: { type: string }) => type.split(","),
+      },
+      team: {
+        type: ["String"],
+        resolve: ({ team }: { team: string }) => team.split(","),
+      },
+    },
+  });
+};
+
+export const createSchemaCustomization: GatsbyNode["createSchemaCustomization"] =
+  ({ actions }) => {
+    const { createTypes } = actions;
+    const typeDefs = `
+    type ProjectsCsv implements Node {
+      isPagePublic: Boolean
+      type: [String]
+      roles: [String]
+      team: [String]
+      cover: File
+      thumbnail: File
+    }
+  `;
+    createTypes(typeDefs);
+  };

gatsby-ssr.tsx

@@ -0,0 +1 @@
+export { wrapPageElement } from "./src/utils/wrapPageElement";

package.json

@@ -21,6 +21,7 @@
     "@reach/router": "^1.3.4",
     "@svgr/webpack": "^6.1.2",
     "@tailwindcss/aspect-ratio": "^0.4.2",
+    "ajv": "^8.18.0",
     "classnames": "^2.3.1",
     "gatsby": "^5.11.0",
     "gatsby-plugin-google-gtag": "^5.11.0",
@@ -38,7 +39,6 @@
     "gatsby-source-sanity": "^7.7.0",
     "gatsby-transformer-sharp": "^5.11.0",
     "gsap": "^3.12.2",
-    "prop-types": "^15.8.0",
     "react": "^18.2.0",
     "react-cookie-consent": "^8.0.1",
     "react-dom": "^18.2.0",
@@ -48,12 +48,20 @@
     "tailwindcss": "^3.0.8"
   },
   "devDependencies": {
+    "@types/node": "^25.4.0",
+    "@types/reach__router": "^1.3.15",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@types/react-helmet": "^6.1.11",
+    "@typescript-eslint/eslint-plugin": "^8.57.0",
+    "@typescript-eslint/parser": "^8.57.0",
     "autoprefixer": "^10.4.1",
     "dotenv": "^16.3.1",
     "eslint": "^8.44.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-standard": "^17.1.0",
+    "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^4.0.0",
@@ -65,6 +73,7 @@
     "postcss": "^8.4.25",
     "prettier": "^3.0.0",
     "prettier-airbnb-config": "^1.0.0",
-    "sharp": "^0.32.1"
+    "sharp": "^0.32.1",
+    "typescript": "^5.9.3"
   }
 }