chore: lint

mdx-components.tsx

@@ -1,7 +1,7 @@
 import { type MDXComponents } from 'mdx/types'
 import Image, { type ImageProps } from 'next/image'
 
-export function useMDXComponents(components: MDXComponents) {
+export const useMDXComponents = (components: MDXComponents) => {
   return {
     ...components,
     Image: (props: ImageProps) => <Image {...props} />,

package.json

@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@clerk/nextjs": "^5.7.5",
-    "@clerk/themes": "^2.1.39",
+    "@clerk/themes": "^2.1.40",
     "@headlessui/react": "^1.7.19",
     "@upstash/redis": "^1.34.3",
     "cheerio": "1.0.0-rc.12",
@@ -58,17 +58,17 @@
   "devDependencies": {
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
-    "@cosn/tsc": "^1.24.3",
+    "@cosn/tsc": "^1.25.0",
     "@mapbox/rehype-prism": "^0.9.0",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
     "@next/mdx": "^14.2.16",
     "@playwright/test": "^1.48.2",
     "@tailwindcss/typography": "^0.5.15",
-    "@testing-library/jest-dom": "^6.6.2",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^15.0.7",
     "@types/mdx": "^2.0.13",
-    "@types/node": "^20.17.1",
+    "@types/node": "^20.17.5",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/webpack-env": "^1.18.5",

src/app/about/page.tsx

@@ -16,7 +16,7 @@ import portraitImage from '@/images/portrait.jpg'
 import logger from '@/lib/logger'
 import { siteUrl } from '@/lib/utils'
 
-function SocialLink({
+const SocialLink = ({
   className,
   href,
   children,
@@ -26,7 +26,7 @@ function SocialLink({
   href: string
   icon: React.ComponentType<{ className?: string }>
   children: React.ReactNode
-}) {
+}) => {
   return (
     <li className={clsx(className, 'flex')}>
       <Link
@@ -45,7 +45,7 @@ export const metadata: Metadata = {
   description: 'Hello!',
 }
 
-export default async function About() {
+const About = async () => {
   const user = await currentUser()
   logger.verbose('user', { user })
 
@@ -74,7 +74,7 @@ export default async function About() {
           <div className='mt-6 space-y-7 text-base text-zinc-600 dark:text-zinc-400'>
             <p>I'm an engineer, operator, and entrepreneur.</p>
             <p>
-              Building <span className='font-bold'>Accrual</span>. Previously 
+              Building <span className='font-bold'>Accrual</span>. Previously
               was the CTO at <span className='font-bold'>Brex</span>, where I
               scaled the company from 40 to over 1,000 employees and hundreds of
               millions in annual revenue. I've also worked at{' '}
@@ -236,3 +236,5 @@ export default async function About() {
     </Container>
   )
 }
+
+export default About

src/app/page.tsx

@@ -21,7 +21,7 @@ import { meta } from '@/lib/meta'
 import { type PostWithSlug } from '@/lib/posts'
 import { siteUrl } from '@/lib/utils.ts'
 
-function Post({ post }: { post: PostWithSlug }) {
+const Post = ({ post }: { post: PostWithSlug }) => {
   return (
     <Card as='article'>
       <Card.Title href={`/posts/${post.slug}`}>{post.title}</Card.Title>
@@ -34,20 +34,20 @@ function Post({ post }: { post: PostWithSlug }) {
   )
 }
 
-function SocialLink({
+const SocialLink = ({
   icon: Icon,
   ...props
 }: React.ComponentPropsWithoutRef<typeof Link> & {
   icon: React.ComponentType<{ className?: string }>
-}) {
+}) => {
   return (
     <Link className='group -m-1 p-1' target='_blank' {...props}>
       <Icon className='h-6 w-6 fill-zinc-500 transition group-hover:fill-zinc-600 dark:fill-zinc-400 dark:group-hover:fill-zinc-300' />
     </Link>
   )
 }
 
-function Photos() {
+const Photos = () => {
   const rotations = [
     'rotate-2',
     '-rotate-2',
@@ -80,7 +80,7 @@ function Photos() {
   )
 }
 
-export default async function Home() {
+const Home = async () => {
   const res = await fetch(siteUrl('api/posts'), { next: { tags: ['posts'] } })
   const data = (await res.json()) as { posts: PostWithSlug[] }
   const posts = data.posts.slice(0, 3)
@@ -134,6 +134,8 @@ export default async function Home() {
   )
 }
 
+export default Home
+
 // TODO: Disable for now, revisit later
 // function BriefcaseIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
 //   return (

src/app/portfolio/page.tsx

@@ -205,7 +205,7 @@ const investments: Investment[] = [
   },
 ]
 
-function LinkIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+const LinkIcon = (props: React.ComponentPropsWithoutRef<'svg'>) => {
   return (
     <svg viewBox='0 0 24 24' aria-hidden='true' {...props}>
       <path
@@ -221,7 +221,7 @@ export const metadata: Metadata = {
   description: 'Angel investments',
 }
 
-export default function Portfolio() {
+const Portfolio = () => {
   return (
     <SimpleLayout
       title={metadata.description!}
@@ -260,3 +260,5 @@ export default function Portfolio() {
     </SimpleLayout>
   )
 }
+
+export default Portfolio

src/app/posts/page.tsx

@@ -17,7 +17,7 @@ declare global {
   }
 }
 
-function Post({ post }: { post: PostWithSlug }) {
+const Post = ({ post }: { post: PostWithSlug }) => {
   return (
     <article className='md:grid md:grid-cols-4 md:items-baseline'>
       <Card className='md:col-span-3'>
@@ -50,7 +50,7 @@ export const metadata: Metadata = {
     'Long-form thoughts on building, leadership, and arbitrary topics',
 }
 
-export default async function PostsIndex() {
+const PostsIndex = async () => {
   const res = await fetch(siteUrl('api/posts'), { next: { tags: ['posts'] } })
   const data = (await res.json()) as { posts: PostWithSlug[] }
   const posts = data.posts
@@ -70,3 +70,5 @@ export default async function PostsIndex() {
     </SimpleLayout>
   )
 }
+
+export default PostsIndex

src/app/providers.tsx

@@ -4,7 +4,7 @@ import { usePathname } from 'next/navigation'
 import { ThemeProvider, useTheme } from 'next-themes'
 import { createContext, useEffect, useRef } from 'react'
 
-function usePrevious<T>(value: T) {
+const usePrevious = <T,>(value: T) => {
   const ref = useRef<T>()
 
   useEffect(() => {
@@ -14,13 +14,13 @@ function usePrevious<T>(value: T) {
   return ref.current
 }
 
-function ThemeWatcher() {
+const ThemeWatcher = () => {
   const { resolvedTheme, setTheme } = useTheme()
 
   useEffect(() => {
     const media = window.matchMedia('(prefers-color-scheme: dark)')
 
-    function onMediaChange() {
+    const onMediaChange = () => {
       const systemTheme = media.matches ? 'dark' : 'light'
       if (resolvedTheme === systemTheme) {
         setTheme('system')
@@ -40,7 +40,7 @@ function ThemeWatcher() {
 
 export const AppContext = createContext<{ previousPathname?: string }>({})
 
-export function Providers({ children }: { children: React.ReactNode }) {
+export const Providers = ({ children }: { children: React.ReactNode }) => {
   const pathname = usePathname()
   const previousPathname = usePrevious(pathname)
 

src/components/Button.tsx

@@ -15,11 +15,11 @@ type ButtonProps = {
   | React.ComponentPropsWithoutRef<typeof Link>
 )
 
-export function Button({
+export const Button = ({
   variant = 'primary',
   className,
   ...props
-}: ButtonProps) {
+}: ButtonProps) => {
   className = clsx(
     'inline-flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm outline-offset-2 transition active:transition-none',
     variantStyles[variant],

src/components/Card.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx'
 import Link from 'next/link'
 
-function ChevronRightIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+const ChevronRightIcon = (props: React.ComponentPropsWithoutRef<'svg'>) => {
   return (
     <svg viewBox='0 0 16 16' fill='none' aria-hidden='true' {...props}>
       <path
@@ -14,14 +14,14 @@ function ChevronRightIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
   )
 }
 
-export function Card<T extends React.ElementType = 'div'>({
+export const Card = <T extends React.ElementType = 'div'>({
   as,
   className,
   children,
 }: Omit<React.ComponentPropsWithoutRef<T>, 'as' | 'className'> & {
   as?: T
   className?: string
-}) {
+}) => {
   const Component = as ?? 'div'
 
   return (

src/components/Footer.tsx

@@ -11,20 +11,20 @@ import {
 
 import { meta } from '@/lib/meta'
 
-function SocialLink({
+const SocialLink = ({
   icon: Icon,
   ...props
 }: React.ComponentPropsWithoutRef<typeof Link> & {
   icon: React.ComponentType<{ className?: string }>
-}) {
+}) => {
   return (
     <Link className='group -m-1 p-1' {...props}>
       <Icon className='h-6 w-6 fill-zinc-400 transition hover:fill-teal-500 dark:fill-zinc-500 dark:hover:fill-teal-400' />
     </Link>
   )
 }
 
-export function Footer() {
+export const Footer = () => {
   return (
     <footer className='mt-32 flex-none'>
       <ContainerOuter>