From 4683de90ba9e2ee8c67d4d5dc0845c2a30bb87f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Tue, 4 Jun 2024 18:18:24 -0500
Subject: [PATCH] feat: better image alignment and loading performance

---
 src/app/page.tsx           | 24 ++++++++++++++++++-----
 src/core/blitzkit/imgur.ts | 39 +++++++++++++++++++++++++++++++++++++-
 2 files changed, 57 insertions(+), 6 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 51f9e593a..b6dff4504 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,9 +1,9 @@
 import { CaretRightIcon } from '@radix-ui/react-icons';
-import { Button, Flex, Grid, Heading, Text } from '@radix-ui/themes';
+import { Box, Button, Flex, Grid, Heading, Text } from '@radix-ui/themes';
 import Link from 'next/link';
 import PageWrapper from '../components/PageWrapper';
 import { TOOLS } from '../constants/tools';
-import { imgur } from '../core/blitzkit/imgur';
+import { ImgurSize, imgur } from '../core/blitzkit/imgur';
 import { Hero } from './components/Hero';
 
 export default function Page() {
@@ -22,6 +22,10 @@ export default function Page() {
           flow="row-dense"
         >
           {TOOLS.map((tool) => {
+            const size = tool.significant
+              ? ImgurSize.HugeThumbnail
+              : ImgurSize.LargeThumbnail;
+
             return (
               <Flex
                 key={tool.id}
@@ -29,7 +33,7 @@ export default function Page() {
                   position: 'relative',
                   borderRadius: 'var(--radius-2)',
                   overflow: 'hidden',
-                  backgroundImage: `url(${imgur(tool.image, { format: 'jpeg' })})`,
+                  backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size })})`,
                   backgroundSize: 'cover',
                   backgroundPosition: 'center',
                   height: tool.significant ? 'min(320px, 50vh)' : '256px',
@@ -45,11 +49,20 @@ export default function Page() {
                     display: 'flex',
                     width: '100%',
                     height: '100%',
-                    alignItems: 'end',
+                    flexDirection: 'column',
                     textDecoration: 'none',
                     color: 'inherit',
                   }}
                 >
+                  <Box
+                    flexGrow="1"
+                    style={{
+                      backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size })})`,
+                      backgroundSize: 'cover',
+                      backgroundPosition: 'center',
+                    }}
+                  />
+
                   <Flex
                     px={{
                       initial: '6',
@@ -66,7 +79,8 @@ export default function Page() {
                     }}
                     style={{
                       backgroundColor: 'var(--color-panel-translucent)',
-                      backdropFilter: 'blur(16px)',
+                      backdropFilter: 'blur(64px)',
+                      WebkitBackdropFilter: 'blur(64px)',
                     }}
                   >
                     <Flex
diff --git a/src/core/blitzkit/imgur.ts b/src/core/blitzkit/imgur.ts
index f96146838..8135d678c 100644
--- a/src/core/blitzkit/imgur.ts
+++ b/src/core/blitzkit/imgur.ts
@@ -1,13 +1,50 @@
+export enum ImgurSize {
+  /**
+   * The default size
+   */
+  Default = '',
+  /**
+   * Unknown size but really really small
+   */
+  UltraSmall = 'ss',
+  /**
+   * 90x90
+   */
+  SmallSquare = 's',
+  /**
+   * 160x160
+   */
+  BigSquare = 'b',
+  /**
+   * 160x160
+   */
+  SmallThumbnail = 't',
+  /**
+   * 320x320
+   */
+  MediumThumbnail = 'm',
+  /**
+   * 640x640
+   */
+  LargeThumbnail = 'l',
+  /**
+   * 1024x1024
+   */
+  HugeThumbnail = 'h',
+}
+
 interface ImgurOptions {
   format: 'jpeg' | 'png';
+  size: ImgurSize;
 }
 
 const defaultImgurOptions: ImgurOptions = {
   format: 'png',
+  size: ImgurSize.Default,
 };
 
 export function imgur(id: string, imgurOptions?: Partial<ImgurOptions>) {
   const options = { ...defaultImgurOptions, ...imgurOptions };
 
-  return `https://i.imgur.com/${id}.${options.format}`;
+  return `https://i.imgur.com/${id}${options.size}.${options.format}`;
 }