ci: add buildkite step to build new docs website (#7850)

.buildkite/pipelines/pipeline_pull_request_deploy_docs.yml

@@ -1,7 +1,15 @@
 ## 🏠/.buildkite/pipelines/pipeline_pull_request_deploy_docs.yml
 
 steps:
-  - agents:
+  - command: .buildkite/scripts/pipelines/pipeline_deploy_docs.sh
+    label: ":newspaper: Build and deploy EUI documentation website"
+    agents:
       provider: "gcp"
-    command: .buildkite/scripts/pipelines/pipeline_deploy_docs.sh
     if: build.branch != "main" # We don't want to deploy docs on main, only on manual release
+  - command: .buildkite/scripts/pipelines/pipeline_deploy_new_docs.sh
+    label: ":docusaurus: Build and deploy new documentation website"
+    agents:
+      provider: gcp
+      machineType: "n2-standard-2"
+      image: "family/eui-ubuntu-2204"
+    if: build.branch != "main"

.buildkite/pipelines/pipeline_pull_request_test_and_deploy.yml

@@ -9,8 +9,11 @@ steps:
   - trigger: "eui-pull-request-deploy-docs"
     label: ":newspaper: EUI pull request deploy docs"
     build:
+      message: "${BUILDKITE_MESSAGE}"
       branch: "${BUILDKITE_BRANCH}"
       commit: "${BUILDKITE_COMMIT}"
       env:
+        BUILDKITE_PULL_REQUEST: "${BUILDKITE_PULL_REQUEST}"
+        BUILDKITE_PULL_REQUEST_BASE_BRANCH: "${BUILDKITE_PULL_REQUEST_BASE_BRANCH}"
         GIT_BRANCH: "${BUILDKITE_BRANCH}"
         GIT_PULL_REQUEST_ID: "${BUILDKITE_PULL_REQUEST}"

.buildkite/scripts/pipelines/pipeline_deploy_new_docs.sh

@@ -0,0 +1,65 @@
+#!/bin/bash
+# Build and deploy new documentation website
+
+set -eo pipefail
+
+# include .bash_profile and utils
+source ~/.bash_profile
+source .buildkite/scripts/common/utils.sh
+
+# Enable corepack to expose yarn cli command
+corepack enable
+
+# Print out debug information
+echo "Node.js version: $(node -v)"
+echo "Yarn version: $(yarn -v)"
+
+# Calculate paths and directories
+if [[ -n "${BUILDKITE_PULL_REQUEST}" ]] && [[ "${BUILDKITE_PULL_REQUEST}" != "false" ]]; then
+  bucket_directory="pr_${BUILDKITE_PULL_REQUEST}/new-docs/"
+  echo "Detected a PR preview environment configuration. The built files will be copied to ${bucket_directory}"
+else
+  echo "The script has been triggered with no pull request or tag information. This is a no-op."
+  exit 1
+fi
+
+echo "+++ :yarn: Installing dependencies"
+yarn
+
+echo "+++ :yarn: Building @elastic/eui-website and its local dependencies"
+
+# Pass base url to docusaurus. It must have a leading and trailing slash included.
+export DOCS_BASE_URL="/${bucket_directory}"
+
+yarn workspaces foreach -Rpt --from @elastic/eui-website run build
+
+echo "+++ Configuring environment for website deployment"
+
+gcloud auth activate-service-account --key-file <(echo "${GCE_ACCOUNT}")
+unset GCE_ACCOUNT
+
+storage_vault="secret/ci/elastic-eui/website-storage-bucket"
+GCLOUD_PROJECT="$(retry 5 vault read -field=google_cloud_project "${storage_vault}")"
+GCLOUD_BUCKET="$(retry 5 vault read -field=google_cloud_bucket "${storage_vault}")"
+GCLOUD_BUCKET_FULL="${GCLOUD_PROJECT}-${GCLOUD_BUCKET}"
+
+GCLOUD_CP_ARGS=(
+  --cache-control="public, max-age=1800, must-revalidate" # set caching policy
+  --recursive # copy all files recursively
+  --predefined-acl="publicRead" # ensure copied files are publicly accessible
+  --gzip-local="js,css,html,svg,png,jpg,ico" # gzip these file extensions before copying to the bucket
+)
+
+# Copy files to the GCS bucket
+
+echo "+++ :bucket: Copying built files to the bucket"
+
+# additional protection layer in case bucket_directory is ever unset
+if [[ -z "${bucket_directory}" ]]; then
+  bucket_directory="new-docs/"
+fi
+
+echo "Beginning to copy built files to /${bucket_directory}"
+gcloud storage cp "${GCLOUD_CP_ARGS[@]}" packages/website/build/* "gs://${GCLOUD_BUCKET_FULL}/${bucket_directory}"
+
+echo "New documentation website deployed: https://eui.elastic.co/${bucket_directory}" | buildkite-agent annotate --style "success" --context "deployed"

packages/docusaurus-theme/src/components/theme_context/index.tsx

@@ -4,6 +4,7 @@ import {
   PropsWithChildren,
   useState,
 } from 'react';
+import useIsBrowser from '@docusaurus/useIsBrowser';
 import { EUI_THEMES, EuiProvider, EuiThemeColorMode } from '@elastic/eui';
 
 import { EuiThemeOverrides } from './theme_overrides';
@@ -13,7 +14,7 @@ const EUI_THEME_NAMES = EUI_THEMES.map(
 ) as EuiThemeColorMode[];
 
 const defaultState = {
-  theme: EUI_THEME_NAMES[0],
+  theme: EUI_THEME_NAMES[0] as EuiThemeColorMode,
   changeTheme: (themeValue: EuiThemeColorMode) => {},
 };
 
@@ -22,9 +23,14 @@ export const AppThemeContext = createContext(defaultState);
 export const AppThemeProvider: FunctionComponent<PropsWithChildren> = ({
   children,
 }) => {
-  const savedTheme: EuiThemeColorMode | undefined =
-    (localStorage.getItem('theme') as EuiThemeColorMode) ?? defaultState.theme;
-  const [theme, setTheme] = useState<EuiThemeColorMode>(savedTheme);
+  const isBrowser = useIsBrowser();
+  const [theme, setTheme] = useState<EuiThemeColorMode>(() => {
+    if (isBrowser) {
+      return localStorage.getItem('theme') as EuiThemeColorMode ?? defaultState.theme;
+    }
+
+    return defaultState.theme;
+  });
 
   return (
     <AppThemeContext.Provider

packages/eui/scripts/deploy/deploy_docs

@@ -58,7 +58,8 @@ post_comment_to_gh()
     printf '\nAdding comment to GitHub Pull Request: %i\n' "${GIT_PULL_REQUEST_ID}"
     comment="Preview staging links for this PR:
 - Docs site: https://eui.elastic.co/pr_${GIT_PULL_REQUEST_ID}/
-- Storybook: https://eui.elastic.co/pr_${GIT_PULL_REQUEST_ID}/storybook"
+- Storybook: https://eui.elastic.co/pr_${GIT_PULL_REQUEST_ID}/storybook
+- New docs: https://eui.elastic.co/pr_${GIT_PULL_REQUEST_ID}/new-docs"
 
     curl \
       --silent \