chore: Test website build in CI (#9643)

Author: felixpalmer

.github/workflows/test.yml

@@ -38,6 +38,28 @@ jobs:
         uses: coverallsapp/github-action@648a8eb78e6d50909eff900e4ec85cab4524a45b # v2.3.6
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
+  
+  test-website:
+    runs-on: ubuntu-22.04
+    permissions:
+      checks: write
+      contents: read
+
+    steps:
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: volta-cli/action@5c175f92dea6f48441c436471e6479dbc192e194 # v4.2.1
+        with:
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn bootstrap
+
+      - name: Build packages
+        run: yarn build
+
+      - name: Test website build
+        run: |
+          yarn test-website
 
   test-python:
     runs-on: ubuntu-latest

docs/api-reference/widgets/compass-widget.md

@@ -47,8 +47,8 @@ Learn more about how to replace icons in the [styling guide](/docs/api-reference
 | Name             | Type                     | Default                                        |
 | ---------------- | ------------------------ | ---------------------------------------------- |
 | `--icon-compass` | [SVG Data Url][data_url] | Custom Icon |
-| `--icon-compass-north-color` | [Color](color_url) | `rgb(240, 92, 68)` |
-| `--icon-compass-south-color` | [Color](color_url) | `rgb(204, 204, 204)` |
+| `--icon-compass-north-color` | [Color][color_url] | `rgb(240, 92, 68)` |
+| `--icon-compass-south-color` | [Color][color_url] | `rgb(204, 204, 204)` |
 
 [data_url]: https://developer.mozilla.org/en-US/docs/Web/CSS/url#using_a_data_url
 [color_url]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

docs/api-reference/widgets/theme-widget.md

@@ -1,3 +1,4 @@
+import BrowserOnly from '@docusaurus/BrowserOnly';
 import {WidgetPreview} from '@site/src/doc-demos/widgets';
 import {_ThemeWidget} from '@deck.gl/widgets';
 
@@ -12,7 +13,7 @@ This widget changes the theme of deck.gl between light mode and dark mode. Click
 - The `ThemeWidget` is mainly intended for minimal applications and to help developers test theme changes. More advanced applications that already support theming in their non-Deck UI will likely want to control change of deck themes using the same mechanism that is used for the remainder of their UI.
   :::
 
-<WidgetPreview cls={_ThemeWidget}/>
+<BrowserOnly>{() => <WidgetPreview cls={_ThemeWidget}/>}</BrowserOnly>
 
 ```ts
 import {_ThemeWidget as ThemeWidget} from '@deck.gl/widgets';

package.json

@@ -28,6 +28,7 @@
     "start": "open https://deck.gl/docs/get-started/getting-started",
     "test": "ocular-test",
     "test-fast": "ocular-lint && ocular-test node",
+    "test-website": "cd website && yarn && yarn test-build && cd ..",
     "metrics": "ocular-metrics",
     "link-luma": "yarn && (cd node_modules && mv luma.gl luma.orig && ln -s ../../luma.gl/modules/core)",
     "unlink-luma": "(cd node_modules && mv luma.gl luma.ln && mv luma.orig luma.gl)",

website/package.json

@@ -8,6 +8,7 @@
     "start": "docusaurus start",
     "build": "./scripts/build.sh prod",
     "build-staging": "./scripts/build.sh staging",
+    "test-build": "./scripts/test-build.sh",
     "swizzle": "docusaurus swizzle",
     "clear": "docusaurus clear",
     "serve": "docusaurus serve",

website/scripts/test-build.sh

@@ -0,0 +1,24 @@
+#!/bin/bash
+set -e
+
+# Set dummy environment variables for build
+export GoogleMapsAPIKey="dummy-google-maps-api-key"
+export GoogleMapsMapId="dummy-google-maps-map-id"
+export MapboxAccessToken="dummy-mapbox-access-token"
+
+# rebuild modules from source
+(
+  cd ..
+  yarn build
+)
+
+# clean up cache
+docusaurus clear
+docusaurus build
+
+# build gallery (scripting) examples
+(
+  cd ../examples/gallery
+  yarn
+  yarn build
+)