From 7e5c3cacbcef138315038728dffeb5d664d9006f Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sat, 3 Dec 2022 18:50:11 -0800
Subject: [PATCH 01/21] use Box instead of flex Stack for nav items

allows vertical margins of children to properly collapse into one another
---
 src/components/UI/docs/DocumentNav.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/UI/docs/DocumentNav.tsx b/src/components/UI/docs/DocumentNav.tsx
index 25663a720b..4526af7725 100644
--- a/src/components/UI/docs/DocumentNav.tsx
+++ b/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,7 +20,7 @@ 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>
@@ -39,6 +39,6 @@ export const DocumentNav: FC<Props> = ({ content }) => {
           </NextLink>
         );
       })}
-    </Stack>
+    </Box>
   );
 };

From e564ae46aa5e81a670e81992fac26bcc2364aba6 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sat, 3 Dec 2022 18:50:23 -0800
Subject: [PATCH 02/21] adjust docs nav gap to 14px per design

---
 src/components/UI/docs/DocumentNav.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/UI/docs/DocumentNav.tsx b/src/components/UI/docs/DocumentNav.tsx
index 4526af7725..21c6f89a08 100644
--- a/src/components/UI/docs/DocumentNav.tsx
+++ b/src/components/UI/docs/DocumentNav.tsx
@@ -32,6 +32,7 @@ export const DocumentNav: FC<Props> = ({ content }) => {
               <Text
                 color={activeHash === heading?.headingId ? 'body' : 'primary'}
                 textStyle='document-nav-link'
+                mb='14px'
               >
                 {heading?.title}
               </Text>

From 5926da4aa7b49a45929ca22a37a7e163ebc4f405 Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Mon, 5 Dec 2022 11:38:04 -0700
Subject: [PATCH 03/21] filter out anchor tag

---
 src/components/UI/docs/Breadcrumbs.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/UI/docs/Breadcrumbs.tsx b/src/components/UI/docs/Breadcrumbs.tsx
index e1b6f71304..217b9c524e 100644
--- a/src/components/UI/docs/Breadcrumbs.tsx
+++ b/src/components/UI/docs/Breadcrumbs.tsx
@@ -7,7 +7,8 @@ export const Breadcrumbs: FC = () => {
   const router = useRouter();
 
   let pathSplit = router.asPath.split('/');
-  pathSplit = pathSplit.splice(1, pathSplit.length);
+  pathSplit = pathSplit.splice(1, pathSplit.length)
+    .map((path) => path.includes('#') ? path.split('#')[0] : path);
 
   return (
     <>

From bbd4a31bad0c0d6134d4e7a6ed2928c15b97da98 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Tue, 6 Dec 2022 14:35:53 +0100
Subject: [PATCH 04/21] add max width of 100% to md content on mobile (#130)

---
 src/components/UI/docs/MDComponents.tsx | 2 +-
 src/pages/[...slug].tsx                 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/UI/docs/MDComponents.tsx b/src/components/UI/docs/MDComponents.tsx
index ff1217b126..dab3a440d1 100644
--- a/src/components/UI/docs/MDComponents.tsx
+++ b/src/components/UI/docs/MDComponents.tsx
@@ -101,7 +101,7 @@ const MDComponents = {
   },
   // tables
   table: ({ children }: any) => (
-    <Flex maxW='min(100%, 100vw)' overflowX='auto'>
+    <Flex overflowX='auto'>
       <Table
         variant='striped'
         colorScheme='greenAlpha'
diff --git a/src/pages/[...slug].tsx b/src/pages/[...slug].tsx
index 3c5166e91b..b68760f344 100644
--- a/src/pages/[...slug].tsx
+++ b/src/pages/[...slug].tsx
@@ -116,7 +116,7 @@ const DocPage: NextPage<Props> = ({ frontmatter, content, navLinks, lastModified
             </Stack>
 
             <Flex width='100%' placeContent='space-between' gap={8}>
-              <Stack maxW='768px' sx={{ "*:first-of-type": { marginTop: '0 !important' } }}>
+              <Stack maxW='min(100%, 768px)' sx={{ "*:first-of-type": { marginTop: '0 !important' } }}>
                 <ReactMarkdown
                   remarkPlugins={[gfm]}
                   rehypePlugins={[rehypeRaw]}

From 892c743b78d4fe5e0ef6f6b74d19338655568e9d Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Tue, 6 Dec 2022 14:43:12 +0100
Subject: [PATCH 05/21] Use long month formatting for last edit date [Fixes
 #86] (#121)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* use long month formatting for last edit date

* last -> Last

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

Co-authored-by: Nicolás Quiroz <nh.quiroz@gmail.com>

Co-authored-by: Corwin Smith <cssmittys@gmail.com>
Co-authored-by: Nicolás Quiroz <nh.quiroz@gmail.com>
---
 src/pages/[...slug].tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/[...slug].tsx b/src/pages/[...slug].tsx
index b68760f344..1d24e72165 100644
--- a/src/pages/[...slug].tsx
+++ b/src/pages/[...slug].tsx
@@ -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,7 +111,7 @@ 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>
 

From 9bbcd7107843204d4552150df6d043c785d73139 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Tue, 6 Dec 2022 14:46:18 +0100
Subject: [PATCH 06/21] Fix hover for DocumentNav links [Fixes #73] (#107)

* fix hover for DocumentNav links [Fixes #73]

* use Box instead of flex Stack

Allows vertical margins of children to collapse into each other

* Revert "use Box instead of flex Stack"

This reverts commit a4811127ccd7424da8f51e2a056aee447fc5db08.

* add :focus and :active states
---
 src/components/UI/docs/DocumentNav.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/UI/docs/DocumentNav.tsx b/src/components/UI/docs/DocumentNav.tsx
index 25663a720b..b8ed1b1135 100644
--- a/src/components/UI/docs/DocumentNav.tsx
+++ b/src/components/UI/docs/DocumentNav.tsx
@@ -28,10 +28,27 @@ export const DocumentNav: FC<Props> = ({ content }) => {
       {parsedHeadings.map((heading, idx) => {
         return (
           <NextLink key={`${idx} ${heading?.title}`} href={`#${heading?.headingId}`}>
-            <Link m={0}>
+            <Link m={0} textDecoration='none !important'>
               <Text
                 color={activeHash === heading?.headingId ? 'body' : 'primary'}
                 textStyle='document-nav-link'
+                _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>

From 9107cf39881c97d733a334ed55ff34d5b776cd41 Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Tue, 6 Dec 2022 10:35:44 -0700
Subject: [PATCH 07/21] Update src/components/UI/docs/Breadcrumbs.tsx

Co-authored-by: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
---
 src/components/UI/docs/Breadcrumbs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/UI/docs/Breadcrumbs.tsx b/src/components/UI/docs/Breadcrumbs.tsx
index 217b9c524e..2a23848177 100644
--- a/src/components/UI/docs/Breadcrumbs.tsx
+++ b/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)
     .map((path) => path.includes('#') ? path.split('#')[0] : path);
 

From 5186a1f74fab326e2358302ade6143deb7e36648 Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Tue, 6 Dec 2022 10:35:48 -0700
Subject: [PATCH 08/21] Update src/components/UI/docs/Breadcrumbs.tsx

Co-authored-by: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
---
 src/components/UI/docs/Breadcrumbs.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/UI/docs/Breadcrumbs.tsx b/src/components/UI/docs/Breadcrumbs.tsx
index 2a23848177..c451bb78fd 100644
--- a/src/components/UI/docs/Breadcrumbs.tsx
+++ b/src/components/UI/docs/Breadcrumbs.tsx
@@ -7,8 +7,7 @@ export const Breadcrumbs: FC = () => {
   const router = useRouter();
 
   let pathSplit = router.asPath.split('#')[0].split('/');
-  pathSplit = pathSplit.splice(1, pathSplit.length)
-    .map((path) => path.includes('#') ? path.split('#')[0] : path);
+  pathSplit = pathSplit.splice(1, pathSplit.length);
 
   return (
     <>

From d93e4373e2b32c5e7772bb89e4c2d9d3717f5a61 Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Tue, 6 Dec 2022 10:53:11 -0700
Subject: [PATCH 09/21] Update src/components/UI/docs/DocumentNav.tsx

Co-authored-by: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
---
 src/components/UI/docs/DocumentNav.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/UI/docs/DocumentNav.tsx b/src/components/UI/docs/DocumentNav.tsx
index 21c6f89a08..07adf63ad3 100644
--- a/src/components/UI/docs/DocumentNav.tsx
+++ b/src/components/UI/docs/DocumentNav.tsx
@@ -32,7 +32,7 @@ export const DocumentNav: FC<Props> = ({ content }) => {
               <Text
                 color={activeHash === heading?.headingId ? 'body' : 'primary'}
                 textStyle='document-nav-link'
-                mb='14px'
+                mb={3.5}
               >
                 {heading?.title}
               </Text>

From 7e9e22a6712aff5ad02809f41e4488a0b41552e4 Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Tue, 6 Dec 2022 10:54:50 -0700
Subject: [PATCH 10/21] remove margin styles for document-nav-link in
 textStyles.ts

---
 src/theme/foundations/textStyles.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/theme/foundations/textStyles.ts b/src/theme/foundations/textStyles.ts
index df2c9e9d70..1badd62db0 100644
--- a/src/theme/foundations/textStyles.ts
+++ b/src/theme/foundations/textStyles.ts
@@ -191,7 +191,6 @@ export const textStyles = {
     fontSize: '13px',
     lineHeight: 5,
     letterSpacing: '1%',
-    mb: 4
   },
   'note-text': {
     fontFamily: 'body',

From 332e972397e6171127b573a79a3bf6ef5f507a94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Quiroz?= <nh.quiroz@gmail.com>
Date: Tue, 6 Dec 2022 17:02:55 -0300
Subject: [PATCH 11/21] fix: external links (#133)

* fix: footer external links

* fix: ButtonLinkSecondary external links

* fix: docs external links
---
 src/components/UI/ButtonLinkSecondary.tsx | 13 +++++++---
 src/components/UI/docs/MDComponents.tsx   | 15 ++++++-----
 src/components/layouts/Footer.tsx         | 31 ++++++++---------------
 3 files changed, 28 insertions(+), 31 deletions(-)

diff --git a/src/components/UI/ButtonLinkSecondary.tsx b/src/components/UI/ButtonLinkSecondary.tsx
index 94ff6ff629..3cea28fd7f 100644
--- a/src/components/UI/ButtonLinkSecondary.tsx
+++ b/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 {...restProps}>
+          <Link variant='button-link-secondary'>
+            <Text textStyle='home-section-link-label'>{children}</Text>
+          </Link>
+        </NextLink>
+      )}
     </Stack>
   );
 };
diff --git a/src/components/UI/docs/MDComponents.tsx b/src/components/UI/docs/MDComponents.tsx
index dab3a440d1..2e7f88122c 100644
--- a/src/components/UI/docs/MDComponents.tsx
+++ b/src/components/UI/docs/MDComponents.tsx
@@ -28,14 +28,15 @@ const MDComponents = {
   },
   // links
   a: ({ children, href }: any) => {
-    return (
+    const isExternal = href.startsWith('http') && !href.includes('geth.ethereum.org');
+
+    return isExternal ? (
+      <Link href={href} isExternal variant='light'>
+        {children}
+      </Link>
+    ) : (
       <NextLink href={href} passHref>
-        <Link
-          isExternal={href.startsWith('http') && !href.includes('geth.ethereum.org')}
-          variant='light'
-        >
-          {children}
-        </Link>
+        <Link variant='light'>{children}</Link>
       </NextLink>
     );
   },
diff --git a/src/components/layouts/Footer.tsx b/src/components/layouts/Footer.tsx
index cd9802ca11..f539477147 100644
--- a/src/components/layouts/Footer.tsx
+++ b/src/components/layouts/Footer.tsx
@@ -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>

From 56b9963afd6024a75a19aed7d7d1ec882868f4fe Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Tue, 6 Dec 2022 21:04:09 +0100
Subject: [PATCH 12/21] Markdown header margin fix [Fixes #83] (#120)

* expand parseHeadingId

Will produce a kebab-case heading ID from string if none explicitly declared in the markdown. Always returns an object with the children, title and headingId.

* remove redundant code from MDComponents.tsx

parseHeadingIds now always returns an object with an ID, removing need for conditionals here

* Use Box instead of flex Stack for MDX content

Allows stacked vertical margins to properly collapse into each other

* fix: h2 top margin to 3rem on mobile

* remove unneeded line

* extract and rename getKebabCaseFromName util fn

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

* Update src/utils/parseHeadingId.ts

Co-authored-by: Corwin Smith <cssmittys@gmail.com>

* move constant inside function

make variable name all caps as a string constant

* clean up utils/index.ts to abc order

Co-authored-by: Corwin Smith <cssmittys@gmail.com>
---
 src/components/UI/docs/MDComponents.tsx | 56 +++++++------------------
 src/pages/[...slug].tsx                 | 11 +++--
 src/utils/getKebabCaseFromName.ts       |  7 ++++
 src/utils/index.ts                      |  3 +-
 src/utils/parseHeadingId.ts             | 26 +++++++-----
 5 files changed, 47 insertions(+), 56 deletions(-)
 create mode 100644 src/utils/getKebabCaseFromName.ts

diff --git a/src/components/UI/docs/MDComponents.tsx b/src/components/UI/docs/MDComponents.tsx
index 2e7f88122c..994809ca89 100644
--- a/src/components/UI/docs/MDComponents.tsx
+++ b/src/components/UI/docs/MDComponents.tsx
@@ -42,61 +42,37 @@ const MDComponents = {
   },
   // 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 ? (
-      <Heading
-        as='h2'
-        textAlign='start'
-        mt='16 !important'
-        mb='4 !important'
-        {...header2}
-        id={heading.headingId}
-      >
-        {heading.children}
-      </Heading>
-    ) : (
-      <Heading as='h2' textAlign='start' mt='16 !important' mb='4 !important' {...header2}>
-        {children}
+    return (
+      <Heading as='h2' textAlign='start' mt={{ base: '12 !important' , md: '16 !important'}} mb='4 !important' {...header2} id={headingId}>
+        {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>
     );
   },
diff --git a/src/pages/[...slug].tsx b/src/pages/[...slug].tsx
index 1d24e72165..1d1eab5cd0 100644
--- a/src/pages/[...slug].tsx
+++ b/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';
@@ -116,7 +116,7 @@ const DocPage: NextPage<Props> = ({ frontmatter, content, navLinks, lastModified
             </Stack>
 
             <Flex width='100%' placeContent='space-between' gap={8}>
-              <Stack maxW='min(100%, 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 +124,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>
diff --git a/src/utils/getKebabCaseFromName.ts b/src/utils/getKebabCaseFromName.ts
new file mode 100644
index 0000000000..10ce621144
--- /dev/null
+++ b/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, '');
diff --git a/src/utils/index.ts b/src/utils/index.ts
index dcc6c5caa4..206b319fe8 100644
--- a/src/utils/index.ts
+++ b/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';
diff --git a/src/utils/parseHeadingId.ts b/src/utils/parseHeadingId.ts
index 75d56bf5de..1e0b93e0ec 100644
--- a/src/utils/parseHeadingId.ts
+++ b/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])
+  };
 };

From faa0640465ec9f0746024598b38d12eff6918242 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Wed, 7 Dec 2022 15:57:25 +0100
Subject: [PATCH 13/21] update green.900 value (#135)

used for button background; increases contrast ratio
---
 src/theme/foundations/colors.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/theme/foundations/colors.ts b/src/theme/foundations/colors.ts
index ed3fef3533..16477ffa52 100644
--- a/src/theme/foundations/colors.ts
+++ b/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'

From 11035bf0c4f179f0c416dcca224cd6ac6dfab14b Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Wed, 7 Dec 2022 18:26:23 +0100
Subject: [PATCH 14/21] adjusts light primary to green.700 for contrast (#137)

Improves contrast ratio when paired with yellow.50 and removes browser a11y warnings
---
 src/theme/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/theme/index.ts b/src/theme/index.ts
index 4900f4df0e..0b2c3bfafe 100644
--- a/src/theme/index.ts
+++ b/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' },

From af86168c2f73665f60295c4f5159634b006f9d3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Quiroz?= <nh.quiroz@gmail.com>
Date: Wed, 7 Dec 2022 14:30:09 -0300
Subject: [PATCH 15/21] feat: add empty state for platforms without releases

---
 src/components/UI/DataTable.tsx               | 58 +++++++++++++------
 .../UI/downloads/DownloadsTable.tsx           |  2 +-
 2 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/src/components/UI/DataTable.tsx b/src/components/UI/DataTable.tsx
index 1aa5341ce9..810d92813a 100644
--- a/src/components/UI/DataTable.tsx
+++ b/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';
@@ -20,6 +31,7 @@ export const DataTable: FC<Props> = ({ columnHeaders, data }) => {
       css={{
         '&::-webkit-scrollbar': {
           borderTop: '2px solid var(--chakra-colors-primary)',
+          borderBottom: '2px solid var(--chakra-colors-primary)',
           height: 18
         },
         '&::-webkit-scrollbar-thumb': {
@@ -30,26 +42,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' //? 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 (
diff --git a/src/components/UI/downloads/DownloadsTable.tsx b/src/components/UI/downloads/DownloadsTable.tsx
index 7b3263313c..a5feab18c0 100644
--- a/src/components/UI/downloads/DownloadsTable.tsx
+++ b/src/components/UI/downloads/DownloadsTable.tsx
@@ -36,7 +36,7 @@ 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' }}>
       <Tabs variant='unstyled' onChange={idx => setTotalReleases(totalReleases[idx])}>
         <TabList color='primary' bg='button-bg'>
           {DOWNLOADS_TABLE_TABS.map((tab, idx) => {

From 527dad36352b602df28a66bab5dd321e2f15139b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Quiroz?= <nh.quiroz@gmail.com>
Date: Wed, 7 Dec 2022 16:59:44 -0300
Subject: [PATCH 16/21] fix: borderBottom on DownloadsTable

---
 src/components/UI/DataTable.tsx                |  3 +--
 src/components/UI/downloads/DownloadsTable.tsx | 11 ++++++++++-
 src/pages/downloads.tsx                        |  2 ++
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/UI/DataTable.tsx b/src/components/UI/DataTable.tsx
index 810d92813a..55df07c493 100644
--- a/src/components/UI/DataTable.tsx
+++ b/src/components/UI/DataTable.tsx
@@ -31,7 +31,6 @@ export const DataTable: FC<Props> = ({ columnHeaders, data }) => {
       css={{
         '&::-webkit-scrollbar': {
           borderTop: '2px solid var(--chakra-colors-primary)',
-          borderBottom: '2px solid var(--chakra-colors-primary)',
           height: 18
         },
         '&::-webkit-scrollbar-thumb': {
@@ -52,7 +51,7 @@ export const DataTable: FC<Props> = ({ columnHeaders, data }) => {
                       fontFamily='"JetBrains Mono", monospace'
                       fontWeight={700}
                       fontSize='md'
-                      color='#868b87' //? Use theme color? Or add to theme?
+                      color='#868b87' // TODO: Use theme color? Or add to theme?
                     >
                       {columnHeader}
                     </Text>
diff --git a/src/components/UI/downloads/DownloadsTable.tsx b/src/components/UI/downloads/DownloadsTable.tsx
index a5feab18c0..b8a45207c6 100644
--- a/src/components/UI/downloads/DownloadsTable.tsx
+++ b/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' }}>
+    <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) => {
diff --git a/src/pages/downloads.tsx b/src/pages/downloads.tsx
index 06f546df22..720f3020ed 100644
--- a/src/pages/downloads.tsx
+++ b/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}
             />

From d8996d1c950e16bc8037f66a7b573e3d7732c279 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Quiroz?= <nh.quiroz@gmail.com>
Date: Wed, 7 Dec 2022 17:09:43 -0300
Subject: [PATCH 17/21] fix: adds missing legacyBehavior prop

---
 src/components/UI/ButtonLinkSecondary.tsx     |  2 +-
 src/components/UI/Header.tsx                  |  6 ++++--
 src/components/UI/HeaderButtons.tsx           |  4 ++--
 src/components/UI/docs/Breadcrumbs.tsx        |  6 +++++-
 src/components/UI/docs/DocsLinks.tsx          | 10 +++++-----
 src/components/UI/docs/DocumentNav.tsx        |  8 ++++----
 src/components/UI/docs/LinksList.tsx          | 16 ++++++++++------
 src/components/UI/docs/MDComponents.tsx       | 19 +++++++++++++------
 src/components/UI/downloads/DownloadsHero.tsx |  2 +-
 src/components/UI/homepage/HomeHero.tsx       |  4 ++--
 src/components/UI/homepage/QuickLinks.tsx     |  6 +++---
 src/components/layouts/Footer.tsx             |  4 ++--
 12 files changed, 52 insertions(+), 35 deletions(-)

diff --git a/src/components/UI/ButtonLinkSecondary.tsx b/src/components/UI/ButtonLinkSecondary.tsx
index 3cea28fd7f..509cdc2c4f 100644
--- a/src/components/UI/ButtonLinkSecondary.tsx
+++ b/src/components/UI/ButtonLinkSecondary.tsx
@@ -18,7 +18,7 @@ export const ButtonLinkSecondary: React.FC<Props> = ({ href, children, ...restPr
           <Text textStyle='home-section-link-label'>{children}</Text>
         </Link>
       ) : (
-        <NextLink href={href.toString()} passHref {...restProps}>
+        <NextLink href={href.toString()} passHref legacyBehavior {...restProps}>
           <Link variant='button-link-secondary'>
             <Text textStyle='home-section-link-label'>{children}</Text>
           </Link>
diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx
index 18cac9ca19..2ff2b515b2 100644
--- a/src/components/UI/Header.tsx
+++ b/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>
diff --git a/src/components/UI/HeaderButtons.tsx b/src/components/UI/HeaderButtons.tsx
index 1c1d7f2cde..89f033dca4 100644
--- a/src/components/UI/HeaderButtons.tsx
+++ b/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' }}>
diff --git a/src/components/UI/docs/Breadcrumbs.tsx b/src/components/UI/docs/Breadcrumbs.tsx
index c451bb78fd..f1fa912500 100644
--- a/src/components/UI/docs/Breadcrumbs.tsx
+++ b/src/components/UI/docs/Breadcrumbs.tsx
@@ -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>
diff --git a/src/components/UI/docs/DocsLinks.tsx b/src/components/UI/docs/DocsLinks.tsx
index ab77e803ae..3f8ab35759 100644
--- a/src/components/UI/docs/DocsLinks.tsx
+++ b/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>
   );
-}
+};
diff --git a/src/components/UI/docs/DocumentNav.tsx b/src/components/UI/docs/DocumentNav.tsx
index e5d0c39877..564e2ad8df 100644
--- a/src/components/UI/docs/DocumentNav.tsx
+++ b/src/components/UI/docs/DocumentNav.tsx
@@ -27,7 +27,7 @@ export const DocumentNav: FC<Props> = ({ content }) => {
       <Divider borderColor='primary' my={`4 !important`} />
       {parsedHeadings.map((heading, idx) => {
         return (
-          <NextLink key={`${idx} ${heading?.title}`} href={`#${heading?.headingId}`}>
+          <NextLink key={`${idx} ${heading?.title}`} href={`#${heading?.headingId}`} legacyBehavior>
             <Link m={0} textDecoration='none !important'>
               <Text
                 color={activeHash === heading?.headingId ? 'body' : 'primary'}
@@ -36,19 +36,19 @@ export const DocumentNav: FC<Props> = ({ content }) => {
                 _hover={{
                   background: 'primary',
                   boxShadow: '0 0 0 6px var(--chakra-colors-primary)',
-                  color: 'bg',
+                  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',
+                  outlineOffset: '4px'
                 }}
                 _active={{
                   background: 'secondary',
                   boxShadow: '0 0 0 6px var(--chakra-colors-secondary)',
-                  color: 'bg',
+                  color: 'bg'
                 }}
               >
                 {heading?.title}
diff --git a/src/components/UI/docs/LinksList.tsx b/src/components/UI/docs/LinksList.tsx
index 6c9d838e1d..e9b6f02653 100644
--- a/src/components/UI/docs/LinksList.tsx
+++ b/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}
diff --git a/src/components/UI/docs/MDComponents.tsx b/src/components/UI/docs/MDComponents.tsx
index 994809ca89..4a9625f968 100644
--- a/src/components/UI/docs/MDComponents.tsx
+++ b/src/components/UI/docs/MDComponents.tsx
@@ -35,14 +35,14 @@ const MDComponents = {
         {children}
       </Link>
     ) : (
-      <NextLink href={href} passHref>
+      <NextLink href={href} passHref legacyBehavior>
         <Link variant='light'>{children}</Link>
       </NextLink>
     );
   },
   // headings
   h1: ({ children }: any) => {
-    const { children: parsedChildren, headingId} = parseHeadingId(children);
+    const { children: parsedChildren, headingId } = parseHeadingId(children);
 
     return (
       <Heading as='h1' textAlign='start' mb='5 !important' {...header1} id={headingId}>
@@ -51,16 +51,23 @@ const MDComponents = {
     );
   },
   h2: ({ children }: any) => {
-    const { children: parsedChildren, headingId} = parseHeadingId(children);
+    const { children: parsedChildren, headingId } = parseHeadingId(children);
 
     return (
-      <Heading as='h2' textAlign='start' mt={{ base: '12 !important' , md: '16 !important'}} mb='4 !important' {...header2} id={headingId}>
+      <Heading
+        as='h2'
+        textAlign='start'
+        mt={{ base: '12 !important', md: '16 !important' }}
+        mb='4 !important'
+        {...header2}
+        id={headingId}
+      >
         {parsedChildren}
       </Heading>
     );
   },
   h3: ({ children }: any) => {
-    const { children: parsedChildren, headingId} = parseHeadingId(children);
+    const { children: parsedChildren, headingId } = parseHeadingId(children);
     return (
       <Heading as='h3' mt='5 !important' mb='2.5 !important' {...header3} id={headingId}>
         {parsedChildren}
@@ -68,7 +75,7 @@ const MDComponents = {
     );
   },
   h4: ({ children }: any) => {
-    const { children: parsedChildren, headingId} = parseHeadingId(children);
+    const { children: parsedChildren, headingId } = parseHeadingId(children);
 
     return (
       <Heading as='h4' mb='2.5 !important' {...header4} id={headingId}>
diff --git a/src/components/UI/downloads/DownloadsHero.tsx b/src/components/UI/downloads/DownloadsHero.tsx
index 3792864f71..6d9cfa7b99 100644
--- a/src/components/UI/downloads/DownloadsHero.tsx
+++ b/src/components/UI/downloads/DownloadsHero.tsx
@@ -81,7 +81,7 @@ export const DownloadsHero: FC<DownloadsHero> = ({
           {Object.keys(DOWNLOAD_HEADER_BUTTONS).map((key: string) => {
             const { name, buildURL, Svg, ariaLabel } = DOWNLOAD_HEADER_BUTTONS[key];
             return (
-              <NextLink key={key} href={buildURL} passHref>
+              <NextLink key={key} href={buildURL} passHref legacyBehavior>
                 <Button as='a' variant='downloadsHeader' width={{ base: '100%' }} h={16}>
                   <HStack spacing={4}>
                     <Stack alignItems='center'>
diff --git a/src/components/UI/homepage/HomeHero.tsx b/src/components/UI/homepage/HomeHero.tsx
index d3df7fa563..43207e49c8 100644
--- a/src/components/UI/homepage/HomeHero.tsx
+++ b/src/components/UI/homepage/HomeHero.tsx
@@ -36,7 +36,7 @@ export const HomeHero: FC = () => {
         alignItems={{ base: 'center', md: 'flex-start' }}
       >
         <Flex direction='column' alignItems='center' mr={{ md: 6 }}>
-          <NextLink href={DOWNLOADS_PAGE} passHref>
+          <NextLink href={DOWNLOADS_PAGE} passHref legacyBehavior>
             <Button variant='primary' as='a' mb={1}>
               <Text textStyle='homepage-primary-label'>Download</Text>
             </Button>
@@ -48,7 +48,7 @@ export const HomeHero: FC = () => {
         </Flex>
 
         <Flex direction='column' alignItems='center'>
-          <NextLink href={DOCS_PAGE} passHref>
+          <NextLink href={DOCS_PAGE} passHref legacyBehavior>
             <Button variant='primary' as='a' mb={1}>
               <Text textStyle='homepage-primary-label'>Documentation</Text>
             </Button>
diff --git a/src/components/UI/homepage/QuickLinks.tsx b/src/components/UI/homepage/QuickLinks.tsx
index 34307c5ff2..61e90988a6 100644
--- a/src/components/UI/homepage/QuickLinks.tsx
+++ b/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
diff --git a/src/components/layouts/Footer.tsx b/src/components/layouts/Footer.tsx
index f539477147..42c394c2fe 100644
--- a/src/components/layouts/Footer.tsx
+++ b/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>

From 640b72abc699251cf2e7d4f2888bcb83aee85103 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Quiroz?= <nh.quiroz@gmail.com>
Date: Wed, 7 Dec 2022 18:40:13 -0300
Subject: [PATCH 18/21] fix: add :hover color for hero buttons on dark mode

---
 src/components/UI/downloads/DownloadsHero.tsx |  9 +++++++--
 src/components/UI/homepage/HomeHero.tsx       |  4 ++--
 src/theme/foundations/textStyles.ts           | 11 +++++++----
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/UI/downloads/DownloadsHero.tsx b/src/components/UI/downloads/DownloadsHero.tsx
index 3792864f71..9588bded9f 100644
--- a/src/components/UI/downloads/DownloadsHero.tsx
+++ b/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}>
+                <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>
diff --git a/src/components/UI/homepage/HomeHero.tsx b/src/components/UI/homepage/HomeHero.tsx
index d3df7fa563..ae9963eecb 100644
--- a/src/components/UI/homepage/HomeHero.tsx
+++ b/src/components/UI/homepage/HomeHero.tsx
@@ -37,7 +37,7 @@ export const HomeHero: FC = () => {
       >
         <Flex direction='column' alignItems='center' mr={{ md: 6 }}>
           <NextLink href={DOWNLOADS_PAGE} passHref>
-            <Button variant='primary' as='a' mb={1}>
+            <Button variant='primary' as='a' mb={1} data-group>
               <Text textStyle='homepage-primary-label'>Download</Text>
             </Button>
           </NextLink>
@@ -49,7 +49,7 @@ export const HomeHero: FC = () => {
 
         <Flex direction='column' alignItems='center'>
           <NextLink href={DOCS_PAGE} passHref>
-            <Button variant='primary' as='a' mb={1}>
+            <Button variant='primary' as='a' mb={1} data-group>
               <Text textStyle='homepage-primary-label'>Documentation</Text>
             </Button>
           </NextLink>
diff --git a/src/theme/foundations/textStyles.ts b/src/theme/foundations/textStyles.ts
index ade07a1901..64d1949408 100644
--- a/src/theme/foundations/textStyles.ts
+++ b/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,7 +193,7 @@ export const textStyles = {
     fontWeight: 400,
     fontSize: '13px',
     lineHeight: 5,
-    letterSpacing: '1%',
+    letterSpacing: '1%'
   },
   'note-text': {
     fontFamily: 'body',

From 026757a5dbc47d652d1022a8db4fdebbf4644e10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Quiroz?= <nh.quiroz@gmail.com>
Date: Wed, 7 Dec 2022 18:41:50 -0300
Subject: [PATCH 19/21] chore: prettier

---
 src/components/UI/Header.tsx            |  4 +++-
 src/components/UI/docs/DocsLinks.tsx    |  8 ++++----
 src/components/UI/docs/DocumentNav.tsx  |  6 +++---
 src/components/UI/docs/LinksList.tsx    | 14 +++++++++-----
 src/components/UI/docs/MDComponents.tsx | 17 ++++++++++++-----
 src/components/UI/svgs/AddIcon.tsx      |  6 +++---
 src/components/UI/svgs/MinusIcon.tsx    |  4 ++--
 src/pages/[...slug].tsx                 |  5 ++++-
 8 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx
index 18cac9ca19..8cb57d07c3 100644
--- a/src/components/UI/Header.tsx
+++ b/src/components/UI/Header.tsx
@@ -29,7 +29,9 @@ export const Header: FC = () => {
       >
         <NextLink href={'/'} passHref>
           <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>
diff --git a/src/components/UI/docs/DocsLinks.tsx b/src/components/UI/docs/DocsLinks.tsx
index ab77e803ae..167ed00ffe 100644
--- a/src/components/UI/docs/DocsLinks.tsx
+++ b/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]}>
@@ -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>
   );
-}
+};
diff --git a/src/components/UI/docs/DocumentNav.tsx b/src/components/UI/docs/DocumentNav.tsx
index e5d0c39877..25dc3e2d19 100644
--- a/src/components/UI/docs/DocumentNav.tsx
+++ b/src/components/UI/docs/DocumentNav.tsx
@@ -36,19 +36,19 @@ export const DocumentNav: FC<Props> = ({ content }) => {
                 _hover={{
                   background: 'primary',
                   boxShadow: '0 0 0 6px var(--chakra-colors-primary)',
-                  color: 'bg',
+                  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',
+                  outlineOffset: '4px'
                 }}
                 _active={{
                   background: 'secondary',
                   boxShadow: '0 0 0 6px var(--chakra-colors-secondary)',
-                  color: 'bg',
+                  color: 'bg'
                 }}
               >
                 {heading?.title}
diff --git a/src/components/UI/docs/LinksList.tsx b/src/components/UI/docs/LinksList.tsx
index 6c9d838e1d..a7b870615a 100644
--- a/src/components/UI/docs/LinksList.tsx
+++ b/src/components/UI/docs/LinksList.tsx
@@ -15,10 +15,15 @@ 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>
+          <Stack
+            key={id}
+            pb={items ? 6 : 0}
+            _hover={{ background: 'primary', color: 'bg' }}
+            data-group
+          >
             <NextLink href={to} passHref key={id}>
               <Link textDecoration='none !important'>
                 <Text
@@ -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}
diff --git a/src/components/UI/docs/MDComponents.tsx b/src/components/UI/docs/MDComponents.tsx
index 994809ca89..8fb2278bcc 100644
--- a/src/components/UI/docs/MDComponents.tsx
+++ b/src/components/UI/docs/MDComponents.tsx
@@ -42,7 +42,7 @@ const MDComponents = {
   },
   // headings
   h1: ({ children }: any) => {
-    const { children: parsedChildren, headingId} = parseHeadingId(children);
+    const { children: parsedChildren, headingId } = parseHeadingId(children);
 
     return (
       <Heading as='h1' textAlign='start' mb='5 !important' {...header1} id={headingId}>
@@ -51,16 +51,23 @@ const MDComponents = {
     );
   },
   h2: ({ children }: any) => {
-    const { children: parsedChildren, headingId} = parseHeadingId(children);
+    const { children: parsedChildren, headingId } = parseHeadingId(children);
 
     return (
-      <Heading as='h2' textAlign='start' mt={{ base: '12 !important' , md: '16 !important'}} mb='4 !important' {...header2} id={headingId}>
+      <Heading
+        as='h2'
+        textAlign='start'
+        mt={{ base: '12 !important', md: '16 !important' }}
+        mb='4 !important'
+        {...header2}
+        id={headingId}
+      >
         {parsedChildren}
       </Heading>
     );
   },
   h3: ({ children }: any) => {
-    const { children: parsedChildren, headingId} = parseHeadingId(children);
+    const { children: parsedChildren, headingId } = parseHeadingId(children);
     return (
       <Heading as='h3' mt='5 !important' mb='2.5 !important' {...header3} id={headingId}>
         {parsedChildren}
@@ -68,7 +75,7 @@ const MDComponents = {
     );
   },
   h4: ({ children }: any) => {
-    const { children: parsedChildren, headingId} = parseHeadingId(children);
+    const { children: parsedChildren, headingId } = parseHeadingId(children);
 
     return (
       <Heading as='h4' mb='2.5 !important' {...header4} id={headingId}>
diff --git a/src/components/UI/svgs/AddIcon.tsx b/src/components/UI/svgs/AddIcon.tsx
index fe8f3016c9..c4ddec18af 100644
--- a/src/components/UI/svgs/AddIcon.tsx
+++ b/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>
   )
diff --git a/src/components/UI/svgs/MinusIcon.tsx b/src/components/UI/svgs/MinusIcon.tsx
index 689f611370..71a72d1b92 100644
--- a/src/components/UI/svgs/MinusIcon.tsx
+++ b/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>
   )
diff --git a/src/pages/[...slug].tsx b/src/pages/[...slug].tsx
index 1d1eab5cd0..86380e3a38 100644
--- a/src/pages/[...slug].tsx
+++ b/src/pages/[...slug].tsx
@@ -116,7 +116,10 @@ const DocPage: NextPage<Props> = ({ frontmatter, content, navLinks, lastModified
             </Stack>
 
             <Flex width='100%' placeContent='space-between' gap={8}>
-              <Box maxW='min(100%, 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]}

From 50254f6e8075e2a64efc401483d79df902edb7b6 Mon Sep 17 00:00:00 2001
From: Marius van der Wijden <m.vanderwijden@live.de>
Date: Mon, 12 Dec 2022 13:50:07 +0100
Subject: [PATCH 20/21] Update contributing.md

---
 docs/developers/contributing.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/developers/contributing.md b/docs/developers/contributing.md
index 72884fc585..3034b0c870 100644
--- a/docs/developers/contributing.md
+++ b/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}
 

From 61214ee283297851ac28e377522b528a0e5a8f79 Mon Sep 17 00:00:00 2001
From: Marius van der Wijden <m.vanderwijden@live.de>
Date: Mon, 12 Dec 2022 14:55:23 +0100
Subject: [PATCH 21/21] Update code-review-guidelines.md

Removing this whitespace might make the final page look cleaner (Not as much whitespace between terminology and process)
---
 docs/developers/geth-developer/code-review-guidelines.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/developers/geth-developer/code-review-guidelines.md b/docs/developers/geth-developer/code-review-guidelines.md
index 91ad66c1d1..2fa8e1cb77 100644
--- a/docs/developers/geth-developer/code-review-guidelines.md
+++ b/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.