Merge branch 'dev' into fix-md-images

corwintines · web-flow · commit 1a0ea3a9fe12 · 2023-12-20T14:46:35.000-07:00
diff --git a/.env.example b/.env.example
@@ -16,6 +16,10 @@
 # GOOGLE_API_KEY=
 # GOOGLE_CALENDAR_ID=
 
+# Matomo environment (URL and site ID required for analytics)
+NEXT_PUBLIC_MATOMO_URL=
+NEXT_PUBLIC_MATOMO_SITE_ID=
+
 # Used to avoid loading Matomo in our preview deploys
 IS_PREVIEW_DEPLOY=false
 
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "@docsearch/react": "^3.5.2",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@socialgouv/matomo-next": "^1.8.0",
     "clipboard": "^2.0.11",
     "embla-carousel-react": "^7.0.0",
     "ethereum-blockies-base64": "^1.0.2",
diff --git a/src/components/Hero/HubHero/index.tsx b/src/components/Hero/HubHero/index.tsx
@@ -1,11 +1,4 @@
-import {
-  Box,
-  Heading,
-  HStack,
-  Stack,
-  Text,
-  useBreakpointValue,
-} from "@chakra-ui/react"
+import { Box, Heading, HStack, Stack, Text } from "@chakra-ui/react"
 
 import type { CommonHeroProps } from "@/lib/types"
 
@@ -21,22 +14,21 @@ const HubHero = (props: CommonHeroProps) => {
     )
   }
 
