diff --git a/.buildkite/pipelines/pipeline_pull_request_deploy_docs.yml b/.buildkite/pipelines/pipeline_pull_request_deploy_docs.yml index 8818540c9a6..3fed2071444 100644 --- a/.buildkite/pipelines/pipeline_pull_request_deploy_docs.yml +++ b/.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" diff --git a/.buildkite/pipelines/pipeline_pull_request_test_and_deploy.yml b/.buildkite/pipelines/pipeline_pull_request_test_and_deploy.yml index 8322fcbfbe5..a5cf3680715 100644 --- a/.buildkite/pipelines/pipeline_pull_request_test_and_deploy.yml +++ b/.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}" diff --git a/.buildkite/scripts/pipelines/pipeline_deploy_new_docs.sh b/.buildkite/scripts/pipelines/pipeline_deploy_new_docs.sh new file mode 100644 index 00000000000..6b8ec7ec6a9 --- /dev/null +++ b/.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" diff --git a/packages/docusaurus-theme/src/components/theme_context/index.tsx b/packages/docusaurus-theme/src/components/theme_context/index.tsx index ef5bd903f41..d8a394fc8d5 100644 --- a/packages/docusaurus-theme/src/components/theme_context/index.tsx +++ b/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 = ({ children, }) => { - const savedTheme: EuiThemeColorMode | undefined = - (localStorage.getItem('theme') as EuiThemeColorMode) ?? defaultState.theme; - const [theme, setTheme] = useState(savedTheme); + const isBrowser = useIsBrowser(); + const [theme, setTheme] = useState(() => { + if (isBrowser) { + return localStorage.getItem('theme') as EuiThemeColorMode ?? defaultState.theme; + } + + return defaultState.theme; + }); return (