Skip to content

Commit 9350881

Browse files
andersy005andersy005
authored
Update opengraph thumbnails (#709)
1 parent 367cbe7 commit 9350881

23 files changed

+75
-61
lines changed

‎.gitignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
yarn.lock
22
package-lock.json
3-
public/
3+
44

55
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
66

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"license": "Apache 2.0",
1818
"dependencies": {
1919
"@chakra-ui/icons": "^2.1.1",
20+
"@chakra-ui/next-js": "^2.2.0",
2021
"@chakra-ui/react": "^2.8.2",
2122
"@chakra-ui/system": "^2.6.2",
2223
"@emotion/react": "^11.13.3",

‎public/cards/cubed-xarray.png

-15.9 KB
Loading

‎public/cards/cupy-tutorial.png

-29.2 KB
Loading

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

-14.2 KB
Loading

‎public/cards/flox.png

-15.2 KB
Loading

‎public/cards/introducing-inference-data.png

-27.8 KB
Loading

‎public/cards/introducing-pint-xarray.png

-16.1 KB
Loading

‎public/cards/introducing-xradar.png

-41.9 KB
Loading

‎public/cards/introducing-xwrf.png

-10.7 KB
Loading

‎public/cards/multiple-groupers.png

141 KB
Loading

‎public/cards/pangeo-ml-ecosystem-2023.png

-25 KB
Loading

‎public/cards/siparcs-2022.png

-14.4 KB
Loading

‎public/cards/xarray-for-neurophysiology.png

-4.66 KB
Loading

‎public/cards/xarray-kvikio.png

-20 KB
Loading

‎public/cards/xarray-tutorial.png

301 KB
Loading

‎src/components/layout.js

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,25 +13,34 @@ export const Layout = ({
1313
url = 'https://xarray.dev',
1414
enableBanner = false,
1515
}) => {
16-
const bannerTitle = 'Xarray’s 2024 User Survey is live now.'
16+
const bannerTitle = "Xarray's 2024 User Survey is live now."
1717
const bannerDescription = ''
1818
const bannerChildren = (
1919
<Link href='https://forms.gle/KEq7WviCdz9xTaJX6'>
2020
Please take ~5 minutes to fill it out and help us improve Xarray.
2121
</Link>
2222
)
23+
24+
// Determine the base URL based on the environment
25+
const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
26+
? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
27+
: 'http://localhost:3000'
28+
29+
// Construct the full card URL
30+
const fullCardUrl = card.startsWith('http') ? card : `${baseUrl}${card}`
31+
2332
return (
2433
<>
2534
<Head>
2635
<meta content='IE=edge' httpEquiv='X-UA-Compatible' />
2736
<meta content='width=device-width, initial-scale=1' name='viewport' />
2837
<meta property='og:title' content={title} />
2938
<meta property='og:description' content={description} />
30-
<meta property='og:image' content={card} />
39+
<meta property='og:image' content={fullCardUrl} />
3140
<meta property='og:url' content={url} />
3241
<meta name='twitter:title' content={title} />
3342
<meta name='twitter:description' content={description} />
34-
<meta name='twitter:image' content={card} />
43+
<meta name='twitter:image' content={fullCardUrl} />
3544
<meta name='twitter:card' content='summary_large_image' />
3645
<meta name='twitter:site' content='@xarray_dev' />
3746
<link

‎src/pages/blog/[id].js

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,18 +29,15 @@ import { distanceToNow, formatDate } from '@/lib/date-formatting'
2929
import { MDXElements } from '@/lib/mdx-elements'
3030
import { getAllPostsIds, getPostData } from '@/lib/posts'
3131

32-
const CARDS_BASE_URL = 'https://xarray.dev/cards'
33-
3432
export default function Post({ source, frontmatter, postId }) {
35-
const card = `${CARDS_BASE_URL}/${postId}.png`
3633
const date = new Date(frontmatter.date)
3734

3835
return (
3936
<Layout
4037
title={`${frontmatter.title}`}
41-
card={card}
38+
card={`/cards/${postId}.png`}
4239
description={frontmatter.summary}
43-
url={`https://xarray.dev/blog/${postId}`}
40+
url={`/blog/${postId}`}
4441
>
4542
<Box as={'section'}>
4643
<Container maxW='container.lg' py={10}>

‎src/pages/blog/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export default function Blog({ allPostsData }) {
7272
return (
7373
<Layout
7474
title={'Blog | Xarray'}
75-
url={'https://xarray.dev/blog'}
75+
url={`/blog`}
7676
card={
7777
'https://raw.githubusercontent.com/xarray-contrib/xarray.dev/main/public/Xarray-assets/Icon/Xarray_Icon_Final.png'
7878
}

‎src/pages/cards/[id].js

Lines changed: 49 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
import { Image } from '@/components/mdx'
2-
import { MdOutlineCalendarToday, MdPeopleOutline } from 'react-icons/md'
3-
42
import { formatDate } from '@/lib/date-formatting'
53
import { getAllPostsIds, getPostData } from '@/lib/posts'
64
import {
@@ -11,71 +9,73 @@ import {
119
Flex,
1210
Heading,
1311
Icon,
14-
Stack,
1512
Text,
13+
VStack,
1614
} from '@chakra-ui/react'
1715
import fs from 'fs'
1816
import matter from 'gray-matter'
1917
import path from 'path'
18+
import { MdOutlineCalendarToday, MdPeopleOutline } from 'react-icons/md'
2019

2120
const Card = ({ frontmatter, id }) => {
22-
const boxBackground = 'teal.100'
2321
const date = new Date(frontmatter.date)
2422

2523
return (
26-
<Box
27-
sx={{ bg: boxBackground, color: 'invert' }}
28-
h={'100vh'}
29-
w={'100vw'}
30-
backgroundImage={'/background.svg'}
31-
>
32-
<Container id='post' maxW={'container.lg'} centerContent>
33-
<Flex direction='column' fontSize={'2xl'}>
34-
<Stack direction={'row'} spacing={8} justify='space-between'>
35-
<Stack>
36-
<Text my={32} fontWeight={'bold'} opacity={0.7}>
37-
xarray.dev / blog
38-
</Text>
39-
</Stack>
24+
<Box bg='teal.100' minH='100vh' w='100vw'>
25+
<Container maxW='container.lg' h='100%' py={12}>
26+
<Flex direction='column' h='100%' justify='center'>
27+
<Flex justifyContent='space-between' alignItems='flex-start' mb={6}>
28+
<Text fontSize='xl' color='gray.700' fontWeight='medium'>
29+
xarray.dev / blog
30+
</Text>
31+
<Image
32+
w='150px'
33+
h='auto'
34+
objectFit='contain'
35+
src='/Xarray-assets/RGB/Xarray_Logo_RGB_Final.svg'
36+
alt='xarray logo'
37+
/>
38+
</Flex>
39+
40+
<VStack align='stretch' spacing={16} my={12}>
41+
<Heading as='h1' size='3xl' fontWeight='bold' lineHeight='1.2'>
42+
{frontmatter.title}
43+
</Heading>
44+
4045
<Flex
41-
direction={'row'}
42-
alignItems={'center'}
43-
justify={'right'}
44-
align={'right'}
46+
direction={['column', 'row']}
47+
justify='space-between'
48+
align={['flex-start', 'center']}
49+
wrap='wrap'
50+
gap={4}
4551
>
46-
<Image
47-
justify={'right'}
48-
align={'right'}
49-
w={'200px'}
50-
src={'/Xarray-assets/RGB/Xarray_Logo_RGB_Final.svg'}
51-
alt={'xarray logo'}
52-
/>
52+
<Flex align='center'>
53+
<Icon
54+
as={MdOutlineCalendarToday}
55+
w={6}
56+
h={6}
57+
mr={2}
58+
color='gray.700'
59+
/>
60+
<Text fontSize='lg' fontWeight='medium'>
61+
{formatDate(date)}
62+
</Text>
63+
</Flex>
5364
</Flex>
54-
</Stack>
55-
<Heading as={'h1'} size={'2xl'} my={8}>
56-
{frontmatter.title}
57-
</Heading>
5865

59-
<Stack direction={'row'} my={4} align={'center'}>
60-
<Icon as={MdOutlineCalendarToday} w='8' h='8' />
61-
<Text fontWeight={'bold'}>{formatDate(date)}</Text>
62-
</Stack>
63-
64-
<Stack direction={'row'} my={8} align={'center'}>
65-
<Icon as={MdPeopleOutline} w='8' h='8' />
66-
67-
<AvatarGroup size={'xl'}>
68-
{frontmatter.authors.map((author) => {
69-
return (
66+
<Flex align='center'>
67+
<Icon as={MdPeopleOutline} w={6} h={6} mr={2} color='gray.700' />
68+
<AvatarGroup size='xl' max={5} spacing='-0.75rem'>
69+
{frontmatter.authors.map((author) => (
7070
<Avatar
7171
key={author.name}
72-
src={`https://github.com/${author.github}.png`}
7372
name={author.name}
73+
src={`https://github.com/${author.github}.png`}
7474
/>
75-
)
76-
})}
77-
</AvatarGroup>
78-
</Stack>
75+
))}
76+
</AvatarGroup>
77+
</Flex>
78+
</VStack>
7979
</Flex>
8080
</Container>
8181
</Box>

‎src/pages/dashboard.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const DashboardPage = () => {
55
return (
66
<Layout
77
title={'Xarray project statistics'}
8-
url={'https://xarray.dev/dashboard'}
8+
url={`/dashboard`}
99
description={'Xarray project statistics'}
1010
card={
1111
'https://raw.githubusercontent.com/xarray-contrib/xarray.dev/main/public/Xarray-assets/Icon/Xarray_Icon_Final.png'

‎src/pages/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { Layout } from '@/components/layout'
1212
export default function IndexPage() {
1313
return (
1414
<Layout
15+
url={`/`}
1516
title={'Xarray: N-D labeled arrays and datasets in Python'}
1617
card={
1718
'https://raw.githubusercontent.com/xarray-contrib/xarray.dev/main/public/Xarray-assets/Icon/Xarray_Icon_Final.png'

‎src/pages/team.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,13 @@ import { Box, Container, Heading, SimpleGrid, Text } from '@chakra-ui/react'
66

77
const Team = () => {
88
return (
9-
<Layout title={'Xarray Contributors'}>
9+
<Layout
10+
title={'Xarray Contributors'}
11+
card={
12+
'https://raw.githubusercontent.com/xarray-contrib/xarray.dev/main/public/Xarray-assets/Icon/Xarray_Icon_Final.png'
13+
}
14+
url={`/team`}
15+
>
1016
<Box as='section' py={20}>
1117
<Container maxW='container.lg'>
1218
<Heading as='h1' size='2xl' textAlign={'center'}>

0 commit comments

Comments
 (0)