Skip to content

Commit 7a85de2

Browse files
andersy005andersy005
authored
Update Page Layout (#316)
1 parent e81eeb5 commit 7a85de2

18 files changed

+397
-411
lines changed

‎src/components/array-libraries.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -67,14 +67,14 @@ const Library = ({ name, description, repo, url, logo }) => {
6767
export const ArrayLibraries = () => {
6868
const libraries = React.useMemo(() => data, [])
6969
return (
70-
<Box my={4}>
71-
<Text color={useColorModeValue('gray.800', 'white')} fontSize={'lg'}>
70+
<Box my={8}>
71+
<Text fontSize={'lg'}>
7272
Xarray supports multiple array backends, allowing users to choose array
7373
types that work best for their application.
7474
</Text>
7575

7676
<SimpleGrid
77-
columns={{ base: 1, md: 3 }}
77+
columns={{ base: 1, md: 2, lg: 3 }}
7878
spacing={8}
7979
my={8}
8080
align={'left'}

‎src/components/dashboard/issue-tracker.js‎

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { SimpleGrid } from '@chakra-ui/react'
1+
import { Box, Container, SimpleGrid } from '@chakra-ui/react'
22
import { GiDuration } from 'react-icons/gi'
33

44
import { TimelinePlotContainer } from '@/components/dashboard/timeline-plot-container'
@@ -7,28 +7,30 @@ import { Heading } from '@/components/mdx'
77

88
export const IssueTracker = () => {
99
return (
10-
<>
11-
<Heading as='h1' size='2xl' my={4} textAlign={'center'}>
12-
Xarray Issue Tracker
13-
</Heading>
14-
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={{ base: 5, lg: 8 }}>
15-
{' '}
16-
<TimeseriesAggStatsCard
17-
title={'Median time a pull request is open'}
18-
query={
19-
'https://pydata-datasette.herokuapp.com/xarray.json?_shape=array&&sql=select%0D%0A++id%2C%0D%0A++number%2C%0D%0A++state%2C%0D%0A++created_at%2C%0D%0A++closed_at%2C%0D%0A++julianday%28closed_at%29+-+julianday%28created_at%29+as+age_in_days%0D%0Afrom%0D%0A++issues+as+data%0D%0Awhere%0D%0A++type+%3D+%27pull%27%0D%0A++and+state+%3D+%27closed%27%0D%0Aorder+by%0D%0A++id'
20-
}
21-
icon={<GiDuration size={'3em'} />}
22-
/>
23-
<TimeseriesAggStatsCard
24-
title={'Median time an issue is open'}
25-
icon={<GiDuration size={'3em'} />}
26-
query={
27-
'https://pydata-datasette.herokuapp.com/xarray.json?_shape=array&&sql=select%0D%0A++id%2C%0D%0A++number%2C%0D%0A++state%2C%0D%0A++created_at%2C%0D%0A++closed_at%2C%0D%0A++julianday%28closed_at%29+-+julianday%28created_at%29+as+age_in_days%0D%0Afrom%0D%0A++issues+as+data%0D%0Awhere%0D%0A++type+%3D+%27issue%27%0D%0A++and+state+%3D+%27closed%27%0D%0Aorder+by%0D%0A++id'
28-
}
29-
/>
30-
</SimpleGrid>
31-
<TimelinePlotContainer />
32-
</>
10+
<Box as='section'>
11+
<Container maxW='container.lg'>
12+
<Heading as='h1' size='2xl' textAlign={'center'}>
13+
Xarray Issue Tracker
14+
</Heading>
15+
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={{ base: 5, lg: 8 }}>
16+
{' '}
17+
<TimeseriesAggStatsCard
18+
title={'Median time a pull request is open'}
19+
query={
20+
'https://pydata-datasette.herokuapp.com/xarray.json?_shape=array&&sql=select%0D%0A++id%2C%0D%0A++number%2C%0D%0A++state%2C%0D%0A++created_at%2C%0D%0A++closed_at%2C%0D%0A++julianday%28closed_at%29+-+julianday%28created_at%29+as+age_in_days%0D%0Afrom%0D%0A++issues+as+data%0D%0Awhere%0D%0A++type+%3D+%27pull%27%0D%0A++and+state+%3D+%27closed%27%0D%0Aorder+by%0D%0A++id'
21+
}
22+
icon={<GiDuration size={'3em'} />}
23+
/>
24+
<TimeseriesAggStatsCard
25+
title={'Median time an issue is open'}
26+
icon={<GiDuration size={'3em'} />}
27+
query={
28+
'https://pydata-datasette.herokuapp.com/xarray.json?_shape=array&&sql=select%0D%0A++id%2C%0D%0A++number%2C%0D%0A++state%2C%0D%0A++created_at%2C%0D%0A++closed_at%2C%0D%0A++julianday%28closed_at%29+-+julianday%28created_at%29+as+age_in_days%0D%0Afrom%0D%0A++issues+as+data%0D%0Awhere%0D%0A++type+%3D+%27issue%27%0D%0A++and+state+%3D+%27closed%27%0D%0Aorder+by%0D%0A++id'
29+
}
30+
/>
31+
</SimpleGrid>
32+
<TimelinePlotContainer />
33+
</Container>
34+
</Box>
3335
)
3436
}

‎src/components/dashboard/project-metrics.js‎

Lines changed: 54 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { DatasetteStatsCard } from '@/components/dashboard/datasette-stats-card'
22
import { StatisticsCard } from '@/components/dashboard/statistics-card'
33
import { Heading } from '@/components/mdx'
44
import { fetcher } from '@/lib/data-fetching'
5-
import { SimpleGrid, Spinner } from '@chakra-ui/react'
5+
import { SimpleGrid, Spinner, Box, Container } from '@chakra-ui/react'
66
import { BsPeople, BsPerson } from 'react-icons/bs'
77
import { GoBook, GoPackage, GoStar, GoTag } from 'react-icons/go'
88
import useSWR from 'swr'
@@ -32,60 +32,62 @@ export const ProjectMetrics = () => {
3232
const year = dateObj.getFullYear()
3333

3434
return (
35-
<>
36-
{' '}
37-
<Heading as='h1' size='2xl' my={4} textAlign={'center'}>
38-
Xarray Project Metrics
39-
</Heading>
40-
<SimpleGrid columns={{ base: 1, md: 3 }} spacing={{ base: 5, lg: 8 }}>
41-
<StatisticsCard
42-
title={'Core Maintainers'}
43-
stat={'15'}
44-
icon={<BsPerson size={'3em'} />}
45-
link={'https://docs.xarray.dev/en/stable/team.html'}
46-
/>
47-
<DatasetteStatsCard
48-
title={'Contributors'}
49-
query={
50-
'https://pydata-datasette.herokuapp.com/xarray/_analyze_tables_/contributors,user_id.json?_shape=array'
51-
}
52-
icon={<BsPeople size={'3em'} />}
53-
link={'https://github.com/pydata/xarray/graphs/contributors'}
54-
/>
35+
<Box as='section'>
36+
<Container maxW='container.lg'>
37+
{' '}
38+
<Heading as='h1' size='2xl' textAlign={'center'}>
39+
Xarray Project Metrics
40+
</Heading>
41+
<SimpleGrid columns={{ base: 1, md: 3 }} spacing={{ base: 5, lg: 8 }}>
42+
<StatisticsCard
43+
title={'Core Maintainers'}
44+
stat={'15'}
45+
icon={<BsPerson size={'3em'} />}
46+
link={'https://docs.xarray.dev/en/stable/team.html'}
47+
/>
48+
<DatasetteStatsCard
49+
title={'Contributors'}
50+
query={
51+
'https://pydata-datasette.herokuapp.com/xarray/_analyze_tables_/contributors,user_id.json?_shape=array'
52+
}
53+
icon={<BsPeople size={'3em'} />}
54+
link={'https://github.com/pydata/xarray/graphs/contributors'}
55+
/>
5556

56-
<DatasetteStatsCard
57-
title={'Stargazers'}
58-
icon={<GoStar size={'3em'} />}
59-
query={
60-
'https://pydata-datasette.herokuapp.com/xarray/_analyze_tables_/stars,user.json?_shape=array'
61-
}
62-
link={'https://github.com/pydata/xarray/stargazers'}
63-
/>
57+
<DatasetteStatsCard
58+
title={'Stargazers'}
59+
icon={<GoStar size={'3em'} />}
60+
query={
61+
'https://pydata-datasette.herokuapp.com/xarray/_analyze_tables_/stars,user.json?_shape=array'
62+
}
63+
link={'https://github.com/pydata/xarray/stargazers'}
64+
/>
6465

65-
<DatasetteStatsCard
66-
title={'Dependent Projects'}
67-
query={
68-
'https://pydata-datasette.herokuapp.com/xarray/_analyze_tables_/dependents,dependent.json?_shape=array'
69-
}
70-
icon={<GoPackage size={'3em'} />}
71-
link={'https://github.com/pydata/xarray/network/dependents'}
72-
/>
66+
<DatasetteStatsCard
67+
title={'Dependent Projects'}
68+
query={
69+
'https://pydata-datasette.herokuapp.com/xarray/_analyze_tables_/dependents,dependent.json?_shape=array'
70+
}
71+
icon={<GoPackage size={'3em'} />}
72+
link={'https://github.com/pydata/xarray/network/dependents'}
73+
/>
7374

74-
<StatisticsCard
75-
title={`${month}/${year} Docs Visitors`}
76-
stat={monthlyViews.users}
77-
icon={<GoBook size={'3em'} />}
78-
/>
75+
<StatisticsCard
76+
title={`${month}/${year} Docs Visitors`}
77+
stat={monthlyViews.users}
78+
icon={<GoBook size={'3em'} />}
79+
/>
7980

80-
<DatasetteStatsCard
81-
title={'Releases'}
82-
query={
83-
'https://pydata-datasette.herokuapp.com/xarray/_analyze_tables_/releases,id.json?_shape=array'
84-
}
85-
icon={<GoTag size={'3em'} />}
86-
link={'https://github.com/pydata/xarray/releases'}
87-
/>
88-
</SimpleGrid>
89-
</>
81+
<DatasetteStatsCard
82+
title={'Releases'}
83+
query={
84+
'https://pydata-datasette.herokuapp.com/xarray/_analyze_tables_/releases,id.json?_shape=array'
85+
}
86+
icon={<GoTag size={'3em'} />}
87+
link={'https://github.com/pydata/xarray/releases'}
88+
/>
89+
</SimpleGrid>
90+
</Container>
91+
</Box>
9092
)
9193
}

‎src/components/dashboard/timeline-plot-container.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export const TimelinePlotContainer = () => {
3535
const end = d3.max(data, (d) => d.time)
3636

3737
return (
38-
<Box mt={10}>
38+
<Box my={8}>
3939
<Text fontSize={'md'} align={'center'}>
4040
This is a timeline of how many open issues and pull requests Xarray has
4141
on Github over time from {new Date(start).toLocaleDateString()} to{' '}
@@ -45,8 +45,10 @@ export const TimelinePlotContainer = () => {
4545
<br />
4646
<Tabs align='center' variant='enclosed' isFitted colorScheme='teal'>
4747
<TabList>
48-
<Tab>Pull Requests</Tab>
49-
<Tab>Issues</Tab>
48+
<Tab _selected={{ color: 'white', bg: 'teal.500' }}>
49+
Pull Requests
50+
</Tab>
51+
<Tab _selected={{ color: 'white', bg: 'teal.500' }}>Issues</Tab>
5052
</TabList>
5153
<TabPanels>
5254
<TabPanel>

‎src/components/desktop-nav.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const DesktopNav = ({ navItems, ...props }) => {
2323
p={2}
2424
href={navItem.href ?? '/#'}
2525
fontSize={'sm'}
26-
fontWeight={500}
26+
fontWeight={'bold'}
2727
// eslint-disable-next-line react-hooks/rules-of-hooks
2828
color={useColorModeValue('gray.600', 'gray.200')}
2929
_hover={{

‎src/components/donate.js‎

Lines changed: 33 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,32 @@
1-
import { Box, Button, Center, Container, Stack, Text } from '@chakra-ui/react'
1+
import {
2+
Box,
3+
Button,
4+
Container,
5+
SimpleGrid,
6+
Stack,
7+
Text,
8+
} from '@chakra-ui/react'
29

310
import { Heading, Image, Link } from '@/components/mdx'
411

512
import { BiDonateHeart } from 'react-icons/bi'
613

714
export const Donate = () => {
815
return (
9-
<Box id={'donate'}>
10-
<Container maxW={'6xl'}>
11-
<Heading as='h1' size='2xl' my={4} textAlign={'center'}>
16+
<Box id={'donate'} as='section'>
17+
<Container maxW='container.lg' centerContent>
18+
<Heading as='h1' size='2xl'>
1219
Donate
1320
</Heading>
14-
<Stack
15-
align={'center'}
16-
py={{ base: 8, md: 8 }}
17-
direction={{ base: 'column', md: 'row' }}
21+
<SimpleGrid
22+
columns={{ base: 1, md: 2 }}
23+
spacing={8}
24+
my={8}
25+
justify={'center'}
26+
alignItems={'center'}
1827
>
1928
<Stack
2029
flex={1}
21-
px={10}
2230
spacing={{ base: 5, md: 10 }}
2331
justify={'center'}
2432
align={'center'}
@@ -30,13 +38,19 @@ export const Donate = () => {
3038
as={Link}
3139
href={'https://en.wikipedia.org/wiki/501(c)(3)_organization'}
3240
color={'blue.400'}
41+
useExternalIcon
3342
>
3443
501(c)(3) nonprofit charity
3544
</Text>{' '}
3645
in the United States. NumFOCUS provides Xarray with fiscal, legal,
3746
and administrative support to help ensure the health and
3847
sustainability of the project. Visit{' '}
39-
<Text as={Link} href={'https://numfocus.org/'} color={'blue.400'}>
48+
<Text
49+
as={Link}
50+
useExternalIcon
51+
href={'https://numfocus.org/'}
52+
color={'blue.400'}
53+
>
4054
numfocus.org
4155
</Text>{' '}
4256
for more information.
@@ -46,25 +60,23 @@ export const Donate = () => {
4660
consider making a donation to support our efforts.
4761
</Text>
4862
<Button
49-
size={'lg'}
63+
as={Link}
5064
fontWeight={'normal'}
51-
px={6}
5265
colorScheme={'red'}
5366
bg={'red.400'}
5467
_hover={{ bg: 'red.500' }}
5568
rightIcon={<BiDonateHeart />}
69+
href={'https://numfocus.org/donate-to-xarray'}
5670
>
57-
<Link href={'https://numfocus.org/donate-to-xarray'}>Donate</Link>
71+
Donate
5872
</Button>
5973
</Stack>
60-
<Stack flex={1} justify={'center'} align={'center'} w={'full'}>
61-
<Center
62-
as={Image}
63-
src={'/NumFOCUS_sponsored_project_logo.svg'}
64-
alt={'NumFocus logo'}
65-
></Center>
66-
</Stack>
67-
</Stack>
74+
75+
<Image
76+
src={'/NumFOCUS_sponsored_project_logo.svg'}
77+
alt={'NumFocus logo'}
78+
></Image>
79+
</SimpleGrid>
6880
</Container>
6981
</Box>
7082
)

‎src/components/ecosystem.js‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -50,24 +50,31 @@ const GitHubStats = () => {
5050

5151
export const Ecosystem = () => {
5252
return (
53-
<Box id={'ecosystem'}>
54-
<Stack as={Container} maxW={'6xl'} textAlign={'center'}>
55-
<Heading as='h1' size='2xl' my={4}>
53+
<Box id={'ecosystem'} as='section'>
54+
<Container maxW='container.lg' centerContent>
55+
<Heading as='h1' size='2xl'>
5656
Ecosystem
5757
</Heading>
5858
<Text fontSize={'lg'}>
5959
Xarray is part of the larger scientific Python ecosystem. It is built
6060
on top of NumPy, Pandas, and Dask and supports a wide range of domain
6161
specific scientific applications.
6262
</Text>
63-
<GitHubStats />
64-
</Stack>
6563

66-
<Container maxW={'6xl'} mt={10}>
67-
<Tabs align='center' variant='enclosed' isFitted colorScheme='teal'>
64+
<Tabs
65+
my={8}
66+
align='center'
67+
variant='enclosed'
68+
isFitted
69+
colorScheme='teal'
70+
>
6871
<TabList>
69-
<Tab>Scientific Domains</Tab>
70-
<Tab>Array Libraries</Tab>
72+
<Tab _selected={{ color: 'white', bg: 'teal.500' }}>
73+
Scientific Domains
74+
</Tab>
75+
<Tab _selected={{ color: 'white', bg: 'teal.500' }}>
76+
Array Libraries
77+
</Tab>
7178
</TabList>
7279
<TabPanels>
7380
<TabPanel>

0 commit comments

Comments
 (0)