diff --git a/.changeset/light-grapes-march.md b/.changeset/light-grapes-march.md new file mode 100644 index 000000000..0ff68da27 --- /dev/null +++ b/.changeset/light-grapes-march.md @@ -0,0 +1,5 @@ +--- +'@blinkk/root-cms': patch +--- + +feat: add minimalBranding option for cms (#915) diff --git a/packages/root-cms/core/app.tsx b/packages/root-cms/core/app.tsx index 36a5fb50d..f326e5667 100644 --- a/packages/root-cms/core/app.tsx +++ b/packages/root-cms/core/app.tsx @@ -100,6 +100,7 @@ export async function renderApp( rootConfig: { projectId: cmsConfig.id || 'default', projectName: cmsConfig.name || cmsConfig.id || '', + minimalBranding: cmsConfig.minimalBranding ?? false, domain: rootConfig.domain || 'https://example.com', base: rootConfig.base || '/', gci: gci, diff --git a/packages/root-cms/core/plugin.ts b/packages/root-cms/core/plugin.ts index 35698516e..4e70974ab 100644 --- a/packages/root-cms/core/plugin.ts +++ b/packages/root-cms/core/plugin.ts @@ -218,6 +218,12 @@ export type CMSPluginOptions = { */ favicon?: string; + /** + * Enables minimal branding mode in the CMS header. This hides the Root CMS + * logo and displays the project name on the top-right. + */ + minimalBranding?: boolean; + /** * Callback when an action occurs. */ diff --git a/packages/root-cms/ui/layout/Layout.css b/packages/root-cms/ui/layout/Layout.css index 6bb4bc660..f578b6d5f 100644 --- a/packages/root-cms/ui/layout/Layout.css +++ b/packages/root-cms/ui/layout/Layout.css @@ -17,11 +17,10 @@ } .Layout__top__logo { - font-size: 14px; + font-size: 15px; line-height: 1; font-weight: 700; text-decoration: none; - text-transform: uppercase; padding: 4px 10px; display: flex; gap: 4px; @@ -47,6 +46,10 @@ margin-left: 16px; } +.Layout__top__project--minimal { + margin-left: auto; +} + .Layout__top__logo:hover { background-color: var(--button-background-hover); } diff --git a/packages/root-cms/ui/layout/Layout.tsx b/packages/root-cms/ui/layout/Layout.tsx index 4d78ed28b..1071af547 100644 --- a/packages/root-cms/ui/layout/Layout.tsx +++ b/packages/root-cms/ui/layout/Layout.tsx @@ -45,16 +45,27 @@ export function Layout(props: LayoutProps) { } Layout.Top = () => { - const projectName = - window.__ROOT_CTX.rootConfig.projectName || - window.__ROOT_CTX.rootConfig.projectId; + const rootConfig = window.__ROOT_CTX.rootConfig; + const projectName = rootConfig.projectName || rootConfig.projectId; + const minimalBranding = rootConfig.minimalBranding; return (
- - - -
v{packageJson.version}
-
{projectName}
+ {!minimalBranding ? ( + <> + + + +
v{packageJson.version}
+
{projectName}
+ + ) : ( + <> + + {projectName} + +
v{packageJson.version}
+ + )}
); }; diff --git a/packages/root-cms/ui/ui.tsx b/packages/root-cms/ui/ui.tsx index 8c1c78b65..6866b4295 100644 --- a/packages/root-cms/ui/ui.tsx +++ b/packages/root-cms/ui/ui.tsx @@ -59,6 +59,7 @@ declare global { rootConfig: { projectId: string; projectName: string; + minimalBranding: boolean; domain: string; base: string; gci: string | boolean;