feat: prettierc

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "jsxBracketSameLine": true
+}

app.config.ts

@@ -1,8 +1,8 @@
-import {defineConfig} from "@solidjs/start/config";
+import { defineConfig } from "@solidjs/start/config";
 /* @ts-ignore */
 import pkg from "@vinxi/plugin-mdx";
 
-const {default: mdx} = pkg;
+const { default: mdx } = pkg;
 export default defineConfig({
   server: {
     baseURL: process.env.BASE_PATH,

postcss.config.js

@@ -3,4 +3,4 @@ export default {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

src/app.css

@@ -9,15 +9,15 @@
 }
 
 .link {
-  @apply text-neutral-400 hover:text-neutral-200 underline underline-offset-4 transition-colors duration-200; 
+  @apply text-neutral-400 hover:text-neutral-200 underline underline-offset-4 transition-colors duration-200;
 }
 
 .retro {
-  background:  repeating-linear-gradient(
+  background: repeating-linear-gradient(
     to bottom,
     #1c1c1c66,
     #1c1c1c66 1px,
     transparent 2px,
     transparent 6px
   );
-}
+}

src/components/Art.tsx

@@ -8,7 +8,12 @@ const AsciiArtConverter: Component<AsciiArtConverterProps> = (props) => {
   const [ascii, setAscii] = createSignal<string>("");
   let canvasRef: HTMLCanvasElement | undefined;
 
-  const toGrayScale = (r: number, g: number, b: number, a: number): number | null => {
+  const toGrayScale = (
+    r: number,
+    g: number,
+    b: number,
+    a: number
+  ): number | null => {
     // Return null for transparent pixels (alpha < 0.1)
     if (a < 25.5) {
       // 25.5 is 10% of 255
@@ -27,7 +32,11 @@ const AsciiArtConverter: Component<AsciiArtConverterProps> = (props) => {
     return height / width;
   };
 
-  const convertToGrayScales = (context: CanvasRenderingContext2D, width: number, height: number): (number | null)[] => {
+  const convertToGrayScales = (
+    context: CanvasRenderingContext2D,
+    width: number,
+    height: number
+  ): (number | null)[] => {
     const imageData = context.getImageData(0, 0, width, height);
     const grayScales: (number | null)[] = [];
 
@@ -39,7 +48,10 @@ const AsciiArtConverter: Component<AsciiArtConverterProps> = (props) => {
       const grayScale = toGrayScale(r, g, b, a);
 
       if (grayScale !== null) {
-        imageData.data[i] = imageData.data[i + 1] = imageData.data[i + 2] = grayScale;
+        imageData.data[i] =
+          imageData.data[i + 1] =
+          imageData.data[i + 2] =
+            grayScale;
       }
       grayScales.push(grayScale);
     }
@@ -54,17 +66,22 @@ const AsciiArtConverter: Component<AsciiArtConverterProps> = (props) => {
   const clampDimensions = (width: number, height: number): [number, number] => {
     const rectifiedWidth = Math.floor(getFontRatio() * width);
     if (height > MAXIMUM_HEIGHT) {
-      const reducedWidth = Math.floor((rectifiedWidth * MAXIMUM_HEIGHT) / height);
+      const reducedWidth = Math.floor(
+        (rectifiedWidth * MAXIMUM_HEIGHT) / height
+      );
       return [reducedWidth, MAXIMUM_HEIGHT];
     }
     if (width > MAXIMUM_WIDTH) {
-      const reducedHeight = Math.floor((height * MAXIMUM_WIDTH) / rectifiedWidth);
+      const reducedHeight = Math.floor(
+        (height * MAXIMUM_WIDTH) / rectifiedWidth
+      );
       return [MAXIMUM_WIDTH, reducedHeight];
     }
     return [rectifiedWidth, height];
   };
 
-  const grayRamp = "$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/|()1{}[]?-_+~<>i!lI;:,\"^`'. ";
+  const grayRamp =
+    "$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/|()1{}[]?-_+~<>i!lI;:,\"^`'. ";
   const rampLength = grayRamp.length;
 
   const getCharacterForGrayScale = (grayScale: number | null): string => {
@@ -75,13 +92,16 @@ const AsciiArtConverter: Component<AsciiArtConverterProps> = (props) => {
   };
 
   const drawAscii = (grayScales: (number | null)[], width: number): void => {
-    const ascii = grayScales.reduce((asciiImage: string, grayScale: number | null, index: number) => {
-      let nextChars = getCharacterForGrayScale(grayScale);
-      if ((index + 1) % width === 0) {
-        nextChars += "\n";
-      }
-      return asciiImage + nextChars;
-    }, "");
+    const ascii = grayScales.reduce(
+      (asciiImage: string, grayScale: number | null, index: number) => {
+        let nextChars = getCharacterForGrayScale(grayScale);
+        if ((index + 1) % width === 0) {
+          nextChars += "\n";
+        }
+        return asciiImage + nextChars;
+      },
+      ""
+    );
     setAscii(ascii);
   };
 

src/components/MagicLink.tsx

@@ -24,7 +24,12 @@ const MagicLink: Component<MagicLinkProps> = (props) => {
 
   return (
     <>
-      <a ref={linkRef} href={props.href} class="link hover:underline relative" onMouseEnter={handleMouseEnter} onMouseLeave={() => setShowPreview(false)}>
+      <a
+        ref={linkRef}
+        href={props.href}
+        class="link hover:underline relative"
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={() => setShowPreview(false)}>
         {props.children}
       </a>
 
@@ -39,7 +44,12 @@ const MagicLink: Component<MagicLinkProps> = (props) => {
               opacity: showPreview() ? "1" : "0",
             }}>
             <div class="bg-neutral-900 p-1 rounded-lg shadow-2xl">
-              <img src={props.previewImage} alt="Preview" class="rounded w-96 h-auto" style="max-height: 12rem" />
+              <img
+                src={props.previewImage}
+                alt="Preview"
+                class="rounded w-96 h-auto"
+                style="max-height: 12rem"
+              />
             </div>
           </div>
         </Portal>

src/entry-server.tsx

@@ -17,13 +17,19 @@ export default createHandler(() => (
           <meta property="og:type" content="website" />
           <meta property="og:url" content="https://flora.tf" />
           <meta property="og:title" content="~/org/flora" />
-          <meta property="og:description" content="random utilities for the web" />
+          <meta
+            property="og:description"
+            content="random utilities for the web"
+          />
           <meta property="og:image" content="/og-image.png" />
 
           <meta property="twitter:card" content="summary_large_image" />
           <meta property="twitter:url" content="https://flora.tf" />
           <meta property="twitter:title" content="~/org/flora" />
-          <meta property="twitter:description" content="random utilities for the web" />
+          <meta
+            property="twitter:description"
+            content="random utilities for the web"
+          />
           <meta property="twitter:image" content="/og-image.png" />
 
           <meta name="theme-color" content="#000000" />