Merge remote-tracking branch 'upstream/dev' into feat/learn-page-shadcn

Author: TylerAPfledderer

.env.example

@@ -33,4 +33,11 @@ BUILD_LOCALES=
 
 # If resource constraints are being hit during builds, change LIMIT_CPUS to a
 # fixed number of CPUs (e.g. 2) to limit the demand during build time
-LIMIT_CPUS=
+LIMIT_CPUS=
+
+# Sentry auth token required for error tracking
+SENTRY_AUTH_TOKEN=
+NEXT_PUBLIC_SENTRY_DSN=
+
+# Enables the bundle analyzer
+ANALYZE=false

instrumentation.ts

@@ -0,0 +1,28 @@
+import * as Sentry from "@sentry/nextjs"
+
+export async function register() {
+  const dsn = process.env.NEXT_PUBLIC_SENTRY_DSN
+
+  if (!dsn) {
+    console.warn("Sentry DSN not found, skipping")
+    return
+  }
+
+  const commonSentryOptions = {
+    dsn,
+    enabled: process.env.NODE_ENV === "production",
+    tracesSampleRate: 1.0,
+  }
+
+  if (process.env.NEXT_RUNTIME === "nodejs") {
+    Sentry.init({
+      ...commonSentryOptions,
+    })
+  }
+
+  if (process.env.NEXT_RUNTIME === "edge") {
+    Sentry.init({
+      ...commonSentryOptions,
+    })
+  }
+}

next.config.js

@@ -1,5 +1,10 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const { PHASE_DEVELOPMENT_SERVER } = require("next/constants")
+const { withSentryConfig } = require("@sentry/nextjs")
+
+const withBundleAnalyzer = require("@next/bundle-analyzer")({
+  enabled: process.env.ANALYZE === "true",
+})
 
 const { i18n } = require("./next-i18next.config")
 
