update to @epic-web/config

app/components/arrow-button.tsx

@@ -85,7 +85,7 @@ type ArrowButtonProps = {
 function getBaseProps({ textSize, className }: ArrowButtonBaseProps) {
 	return {
 		className: clsx(
-			'text-primary inline-flex items-center text-left font-medium focus:outline-none cursor-pointer transition',
+			'text-primary inline-flex cursor-pointer items-center text-left font-medium transition focus:outline-none',
 			{
 				'text-xl': textSize === 'medium',
 				'text-lg': textSize === 'small',

app/components/article-card.tsx

@@ -1,13 +1,13 @@
 import { Link } from '@remix-run/react'
 import { clsx } from 'clsx'
-import { getImageBuilder, getImgProps } from '~/images.tsx'
-import { type MdxListItem, type Team } from '~/types.ts'
-import { getBannerAltProp, getBannerTitleProp } from '~/utils/mdx.tsx'
-import { useRootData } from '~/utils/use-root-data.ts'
 import { BlurrableImage } from './blurrable-image.tsx'
 import { ClipboardCopyButton } from './clipboard-copy-button.tsx'
 import { MissingSomething } from './kifs.tsx'
 import { H3 } from './typography.tsx'
+import { getImageBuilder, getImgProps } from '~/images.tsx'
+import { type MdxListItem, type Team } from '~/types.ts'
+import { getBannerAltProp, getBannerTitleProp } from '~/utils/mdx.tsx'
+import { useRootData } from '~/utils/use-root-data.ts'
 
 function ArticleCard({
 	leadingTeam,

app/components/button.tsx

@@ -10,7 +10,7 @@ interface ButtonProps {
 
 function getClassName({ className }: { className?: string }) {
 	return clsx(
-		'group relative inline-flex text-lg font-medium focus:outline-none opacity-100 disabled:opacity-50 transition',
+		'group relative inline-flex text-lg font-medium opacity-100 transition focus:outline-none disabled:opacity-50',
 		className,
 	)
 }

app/components/calls/recorder.tsx

@@ -2,8 +2,6 @@ import { useMachine } from '@xstate/react'
 import gsap from 'gsap'
 import * as React from 'react'
 import { assign, createMachine, send as sendUtil } from 'xstate'
-import { type OptionalTeam } from '~/types.ts'
-import { assertNonNull, getOptionalTeam } from '~/utils/misc.tsx'
 import { Button, LinkButton } from '../button.tsx'
 import { useInterval } from '../hooks/use-interval.tsx'
 import {
@@ -14,6 +12,8 @@ import {
 } from '../icons.tsx'
 import { Tag } from '../tag.tsx'
 import { Paragraph } from '../typography.tsx'
+import { type OptionalTeam } from '~/types.ts'
+import { assertNonNull, getOptionalTeam } from '~/utils/misc.tsx'
 
 // Play around with these values to affect the audio visualisation.
 // Should be able to stream the visualisation back no problem.
@@ -140,7 +140,7 @@ const recorderMachine = createMachine<RecorderContext>(
 				const devices = await navigator.mediaDevices.enumerateDevices()
 				return devices.filter(({ kind }) => kind === 'audioinput')
 			},
-			mediaRecorder: context => (sendBack, receive) => {
+			mediaRecorder: (context) => (sendBack, receive) => {
 				let mediaRecorder: MediaRecorder
 
 				async function go() {
@@ -153,7 +153,7 @@ const recorderMachine = createMachine<RecorderContext>(
 					mediaRecorder = new MediaRecorder(mediaStream)
 					sendBack({ type: 'mediaRecorderCreated', mediaRecorder })
 
-					mediaRecorder.ondataavailable = event => {
+					mediaRecorder.ondataavailable = (event) => {
 						chunks.push(event.data)
 						if (mediaRecorder.state === 'inactive') {
 							sendBack({
@@ -167,7 +167,7 @@ const recorderMachine = createMachine<RecorderContext>(
 
 					mediaRecorder.start()
 
-					receive(event => {
+					receive((event) => {
 						if (event.type === 'pause') {
 							mediaRecorder.pause()
 						} else if (event.type === 'resume') {
@@ -247,7 +247,7 @@ function CallRecorder({
 				<Paragraph className="mb-8">Select your device:</Paragraph>
 				<ul>
 					{state.context.audioDevices.length
-						? state.context.audioDevices.map(device => (
+						? state.context.audioDevices.map((device) => (
 								<li key={device.deviceId}>
 									<Tag
 										onClick={() => {

app/components/calls/submit-recording-form.tsx

@@ -1,8 +1,8 @@
 import { Form, useSubmit } from '@remix-run/react'
 import * as React from 'react'
-import { useRootData } from '~/utils/use-root-data.ts'
 import { Button } from '../button.tsx'
 import { Field } from '../form-elements.tsx'
+import { useRootData } from '~/utils/use-root-data.ts'
 
 type RecordingFormData = {
 	fields: {

app/components/course-card.tsx

@@ -1,9 +1,9 @@
 import { motion, useReducedMotion, type Variants } from 'framer-motion'
-import { getImgProps, type ImageBuilder } from '~/images.tsx'
 import { ArrowLink } from './arrow-button.tsx'
 import { ButtonLink } from './button.tsx'
 import { ArrowIcon } from './icons.tsx'
 import { H2, H3, Paragraph } from './typography.tsx'
+import { getImgProps, type ImageBuilder } from '~/images.tsx'
 import { Themed } from '~/utils/theme.tsx'
 
 const MotionButtonLink = motion(ButtonLink)

app/components/error-boundary.tsx

@@ -17,7 +17,7 @@ export function GeneralErrorBoundary({
 		</p>
 	),
 	statusHandlers,
-	unexpectedErrorHandler = error => <p>{getErrorMessage(error)}</p>,
+	unexpectedErrorHandler = (error) => <p>{getErrorMessage(error)}</p>,
 }: {
 	defaultStatusHandler?: StatusHandler
 	statusHandlers?: Record<number, StatusHandler>

app/components/errors.tsx

@@ -2,12 +2,12 @@ import { useMatches } from '@remix-run/react'
 import { clsx } from 'clsx'
 import errorStack from 'error-stack-parser'
 import * as React from 'react'
-import { type MdxListItem } from '~/types.ts'
+import { ArrowLink } from './arrow-button.tsx'
 import { Facepalm, Grimmacing, MissingSomething } from './kifs.tsx'
 import { BlogSection } from './sections/blog-section.tsx'
 import { HeroSection, type HeroSectionProps } from './sections/hero-section.tsx'
 import { H2, H6 } from './typography.tsx'
-import { ArrowLink } from './arrow-button.tsx'
+import { type MdxListItem } from '~/types.ts'
 import { getErrorMessage } from '~/utils/misc.tsx'
 
 function RedBox({ error }: { error: Error }) {
@@ -30,7 +30,7 @@ function RedBox({ error }: { error: Error }) {
 			<div className="border-lg text-primary relative mx-5vw my-16 max-h-75vh overflow-y-auto rounded-lg bg-red-500 p-12">
 				<H2>{error.message}</H2>
 				<div>
-					{frames.map(frame => (
+					{frames.map((frame) => (
 						<div
 							key={[frame.fileName, frame.lineNumber, frame.columnNumber].join(
 								'-',

app/components/footer.tsx

@@ -1,13 +1,13 @@
 import { Link } from '@remix-run/react'
-import { getImgProps, type ImageBuilder } from '~/images.tsx'
-import { AnchorOrLink } from '~/utils/misc.tsx'
-import { useRootData } from '~/utils/use-root-data.ts'
 import { ConvertKitForm } from '../convertkit/form.tsx'
 import { externalLinks } from '../external-links.tsx'
 import { IconLink } from './icon-link.tsx'
 import { ArrowIcon, GithubIcon, RssIcon, XIcon, YoutubeIcon } from './icons.tsx'
 import { Signature } from './signature.tsx'
 import { H4, H6, Paragraph } from './typography.tsx'
+import { getImgProps, type ImageBuilder } from '~/images.tsx'
+import { AnchorOrLink } from '~/utils/misc.tsx'
+import { useRootData } from '~/utils/use-root-data.ts'
 
 function NewsletterSection() {
 	return (

app/components/hooks/use-element-state.tsx

@@ -20,28 +20,28 @@ function useElementState(): [RefCallback<HTMLElement>, ElementState] {
 		active: false,
 	})
 
-	const setRef: RefCallback<HTMLElement> = useCallback(element => {
+	const setRef: RefCallback<HTMLElement> = useCallback((element) => {
 		ref.current = element
 	}, [])
 
 	useEffect(() => {
 		const el = ref.current
 		if (!el) return
 
-		const pointerenter = () => setState(s => ({ ...s, hover: true }))
-		const pointerleave = () => setState(s => ({ ...s, hover: false }))
-		const focus = () => setState(s => ({ ...s, focus: true }))
-		const blur = () => setState(s => ({ ...s, focus: false }))
+		const pointerenter = () => setState((s) => ({ ...s, hover: true }))
+		const pointerleave = () => setState((s) => ({ ...s, hover: false }))
+		const focus = () => setState((s) => ({ ...s, focus: true }))
+		const blur = () => setState((s) => ({ ...s, focus: false }))
 		const pointerdown = () => {
-			setState(s => ({ ...s, active: true }))
+			setState((s) => ({ ...s, active: true }))
 
 			// pointer events can be cancelled due to which el would never receive
 			// a pointerup nor pointercancel event. Listen on the window for those
 			// after we received the pointerdown event, and only catch it once. But
 			// not with { once: true }, because we want te remove both of them, once
 			// of them has been received.
 			const pointerup = () => {
-				setState(s => ({ ...s, active: false }))
+				setState((s) => ({ ...s, active: false }))
 				window.removeEventListener('pointerup', pointerup)
 				window.removeEventListener('pointercancel', pointerup)
 			}
@@ -55,11 +55,11 @@ function useElementState(): [RefCallback<HTMLElement>, ElementState] {
 				return
 			}
 
-			setState(s => ({ ...s, active: true }))
+			setState((s) => ({ ...s, active: true }))
 
 			// when clicking a link, the keyup doesn't need to come from the keydown
 			// element. We listen on the window instead, but only once.
-			const keyup = () => setState(s => ({ ...s, active: false }))
+			const keyup = () => setState((s) => ({ ...s, active: false }))
 			window.addEventListener('keyup', keyup, { once: true })
 		}
 

app/components/navbar.tsx

@@ -3,15 +3,15 @@ import { Link, useFetcher, useLocation } from '@remix-run/react'
 import { clsx } from 'clsx'
 import { motion, useAnimation, useReducedMotion } from 'framer-motion'
 import * as React from 'react'
+import { useElementState } from './hooks/use-element-state.tsx'
+import { LaptopIcon, MoonIcon, SunIcon } from './icons.tsx'
+import { TeamCircle } from './team-circle.tsx'
 import { kodyProfiles } from '~/images.tsx'
 import { type OptionalTeam } from '~/utils/misc.tsx'
+import { useRequestInfo } from '~/utils/request-info.ts'
 import { useTeam } from '~/utils/team-provider.tsx'
 import { THEME_FETCHER_KEY, useOptimisticThemeMode } from '~/utils/theme.tsx'
 import { useOptionalUser, useRootData } from '~/utils/use-root-data.ts'
-import { useElementState } from './hooks/use-element-state.tsx'
-import { LaptopIcon, MoonIcon, SunIcon } from './icons.tsx'
-import { TeamCircle } from './team-circle.tsx'
-import { useRequestInfo } from '~/utils/request-info.ts'
 
 const LINKS = [
 	{ name: 'Blog', to: '/blog' },
@@ -131,7 +131,7 @@ function MobileMenu() {
 	const popoverRef = React.useRef<HTMLDivElement>(null)
 	return (
 		<div
-			onBlur={event => {
+			onBlur={(event) => {
 				if (!popoverRef.current || !menuButtonRef.current) return
 				if (
 					popoverRef.current.matches(':popover-open') &&
@@ -180,7 +180,7 @@ function MobileMenu() {
 				className="fixed bottom-0 left-0 right-0 top-[128px] m-0 h-[calc(100svh-128px)] w-full"
 			>
 				<div className="bg-primary flex h-full flex-col overflow-y-scroll border-t border-gray-200 pb-12 dark:border-gray-600">
-					{MOBILE_LINKS.map(link => (
+					{MOBILE_LINKS.map((link) => (
 						<Link
 							className="hover:bg-secondary focus:bg-secondary text-primary border-b border-gray-200 px-5vw py-9 hover:text-team-current dark:border-gray-600"
 							key={link.to}
@@ -296,7 +296,7 @@ function Navbar() {
 				</div>
 
 				<ul className="hidden lg:flex">
-					{LINKS.map(link => (
+					{LINKS.map((link) => (
 						<NavLink key={link.to} to={link.to}>
 							{link.name}
 						</NavLink>

app/components/notification-message.tsx

@@ -36,7 +36,7 @@ function NotificationMessage({
 	)
 	const messageFromQuery = queryStringKey && searchParams.get(queryStringKey)
 	// Eslint is wrong here, params.get can return an empty string
-	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+
 	const message = messageFromQuery || children
 	const latestMessageRef = React.useRef(message)
 

app/components/sections/about-section.tsx

@@ -1,7 +1,7 @@
-import { getImgProps, images } from '~/images.tsx'
 import { ArrowLink } from '../arrow-button.tsx'
 import { Grid } from '../grid.tsx'
 import { H2, Paragraph } from '../typography.tsx'
+import { getImgProps, images } from '~/images.tsx'
 
 function AboutSection() {
 	return (

app/components/sections/blog-section.tsx

@@ -1,9 +1,9 @@
 import { clsx } from 'clsx'
-import { type MdxListItem } from '~/types.ts'
 import { ArticleCard } from '../article-card.tsx'
 import { Grid } from '../grid.tsx'
 import { Spacer } from '../spacer.tsx'
 import { HeaderSection } from './header-section.tsx'
+import { type MdxListItem } from '~/types.ts'
 
 interface BlogSectionProps {
 	articles: Array<MdxListItem>

app/components/sections/course-section.tsx

@@ -1,7 +1,7 @@
-import { images } from '~/images.tsx'
 import { CourseCard } from '../course-card.tsx'
 import { Grid } from '../grid.tsx'
 import { HeaderSection } from './header-section.tsx'
+import { images } from '~/images.tsx'
 
 function CourseSection() {
 	return (

app/components/sections/discord-section.tsx

@@ -1,8 +1,8 @@
-import { getImgProps, images } from '~/images.tsx'
 import { ArrowLink } from '../arrow-button.tsx'
 import { Grid } from '../grid.tsx'
 import { DiscordLogo } from '../icons.tsx'
 import { H2 } from '../typography.tsx'
+import { getImgProps, images } from '~/images.tsx'
 
 function DiscordSection() {
 	return (

app/components/sections/featured-section.tsx

@@ -1,11 +1,11 @@
 import { clsx } from 'clsx'
-import { getImgProps, type ImageBuilder } from '~/images.tsx'
-import { type Team } from '~/types.ts'
 import { ArrowLink } from '../arrow-button.tsx'
 import { BlurrableImage } from '../blurrable-image.tsx'
 import { ClipboardCopyButton } from '../clipboard-copy-button.tsx'
 import { Grid } from '../grid.tsx'
 import { H2, H6 } from '../typography.tsx'
+import { getImgProps, type ImageBuilder } from '~/images.tsx'
+import { type Team } from '~/types.ts'
 
 type FeaturedSectionProps = {
 	caption?: string
@@ -89,7 +89,7 @@ function FeaturedSection({
 							</div>
 
 							<div className="mt-12 flex items-center justify-between">
-								{/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */}
+								{}
 								<ArrowLink to={slug ?? href ?? '/'} prefetch="intent">
 									{cta}
 									<div className="focus-ring absolute inset-0 left-0 right-0 z-10 rounded-lg md:-left-12 md:-right-12 lg:left-0 lg:right-0" />

app/components/sections/hero-section.tsx

@@ -1,10 +1,10 @@
 import { type TransformerOption } from '@cld-apis/types'
 import { clsx } from 'clsx'
 import { motion, useReducedMotion, type HTMLMotionProps } from 'framer-motion'
-import { getImgProps, type ImageBuilder } from '~/images.tsx'
 import { ArrowLink } from '../arrow-button.tsx'
 import { Grid } from '../grid.tsx'
 import { H2 } from '../typography.tsx'
+import { getImgProps, type ImageBuilder } from '~/images.tsx'
 import { heroTextAnimation } from '~/utils/animations.ts'
 
 export type HeroSectionProps = {