use desktop context (#321)

Author: andersy005

build-cards.js

@@ -1,6 +1,6 @@
 const fs = require('fs')
 const glob = require('glob')
-const { chromium } = require('playwright')
+const { chromium, devices } = require('playwright')
 
 const { getAllPostsIds } = require('./src/lib/posts')
 const cardsDir = './public/cards/'
@@ -20,18 +20,13 @@ glob('./cards/**.png', async (err, files) => {
 })
 
 const baseUrl = process.env.CARDS_BASE_URL || 'http://localhost:3000'
+const device = devices['Desktop Safari']
 
 async function getScreenshot(postId) {
-  const width = 1200
-  const height = 630
   const browser = await chromium.launch()
-  const context = await browser.newContext({ deviceScaleFactor: 2 })
+  const context = await browser.newContext({ ...device, deviceScaleFactor: 2 })
   const page = await context.newPage()
 
-  await page.setViewportSize({
-    width: width,
-    height: height,
-  })
   await page.goto(`${baseUrl}/cards/${postId}`)
   await page.waitForTimeout(2000) // wait for page to load fully (2 seconds). This is a hacky way to wait for GitHub Avatars to fully load.
 

public/cards/czi-eoss-grant-conclusion.png

@@ -19,16 +19,21 @@ import matter from 'gray-matter'
 import path from 'path'
 
 const Card = ({ frontmatter, id }) => {
-  const boxBackground = 'gray.300'
+  const boxBackground = 'teal.100'
   const date = new Date(frontmatter.date)
 
   return (
-    <Box sx={{ bg: boxBackground, color: 'invert' }} h={'100vh'} w={'100vw'}>
-      <Container id='post' maxW={{ base: '900px', md: '930px' }}>
+    <Box
+      sx={{ bg: boxBackground, color: 'invert' }}
+      h={'100vh'}
+      w={'100vw'}
+      backgroundImage={'/background.svg'}
+    >
+      <Container id='post' maxW={'container.lg'} centerContent>
         <Flex direction='column' fontSize={'2xl'}>
           <Stack direction={'row'} spacing={8} justify='space-between'>
             <Stack>
-              <Text my={8} fontWeight={'bold'} opacity={0.7}>
+              <Text my={32} fontWeight={'bold'} opacity={0.7}>
                 xarray.dev / blog
               </Text>
             </Stack>
@@ -53,7 +58,7 @@ const Card = ({ frontmatter, id }) => {
 
           <Stack direction={'row'} my={4} align={'center'}>
             <Icon as={MdOutlineCalendarToday} w='8' h='8' />
-            <Text>{formatDate(date)}</Text>
+            <Text fontWeight={'bold'}>{formatDate(date)}</Text>
           </Stack>
 
           <Stack direction={'row'} my={8} align={'center'}>