Merge branch 'pr/325'

Author: theoffbeatdoc

components/NotionPageHeader.tsx

@@ -1,13 +1,20 @@
 import * as React from 'react'
-
-import * as types from 'notion-types'
-import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp'
-import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
 import cs from 'classnames'
-import { Breadcrumbs, Header, Search, useNotionContext } from 'react-notion-x'
+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 { isSearchEnabled, navigationLinks, navigationStyle } from '@/lib/config'
-import { useDarkMode } from '@/lib/use-dark-mode'
+import { useDarkMode } from 'lib/use-dark-mode'
+import {
+  navigationStyle,
+  navigationLinks,
+  isSearchEnabled,
+  customHeaderLogo,
+  customHeaderLogoDark,
+  rootNotionPageId
+} from 'lib/config'
 
 import styles from './styles.module.css'
 
@@ -33,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 <div style={{ padding: 12, display: 'flex' }}>{props.children}</div>
+  }
+
+  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 }) => {
@@ -45,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

@@ -62,16 +62,15 @@ export const linkedin: string | null = getSiteConfig('linkedin', null)
 export const newsletter: string | null = getSiteConfig('newsletter', null)
 export const zhihu: string | null = getSiteConfig('zhihu', null)
 
-export const getMastodonHandle = (): string | null => {
-  if (!mastodon) {
-    return null
-  }
-
-  // Since Mastodon is decentralized, handles include the instance domain name.
-  // e.g. @example@mastodon.social
-  const url = new URL(mastodon)
-  return `${url.pathname.slice(1)}@${url.hostname}`
-}
+// 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(

lib/site-config.ts

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

site.config.ts

@@ -24,6 +24,10 @@ export default siteConfig({
   // newsletter: '#', // optional newsletter URL
   // youtube: '#', // optional youtube channel name or `channel/UCGbXXXXXXXXXXXXXXXXXXXXXX`
 
+  // Custom logo - this will replace the breadcrumbs - Feature requires navigationStyle: 'custom'
+  // customHeaderLogo: 'https://transitivebullsh.it/logo.png',
+  // customHeaderLogoDark: 'https://transitivebullsh.it/logo-dark.png', // optional
+
   // default notion icon and cover images for site-wide consistency (optional)
   // page-specific values will override these site-wide defaults
   defaultPageIcon: null,