oxfmt (#80)

* oxfmt

* Format

* Sync

* Sync

Author: mskelton

.oxfmtrc.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "printWidth": 80,
+  "singleQuote": false,
+  "semi": false,
+  "objectWrap": "preserve",
+  "quoteProps": "as-needed",
+  "experimentalSortPackageJson": true,
+  "experimentalSortImports": {
+    "newlinesBetween": false,
+    "enabled": true
+  },
+  "ignorePatterns": [
+    ".next/",
+    ".yarn/",
+    "public/",
+    ".yarnrc.yml",
+    "next-env.d.ts"
+  ]
+}

.prettierignore

@@ -2,12 +2,12 @@ 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 { 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 = {

app/(main)/about/page.tsx

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

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

@@ -1,4 +1,4 @@
-import { getPostImage } from "lib/posts"
+import { getPostImage } from "~/lib/posts"
 
 const size = {
   height: 1024,

app/(main)/blog/[slug]/opengraph-image.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 { 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/[slug]/page.tsx

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

app/(main)/blog/meta.ts

@@ -1,8 +1,8 @@
 import { Metadata } from "next"
-import { Card } from "components/Card"
-import { SimpleLayout } from "components/layouts/SimpleLayout"
-import { formatDate } from "lib/date"
-import { getAllPosts } from "lib/posts"
+import { Card } from "~/components/Card"
+import { SimpleLayout } from "~/components/layouts/SimpleLayout"
+import { formatDate } from "~/lib/date"
+import { getAllPosts } from "~/lib/posts"
 
 export const metadata: Metadata = {
   description: `All of my blog posts, even the ones that I might not fully agree with anymore. Software engineering is a process of continuous learning, don’t ever think there isn’t more to learn.`,

app/(main)/blog/page.tsx

@@ -193,39 +193,40 @@ interface CursorProps {
   connection: ClientConnection
 }
 
-export const Cursor = forwardRef<HTMLDivElement, CursorProps>(
-  function Cursor({ connection }, ref) {
-    const hash = new ColorHash({ lightness: 0.3 })
-    const color = hash.hex(connection.username)
-
-    return (
-      <div
-        ref={ref}
-        className={clsx(
-          "fixed flex translate-x-[--x] translate-y-[--y] gap-1 rounded text-xs",
-          // If we don't have any initial coordinates for the user, hide this
-          // cursor. This happens when a new client first connects.
-          connection.coords.x ? "visible" : "invisible",
-        )}
-        style={
-          {
-            "--x": `${connection.coords.x}vw`,
-            "--y": `${connection.coords.y}vh`,
-          } as React.CSSProperties
-        }
+export const Cursor = forwardRef<HTMLDivElement, CursorProps>(function Cursor(
+  { connection },
+  ref,
+) {
+  const hash = new ColorHash({ lightness: 0.3 })
+  const color = hash.hex(connection.username)
+
+  return (
+    <div
+      ref={ref}
+      className={clsx(
+        "fixed flex translate-x-[--x] translate-y-[--y] gap-1 rounded text-xs",
+        // If we don't have any initial coordinates for the user, hide this
+        // cursor. This happens when a new client first connects.
+        connection.coords.x ? "visible" : "invisible",
+      )}
+      style={
+        {
+          "--x": `${connection.coords.x}vw`,
+          "--y": `${connection.coords.y}vh`,
+        } as React.CSSProperties
+      }
+    >
+      <Arrow color={color} />
+
+      <span
+        className="relative -left-1.5 top-4 rounded-sm px-1.5 py-0.5 text-white"
+        style={{ backgroundColor: color }}
       >
-        <Arrow color={color} />
-
-        <span
-          className="relative -left-1.5 top-4 rounded-sm px-1.5 py-0.5 text-white"
-          style={{ backgroundColor: color }}
-        >
-          {connection.username}
-        </span>
-      </div>
-    )
-  },
-)
+        {connection.username}
+      </span>
+    </div>
+  )
+})
 ```
 
 Now that we can display a single cursor, it's time to display them all!

app/(main)/blog/posts/building-figma-multiplayer-cursors/content.mdx

@@ -157,8 +157,7 @@ useEffect(() => {
 
   onScroll()
   window.addEventListener("scroll", onScroll, { passive: true })
-  return () =>
-    window.removeEventListener("scroll", onScroll, { passive: true })
+  return () => window.removeEventListener("scroll", onScroll, { passive: true })
 }, [])
 
 return <header className={isScrolled ? "shadow-lg" : ""}></header>