From 3e6af40184fe10564f918453f33d64fa0182fae1 Mon Sep 17 00:00:00 2001 From: Louis Escher Date: Sat, 9 Nov 2024 14:46:26 +0100 Subject: [PATCH] Add fallback image for login page - Adds a fallback image that displays when the Three.js context fails to render. --- .vscode/settings.json | 3 +- .../src/components/StudioCMSLogoSVG.astro | 13 +++++++ packages/studiocms_auth/src/integration.ts | 1 + .../src/layouts/AuthLayout.astro | 36 ++++++++++++++++-- .../studiocms_auth/src/layouts/authlayout.css | 28 ++++++++++++++ packages/studiocms_auth/src/scripts/three.ts | 37 ++---------------- .../studiocms_auth/src/utils/validImages.ts | 38 +++++++++++++++++++ packages/studiocms_auth/virtuals.d.ts | 4 ++ .../public/studiocms-auth/logo-adaptive.svg | 5 +++ 9 files changed, 128 insertions(+), 37 deletions(-) create mode 100644 packages/studiocms_auth/src/components/StudioCMSLogoSVG.astro create mode 100644 packages/studiocms_auth/src/utils/validImages.ts create mode 100644 playgrounds/node/public/studiocms-auth/logo-adaptive.svg diff --git a/.vscode/settings.json b/.vscode/settings.json index 450627957..44fcf1104 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -7,5 +7,6 @@ "editor.defaultFormatter": "biomejs.biome", "[mdx]": { "editor.defaultFormatter": "esbenp.prettier-vscode" - } + }, + "editor.gotoLocation.multipleDefinitions": "goto" } diff --git a/packages/studiocms_auth/src/components/StudioCMSLogoSVG.astro b/packages/studiocms_auth/src/components/StudioCMSLogoSVG.astro new file mode 100644 index 000000000..639329a7c --- /dev/null +++ b/packages/studiocms_auth/src/components/StudioCMSLogoSVG.astro @@ -0,0 +1,13 @@ +--- +import type { HTMLAttributes } from 'astro/types'; + +interface Props extends HTMLAttributes<'svg'> {} + +const { class: className } = Astro.props; +--- + + + + + + diff --git a/packages/studiocms_auth/src/integration.ts b/packages/studiocms_auth/src/integration.ts index 1a3fabdee..9d2471ac6 100644 --- a/packages/studiocms_auth/src/integration.ts +++ b/packages/studiocms_auth/src/integration.ts @@ -70,6 +70,7 @@ export default defineIntegration({ 'studiocms:auth/lib/types': `export * from '${resolve('./lib/types.ts')}'`, 'studiocms:auth/lib/user': `export * from '${resolve('./lib/user.ts')}'`, 'studiocms:auth/utils/authEnvCheck': `export * from '${resolve('./utils/authEnvCheck.ts')}'`, + 'studiocms:auth/utils/validImages': `export * from '${resolve('./utils/validImages.ts')}'`, 'studiocms:auth/scripts/three': `import ${JSON.stringify(resolve('./scripts/three.ts'))}`, 'studiocms:auth/scripts/formListener': `export * from '${resolve('./scripts/formListener.ts')}'`, }, diff --git a/packages/studiocms_auth/src/layouts/AuthLayout.astro b/packages/studiocms_auth/src/layouts/AuthLayout.astro index dfdd24e87..e378f984b 100644 --- a/packages/studiocms_auth/src/layouts/AuthLayout.astro +++ b/packages/studiocms_auth/src/layouts/AuthLayout.astro @@ -2,7 +2,9 @@ import '@fontsource-variable/onest/index.css'; import '@studiocms/ui/css/global.css'; import './authlayout.css'; +import { Image } from 'astro:assets'; import { db, eq } from 'astro:db'; +import { validImages } from 'studiocms:auth/utils/validImages'; import Config from 'virtual:studiocms/config'; import version from 'virtual:studiocms/version'; import onestWoff2 from '@fontsource-variable/onest/files/onest-latin-wght-normal.woff2?url'; @@ -10,6 +12,7 @@ import { CMSSiteConfigId } from '@studiocms/core/consts'; import { tsSiteConfig } from '@studiocms/core/db/tsTables'; import { Toaster } from '@studiocms/ui/components'; import OAuthButtonStack from '../components/OAuthButtonStack.astro'; +import StudioCMSLogoSVG from '../components/StudioCMSLogoSVG.astro'; const { dashboardConfig: { faviconURL }, @@ -33,6 +36,10 @@ const siteConfig = await db // Get the login page background and custom image from the site config const loginPageBackground = siteConfig?.loginPageBackground; const loginPageCustomImage = siteConfig?.loginPageCustomImage; + +const fallbackImageSrc = loginPageBackground === 'custom' + ? loginPageCustomImage + : validImages.find((x) => x.name !== 'custom' && x.name === loginPageBackground)?.dark; // TODO: Adapt to theme --- @@ -50,7 +57,30 @@ const loginPageCustomImage = siteConfig?.loginPageCustomImage;
-
+
+
+
+