Merge branch 'dev' into stablecoins-redirect

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/layouts/UseCases.tsx

@@ -7,7 +7,6 @@ import {
   Hide,
   Icon,
   ListItem,
-  Show,
   Text,
   UnorderedList,
   useToken,
@@ -179,17 +178,15 @@ export const UseCasesLayout: React.FC<IProps> = ({
 
   return (
     <Box position="relative" width="full">
-      <Show above={lgBp}>
-        <BannerNotification shouldShow zIndex="sticky">
-          <Emoji text=":pencil:" fontSize="2xl" me={4} flexShrink={0} />
-          <Text m={0}>
-            {t("template-usecase:template-usecase-banner")}{" "}
-            <InlineLink href={absoluteEditPath}>
-              {t("template-usecase-edit-link")}
-            </InlineLink>
-          </Text>
-        </BannerNotification>
-      </Show>
+      <BannerNotification shouldShow zIndex="sticky" hideBelow={lgBp}>
+        <Emoji text=":pencil:" fontSize="2xl" me={4} flexShrink={0} />
+        <Text m={0}>
+          {t("template-usecase:template-usecase-banner")}{" "}
+          <InlineLink href={absoluteEditPath}>
+            {t("template-usecase-edit-link")}
+          </InlineLink>
+        </Text>
+      </BannerNotification>
       <HeroContainer key={frontmatter.title}>
         <TitleCard>
           <Emoji fontSize="4rem" text={frontmatter.emoji!} />
@@ -233,21 +230,20 @@ export const UseCasesLayout: React.FC<IProps> = ({
           }}
         />
       </HeroContainer>
-      <Show above={lgBp}>
-        <Flex
-          as={BaseLink}
-          to={"#" + MAIN_CONTENT_ID}
-          bg="ednBackground"
-          justifyContent="center"
-          p={4}
-          width="full"
-          _hover={{
-            bg: "background.base",
-          }}
-        >
-          <Icon as={MdExpandMore} fontSize="2xl" color="secondary" />
-        </Flex>
-      </Show>
+      <Flex
+        as={BaseLink}
+        to={"#" + MAIN_CONTENT_ID}
+        bg="ednBackground"
+        justifyContent="center"
+        p={4}
+        width="full"
+        _hover={{
+          bg: "background.base",
+        }}
+        hideBelow={lgBp}
+      >
+        <Icon as={MdExpandMore} fontSize="2xl" color="secondary" />
+      </Flex>
       <Page>
         {/* TODO: Switch to `above="lg"` after completion of Chakra Migration */}
         <LeftNavBar

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("#")