Merge branch 'dev' into hub-hero-flickering

Author: nhsz

.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
 

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",

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),
   }
 }
 

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}`

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)

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) {

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"