Update Page Layout

src/components/array-libraries.js

@@ -67,14 +67,14 @@ const Library = ({ name, description, repo, url, logo }) => {
 export const ArrayLibraries = () => {
   const libraries = React.useMemo(() => data, [])
   return (
-    <Box my={4}>
-      <Text color={useColorModeValue('gray.800', 'white')} fontSize={'lg'}>
+    <Box my={8}>
+      <Text fontSize={'lg'}>
         Xarray supports multiple array backends, allowing users to choose array
         types that work best for their application.
       </Text>
 
       <SimpleGrid
-        columns={{ base: 1, md: 3 }}
+        columns={{ base: 1, md: 2, lg: 3 }}
         spacing={8}
         my={8}
         align={'left'}

src/components/dashboard/issue-tracker.js

@@ -1,4 +1,4 @@
-import { SimpleGrid } from '@chakra-ui/react'
+import { Box, Container, SimpleGrid } from '@chakra-ui/react'
 import { GiDuration } from 'react-icons/gi'
 
 import { TimelinePlotContainer } from '@/components/dashboard/timeline-plot-container'
@@ -7,28 +7,30 @@ import { Heading } from '@/components/mdx'
 
 export const IssueTracker = () => {
   return (
-    <>
-      <Heading as='h1' size='2xl' my={4} textAlign={'center'}>
-        Xarray Issue Tracker
-      </Heading>
-      <SimpleGrid columns={{ base: 1, md: 2 }} spacing={{ base: 5, lg: 8 }}>
-        {' '}
-        <TimeseriesAggStatsCard
-          title={'Median time a pull request is open'}
-          query={
-            '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'
-          }
-          icon={<GiDuration size={'3em'} />}
-        />
-        <TimeseriesAggStatsCard
-          title={'Median time an issue is open'}
-          icon={<GiDuration size={'3em'} />}
-          query={
-            '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'
-          }
-        />
-      </SimpleGrid>
-      <TimelinePlotContainer />
-    </>
+    <Box as='section'>
+      <Container maxW='container.lg'>
+        <Heading as='h1' size='2xl' textAlign={'center'}>
+          Xarray Issue Tracker
+        </Heading>
+        <SimpleGrid columns={{ base: 1, md: 2 }} spacing={{ base: 5, lg: 8 }}>
+          {' '}
+          <TimeseriesAggStatsCard
+            title={'Median time a pull request is open'}
+            query={
+              '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'
+            }
+            icon={<GiDuration size={'3em'} />}
+          />
+          <TimeseriesAggStatsCard
+            title={'Median time an issue is open'}
+            icon={<GiDuration size={'3em'} />}
+            query={
+              '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'
+            }
+          />
+        </SimpleGrid>
+        <TimelinePlotContainer />
+      </Container>
+    </Box>
   )
 }

src/components/dashboard/project-metrics.js

@@ -2,7 +2,7 @@ import { DatasetteStatsCard } from '@/components/dashboard/datasette-stats-card'
 import { StatisticsCard } from '@/components/dashboard/statistics-card'
 import { Heading } from '@/components/mdx'
 import { fetcher } from '@/lib/data-fetching'
-import { SimpleGrid, Spinner } from '@chakra-ui/react'
+import { SimpleGrid, Spinner, Box, Container } from '@chakra-ui/react'
 import { BsPeople, BsPerson } from 'react-icons/bs'
 import { GoBook, GoPackage, GoStar, GoTag } from 'react-icons/go'
 import useSWR from 'swr'
@@ -32,60 +32,62 @@ export const ProjectMetrics = () => {
   const year = dateObj.getFullYear()
 
   return (
-    <>
-      {' '}
-      <Heading as='h1' size='2xl' my={4} textAlign={'center'}>
-        Xarray Project Metrics
-      </Heading>
-      <SimpleGrid columns={{ base: 1, md: 3 }} spacing={{ base: 5, lg: 8 }}>
-        <StatisticsCard
-          title={'Core Maintainers'}
-          stat={'15'}
-          icon={<BsPerson size={'3em'} />}
-          link={'https://docs.xarray.dev/en/stable/team.html'}
-        />
-        <DatasetteStatsCard
-          title={'Contributors'}
-          query={
-            'https://pydata-datasette.herokuapp.com/xarray/_analyze_tables_/contributors,user_id.json?_shape=array'
-          }
-          icon={<BsPeople size={'3em'} />}
-          link={'https://github.com/pydata/xarray/graphs/contributors'}
-        />
+    <Box as='section'>
+      <Container maxW='container.lg'>
+        {' '}
+        <Heading as='h1' size='2xl' textAlign={'center'}>
+          Xarray Project Metrics
+        </Heading>
+        <SimpleGrid columns={{ base: 1, md: 3 }} spacing={{ base: 5, lg: 8 }}>
+          <StatisticsCard
+            title={'Core Maintainers'}
+            stat={'15'}
+            icon={<BsPerson size={'3em'} />}
+            link={'https://docs.xarray.dev/en/stable/team.html'}
+          />
+          <DatasetteStatsCard
+            title={'Contributors'}
+            query={
+              'https://pydata-datasette.herokuapp.com/xarray/_analyze_tables_/contributors,user_id.json?_shape=array'
+            }
+            icon={<BsPeople size={'3em'} />}
+            link={'https://github.com/pydata/xarray/graphs/contributors'}
+          />
 
-        <DatasetteStatsCard
-          title={'Stargazers'}
-          icon={<GoStar size={'3em'} />}
-          query={
-            'https://pydata-datasette.herokuapp.com/xarray/_analyze_tables_/stars,user.json?_shape=array'
-          }
-          link={'https://github.com/pydata/xarray/stargazers'}
-        />
+          <DatasetteStatsCard
+            title={'Stargazers'}
+            icon={<GoStar size={'3em'} />}
+            query={
+              'https://pydata-datasette.herokuapp.com/xarray/_analyze_tables_/stars,user.json?_shape=array'
+            }
+            link={'https://github.com/pydata/xarray/stargazers'}
+          />
 
-        <DatasetteStatsCard
-          title={'Dependent Projects'}
-          query={
-            'https://pydata-datasette.herokuapp.com/xarray/_analyze_tables_/dependents,dependent.json?_shape=array'
-          }
-          icon={<GoPackage size={'3em'} />}
-          link={'https://github.com/pydata/xarray/network/dependents'}
-        />
+          <DatasetteStatsCard
+            title={'Dependent Projects'}
+            query={
+              'https://pydata-datasette.herokuapp.com/xarray/_analyze_tables_/dependents,dependent.json?_shape=array'
+            }
+            icon={<GoPackage size={'3em'} />}
+            link={'https://github.com/pydata/xarray/network/dependents'}
+          />
 
-        <StatisticsCard
-          title={`${month}/${year} Docs Visitors`}
-          stat={monthlyViews.users}
-          icon={<GoBook size={'3em'} />}
-        />
+          <StatisticsCard
+            title={`${month}/${year} Docs Visitors`}
+            stat={monthlyViews.users}
+            icon={<GoBook size={'3em'} />}
+          />
 
-        <DatasetteStatsCard
-          title={'Releases'}
-          query={
-            'https://pydata-datasette.herokuapp.com/xarray/_analyze_tables_/releases,id.json?_shape=array'
-          }
-          icon={<GoTag size={'3em'} />}
-          link={'https://github.com/pydata/xarray/releases'}
-        />
-      </SimpleGrid>
-    </>
+          <DatasetteStatsCard
+            title={'Releases'}
+            query={
+              'https://pydata-datasette.herokuapp.com/xarray/_analyze_tables_/releases,id.json?_shape=array'
+            }
+            icon={<GoTag size={'3em'} />}
+            link={'https://github.com/pydata/xarray/releases'}
+          />
+        </SimpleGrid>
+      </Container>
+    </Box>
   )
 }

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

@@ -35,7 +35,7 @@ export const TimelinePlotContainer = () => {
   const end = d3.max(data, (d) => d.time)
 
   return (
-    <Box mt={10}>
+    <Box my={8}>
       <Text fontSize={'md'} align={'center'}>
         This is a timeline of how many open issues and pull requests Xarray has
         on Github over time from {new Date(start).toLocaleDateString()} to{' '}
@@ -45,8 +45,10 @@ export const TimelinePlotContainer = () => {
       <br />
       <Tabs align='center' variant='enclosed' isFitted colorScheme='teal'>
         <TabList>
-          <Tab>Pull Requests</Tab>
-          <Tab>Issues</Tab>
+          <Tab _selected={{ color: 'white', bg: 'teal.500' }}>
+            Pull Requests
+          </Tab>
+          <Tab _selected={{ color: 'white', bg: 'teal.500' }}>Issues</Tab>
         </TabList>
         <TabPanels>
           <TabPanel>

src/components/desktop-nav.js

@@ -23,7 +23,7 @@ export const DesktopNav = ({ navItems, ...props }) => {
                 p={2}
                 href={navItem.href ?? '/#'}
                 fontSize={'sm'}
-                fontWeight={500}
+                fontWeight={'bold'}
                 // eslint-disable-next-line react-hooks/rules-of-hooks
                 color={useColorModeValue('gray.600', 'gray.200')}
                 _hover={{

src/components/donate.js

@@ -1,24 +1,32 @@
-import { Box, Button, Center, Container, Stack, Text } from '@chakra-ui/react'
+import {
+  Box,
+  Button,
+  Container,
+  SimpleGrid,
+  Stack,
+  Text,
+} from '@chakra-ui/react'
 
 import { Heading, Image, Link } from '@/components/mdx'
 
 import { BiDonateHeart } from 'react-icons/bi'
 
 export const Donate = () => {
   return (
-    <Box id={'donate'}>
-      <Container maxW={'6xl'}>
-        <Heading as='h1' size='2xl' my={4} textAlign={'center'}>
+    <Box id={'donate'} as='section'>
+      <Container maxW='container.lg' centerContent>
+        <Heading as='h1' size='2xl'>
           Donate
         </Heading>
-        <Stack
-          align={'center'}
-          py={{ base: 8, md: 8 }}
-          direction={{ base: 'column', md: 'row' }}
+        <SimpleGrid
+          columns={{ base: 1, md: 2 }}
+          spacing={8}
+          my={8}
+          justify={'center'}
+          alignItems={'center'}
         >
           <Stack
             flex={1}
-            px={10}
             spacing={{ base: 5, md: 10 }}
             justify={'center'}
             align={'center'}
@@ -30,13 +38,19 @@ export const Donate = () => {
                 as={Link}
                 href={'https://en.wikipedia.org/wiki/501(c)(3)_organization'}
                 color={'blue.400'}
+                useExternalIcon
               >
                 501(c)(3) nonprofit charity
               </Text>{' '}
               in the United States. NumFOCUS provides Xarray with fiscal, legal,
               and administrative support to help ensure the health and
               sustainability of the project. Visit{' '}
-              <Text as={Link} href={'https://numfocus.org/'} color={'blue.400'}>
+              <Text
+                as={Link}
+                useExternalIcon
+                href={'https://numfocus.org/'}
+                color={'blue.400'}
+              >
                 numfocus.org
               </Text>{' '}
               for more information.
@@ -46,25 +60,23 @@ export const Donate = () => {
               consider making a donation to support our efforts.
             </Text>
             <Button
-              size={'lg'}
+              as={Link}
               fontWeight={'normal'}
-              px={6}
               colorScheme={'red'}
               bg={'red.400'}
               _hover={{ bg: 'red.500' }}
               rightIcon={<BiDonateHeart />}
+              href={'https://numfocus.org/donate-to-xarray'}
             >
-              <Link href={'https://numfocus.org/donate-to-xarray'}>Donate</Link>
+              Donate
             </Button>
           </Stack>
-          <Stack flex={1} justify={'center'} align={'center'} w={'full'}>
-            <Center
-              as={Image}
-              src={'/NumFOCUS_sponsored_project_logo.svg'}
-              alt={'NumFocus logo'}
-            ></Center>
-          </Stack>
-        </Stack>
+
+          <Image
+            src={'/NumFOCUS_sponsored_project_logo.svg'}
+            alt={'NumFocus logo'}
+          ></Image>
+        </SimpleGrid>
       </Container>
     </Box>
   )

src/components/ecosystem.js

@@ -50,24 +50,31 @@ const GitHubStats = () => {
 
 export const Ecosystem = () => {
   return (
-    <Box id={'ecosystem'}>
-      <Stack as={Container} maxW={'6xl'} textAlign={'center'}>
-        <Heading as='h1' size='2xl' my={4}>
+    <Box id={'ecosystem'} as='section'>
+      <Container maxW='container.lg' centerContent>
+        <Heading as='h1' size='2xl'>
           Ecosystem
         </Heading>
         <Text fontSize={'lg'}>
           Xarray is part of the larger scientific Python ecosystem. It is built
           on top of NumPy, Pandas, and Dask and supports a wide range of domain
           specific scientific applications.
         </Text>
-        <GitHubStats />
-      </Stack>
 
-      <Container maxW={'6xl'} mt={10}>
-        <Tabs align='center' variant='enclosed' isFitted colorScheme='teal'>
+        <Tabs
+          my={8}
+          align='center'
+          variant='enclosed'
+          isFitted
+          colorScheme='teal'
+        >
           <TabList>
-            <Tab>Scientific Domains</Tab>
-            <Tab>Array Libraries</Tab>
+            <Tab _selected={{ color: 'white', bg: 'teal.500' }}>
+              Scientific Domains
+            </Tab>
+            <Tab _selected={{ color: 'white', bg: 'teal.500' }}>
+              Array Libraries
+            </Tab>
           </TabList>
           <TabPanels>
             <TabPanel>