diff --git a/.gitignore b/.gitignore index 621b88eb6f4..366659551da 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,10 @@ # this file gets generated by make gitref.go + +# logo SVGs are staged from web/packages/design/src/assets/images by the +# Makefile based on the build's edition. +/web/packages/teleport/public/app/logo-light.svg +/web/packages/teleport/public/app/logo-dark.svg .data debug !/lib/srv/debug diff --git a/Makefile b/Makefile index 55f8fbeca6d..17f96f736b4 100644 --- a/Makefile +++ b/Makefile @@ -1850,6 +1850,18 @@ test-compat: .PHONY: ensure-webassets ensure-webassets: +# Stage the logo SVGs the Vite build will compress and embed. Runs before the +# sha check so a change in GITHUB_REPOSITORY_OWNER produces a different web/ +# sha and forces a rebuild. +ifeq ("$(GITHUB_REPOSITORY_OWNER)","gravitational") + @echo "copying teleport logo assets (community)"; + @cp web/packages/design/src/assets/images/community-light.svg web/packages/teleport/public/app/logo-light.svg + @cp web/packages/design/src/assets/images/community-dark.svg web/packages/teleport/public/app/logo-dark.svg +else + @echo "copying teleport logo assets (agpl)"; + @cp web/packages/design/src/assets/images/agpl-light.svg web/packages/teleport/public/app/logo-light.svg + @cp web/packages/design/src/assets/images/agpl-dark.svg web/packages/teleport/public/app/logo-dark.svg +endif @if [[ "${WEBASSETS_SKIP_BUILD}" -eq 1 ]]; then mkdir -p webassets/teleport && mkdir -p webassets/teleport/app && cp web/packages/teleport/index.html webassets/teleport/index.html; \ else MAKE="$(MAKE)" "$(MAKE_DIR)/build.assets/build-webassets-if-changed.sh" OSS webassets/oss-sha build-ui web; fi diff --git a/web/packages/teleport/src/TopBar/TopBar.tsx b/web/packages/teleport/src/TopBar/TopBar.tsx index f17222e8dfc..57da33e9c1b 100644 --- a/web/packages/teleport/src/TopBar/TopBar.tsx +++ b/web/packages/teleport/src/TopBar/TopBar.tsx @@ -24,7 +24,7 @@ import styled, { useTheme } from 'styled-components'; import { breakpointsPx, Flex, Image, TopNav } from 'design'; import { HoverTooltip } from 'design/Tooltip'; -import { logos } from 'teleport/components/LogoHero/LogoHero'; +import { logoSrc } from 'teleport/components/LogoHero/LogoHero'; import { UserMenuNav } from 'teleport/components/UserMenuNav'; import cfg from 'teleport/config'; import { useFeatures } from 'teleport/FeaturesContext'; @@ -95,7 +95,7 @@ const TeleportLogo = ({ CustomLogo?: () => React.ReactElement; }) => { const theme = useTheme(); - const src = logos[cfg.edition][theme.type]; + const src = logoSrc(theme.type); return ( diff --git a/web/packages/teleport/src/components/LogoHero/LogoHero.tsx b/web/packages/teleport/src/components/LogoHero/LogoHero.tsx index 39a0cdeeca4..dda24482051 100644 --- a/web/packages/teleport/src/components/LogoHero/LogoHero.tsx +++ b/web/packages/teleport/src/components/LogoHero/LogoHero.tsx @@ -18,35 +18,17 @@ import { useTheme } from 'styled-components'; -import AGPLLogoDark from 'design/assets/images/agpl-dark.svg'; -import AGPLLogoLight from 'design/assets/images/agpl-light.svg'; -import CommunityLogoDark from 'design/assets/images/community-dark.svg'; -import CommunityLogoLight from 'design/assets/images/community-light.svg'; -import EnterpriseLogoDark from 'design/assets/images/enterprise-dark.svg'; -import EnterpriseLogoLight from 'design/assets/images/enterprise-light.svg'; import Image from 'design/Image'; -import cfg, { TeleportEdition } from 'teleport/config'; - -type LogoMap = { - light: string; - dark: string; -}; - -export const logos: Record = { - oss: { - light: AGPLLogoLight, - dark: AGPLLogoDark, - }, - community: { - light: CommunityLogoLight, - dark: CommunityLogoDark, - }, - ent: { - light: EnterpriseLogoLight, - dark: EnterpriseLogoDark, - }, -}; +// The logo SVG served at this path is selected at build time to match the +// edition of the binary. See the Makefile and the per-edition public/ dirs. +// TODO (avatus): replace the static `v=1` with the Teleport version so the +// URL changes when the binary is upgraded, or just update to v=2 if we ever +// update logos. +export function logoSrc(themeType: 'light' | 'dark'): string { + const base = import.meta.env.MODE === 'development' ? '/app/' : '/web/app/'; + return `${base}logo-${themeType}.svg?v=1`; +} export const LogoHero = ({ my = '48px', @@ -56,7 +38,7 @@ export const LogoHero = ({ customSrc?: string; }) => { const theme = useTheme(); - const src = customSrc || logos[cfg.edition][theme.type]; + const src = customSrc || logoSrc(theme.type); return ( );