Merge branch 'master' of https://github.com/ethereum/geth-website

docs/developers/contributing.md

@@ -25,7 +25,7 @@ We encourage an early pull request approach, meaning pull requests are created a
 
 ## Contributing to the Geth website {#contributing-to-website}
 
-The Geth website is hosted separately from Geth itself. The contribution guidelines are the same. Please for the Geth website GitHub repository and raise pull requests for the maintainers to review and merge.
+The Geth website is hosted separately from Geth itself. The contribution guidelines are the same. Please check out the [website repository](https://github.com/ethereum/geth-website) and raise pull requests for the maintainers to review and merge.
 
 ## License {#license}
 

docs/developers/geth-developer/code-review-guidelines.md

@@ -8,7 +8,6 @@ The only way to get code into Geth is to submit a pull request (PR). Those pull
 ## Terminology {#terminology}
 
 - The **author** of a pull request is the entity who wrote the diff and submitted it to GitHub.
-
 - The **team** consists of people with commit rights on the go-ethereum repository.
 - The **reviewer** is the person assigned to review the diff. The reviewer must be a team member.
 - The **code owner** is the person responsible for the subsystem being modified by the PR.

src/components/UI/ButtonLinkSecondary.tsx

@@ -9,14 +9,21 @@ interface Props extends LinkProps {
 
 export const ButtonLinkSecondary: React.FC<Props> = ({ href, children, ...restProps }) => {
   const isExternal: boolean = href.toString().startsWith('http');
+
   const variant = LinkTheme.variants['button-link-secondary'];
   return (
     <Stack sx={{ mt: '0 !important' }} {...variant}>
-      <NextLink href={href} passHref {...restProps}>
-        <Link variant='button-link-secondary' isExternal={isExternal}>
+      {isExternal ? (
+        <Link variant='button-link-secondary' href={href.toString()} isExternal>
           <Text textStyle='home-section-link-label'>{children}</Text>
         </Link>
-      </NextLink>
+      ) : (
+        <NextLink href={href.toString()} passHref legacyBehavior {...restProps}>
+          <Link variant='button-link-secondary'>
+            <Text textStyle='home-section-link-label'>{children}</Text>
+          </Link>
+        </NextLink>
+      )}
     </Stack>
   );
 };

src/components/UI/DataTable.tsx

@@ -1,4 +1,15 @@
-import { Link, Table, Thead, Tr, Th, TableContainer, Text, Tbody, Td } from '@chakra-ui/react';
+import {
+  Link,
+  Table,
+  Thead,
+  Tr,
+  Th,
+  TableContainer,
+  Text,
+  Tbody,
+  Td,
+  Stack
+} from '@chakra-ui/react';
 import { FC } from 'react';
 import { OpenPGPSignaturesData, ReleaseData } from '../../types';
 import { getParsedDate } from '../../utils';
@@ -30,26 +41,34 @@ export const DataTable: FC<Props> = ({ columnHeaders, data }) => {
       pb={4}
     >
       <Table variant='unstyled'>
-        <Thead>
-          <Tr>
-            {columnHeaders.map((columnHeader, idx) => {
-              return (
-                <Th key={idx} textTransform='none' minW={'130.5px'} px={4}>
-                  <Text
-                    fontFamily='"JetBrains Mono", monospace'
-                    fontWeight={700}
-                    fontSize='md'
-                    color='#868b87' //? Use theme color? Or add to theme?
-                  >
-                    {columnHeader}
-                  </Text>
-                </Th>
-              );
-            })}
-          </Tr>
-        </Thead>
+        {data.length > 0 && (
+          <Thead>
+            <Tr>
+              {columnHeaders.map((columnHeader, idx) => {
+                return (
+                  <Th key={idx} textTransform='none' minW={'130.5px'} px={4}>
+                    <Text
+                      fontFamily='"JetBrains Mono", monospace'
+                      fontWeight={700}
+                      fontSize='md'
+                      color='#868b87' // TODO: Use theme color? Or add to theme?
+                    >
+                      {columnHeader}
+                    </Text>
+                  </Th>
+                );
+              })}
+            </Tr>
+          </Thead>
+        )}
 
         <Tbody>
+          {data.length === 0 && (
+            <Stack justifyContent='center' alignItems='center' w='100%' minH={80}>
+              <Text textStyle='header4'>No builds found</Text>
+            </Stack>
+          )}
+
           {dataType === 'Releases' &&
             data.map((r: ReleaseData, idx: number) => {
               return (

src/components/UI/Header.tsx

@@ -27,9 +27,11 @@ export const Header: FC = () => {
         borderColor='primary'
         flexGrow={2}
       >
-        <NextLink href={'/'} passHref>
+        <NextLink href={'/'} passHref legacyBehavior>
           <Link _hover={{ textDecoration: 'none' }}>
-            <Text textStyle='header-font' whiteSpace='nowrap'>go-ethereum</Text>
+            <Text textStyle='header-font' whiteSpace='nowrap'>
+              go-ethereum
+            </Text>
           </Link>
         </NextLink>
       </Stack>

src/components/UI/HeaderButtons.tsx

@@ -25,7 +25,7 @@ export const HeaderButtons: FC<Props> = ({ close }) => {
   return (
     <Flex direction={{ base: 'column', md: 'row' }}>
       {/* DOWNLOADS */}
-      <NextLink href={DOWNLOADS_PAGE} passHref>
+      <NextLink href={DOWNLOADS_PAGE} passHref legacyBehavior>
         <Link _hover={{ textDecoration: 'none' }} onClick={close}>
           <Stack {...menuItemStyles}>
             <Text textStyle={{ base: 'header-mobile-button', md: 'header-button' }}>downloads</Text>
@@ -34,7 +34,7 @@ export const HeaderButtons: FC<Props> = ({ close }) => {
       </NextLink>
 
       {/* DOCUMENTATION */}
-      <NextLink href={DOCS_PAGE} passHref>
+      <NextLink href={DOCS_PAGE} passHref legacyBehavior>
         <Link _hover={{ textDecoration: 'none' }} onClick={close}>
           <Stack {...menuItemStyles}>
             <Text textStyle={{ base: 'header-mobile-button', md: 'header-button' }}>

src/components/UI/docs/Breadcrumbs.tsx

@@ -6,7 +6,7 @@ import { FC } from 'react';
 export const Breadcrumbs: FC = () => {
   const router = useRouter();
 
-  let pathSplit = router.asPath.split('/');
+  let pathSplit = router.asPath.split('#')[0].split('/');
   pathSplit = pathSplit.splice(1, pathSplit.length);
 
   return (
@@ -16,7 +16,11 @@ export const Breadcrumbs: FC = () => {
           {pathSplit.map((path: string, idx: number) => {
             return (
               <BreadcrumbItem key={path}>
-                <NextLink href={`/${pathSplit.slice(0, idx + 1).join('/')}`} passHref>
+                <NextLink
+                  href={`/${pathSplit.slice(0, idx + 1).join('/')}`}
+                  passHref
+                  legacyBehavior
+                >
                   <BreadcrumbLink color={idx + 1 === pathSplit.length ? 'body' : 'primary'}>
                     {path}
                   </BreadcrumbLink>

src/components/UI/docs/DocsLinks.tsx

@@ -9,7 +9,7 @@ import {
   Stack,
   Text
 } from '@chakra-ui/react';
-import { AddIcon, MinusIcon } from '../svgs/'
+import { AddIcon, MinusIcon } from '../svgs/';
 import NextLink from 'next/link';
 import { useRouter } from 'next/router';
 
@@ -27,7 +27,7 @@ export const DocsLinks: FC<Props> = ({ navLinks }) => {
   return (
     <Stack border='2px' borderColor='primary'>
       {navLinks.map(({ id, to, items }, idx) => {
-        const split = to?.split('/')
+        const split = to?.split('/');
         const isActive = slug && split && split[split.length - 1] === slug[slug.length - 1];
         return (
           <Accordion key={id} allowToggle mt='0 !important' defaultIndex={[0]}>
@@ -52,7 +52,7 @@ export const DocsLinks: FC<Props> = ({ navLinks }) => {
                       _groupHover={{ background: 'primary', color: 'bg', textDecoration: 'none' }}
                     >
                       {to ? (
-                        <NextLink href={to} passHref>
+                        <NextLink href={to} passHref legacyBehavior>
                           <Link textDecoration='none !important'>
                             <Text
                               textStyle='docs-nav-dropdown'
@@ -62,7 +62,7 @@ export const DocsLinks: FC<Props> = ({ navLinks }) => {
                                 verticalAlign: '-1.25px',
                                 marginInlineEnd: 2,
                                 fontSize: 'lg',
-                                display: isActive ? 'unset' : 'none',
+                                display: isActive ? 'unset' : 'none'
                               }}
                               _groupHover={{ color: 'bg' }}
                             >
@@ -100,4 +100,4 @@ export const DocsLinks: FC<Props> = ({ navLinks }) => {
       })}
     </Stack>
   );
-}
+};

src/components/UI/docs/DocumentNav.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { Divider, Link, Stack, Text } from '@chakra-ui/react';
+import { Box, Divider, Link, Text } from '@chakra-ui/react';
 import NextLink from 'next/link';
 
 import { parseHeadingId } from '../../../utils/parseHeadingId';
@@ -20,18 +20,36 @@ export const DocumentNav: FC<Props> = ({ content }) => {
   const activeHash = useActiveHash(parsedHeadings.map(heading => heading!.headingId));
 
   return (
-    <Stack position='sticky' top='4'>
+    <Box position='sticky' top='4'>
       <Text as='h5' textStyle='document-nav-title'>
         on this page
       </Text>
       <Divider borderColor='primary' my={`4 !important`} />
       {parsedHeadings.map((heading, idx) => {
         return (
-          <NextLink key={`${idx} ${heading?.title}`} href={`#${heading?.headingId}`}>
-            <Link m={0}>
+          <NextLink key={`${idx} ${heading?.title}`} href={`#${heading?.headingId}`} legacyBehavior>
+            <Link m={0} textDecoration='none !important'>
               <Text
                 color={activeHash === heading?.headingId ? 'body' : 'primary'}
                 textStyle='document-nav-link'
+                mb={3.5}
+                _hover={{
+                  background: 'primary',
+                  boxShadow: '0 0 0 6px var(--chakra-colors-primary)',
+                  color: 'bg'
+                }}
+                _focus={{
+                  background: 'primary',
+                  boxShadow: '0 0 0 6px var(--chakra-colors-primary) !important',
+                  color: 'bg',
+                  outline: '2px solid var(--chakra-colors-secondary) !important',
+                  outlineOffset: '4px'
+                }}
+                _active={{
+                  background: 'secondary',
+                  boxShadow: '0 0 0 6px var(--chakra-colors-secondary)',
+                  color: 'bg'
+                }}
               >
                 {heading?.title}
               </Text>
@@ -39,6 +57,6 @@ export const DocumentNav: FC<Props> = ({ content }) => {
           </NextLink>
         );
       })}
-    </Stack>
+    </Box>
   );
 };

src/components/UI/docs/LinksList.tsx

@@ -15,11 +15,16 @@ export const LinksList: FC<LinksListProps> = ({ links }) => {
   return (
     <Stack px={4}>
       {links.map(({ id, to, items }) => {
-        const split = to?.split('/')
+        const split = to?.split('/');
         const isActive = slug && split && split[split.length - 1] === slug[slug.length - 1];
         return to ? (
-          <Stack key={id} pb={items ? 6 : 0} _hover={{ background: 'primary', color: 'bg' }} data-group>
-            <NextLink href={to} passHref key={id}>
+          <Stack
+            key={id}
+            pb={items ? 6 : 0}
+            _hover={{ background: 'primary', color: 'bg' }}
+            data-group
+          >
+            <NextLink href={to} passHref key={id} legacyBehavior>
               <Link textDecoration='none !important'>
                 <Text
                   textStyle='docs-nav-links'
@@ -29,12 +34,11 @@ export const LinksList: FC<LinksListProps> = ({ links }) => {
                     verticalAlign: '-1.25px',
                     marginInlineEnd: 2,
                     fontSize: 'lg',
-                    display: isActive ? 'unset' : 'none',
+                    display: isActive ? 'unset' : 'none'
                   }}
                   _groupHover={{
                     color: 'bg',
-                    boxShadow: '0 0 0 var(--chakra-space-2) var(--chakra-colors-primary)',
-                    
+                    boxShadow: '0 0 0 var(--chakra-space-2) var(--chakra-colors-primary)'
                   }}
                 >
                   {id}

src/components/UI/docs/MDComponents.tsx

@@ -28,80 +28,64 @@ const MDComponents = {
   },
   // links
   a: ({ children, href }: any) => {
-    return (
-      <NextLink href={href} passHref>
-        <Link
-          isExternal={href.startsWith('http') && !href.includes('geth.ethereum.org')}
-          variant='light'
-        >
-          {children}
-        </Link>
+    const isExternal = href.startsWith('http') && !href.includes('geth.ethereum.org');
+
+    return isExternal ? (
+      <Link href={href} isExternal variant='light'>
+        {children}
+      </Link>
+    ) : (
+      <NextLink href={href} passHref legacyBehavior>
+        <Link variant='light'>{children}</Link>
       </NextLink>
     );
   },
   // headings
   h1: ({ children }: any) => {
-    const heading = parseHeadingId(children);
+    const { children: parsedChildren, headingId } = parseHeadingId(children);
 
-    return heading ? (
-      <Heading as='h1' textAlign='start' mb='5 !important' {...header1} id={heading.headingId}>
-        {heading.children}
-      </Heading>
-    ) : (
-      <Heading as='h1' textAlign='start' mb='5 !important' {...header1}>
-        {children}
+    return (
+      <Heading as='h1' textAlign='start' mb='5 !important' {...header1} id={headingId}>
+        {parsedChildren}
       </Heading>
     );
   },
   h2: ({ children }: any) => {
-    const heading = parseHeadingId(children);
+    const { children: parsedChildren, headingId } = parseHeadingId(children);
 
-    return heading ? (
+    return (
       <Heading
         as='h2'
         textAlign='start'
-        mt='16 !important'
+        mt={{ base: '12 !important', md: '16 !important' }}
         mb='4 !important'
         {...header2}
-        id={heading.headingId}
+        id={headingId}
       >
-        {heading.children}
-      </Heading>
-    ) : (
-      <Heading as='h2' textAlign='start' mt='16 !important' mb='4 !important' {...header2}>
-        {children}
+        {parsedChildren}
       </Heading>
     );
   },
   h3: ({ children }: any) => {
-    const heading = parseHeadingId(children);
-
-    return heading ? (
-      <Heading as='h3' mt='5 !important' mb='2.5 !important' {...header3} id={heading.headingId}>
-        {heading.children}
-      </Heading>
-    ) : (
-      <Heading as='h3' mt='5 !important' mb='2.5 !important' {...header3}>
-        {children}
+    const { children: parsedChildren, headingId } = parseHeadingId(children);
+    return (
+      <Heading as='h3' mt='5 !important' mb='2.5 !important' {...header3} id={headingId}>
+        {parsedChildren}
       </Heading>
     );
   },
   h4: ({ children }: any) => {
-    const heading = parseHeadingId(children);
+    const { children: parsedChildren, headingId } = parseHeadingId(children);
 
-    return heading ? (
-      <Heading as='h4' mb='2.5 !important' {...header4} id={heading.headingId}>
-        {heading.children}
-      </Heading>
-    ) : (
-      <Heading as='h4' mb='2.5 !important' {...header4}>
-        {children}
+    return (
+      <Heading as='h4' mb='2.5 !important' {...header4} id={headingId}>
+        {parsedChildren}
       </Heading>
     );
   },
   // tables
   table: ({ children }: any) => (
-    <Flex maxW='min(100%, 100vw)' overflowX='auto'>
+    <Flex overflowX='auto'>
       <Table
         variant='striped'
         colorScheme='greenAlpha'

src/components/UI/downloads/DownloadsHero.tsx

@@ -80,12 +80,17 @@ export const DownloadsHero: FC<DownloadsHero> = ({
         <Grid templateColumns={{ base: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }} gap={4}>
           {Object.keys(DOWNLOAD_HEADER_BUTTONS).map((key: string) => {
             const { name, buildURL, Svg, ariaLabel } = DOWNLOAD_HEADER_BUTTONS[key];
+
             return (
-              <NextLink key={key} href={buildURL} passHref>
-                <Button as='a' variant='downloadsHeader' width={{ base: '100%' }} h={16}>
+              <NextLink key={key} href={buildURL} passHref legacyBehavior>
+                <Button as='a' variant='downloadsHeader' width={{ base: '100%' }} h={16} data-group>
                   <HStack spacing={4}>
                     <Stack alignItems='center'>
-                      <Svg aria-label={ariaLabel} maxH='44px' />
+                      <Svg
+                        aria-label={ariaLabel}
+                        maxH='44px'
+                        _groupHover={{ color: 'yellow.50' }}
+                      />
                     </Stack>
                     <Box>
                       <Text textStyle='downloads-button-label'>For {name}</Text>

src/components/UI/downloads/DownloadsTable.tsx

@@ -12,6 +12,7 @@ interface Props {
   windowsData: ReleaseData[];
   iOSData: ReleaseData[];
   androidData: ReleaseData[];
+  totalReleasesNumber: number;
   amountOfReleasesToShow: number;
   setTotalReleases: (idx: number) => void;
 }
@@ -22,6 +23,7 @@ export const DownloadsTable: FC<Props> = ({
   windowsData,
   iOSData,
   androidData,
+  totalReleasesNumber,
   amountOfReleasesToShow,
   setTotalReleases
 }) => {
@@ -36,7 +38,14 @@ export const DownloadsTable: FC<Props> = ({
   const LAST_2_LINUX_RELEASES = amountOfReleasesToShow + 12;
 
   return (
-    <Stack sx={{ mt: '0 !important' }} borderBottom='2px solid' borderColor='primary'>
+    <Stack
+      sx={{ mt: '0 !important' }}
+      borderBottom={
+        amountOfReleasesToShow < totalReleasesNumber
+          ? '2px solid var(--chakra-colors-primary)'
+          : 'none'
+      }
+    >
       <Tabs variant='unstyled' onChange={idx => setTotalReleases(totalReleases[idx])}>
         <TabList color='primary' bg='button-bg'>
           {DOWNLOADS_TABLE_TABS.map((tab, idx) => {

src/components/UI/homepage/HomeHero.tsx

@@ -36,8 +36,8 @@ export const HomeHero: FC = () => {
         alignItems={{ base: 'center', md: 'flex-start' }}
       >
         <Flex direction='column' alignItems='center' mr={{ md: 6 }}>
-          <NextLink href={DOWNLOADS_PAGE} passHref>
-            <Button variant='primary' as='a' mb={1}>
+          <NextLink href={DOWNLOADS_PAGE} passHref legacyBehavior>
+            <Button variant='primary' as='a' mb={1} data-group>
               <Text textStyle='homepage-primary-label'>Download</Text>
             </Button>
           </NextLink>
@@ -48,8 +48,8 @@ export const HomeHero: FC = () => {
         </Flex>
 
         <Flex direction='column' alignItems='center'>
-          <NextLink href={DOCS_PAGE} passHref>
-            <Button variant='primary' as='a' mb={1}>
+          <NextLink href={DOCS_PAGE} passHref legacyBehavior>
+            <Button variant='primary' as='a' mb={1} data-group>
               <Text textStyle='homepage-primary-label'>Documentation</Text>
             </Button>
           </NextLink>

src/components/UI/homepage/QuickLinks.tsx

@@ -28,7 +28,7 @@ export const QuickLinks: FC = () => {
           </Stack>
         </GridItem>
         <GridItem borderBottom='2px solid' borderColor='primary'>
-          <NextLink href={`${DOCS_PAGE}/getting-started`} passHref>
+          <NextLink href={`${DOCS_PAGE}/getting-started`} passHref legacyBehavior>
             <Link _hover={{ textDecoration: 'none' }}>
               <Stack
                 data-group
@@ -66,7 +66,7 @@ export const QuickLinks: FC = () => {
           </Stack>
         </GridItem>
         <GridItem borderBottom='2px solid' borderColor='primary'>
-          <NextLink href={FAQ_PAGE} passHref>
+          <NextLink href={FAQ_PAGE} passHref legacyBehavior>
             <Link _hover={{ textDecoration: 'none' }}>
               <Stack
                 data-group
@@ -104,7 +104,7 @@ export const QuickLinks: FC = () => {
           </Stack>
         </GridItem>
         <GridItem>
-          <NextLink href={CONTRIBUTING_PAGE} passHref>
+          <NextLink href={CONTRIBUTING_PAGE} passHref legacyBehavior>
             <Link _hover={{ textDecoration: 'none' }}>
               <Stack
                 data-group

src/components/UI/svgs/AddIcon.tsx

@@ -8,9 +8,9 @@ const Icon = createIcon({
   viewBox: `0 0 ${w} ${h}`,
   path: (
     <svg width={w} height={h} fill='none' xmlns='http://www.w3.org/2000/svg'>
-      <g fill="currentColor">
-        <rect height="2" width="20" x="2" y="11"></rect>
-        <rect height="20" width="2" x="11" y="2"></rect>
+      <g fill='currentColor'>
+        <rect height='2' width='20' x='2' y='11'></rect>
+        <rect height='20' width='2' x='11' y='2'></rect>
       </g>
     </svg>
   )

src/components/UI/svgs/MinusIcon.tsx

@@ -8,8 +8,8 @@ const Icon = createIcon({
   viewBox: `0 0 ${w} ${h}`,
   path: (
     <svg width={w} height={h} fill='none' xmlns='http://www.w3.org/2000/svg'>
-      <g fill="currentColor">
-        <rect height="2" width="20" x="2" y="11"></rect>
+      <g fill='currentColor'>
+        <rect height='2' width='20' x='2' y='11'></rect>
       </g>
     </svg>
   )

src/components/layouts/Footer.tsx

@@ -43,7 +43,7 @@ export const Footer: FC = () => {
             borderColor='primary'
             p={4}
           >
-            <NextLink href={DOWNLOADS_PAGE} passHref>
+            <NextLink href={DOWNLOADS_PAGE} passHref legacyBehavior>
               <Link _hover={{ textDecoration: 'none' }}>
                 <Text textStyle='footer-link-label'>DOWNLOADS</Text>
               </Link>
@@ -61,7 +61,7 @@ export const Footer: FC = () => {
             borderColor='primary'
             p={4}
           >
-            <NextLink href={DOCS_PAGE} passHref>
+            <NextLink href={DOCS_PAGE} passHref legacyBehavior>
               <Link _hover={{ textDecoration: 'none' }}>
                 <Text textStyle='footer-link-label'>DOCUMENTATION</Text>
               </Link>
@@ -82,11 +82,9 @@ export const Footer: FC = () => {
             _hover={hoverStyles}
             p={4}
           >
-            <NextLink href={GETH_TWITTER_URL} passHref>
-              <Link isExternal>
-                <TwitterIcon w={8} height='22px' _groupHover={{ color: 'bg' }} color='primary' />
-              </Link>
-            </NextLink>
+            <Link href={GETH_TWITTER_URL} isExternal>
+              <TwitterIcon w={8} height='22px' _groupHover={{ color: 'bg' }} color='primary' />
+            </Link>
           </Center>
 
           <Center
@@ -98,24 +96,15 @@ export const Footer: FC = () => {
             borderColor='primary'
             p={4}
           >
-            <NextLink href={GETH_DISCORD_URL} passHref>
-              <Link isExternal>
-                <DiscordIcon w={8} height='22px' _groupHover={{ color: 'bg' }} color='primary' />
-              </Link>
-            </NextLink>
+            <Link href={GETH_DISCORD_URL} isExternal>
+              <DiscordIcon w={8} height='22px' _groupHover={{ color: 'bg' }} color='primary' />
+            </Link>
           </Center>
 
-          <Center
-            data-group
-            flex={1}
-            _hover={hoverStyles}
-            p={4}
-          >
-            <NextLink href={GETH_REPO_URL} passHref>
-              <Link isExternal>
-                <GitHubIcon w={7} height='22px' _groupHover={{ color: 'bg' }} color='primary' />
-              </Link>
-            </NextLink>
+          <Center data-group flex={1} _hover={hoverStyles} p={4}>
+            <Link href={GETH_REPO_URL} isExternal>
+              <GitHubIcon w={7} height='22px' _groupHover={{ color: 'bg' }} color='primary' />
+            </Link>
           </Center>
         </Flex>
       </Flex>

src/pages/[...slug].tsx

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import matter from 'gray-matter';
 import yaml from 'js-yaml';
-import { Flex, Stack, Heading, Text } from '@chakra-ui/react';
+import { Box, Flex, Stack, Heading, Text } from '@chakra-ui/react';
 import ChakraUIRenderer from 'chakra-ui-markdown-renderer';
 import ReactMarkdown from 'react-markdown';
 import { useRouter } from 'next/router';
@@ -63,7 +63,7 @@ export const getStaticProps: GetStaticProps = async context => {
       content,
       navLinks,
       lastModified: getParsedDate(lastModified.mtime, {
-        month: 'numeric',
+        month: 'long',
         day: 'numeric',
         year: 'numeric'
       })
@@ -111,12 +111,15 @@ const DocPage: NextPage<Props> = ({ frontmatter, content, navLinks, lastModified
                 {frontmatter.title}
               </Heading>
               <Text as='span' mt='0 !important'>
-                last edited {lastModified}
+                Last edited on {lastModified}
               </Text>
             </Stack>
 
             <Flex width='100%' placeContent='space-between' gap={8}>
-              <Stack maxW='768px' sx={{ "*:first-of-type": { marginTop: '0 !important' } }}>
+              <Box
+                maxW='min(100%, 768px)'
+                sx={{ '*:first-of-type': { marginTop: '0 !important' } }}
+              >
                 <ReactMarkdown
                   remarkPlugins={[gfm]}
                   rehypePlugins={[rehypeRaw]}
@@ -124,9 +127,12 @@ const DocPage: NextPage<Props> = ({ frontmatter, content, navLinks, lastModified
                 >
                   {content}
                 </ReactMarkdown>
-              </Stack>
+              </Box>
 
-              <Stack display={{ base: 'none', xl: 'block' }} w="clamp(var(--chakra-sizes-40), 12.5%, var(--chakra-sizes-56))">
+              <Stack
+                display={{ base: 'none', xl: 'block' }}
+                w='clamp(var(--chakra-sizes-40), 12.5%, var(--chakra-sizes-56))'
+              >
                 <DocumentNav content={content} />
               </Stack>
             </Flex>

src/pages/downloads.tsx

@@ -368,6 +368,7 @@ const DownloadsPage: NextPage<Props> = ({ data }) => {
               windowsData={ALL_WINDOWS_STABLE_RELEASES}
               iOSData={ALL_IOS_STABLE_RELEASES}
               androidData={ALL_ANDROID_STABLE_RELEASES}
+              totalReleasesNumber={totalStableReleases}
               amountOfReleasesToShow={amountStableReleases}
               setTotalReleases={setTotalStableReleases}
             />
@@ -423,6 +424,7 @@ const DownloadsPage: NextPage<Props> = ({ data }) => {
               windowsData={ALL_WINDOWS_DEV_BUILDS}
               iOSData={ALL_IOS_DEV_BUILDS}
               androidData={ALL_ANDROID_DEV_BUILDS}
+              totalReleasesNumber={totalDevBuilds}
               amountOfReleasesToShow={amountDevBuilds}
               setTotalReleases={setTotalDevBuilds}
             />

src/theme/foundations/colors.ts

@@ -9,7 +9,7 @@ export const colors = {
     600: '#11866f',
     700: '#08715C',
     800: '#25453f',
-    900: '#02211B'
+    900: '#01100D'
   },
   gray: {
     800: '#1d242c'

src/theme/foundations/textStyles.ts

@@ -77,7 +77,8 @@ export const textStyles = {
     fontFamily: 'heading',
     color: 'bg',
     fontWeight: 700,
-    textTransform: 'uppercase'
+    textTransform: 'uppercase',
+    _groupHover: { color: 'yellow.50' }
   },
   'home-section-link-label': {
     fontFamily: 'heading',
@@ -124,13 +125,15 @@ export const textStyles = {
     fontFamily: 'heading',
     color: 'bg',
     fontSize: { base: 'md', lg: 'xl' },
-    textTransform: 'uppercase'
+    textTransform: 'uppercase',
+    _groupHover: { color: 'yellow.50' }
   },
   'downloads-button-sublabel': {
     fontFamily: 'heading',
     color: 'bg',
     fontSize: { base: 'xs', lg: 'sm' },
-    textTransform: 'uppercase'
+    textTransform: 'uppercase',
+    _groupHover: { color: 'yellow.50' }
   },
   'download-tab-label': {
     fontFamily: 'heading',
@@ -190,8 +193,7 @@ export const textStyles = {
     fontWeight: 400,
     fontSize: '13px',
     lineHeight: 5,
-    letterSpacing: '1%',
-    mb: 4
+    letterSpacing: '1%'
   },
   'note-text': {
     fontFamily: 'body',

src/theme/index.ts

@@ -27,7 +27,7 @@ const overrides = {
   textStyles,
   semanticTokens: {
     colors: {
-      primary: { _light: 'green.600', _dark: 'green.200' },
+      primary: { _light: 'green.700', _dark: 'green.200' },
       secondary: { _light: 'green.800', _dark: 'green.600' },
       'button-bg': { _light: 'green.50', _dark: 'green.900' },
       body: { _light: 'gray.800', _dark: 'yellow.50' },

src/utils/getKebabCaseFromName.ts

@@ -0,0 +1,7 @@
+export const getKebabCaseFromName = (name: string): string =>
+  name
+    .replace(/[#]/g, '')
+    .trim()
+    .toLowerCase()
+    .replace(/ /g, '-')
+    .replace(/[^a-z0-9-]/g, '');

src/utils/index.ts

@@ -2,8 +2,9 @@ export { compareReleasesFn } from './compareReleasesFn';
 export { fetchLatestReleaseCommit } from './fetchLatestReleaseCommit';
 export { fetchLatestReleaseVersionAndName } from './fetchLatestReleaseVersionAndName';
 export { fetchXMLData } from './fetchXMLData';
-export { getLatestBinaryURL } from './getLatestBinaryURL';
 export { getChecksum } from './getChecksum';
+export { getKebabCaseFromName } from './getKebabCaseFromName';
+export { getLatestBinaryURL } from './getLatestBinaryURL';
 export { getParsedDate } from './getParsedDate';
 export { getProgrammingLanguageName } from './getProgrammingLanguageName';
 export { getReleaseArch } from './getReleaseArch';

src/utils/parseHeadingId.ts

@@ -1,18 +1,22 @@
-const check = '{#';
+import { getKebabCaseFromName } from './';
 
 export const parseHeadingId = (children: string[]) => {
-  if (children[children.length - 1].includes(check)) {
-    const temp = children[children.length - 1].split(check);
-    const headingId = temp[temp.length - 1].split('}')[0];
-
-    children[children.length - 1] = temp[0];
-
+  const CHECK = '{#';
+  const lastChild = children[children.length - 1];
+  const split = lastChild.split(CHECK);
+  if (lastChild.includes(CHECK)) {
+    const headingId = split[split.length - 1].split('}')[0];
+    const newChildren = [...children];
+    newChildren[newChildren.length - 1] = split[0];
     return {
-      children,
-      title: temp[0].replaceAll('#', ''),
+      children: newChildren,
+      title: split[0].replaceAll('#', ''),
       headingId
     };
   }
-
-  return null;
+  return {
+    children,
+    title: split[0].replaceAll('#', ''),
+    headingId: getKebabCaseFromName(split[0])
+  };
 };