feat: fix dark mode; minor optimizations

Author: transitive-bullshit

components/NotionPage.tsx

@@ -18,7 +18,6 @@ import { NotionRenderer } from 'react-notion-x'
 import { getBlockTitle, getPageProperty, formatDate } from 'notion-utils'
 import { mapPageUrl, getCanonicalPageUrl } from 'lib/map-page-url'
 import { mapImageUrl } from 'lib/map-image-url'
-import { getPageTweet } from 'lib/get-page-tweet'
 import { searchNotion } from 'lib/search-notion'
 import * as types from 'lib/types'
 import * as config from 'lib/config'
@@ -27,9 +26,8 @@ import * as config from 'lib/config'
 import { Loading } from './Loading'
 import { Page404 } from './Page404'
 import { PageHead } from './PageHead'
-import { PageActions } from './PageActions'
+import { PageAside } from './PageAside'
 import { Footer } from './Footer'
-import { PageSocial } from './PageSocial'
 import { NotionPageHeader } from './NotionPageHeader'
 import { GitHubShareButton } from './GitHubShareButton'
 
@@ -180,6 +178,7 @@ export const NotionPage: React.FC<types.PageProps> = ({
   const isLiteMode = lite === 'true'
 
   const { resolvedTheme } = useTheme()
+  const isDarkMode = resolvedTheme === 'dark'
 
   const siteMapPageUrl = React.useMemo(() => {
     const params: any = {}
@@ -189,14 +188,30 @@ export const NotionPage: React.FC<types.PageProps> = ({
     return mapPageUrl(site, recordMap, searchParams)
   }, [site, recordMap, lite])
 
+  const keys = Object.keys(recordMap?.block || {})
+  const block = recordMap?.block?.[keys[0]]?.value
+
+  // const isRootPage =
+  //   parsePageId(block?.id) === parsePageId(site?.rootNotionPageId)
+  const isBlogPost =
+    block?.type === 'page' && block?.parent_table === 'collection'
+  const showTableOfContents = !!isBlogPost
+  const minTableOfContentsItems = 3
+
+  const pageAside = React.useMemo(
+    () => (
+      <PageAside block={block} recordMap={recordMap} isBlogPost={isBlogPost} />
+    ),
+    [block, recordMap, isBlogPost]
+  )
+
+  const footer = React.useMemo(() => <Footer />, [])
+
   if (router.isFallback) {
     return <Loading />
   }
 
-  const keys = Object.keys(recordMap?.block || {})
-  const block = recordMap?.block?.[keys[0]]?.value
-
-  if (error || !site || !keys.length || !block) {
+  if (error || !site || !block) {
     return <Page404 site={site} pageId={pageId} error={error} />
   }
 
@@ -221,13 +236,6 @@ export const NotionPage: React.FC<types.PageProps> = ({
   const canonicalPageUrl =
     !config.isDev && getCanonicalPageUrl(site, recordMap)(pageId)
 
-  // const isRootPage =
-  //   parsePageId(block.id) === parsePageId(site.rootNotionPageId)
-  const isBlogPost =
-    block.type === 'page' && block.parent_table === 'collection'
-  const showTableOfContents = !!isBlogPost
-  const minTableOfContentsItems = 3
-
   const socialImage = mapImageUrl(
     getPageProperty<string>('Social Image', block, recordMap) ||
       (block as PageBlock).format?.page_cover ||
@@ -239,18 +247,6 @@ export const NotionPage: React.FC<types.PageProps> = ({
     getPageProperty<string>('Description', block, recordMap) ||
     config.description
 
-  let pageAside: React.ReactNode = null
-
-  // only display comments and page actions on blog post pages
-  if (isBlogPost) {
-    const tweet = getPageTweet(block, recordMap)
-    if (tweet) {
-      pageAside = <PageActions tweet={tweet} />
-    }
-  } else {
-    pageAside = <PageSocial />
-  }
-
   return (
     <>
       <PageHead
@@ -263,6 +259,7 @@ export const NotionPage: React.FC<types.PageProps> = ({
       />
 
       {isLiteMode && <BodyClassName className='notion-lite' />}
+      {isDarkMode && <BodyClassName className='dark-mode' />}
 
       <NotionRenderer
         bodyClassName={cs(
@@ -274,7 +271,6 @@ export const NotionPage: React.FC<types.PageProps> = ({
         rootPageId={site.rootNotionPageId}
         rootDomain={site.domain}
         fullPage={!isLiteMode}
-        darkMode={resolvedTheme === 'dark'}
         previewImages={!!recordMap.preview_images}
         showCollectionViewDropdown={false}
         showTableOfContents={showTableOfContents}
@@ -286,7 +282,7 @@ export const NotionPage: React.FC<types.PageProps> = ({
         mapImageUrl={mapImageUrl}
         searchNotion={config.isSearchEnabled ? searchNotion : null}
         pageAside={pageAside}
-        footer={<Footer />}
+        footer={footer}
       />
 
       <GitHubShareButton />

components/NotionPageHeader.tsx

@@ -3,20 +3,16 @@ import cs from 'classnames'
 import { useTheme } from 'next-themes'
 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 * as types from 'lib/types'
 import { navigationStyle, navigationLinks, isSearchEnabled } from 'lib/config'
 
 import styles from './styles.module.css'
 
-export const NotionPageHeader: React.FC<{
-  block: types.CollectionViewPageBlock | types.PageBlock
-}> = ({ block }) => {
+const ToggleThemeButton = () => {
   const [hasMounted, setHasMounted] = React.useState(false)
   const { resolvedTheme, setTheme } = useTheme()
-  const { components, mapPageUrl } = useNotionContext()
 
   React.useEffect(() => {
     setHasMounted(true)
@@ -26,6 +22,25 @@ export const NotionPageHeader: React.FC<{
     setTheme(resolvedTheme === 'light' ? 'dark' : 'light')
   }, [resolvedTheme, setTheme])
 
+  return (
+    <div
+      className={cs('breadcrumb', 'button', !hasMounted && styles.hidden)}
+      onClick={onToggleTheme}
+    >
+      {hasMounted && resolvedTheme === 'dark' ? (
+        <IoMoonSharp />
+      ) : (
+        <IoSunnyOutline />
+      )}
+    </div>
+  )
+}
+
+export const NotionPageHeader: React.FC<{
+  block: types.CollectionViewPageBlock | types.PageBlock
+}> = ({ block }) => {
+  const { components, mapPageUrl } = useNotionContext()
+
   if (navigationStyle === 'default') {
     return <Header block={block} />
   }
@@ -66,13 +81,7 @@ export const NotionPageHeader: React.FC<{
             })
             .filter(Boolean)}
 
-          <div className={cs('breadcrumb', 'button')} onClick={onToggleTheme}>
-            {hasMounted && resolvedTheme === 'dark' ? (
-              <IoMoonSharp />
-            ) : (
-              <IoSunnyOutline />
-            )}
-          </div>
+          <ToggleThemeButton />
 
           {isSearchEnabled && <Search block={block} title={null} />}
         </div>

components/PageAside.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { Block, ExtendedRecordMap } from 'notion-types'
+
+import { PageActions } from './PageActions'
+import { PageSocial } from './PageSocial'
+
+import { getPageTweet } from 'lib/get-page-tweet'
+
+export const PageAside: React.FC<{
+  block: Block
+  recordMap: ExtendedRecordMap
+  isBlogPost: boolean
+}> = ({ block, recordMap, isBlogPost }) => {
+  if (!block) {
+    return null
+  }
+
+  // only display comments and page actions on blog post pages
+  if (isBlogPost) {
+    const tweet = getPageTweet(block, recordMap)
+    if (!tweet) {
+      return null
+    }
+
+    return <PageActions tweet={tweet} />
+  }
+
+  return <PageSocial />
+}

components/styles.module.css

@@ -201,3 +201,7 @@
     animation: octocat-wave 560ms ease-in-out;
   }
 }
+
+.hidden {
+  visibility: hidden;
+}

package.json

@@ -48,7 +48,7 @@
     "react": "^17.0.2",
     "react-body-classname": "^1.3.1",
     "react-dom": "^17.0.2",
-    "react-notion-x": "^6.12.2",
+    "react-notion-x": "^6.12.3",
     "react-tweet-embed": "^2.0.0",
     "react-use": "^17.3.2"
   },

yarn.lock

@@ -2973,10 +2973,10 @@ react-modal@^3.14.3:
     react-lifecycles-compat "^3.0.0"
     warning "^4.0.3"
 
-react-notion-x@^6.12.2:
-  version "6.12.2"
-  resolved "https://registry.yarnpkg.com/react-notion-x/-/react-notion-x-6.12.2.tgz#7850da7ddcbdff9114dcfa424a1620deb6476a00"
-  integrity sha512-JrUPQrkSshYXkYh9pcDq17bV+shsh2KKznDRIuqa1ZPAVEkpLHhVrN+xghU/7a/jQNAWlXlIfUAahtkMM6HshQ==
+react-notion-x@^6.12.3:
+  version "6.12.3"
+  resolved "https://registry.yarnpkg.com/react-notion-x/-/react-notion-x-6.12.3.tgz#273c9344185c454ae3fefc89a3bb1dcb8d49eff9"
+  integrity sha512-NTTxaQ2OL9DwEihxlMC3SBa6+VipysAe5zVMEzrN2xnEI7ug0K2FPLvGR/uXnvbFQkLZRqIATQkhtqAiFvyNrA==
   dependencies:
     "@fisch0920/medium-zoom" "^1.0.7"
     "@matejmazur/react-katex" "^3.1.3"