Update dependencies + fix issue with nav scroll + add Matomo tracking…

… script (#235)

* Update dependencies + fix issue with nav scroll

* Update dependencies

* Add Matomo tracking script

* Fix workflows that use `google-github-actions/get-gke-credentials`

* Make tracking script more readable

* Update dependencies

* Update tracking script

.dockerignore

@@ -1,9 +1,15 @@
+Dockerfile
+.dockerignore
+docker-compose.yml
+node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+README.md
+build
+.next
 .git
 .github
-**/node_modules
-**/README.md
-**/build
-docker-compose.yml
 .k8s
 .terraform
 .npmrc

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

@@ -42,12 +42,16 @@ jobs:
       - name: Checkout the repo
         uses: actions/checkout@v2
 
+      - name: Authenticate to GCP
+        uses: google-github-actions/auth@v1
+        with:
+          credentials_json: ${{ secrets.GCP_SA_KEY_PRODUCTION }}
+
       - name: Set up kubectl
-        uses: google-github-actions/get-gke-credentials@main
+        uses: google-github-actions/get-gke-credentials@v1
         with:
           cluster_name: hosted-service
           location: us-central1-a
-          credentials: ${{ secrets.GCP_SA_KEY_PRODUCTION }}
 
       - name: Set a new k8s image and apply the manifests
         run: .github/scripts/kustomize-apply.sh production $APP_NAME=$BASE_IMAGE:$GITHUB_SHA

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

@@ -43,12 +43,16 @@ jobs:
       - name: Checkout the repo
         uses: actions/checkout@v2
 
+      - name: Authenticate to GCP
+        uses: google-github-actions/auth@v1
+        with:
+          credentials_json: ${{ secrets.GCP_SA_KEY_STAGING }}
+
       - name: Set up kubectl
-        uses: google-github-actions/get-gke-credentials@main
+        uses: google-github-actions/get-gke-credentials@v1
         with:
           cluster_name: hosted-service
           location: us-central1-a
-          credentials: ${{ secrets.GCP_SA_KEY_STAGING }}
 
       - name: Set a new k8s image and apply the manifests
         run: .github/scripts/kustomize-apply.sh staging $APP_NAME=$BASE_IMAGE:$GITHUB_SHA

.gitignore

@@ -18,6 +18,7 @@ yalc.lock
 # misc
 .DS_Store
 *.pem
+.vscode
 
 # debug
 npm-debug.log*

layout/MDXLayoutNav.tsx

@@ -45,6 +45,12 @@ const DesktopWrapper = ({ children }: PropsWithChildren<{}>) => {
       }}
     >
       {children}
+      <div
+        sx={{
+          height: 'var(--gds-header-height-visible)',
+          transition: enableTransition ? buildTransition('height' as any, '400ms') : undefined,
+        }}
+      />
     </div>
   )
 }

layout/MDXLayoutOutline.tsx

@@ -67,6 +67,12 @@ export const MDXLayoutOutline = () => {
           })}
         </Text>
       </nav>
+      <div
+        sx={{
+          height: 'var(--gds-header-height-visible)',
+          transition: enableTransition ? buildTransition('height' as any, '400ms') : undefined,
+        }}
+      />
     </div>
   )
 }

next.config.mjs