@@ -22,7 +27,7 @@ module.exports = (phase, { defaultConfig }) => {
   let nextConfig = {
     ...defaultConfig,
     reactStrictMode: true,
-    webpack: (config) => {
+    webpack: (config, { webpack }) => {
       config.module.rules.push({
         test: /\.ya?ml$/,
         use: "yaml-loader",
@@ -53,13 +58,30 @@ module.exports = (phase, { defaultConfig }) => {
       // Modify the file loader rule to ignore *.svg, since we have it handled now.
       fileLoaderRule.exclude = /\.svg$/i
 
+      // Tree shake Sentry debug code
+      // ref. https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/tree-shaking/#tree-shaking-with-nextjs
+      config.plugins.push(
+        new webpack.DefinePlugin({
+          __SENTRY_DEBUG__: false,
+          __RRWEB_EXCLUDE_IFRAME__: true,
+          __RRWEB_EXCLUDE_SHADOW_DOM__: true,
+          __SENTRY_EXCLUDE_REPLAY_WORKER__: true,
+        })
+      )
+
       return config
     },
     i18n,
     trailingSlash: true,
     images: {
       deviceSizes: [640, 750, 828, 1080, 1200, 1504, 1920],
     },
+    env: {
+      NEXT_PUBLIC_CONTEXT: process.env.CONTEXT,
+    },
+    experimental: {
+      instrumentationHook: true,
+    },
   }
 
   if (phase !== PHASE_DEVELOPMENT_SERVER) {
@@ -88,5 +110,15 @@ module.exports = (phase, { defaultConfig }) => {
     }
   }
 
-  return nextConfig
+  return withBundleAnalyzer(
+    withSentryConfig(nextConfig, {
+      // TODO: temp config, update this to the correct org & project
+      org: "ethereumorg-ow",
+      project: "javascript-nextjs",
+      authToken: process.env.SENTRY_AUTH_TOKEN,
+      release: `${process.env.BUILD_ID}_${process.env.REVIEW_ID}`,
+      disableLogger: true,
+      silent: true,
+    })
+  )
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ethereum-org-website",
-  "version": "8.8.0",
+  "version": "8.9.0",
   "license": "MIT",
   "private": true,
   "scripts": {
@@ -34,13 +34,16 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "^3.8.0",
+    "@next/bundle-analyzer": "^14.2.5",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-checkbox": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-navigation-menu": "^1.2.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-radio-group": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-visually-hidden": "^1.1.0",
+    "@sentry/nextjs": "^8.19.0",
     "@socialgouv/matomo-next": "^1.8.0",
     "chart.js": "^4.4.2",
     "chartjs-plugin-datalabels": "^2.2.0",
@@ -76,6 +79,7 @@
     "remark-gfm": "^3.0.1",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
+    "usehooks-ts": "^3.1.0",
     "yaml-loader": "^0.8.0"
   },
   "devDependencies": {
@@ -124,11 +128,10 @@
     "tsconfig-paths-webpack-plugin": "4.1.0",
     "typescript": "^5.5.2",
     "unified": "^10.0.0",
-    "unist-util-visit": "^5.0.0",
-    "usehooks-ts": "^3.1.0"
+    "unist-util-visit": "^5.0.0"
   },
   "resolutions": {
     "jackspeak": "2.1.1",
     "sharp": "0.32.6"
   }
-}
+}

sentry.client.config.ts

@@ -0,0 +1,10 @@
+import * as Sentry from "@sentry/nextjs"
+
+const dsn = process.env.NEXT_PUBLIC_SENTRY_DSN
+
+Sentry.init({
+  dsn,
+  enabled: process.env.NODE_ENV === "production",
+  environment: process.env.NEXT_PUBLIC_CONTEXT,
+  tracesSampleRate: 1.0,
+})

src/components/FeedbackWidget/useFeedbackWidget.ts

@@ -3,7 +3,7 @@ import { useRouter } from "next/router"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
-import useDisclosure from "@/hooks/useDisclosure"
+import { useDisclosure } from "@/hooks/useDisclosure"
 import { useSurvey } from "@/hooks/useSurvey"
 
 export const useFeedbackWidget = () => {

src/components/Glossary/GlossaryTooltip/index.tsx

@@ -3,6 +3,7 @@ import { useRouter } from "next/router"
 import { Box, Text, VStack } from "@chakra-ui/react"
 
 import Heading from "@/components/Heading"
+import InlineLink from "@/components/Link"
 import Tooltip, { type TooltipProps } from "@/components/Tooltip"
 import Translation from "@/components/Translation"
 
@@ -31,6 +32,9 @@ const GlossaryTooltip = ({
               <Translation
                 id={termKey + "-term"}
                 options={{ ns: "glossary-tooltip" }}
+                // Override the default `a` tag transformation to avoid circular
+                // dependency issues
+                transform={{ a: InlineLink }}
               />
             </Heading>
             {/**
@@ -43,6 +47,9 @@ const GlossaryTooltip = ({
               <Translation
                 id={termKey + "-definition"}
                 options={{ ns: "glossary-tooltip" }}
+                // Override the default `a` tag transformation to avoid circular
+                // dependency issues
+                transform={{ a: InlineLink }}
               />
             </Text>
           </VStack>

src/components/Nav/Mobile/ExpandIcon.tsx

@@ -1,5 +1,4 @@
 import { motion } from "framer-motion"
-import { Icon } from "@chakra-ui/react"
 
 const expandedPathVariants = {
   closed: {
@@ -17,14 +16,9 @@ type ExpandIconProps = {
 }
 
 const ExpandIcon = ({ isOpen }: ExpandIconProps) => (
-  <Icon
+  <svg
     viewBox="0 0 24 25"
-    width={6}
-    height={6}
-    position="relative"
-    strokeWidth="2px"
-    display="inline-block"
-    stroke="currentColor"
+    className="relative inline-block h-6 w-6 stroke-current stroke-2 group-hover:text-primary-hover"
   >
     <motion.path
       variants={expandedPathVariants}
@@ -34,7 +28,7 @@ const ExpandIcon = ({ isOpen }: ExpandIconProps) => (
       stroke-width="2"
     />
     <path d="M7.375 12.5L16.625 12.5" stroke-width="2" />
-  </Icon>
+  </svg>
 )
 
 export default ExpandIcon

src/components/Nav/Mobile/FooterButton.tsx

@@ -1,23 +1,28 @@
+import { forwardRef } from "react"
 import type { IconType } from "react-icons"
-import { type ButtonProps, Icon } from "@chakra-ui/react"
 
-import { Button } from "@/components/Buttons"
+import {
+  Button,
+  type ButtonProps,
+} from "../../../../tailwind/ui/buttons/Button"
 
 type FooterButtonProps = ButtonProps & {
   icon: IconType
 }
 
-const FooterButton = ({ icon, ...props }: FooterButtonProps) => (
-  <Button
-    leftIcon={<Icon as={icon} />}
-    sx={{ span: { m: 0 } }}
-    variant="ghost"
-    flexDir="column"
-    alignItems="center"
-    color="body.base"
-    px="1"
-    {...props}
-  />
+const FooterButton = forwardRef<HTMLButtonElement, FooterButtonProps>(
+  ({ icon: Icon, children, ...props }, ref) => (
+    <Button
+      ref={ref}
+      className="flex h-fit flex-col items-center px-1 text-body"
+      variant="ghost"
+      {...props}
+    >
+      <Icon className="h-6 w-6" />
+      {children}
+    </Button>
+  )
 )
+FooterButton.displayName = "FooterButton"
 
 export default FooterButton

src/components/Nav/Mobile/FooterItemText.tsx

@@ -1,18 +1,8 @@
-import { Text } from "@chakra-ui/react"
-
 import { ChildOnlyProp } from "@/lib/types"
 
 const FooterItemText = (props: ChildOnlyProp) => (
-  <Text
-    fontSize="sm"
-    lineHeight="base"
-    fontWeight="normal"
-    letterSpacing="wider"
-    mt="2"
-    textTransform="uppercase"
-    textAlign="center"
-    opacity={0.7}
-    _hover={{ opacity: 1 }}
+  <p
+    className="mt-2 text-center text-sm font-normal uppercase leading-base tracking-wider opacity-70 hover:opacity-100"
     {...props}
   />
 )