Add new global header + misc. improvements and fixes (#546)

* Use new `GlobalHeader` component * Uncomment `NPSForm` * Add `ENVIRONMENT` env var * Allow `ENVIRONMENT` on the frontend * Update dependencies * Update dependencies * Revert bad change * Update dependencies * Update dependencies * Update dependencies, including Next to v14 * Re-comment out the NPS form * Update dependencies * `next export` => `output: 'export'` * Try to fix the build * Fix `pnpm dev` * Update dependencies
graphprotocol · Dec 13, 2023 · 0cf2357 · 0cf2357
1 parent 0dd9031
commit 0cf2357
Show file tree

Hide file tree

Showing 19 changed files with 2,360 additions and 2,156 deletions.
diff --git a/.github/workflows/ci-cd-production.yml b/.github/workflows/ci-cd-production.yml
@@ -30,11 +30,13 @@ jobs:
           password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Build and push Docker image
-        uses: docker/build-push-action@v2
+        uses: docker/build-push-action@v4
         with:
           context: . # required to respect .dockerignore
           cache-from: type=registry,ref=${{ env.BASE_IMAGE }}:latest
           cache-to: type=inline
+          build-args: |
+            ENVIRONMENT=production
           tags: |
             ${{ env.BASE_IMAGE }}:${{ github.sha }}
             ${{ env.BASE_IMAGE }}:latest

diff --git a/.github/workflows/ci-cd-pull-request.yml b/.github/workflows/ci-cd-pull-request.yml
@@ -35,4 +35,6 @@ jobs:
         with:
           context: . # required to respect .dockerignore
           cache-from: type=registry,ref=${{ env.BASE_IMAGE }}:latest
+          build-args: |
+            ENVIRONMENT=staging
           push: false
diff --git a/.github/workflows/ci-cd-staging.yml b/.github/workflows/ci-cd-staging.yml
@@ -36,6 +36,8 @@ jobs:
           context: . # required to respect .dockerignore
           cache-from: type=registry,ref=${{ env.BASE_IMAGE }}:latest
           cache-to: type=inline
+          build-args: |
+            ENVIRONMENT=staging
           tags: |
             ${{ env.BASE_IMAGE }}:${{ github.sha }}
             ${{ env.BASE_IMAGE }}:latest

diff --git a/Dockerfile b/Dockerfile
@@ -1,5 +1,8 @@
 FROM node:18-alpine as builder
 
+ARG ENVIRONMENT
+ENV ENVIRONMENT=$ENVIRONMENT
+
 ENV PNPM_HOME="/usr/bin"
 
 RUN apk add --no-cache git
@@ -13,7 +16,6 @@ COPY . .
 RUN pnpm install --frozen-lockfile --ignore-scripts
 
 RUN pnpm build
-RUN pnpm export
 
 ## production environment
 FROM nginx:1.16.0-alpine

diff --git a/package.json b/package.json
@@ -7,36 +7,34 @@
     "check": "pnpm typecheck && pnpm lint && pnpm prettier:check",
     "check:fix": "pnpm typecheck; pnpm lint:fix",
     "dev": "turbo run dev --parallel",
-    "docker:build": "DOCKER_BUILDKIT=1 docker build . -t docs --no-cache",
+    "docker:build": "source .env.local && DOCKER_BUILDKIT=1 docker build . -t docs --no-cache --build-arg ENVIRONMENT=$ENVIRONMENT",
     "docker:clean": "docker builder prune",
     "docker:up": "docker run --rm -it -p 3000:80 -v \"$(pwd)/nginx.conf:/etc/nginx/nginx.conf\" docs",
-    "export": "pnpm --filter @graphprotocol/docs export",
     "lint": "eslint . --cache --ignore-path .gitignore --max-warnings 0",
     "lint:fix": "eslint . --cache --ignore-path .gitignore --fix; pnpm prettier",
     "pre-commit": "lint-staged --concurrent false",
     "pre-push": "pnpm build",
     "prepare": "husky install && chmod +x .husky/*",
     "prettier": "pnpm prettier:check --write",
     "prettier:check": "prettier --cache --check .",
-    "start": "pnpm --filter @graphprotocol/docs start",
     "test": "turbo run test",
     "typecheck": "turbo run typecheck"
   },
   "devDependencies": {
-    "@edgeandnode/eslint-config": "^2.0.2",
-    "eslint": "^8.52.0",
+    "@edgeandnode/eslint-config": "^2.0.3",
+    "eslint": "^8.55.0",
     "eslint-plugin-mdx": "^2.2.0",
     "husky": "^8.0.3",
-    "lint-staged": "^15.0.2",
-    "prettier": "^3.0.3",
+    "lint-staged": "^15.2.0",
+    "prettier": "^3.1.1",
     "prettier-plugin-pkg": "^0.18.0",
     "remark-frontmatter": "^5.0.0",
     "remark-lint-first-heading-level": "^3.1.2",
     "remark-lint-heading-increment": "^3.1.2",
     "remark-lint-no-heading-punctuation": "^3.1.2",
     "remark-lint-restrict-elements": "workspace:*",
-    "turbo": "^1.10.16",
-    "typescript": "^5.2.2"
+    "turbo": "^1.11.2",
+    "typescript": "^5.3.3"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx,mjs,cjs}": "eslint --fix",

