Add preview image to README

README.md

@@ -6,6 +6,8 @@ _Optimizations are still being made around auth and cache behavior._
 
 _Database schema changes are expected._
 
+![App Preview](app-preview.png)
+
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?demo-title=Photo+Blog&demo-description=Store+photos+with+original+camera+data&demo-url=https%3A%2F%2Fphotos.sambecker.com&demo-image=https%3A%2F%2Fphotos.sambecker.com%2Fdeploy-image&project-name=Photo+Blog&repository-name=photo-blog&repository-url=https%3A%2F%2Fgithub.com%2Fsambecker%2Fphoto-blog&from=templates&skippable-integrations=1&env-description=Configure+your+photo+blog+meta&env-link=BLANK&env=NEXT_PUBLIC_SITE_TITLE%2CNEXT_PUBLIC_SITE_DOMAIN&teamCreateStatus=hidden&stores=%5B%7B%22type%22%3A%22postgres%22%7D%2C%7B%22type%22%3A%22blob%22%7D%5D)
 
 ### 1. Deploy to Vercel

src/photo/image-response/DeployImageResponse.tsx

@@ -9,7 +9,7 @@ export default function DeployImageResponse({
   width,
   height,
   fontFamily,
-  outerMargin = 30,
+  outerMargin = 50,
   darkMode = true,
 }: {
   photos: Photo[]
@@ -39,8 +39,8 @@ export default function DeployImageResponse({
       <div style={{
         display: 'flex',
         alignItems: 'center',
-        fontSize: 26,
-        height: 40,
+        fontSize: 40,
+        height: 80,
         lineHeight: 1,
         marginBottom: outerMargin,
         width: '100%',
@@ -62,13 +62,13 @@ export default function DeployImageResponse({
               color: '#333',
               borderRight: '2px solid #333',
             }}>
-              <IconFullFrame includeTitle={false} width={48} />
+              <IconFullFrame includeTitle={false} width={80} />
             </div>
             <div style={{
               display: 'flex',
               padding: '3px 10px',
             }}>
-              <IconGrid includeTitle={false} width={48} />
+              <IconGrid includeTitle={false} width={80} />
             </div>
           </div>
         </div>
@@ -77,7 +77,7 @@ export default function DeployImageResponse({
           justifyContent: 'flex-end',
           flexGrow: 1,
         }}>
-          thephotoblog.vercel.app
+          photos.sambecker.com
         </div>
       </div>
       <PhotoGridImageResponse {...{

src/photo/image-response/PhotoGridImageResponse.tsx

@@ -9,7 +9,7 @@ export default function PhotoGridImageResponse({
   width,
   colCount,
   rowCount,
-  gap = 10,
+  gap = 12,
 }: {
   photos: Photo[]
   request: Request

src/site/index.ts

@@ -13,8 +13,8 @@ export const IMAGE_OG_WIDTH = 1200;
 export const IMAGE_OG_HEIGHT = IMAGE_OG_WIDTH * (1 / IMAGE_OG_RATIO);
 
 // 3:2 og grid ratio
-export const GRID_OG_RATIO = 1.35;
-export const GRID_OG_WIDTH = 1200;
+export const GRID_OG_RATIO = 1.33;
+export const GRID_OG_WIDTH = 2000;
 export const GRID_OG_HEIGHT = GRID_OG_WIDTH * (1 / GRID_OG_RATIO);
 
 const STORE_ID = process.env.BLOB_READ_WRITE_TOKEN?.match(