Add Mixpanel + migrate to pnpm + update dependencies (incl. React 18 and Next 13)

.env

@@ -1,3 +1,3 @@
 ALGOLIA_API_KEY=9a358df50b02a5b66efeecbc0a2cab3d
 ALGOLIA_APP_ID=WQ5FYJCL00
-NPM_TOKEN=
+SITE_URL=https://thegraph.com/docs

.github/workflows/ci-cd-production.yml

@@ -20,7 +20,7 @@ jobs:
           access_token: ${{ github.token }}
 
       - name: Checkout the repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Login to GitHub Container Registry
         uses: docker/login-action@v1
@@ -45,7 +45,7 @@ jobs:
     needs: build
     steps:
       - name: Checkout the repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Authenticate to GCP
         uses: google-github-actions/auth@v1

.github/workflows/ci-cd-pull-request.yml

@@ -16,7 +16,7 @@ jobs:
           access_token: ${{ github.token }}
 
       - name: Checkout the repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Build Docker image
         uses: docker/build-push-action@v2

.github/workflows/ci-cd-staging.yml

@@ -21,7 +21,7 @@ jobs:
           access_token: ${{ github.token }}
 
       - name: Checkout the repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Login to GitHub Container Registry
         uses: docker/login-action@v1
@@ -46,7 +46,7 @@ jobs:
     needs: build
     steps:
       - name: Checkout the repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Authenticate to GCP
         uses: google-github-actions/auth@v1

.npmrc

@@ -1 +1,2 @@
+enable-pre-post-scripts=true
 engine-strict=true

.nvmrc

@@ -1 +1 @@
-16
+18.14

.prettierignore

@@ -1,3 +1,4 @@
 .yalc
 .next
 /out/
+pnpm-lock.yaml

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:16.13.1-alpine3.14 as builder
+FROM node:18-alpine as builder
 
 RUN apk add --no-cache git
 RUN npm install -g pnpm

components/Code.tsx

@@ -6,103 +6,7 @@ import { BorderRadius, FontFamily, Spacing } from '@edgeandnode/components'
 export type CodeBlockProps = HTMLAttributes<HTMLPreElement>
 export type CodeInlineProps = HTMLAttributes<HTMLElement>
 
