feat(airtable): use access token (#3604)

* feat(airtable): replace API Key with Access Token

* style: lint fix

* fix(airtable): use access token

* feat: content generation configuration in `.env`

* feat(airtable): use access token in builds

.env.example

@@ -1,3 +1,7 @@
+# General configuration
+SITE_URL=
+
+# Analytics
 NUXT_PUBLIC_IBM_ANALYTICS_SEGMENT_ANALYTICS_CATEGORY=
 NUXT_PUBLIC_IBM_ANALYTICS_SEGMENT_INSTANCE_ID=
 NUXT_PUBLIC_IBM_ANALYTICS_SEGMENT_ANALYTICS_KEY=
@@ -7,7 +11,10 @@ NUXT_PUBLIC_IBM_ANALYTICS_SEGMENT_PRODUCT_CODE_TYPE=
 NUXT_PUBLIC_IBM_ANALYTICS_SEGMENT_PRODUCT_TITLE=
 NUXT_PUBLIC_IBM_ANALYTICS_SEGMENT_SCRIPT_SRC=
 NUXT_PUBLIC_IBM_ANALYTICS_SEGMENT_UT30=
-SITE_URL=
-AIRTABLE_API_KEY=
+
+# Content generation
+AIRTABLE_ACCESS_TOKEN=
+GENERATE_CONTENT=true
 MOCK_DATA=
-MOCK_BASE_PATH=
+MOCK_BASE_PATH=
+MOCK_CONTENT=true

.github/workflows/deploy.yml

@@ -30,7 +30,7 @@ jobs:
       - name: Build
         run: npm run generate
         env:
-          AIRTABLE_API_KEY: ${{ secrets.AIRTABLE_API_KEY }}
+          AIRTABLE_ACCESS_TOKEN: ${{ secrets.AIRTABLE_ACCESS_TOKEN }}
           NUXT_PUBLIC_IBM_ANALYTICS_SEGMENT_ANALYTICS_CATEGORY: ${{ secrets.NUXT_PUBLIC_IBM_ANALYTICS_SEGMENT_ANALYTICS_CATEGORY }}
           NUXT_PUBLIC_IBM_ANALYTICS_SEGMENT_INSTANCE_ID: ${{ secrets.NUXT_PUBLIC_IBM_ANALYTICS_SEGMENT_INSTANCE_ID }}
           NUXT_PUBLIC_IBM_ANALYTICS_SEGMENT_ANALYTICS_KEY: ${{ secrets.NUXT_PUBLIC_IBM_ANALYTICS_SEGMENT_ANALYTICS_KEY }}

.github/workflows/preview-deploy.yml

@@ -18,7 +18,7 @@ jobs:
       docker_image_name: qiskit-org
       docker_image_port: "80"
     secrets:
-      AIRTABLE_API_KEY: ${{ secrets.AIRTABLE_API_KEY }}
+      AIRTABLE_ACCESS_TOKEN: ${{ secrets.AIRTABLE_ACCESS_TOKEN }}
       ibmcloud_account: ${{ secrets.IBMCLOUD_ACCOUNT }}
       ibmcloud_api_key: ${{ secrets.IBMCLOUD_API_KEY }}
       NUXT_PUBLIC_IBM_ANALYTICS_SEGMENT_ANALYTICS_CATEGORY: ${{ secrets.NUXT_PUBLIC_IBM_ANALYTICS_SEGMENT_ANALYTICS_CATEGORY }}

.github/workflows/verify.yml

@@ -54,4 +54,4 @@ jobs:
       - run: npm ci
       - run: npm run generate
         env:
-          AIRTABLE_API_KEY: ${{ secrets.AIRTABLE_API_KEY }}
+          AIRTABLE_ACCESS_TOKEN: ${{ secrets.AIRTABLE_ACCESS_TOKEN }}

Dockerfile

@@ -5,8 +5,8 @@ FROM node:18-alpine AS build
 ARG SITE_URL
 ENV SITE_URL=$SITE_URL
 
-ARG AIRTABLE_API_KEY
-ENV AIRTABLE_API_KEY=$AIRTABLE_API_KEY
+ARG AIRTABLE_ACCESS_TOKEN
+ENV AIRTABLE_ACCESS_TOKEN=$AIRTABLE_ACCESS_TOKEN
 
 WORKDIR /qiskit.org
 

README.md

@@ -67,7 +67,13 @@ Qiskit is an open-source quantum computing software development framework for le
     npm install
    ```
 
-3. **Run a local server with hot reload at [localhost:3000](localhost:3000)**
+3. **Create an .env file**
+
+  ```shell
+  cp .env.example .env
+  ```
+
+4. **Run a local server with hot reload at [localhost:3000](localhost:3000)**
 
    ```shell
    npm run dev
@@ -85,23 +91,23 @@ We create and run tests using [Vitest](https://vitest.dev/), avoid syntax errors
 
 ## 🏭 Content Generation
 
-Qiskit.org integrates with the tools used by the IBM Quantum Community Team to generate content based on 3rd party APIs such as Airtable. Part of this content is prefetched during building time. While developing, it is disabled by default. If you want enable content generation, you must set the environment variable `GENERATE_CONTENT`. For instance:
+Qiskit.org integrates with the tools used by the IBM Quantum Community Team to generate content based on 3rd party APIs such as Airtable. Part of this content is prefetched during building time.
 
-```shell
-GENERATE_CONTENT=1 npm run dev
-```
+During local development, mock data is generated by default but fetching real data from Airtable is possible. If you need to do this, please ask a core maintainer for the `AIRTABLE_ACCESS_TOKEN`, or [generate your own](https://airtable.com/developers/web/guides/personal-access-tokens) if you have an Airtable account with access to the required bases. Once you have the Airtable access token, change these environment variables in your `.env` file:
+
+- `AIRTABLE_ACCESS_TOKEN=<Airtable access token>`
+- `GENERATE_CONTENT=true`
+- `MOCK_CONTENT=false`
 
-Notice that, for communicating with the team tools, API keys may be required. It is the case of dealing with Airtable for the generation of the event index. If you think you should have access to these tables, talk to the Events Squad in the Community Team, get your developer API key and set the `AIRTABLE_API_KEY` environment variable to this value:
+Then you can run the local server as usual and the content will be fetched at the beginning:
 
 ```shell
-GENERATE_CONTENT=1 AIRTABLE_API_KEY=<your airtable api key> npm run dev
+npm run dev
 ```
 
 #### 🥸 Mocking content
 
-If you should not have access to the content tables (or you don't want to fetch these data), it can be mocked by setting the environment variable `MOCK_CONTENT` to `true` .
-
-If you start up the project with `npm run dev` , mocked content is enabled by default.
+If you don't have access to the Airtable data or you don't need to fetch it, mock data can be generated by setting the environment variable `MOCK_CONTENT` to `true` in your `.env` file. This is set by default after you generate your `.env` file from `.env.example`.
 
 The project has a default mocked content under the `hooks/mock/content` folder. If you want your own custom mocked content, you can create a new folder and set it as your mocked content folder using the environment variable `MOCK_BASE_PATH` which should be an absolute path of your system.
 

nuxt.config.ts

@@ -4,8 +4,13 @@ import fetchAdvocates from "./hooks/update-advocates";
 import fetchFallFestEvents from "./hooks/update-fall-fest-events";
 import { generateMocks } from "./hooks/mock/mock-service";
 
-const { AIRTABLE_API_KEY, GENERATE_CONTENT, NODE_ENV, SITE_URL, MOCK_CONTENT } =
-  process.env;
+const {
+  AIRTABLE_ACCESS_TOKEN,
+  GENERATE_CONTENT,
+  NODE_ENV,
+  SITE_URL,
+  MOCK_CONTENT,
+} = process.env;
 const IS_PRODUCTION = NODE_ENV === "production";
 const siteUrl = SITE_URL || "https://qiskit.org";
 
@@ -88,22 +93,25 @@ async function generateContent() {
     return;
   }
 
-  if (AIRTABLE_API_KEY) {
+  if (AIRTABLE_ACCESS_TOKEN) {
     // eslint-disable-next-line no-console
     console.info("Generating the events content...");
-    await fetchEvents(AIRTABLE_API_KEY, "./content/events");
+    await fetchEvents(AIRTABLE_ACCESS_TOKEN, "./content/events");
 
     // eslint-disable-next-line no-console
     console.info("Generating the fall fest events content...");
-    await fetchFallFestEvents(AIRTABLE_API_KEY, "./content/fall-fest-events");
+    await fetchFallFestEvents(
+      AIRTABLE_ACCESS_TOKEN,
+      "./content/fall-fest-events"
+    );
 
     // eslint-disable-next-line no-console
     console.info("Generating the advocates content...");
-    await fetchAdvocates(AIRTABLE_API_KEY, "./content/advocates");
+    await fetchAdvocates(AIRTABLE_ACCESS_TOKEN, "./content/advocates");
   } else {
     // eslint-disable-next-line no-console
     console.warn(
-      "No AIRTABLE_API_KEY environment variable found. Skipping content generation."
+      "No AIRTABLE_ACCESS_TOKEN environment variable found. Skipping content generation."
     );
   }
 }

package.json

@@ -9,7 +9,7 @@
   },
   "scripts": {
     "build": "nuxt build",
-    "dev": "cross-env MOCK_CONTENT=true GENERATE_CONTENT=true nuxt dev",
+    "dev": "cross-env nuxt dev",
     "format": "npm run format:eslint && npm run format:prettier && npm run format:stylelint",
     "format:eslint": "npm run lint:eslint -- --fix",
     "format:prettier": "prettier . --ignore-path .gitignore --write",