From c8c9e33647e8c4afd11bcda0ec2c7973e2aa0418 Mon Sep 17 00:00:00 2001 From: si1k <19499950+si1k@users.noreply.github.com> Date: Wed, 8 Jun 2022 23:11:26 -0400 Subject: [PATCH 1/6] Add custom logo to header --- components/NotionPageHeader.tsx | 58 +++++++++++++++++++++++++++++++-- lib/config.ts | 10 ++++++ lib/site-config.ts | 3 ++ site.config.ts | 4 +++ 4 files changed, 73 insertions(+), 2 deletions(-) diff --git a/components/NotionPageHeader.tsx b/components/NotionPageHeader.tsx index 64583055c6..2d923fec15 100644 --- a/components/NotionPageHeader.tsx +++ b/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 ( + + {props.children} + + ) + } + return props.children + } + + return ( + + logo + + ) +} + export const NotionPageHeader: React.FC<{ block: types.CollectionViewPageBlock | types.PageBlock }> = ({ block }) => { @@ -44,7 +94,11 @@ export const NotionPageHeader: React.FC<{ return (
- + {customHeaderLogo ? ( + + ) : ( + + )}
{navigationLinks diff --git a/lib/config.ts b/lib/config.ts index cc9cbf2dd9..a33ed91f83 100644 --- a/lib/config.ts +++ b/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', diff --git a/lib/site-config.ts b/lib/site-config.ts index 61552d56a4..47dc74da56 100644 --- a/lib/site-config.ts +++ b/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 diff --git a/site.config.ts b/site.config.ts index f17107c6c1..222d3d7ab4 100644 --- a/site.config.ts +++ b/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, From 940986dd1106aa9c04cbb05899b89bc350c85620 Mon Sep 17 00:00:00 2001 From: si1k <19499950+si1k@users.noreply.github.com> Date: Wed, 8 Jun 2022 23:21:20 -0400 Subject: [PATCH 2/6] Updating logo example links --- site.config.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site.config.ts b/site.config.ts index 222d3d7ab4..8f9808d8b9 100644 --- a/site.config.ts +++ b/site.config.ts @@ -24,8 +24,8 @@ export default siteConfig({ // 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', + // 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 From e5ab72996413d7a1d2464d492b0c4ac796de1de2 Mon Sep 17 00:00:00 2001 From: si1k <19499950+si1k@users.noreply.github.com> Date: Wed, 8 Jun 2022 23:46:00 -0400 Subject: [PATCH 3/6] Adding padding to remove shift from class removal --- components/NotionPageHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/NotionPageHeader.tsx b/components/NotionPageHeader.tsx index 2d923fec15..b1a527a841 100644 --- a/components/NotionPageHeader.tsx +++ b/components/NotionPageHeader.tsx @@ -62,7 +62,7 @@ export const HeaderLogo: React.FC<{ ) } - return props.children + return {props.children} } return ( From f354b02c639bce3f6c39361d5c115492ca8845b8 Mon Sep 17 00:00:00 2001 From: si1k <19499950+si1k@users.noreply.github.com> Date: Thu, 9 Jun 2022 10:26:54 -0400 Subject: [PATCH 4/6] Adding flex style to root page logo --- components/NotionPageHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/NotionPageHeader.tsx b/components/NotionPageHeader.tsx index b1a527a841..b727a5d6e6 100644 --- a/components/NotionPageHeader.tsx +++ b/components/NotionPageHeader.tsx @@ -62,7 +62,7 @@ export const HeaderLogo: React.FC<{ ) } - return {props.children} + return {props.children} } return ( From 732b7c27e887eb21ded232dfde6b0d09854bb04c Mon Sep 17 00:00:00 2001 From: si1k <19499950+si1k@users.noreply.github.com> Date: Fri, 10 Jun 2022 17:49:49 -0400 Subject: [PATCH 5/6] Update html element --- components/NotionPageHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/NotionPageHeader.tsx b/components/NotionPageHeader.tsx index b727a5d6e6..e408c4d0ff 100644 --- a/components/NotionPageHeader.tsx +++ b/components/NotionPageHeader.tsx @@ -62,7 +62,7 @@ export const HeaderLogo: React.FC<{ ) } - return {props.children} + return
{props.children}
} return ( From 2833a9397441cb1d09b93d89e29e7d22aec53f70 Mon Sep 17 00:00:00 2001 From: si1k <19499950+si1k@users.noreply.github.com> Date: Sat, 11 Jun 2022 10:24:28 -0400 Subject: [PATCH 6/6] Adding comment for custom logo --- site.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site.config.ts b/site.config.ts index 8f9808d8b9..26bd6876ac 100644 --- a/site.config.ts +++ b/site.config.ts @@ -23,7 +23,7 @@ export default siteConfig({ // newsletter: '#', // optional newsletter URL // youtube: '#', // optional youtube channel name or `channel/UCGbXXXXXXXXXXXXXXXXXXXXXX` - // Custom logo - this will replace the breadcrumbs + // 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