Format

Author: mskelton

.github/workflows/ci.yml

@@ -11,7 +11,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v6
         with:
-          node-version: "22.x"
+          node-version: '22.x'
       - run: yarn install --frozen-lockfile
       - name: Lint
         run: yarn lint
@@ -29,7 +29,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v6
         with:
-          node-version: "22.x"
+          node-version: '22.x'
       - run: yarn install --frozen-lockfile
       - run: yarn playwright install chromium --with-deps
       - run: yarn db:seed

.oxfmtrc.json

@@ -1,7 +1,7 @@
 {
   "$schema": "./node_modules/oxfmt/configuration_schema.json",
   "printWidth": 80,
-  "singleQuote": false,
+  "singleQuote": true,
   "semi": false,
   "objectWrap": "preserve",
   "quoteProps": "as-needed",

app/(main)/about/page.tsx

@@ -1,18 +1,18 @@
-import { EnvelopeIcon } from "@heroicons/react/24/solid"
-import { Metadata } from "@playwright/test"
-import { clsx } from "clsx"
-import Image from "next/image"
-import { Container } from "~/components/Container"
-import { PageTitle } from "~/components/PageTitle"
-import { Prose } from "~/components/Prose"
-import { socials } from "~/components/SocialIcons"
-import portraitImage from "~/images/portrait.jpg"
-import { siteMeta } from "~/lib/siteMeta"
-import Content from "./content.mdx"
+import { EnvelopeIcon } from '@heroicons/react/24/solid'
+import { Metadata } from '@playwright/test'
+import { clsx } from 'clsx'
+import Image from 'next/image'
+import { Container } from '~/components/Container'
+import { PageTitle } from '~/components/PageTitle'
+import { Prose } from '~/components/Prose'
+import { socials } from '~/components/SocialIcons'
+import portraitImage from '~/images/portrait.jpg'
+import { siteMeta } from '~/lib/siteMeta'
+import Content from './content.mdx'
 
 export const metadata: Metadata = {
   description: siteMeta.description,
-  title: "About | Mark Skelton",
+  title: 'About | Mark Skelton',
 }
 
 export interface SocialLinkProps {
@@ -29,7 +29,7 @@ function SocialLink({
   icon: Icon,
 }: SocialLinkProps) {
   return (
-    <li className={clsx(className, "flex")}>
+    <li className={clsx(className, 'flex')}>
       <a
         className="group focusable -m-1 flex rounded-sm p-1 text-sm font-medium text-zinc-800 transition hover:text-indigo-500 dark:text-zinc-200 dark:hover:text-indigo-400"
         href={href}

app/(main)/blog/[slug]/not-found.tsx

@@ -1,8 +1,8 @@
-"use client"
+'use client'
 
-import Link from "next/link"
-import { Button } from "~/components/Button"
-import ErrorPage from "~/components/ErrorPage"
+import Link from 'next/link'
+import { Button } from '~/components/Button'
+import ErrorPage from '~/components/ErrorPage'
 
 export default function PostNotFound() {
   return (

app/(main)/blog/[slug]/opengraph-image.tsx

@@ -1,4 +1,4 @@
-import { getPostImage } from "~/lib/posts"
+import { getPostImage } from '~/lib/posts'
 
 const size = {
   height: 1024,
@@ -8,8 +8,8 @@ const size = {
 export function generateImageMetadata() {
   return [
     {
-      contentType: "image/png",
-      id: "featured",
+      contentType: 'image/png',
+      id: 'featured',
       size,
     },
   ]
@@ -24,7 +24,7 @@ export default async function Image({
   const bytes = await getPostImage(slug)
 
   if (bytes instanceof ArrayBuffer) {
-    const blob = new Blob([bytes], { type: "image/png" })
+    const blob = new Blob([bytes], { type: 'image/png' })
     return new Response(blob)
   }
 

app/(main)/blog/[slug]/page.tsx

@@ -1,7 +1,7 @@
-import Image from "next/image"
-import { PostLayout } from "~/components/layouts/PostLayout"
-import { withOpenGraph } from "~/lib/metadata"
-import { getAllPostSlugs, getPost } from "~/lib/posts"
+import Image from 'next/image'
+import { PostLayout } from '~/components/layouts/PostLayout'
+import { withOpenGraph } from '~/lib/metadata'
+import { getAllPostSlugs, getPost } from '~/lib/posts'
 
 export async function generateStaticParams() {
   const slugs = await getAllPostSlugs()

app/(main)/blog/components/Demo/Demo.tsx

@@ -1,4 +1,4 @@
-import clsx from "clsx"
+import clsx from 'clsx'
 
 export interface DemoProps {
   center?: boolean
@@ -15,9 +15,9 @@ export default function Demo({
     <div className="relative overflow-hidden rounded-lg border border-zinc-200 transition-colors dark:border-zinc-700/80">
       <div
         className={clsx(
-          "not-prose w-full",
-          center ? "flex justify-center" : "",
-          tight ? "" : "p-4",
+          'not-prose w-full',
+          center ? 'flex justify-center' : '',
+          tight ? '' : 'p-4',
         )}
       >
         {children}

app/(main)/blog/components/Demo/index.ts

@@ -1 +1 @@
-export { default } from "./Demo"
+export { default } from './Demo'

app/(main)/blog/components/ImageComparison.tsx

@@ -1,15 +1,15 @@
-"use client"
+'use client'
 
-import clsx from "clsx"
-import Image from "next/image"
-import React, { useState } from "react"
+import clsx from 'clsx'
+import Image from 'next/image'
+import React, { useState } from 'react'
 import {
   ReactCompareSlider,
   ReactCompareSliderHandle,
   ReactCompareSliderHandleProps,
   ReactCompareSliderImageProps,
   styleFitContainer,
-} from "react-compare-slider"
+} from 'react-compare-slider'
 
 const Handle = ReactCompareSliderHandle as React.FC<
   ReactCompareSliderHandleProps & { className: string }
@@ -23,7 +23,7 @@ function CompareImage({
 }: React.ImgHTMLAttributes<HTMLImageElement> & { slug?: string }) {
   return (
     <Image
-      alt={alt ?? ""}
+      alt={alt ?? ''}
       onLoad={onLoad}
       placeholder="blur"
       // eslint-disable-next-line @typescript-eslint/no-require-imports
@@ -56,10 +56,10 @@ export default function ImageComparison({
       className="rounded-xl sm:max-w-[calc(100%+4rem)]"
       handle={
         <Handle
-          buttonStyle={{ borderColor: "currentcolor" }}
+          buttonStyle={{ borderColor: 'currentcolor' }}
           className={clsx(
-            "text-indigo-400 opacity-0 transition",
-            loaded === 2 && "opacity-100",
+            'text-indigo-400 opacity-0 transition',
+            loaded === 2 && 'opacity-100',
           )}
           style={{ color: undefined }}
         />

app/(main)/blog/meta.ts

@@ -1,5 +1,5 @@
-import { Metadata } from "next"
-import type { PostMeta } from "~/components/layouts/PostLayout"
+import { Metadata } from 'next'
+import type { PostMeta } from '~/components/layouts/PostLayout'
 
 export function getMetadata(meta: PostMeta): Metadata {
   return {