-// import theme from 'prism-react-renderer/themes/duotoneDark'
-// TODO: Replace the following theme definition with the above import when this PR is merged and available in a release: https://github.com/FormidableLabs/prism-react-renderer/pull/134
-const theme: PrismTheme = {
-  plain: {
-    backgroundColor: '#2a2734',
-    color: '#9a86fd',
-  },
-  styles: [
-    {
-      types: ['comment', 'prolog', 'doctype', 'cdata', 'punctuation'],
-      style: {
-        color: '#6c6783',
-      },
-    },
-    {
-      types: ['namespace'],
-      style: {
-        opacity: 0.7,
-      },
-    },
-    {
-      types: ['tag', 'operator', 'number'],
-      style: {
-        color: '#e09142',
-      },
-    },
-    {
-      types: ['property', 'function'],
-      style: {
-        color: '#9a86fd',
-      },
-    },
-    {
-      types: ['tag-id', 'selector', 'atrule-id'],
-      style: {
-        color: '#eeebff',
-      },
-    },
-    {
-      types: ['attr-name'],
-      style: {
-        color: '#c4b9fe',
-      },
-    },
-    {
-      types: [
-        'boolean',
-        'string',
-        'entity',
-        'url',
-        'attr-value',
-        'keyword',
-        'control',
-        'directive',
-        'unit',
-        'statement',
-        'regex',
-        'atrule',
-        'placeholder',
-        'variable',
-      ],
-      style: {
-        color: '#ffcc99',
-      },
-    },
-    {
-      types: ['deleted'],
-      style: {
-        textDecorationLine: 'line-through',
-      },
-    },
-    {
-      types: ['inserted'],
-      style: {
-        textDecorationLine: 'underline',
-      },
-    },
-    {
-      types: ['italic'],
-      style: {
-        fontStyle: 'italic',
-      },
-    },
-    {
-      types: ['important', 'bold'],
-      style: {
-        fontWeight: 'bold',
-      },
-    },
-    {
-      types: ['important'],
-      style: {
-        color: '#c4b9fe',
-      },
-    },
-  ],
-}
+import theme from 'prism-react-renderer/themes/duotoneDark'
 
 export const CodeBlock = ({ children, ...props }: CodeBlockProps) => {
   const data = (

components/DocSearch.tsx

@@ -3,7 +3,6 @@ import { Global } from '@emotion/react'
 import { useCallback, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { Theme } from 'theme-ui'
-import { dispatch } from 'use-bus'
 
 import {
   BorderRadius,
@@ -18,9 +17,6 @@ import {
   Text,
 } from '@edgeandnode/components'
 
-import { useI18n } from '../i18n'
-import { EventType } from '../types'
-
 const BREAKPOINT = '751px'
 
 export function DocSearch(props: DocSearchProps) {
@@ -30,12 +26,10 @@ export function DocSearch(props: DocSearchProps) {
 
   const onOpen = useCallback(() => {
     setIsOpen(true)
-    dispatch(EventType.SEARCH_OPEN)
   }, [setIsOpen])
 
   const onClose = useCallback(() => {
     setIsOpen(false)
-    dispatch(EventType.SEARCH_CLOSE)
   }, [setIsOpen])
 
   const onInput = useCallback(

components/Link.tsx

@@ -46,18 +46,18 @@ export const Link = ({
   // If the link is external, default the target to `_blank`
   const finalTarget = target ?? (!isInternal ? '_blank' : undefined)
 
-  const nextLinkProps = {
-    href: finalHref,
-    replace,
-    scroll,
-    shallow,
-    prefetch,
-  }
   return (
-    <NextLink {...nextLinkProps} passHref>
-      <a target={finalTarget} rel={finalTarget === '_blank' ? 'noopener' : undefined} {...props}>
-        {children}
-      </a>
+    <NextLink
+      href={finalHref}
+      target={finalTarget}
+      rel={finalTarget === '_blank' ? 'noopener' : undefined}
+      replace={replace}
+      scroll={scroll}
+      shallow={shallow}
+      prefetch={prefetch}
+      {...props}
+    >
+      {children}
     </NextLink>
   )
 }

next.config.mjs

@@ -9,6 +9,8 @@ const env = {
   BASE_PATH: process.env.NODE_ENV === 'production' ? '/docs' : '',
   ALGOLIA_API_KEY: process.env.ALGOLIA_API_KEY,
   ALGOLIA_APP_ID: process.env.ALGOLIA_APP_ID,
+  MIXPANEL_TOKEN:
+    process.env.ENVIRONMENT === 'production' ? 'cfeac8baf33c9b4d255f28d57f3c9148' : 'e57a9892339b2acfd02943c86b746d32',
 }
 
 const withMDX = mdx({
@@ -21,6 +23,11 @@ const withMDX = mdx({
 })
 
 export default withMDX({
+  experimental: {
+    // Fix scroll restoration (see https://github.com/vercel/next.js/issues/37893#issuecomment-1221335543)
+    scrollRestoration: true,
+  },
+
   env,
   pageExtensions: ['tsx', 'mdx'],
   reactStrictMode: true,

package.json

@@ -23,43 +23,45 @@
   },
   "dependencies": {
     "@docsearch/react": "^3.3.3",
-    "@edgeandnode/components": "^25.2.0",
-    "@emotion/react": "^11.10.5",
+    "@edgeandnode/components": "^27.0.0",
+    "@emotion/react": "^11.10.6",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
-    "@next/mdx": "^12.3.4",
+    "@next/mdx": "^13.2.3",
     "@radix-ui/react-collapsible": "1.0.1",
-    "@radix-ui/react-popover": "^1.0.3",
+    "@radix-ui/react-popover": "^1.0.4",
     "@radix-ui/react-visually-hidden": "^1.0.1",
     "@reach/auto-id": "^0.18.0",
     "lodash": "^4.17.21",
-    "next": "^12.3.4",
+    "mixpanel-browser": "^2.45.0",
+    "next": "^13.2.3",
     "next-seo": "^5.15.0",
-    "next-sitemap": "^3.1.52",
+    "next-sitemap": "^4.0.1",
     "prism-react-renderer": "^1.3.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-intersection-observer": "^9.4.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-intersection-observer": "^9.4.3",
     "react-use": "^17.4.0",
     "remark-gfm": "^3.0.1",
-    "theme-ui": "^0.15.5",
-    "use-bus": "^2.5.2"
+    "theme-ui": "^0.15.5"
   },
   "devDependencies": {
-    "@edgeandnode/eslint-config": "^1.3.0",
+    "@babel/core": "^7.21.0",
+    "@edgeandnode/eslint-config": "^1.3.1",
     "@sindresorhus/slugify": "^2.2.0",
     "@svgr/webpack": "^6.5.1",
     "@types/color": "^3.0.3",
     "@types/lodash": "^4.14.191",
-    "@types/node": "^16.18.12",
-    "@types/react": "^17.0.53",
-    "@types/react-dom": "^17.0.18",
+    "@types/mixpanel-browser": "^2.38.1",
+    "@types/node": "^18.14.5",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
     "acorn": "^8.8.2",
     "acorn-jsx": "^5.3.2",
-    "eslint": "^8.34.0",
-    "fast-xml-parser": "^4.1.2",
+    "eslint": "^8.35.0",
+    "fast-xml-parser": "^4.1.3",
     "husky": "^8.0.3",
-    "lint-staged": "^13.1.1",
+    "lint-staged": "^13.1.2",
     "path": "^0.12.7",
     "prettier": "^2.8.4",
     "remark-frontmatter": "^4.0.1",