Merge branch 'dev' into removeComponentsFromTsconfig

Author: corwintines

src/components/Codeblock.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from "react"
+import React, { useState } from "react"
+import { useTranslation } from "next-i18next"
 import Highlight, {
   defaultProps,
   Language,
@@ -9,9 +10,9 @@ import { Box, BoxProps, Flex, useColorModeValue } from "@chakra-ui/react"
 
 import CopyToClipboard from "@/components/CopyToClipboard"
 import Emoji from "@/components/Emoji"
-
 // https://github.com/FormidableLabs/prism-react-renderer/tree/master#custom-language-support
-;(typeof global !== "undefined" ? global : window).Prism = Prism
+;
+(typeof global !== "undefined" ? global : window).Prism = Prism
 require("prismjs/components/prism-solidity")
 
 const LINES_BEFORE_COLLAPSABLE = 8
@@ -217,6 +218,7 @@ const Codeblock: React.FC<IProps> = ({
   codeLanguage,
   fromHomepage = false,
 }) => {
+  const { t } = useTranslation('common')
   const selectedTheme = useColorModeValue(codeTheme.light, codeTheme.dark)
 
   const codeText = React.Children.toArray(children)
@@ -321,13 +323,9 @@ const Codeblock: React.FC<IProps> = ({
                     totalLines - 1 > LINES_BEFORE_COLLAPSABLE && (
                       <TopBarItem onClick={() => setIsCollapsed(!isCollapsed)}>
                         {isCollapsed ? (
-                          // TODO: Implement after intl
-                          // <Translation id="show-all" />
-                          <>Show all</>
+                          t("show-all")
                         ) : (
-                          // TODO: Implement after intl
-                          // <Translation id="show-less" />
-                          <>Show less</>
+                          t("show-less")
                         )}
                       </TopBarItem>
                     )}
@@ -338,16 +336,12 @@ const Codeblock: React.FC<IProps> = ({
                           {!isCopied ? (
                             <>
                               <Emoji text=":clipboard:" fontSize="md" />{" "}
-                              {/* TODO: Implement after intl */}
-                              {/* <Translation id="copy" /> */}
-                              Copy
+                               {t("copy")}
                             </>
                           ) : (
                             <>
                               <Emoji text=":white_check_mark:" fontSize="md" />{" "}
-                              {/* TODO: Implement after intl */}
-                              {/* <Translation id="copied" /> */}
-                              Copied
+                              {t("copied")}
                             </>
                           )}
                         </TopBarItem>

src/components/ExpandableCard.tsx

@@ -34,7 +34,7 @@ const ExpandableCard = ({
   eventName = "",
 }: ExpandableCardProps) => {
   const [isVisible, setIsVisible] = useState(false)
-  const { t } = useTranslation("common") // TODO: Double-check namespace
+  const { t } = useTranslation("common")
   const matomo = {
     eventAction,
     eventCategory: `ExpandableCard${eventCategory}`,

src/components/PageMetadata.tsx

@@ -4,12 +4,7 @@ import Head from "next/head"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 
-import { DEFAULT_LOCALE, SITE_URL } from "@/lib/constants"
-
-import ogImageDapps from "@/public/doge-computer.png"
-import ogImageDevelopers from "@/public/enterprise-eth.png"
-import ogImageDefault from "@/public/home/hero.png"
-import ogImageUpgrades from "@/public/upgrades/upgrade_doge.png"
+import { SITE_URL } from "@/lib/constants"
 
 type NameMeta = {
   name: string
@@ -44,33 +39,38 @@ const PageMetadata: React.FC<IProps> = ({
   const desc = description || t("site-description")
   const siteTitle = t("site-title")
   const fullTitle = `${title} | ${siteTitle}`
+  const origin = process.env.NEXT_PUBLIC_SITE_URL || SITE_URL // TODO: Remove .env var usage after launch
+
+  // Remove any query params (?) or hash links (#)
+  const path = asPath.replace(/[\?\#].*/, "")
+  const slug = path.split("/")
 
   /* Set canonical URL w/ language path to avoid duplicate content */
   /* e.g. set ethereum.org/about/ to ethereum.org/en/about/ */
-  const canonical = canonicalUrl || join(SITE_URL, DEFAULT_LOCALE, asPath)
-  const url = locale ? join(SITE_URL, locale, asPath) : canonical
+  const url = new URL(join(locale!, path), origin).href
+  const canonical = canonicalUrl || url
 
   /* Set fallback ogImage based on path */
-  let ogImage = ogImageDefault.src
+  let ogImage = "/home/hero.png"
 
-  if (asPath.includes("/developers/")) {
-    ogImage = ogImageDevelopers.src
+  if (slug.includes("developers")) {
+    ogImage = "/enterprise-eth.png"
   }
 
-  if (asPath.includes("/dapps/")) {
-    ogImage = ogImageDapps.src
+  if (slug.includes("dapps")) {
+    ogImage = "/doge-computer.png"
   }
 
-  if (asPath.includes("/roadmap/")) {
-    ogImage = ogImageUpgrades.src
+  if (slug.includes("roadmap")) {
+    ogImage = "/upgrades/upgrade_doge.png"
   }
 
   if (image) {
     ogImage = image
   }
 
-  const ogImageUrl = join(SITE_URL, ogImage)
-  const metadata: Array<Meta> = [
+  const ogImageUrl = new URL(ogImage, origin).href
+  const metadata: Meta[] = [
     { name: `description`, content: desc },
     { name: `image`, content: ogImageUrl },
     { property: `og:title`, content: fullTitle },

src/components/SideNav.tsx

@@ -66,11 +66,13 @@ const SideNavLink = ({ children, ...props }: LinkProps) => {
 export interface IPropsNavLink {
   item: DeveloperDocsLink
   path: string
+  isTopLevel?: boolean
 }
 
-const NavLink: React.FC<IPropsNavLink> = ({ item, path }) => {
+const NavLink: React.FC<IPropsNavLink> = ({ item, path, isTopLevel }) => {
   const { t } = useTranslation("page-developers-docs")
-  const isLinkInPath = path.includes(item.to) || path.includes(item.path)
+  const isLinkInPath =
+    isTopLevel || path.includes(item.to) || path.includes(item.path)
   const [isOpen, setIsOpen] = useState<boolean>(isLinkInPath)
 
   useEffect(() => {
@@ -115,7 +117,7 @@ const NavLink: React.FC<IPropsNavLink> = ({ item, path }) => {
           key={item.id}
           animate={isOpen ? "open" : "closed"}
           variants={innerLinksVariants}
-          initial="closed"
+          initial={isOpen ? "open" : "closed"}
         >
           {item.items.map((childItem, idx) => (
             <NavLink item={childItem} path={path} key={idx} />
@@ -166,7 +168,7 @@ const SideNav = ({ path }: SideNavProps) => {
       aria-label={t("common:nav-developers-docs")}
     >
       {docLinks.map((item, idx) => (
-        <NavLink item={item} path={path} key={idx} />
+        <NavLink item={item} path={path} key={idx} isTopLevel />
       ))}
     </Box>
   )

src/components/Staking/StakingProductsCardGrid.tsx

@@ -25,7 +25,6 @@ import {
   UnknownProductGlyphIcon,
   WarningProductGlyphIcon,
 } from "@/components/icons/staking"
-import Translation from "@/components/Translation"
 
 import { MatomoEventOptions } from "@/lib/utils/matomo"
 
@@ -276,8 +275,7 @@ const StakingProductCard: React.FC<ICardProps> = ({
         </List>
       </Box>
       <Box {...PADDED_DIV_STYLE}>
-        {/* TODO: Matomo - re-enable */}
-        <ButtonLink to={url} /* customEventOptions={matomo} */ width="100%">
+        <ButtonLink to={url} customEventOptions={matomo} width="100%">
           {t("page-staking-products-get-started")}
         </ButtonLink>
       </Box>

src/components/TableOfContents/TableOfContentsMobile.tsx

@@ -37,49 +37,47 @@ const Mobile: React.FC<IPropsTableOfContentsMobile> = ({ items, maxDepth }) => {
   }
 
   return (
-    <Show below={lgBp}>
-      {/* TODO: switch `l` to `lg` after UI migration and use `hideBelow` prop */}
-      <Box
-        as="aside"
-        background="background.base"
-        border="1px"
-        borderColor="border"
-        borderRadius="4px"
-        py={2}
-        px={4}
+    <Box
+      hideFrom={lgBp}
+      as="aside"
+      background="background.base"
+      border="1px"
+      borderColor="border"
+      borderRadius="4px"
+      py={2}
+      px={4}
+    >
+      <Flex
+        color="text200"
+        cursor="pointer"
+        alignItems="center"
+        justify="space-between"
+        {...getButtonProps()}
       >
-        <Flex
-          color="text200"
-          cursor="pointer"
-          alignItems="center"
-          justify="space-between"
-          {...getButtonProps()}
-        >
-          <chakra.span flex={1} fontWeight={500}>
-            {t("on-this-page")}
-          </chakra.span>
-          <Icon
-            as={MdExpandMore}
-            transform={isOpen ? "rotate(0)" : "rotate(-90deg)"}
-            boxSize={6}
-            transition="transform .4s"
+        <chakra.span flex={1} fontWeight={500}>
+          {t("on-this-page")}
+        </chakra.span>
+        <Icon
+          as={MdExpandMore}
+          transform={isOpen ? "rotate(0)" : "rotate(-90deg)"}
+          boxSize={6}
+          transition="transform .4s"
+        />
+      </Flex>
+      <Fade
+        in={isOpen}
+        {...getDisclosureProps()}
+        transition={{ enter: { duration: 0.6 } }}
+      >
+        <List {...outerListProps}>
+          <ItemsList
+            items={items}
+            depth={0}
+            maxDepth={maxDepth ? maxDepth : 1}
           />
-        </Flex>
-        <Fade
-          in={isOpen}
-          {...getDisclosureProps()}
-          transition={{ enter: { duration: 0.6 } }}
-        >
-          <List {...outerListProps}>
-            <ItemsList
-              items={items}
-              depth={0}
-              maxDepth={maxDepth ? maxDepth : 1}
-            />
-          </List>
-        </Fade>
-      </Box>
-    </Show>
+        </List>
+      </Fade>
+    </Box>
   )
 }
 

src/components/TableOfContents/index.tsx

@@ -7,7 +7,6 @@ import {
   Icon,
   List,
   ListItem,
-  Show,
   useToken,
 } from "@chakra-ui/react"
 
@@ -68,47 +67,46 @@ const TableOfContents: React.FC<IProps> = ({
   }
 
   return (
-    <Show above={lgBp}>
-      <Box
-        as="aside"
-        position="sticky"
-        top="7.25rem" // Account for navbar
-        p={4}
-        pe={0}
-        maxW="25%"
-        minW={48}
-        height={calc.subtract("100vh", "80px")}
-        overflowY="auto"
-        {...rest}
-      >
-        <List {...outerListProps}>
-          {!hideEditButton && editPath && (
-            <ListItem mb={2}>
-              <ButtonLink
-                leftIcon={<Icon as={FaGithub} />}
-                href={editPath}
-                variant="outline"
-              >
-                {t("edit-page")}
-              </ButtonLink>
-            </ListItem>
-          )}
-          <ListItem>
-            <Box mb={2} textTransform="uppercase">
-              {t("on-this-page")}
-            </Box>
-            <List m={0}>
-              <ItemsList
-                items={items}
-                depth={0}
-                maxDepth={maxDepth ? maxDepth : 1}
-                activeHash={activeHash}
-              />
-            </List>
+    <Box
+      hideBelow={lgBp}
+      as="aside"
+      position="sticky"
+      top="7.25rem" // Account for navbar
+      p={4}
+      pe={0}
+      maxW="25%"
+      minW={48}
+      height={calc.subtract("100vh", "80px")}
+      overflowY="auto"
+      {...rest}
+    >
+      <List {...outerListProps}>
+        {!hideEditButton && editPath && (
+          <ListItem mb={2}>
+            <ButtonLink
+              leftIcon={<Icon as={FaGithub} />}
+              href={editPath}
+              variant="outline"
+            >
+              {t("edit-page")}
+            </ButtonLink>
           </ListItem>
-        </List>
-      </Box>
-    </Show>
+        )}
+        <ListItem>
+          <Box mb={2} textTransform="uppercase">
+            {t("on-this-page")}
+          </Box>
+          <List m={0}>
+            <ItemsList
+              items={items}
+              depth={0}
+              maxDepth={maxDepth ? maxDepth : 1}
+              activeHash={activeHash}
+            />
+          </List>
+        </ListItem>
+      </List>
+    </Box>
   )
 }