prettier nuked EVERYTHING lol

bdsqqq · Mar 19, 2023 · ac11251 · ac11251
1 parent faa5a6a
commit ac11251
Show file tree

Hide file tree

Showing 38 changed files with 2,749 additions and 1,175 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,9 +1,9 @@
 {
-   "extends": ["next/core-web-vitals", "plugin:mdx/recommended"],
-   "settings": {
+  "extends": ["next/core-web-vitals", "plugin:mdx/recommended"],
+  "settings": {
     "mdx/code-blocks": true,
     // optional, if you want to disable language mapper, set it to `false`
     // if you want to override the default language mapper inside, you can provide your own
     "mdx/language-mapper": {}
   }
-}
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,4 +1,4 @@
 {
   "typescript.tsdk": "node_modules\\.pnpm\\[email protected]\\node_modules\\typescript\\lib",
   "typescript.enablePromptUseWorkspaceTsdk": true
-}
+}
diff --git a/app/Grain.tsx b/app/Grain.tsx
@@ -47,10 +47,10 @@ export const Grain = () => {
   }, []);
 
   return (
-    <div className="pointer-events-none z-40 fixed w-full h-full inset-0 overflow-hidden">
+    <div className="pointer-events-none fixed inset-0 z-40 h-full w-full overflow-hidden">
       <div
         ref={grainRef}
-        className="absolute inset-[-200%] w-[400%] h-[400%] bg-[url('/images/framernoise.png')] bg-left-top bg-[length:256px] opacity-[3%]"
+        className="absolute inset-[-200%] h-[400%] w-[400%] bg-[url('/images/framernoise.png')] bg-[length:256px] bg-left-top opacity-[3%]"
       />
     </div>
   );

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -64,11 +64,11 @@ export default function RootLayout({
       <body>
         <div className={`${customFont.className} relative`}>
           <Grain />
-          <div className="max-w-4xl mx-auto relative">
+          <div className="relative mx-auto max-w-4xl">
             <Providers>{children}</Providers>
           </div>
           <div
-            className="pointer-events-none w-full h-full top-0 absolute opacity-[3%] filter blur-[100px] saturate-150"
+            className="pointer-events-none absolute top-0 h-full w-full opacity-[3%] blur-[100px] saturate-150 filter"
             style={{
               backgroundImage:
                 "radial-gradient(at 27% 37%,#3a8bfd 0,transparent 0),radial-gradient(at 97% 21%,#72fe7d 0,transparent 50%),radial-gradient(at 52% 99%,#fd3a4e 0,transparent 50%),radial-gradient(at 10% 29%,#855afc 0,transparent 50%),radial-gradient(at 97% 96%,#e4c795 0,transparent 50%),radial-gradient(at 33% 50%,#8ca8e8 0,transparent 50%),radial-gradient(at 79% 53%,#eea5ba 0,transparent 50%)",

diff --git a/app/page.tsx b/app/page.tsx
@@ -111,20 +111,20 @@ export default async function Home() {
         <Band headline={{ bold: "01", thin: "Work" }}>
           <div className={subGrid()({ mode: "narrow" })}>
             <div className="col-span-full md:col-span-5 lg:col-span-8">
-              <ul className=" flex flex-col -mt-4 hover:text-gray-10 focus-within:text-gray-10 pointer-events-none">
+              <ul className=" pointer-events-none -mt-4 flex flex-col focus-within:text-gray-10 hover:text-gray-10">
                 {projsMeta.map((projMeta) => {
                   return (
                     <li key={projMeta.shortName}>
                       <UnstyledLink
-                        className="block py-4 pointer-events-auto hover:text-gray-12 focus:text-gray-12 transition-colors duration-fast-02 ease-productive-standard group"
+                        className="group pointer-events-auto block py-4 transition-colors duration-fast-02 ease-productive-standard hover:text-gray-12 focus:text-gray-12"
                         href={`/work/${projMeta.urlSlug}`}
                       >
                         <div className="flex flex-col ">
                           <div>
                             <h3 className="inline-block font-bold">
                               {projMeta.name}
                             </h3>{" "}
-                            <span className="inline-block text-xs text-bold tracking-tighter text-gray-11 text-end md:opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform md:-translate-x-4 group-hover:translate-x-0 group-focus:translate-x-0 transition-all duration-moderate-01 ease-productive-standard">
+                            <span className="text-bold inline-block transform text-end text-xs tracking-tighter text-gray-11 transition-all duration-moderate-01 ease-productive-standard group-hover:translate-x-0 group-hover:opacity-100 group-focus:translate-x-0 group-focus:opacity-100 md:-translate-x-4 md:opacity-0">
                               {projMeta.date}
                             </span>
                           </div>
@@ -139,13 +139,13 @@ export default async function Home() {
             </div>
 
             <div className="col-span-full lg:col-start-10 lg:col-end-15">
-              <h2 className="mt-6 md:mt-10 lg:mt-0 font-bold">Writing</h2>
+              <h2 className="mt-6 font-bold md:mt-10 lg:mt-0">Writing</h2>
               <div className="mt-2">
-                <ul className="flex flex-col gap-4 hover:text-gray-10 focus-within:text-gray-10 pointer-events-none">
+                <ul className="pointer-events-none flex flex-col gap-4 focus-within:text-gray-10 hover:text-gray-10">
                   {writingPieces.map((piece) => (
                     <li key={piece.urlSlug}>
                       <UnstyledLink
-                        className="block pointer-events-auto hover:text-gray-12 focus:text-gray-12 transition-colors duration-fast-02 ease-productive-standard leading-none w-fit"
+                        className="pointer-events-auto block w-fit leading-none transition-colors duration-fast-02 ease-productive-standard hover:text-gray-12 focus:text-gray-12"
                         href={`/writing/${piece.urlSlug}`}
                       >
                         <h3 className="inline">{piece.name}</h3>
@@ -174,12 +174,12 @@ export default async function Home() {
 
         <Band headline={{ bold: "02", thin: "Now" }}>
           <div className={subGrid()({ mode: "narrow" })}>
-            <div className="col-start-1 row-start-1 col-span-4 -mt-6">
+            <div className="col-span-4 col-start-1 row-start-1 -mt-6">
               <span className="text-xs font-bold tracking-tighter text-gray-8">
                 Last updated on <time>03 Mar 2023</time>
               </span>
             </div>
-            <div className="col-start-1 col-span-6 lg:col-end-13 row-start-1 flex flex-col gap-y-4">
+            <div className="col-span-6 col-start-1 row-start-1 flex flex-col gap-y-4 lg:col-end-13">
               <MDX
                 components={{
                   Blur,
@@ -199,7 +199,7 @@ export default async function Home() {
                   Blur,
                   strong: (props) => (
                     <span
-                      className="text-gray-8 group-hover/blur:text-gray-12 group-focus/blur:text-gray-12 transition-colors duration-moderate-02 ease-productive-standard"
+                      className="text-gray-8 transition-colors duration-moderate-02 ease-productive-standard group-hover/blur:text-gray-12 group-focus/blur:text-gray-12"
                       {...props}
                     />
                   ),

diff --git a/app/work/bebop/page.tsx b/app/work/bebop/page.tsx
@@ -90,7 +90,7 @@ export default async function Bebop() {
 
       <ProjectLayout projMeta={bebopMeta} nextProjMeta={issMeta}>
         <ProjectBand options={{ padding: "none" }} gridless id="update">
-          <h2 className="text-xl font-bold text-gray-11 uppercase mb-2">
+          <h2 className="mb-2 text-xl font-bold uppercase text-gray-11">
             Update
           </h2>
           <MDX>
@@ -150,10 +150,10 @@ export default async function Bebop() {
               [Visit the website](https://bebop-webjam.vercel.app/). or take a peek with some screenshots:
             `}
           </MDX>
-          <div className="grid grid-cols-4 items-center min-h-0 gap-2 my-1">
+          <div className="my-1 grid min-h-0 grid-cols-4 items-center gap-2">
             <div className="col-start-1 col-end-2">
               <Image
-                className="z-[31] relative border overflow-hidden border-gray-3 rounded-sm"
+                className="relative z-[31] overflow-hidden rounded-sm border border-gray-3"
                 src={smartphoneScreenshot}
                 width="1440"
                 height="3040"
@@ -163,7 +163,7 @@ export default async function Bebop() {
             </div>
             <div className="col-start-2 col-end-5">
               <Image
-                className="z-[31] relative border overflow-hidden border-gray-3 rounded-sm"
+                className="relative z-[31] overflow-hidden rounded-sm border border-gray-3"
                 src={desktopScreenshot}
                 width="1200"
                 height="800"

diff --git a/app/work/ibm/page.tsx b/app/work/ibm/page.tsx
@@ -82,7 +82,7 @@ export default async function IBM() {
       <div className="flex flex-col gap-20">
         <Band gridless id="context">
           <div className={cx(grid({ mode: "narrow" }))}>
-            <div className="text-xl col-span-5 lg:col-span-9">
+            <div className="col-span-5 text-xl lg:col-span-9">
               <MDX
                 components={{
                   strong: ({ children }) => (
@@ -105,7 +105,7 @@ export default async function IBM() {
               //"hover:text-gray-10 focus-within:text-gray-10"
             )}
           >
-            <li className="col-span-4 lg:col-span-8 cursor-text">
+            <li className="col-span-4 cursor-text lg:col-span-8">
               {/* <UnstyledLink
                   href="/work/ibm/think2022"
                   className="block pointer-events-auto hover:text-gray-12 focus:text-gray-12 transition-colors duration-fast-02 ease-productive-standard"
@@ -162,7 +162,7 @@ export default async function IBM() {
                     <h2 className="font-semibold">{children}</h2>
                   ),
                   ol: ({ children }) => (
-                    <ol className="list-decimal list-outside marker:text-gray-8 space-y-2">
+                    <ol className="list-outside list-decimal space-y-2 marker:text-gray-8">
                       {children}
                     </ol>
                   ),
@@ -182,11 +182,11 @@ export default async function IBM() {
         </Band>
         <Band gridless id="people">
           <div className={cx(grid({ mode: "narrow" }), "gap-y-20")}>
-            <div className="col-span-6 lg:col-start-1 lg:col-span-8 space-y-4">
+            <div className="col-span-6 space-y-4 lg:col-span-8 lg:col-start-1">
               <MDX
                 components={{
                   ol: ({ children }) => (
-                    <ol className="list-decimal list-outside marker:text-gray-8 space-y-2">
+                    <ol className="list-outside list-decimal space-y-2 marker:text-gray-8">
                       {children}
                     </ol>
                   ),
@@ -203,12 +203,12 @@ export default async function IBM() {
                 `}
               </MDX>
             </div>
-            <div className="md:col-end-9 lg:col-start-5 col-span-5 lg:col-span-12 space-y-4">
+            <div className="col-span-5 space-y-4 md:col-end-9 lg:col-span-12 lg:col-start-5">
               <MDX
                 components={{
                   Blur: Blur,
                   strong: ({ children }) => (
-                    <span className="text-gray-8 group-hover/blur:text-gray-12 group-focus/blur:text-gray-12 transition-colors duration-moderate-02 ease-productive-standard">
+                    <span className="text-gray-8 transition-colors duration-moderate-02 ease-productive-standard group-hover/blur:text-gray-12 group-focus/blur:text-gray-12">
                       {children}
                     </span>
                   ),

diff --git a/app/work/iss/page.tsx b/app/work/iss/page.tsx
@@ -100,7 +100,7 @@ export default async function Bebop() {
           <MDX
             components={{
               h4: ({ children }) => (
-                <h4 className="text-xl mb-4 font-bold">{children}</h4>
+                <h4 className="mb-4 text-xl font-bold">{children}</h4>
               ),
               del: ({ children }) => (
                 <del className="text-gray-8">{children}</del>
@@ -134,10 +134,10 @@ export default async function Bebop() {
               To keep the experience I wanted for users with cutting-edge browsers without sacrificing the experience for anyone, I leveraged the "@supports" media query to make the blur effect an incremental enhancement.
             `}
           </MDX>
-          <div className="grid grid-cols-2 gap-2 my-2">
+          <div className="my-2 grid grid-cols-2 gap-2">
             <figure className="col-start-1">
               <Image
-                className="z-[31] relative border overflow-hidden border-gray-3 rounded-sm"
+                className="relative z-[31] overflow-hidden rounded-sm border border-gray-3"
                 layout="responsive"
                 width="310"
                 height="310"
@@ -146,7 +146,7 @@ export default async function Bebop() {
                 alt=""
               />
               <figcaption>
-                <span className="text-sm italic tracking-wide text-gray-10 inline-block text-center mt-1">
+                <span className="mt-1 inline-block text-center text-sm italic tracking-wide text-gray-10">
                   <MDX>
                     {`The UI in browsers that support filter properties blurs elements behind it.`}
                   </MDX>
@@ -155,7 +155,7 @@ export default async function Bebop() {
             </figure>
             <figure className="col-start-2">
               <Image
-                className="z-[31] relative border overflow-hidden border-gray-3 rounded-sm"
+                className="relative z-[31] overflow-hidden rounded-sm border border-gray-3"
                 layout="responsive"
                 width="310"
                 height="310"
@@ -165,7 +165,7 @@ export default async function Bebop() {
               />
 
               <figcaption>
-                <span className="text-sm italic tracking-wide text-gray-10 inline-block text-center mt-1">
+                <span className="mt-1 inline-block text-center text-sm italic tracking-wide text-gray-10">
                   <MDX>
                     {`While the UI in browsers that don’t support filters, fallbacks into a solid color.`}
                   </MDX>
@@ -180,7 +180,7 @@ export default async function Bebop() {
         <ProjectBand headline={{ bold: "03", thin: "Result" }}>
           <figure className="mb-4">
             <Image
-              className="z-[31] relative border overflow-hidden border-gray-3 rounded-sm"
+              className="relative z-[31] overflow-hidden rounded-sm border border-gray-3"
               layout="responsive"
               width="500"
               height="851"

diff --git a/app/work/page.tsx b/app/work/page.tsx
@@ -19,23 +19,23 @@ export default function Page() {
         <ul
           className={cx(
             grid(),
-            "hover:text-gray-10 focus-within:text-gray-10 pointer-events-none"
+            "pointer-events-none focus-within:text-gray-10 hover:text-gray-10"
           )}
         >
           {projects.map((p) => {
             return (
               <li
-                className="col-span-4 lg:col-span-8 -mx-4 px-0 [&>a]:px-4"
+                className="col-span-4 -mx-4 px-0 lg:col-span-8 [&>a]:px-4"
                 key={p.shortName}
               >
                 <UnstyledLink
-                  className="block py-4 pointer-events-auto hover:text-gray-12 focus:text-gray-12 transition-colors duration-fast-02 ease-productive-standard group"
+                  className="group pointer-events-auto block py-4 transition-colors duration-fast-02 ease-productive-standard hover:text-gray-12 focus:text-gray-12"
                   href={`/work/${p.urlSlug}`}
                 >
                   <div className="flex flex-col ">
                     <div>
                       <h2 className="inline-block font-bold">{p.name}</h2>{" "}
-                      <span className="inline-block text-xs text-bold tracking-tighter text-gray-11 text-end md:opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform md:-translate-x-4 group-hover:translate-x-0 group-focus:translate-x-0 transition-all duration-moderate-01 ease-productive-standard">
+                      <span className="text-bold inline-block transform text-end text-xs tracking-tighter text-gray-11 transition-all duration-moderate-01 ease-productive-standard group-hover:translate-x-0 group-hover:opacity-100 group-focus:translate-x-0 group-focus:opacity-100 md:-translate-x-4 md:opacity-0">
                         {p.date}
                       </span>
                     </div>

diff --git a/app/work/the-manual/page.tsx b/app/work/the-manual/page.tsx
@@ -94,7 +94,7 @@ export default async function WasmGif() {
             components={{
               ol: (props) => (
                 <ol
-                  className="list-decimal list-outside marker:text-gray-8 space-y-2"
+                  className="list-outside list-decimal space-y-2 marker:text-gray-8"
                   {...props}
                 />
               ),
@@ -160,7 +160,7 @@ export default async function WasmGif() {
             components={{
               ul: (props) => (
                 <ul
-                  className="list-disc list-outside marker:text-gray-8"
+                  className="list-outside list-disc marker:text-gray-8"
                   {...props}
                 />
               ),

diff --git a/app/writing/not-just-the-basics/page.tsx b/app/writing/not-just-the-basics/page.tsx
@@ -63,13 +63,13 @@ export default async function Basics() {
   return (
     <Container key="basics" backable backAnchor="/writing">
       <Band id="01" gridless>
-        <div className="max-w-prose mx-auto space-y-4">
+        <div className="mx-auto max-w-prose space-y-4">
           <MDX
             components={{
               Blur,
               strong: (props) => <span className="text-gray-12" {...props} />,
               h1: (props) => (
-                <h1 className="text-2xl text-gray-12 mb-8" {...props} />
+                <h1 className="mb-8 text-2xl text-gray-12" {...props} />
               ),
               del: (props) => (
                 <span aria-hidden className="hidden" {...props} />

diff --git a/app/writing/on-writing/page.tsx b/app/writing/on-writing/page.tsx
@@ -63,7 +63,7 @@ export default async function Basics() {
   return (
     <Container backable backAnchor="/writing">
       <Band id="01" gridless>
-        <div className="max-w-prose mx-auto">
+        <div className="mx-auto max-w-prose">
           <MDX>
             {`
                # On ways to write

diff --git a/components/Band.tsx b/components/Band.tsx
@@ -79,7 +79,7 @@ const Band: React.FC<React.PropsWithChildren<BandProps>> = ({
               <Headline bold={headline.bold} thin={headline.thin} />
             </div>
 
-            <div className="md:col-start-2 lg:col-start-3 col-span-full">
+            <div className="col-span-full md:col-start-2 lg:col-start-3">
               {children}
             </div>
           </>
@@ -93,11 +93,11 @@ const Band: React.FC<React.PropsWithChildren<BandProps>> = ({
 
 const Headline = ({ bold, thin }: { bold: string; thin: string }) => {
   return (
-    <h2 className="mb-12 h-max grid items-end md:items-start md:h-min md:sticky top-4 pr-16">
-      <span className="font-bold text-gray-1 [grid-area:1/1/1/1] text-7xl leading-none md:[writing-mode:vertical-lr]">
+    <h2 className="top-4 mb-12 grid h-max items-end pr-16 md:sticky md:h-min md:items-start">
+      <span className="text-7xl font-bold leading-none text-gray-1 [grid-area:1/1/1/1] md:[writing-mode:vertical-lr]">
         {bold}
       </span>
-      <div className="font-bold align-top [grid-area:1/1/1/1] pb-4 md:w-min md:pl-2 md:pb-2 text-lg md:[writing-mode:vertical-lr]">
+      <div className="pb-4 align-top text-lg font-bold [grid-area:1/1/1/1] md:w-min md:pl-2 md:pb-2 md:[writing-mode:vertical-lr]">
         {thin}
       </div>
     </h2>

diff --git a/components/Container.tsx b/components/Container.tsx
@@ -35,7 +35,7 @@ const Container: React.FC<React.PropsWithChildren<ContainerProps>> = ({
           />
         )}
         <GridOverlay />
-        <div className="relative flex flex-col justify-between -mr-2 min-h-[calc(100_-_104px)] w-full">
+        <div className="relative -mr-2 flex min-h-[calc(100_-_104px)] w-full flex-col justify-between">
           <main className="flex flex-col justify-center">{children}</main>
           {/* <Footer /> */}
           <div className="mt-32" />