Ultracite unsafe fixes

haydenbleasel · Jul 19, 2024 · c3966df · c3966df
1 parent cd6d4db
commit c3966df
Show file tree

Hide file tree

Showing 32 changed files with 89 additions and 110 deletions.
diff --git a/actions/subscribe.ts b/actions/subscribe.ts
@@ -11,7 +11,7 @@ if (!audienceId) {
 }
 
 export const subscribe = async (
-  prevState: never,
+  _prevState: never,
   formData: FormData
 ): Promise<{
   message: string;

diff --git a/app/(pages)/(home)/cards/announcement.tsx b/app/(pages)/(home)/cards/announcement.tsx
@@ -19,14 +19,14 @@ export const AnnouncementCard = async (): Promise<ReactElement> => {
       title="Latest Update"
       className="flex flex-col items-start justify-between gap-4 p-4"
     >
-      <p className="text-neutral-500 dark:text-neutral-400 text-sm">
+      <p className="text-neutral-500 text-sm dark:text-neutral-400">
         {announcement.text}
       </p>
       <Link
         href={announcement.link}
         className={cn(
-          'rounded-full text-sm py-2.5 px-4 font-medium no-underline',
-          'bg-neutral-100 text-neutral-950 placeholder:text-neutral-500 outline-orange-500',
+          'rounded-full px-4 py-2.5 font-medium text-sm no-underline',
+          'bg-neutral-100 text-neutral-950 outline-orange-500 placeholder:text-neutral-500',
           'dark:bg-neutral-900 dark:text-white dark:placeholder-text-neutral-600'
         )}
       >

diff --git a/app/(pages)/(home)/cards/github.tsx b/app/(pages)/(home)/cards/github.tsx
@@ -50,7 +50,7 @@ const GitHubCard: FC = () => {
   return (
     <Card title="GitHub Activity" className="p-4">
       <div className="flex flex-col gap-4">
-        <p className="text-neutral-500 dark:text-neutral-400 text-sm">
+        <p className="text-neutral-500 text-sm dark:text-neutral-400">
           {total} contributions in the last year
         </p>
         <div className="flex flex-col gap-[3px]">

diff --git a/app/(pages)/(home)/cards/spotify.tsx b/app/(pages)/(home)/cards/spotify.tsx
@@ -15,17 +15,17 @@ const SpotifyCard = async (): Promise<ReactElement> => {
   return (
     <Card
       title="Now Listening"
-      className="p-4 flex flex-row md:flex-col md:justify-between gap-4"
+      className="flex flex-row gap-4 p-4 md:flex-col md:justify-between"
     >
       <Image
         src={song.image}
         alt=""
         width={300}
         height={300}
-        className="w-12 h-12 shrink-0 rounded"
+        className="h-12 w-12 shrink-0 rounded"
         unoptimized
       />
-      <p className="text-neutral-500 dark:text-neutral-400 text-sm">
+      <p className="text-neutral-500 text-sm dark:text-neutral-400">
         <Link href={song.href}>{song.name}</Link> by {song.artist}
       </p>
     </Card>

diff --git a/app/(pages)/(home)/cards/steam.tsx b/app/(pages)/(home)/cards/steam.tsx
@@ -15,9 +15,9 @@ const SteamCard = async (): Promise<ReactElement> => {
   return (
     <Card
       title="Recently Played"
-      className="p-4 flex flex-col sm:flex-row justify-between gap-4"
+      className="flex flex-col justify-between gap-4 p-4 sm:flex-row"
     >
-      <div className="text-sm flex flex-col justify-between gap-4">
+      <div className="flex flex-col justify-between gap-4 text-sm">
         <p>
           <Link href={`https://store.steampowered.com/app/${game.id}`}>
             {game.name}
@@ -36,7 +36,7 @@ const SteamCard = async (): Promise<ReactElement> => {
         width={300}
         height={300}
         unoptimized
-        className="rounded m-0 shrink-0"
+        className="m-0 shrink-0 rounded"
       />
     </Card>
   );

diff --git a/app/(pages)/(home)/components/avatar.tsx b/app/(pages)/(home)/components/avatar.tsx
@@ -7,7 +7,7 @@ export const Avatar: FC = () => (
   <Image
     alt=""
     className={cn(
-      'm-0 inline w-8 aspect-square overflow-hidden object-cover rounded-md border rotate-6 -translate-y-0.5',
+      '-translate-y-0.5 m-0 inline aspect-square w-8 rotate-6 overflow-hidden rounded-md border object-cover',
       'border-neutral-200',
       'dark:border-neutral-700'
     )}

diff --git a/app/(pages)/(home)/components/github.tsx b/app/(pages)/(home)/components/github.tsx
@@ -12,16 +12,16 @@ export const GitHub = async (): Promise<ReactElement> => {
   return (
     <div
       className={cn(
-        'not-prose align-text-bottom inline-flex overflow-hidden border rounded-md shadow-[0_1px_8px_0_rgba(0,0,0,0.04)] scale-[0.8] md:scale-100',
+        'not-prose inline-flex scale-[0.8] overflow-hidden rounded-md border align-text-bottom shadow-[0_1px_8px_0_rgba(0,0,0,0.04)] md:scale-100',
         'border-neutral-200',
         'dark:border-neutral-700'
       )}
     >
       <Link
         className={cn(
-          'px-2 py-1.5 border-r shadow-[inset_0_-2px_5px_0_rgba(0,0,0,0.07)] flex items-center justify-center',
-          'bg-neutral-100 border-neutral-200',
-          'dark:bg-neutral-800 dark:border-neutral-700'
+          'flex items-center justify-center border-r px-2 py-1.5 shadow-[inset_0_-2px_5px_0_rgba(0,0,0,0.07)]',
+          'border-neutral-200 bg-neutral-100',
+          'dark:border-neutral-700 dark:bg-neutral-800'
         )}
         href="https://github.com/haydenbleasel"
         aria-label="GitHub"
@@ -34,7 +34,7 @@ export const GitHub = async (): Promise<ReactElement> => {
       </Link>{' '}
       <span
         className={cn(
-          'px-2 py-1.5 text-sm font-medium shadow-[inset_0_-2px_5px_0_rgba(0,0,0,0.07)]',
+          'px-2 py-1.5 font-medium text-sm shadow-[inset_0_-2px_5px_0_rgba(0,0,0,0.07)]',
           'bg-white',
           'dark:bg-neutral-800'
         )}

diff --git a/app/(pages)/(home)/components/location.tsx b/app/(pages)/(home)/components/location.tsx
@@ -15,14 +15,14 @@ export const Location = async (): Promise<ReactElement> => {
       {location}{' '}
       <div
         className={cn(
-          'not-prose align-text-bottom inline-flex overflow-hidden border rounded-md shadow-[0_1px_8px_0_rgba(0,0,0,0.04)] scale-[0.8] md:scale-100',
+          'not-prose inline-flex scale-[0.8] overflow-hidden rounded-md border align-text-bottom shadow-[0_1px_8px_0_rgba(0,0,0,0.04)] md:scale-100',
           'border-neutral-200',
           'dark:border-neutral-700'
         )}
       >
         <span
           className={cn(
-            'px-2 py-1.5 text-sm font-medium shadow-[inset_0_-2px_5px_0_rgba(0,0,0,0.07)]',
+            'px-2 py-1.5 font-medium text-sm shadow-[inset_0_-2px_5px_0_rgba(0,0,0,0.07)]',
             'bg-neutral-100',
             'dark:bg-neutral-800'
           )}
@@ -31,7 +31,7 @@ export const Location = async (): Promise<ReactElement> => {
         </span>{' '}
         <span
           className={cn(
-            'px-2 py-1.5 text-sm font-medium shadow-[inset_0_-2px_5px_0_rgba(0,0,0,0.07)]',
+            'px-2 py-1.5 font-medium text-sm shadow-[inset_0_-2px_5px_0_rgba(0,0,0,0.07)]',
             'bg-white',
             'dark:bg-neutral-800'
           )}

diff --git a/app/(pages)/(home)/components/newsletter.tsx b/app/(pages)/(home)/components/newsletter.tsx
@@ -11,8 +11,8 @@ const SubmitButton: FC = () => {
   return (
     <button
       className={cn(
-        'absolute right-0.5 top-0.5 rounded-full bg-orange-500 text-white text-sm font-medium py-2 px-6 select-none',
-        'disabled:opacity-50 disabled:cursor-not-allowed'
+        'absolute top-0.5 right-0.5 select-none rounded-full bg-orange-500 px-6 py-2 font-medium text-sm text-white',
+        'disabled:cursor-not-allowed disabled:opacity-50'
       )}
       type="submit"
       disabled={pending}
@@ -45,15 +45,15 @@ export const Newsletter: FC = () => {
           pattern=".+@.+\..+"
           required
           className={cn(
-            'rounded-full text-sm py-2.5 pl-4 pr-[94px] w-full',
-            'bg-neutral-100 text-neutral-950 placeholder:text-neutral-500 outline-orange-500',
+            'w-full rounded-full py-2.5 pr-[94px] pl-4 text-sm',
+            'bg-neutral-100 text-neutral-950 outline-orange-500 placeholder:text-neutral-500',
             'dark:bg-neutral-900 dark:text-white dark:placeholder-text-neutral-600'
           )}
         />
         <SubmitButton />
       </form>
       {state.message ? (
-        <p aria-live="polite" className="mt-4 text-sm block m-0">
+        <p aria-live="polite" className="m-0 mt-4 block text-sm">
           {state.message}
         </p>
       ) : undefined}

diff --git a/app/(pages)/(home)/page.tsx b/app/(pages)/(home)/page.tsx
@@ -18,13 +18,13 @@ export const metadata: Metadata = {
 
 const Home: FC = () => (
   <>
-    <h1 className="tracking-tight leading-tight text-3xl sm:text-4xl">
+    <h1 className="text-3xl leading-tight tracking-tight sm:text-4xl">
       Hello <Wave /> I’m Hayden Bleasel <Avatar />. I’m an Australian 🦘 Product
       Designer 🖼️ and Software Engineer <GitHub /> currently based in{' '}
       <Location />.
     </h1>
     <Newsletter />
-    <div className="grid md:grid-cols-3 gap-3 prose-p:m-0 prose-img:m-0">
+    <div className="prose-img:m-0 prose-p:m-0 grid gap-3 md:grid-cols-3">
       <div className="md:col-span-2">
         <GitHubCard />
       </div>

diff --git a/app/(pages)/blog/[slug]/page.tsx b/app/(pages)/blog/[slug]/page.tsx
@@ -62,8 +62,8 @@ const Page: FC<PageProperties> = ({ params }) => {
 
   return (
     <>
-      <div className="flex items-center gap-2 text-neutral-500 dark:text-neutral-400 hover:text-orange-500 dark:hover:text-orange-400">
-        <ArrowLeftToLineIcon className="w-4 h-4 text-inherit" />
+      <div className="flex items-center gap-2 text-neutral-500 hover:text-orange-500 dark:text-neutral-400 dark:hover:text-orange-400">
+        <ArrowLeftToLineIcon className="h-4 w-4 text-inherit" />
         <Link
           className="text-inherit text-sm no-underline hover:text-inherit"
           href="/blog"
@@ -78,7 +78,7 @@ const Page: FC<PageProperties> = ({ params }) => {
           width={1920}
           height={1080}
           alt=""
-          className="m-0 h-full w-full object-cover rounded overflow-hidden"
+          className="m-0 h-full w-full overflow-hidden rounded object-cover"
           priority
           blurDataURL={`data:image/jpg;base64,${page.imageBlur}`}
           placeholder="blur"

diff --git a/app/(pages)/blog/page.tsx b/app/(pages)/blog/page.tsx
@@ -24,15 +24,15 @@ const Post: FC<{
   readonly slug: string;
 }> = ({ title: postTitle, date, slug }) => (
   <Link
-    className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-4 no-underline text-inherit font-normal group transition-colors sm:truncate"
+    className="group flex flex-col gap-1 font-normal text-inherit no-underline transition-colors sm:flex-row sm:items-center sm:gap-4 sm:truncate"
     key={slug}
     href={slug}
   >
-    <p className="m-0 sm:truncate text-neutral-950 dark:text-white font-medium group-hover:text-orange-500 transition-colors">
+    <p className="m-0 font-medium text-neutral-950 transition-colors group-hover:text-orange-500 sm:truncate dark:text-white">
       {postTitle}
     </p>
-    <hr className="hidden sm:block min-w-7 flex-1 m-0 group-hover:border-orange-400 transition-colors" />
-    <p className="shrink-0 m-0 text-sm group-hover:text-orange-400 transition-colors">
+    <hr className="m-0 hidden min-w-7 flex-1 transition-colors group-hover:border-orange-400 sm:block" />
+    <p className="m-0 shrink-0 text-sm transition-colors group-hover:text-orange-400">
       {formatBlogDate(date)}
     </p>
   </Link>

diff --git a/app/(pages)/contact/actions/contact.ts b/app/(pages)/contact/actions/contact.ts
@@ -21,21 +21,19 @@ const kvRestApiUrl = process.env.KV_REST_API_URL;
 const kvRestApiToken = process.env.KV_REST_API_TOKEN;
 
 if (!kvRestApiUrl || !kvRestApiToken) {
-  console.warn(
+  throw new Error(
     'KV_REST_API_URL and KV_REST_API_TOKEN environment variables are not set'
   );
 }
 
 export const contact = async (
-  previousState: never,
+  _previousState: never,
   formData: FormData
 ): Promise<{
   message: string;
 }> => {
   const data = formSchema.parse(Object.fromEntries(formData));
 
-  console.log('📧 Contact form submission', data);
-
   try {
     const ip = headers().get('x-forwarded-for');
     const ratelimit = new Ratelimit({
@@ -52,8 +50,6 @@ export const contact = async (
       );
     }
 
-    console.log('📧 Sending email...');
-
     const response = await resend.emails.send({
       from,
       to,
@@ -62,22 +58,16 @@ export const contact = async (
       text: data.message,
     });
 
-    console.log('📧 Email sent', { response });
-
     if (response.error) {
       throw new Error(response.error.message);
     }
 
-    console.log('📧 Contact form submission successful');
-
     revalidatePath('/contact');
 
     return { message: 'Thanks! Your message has been sent.' };
   } catch (error) {
     const errorMessage = parseError(error);
 
-    console.error('📧 Contact form submission failed', { error: errorMessage });
-
     return { message: errorMessage };
   }
 };
diff --git a/app/(pages)/contact/components/contact-form.tsx b/app/(pages)/contact/components/contact-form.tsx
@@ -15,8 +15,8 @@ const SubmitButton: FC = () => {
       disabled={pending}
       type="submit"
       className={cn(
-        'bg-orange-500 text-white rounded-lg px-6 py-2.5 text-sm font-medium',
-        'disabled:opacity-50 disabled:cursor-not-allowed'
+        'rounded-lg bg-orange-500 px-6 py-2.5 font-medium text-sm text-white',
+        'disabled:cursor-not-allowed disabled:opacity-50'
       )}
     >
       Send message
@@ -79,7 +79,7 @@ export const ContactForm: FC = () => {
         />
         <Select label="Type" name="type" data={typeOptions} />
         <SubmitButton />
-        <output aria-live="polite" className="text-sm block">
+        <output aria-live="polite" className="block text-sm">
           {state.message}
         </output>
       </form>

diff --git a/app/(pages)/contact/page.tsx b/app/(pages)/contact/page.tsx
@@ -15,7 +15,7 @@ export const metadata: Metadata = {
 const Contact: FC = () => (
   <>
     <Header title={title} description={description} />
-    <div className="mt-8 grid gap-8 not-prose">
+    <div className="not-prose mt-8 grid gap-8">
       <ContactForm />
     </div>
   </>

diff --git a/app/(pages)/features/page.tsx b/app/(pages)/features/page.tsx
@@ -24,15 +24,15 @@ const FeatureInner: FC<{
 }> = ({ name, year, location }) => (
   <>
     <p className="m-0 sm:truncate">
-      <span className="text-neutral-950 dark:text-white font-medium group-hover:text-orange-500 transition-colors">
+      <span className="font-medium text-neutral-950 transition-colors group-hover:text-orange-500 dark:text-white">
         {name}
       </span>
-      <span className="text-neutral-500 dark:text-neutral-400 group-hover:text-orange-400 transition-colors">
+      <span className="text-neutral-500 transition-colors group-hover:text-orange-400 dark:text-neutral-400">
         , {location}
       </span>
     </p>
-    <hr className="hidden sm:block min-w-7 flex-1 m-0 group-hover:border-orange-400 transition-colors" />
-    <p className="shrink-0 m-0 text-sm group-hover:text-orange-400 transition-colors">
+    <hr className="m-0 hidden min-w-7 flex-1 transition-colors group-hover:border-orange-400 sm:block" />
+    <p className="m-0 shrink-0 text-sm transition-colors group-hover:text-orange-400">
       {year}
     </p>
   </>

diff --git a/app/(pages)/layout.tsx b/app/(pages)/layout.tsx
@@ -6,7 +6,7 @@ type PageLayoutProperties = {
 
 const PageLayout: FC<PageLayoutProperties> = ({ children }) => (
   <main className="px-4 pt-16 pb-32 sm:pt-32">
-    <div className="space-y-12 prose prose-neutral prose-orange mx-auto dark:prose-invert">
+    <div className="prose prose-neutral prose-orange dark:prose-invert mx-auto space-y-12">
       {children}
     </div>
   </main>

diff --git a/app/(pages)/stack/page.tsx b/app/(pages)/stack/page.tsx
@@ -30,7 +30,7 @@ const Tool: FC<{
       href={data.href}
       key={data.href}
       className={cn(
-        'no-underline items-center flex gap-4 p-4 rounded-lg transition-colors',
+        'flex items-center gap-4 rounded-lg p-4 no-underline transition-colors',
         'hover:bg-neutral-100',
         'dark:hover:bg-neutral-800'
       )}
@@ -47,7 +47,7 @@ const Tool: FC<{
         <div className="flex items-center gap-2">
           <p
             className={cn(
-              'text-sm font-medium',
+              'font-medium text-sm',
               'text-neutral-900',
               'dark:text-neutral-100'
             )}
@@ -57,7 +57,7 @@ const Tool: FC<{
           {data.featured ? (
             <span
               className={cn(
-                'text-xs px-2 rounded-full font-medium',
+                'rounded-full px-2 font-medium text-xs',
                 'bg-neutral-100 text-neutral-700',
                 'dark:bg-neutral-800 dark:text-neutral-300'
               )}
@@ -66,7 +66,7 @@ const Tool: FC<{
             </span>
           ) : undefined}
         </div>
-        <p className="text-sm text-neutral-500 dark:text-neutral-400">
+        <p className="text-neutral-500 text-sm dark:text-neutral-400">
           {data.description}
         </p>
       </div>
@@ -77,12 +77,12 @@ const Tool: FC<{
 const Stack: FC = () => (
   <>
     <Header title={title} description={description} />
-    <div className="mt-8 grid gap-8 not-prose">
+    <div className="not-prose mt-8 grid gap-8">
       {Object.values(stack).map(({ items, type }) => (
         <Card
           key={type}
           title={type}
-          className="p-2 grid sm:grid-cols-2 gap-x-2"
+          className="grid gap-x-2 p-2 sm:grid-cols-2"
         >
           {items.map((item) => (
             <Tool data={item} key={item.name} />