Merge pull request #263 from ethereum/skip-link

SkipLink component

Author: nhsz

src/components/Link.tsx

@@ -67,6 +67,7 @@ export const BaseLink = forwardRef(function Link(
   const isPdf = url.isPdf(href)
   const isExternal = url.isExternal(href)
   const isInternalPdf = isPdf && !isExternal
+  const isHash = url.isHash(href)
 
   // Get proper download link for internally hosted PDF's & static files (ex: whitepaper)
   // Opens in separate window.
@@ -119,6 +120,27 @@ export const BaseLink = forwardRef(function Link(
     )
   }
 
+  if (isHash) {
+    return (
+      <ChakraLink
+        onClick={(e) => {
+          e.stopPropagation()
+          trackCustomEvent(
+            customEventOptions ?? {
+              eventCategory: "Link",
+              eventAction: "Clicked",
+              eventName: "Clicked on hash link",
+              eventValue: href,
+            }
+          )
+        }}
+        {...commonProps}
+      >
+        {children}
+      </ChakraLink>
+    )
+  }
+
   return (
     <NextLink
       locale={locale}

src/components/MainArticle.tsx

@@ -3,7 +3,7 @@ import { Box, type BoxProps } from "@chakra-ui/react"
 import { MAIN_CONTENT_ID } from "@/lib/constants"
 
 const MainArticle = (props: BoxProps) => (
-  <Box as="article" id={MAIN_CONTENT_ID} tabIndex={-1} {...props} />
+  <Box as="article" id={MAIN_CONTENT_ID} scrollMarginTop={24} {...props} />
 )
 
 export default MainArticle

src/components/SkipLink.tsx

@@ -1,19 +1,16 @@
-import React from "react"
+import { useTranslation } from "next-i18next"
 import { Box } from "@chakra-ui/react"
 
-import { BaseLink } from "../components/Link"
+import { BaseLink } from "@/components/Link"
 
-import Translation from "./Translation"
+import { MAIN_CONTENT_ID } from "@/lib/constants"
 
-export interface IProps {
-  hrefId: string
-}
-
-export const SkipLink: React.FC<IProps> = ({ hrefId }) => {
+export const SkipLink = () => {
+  const { t } = useTranslation()
   return (
     <Box bg="primary.base">
       <BaseLink
-        href={hrefId}
+        href={"#" + MAIN_CONTENT_ID}
         lineHeight="taller"
         position="absolute"
         top="-12"
@@ -23,7 +20,7 @@ export const SkipLink: React.FC<IProps> = ({ hrefId }) => {
         _hover={{ textDecoration: "none" }}
         _focus={{ position: "static" }}
       >
-        <Translation id="skip-to-main-content" />
+        {t("skip-to-main-content")}
       </BaseLink>
     </Box>
   )

src/layouts/RootLayout.tsx

@@ -8,6 +8,7 @@ import type { Root } from "@/lib/types"
 import FeedbackWidget from "@/components/FeedbackWidget"
 import Footer from "@/components/Footer"
 import Nav from "@/components/Nav"
+import { SkipLink } from "@/components/SkipLink"
 import TranslationBanner from "@/components/TranslationBanner"
 import TranslationBannerLegal from "@/components/TranslationBannerLegal"
 
@@ -47,6 +48,8 @@ export const RootLayout = ({
 
   return (
     <Container mx="auto" maxW={oldTheme.variables.maxPageWidth}>
+      <SkipLink />
+
       <Nav path={asPath} />
 
       <TranslationBanner

src/lib/utils/url.ts

@@ -33,3 +33,5 @@ export const isHrefActive = (
     ? pathname.startsWith(cleanHref)
     : pathname === cleanHref
 }
+
+export const isHash = (href: string): boolean => href.startsWith("#")