fix typescript a bit

Author: jakubbalas

Makefile

@@ -1,5 +1,5 @@
 install:
-	bun
+	bun install
 
 build:
 	bun build

biome.json

@@ -7,7 +7,7 @@
   "linter": {
     "enabled": true,
     "rules": {
-      "recommended": false,
+      "recommended": true,
       "complexity": {
         "noExtraBooleanCast": "error",
         "noMultipleSpacesInRegularExpressionLiterals": "error",
@@ -68,6 +68,7 @@
     "ignore": ["./node_modules/*", "./.next/*", "./out/*"]
   },
   "javascript": {
+    "jsxRuntime": "transparent",
     "formatter": { "quoteStyle": "double" },
     "globals": ["React"]
   },

bun.lockb

@@ -1,9 +1,8 @@
-module.exports = {
-  typescript: {
-    // !! WARN !!
-    // Dangerously allow production builds to successfully complete even if
-    // your project has type errors.
-    // !! WARN !!
-    ignoreBuildErrors: true,
-  },
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: "export",
+  // typescript: {
+  //   ignoreBuildErrors: true,
+  // },
 };
+module.exports = nextConfig;

next.config.js

@@ -11,6 +11,7 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@opentelemetry/api": "^1.9.0",
+    "@theme-ui/components": "^0.16.2",
     "date-fns": "^4.1.0",
     "next": "13.5.6",
     "react": "^18.2.0",
@@ -19,14 +20,14 @@
   },
   "scripts": {
     "dev": "next dev",
-    "lint-fix": "prettier ./src --write && eslint ./src --fix",
-    "build": "next build && next export",
+    "lint-fix": "bun biome format --write && bun biome lint && tsc --noemit",
+    "build": "next build",
     "start": "next start"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.3",
     "@types/node": "^20.8.9",
-    "@types/react": "^18.2.32",
+    "@types/react": "^18.3.11",
     "typescript": "^5.6.3"
   }
 }

package.json

@@ -1,14 +1,12 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { Box, jsx } from "theme-ui";
-
+import { Box, type BoxProps } from "theme-ui";
 import { Image } from "~/components/image";
+import type { FC } from "react";
 
-type Props = {
+type Props = Omit<BoxProps, "src"> & {
   src: string;
 };
 
-export const Avatar: React.FC<Props> = ({ src, ...props }) => (
+export const Avatar: FC<Props> = ({ src, ...props }) => (
   <Box
     sx={{
       width: ["8rem", "14.4rem"],

src/components/avatar.tsx

@@ -1,7 +1,3 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { jsx } from "theme-ui";
-
 export const ExternalLinkIcon: React.FC = (props) => (
   <svg
     width="1.8rem"
@@ -11,6 +7,7 @@ export const ExternalLinkIcon: React.FC = (props) => (
     sx={{ display: "inline-block", ml: ".5rem" }}
     {...props}
   >
+    <title>External Link Icon</title>
     <path d="M40.5 24H3V72H51V33" stroke="black" strokeWidth="5" />
     <path
       d="M65.4973 9.88384C65.4332 8.50462 64.2631 7.43855 62.8839 7.5027L40.4082 8.54808C39.0289 8.61223 37.9629 9.78231 38.027 11.1615C38.0912 12.5408 39.2612 13.6068 40.6405 13.5427L60.6189 12.6134L61.5481 32.5919C61.6122 33.9711 62.7823 35.0371 64.1615 34.973C65.5408 34.9088 66.6068 33.7388 66.5427 32.3595L65.4973 9.88384ZM23.848 56.6837L64.848 11.6837L61.152 8.31627L20.152 53.3163L23.848 56.6837Z"

src/components/external-link-icon.tsx

@@ -1,10 +1,6 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-
-import { Box, Container, jsx } from "theme-ui";
-
+/** @jsxImportSource theme-ui */
+import { Box, Container, Link } from "theme-ui";
 import { Image } from "~/components/image";
-
 import { Wave } from "./wave";
 
 const SOCIALS = [
@@ -44,7 +40,8 @@ export const Footer = () => (
     <Wave invert />
     <Container>
       {SOCIALS.map((social) => (
-        <a
+        <Link
+          as="a"
           sx={{ mx: "secondary" }}
           target="_blank"
           rel="noopener noreferrer"
@@ -57,7 +54,7 @@ export const Footer = () => (
             src={social.icon}
             alt={social.name}
           />
-        </a>
+        </Link>
       ))}
     </Container>
   </Box>

src/components/footer.tsx

@@ -1,9 +1,11 @@
-import { MouseEvent, useCallback } from "react";
+import { type MouseEvent, useCallback } from "react";
 import { Box, Container, Flex, NavLink } from "theme-ui";
 
 import { Logo } from "./logo";
 
-const MenuLink: React.FC<{ href: string }> = ({ href, children }) => {
+type LinkComponent = React.FC<{ href: string; children: React.ReactNode }>;
+
+const MenuLink: LinkComponent = ({ href, children }) => {
   const goToSection = useCallback(
     (e: MouseEvent) => {
       e.preventDefault();
@@ -26,7 +28,8 @@ const MenuLink: React.FC<{ href: string }> = ({ href, children }) => {
   return (
     <NavLink
       sx={{
-        background: `linear-gradient(0deg, #fff .2rem,transparent 0) no-repeat 50%`,
+        background:
+          "linear-gradient(0deg, #fff .2rem,transparent 0) no-repeat 50%",
         transition: "background-size .3s cubic-bezier(.165,.84,.44,1)",
         backgroundSize: "0 100%",
         p: ".4rem",
@@ -44,7 +47,7 @@ const MenuLink: React.FC<{ href: string }> = ({ href, children }) => {
   );
 };
 
-const MenuButton: React.FC<{ href: string }> = ({ children, href }) => (
+const MenuButton: LinkComponent = ({ children, href }) => (
   <Box
     sx={{
       perspective: "24rem",
@@ -77,10 +80,7 @@ const MenuButton: React.FC<{ href: string }> = ({ children, href }) => (
   </Box>
 );
 
-export const ContentButton: React.FC<{ href: string }> = ({
-  children,
-  href,
-}) => (
+export const ContentButton: LinkComponent = ({ children, href }) => (
   <Box
     sx={{
       perspective: "24rem",

src/components/header.tsx

@@ -1,6 +1,6 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import React from "react";
+import type React from "react";
 import { jsx } from "theme-ui";
 
 type Props = {