-  const height = useBreakpointValue({
-    base: "192px",
-    md: "256px",
-    lg: "320px",
-    xl: "576px",
-    "2xl": "672px",
-  })
-
   return (
     <Box position="relative">
       <Image
         src={heroImg}
         alt=""
         priority
         sizes="100vw"
-        style={{ width: "100vw", objectFit: "cover", height }}
+        style={{ width: "100vw", objectFit: "cover" }}
+        h={{
+          base: "192px",
+          md: "256px",
+          lg: "320px",
+          xl: "576px",
+          "2xl": "672px",
+        }}
       />
       <Stack
         spacing={{ base: "3", md: "4" }}
diff --git a/src/components/PageHero.tsx b/src/components/PageHero.tsx
@@ -97,8 +97,6 @@ const PageHero = ({
           {subtitle}
         </Text>
         {buttons && (
-          // FIXME: remove the `ul` override once removed the corresponding
-          // global styles in `src/@chakra-ui/gatsby-plugin/styles.ts`
           <Wrap spacing={2} overflow="visible" sx={{ ul: { m: 0 } }}>
             {buttons.map((button, idx) => {
               if (isButtonLink(button)) {
diff --git a/src/components/SideNav.tsx b/src/components/SideNav.tsx
@@ -144,7 +144,6 @@ export interface SideNavProps {
 // TODO set tree state based on if current path is a child
 // of the given parent. Currently all `path` items default to open
 // and they only collapse when clicked on.
-// e.g. solution: https://github.com/hasura/gatsby-gitbook-starter/blob/5c165af40e48fc55eb06b45b95c84eb64b17ed32/src/components/sidebar/tree.js
 const SideNav = ({ path }: SideNavProps) => {
   const { t } = useTranslation("page-developers-docs")
 
diff --git a/src/global.d.ts b/src/global.d.ts
@@ -14,10 +14,6 @@ declare global {
       GITHUB_TOKEN: string
       ALGOLIA_ADMIN_KEY: string
       ETHERSCAN_API_KEY: string
-      GATSBY_ALGOLIA_APP_ID: string
-      GATSBY_ALGOLIA_SEARCH_KEY: string
-      GATSBY_GITHUB_TOKEN_READ_ONLY: string
-      GATSBY_FUNCTIONS_PATH: string
       CROWDIN_API_KEY: string
     }
   }
diff --git a/src/layouts/Roadmap.tsx b/src/layouts/Roadmap.tsx
@@ -141,52 +141,50 @@ export const RoadmapLayout: React.FC<IProps> = ({
         />
       ) : (
         <HeroContainer>
-            <TitleCard>
-              {/* TODO: Double check this slug works */}
-              <Breadcrumbs slug={slug} mb="8" />
-              <Title>{frontmatter.title}</Title>
-              <OldText>{frontmatter.description}</OldText>
-              {frontmatter?.buttons && (
-                // FIXME: remove the `ul` override once removed the corresponding
-                // global styles in `src/@chakra-ui/gatsby-plugin/styles.ts`
-                <Wrap spacing={2} marginBottom={4} sx={{ ul: { m: 0 } }}>
-                  {frontmatter.buttons.map((button, idx) => {
-                    if (button?.to) {
-                      return (
-                        <WrapItem key={idx}>
-                          <ButtonLink variant={button?.variant} to={button?.to}>
-                            {button.label}
-                          </ButtonLink>
-                        </WrapItem>
-                      )
-                    }
+          <TitleCard>
+            {/* TODO: Double check this slug works */}
+            <Breadcrumbs slug={slug} mb="8" />
+            <Title>{frontmatter.title}</Title>
+            <OldText>{frontmatter.description}</OldText>
+            {frontmatter?.buttons && (
+              <Wrap spacing={2} marginBottom={4} sx={{ ul: { m: 0 } }}>
+                {frontmatter.buttons.map((button, idx) => {
+                  if (button?.to) {
                     return (
                       <WrapItem key={idx}>
-                        <Button variant={button?.variant} toId={button?.toId}>
-                          {button?.label}
-                        </Button>
+                        <ButtonLink variant={button?.variant} to={button?.to}>
+                          {button.label}
+                        </ButtonLink>
                       </WrapItem>
                     )
-                  })}
-                </Wrap>
-              )}
-              <TableOfContents
-                position="relative"
-                zIndex="2"
-                items={tocItems}
-                isMobile
-              />
-            </TitleCard>
-            <Center>
-              <Image
-                src={frontmatter.image}
-                alt={frontmatter.alt ?? ""}
-                style={{ objectFit: "contain" }}
-                width={1504}
-                height={345}
-                priority
-              />
-            </Center>
+                  }
+                  return (
+                    <WrapItem key={idx}>
+                      <Button variant={button?.variant} toId={button?.toId}>
+                        {button?.label}
+                      </Button>
+                    </WrapItem>
+                  )
+                })}
+              </Wrap>
+            )}
+            <TableOfContents
+              position="relative"
+              zIndex="2"
+              items={tocItems}
+              isMobile
+            />
+          </TitleCard>
+          <Center>
+            <Image
+              src={frontmatter.image}
+              alt={frontmatter.alt ?? ""}
+              style={{ objectFit: "contain" }}
+              width={1504}
+              height={345}
+              priority
+            />
+          </Center>
         </HeroContainer>
       )}
       <Page>
diff --git a/src/lib/api/calendarEvents.ts b/src/lib/api/calendarEvents.ts
@@ -22,22 +22,26 @@ export async function fetchCommunityEvents(): Promise<CommunityEventsReturnType>
     const pastEvents = await pastEventsReq.json()
     const pastEventsReqData: ReqCommunityEvent[] = pastEvents.items
 
-    const pastEventData = pastEventsReqData.map((event) => {
-      return {
-        date: event.start.dateTime,
-        title: event.summary,
-        calendarLink: event.htmlLink,
-        pastEventLink: event.location,
-      }
-    })
-    const upcomingEventData = futureEventsReqData.map((event) => {
-      return {
-        date: event.start.dateTime,
-        title: event.summary,
-        calendarLink: event.htmlLink,
-        pastEventLink: event.location,
-      }
-    })
+    const pastEventData = pastEventsReqData
+      .filter((event) => event.start)
+      .map((event) => {
+        return {
+          date: event.start.dateTime,
+          title: event.summary,
+          calendarLink: event.htmlLink,
+          pastEventLink: event.location,
+        }
+      })
+    const upcomingEventData = futureEventsReqData
+      .filter((event) => event.start)
+      .map((event) => {
+        return {
+          date: event.start.dateTime,
+          title: event.summary,
+          calendarLink: event.htmlLink,
+          pastEventLink: event.location,
+        }
+      })
 
     return {
       pastEventData,
diff --git a/src/lib/api/ghRepoData.ts b/src/lib/api/ghRepoData.ts
@@ -1,5 +1,3 @@
-import axios from "axios"
-
 import { Framework } from "@/lib/interfaces"
 
 import EthDiamondBlackImage from "@/public/assets/eth-diamond-black.png"
@@ -128,25 +126,38 @@ export const ghRepoData = async (githubUrl: string) => {
   const split = githubUrl.split("/")
   const repoOwner = split[split.length - 2]
   const repoName = split[split.length - 1]
-  const repoData = await axios.get(
+  const repoReq = await fetch(
     `https://api.github.com/repos/${repoOwner}/${repoName}`,
     {
       headers: {
         Authorization: `Bearer ${process.env.GITHUB_TOKEN_READ_ONLY}`,
       },
     }
   )
-  const languageData = await axios.get(
+  if (!repoReq.ok) {
+    console.log(repoReq.status, repoReq.statusText)
+    throw new Error("Failed to fetch Github repo data")
+  }
+
+  const repoData = await repoReq.json()
+
+  const languageReq = await fetch(
     `https://api.github.com/repos/${repoOwner}/${repoName}/languages`,
     {
       headers: {
         Authorization: `Bearer ${process.env.GITHUB_TOKEN_READ_ONLY}`,
       },
     }
   )
+  if (!languageReq.ok) {
+    console.log(languageReq.status, languageReq.statusText)
+    throw new Error("Failed to fetch Github repo language data")
+  }
+  const languageData = await languageReq.json()
+
   return {
-    starCount: repoData.data.stargazers_count,
-    languages: Object.keys(languageData.data),
+    starCount: repoData.stargazers_count,
+    languages: Object.keys(languageData),
   }
 }
 
diff --git a/src/lib/utils/matomo.ts b/src/lib/utils/matomo.ts
@@ -1,3 +1,5 @@
+import { push } from "@socialgouv/matomo-next"
+
 export const MATOMO_LS_KEY = "ethereum-org.matomo-opt-out"
 
 export interface MatomoEventOptions {
@@ -13,15 +15,12 @@ export const trackCustomEvent = ({
   eventName,
   eventValue,
 }: MatomoEventOptions): void => {
-  if (process.env.NODE_ENV !== "production" && !window.dev) return
+  if (process.env.NODE_ENV !== "production") return
   const optedOutValue = localStorage.getItem(MATOMO_LS_KEY) || "false"
   const isOptedOut = JSON.parse(optedOutValue)
-  if (!window._paq || isOptedOut) return
-
-  const { _paq, dev } = window
+  if (isOptedOut) return
 
-  _paq.push([`trackEvent`, eventCategory, eventAction, eventName, eventValue])
-  if (!dev) return
+  push([`trackEvent`, eventCategory, eventAction, eventName, eventValue])
 
   console.debug(
     `[Matomo] event tracked, category: ${eventCategory}, action: ${eventAction}, name: ${eventName}, value: ${eventValue}`
diff --git a/src/lib/utils/url.ts b/src/lib/utils/url.ts
@@ -17,7 +17,6 @@ export const isPdf = (href: string): boolean => href.endsWith(".pdf")
 export const sanitizeHitUrl = (url: string): string =>
   url
     .replace(/^https?:\/\/[^\/]+(?=\/)/, "")
-    .replace("#gatsby-focus-wrapper", "")
     .replace("#main-content", "")
     .replace("#content", "")
     .replace("#top", "")
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,8 +1,10 @@
+import { useEffect } from "react"
 import { appWithTranslation } from "next-i18next"
 // ChakraProvider import updated as recommended on https://github.com/chakra-ui/chakra-ui/issues/4975#issuecomment-1174234230
 // to reduce bundle size. Should be reverted to "@chakra-ui/react" in case on theme issues
 import { ChakraProvider } from "@chakra-ui/provider"
 import { extendBaseTheme } from "@chakra-ui/react"
+import { init } from "@socialgouv/matomo-next"
 
 import customTheme from "@/@chakra-ui/theme"
 
@@ -13,6 +15,15 @@ import { RootLayout } from "@/layouts"
 import { inter, mono } from "@/lib/fonts"
 
 const App = ({ Component, pageProps }: AppPropsWithLayout) => {
+  useEffect(() => {
+    if (!process.env.IS_PREVIEW_DEPLOY) {
+      init({
+        url: process.env.NEXT_PUBLIC_MATOMO_URL!,
+        siteId: process.env.NEXT_PUBLIC_MATOMO_SITE_ID!,
+      })
+    }
+  }, [])
+
   // Per-Page Layouts: https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts#with-typescript
   // Use the layout defined at the page level, if available
   const getLayout = Component.getLayout ?? ((page) => page)
diff --git a/src/pages/bug-bounty.tsx b/src/pages/bug-bounty.tsx
@@ -747,7 +747,6 @@ const BugBountiesPage = () => {
                 <Translation id="page-bug-bounty:bug-bounty-faq-q1-contentPreview" />
               }
             >
-              {/* TODO: Check <code> styling compared to Gatsby repo */}
               <Text>
                 <Translation id="page-bug-bounty:bug-bounty-faq-q1-content-1" />
               </Text>
diff --git a/src/scripts/crowdin/reports/reportsHelpers.ts b/src/scripts/crowdin/reports/reportsHelpers.ts
@@ -1,5 +1,3 @@
-// TODO: Refactor to fetch and remove axios package
-import axios, { AxiosResponse } from "axios"
 import { ReportsModel } from "@crowdin/crowdin-api-client"
 
 import {
@@ -107,10 +105,11 @@ export async function downloadReport(
       `${crowdinLangCode}—Retrieved JSON URL for report of file ID ${fileId}`
     )
 
-    const reportData: AxiosResponse<ReportData> = await axios.get(jsonUrl)
+    const reportReq = await fetch(jsonUrl)
     console.log(`Downloaded report data for file ID ${fileId}`)
+    const reportData: ReportData = await reportReq.json()
 
-    await saveReportDataToJson(reportData.data, fileId, crowdinLangCode)
+    await saveReportDataToJson(reportData, fileId, crowdinLangCode)
     console.log(`Saved report data for file ID ${fileId} to JSON file`)
   } catch (error: unknown) {
     if (error instanceof Error) {
diff --git a/yarn.lock b/yarn.lock
@@ -3365,6 +3365,11 @@
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.27.8.tgz#6667fac16c436b5434a387a34dedb013198f6e6e"
   integrity sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==
 
+"@socialgouv/matomo-next@^1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@socialgouv/matomo-next/-/matomo-next-1.8.0.tgz#1dee455a440b84bc135381a85fef33d000698222"
+  integrity sha512-00EdsbW0u/VrKFa7DfVjnXV4oXA6Ag3kkCisSL2nFseRQhEsds5T8xsAgvNQAtiMW9AR6Mz3TNZt7A2/mIb9kA==
+
 "@storybook/addon-actions@7.5.3":
   version "7.5.3"
   resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-7.5.3.tgz#e0d0d819488d1d19918b23469b3ea6610fee5f07"

Original file line number	Diff line number	Diff line change
`@@ -14,10 +14,6 @@ declare global {`
`14`	`14`	`GITHUB_TOKEN: string`
`15`	`15`	`ALGOLIA_ADMIN_KEY: string`
`16`	`16`	`ETHERSCAN_API_KEY: string`
`17`		`- GATSBY_ALGOLIA_APP_ID: string`
`18`		`- GATSBY_ALGOLIA_SEARCH_KEY: string`
`19`		`- GATSBY_GITHUB_TOKEN_READ_ONLY: string`
`20`		`- GATSBY_FUNCTIONS_PATH: string`
`21`	`17`	`CROWDIN_API_KEY: string`
`22`	`18`	`}`
`23`	`19`	`}`