@@ -22,10 +22,10 @@ const withMDX = mdx({
 
 export default withMDX({
   env,
-  basePath: env.BASE_PATH,
   pageExtensions: ['tsx', 'mdx'],
-  trailingSlash: true,
   reactStrictMode: true,
+  basePath: env.BASE_PATH,
+  trailingSlash: true,
 
   async redirects() {
     return [

package.json

@@ -12,65 +12,61 @@
     "prettier": "prettier . --write",
     "prettier:check": "prettier . --check",
     "typecheck": "tsc --noEmit",
-    "docker:build": "DOCKER_BUILDKIT=1 docker build . -t docs",
+    "docker:build": "DOCKER_BUILDKIT=1 docker build . -t docs --no-cache",
     "docker:up": "docker run --rm -it -p 3000:80 -v \"$(pwd)/nginx.conf:/etc/nginx/nginx.conf\" docs",
     "docker:clean": "docker builder prune",
     "prepare": "husky install && chmod +x .husky/*",
     "pre-commit": "lint-staged --concurrent false",
     "pre-push": "yarn build"
   },
   "dependencies": {
-    "@docsearch/react": "^3.2.1",
-    "@edgeandnode/components": "^23.1.3",
-    "@emotion/react": "^11.10.0",
-    "@mdx-js/loader": "^2.1.3",
-    "@mdx-js/react": "^2.1.3",
-    "@next/mdx": "^12.2.5",
-    "@radix-ui/react-collapsible": "1.0.0",
-    "@radix-ui/react-popover": "^1.0.0",
-    "@radix-ui/react-visually-hidden": "^1.0.0",
-    "@reach/auto-id": "^0.17.0",
+    "@docsearch/react": "^3.3.0",
+    "@edgeandnode/components": "^24.0.5",
+    "@emotion/react": "^11.10.5",
+    "@mdx-js/loader": "^2.1.5",
+    "@mdx-js/react": "^2.1.5",
+    "@next/mdx": "^12.3.4",
+    "@radix-ui/react-collapsible": "1.0.1",
+    "@radix-ui/react-popover": "^1.0.2",
+    "@radix-ui/react-visually-hidden": "^1.0.1",
+    "@reach/auto-id": "^0.18.0",
     "lodash-es": "^4.17.21",
-    "next": "^12.2.5",
-    "next-seo": "^5.5.0",
+    "next": "^12.3.4",
+    "next-seo": "^5.14.1",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-intersection-observer": "^9.4.0",
+    "react-intersection-observer": "^9.4.1",
     "react-use": "^17.4.0",
     "remark-gfm": "^3.0.1",
-    "theme-ui": "^0.12.1",
-    "use-bus": "^2.5.1"
+    "theme-ui": "^0.15.4",
+    "use-bus": "^2.5.2"
   },
   "devDependencies": {
-    "@edgeandnode/eslint-config": "^1.0.3",
-    "@sindresorhus/slugify": "^2.1.0",
-    "@svgr/webpack": "^6.3.1",
+    "@edgeandnode/eslint-config": "^1.1.0",
+    "@sindresorhus/slugify": "^2.1.1",
+    "@svgr/webpack": "^6.5.1",
     "@types/color": "^3.0.3",
     "@types/lodash-es": "^4.17.6",
-    "@types/node": "^16.11.56",
-    "@types/react": "^17.0.48",
-    "@types/react-dom": "^17.0.17",
-    "acorn": "^8.8.0",
+    "@types/node": "^16.18.3",
+    "@types/react": "^17.0.52",
+    "@types/react-dom": "^17.0.18",
+    "acorn": "^8.8.1",
     "acorn-jsx": "^5.3.2",
-    "eslint": "^8.23.0",
-    "husky": "^8.0.1",
+    "eslint": "^8.28.0",
+    "husky": "^8.0.2",
     "lint-staged": "^13.0.3",
     "path": "^0.12.7",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.0",
     "remark-frontmatter": "^4.0.1",
-    "remark-mdx-frontmatter": "^2.0.3",
+    "remark-mdx-frontmatter": "^2.1.1",
     "serialize-as-code": "^2.0.2",
-    "typescript": "4.8.2",
+    "typescript": "4.9.3",
     "unist-util-visit": "^4.1.1",
     "url": "^0.11.0"
   },
   "resolutions": {
-    "@types/react": "^17.0.48",
-    "@types/react-dom": "^17.0.17"
-  },
-  "engines": {
-    "node": ">=16"
+    "@types/react": "^17.0.52"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx,mjs}": "eslint --fix",

pages/[locale]/[...404].tsx

@@ -29,7 +29,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
   }
 }
 
-const NotFoundPage: NextPage<{}> = () => {
+const NotFoundPage: NextPage = () => {
   const { t } = useI18n()
 
   return (

pages/_app.tsx

@@ -3,6 +3,7 @@ import { AppProps } from 'next/app'
 import Head from 'next/head'
 import NextLink from 'next/link'
 import { useRouter } from 'next/router'
+import Script from 'next/script'
 import { DefaultSeo, DefaultSeoProps } from 'next-seo'
 import { useCallback, useMemo, useState } from 'react'
 import useBus from 'use-bus'
@@ -105,6 +106,14 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
 
   return (
     <>
+      <Script id="tracking" type="module">{`
+        const _paq = window._paq = window._paq || [];
+        _paq.push(['trackPageView'], ['enableLinkTracking'], ['setTrackerUrl', 'https://thegraph.matomo.cloud/matomo.php'], ['setSiteId', '1']);
+        const g = document.createElement('script');
+        g.async = true;
+        g.src = '//cdn.matomo.cloud/thegraph.matomo.cloud/matomo.js';
+        document.body.append(g);
+      `}</Script>
       <I18nProvider
         supportedLocales={supportedLocales}
         translations={translations}

pages/en/developing/assemblyscript-api.mdx

@@ -457,6 +457,7 @@ export function handleTransfer(event: TransferEvent) {
   let erc20Symbol = contract.symbol()
 }
 ```
+
 `Transfer` is aliased to `TransferEvent` here to avoid a naming conflict with the entity type
 
 As long as the `ERC20Contract` on Ethereum has a public read-only function called `symbol`, it can be called with `.symbol()`. For public state variables a method with the same name is created automatically.

pages/en/firehose.mdx

@@ -8,4 +8,4 @@ Firehose integrations have been built for Ethereum (and many EVM chains), NEAR,
 
 Graph Node integrations have been built for multiple chains, so subgraphs can stream data from a Firehose to power performant and scaleable indexing. Firehose also powers [substreams](/substreams), a new transformation technology built by The Graph core developers.
 
-Visit the [firehose documentation](https://firehose.streamingfast.io/) to learn more.
+Visit the [firehose documentation](https://firehose.streamingfast.io/) to learn more.

pages/en/querying/graphql-api.mdx

@@ -339,10 +339,10 @@ If a block is provided, the metadata is as of that block, if not the latest inde
 
 `deployment` is a unique ID, corresponding to the IPFS CID of the `subgraph.yaml` file.
 
-`block` provides information about the latest block (taking into account any block constraints passed to _meta):
+`block` provides information about the latest block (taking into account any block constraints passed to \_meta):
+
 - hash: the hash of the block
 - number: the block number
 - timestamp: the timestamp of the block, if available (this is currently only available for subgraphs indexing EVM networks)
 
 `hasIndexingErrors` is a boolean identifying whether the subgraph encountered indexing errors at some past block
-

pages/en/substreams.mdx

@@ -7,4 +7,3 @@ Substreams is a new technology developed by The Graph protocol core developers,
 Visit the [substreams documentation](https://substreams.streamingfast.io/) to learn more and to get started building substreams.
 
 <VideoEmbed youtube="K-nhC2FCB5k" />
-

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es6",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,