diff --git a/.env b/.env index 2217c97e17ed..27b4f1dd033d 100644 --- a/.env +++ b/.env @@ -1,3 +1,3 @@ ALGOLIA_API_KEY=9a358df50b02a5b66efeecbc0a2cab3d ALGOLIA_APP_ID=WQ5FYJCL00 -NPM_TOKEN= +SITE_URL=https://thegraph.com/docs diff --git a/.env.example b/.env.example deleted file mode 100644 index 735933b1d980..000000000000 --- a/.env.example +++ /dev/null @@ -1,4 +0,0 @@ -ALGOLIA_API_KEY= -ALGOLIA_APP_ID= -NPM_TOKEN= -SITE_URL=https://thegraph.com/docs diff --git a/.github/workflows/ci-cd-production.yml b/.github/workflows/ci-cd-production.yml index e003bf4307ec..c634b5d87607 100644 --- a/.github/workflows/ci-cd-production.yml +++ b/.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 diff --git a/.github/workflows/ci-cd-pull-request.yml b/.github/workflows/ci-cd-pull-request.yml index 53adbe3f9307..ec2fa0126691 100644 --- a/.github/workflows/ci-cd-pull-request.yml +++ b/.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 diff --git a/.github/workflows/ci-cd-staging.yml b/.github/workflows/ci-cd-staging.yml index 26c74606c8b6..0a06385cafc0 100644 --- a/.github/workflows/ci-cd-staging.yml +++ b/.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 diff --git a/.npmrc b/.npmrc index 4fd021952d5a..6733b94d1766 100644 --- a/.npmrc +++ b/.npmrc @@ -1 +1,2 @@ +enable-pre-post-scripts=true engine-strict=true \ No newline at end of file diff --git a/.nvmrc b/.nvmrc index 19c7bdba7b1e..2ef343043146 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -16 \ No newline at end of file +18.14 diff --git a/.prettierignore b/.prettierignore index 5545f013761c..81c52c228152 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,3 +1,4 @@ .yalc .next /out/ +pnpm-lock.yaml diff --git a/Dockerfile b/Dockerfile index 1137848080e8..9330586facae 100644 --- a/Dockerfile +++ b/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 diff --git a/components/Code.tsx b/components/Code.tsx index d4242dbb45a3..a039e0bd8984 100644 --- a/components/Code.tsx +++ b/components/Code.tsx @@ -6,103 +6,7 @@ import { BorderRadius, FontFamily, Spacing } from '@edgeandnode/components' export type CodeBlockProps = HTMLAttributes export type CodeInlineProps = HTMLAttributes -// 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 = ( diff --git a/components/DocSearch.tsx b/components/DocSearch.tsx index f20e7ea5a9d7..03d898fd5391 100644 --- a/components/DocSearch.tsx +++ b/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( diff --git a/components/Link.tsx b/components/Link.tsx index e096e90f1bb9..99113ef9a7e6 100644 --- a/components/Link.tsx +++ b/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 ( - - - {children} - + + {children} ) } diff --git a/next.config.mjs b/next.config.mjs index 795b80f1a5cf..d4e0ec7695dc 100644 --- a/next.config.mjs +++ b/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, diff --git a/package.json b/package.json index 6ae4c194790b..9393500c13ec 100644 --- a/package.json +++ b/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", diff --git a/pages/_app.tsx b/pages/_app.tsx index 570f196db21b..338d1a2e8f74 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,28 +1,24 @@ import merge from 'lodash/merge' +import mixpanel from 'mixpanel-browser' import { AppProps } from 'next/app' -import Head from 'next/head' import NextLink from 'next/link' import { useRouter } from 'next/router' import { DefaultSeo, DefaultSeoProps } from 'next-seo' -import { useCallback, useMemo, useState } from 'react' -import useBus from 'use-bus' +import { useMemo } from 'react' import { + AnalyticsProvider, defaultLocale, - extractLocaleFromPath, Footer, + GDSProvider, I18nProvider, Layout, - Locale, LocaleSwitcher, NavigationMarketing, - ThemeProvider, } from '@edgeandnode/components' import { supportedLocales, translations, useI18n } from '@/i18n' -import { EventType } from '../types' - import '@edgeandnode/components/build/components.css' import '@docsearch/css' @@ -66,82 +62,50 @@ const DefaultSeoWithLocale = () => { const MyApp = ({ Component, pageProps }: AppProps) => { const router = useRouter() - - const { locale, pathWithoutLocale } = useMemo(() => { - const { locale, pathWithoutLocale } = extractLocaleFromPath(router.asPath.split(/[?#]/)[0]) - return { - locale, - pathWithoutLocale, - } - }, [router]) - - const setLocale = useCallback( - (locale: Locale) => { - void router.push(`/${locale}${pathWithoutLocale}`) - }, - [router, pathWithoutLocale] - ) - const localeSwitcher = useMemo(() => , []) - // Disable smooth scrolling while switching routes - const disableSmoothScrolling = useCallback( - (disableFn) => { - router.events.on('routeChangeStart', disableFn) - return () => router.events.off('routeChangeStart', disableFn) - }, - [router.events] - ) - - // Also disable smooth scrolling when the search is open - const [isSearchOpen, setIsSearchOpen] = useState(false) - useBus( - [EventType.SEARCH_OPEN, EventType.SEARCH_CLOSE], - (event) => { - setIsSearchOpen(event.type === EventType.SEARCH_OPEN) - }, - [setIsSearchOpen] - ) - return ( - + - -
-
-
- - -
- } - mainContainer - footerContent={