Add custom logo to header

Author: si1k

components/NotionPageHeader.tsx

@@ -4,9 +4,17 @@ import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
 import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp'
 import { Header, Breadcrumbs, Search, useNotionContext } from 'react-notion-x'
 import * as types from 'notion-types'
+import Image from 'next/image'
 
 import { useDarkMode } from 'lib/use-dark-mode'
-import { navigationStyle, navigationLinks, isSearchEnabled } from 'lib/config'
+import {
+  navigationStyle,
+  navigationLinks,
+  isSearchEnabled,
+  customHeaderLogo,
+  customHeaderLogoDark,
+  rootNotionPageId
+} from 'lib/config'
 
 import styles from './styles.module.css'
 
@@ -32,6 +40,48 @@ const ToggleThemeButton = () => {
   )
 }
 
+export const HeaderLogo: React.FC<{
+  block: types.CollectionViewPageBlock | types.PageBlock
+}> = ({ block }) => {
+  const { components, mapPageUrl } = useNotionContext()
+
+  const { isDarkMode } = useDarkMode()
+
+  const LinkWrapper = (props: {
+    currentPage: string
+    children: JSX.Element
+  }) => {
+    if (props.currentPage !== '/') {
+      return (
+        <components.PageLink
+          href={mapPageUrl(rootNotionPageId)}
+          key={0}
+          className={cs(styles.navLink, 'breadcrumb', 'button')}
+        >
+          {props.children}
+        </components.PageLink>
+      )
+    }
+    return props.children
+  }
+
+  return (
+    <LinkWrapper currentPage={mapPageUrl(block.id)}>
+      <Image
+        src={
+          isDarkMode && customHeaderLogoDark
+            ? customHeaderLogoDark
+            : customHeaderLogo
+        }
+        width='100%'
+        height='100%'
+        objectFit='contain'
+        alt='logo'
+      />
+    </LinkWrapper>
+  )
+}
+
 export const NotionPageHeader: React.FC<{
   block: types.CollectionViewPageBlock | types.PageBlock
 }> = ({ block }) => {
@@ -44,7 +94,11 @@ export const NotionPageHeader: React.FC<{
   return (
     <header className='notion-header'>
       <div className='notion-nav-header'>
-        <Breadcrumbs block={block} rootOnly={true} />
+        {customHeaderLogo ? (
+          <HeaderLogo block={block} />
+        ) : (
+          <Breadcrumbs block={block} rootOnly={true} />
+        )}
 
         <div className='notion-nav-header-rhs breadcrumbs'>
           {navigationLinks

lib/config.ts

@@ -61,6 +61,16 @@ export const linkedin: string | null = getSiteConfig('linkedin', null)
 export const newsletter: string | null = getSiteConfig('newsletter', null)
 export const zhihu: string | null = getSiteConfig('zhihu', null)
 
+// default logo values
+export const customHeaderLogo: string | null = getSiteConfig(
+  'customHeaderLogo',
+  null
+)
+export const customHeaderLogoDark: string | null = getSiteConfig(
+  'customHeaderLogoDark',
+  null
+)
+
 // default notion values for site-wide consistency (optional; may be overridden on a per-page basis)
 export const defaultPageIcon: string | null = getSiteConfig(
   'defaultPageIcon',

lib/site-config.ts

@@ -17,6 +17,9 @@ export interface SiteConfig {
   youtube?: string
   zhihu?: string
 
+  customHeaderLogo?: string | null
+  customHeaderLogoDark?: string | null
+
   defaultPageIcon?: string | null
   defaultPageCover?: string | null
   defaultPageCoverPosition?: number | null

site.config.ts

@@ -23,6 +23,10 @@ export default siteConfig({
   // newsletter: '#', // optional newsletter URL
   // youtube: '#', // optional youtube channel name or `channel/UCGbXXXXXXXXXXXXXXXXXXXXXX`
 
+  // Custom logo - this will replace the breadcrumbs
+  // customHeaderLogo: 'https://cdn.logo.com/hotlink-ok/logo-social.png',
+  // customHeaderLogoDark: 'https://alexchaveriat-com.vercel.app/logo-dark.png',
+
   // default notion icon and cover images for site-wide consistency (optional)
   // page-specific values will override these site-wide defaults
   defaultPageIcon: null,