Merge pull request #259 from transitive-bullshit/feature/custom-navigation

Author: transitive-bullshit

.env.example

@@ -18,7 +18,7 @@
 
 # Optional (for persisting preview images to redis)
 # NOTE: if you want to enable redis, only REDIS_HOST and REDIS_PASSWORD are required
-# NOTE: don't forget to set isRedisEnabled to true in the site.config.js file
+# NOTE: don't forget to set isRedisEnabled to true in the site.config.ts file
 #REDIS_HOST=
 #REDIS_PASSWORD=
 #REDIS_USER='default'

components/Footer.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import useDarkMode from '@fisch0920/use-dark-mode'
 import { FaTwitter } from '@react-icons/all-files/fa/FaTwitter'
 import { FaZhihu } from '@react-icons/all-files/fa/FaZhihu'
 import { FaGithub } from '@react-icons/all-files/fa/FaGithub'
@@ -11,17 +12,16 @@ import styles from './styles.module.css'
 
 // TODO: merge the data and icons from PageSocial with the social links in Footer
 
-export const Footer: React.FC<{
-  isDarkMode: boolean
-  toggleDarkMode: () => void
-}> = ({ isDarkMode, toggleDarkMode }) => {
+export const FooterImpl: React.FC = () => {
   const [hasMounted, setHasMounted] = React.useState(false)
-  const toggleDarkModeCb = React.useCallback(
+  const darkMode = useDarkMode(false, { classNameDark: 'dark-mode' })
+
+  const onToggleDarkMode = React.useCallback(
     (e) => {
       e.preventDefault()
-      toggleDarkMode()
+      darkMode.toggle()
     },
-    [toggleDarkMode]
+    [darkMode]
   )
 
   React.useEffect(() => {
@@ -32,18 +32,18 @@ export const Footer: React.FC<{
     <footer className={styles.footer}>
       <div className={styles.copyright}>Copyright 2022 {config.author}</div>
 
-      {hasMounted ? (
-        <div className={styles.settings}>
+      <div className={styles.settings}>
+        {hasMounted && (
           <a
             className={styles.toggleDarkMode}
             href='#'
-            onClick={toggleDarkModeCb}
-            title='Toggle dark mode'
+            role='button'
+            onClick={onToggleDarkMode}
           >
-            {isDarkMode ? <IoMoonSharp /> : <IoSunnyOutline />}
+            {darkMode.value ? <IoMoonSharp /> : <IoSunnyOutline />}
           </a>
-        </div>
-      ) : null}
+        )}
+      </div>
 
       <div className={styles.social}>
         {config.twitter && (
@@ -97,3 +97,5 @@ export const Footer: React.FC<{
     </footer>
   )
 }
+
+export const Footer = React.memo(FooterImpl)

components/NotionPage.tsx

@@ -31,6 +31,7 @@ import { PageHead } from './PageHead'
 import { PageActions } from './PageActions'
 import { Footer } from './Footer'
 import { PageSocial } from './PageSocial'
+import { NotionPageHeader } from './NotionPageHeader'
 import { GitHubShareButton } from './GitHubShareButton'
 
 import styles from './styles.module.css'
@@ -57,7 +58,11 @@ const Pdf = dynamic(
   }
 )
 const Modal = dynamic(
-  () => import('react-notion-x/build/third-party/modal').then((m) => m.Modal),
+  () =>
+    import('react-notion-x/build/third-party/modal').then((m) => {
+      m.Modal.setAppElement('.notion-viewport')
+      return m.Modal
+    }),
   {
     ssr: false
   }
@@ -72,15 +77,48 @@ export const NotionPage: React.FC<types.PageProps> = ({
   const router = useRouter()
   const lite = useSearchParam('lite')
 
-  const params: any = {}
-  if (lite) params.lite = lite
+  const components = React.useMemo(
+    () => ({
+      nextImage: Image,
+      nextLink: Link,
+      Code,
+      Collection,
+      Equation,
+      Pdf,
+      Modal,
+      Tweet,
+      Header: NotionPageHeader
+    }),
+    []
+  )
+
+  const twitterContextValue = React.useMemo(() => {
+    if (!recordMap) {
+      return null
+    }
+
+    return {
+      tweetAstMap: (recordMap as any).tweetAstMap || {},
+      swrOptions: {
+        fetcher: (id: string) =>
+          fetch(`/api/get-tweet-ast/${id}`).then((r) => r.json())
+      }
+    }
+  }, [recordMap])
 
   // lite mode is for oembed
   const isLiteMode = lite === 'true'
-  const searchParams = new URLSearchParams(params)
 
   const darkMode = useDarkMode(false, { classNameDark: 'dark-mode' })
 
+  const siteMapPageUrl = React.useMemo(() => {
+    const params: any = {}
+    if (lite) params.lite = lite
+
+    const searchParams = new URLSearchParams(params)
+    return mapPageUrl(site, recordMap, searchParams)
+  }, [site, recordMap, lite])
+
   if (router.isFallback) {
     return <Loading />
   }
@@ -110,8 +148,6 @@ export const NotionPage: React.FC<types.PageProps> = ({
     g.block = block
   }
 
-  const siteMapPageUrl = mapPageUrl(site, recordMap, searchParams)
-
   const canonicalPageUrl =
     !config.isDev && getCanonicalPageUrl(site, recordMap)(pageId)
 
@@ -146,15 +182,7 @@ export const NotionPage: React.FC<types.PageProps> = ({
   }
 
   return (
-    <TwitterContextProvider
-      value={{
-        tweetAstMap: (recordMap as any).tweetAstMap || {},
-        swrOptions: {
-          fetcher: (id) =>
-            fetch(`/api/get-tweet-ast/${id}`).then((r) => r.json())
-        }
-      }}
-    >
+    <TwitterContextProvider value={twitterContextValue}>
       <PageHead
         pageId={pageId}
         site={site}
@@ -173,16 +201,7 @@ export const NotionPage: React.FC<types.PageProps> = ({
           styles.notion,
           pageId === site.rootNotionPageId && 'index-page'
         )}
-        components={{
-          nextImage: Image,
-          nextLink: Link,
-          Code,
-          Collection,
-          Equation,
-          Pdf,
-          Modal,
-          Tweet
-        }}
+        components={components}
         recordMap={recordMap}
         rootPageId={site.rootNotionPageId}
         rootDomain={site.domain}
@@ -197,14 +216,9 @@ export const NotionPage: React.FC<types.PageProps> = ({
         defaultPageCoverPosition={config.defaultPageCoverPosition}
         mapPageUrl={siteMapPageUrl}
         mapImageUrl={mapImageUrl}
-        searchNotion={searchNotion}
+        searchNotion={config.isSearchEnabled ? searchNotion : null}
         pageAside={pageAside}
-        footer={
-          <Footer
-            isDarkMode={darkMode.value}
-            toggleDarkMode={darkMode.toggle}
-          />
-        }
+        footer={<Footer />}
       />
 
       <GitHubShareButton />

components/NotionPageHeader.tsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import cs from 'classnames'
+import useDarkMode from '@fisch0920/use-dark-mode'
+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 '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 darkMode = useDarkMode(false, { classNameDark: 'dark-mode' })
+  const [hasMounted, setHasMounted] = React.useState(false)
+  const { components, mapPageUrl } = useNotionContext()
+
+  React.useEffect(() => {
+    setHasMounted(true)
+  }, [])
+
+  if (navigationStyle === 'default') {
+    return <Header block={block} />
+  }
+
+  return (
+    <header className='notion-header'>
+      <div className='notion-nav-header'>
+        <Breadcrumbs block={block} rootOnly={true} />
+
+        <div className='notion-nav-header-rhs breadcrumbs'>
+          {navigationLinks
+            ?.map((link, index) => {
+              if (!link.pageId && !link.url) {
+                return null
+              }
+
+              if (link.pageId) {
+                return (
+                  <components.PageLink
+                    href={mapPageUrl(link.pageId)}
+                    key={index}
+                    className={cs(styles.navLink, 'breadcrumb', 'button')}
+                  >
+                    {link.title}
+                  </components.PageLink>
+                )
+              } else {
+                return (
+                  <components.Link
+                    href={link.url}
+                    key={index}
+                    className={cs(styles.navLink, 'breadcrumb', 'button')}
+                  >
+                    {link.title}
+                  </components.Link>
+                )
+              }
+            })
+            .filter(Boolean)}
+
+          <div
+            className={cs('breadcrumb', 'button')}
+            role='button'
+            onClick={darkMode.toggle}
+          >
+            {hasMounted && darkMode.value ? (
+              <IoMoonSharp />
+            ) : (
+              <IoSunnyOutline />
+            )}
+          </div>
+
+          {isSearchEnabled && <Search block={block} title={null} />}
+        </div>
+      </div>
+    </header>
+  )
+}

lib/config.ts

@@ -1,14 +1,19 @@
 /**
  * Site-wide app configuration.
  *
- * This file pulls from the root "site.config.js" as well as environment variables
+ * This file pulls from the root "site.config.ts" as well as environment variables
  * for optional depenencies.
  */
 
 import { parsePageId } from 'notion-utils'
 import posthog from 'posthog-js'
 import { getEnv, getSiteConfig } from './get-config-value'
-import { PageUrlOverridesInverseMap, PageUrlOverridesMap } from './types'
+import { NavigationLink } from './site-config'
+import {
+  PageUrlOverridesInverseMap,
+  PageUrlOverridesMap,
+  NavigationStyle
+} from './types'
 
 export const rootNotionPageId: string = parsePageId(
   getSiteConfig('rootNotionPageId'),
@@ -48,9 +53,9 @@ export const description: string = getSiteConfig('description', 'Notion Blog')
 
 // social accounts
 export const twitter: string | null = getSiteConfig('twitter', null)
-export const zhihu: string | null = getSiteConfig('zhihu', null)
 export const github: string | null = getSiteConfig('github', null)
 export const linkedin: string | null = getSiteConfig('linkedin', null)
+export const zhihu: string | null = getSiteConfig('zhihu', null)
 
 // default notion values for site-wide consistency (optional; may be overridden on a per-page basis)
 export const defaultPageIcon: string | null = getSiteConfig(
@@ -78,12 +83,25 @@ export const isTweetEmbedSupportEnabled: boolean = getSiteConfig(
   true
 )
 
-// where it all starts -- the site's root Notion page
+// Optional whether or not to include the Notion ID in page URLs or just use slugs
 export const includeNotionIdInUrls: boolean = getSiteConfig(
   'includeNotionIdInUrls',
   !!isDev
 )
 
+export const navigationStyle: NavigationStyle = getSiteConfig(
+  'navigationStyle',
+  'default'
+)
+
+export const navigationLinks: Array<NavigationLink | null> = getSiteConfig(
+  'navigationLinks',
+  null
+)
+
+// Optional site search
+export const isSearchEnabled: boolean = getSiteConfig('isSearchEnabled', true)
+
 // ----------------------------------------------------------------------------
 
 // Optional redis instance for persisting preview images

lib/get-config-value.ts

@@ -1,11 +1,12 @@
 import rawSiteConfig from '../site.config'
+import { SiteConfig } from './site-config'
 
 if (!rawSiteConfig) {
-  throw new Error(`Config error: invalid site.config.js`)
+  throw new Error(`Config error: invalid site.config.ts`)
 }
 
-// TODO: allow environment variables to override site.config.js
-let siteConfigOverrides
+// allow environment variables to override site.config.ts
+let siteConfigOverrides: SiteConfig
 
 try {
   if (process.env.NEXT_PUBLIC_SITE_CONFIG) {
@@ -16,7 +17,7 @@ try {
   throw err
 }
 
-const siteConfig = {
+const siteConfig: SiteConfig = {
   ...rawSiteConfig,
   ...siteConfigOverrides
 }

lib/map-page-url.ts

@@ -12,11 +12,13 @@ const uuid = !!includeNotionIdInUrls
 export const mapPageUrl =
   (site: Site, recordMap: ExtendedRecordMap, searchParams: URLSearchParams) =>
   (pageId = '') => {
-    if (uuidToId(pageId) === site.rootNotionPageId) {
+    const pageUuid = parsePageId(pageId, { uuid: true })
+
+    if (uuidToId(pageUuid) === site.rootNotionPageId) {
       return createUrl('/', searchParams)
     } else {
       return createUrl(
-        `/${getCanonicalPageId(pageId, recordMap, { uuid })}`,
+        `/${getCanonicalPageId(pageUuid, recordMap, { uuid })}`,
         searchParams
       )
     }