Top align og image text to support x/twitter

src/photo/image-response/PhotoImageResponse.tsx

@@ -5,6 +5,7 @@ import { AiFillApple } from 'react-icons/ai';
 import ImageCaption from './components/ImageCaption';
 import ImagePhotoGrid from './components/ImagePhotoGrid';
 import ImageContainer from './components/ImageContainer';
+import { OG_TEXT_BOTTOM_ALIGNMENT } from '@/site/config';
 
 export default function PhotoImageResponse({
   photo,
@@ -23,7 +24,7 @@ export default function PhotoImageResponse({
         photos: [photo],
         width,
         height,
-        imagePosition: 'top',
+        ...OG_TEXT_BOTTOM_ALIGNMENT && { imagePosition: 'top' },
       }} />
       <ImageCaption {...{ width, height, fontFamily }}>
         {photo.make === 'Apple' &&

src/photo/image-response/components/ImageCaption.tsx

@@ -1,5 +1,8 @@
+import { OG_TEXT_BOTTOM_ALIGNMENT } from '@/site/config';
 import { ReactNode } from 'react';
 
+const GRADIENT_STOPS = 'rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0.7)';
+
 export default function ImageCaption({
   height,
   fontFamily,
@@ -17,21 +20,28 @@ export default function ImageCaption({
       display: 'flex',
       flexDirection: 'column',
       position: 'absolute',
-      paddingTop: height * .6,
-      paddingBottom: height * .075,
       paddingLeft: height * .0875,
       paddingRight: height * .0875,
       color: 'white',
-      background:
-        'linear-gradient(to bottom, ' +
-        'rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0.7))',
       backgroundBlendMode: 'multiply',
       fontFamily,
       fontSize: height *.089,
       lineHeight: 1,
-      bottom: 0,
       left: 0,
       right: 0,
+      ...OG_TEXT_BOTTOM_ALIGNMENT
+        ? {
+          paddingTop: height * .6,
+          paddingBottom: height * .075,
+          background: `linear-gradient(to bottom, ${GRADIENT_STOPS})`,
+          bottom: 0,
+        }
+        : {
+          paddingTop: height * .075,
+          paddingBottom: height * .6,
+          background: `linear-gradient(to top, ${GRADIENT_STOPS})`,
+          top: 0,
+        },
     }}>
       {subhead &&
         <div

src/site/SiteChecklistClient.tsx

@@ -28,6 +28,7 @@ export default function SiteChecklistClient({
   showRepoLink,
   isProModeEnabled,
   isPublicApiEnabled,
+  isOgTextBottomAligned,
   showRefreshButton,
   secret,
 }: {
@@ -40,6 +41,7 @@ export default function SiteChecklistClient({
   showRepoLink: boolean
   isProModeEnabled: boolean
   isPublicApiEnabled: boolean
+  isOgTextBottomAligned: boolean
   showRefreshButton?: boolean
   secret: string
 }) {
@@ -242,6 +244,16 @@ export default function SiteChecklistClient({
           a public API available at <code>/api</code>:
           {renderEnvVars(['NEXT_PUBLIC_PUBLIC_API'])}
         </ChecklistRow>
+        <ChecklistRow
+          title="OG Text Alignment"
+          status={isOgTextBottomAligned}
+          isPending={isPendingPage}
+          optional
+        >
+          Set environment variable to {'"BOTTOM"'} to
+          keep OG image text bottom aligned (default is top):
+          {renderEnvVars(['NEXT_PUBLIC_OG_TEXT_ALIGNMENT'])}
+        </ChecklistRow>
       </Checklist>
       {showRefreshButton &&
         <div className="py-4 space-y-4">

src/site/config.ts

@@ -31,6 +31,8 @@ export const BASE_URL = process.env.NODE_ENV === 'production'
 export const SHOW_REPO_LINK = process.env.NEXT_PUBLIC_HIDE_REPO_LINK !== '1';
 export const PRO_MODE_ENABLED = process.env.NEXT_PUBLIC_PRO_MODE === '1';
 export const PUBLIC_API_ENABLED = process.env.NEXT_PUBLIC_PUBLIC_API === '1';
+export const OG_TEXT_BOTTOM_ALIGNMENT =
+  (process.env.NEXT_PUBLIC_OG_TEXT_ALIGNMENT ?? '').toUpperCase() === 'BOTTOM';
 
 export const CONFIG_CHECKLIST_STATUS = {
   hasPostgres: (process.env.POSTGRES_HOST ?? '').length > 0,
@@ -45,6 +47,7 @@ export const CONFIG_CHECKLIST_STATUS = {
   showRepoLink: SHOW_REPO_LINK,
   isProModeEnabled: PRO_MODE_ENABLED,
   isPublicApiEnabled: PUBLIC_API_ENABLED,
+  isOgTextBottomAligned: OG_TEXT_BOTTOM_ALIGNMENT,
 };
 
 export const IS_CHECKLIST_COMPLETE =