From 7cc1fd58357eccbb8a504e837bdcc07781ec0cc2 Mon Sep 17 00:00:00 2001 From: javayhu Date: Tue, 26 Aug 2025 00:16:55 +0800 Subject: [PATCH] refactor: update website configuration structure to use 'ui' instead of 'metadata' for theme and mode settings --- src/app/[locale]/providers.tsx | 2 +- src/components/dashboard/sidebar-user.tsx | 2 +- src/components/layout/active-theme-provider.tsx | 2 +- src/components/layout/mode-switcher-horizontal.tsx | 2 +- src/components/layout/mode-switcher.tsx | 2 +- src/components/layout/theme-selector.tsx | 2 +- src/config/website.tsx | 4 +++- src/types/index.d.ts | 11 +++++++++-- 8 files changed, 18 insertions(+), 9 deletions(-) diff --git a/src/app/[locale]/providers.tsx b/src/app/[locale]/providers.tsx index 76ebae3..c3e89a9 100644 --- a/src/app/[locale]/providers.tsx +++ b/src/app/[locale]/providers.tsx @@ -29,7 +29,7 @@ interface ProvidersProps { */ export function Providers({ children, locale }: ProvidersProps) { const theme = useTheme(); - const defaultMode = websiteConfig.metadata.mode?.defaultMode ?? 'system'; + const defaultMode = websiteConfig.ui.mode?.defaultMode ?? 'system'; // available languages that will be displayed in the docs UI // make sure `locale` is consistent with your i18n config diff --git a/src/components/dashboard/sidebar-user.tsx b/src/components/dashboard/sidebar-user.tsx index 6a0831a..11317b4 100644 --- a/src/components/dashboard/sidebar-user.tsx +++ b/src/components/dashboard/sidebar-user.tsx @@ -71,7 +71,7 @@ export function SidebarUser({ user, className }: SidebarUserProps) { }); }; - const showModeSwitch = websiteConfig.metadata.mode?.enableSwitch ?? false; + const showModeSwitch = websiteConfig.ui.mode?.enableSwitch ?? false; const showLocaleSwitch = LOCALES.length > 1; const handleSignOut = async () => { diff --git a/src/components/layout/active-theme-provider.tsx b/src/components/layout/active-theme-provider.tsx index 412e553..616677a 100644 --- a/src/components/layout/active-theme-provider.tsx +++ b/src/components/layout/active-theme-provider.tsx @@ -10,7 +10,7 @@ import { } from 'react'; const COOKIE_NAME = 'active_theme'; -const DEFAULT_THEME = websiteConfig.metadata.theme?.defaultTheme ?? 'default'; +const DEFAULT_THEME = websiteConfig.ui.theme?.defaultTheme ?? 'default'; function setThemeCookie(theme: string) { if (typeof window === 'undefined') return; diff --git a/src/components/layout/mode-switcher-horizontal.tsx b/src/components/layout/mode-switcher-horizontal.tsx index 0c707cf..e7f3dc7 100644 --- a/src/components/layout/mode-switcher-horizontal.tsx +++ b/src/components/layout/mode-switcher-horizontal.tsx @@ -12,7 +12,7 @@ import { useEffect, useState } from 'react'; * Mode switcher component, used in the footer */ export function ModeSwitcherHorizontal() { - if (!websiteConfig.metadata.mode?.enableSwitch) { + if (!websiteConfig.ui.mode?.enableSwitch) { return null; } diff --git a/src/components/layout/mode-switcher.tsx b/src/components/layout/mode-switcher.tsx index 323d413..d98d1b9 100644 --- a/src/components/layout/mode-switcher.tsx +++ b/src/components/layout/mode-switcher.tsx @@ -16,7 +16,7 @@ import { useTheme } from 'next-themes'; * Mode switcher component, used in the navbar */ export function ModeSwitcher() { - if (!websiteConfig.metadata.mode?.enableSwitch) { + if (!websiteConfig.ui.mode?.enableSwitch) { return null; } diff --git a/src/components/layout/theme-selector.tsx b/src/components/layout/theme-selector.tsx index ba8af28..2894fcb 100644 --- a/src/components/layout/theme-selector.tsx +++ b/src/components/layout/theme-selector.tsx @@ -21,7 +21,7 @@ import { useThemeConfig } from './active-theme-provider'; * https://github.com/TheOrcDev/orcish-dashboard/blob/main/components/theme-selector.tsx */ export function ThemeSelector() { - if (!websiteConfig.metadata.theme?.enableSwitch) { + if (!websiteConfig.ui.theme?.enableSwitch) { return null; } diff --git a/src/config/website.tsx b/src/config/website.tsx index cbfa9e7..d7a4e71 100644 --- a/src/config/website.tsx +++ b/src/config/website.tsx @@ -8,7 +8,7 @@ import type { WebsiteConfig } from '@/types'; * https://mksaas.com/docs/config/website */ export const websiteConfig: WebsiteConfig = { - metadata: { + ui: { theme: { defaultTheme: 'default', enableSwitch: true, @@ -17,6 +17,8 @@ export const websiteConfig: WebsiteConfig = { defaultMode: 'dark', enableSwitch: true, }, + }, + metadata: { images: { ogImage: '/og.png', logoLight: '/logo.png', diff --git a/src/types/index.d.ts b/src/types/index.d.ts index beb7ac7..ac93681 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -6,6 +6,7 @@ import type { CreditPackage } from '@/credits/types'; * website config, without translations */ export type WebsiteConfig = { + ui: UiConfig; metadata: MetadataConfig; features: FeaturesConfig; routes: RoutesConfig; @@ -22,12 +23,18 @@ export type WebsiteConfig = { credits: CreditsConfig; }; +/** + * UI configuration + */ +export interface UiConfig { + mode?: ModeConfig; + theme?: ThemeConfig; +} + /** * Website metadata */ export interface MetadataConfig { - mode?: ModeConfig; - theme?: ThemeConfig; images?: ImagesConfig; social?: SocialConfig; }