feat: add a new setting logo_link (#1070)

packages/core/dev-test/config.yml

@@ -1,5 +1,6 @@
 backend:
   name: test-repo
+logo_link: '/#/page/custom-page'
 site_url: 'https://example.com'
 media_folder: /assets/uploads
 media_library:

packages/core/src/components/navbar/Navbar.tsx

@@ -76,10 +76,23 @@ const Navbar: FC<NavbarProps> = ({
           <div className={classes.breadcrumbs}>
             <div className={classes['logo-wrapper']}>
               {config?.logo_url ? (
-                <div
-                  className={classNames(classes.logo, classes['custom-logo'])}
-                  style={{ backgroundImage: `url('${config.logo_url}')` }}
-                />
+                config.logo_link ? (
+                  <a href={config.logo_link}>
+                    <div
+                      className={classNames(classes.logo, classes['custom-logo'])}
+                      style={{ backgroundImage: `url('${config.logo_url}')` }}
+                    />
+                  </a>
+                ) : (
+                  <div
+                    className={classNames(classes.logo, classes['custom-logo'])}
+                    style={{ backgroundImage: `url('${config.logo_url}')` }}
+                  />
+                )
+              ) : config?.logo_link ? (
+                <a href={config.logo_link}>
+                  <StaticCmsIcon className={classes.logo} />
+                </a>
               ) : (
                 <StaticCmsIcon className={classes.logo} />
               )}

packages/core/src/constants/configSchema.tsx

@@ -488,6 +488,7 @@ function getConfigSchema() {
       display_url: { type: 'string', examples: ['https://example.com'] },
       base_url: { type: 'string' },
       logo_url: { type: 'string', examples: ['https://example.com/images/logo.svg'] },
+      logo_link: { type: 'string', examples: ['https://example.com'] },
       media_folder: { type: 'string', examples: ['assets/uploads'] },
       public_folder: { type: 'string', examples: ['/uploads'] },
       media_folder_relative: { type: 'boolean' },

packages/core/src/interface.ts

@@ -1047,6 +1047,7 @@ export interface Config<EF extends BaseField = UnknownField> {
   display_url?: string;
   base_url?: string;
   logo_url?: string;
+  logo_link?: string;
   media_folder?: string;
   public_folder?: string;
   media_folder_relative?: boolean;

packages/docs/content/docs/configuration-options.mdx

@@ -203,16 +203,19 @@ display_url: 'https://your-site.com',
 ## Custom Logo
 
 When the `logo_url` setting is specified, the Static CMS UI will change the logo displayed at the top of the login page, allowing you to brand Static CMS with your own logo. `logo_url` is assumed to be a URL to an image file.
+When the `logo_link` setting is specified, the Static CMS UI will wrap the logo in a link, allowing you to make the logo clickable. `logo_link` can be a URL to an external page or an address of one of Static CMS pages giving you a quick link to your favourite page.
 
 **Example:**
 
 <CodeTabs>
 ```yaml
 logo_url: https://your-site.com/images/logo.svg
+logo_link: https://your-site.com
 ```
 
 ```js
 logo_url: 'https://your-site.com/images/logo.svg',
+logo_link: 'https://your-site.com',
 ```
 
 </CodeTabs>