Fix Google Calendar environment variables (#1638)

* passing Google Calendar API info through build process 🈴

* renaming env vars & publishing them to the build process 🐦

* auto checkout not working for Hasura build 🦷

* discovered some not renamed variables 🉐

* adding swap space ☄

* trying to expand Node's heap size 🧐

* underscored rather than dashed 🌾

* trying node 20 🦙

* switching to `python3` 🌮

* updating `node-gyp` & `better-sqlite3` 🛵

* returning error details 🦚

* trying a different mechanism for increasing the Node heap 🦟

* fix: fix logic for checking the host. Now using a whitelist set in config.ts and checking that against the publicURL

* fix: was referencing the cal id with NEXT_PUBLIC_GOOGLE_CAL prefix but it is now GCAL_ - should sort the missing credentials issue

* printing settings for sanity check 🐻

* setting runtime environment 🌲

* trying to set runtime env 👩🏿‍🔧

* grabbing calendar id 🤴🏿

* replacing escapes newlines in private key 🍨

* removing logging 🥾

* fix: body overflow issue when events have long descriptions

* feat: style/design updates to calendar pop overs

* chore: clean up comments

* fix: use ListItem

* fixed issues after review from @dysbulic

* fix: addressed comments from dys' review, removed a cpl of comments and increased the days initially displayed to fill the block

---------

Co-authored-by: luxumbra <me@luxumbra.dev>

.github/workflows/gcp-deploy-frontend.yaml

@@ -143,8 +143,10 @@ jobs:
             USERBACK_TOKEN=${{secrets.USERBACK_TOKEN}}
             WEB3_STORAGE_TOKEN=${{secrets.WEB3_STORAGE_TOKEN}}
             OPENSEA_API_KEY=${{secrets.OPENSEA_API_KEY}}
-            GOOGLE_CAL_API_KEY=${{secrets.GOOGLE_CAL_API_KEY}}
-            GOOGLE_CAL_PRIVATE_KEY=${{secrets.GOOGLE_CAL_PRIVATE_KEY}}
+            GCAL_PRIVATE_KEY=${{secrets.GCAL_PRIVATE_KEY}}
+            GCAL_CLIENT_EMAIL=${{secrets.GCAL_CLIENT_EMAIL}}
+            GCAL_PROJECT_NUMBER=${{secrets.GCAL_PROJECT_NUMBER}}
+            GCAL_CALENDAR_ID=${{secrets.GCAL_CALENDAR_ID}}
           push: true
 
   deploy-frontend:

.github/workflows/gcp-deploy-pr.yaml

@@ -32,9 +32,6 @@ env:
   HASURA_SECRET: metagame_secret
   GA4_ID: G-B1NKK3Q1BP
   APP_ENV: development
-  GOOGLE_CAL_PROJECT_NUMBER: 510169944888
-  GOOGLE_CAL_CLIENT_EMAIL: metagamecalwebsite@metagamecal.iam.gserviceaccount.com
-  GOOGLE_CAL_CALENDAR_ID: nih59ktgafmm64ed4qk6ue8vv4
 
 jobs:
   start-deployment:
@@ -103,9 +100,6 @@ jobs:
       HASURA_TAG: ${{env.HASURA_TAG}}
       FRONTEND_TAG: ${{env.FRONTEND_TAG}}
       FRONTEND_TARGET: ${{env.FRONTEND_TARGET}}
-      GOOGLE_CAL_PROJECT_NUMBER: ${{env.GOOGLE_CAL_PROJECT_NUMBER}}
-      GOOGLE_CAL_CLIENT_EMAIL: ${{env.GOOGLE_CAL_CLIENT_EMAIL}}
-      GOOGLE_CAL_CALENDAR_ID: ${{env.GOOGLE_CAL_CALENDAR_ID}}
 
     steps:
       - name: First Intepolation of Variables
@@ -255,23 +249,18 @@ jobs:
     needs: [env, delete-backend, undeploy-backend]
 
     steps:
-      - name: "Checkout: ${{github.event.pull_request.head.label}}"
-        uses: actions/checkout@v3
-        with:
-          ref: ${{github.event.pull_request.head.sha}}
-
       - name: Set Up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
 
       - name: "Login to Registry: ${{needs.env.outputs.DOCKER_REGISTRY}}"
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         with:
           registry: ${{needs.env.outputs.DOCKER_REGISTRY}}
           username: _json_key
           password: ${{secrets.GCP_SA_KEY}}
 
       - name: "Build & Push Container Image: ${{needs.env.outputs.BACKEND_TAG}}"
-        uses: docker/build-push-action@v4
+        uses: docker/build-push-action@v5
         with:
           file: docker/backend/Dockerfile
           tags: ${{needs.env.outputs.BACKEND_TAG}}
@@ -367,17 +356,17 @@ jobs:
           ref: ${{github.event.pull_request.head.sha}}
 
       - name: Set Up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
 
       - name: "Login to Registry: ${{needs.env.outputs.DOCKER_REGISTRY}}"
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         with:
           registry: ${{needs.env.outputs.DOCKER_REGISTRY}}
           username: _json_key
           password: ${{secrets.GCP_SA_KEY}}
 
       - name: "Build & Push Container Image: ${{needs.env.outputs.HASURA_TAG}}"
-        uses: docker/build-push-action@v4
+        uses: docker/build-push-action@v5
         with:
           file: hasura/Dockerfile
           context: hasura
@@ -465,23 +454,18 @@ jobs:
     needs: [env, delete-frontend, undeploy-frontend, deploy-hasura, seed-db]
 
     steps:
-      - name: "Checkout: ${{github.event.pull_request.head.label}}"
-        uses: actions/checkout@v3
-        with:
-          ref: ${{github.event.pull_request.head.sha}}
-
       - name: Set Up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
 
       - name: "Login to Registry: ${{needs.env.outputs.DOCKER_REGISTRY}}"
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         with:
           registry: ${{needs.env.outputs.DOCKER_REGISTRY}}
           username: _json_key
           password: ${{secrets.GCP_SA_KEY}}
 
       - name: "Build & Push Container Image: ${{needs.env.outputs.FRONTEND_TAG}}"
-        uses: docker/build-push-action@v4
+        uses: docker/build-push-action@v5
         with:
           file: docker/frontend/Dockerfile
           tags: ${{needs.env.outputs.FRONTEND_TAG}}
@@ -494,8 +478,10 @@ jobs:
             IMGIX_TOKEN=${{secrets.IMGIX_TOKEN}}
             WEB3_STORAGE_TOKEN=${{secrets.WEB3_STORAGE_TOKEN}}
             OPENSEA_API_KEY=${{secrets.OPENSEA_API_KEY}}
-            GOOGLE_CAL_API_KEY=${{secrets.GOOGLE_CAL_API_KEY}}
-            GOOGLE_CAL_PRIVATE_KEY=${{secrets.GOOGLE_CAL_PRIVATE_KEY}}
+            GCAL_PRIVATE_KEY=${{secrets.GCAL_PRIVATE_KEY}}
+            GCAL_PROJECT_NUMBER=${{secrets.GCAL_PROJECT_NUMBER}}
+            GCAL_CLIENT_EMAIL=${{secrets.GCAL_CLIENT_EMAIL}}
+            GCAL_CALENDAR_ID=${{secrets.GCAL_CALENDAR_ID}}
           push: true
 
   deploy-frontend:
@@ -527,7 +513,12 @@ jobs:
             --memory ${{needs.env.outputs.FRONTEND_TARGET == 'development' && '5Gi' || '512Mi'}} \
             --ingress all \
             --max-instances 1 \
-            --allow-unauthenticated
+            --allow-unauthenticated \
+            --set-env-vars GCAL_PRIVATE_KEY="${{secrets.GCAL_PRIVATE_KEY}}" \
+            --set-env-vars GCAL_PROJECT_NUMBER="${{secrets.GCAL_PROJECT_NUMBER}}" \
+            --set-env-vars GCAL_CLIENT_EMAIL="${{secrets.GCAL_CLIENT_EMAIL}}" \
+            --set-env-vars NEXT_PUBLIC_GCAL_CALENDAR_ID="${{secrets.GCAL_CALENDAR_ID}}"
+
 
   seed-db:
     name: Seed Database

.node-version

@@ -1 +1 @@
-16.20.1
+20

docker/backend/Dockerfile

@@ -1,9 +1,9 @@
-FROM node:16-slim as base
+FROM node:20-slim as base
 WORKDIR /usr/src/app
 
 # Install dependencies not included in the slim image
 RUN apt-get update && \
-    apt-get install -y --no-install-recommends g++ make python git openssl && \
+    apt-get install -y --no-install-recommends g++ make python3 git openssl && \
     apt-get install -y --no-install-recommends --reinstall ca-certificates
 
 # Install dependencies for dev and prod
@@ -44,7 +44,7 @@ RUN yarn backend:build
 RUN yarn install --pure-lockfile --production --ignore-scripts --prefer-offline
 
 # Create completely new stage including only necessary files
-FROM node:16-slim as app
+FROM node:20-slim as app
 WORKDIR /app
 
 # Copy necessary files into the stage

docker/discord-bot/Dockerfile

@@ -1,9 +1,9 @@
-FROM node:16-slim as base
+FROM node:20-slim as base
 WORKDIR /usr/src/app
 
 # Install dependencies not included in the slim image
 RUN apt-get update && \
-    apt-get install -y --no-install-recommends g++ make python git openssl && \
+    apt-get install -y --no-install-recommends g++ make python3 git openssl && \
     apt-get install -y --no-install-recommends --reinstall ca-certificates
 
 # Install dependencies for dev and prod
@@ -38,7 +38,7 @@ RUN yarn discord-bot build
 RUN yarn install --pure-lockfile --production --ignore-scripts --prefer-offline
 
 # Create completely new stage including only necessary files
-FROM node:16-slim as app
+FROM node:20-slim as app
 WORKDIR /app
 
 # Needed at runtime

docker/frontend/Dockerfile

@@ -7,11 +7,11 @@
 # site or dev environment respectively.
 ARG TARGET=production
 
-FROM node:16-slim AS base
+FROM node:20-slim AS base
 WORKDIR /usr/src/app
 
 # Install dependencies not included in the slim image
-RUN apt-get update && apt-get install -y --no-install-recommends g++ make python git ca-certificates
+RUN apt-get update && apt-get install -y --no-install-recommends g++ make python3 git ca-certificates
 
 # Install dependencies for dev and prod
 COPY package.json ./
@@ -51,6 +51,10 @@ ARG USERBACK_TOKEN
 ARG CERAMIC_URL https://ceramic.metagame.wtf
 ARG WEB3_STORAGE_TOKEN
 ARG OPENSEA_API_KEY
+ARG GCAL_CALENDAR_ID
+ARG GCAL_PRIVATE_KEY
+ARG GCAL_CLIENT_EMAIL
+ARG GCAL_PROJECT_NUMBER
 
 # ARGs are not available at runtime, so define ENV variables
 # These ENVs should match the --set-env-vars in `.github/workflows/gcp-deploy.yaml`
@@ -63,9 +67,13 @@ ENV NEXT_PUBLIC_YOUTUBE_API_KEY $YOUTUBE_API_KEY
 ENV NEXT_PUBLIC_HONEYBADGER_API_KEY $HONEYBADGER_API_KEY
 ENV NEXT_PUBLIC_USERBACK_TOKEN $USERBACK_TOKEN
 ENV NEXT_PUBLIC_CERAMIC_URL $CERAMIC_URL
+ENV NEXT_PUBLIC_GCAL_CALENDAR_ID $GCAL_CALENDAR_ID
 # These are not exposed to the browser
 ENV WEB3_STORAGE_TOKEN $WEB3_STORAGE_TOKEN
 ENV OPENSEA_API_KEY $OPENSEA_API_KEY
+ENV GCAL_PRIVATE_KEY $GCAL_PRIVATE_KEY
+ENV GCAL_CLIENT_EMAIL $GCAL_CLIENT_EMAIL
+ENV GCAL_PROJECT_NUMBER $GCAL_PROJECT_NUMBER
 
 ONBUILD RUN yarn web:build
 # Delete devDependencies
@@ -77,7 +85,7 @@ ONBUILD RUN yarn web:deps:build
 FROM "build-$TARGET" as built
 
 # New stage including only necessary files
-FROM node:16-slim AS app
+FROM node:20-slim AS app
 WORKDIR /app
 
 # Copy necessary files into the stage

package.json

@@ -13,7 +13,7 @@
     "docker:build": "docker-compose up --build -d",
     "docker:stop": "docker-compose down",
     "docker:clean": "docker-compose down -v",
-    "docker:dev": "COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker-compose up --build",
+    "docker:dev": "DOCKER_BUILDKIT=1 docker compose up --build",
     "build": "lerna run --concurrency 1 --stream build",
     "web:dev": "lerna run dev --parallel --scope @metafam/web --include-dependencies",
     "web:build": "lerna run build --scope @metafam/web --include-dependencies --stream",
@@ -102,7 +102,9 @@
     "ethers": "5.7.0",
     "graphql": "16.8.0",
     "multihashes": "4.0.3",
-    "@urql/core": "3.2.2"
+    "@urql/core": "3.2.2",
+    "node-gyp": "10.0.1",
+    "better-sqlite3": "9.0.0"
   },
   "browserslist": [
     "defaults",

packages/design-system/src/theme/colors.ts

@@ -44,6 +44,7 @@ export type MetaColors = ChakraTheme['colors'] & {
   landing600: string;
   landing650: string;
   landingDarkGlass: string;
+  darkPurpleAlpha: ColorHues;
   midnightBlue: string;
   royalBlue: string;
   deepMagenta: string;
@@ -184,4 +185,16 @@ export const colors: MetaColors = {
   landing600: '#DF9BFF',
   landing650: '#DFB9D7',
   landingDarkGlass: 'rgba(27, 13, 42, 0.9)',
+  darkPurpleAlpha: {
+    50: 'rgba(27, 13, 42, 0.05)',
+    100: 'rgba(27, 13, 42, 0.1)',
+    200: 'rgba(27, 13, 42, 0.2)',
+    300: 'rgba(27, 13, 42, 0.3)',
+    400: 'rgba(27, 13, 42, 0.4)',
+    500: 'rgba(27, 13, 42, 0.5)',
+    600: 'rgba(27, 13, 42, 0.6)',
+    700: 'rgba(27, 13, 42, 0.7)',
+    800: 'rgba(27, 13, 42, 0.8)',
+    900: 'rgba(27, 13, 42, 0.98)',
+  },
 };