diff --git a/packages/nextra-theme/package.json b/packages/nextra-theme/package.json
@@ -25,8 +25,8 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@edgeandnode/gds": "^2.9.3",
-    "@edgeandnode/go": "^3.0.3",
+    "@edgeandnode/gds": "3.0.0-global-header-1701913779061-6ea902d",
+    "@edgeandnode/go": "4.0.0-global-header-1701913779061-6ea902d",
     "@emotion/react": "^11.11",
     "next": "^13",
     "next-seo": "^6",
@@ -39,23 +39,23 @@
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-visually-hidden": "^1.0.3",
     "lodash": "^4.17.21",
-    "react-intersection-observer": "^9.5.2",
-    "react-use": "^17.4.0"
+    "react-intersection-observer": "^9.5.3",
+    "react-use": "^17.4.2"
   },
   "devDependencies": {
-    "@edgeandnode/gds": "^2.12.9",
-    "@edgeandnode/go": "^3.4.2",
+    "@edgeandnode/gds": "3.0.0-global-header-1701913779061-6ea902d",
+    "@edgeandnode/go": "4.0.0-global-header-1701913779061-6ea902d",
     "@emotion/react": "^11.11.1",
-    "@types/lodash": "^4.14.200",
-    "@types/react": "^18.2.34",
-    "@types/react-dom": "^18.2.14",
-    "next": "13.5.6",
+    "@types/lodash": "^4.14.202",
+    "@types/react": "^18.2.44",
+    "@types/react-dom": "^18.2.17",
+    "next": "^14.0.4",
     "next-seo": "^6.4.0",
     "nextra": "^2.13.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "theme-ui": "^0.16.1",
-    "tsup": "^7.2.0"
+    "tsup": "^7.3.0"
   },
   "sideEffects": false
 }
