⤵

components/Footer.tsx

@@ -13,6 +13,7 @@ import styles from './styles.module.css'
 // TODO: merge the data and icons from PageSocial with the social links in Footer
 
 export const FooterImpl: React.FC = () => {
+  const [hasMounted, setHasMounted] = React.useState(false)
   const darkMode = useDarkMode(false, { classNameDark: 'dark-mode' })
 
   const onToggleDarkMode = React.useCallback(
@@ -23,19 +24,25 @@ export const FooterImpl: React.FC = () => {
     [darkMode]
   )
 
+  React.useEffect(() => {
+    setHasMounted(true)
+  }, [])
+
   return (
     <footer className={styles.footer}>
       <div className={styles.copyright}>Copyright 2022 {config.author}</div>
 
       <div className={styles.settings}>
-        <a
-          className={styles.toggleDarkMode}
-          href='#'
-          role='button'
-          onClick={onToggleDarkMode}
-        >
-          {darkMode.value ? <IoMoonSharp /> : <IoSunnyOutline />}
-        </a>
+        {hasMounted && (
+          <a
+            className={styles.toggleDarkMode}
+            href='#'
+            role='button'
+            onClick={onToggleDarkMode}
+          >
+            {darkMode.value ? <IoMoonSharp /> : <IoSunnyOutline />}
+          </a>
+        )}
       </div>
 
       <div className={styles.social}>

lib/notion.ts

@@ -1,4 +1,5 @@
 import pMap from 'p-map'
+import pMemoize from 'p-memoize'
 import { ExtendedRecordMap, SearchParams, SearchResults } from 'notion-types'
 import { mergeRecordMaps } from 'notion-utils'
 
@@ -12,16 +13,14 @@ import {
   navigationLinks
 } from './config'
 
-export async function getPage(pageId: string): Promise<ExtendedRecordMap> {
-  let recordMap = await notion.getPage(pageId)
-
-  if (navigationStyle !== 'default') {
+const getNavigationLinkPages = pMemoize(
+  async (): Promise<ExtendedRecordMap[]> => {
     const navigationLinkPageIds = (navigationLinks || [])
       .map((link) => link.pageId)
       .filter(Boolean)
 
-    if (navigationLinkPageIds.length) {
-      const navigationLinkRecordMaps: ExtendedRecordMap[] = await pMap(
+    if (navigationStyle !== 'default' && navigationLinkPageIds.length) {
+      return pMap(
         navigationLinkPageIds,
         async (navigationLinkPageId) =>
           notion.getPage(navigationLinkPageId, {
@@ -33,7 +32,22 @@ export async function getPage(pageId: string): Promise<ExtendedRecordMap> {
           concurrency: 4
         }
       )
+    }
 
+    return []
+  }
+)
+
+export async function getPage(pageId: string): Promise<ExtendedRecordMap> {
+  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),

site.config.ts

@@ -45,6 +45,9 @@ export default siteConfig({
   // }
   pageUrlOverrides: null,
 
+  // whether to use the default notion navigation style or a custom one with links to
+  // important pages
+  // navigationStyle: 'default'
   navigationStyle: 'custom',
   navigationLinks: [
     {