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

.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
       )
     }

lib/notion.ts

@@ -1,15 +1,60 @@
+import pMap from 'p-map'
+import pMemoize from 'p-memoize'
 import { ExtendedRecordMap, SearchParams, SearchResults } from 'notion-types'
+import { mergeRecordMaps } from 'notion-utils'
 
 import { notion } from './notion-api'
 import { getPreviewImageMap } from './preview-images'
 import { getTweetAstMap } from './tweet-embeds'
 import {
   isPreviewImageSupportEnabled,
-  isTweetEmbedSupportEnabled
+  isTweetEmbedSupportEnabled,
+  navigationStyle,
+  navigationLinks
 } from './config'
 
+const getNavigationLinkPages = pMemoize(
+  async (): Promise<ExtendedRecordMap[]> => {
+    const navigationLinkPageIds = (navigationLinks || [])
+      .map((link) => link.pageId)
+      .filter(Boolean)
+
+    if (navigationStyle !== 'default' && navigationLinkPageIds.length) {
+      return pMap(
+        navigationLinkPageIds,
+        async (navigationLinkPageId) =>
+          notion.getPage(navigationLinkPageId, {
+            fetchMissingBlocks: false,
+            fetchCollections: false,
+            signFileUrls: false
+          }),
+        {
+          concurrency: 4
+        }
+      )
+    }
+
+    return []
+  }
+)
+
 export async function getPage(pageId: string): Promise<ExtendedRecordMap> {
-  const recordMap = await notion.getPage(pageId)
+  let recordMap = await notion.getPage(pageId)
+
+  if (navigationStyle !== 'default') {
+    // ensure that any pages linked to in the custom navigation header have
+    // their block info fully resolved in the page record map so we know
+    // the page title, slug, etc.
+    const navigationLinkRecordMaps = await getNavigationLinkPages()
+
+    if (navigationLinkRecordMaps?.length) {
+      recordMap = navigationLinkRecordMaps.reduce(
+        (map, navigationLinkRecordMap) =>
+          mergeRecordMaps(map, navigationLinkRecordMap),
+        recordMap
+      )
+    }
+  }
 
   if (isPreviewImageSupportEnabled) {
     const previewImageMap = await getPreviewImageMap(recordMap)

lib/site-config.ts

@@ -0,0 +1,42 @@
+import * as types from './types'
+
+export interface SiteConfig {
+  rootNotionPageId: string
+  rootNotionSpaceId?: string
+
+  name: string
+  domain: string
+  author: string
+  description?: string
+
+  twitter?: string
+  github?: string
+  linkedin?: string
+  zhihu?: string
+
+  defaultPageIcon?: string | null
+  defaultPageCover?: string | null
+  defaultPageCoverPosition?: number | null
+
+  isPreviewImageSupportEnabled?: boolean
+  isTweetEmbedSupportEnabled?: boolean
+  isRedisEnabled?: boolean
+  isSearchEnabled?: boolean
+
+  includeNotionIdInUrls?: boolean
+  pageUrlOverrides?: types.PageUrlOverridesMap
+  pageUrlAdditions?: types.PageUrlOverridesMap
+
+  navigationStyle?: types.NavigationStyle
+  navigationLinks?: Array<NavigationLink>
+}
+
+export interface NavigationLink {
+  title: string
+  pageId?: string
+  url?: string
+}
+
+export const siteConfig = (config: SiteConfig): SiteConfig => {
+  return config
+}

lib/types.ts

@@ -2,6 +2,8 @@ import { ExtendedRecordMap, PageMap } from 'notion-types'
 
 export * from 'notion-types'
 
+export type NavigationStyle = 'default' | 'custom'
+
 export interface PageError {
   message?: string
   statusCode: number
@@ -65,20 +67,3 @@ export interface PageUrlOverridesInverseMap {
   // (this overrides the built-in URL path generation for these pages)
   [pageId: string]: string
 }
-
-export interface PreviewImage {
-  url: string
-  originalWidth: number
-  originalHeight: number
-  width: number
-  height: number
-  type: string
-  dataURIBase64: string
-
-  error?: string
-  statusCode?: number
-}
-
-export interface PreviewImageMap {
-  [url: string]: PreviewImage
-}

readme.md

@@ -18,7 +18,7 @@ It uses Notion as a CMS, [react-notion-x](https://github.com/NotionX/react-notio
 
 ## Features
 
-- Setup only takes a few minutes ([single config file](./site.config.js)) 💪
+- Setup only takes a few minutes ([single config file](./site.config.ts)) 💪
 - Robust support for Notion content via [react-notion-x](https://github.com/NotionX/react-notion-x)
 - Built using Next.js, TS, and React
 - Excellent page speeds
@@ -38,12 +38,12 @@ It uses Notion as a CMS, [react-notion-x](https://github.com/NotionX/react-notio
 
 ## Setup
 
-**All config is defined in [site.config.js](./site.config.js).**
+**All config is defined in [site.config.ts](./site.config.ts).**
 
 This project requires a recent version of Node.js (>= 14.17).
 
 1. Fork / clone this repo
-2. Change a few values in [site.config.js](./site.config.js)
+2. Change a few values in [site.config.ts](./site.config.ts)
 3. `npm install`
 4. `npm run dev` to test locally
 5. `npm run deploy` to deploy to vercel 💪
@@ -82,11 +82,11 @@ NOTE: if you have multiple pages in your workspace with the same slugified name,
 
 We use [next/image](https://nextjs.org/docs/api-reference/next/image) to serve images efficiently, with preview images optionally generated via [lqip-modern](https://github.com/transitive-bullshit/lqip-modern). This gives us extremely optimized image support for sexy smooth images.
 
-Preview images are **enabled by default**, but they can be slow to generate, so if you want to disable them, set `isPreviewImageSupportEnabled` to `false` in `site.config.js`.
+Preview images are **enabled by default**, but they can be slow to generate, so if you want to disable them, set `isPreviewImageSupportEnabled` to `false` in `site.config.ts`.
 
 ### Redis
 
-If you want to cache generated preview images to speed up subsequent builds, you'll need to first set up an external [Redis](https://redis.io) data store. To enable redis caching, set `isRedisEnabled` to `true` in `site.config.js` and then set `REDIS_HOST` and `REDIS_PASSWORD` environment variables to point to your redis instance.
+If you want to cache generated preview images to speed up subsequent builds, you'll need to first set up an external [Redis](https://redis.io) data store. To enable redis caching, set `isRedisEnabled` to `true` in `site.config.ts` and then set `REDIS_HOST` and `REDIS_PASSWORD` environment variables to point to your redis instance.
 
 You can do this locally by adding a `.env` file:
 

site.config.ts

@@ -1,4 +1,6 @@
-export default {
+import { siteConfig } from './lib/site-config'
+
+export default siteConfig({
   // the site's root Notion page (required)
   rootNotionPageId: '7875426197cf461698809def95960ebf',
 
@@ -41,5 +43,20 @@ export default {
   //   '/foo': '067dd719a912471ea9a3ac10710e7fdf',
   //   '/bar': '0be6efce9daf42688f65c76b89f8eb27'
   // }
-  pageUrlOverrides: null
-}
+  pageUrlOverrides: null,
+
+  // whether to use the default notion navigation style or a custom one with links to
+  // important pages
+  navigationStyle: 'default'
+  // navigationStyle: 'custom',
+  // navigationLinks: [
+  //   {
+  //     title: 'About',
+  //     pageId: 'f1199d37579b41cbabfc0b5174f4256a'
+  //   },
+  //   {
+  //     title: 'Contact',
+  //     pageId: '6a29ebcb935a4f0689fe661ab5f3b8d1'
+  //   }
+  // ]
+})

styles/notion.css

@@ -39,11 +39,15 @@
   width: 100% !important;
 }
 
-.notion-header .nav-header {
+.notion-header .notion-nav-header {
   max-width: 1100px;
   margin: 0 auto;
 }
 
+.notion-nav-header-rhs {
+  gap: 0.5rem;
+}
+
 .notion-gallery-grid {
   grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
   grid-gap: 6vmin;

tsconfig.json

@@ -19,5 +19,5 @@
     "incremental": true
   },
   "exclude": ["node_modules"],
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "site.config.ts"]
 }