diff --git a/packages/nextra-theme/src/components/Image.tsx b/packages/nextra-theme/src/components/Image.tsx
@@ -5,7 +5,7 @@ export type ImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, 'children'>
 export const Image = ({ src, ...props }: ImageProps) => {
   // If the URL is internal, automatically prepend the base path
   if (src?.startsWith('/')) {
-    src = `${process.env.BASE_PATH}${src}`
+    src = `${process.env.BASE_PATH ?? ''}${src}`
   }
 
   return <img src={src} alt="" {...props} />

diff --git a/packages/nextra-theme/src/index.tsx b/packages/nextra-theme/src/index.tsx
@@ -159,7 +159,6 @@ export default function NextraLayout({ children, pageOpts, pageProps }: NextraTh
           <div
             sx={{
               display: ['none', null, null, 'block'],
-              mt: 'calc(-1 * var(--gds-header-height) * var(--gds-header-fixed))',
               marginInlineStart: '-8px',
               marginInlineEnd: '16px',
             }}
@@ -219,7 +218,6 @@ export default function NextraLayout({ children, pageOpts, pageProps }: NextraTh
           <div
             sx={{
               display: ['none', null, null, 'block'],
-              mt: 'calc(-1 * var(--gds-header-height) * var(--gds-header-fixed))',
               marginInlineStart: '32px',
               marginInlineEnd: '-8px',
             }}

diff --git a/packages/nextra-theme/src/layout/MDXLayoutNav.tsx b/packages/nextra-theme/src/layout/MDXLayoutNav.tsx
@@ -45,23 +45,15 @@ const DesktopWrapper = ({ children }: PropsWithChildren<{}>) => {
       sx={{
         zIndex: 1,
         position: 'sticky',
-        top: 0,
-        maxHeight: '100vh',
+        top: 'var(--gds-header-height-visible)',
+        maxHeight: 'calc(100vh - var(--gds-header-height-visible))',
         paddingInlineEnd: Spacing['24px'],
         pt: Spacing['32px'],
         pb: Spacing['16px'],
         overflowY: 'auto',
-        transform: 'translateY(calc(var(--gds-header-height-visible) * var(--gds-header-fixed)))',
-        transition: enableTransition ? buildTransition('TRANSFORM', '400ms') : undefined,
       }}
     >
       {children}
-      <div
-        sx={{
-          height: 'var(--gds-header-height-visible)',
-          transition: enableTransition ? buildTransition('height', '400ms') : undefined,
-        }}
-      />
     </div>
   )
 }

diff --git a/packages/nextra-theme/src/layout/MDXLayoutOutline.tsx b/packages/nextra-theme/src/layout/MDXLayoutOutline.tsx
@@ -20,13 +20,11 @@ export const MDXLayoutOutline = () => {
       sx={{
         zIndex: 1,
         position: 'sticky',
-        top: 0,
-        maxHeight: '100vh',
+        top: 'var(--gds-header-height-visible)',
+        maxHeight: 'calc(100vh - var(--gds-header-height-visible))',
         px: Spacing['8px'],
         py: Spacing['32px'],
         overflowY: 'auto',
-        transform: 'translateY(calc(var(--gds-header-height-visible) * var(--gds-header-fixed)))',
-        transition: enableTransition ? buildTransition('TRANSFORM', '400ms') : undefined,
       }}
     >
       <Flex.Row>
@@ -66,12 +64,6 @@ export const MDXLayoutOutline = () => {
           </nav>
         </>
       ) : null}
-      <div
-        sx={{
-          height: 'var(--gds-header-height-visible)',
-          transition: enableTransition ? buildTransition('height', '400ms') : undefined,
-        }}
-      />
     </div>
   )
 }
diff --git a/packages/og-image/package.json b/packages/og-image/package.json
@@ -12,16 +12,16 @@
   "dependencies": {
     "@resvg/resvg-wasm": "2.6.0",
     "react": "18.2.0",
-    "satori": "0.10.9",
+    "satori": "0.10.11",
     "yoga-wasm-web": "0.3.3"
   },
   "devDependencies": {
-    "@cloudflare/workers-types": "^4.20231025.0",
-    "@types/react": "^18.2.34",
-    "jest-image-snapshot": "^6.2.0",
+    "@cloudflare/workers-types": "^4.20231121.0",
+    "@types/react": "^18.2.44",
+    "jest-image-snapshot": "^6.4.0",
     "tsx": "^4.6.2",
-    "typescript": "^5.2.2",
+    "typescript": "^5.3.3",
     "vitest": "^0.34.6",
-    "wrangler": "^3.15.0"
+    "wrangler": "^3.20.0"
   }
 }