Integrate Storyblok (#1041)

.github/workflows/actions/init/action.yml

@@ -27,7 +27,7 @@ runs:
     - name: Install and set up vercel & firebase-tools
       shell: bash
       run: |
-        npm -g install [email protected].1 [email protected] && \
+        npm -g install [email protected].3 [email protected] && \
         firebase setup:emulators:firestore && \
         firebase setup:emulators:storage && \
         firebase setup:emulators:ui

.github/workflows/website-update-snapshots.yml

@@ -61,7 +61,7 @@ jobs:
 
       - name: Install & Setup Firebase Emulator Suite
         run: |
-          npm -g install [email protected].1 && \
+          npm -g install [email protected].3 && \
           firebase setup:emulators:firestore
 
       - name: Install Dependencies

.github/workflows/website.yml

@@ -54,6 +54,9 @@ jobs:
       - name: Test build
         # To use the emulator during the build, we need to rename the .env.development file to .env.production.
         # Next.js doesn't now allow to use NODE_ENV=development in the build process.
+        env:
+          STORYBLOK_PREVIEW_SECRET: ${{ secrets.STORYBLOK_PREVIEW_SECRET }}
+          STORYBLOK_PREVIEW_TOKEN: ${{ secrets.STORYBLOK_PREVIEW_TOKEN }}
         run: |
           mv website/.env.development website/.env.production
           npm run website:build:emulator

README.md

@@ -207,6 +207,21 @@ your [Admin Tool](http://localhost:3000) or the
 locally. After making any changes, you can export the updated data to
 the seed folder using the command `npm run firebase:export`.
 
+#### Storyblok Development
+
+1. Read the storyblok [documentation](https://www.storyblok.com/docs).
+2. Set the values `STORYBLOK_PREVIEW_TOKEN` and
+   `STORYBLOK_PREVIEW_SECRET` to the
+   [env.development](website/.env.local). You can find the
+   `STORYBLOK_PREVIEW_TOKEN` at the
+   [storyblok_token](https://app.storyblok.com/#/me/spaces/109655/settings?tab=api)
+   and the `STORYBLOK_PREVIEW_SECRET` at the
+   [VISUAL_EDITOR](https://app.storyblok.com/#/me/spaces/109655/settings?tab=editor)
+   in the `preview-url`.
+3. (optional-step) `npm run dev:ssl-proxy`, this is needed if you want
+   to preview the changes on the storyblok live editor for the local
+   environment.
+
 #### Format Code
 
 We are using [Prettier](https://prettier.io) to format the code: