Use shared config for mat handling

bskyogcard/src/components/Post/index.tsx

@@ -10,6 +10,7 @@ import {atoms as a, theme as t} from '../../theme/index.js'
 import * as bsky from '../../types/bsky/index.js'
 import {formatCount} from '../../util/formatCount.js'
 import {formatDate} from '../../util/formatDate.js'
+import {computeMatBorderRadius, MAT_WIDTH} from '../../util/frameMatting.js'
 import {moderatePost} from '../../util/moderatePost.js'
 import {sanitizeHandle} from '../../util/sanitizeHandle.js'
 import {getVerificationState} from '../../util/verificationState.js'
@@ -58,6 +59,7 @@ export function Post({
 
     const bgTop = avatar?.colors?.muted ?? '#1083fe'
     const bgBottom = avatar?.colors?.lightMuted ?? '#67b0fe'
+    const rounding = a.rounded_md
 
     return (
       <Box
@@ -67,9 +69,9 @@ export function Post({
           a.w_full,
           a.h_full,
           opts.mat && [
-            a.p_xl,
             {
-              borderRadius: '22px',
+              padding: MAT_WIDTH,
+              borderRadius: computeMatBorderRadius(rounding.borderRadius),
               backgroundImage: `linear-gradient(to bottom, ${bgTop} 0%, ${bgBottom} 100%)`,
             },
           ],
@@ -80,7 +82,7 @@ export function Post({
             a.flex_col,
             a.w_full,
             a.p_xl,
-            a.rounded_md,
+            rounding,
             t.atoms.bg,
             {boxShadow: `0 0 20px rgb(0, 25, 51, 0.2)`},
           ]}>

bskyogcard/src/routes/post.tsx

@@ -42,7 +42,13 @@ export default function (ctx: AppContext, app: Express) {
         }
 
         const [postData, moderatorData] = await Promise.all([
+          /*
+           * Fetch any remote post data, like images and their metadata.
+           */
           getPostData(post),
+          /*
+           * Fetches labeler definitions and builds `moderationOpts`
+           */
           getModeratorData(ctx.appviewAgent),
         ])
         const displayOptions = parseDisplayOptionsFromQuery(req.query)

bskyogcard/src/util/frameMatting.ts

@@ -0,0 +1,9 @@
+export const MAT_WIDTH = 12
+
+export function getWidthWithMat(width: number) {
+  return width + MAT_WIDTH * 2
+}
+
+export function computeMatBorderRadius(borderRadius: number) {
+  return borderRadius + MAT_WIDTH / 2
+}

bskyogcard/src/util/postDisplayOptions.ts

@@ -1,5 +1,9 @@
 import {ParsedQs} from 'qs'
 
+import {getWidthWithMat} from './frameMatting.js'
+
+export const DEFAULT_WIDTH = 360
+
 export type DisplayOptions = {
   mat: boolean
 }
@@ -24,6 +28,6 @@ export function parseDisplayOptionsFromQuery(query: ParsedQs): DisplayOptions {
 export function getRenderOptions(options: DisplayOptions) {
   return {
     // must match width + padding of Post.tsx
-    width: options.mat ? 400 : 360,
+    width: options.mat ? getWidthWithMat(DEFAULT_WIDTH) : DEFAULT_WIDTH,
   }
 }