Merge open PRs from the upstream

components/Footer.tsx

@@ -1,17 +1,13 @@
-import { FaEnvelopeOpenText } from '@react-icons/all-files/fa/FaEnvelopeOpenText'
-import { FaGithub } from '@react-icons/all-files/fa/FaGithub'
-import { FaLinkedin } from '@react-icons/all-files/fa/FaLinkedin'
-import { FaMastodon } from '@react-icons/all-files/fa/FaMastodon'
-import { FaTwitter } from '@react-icons/all-files/fa/FaTwitter'
-import { FaYoutube } from '@react-icons/all-files/fa/FaYoutube'
-import { FaZhihu } from '@react-icons/all-files/fa/FaZhihu'
-import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp'
-import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
+import cs from 'classnames'
 import * as React from 'react'
+import { IoMoonSharp, IoSunnyOutline } from 'react-icons/io5'
+import { useNotionContext } from 'react-notion-x'
 
-import * as config from '@/lib/config'
+import { footerLinks } from '@/lib/config'
 import { useDarkMode } from '@/lib/use-dark-mode'
 
+import { PageSocialButtons } from './PageSocial'
+import { StaticLogo } from './StaticLogo'
 import styles from './styles.module.css'
 
 // TODO: merge the data and icons from PageSocial with the social links in Footer
@@ -33,110 +29,63 @@ export function FooterImpl() {
     setHasMounted(true)
   }, [])
 
+  const { components, mapPageUrl } = useNotionContext()
+
   return (
     <footer className={styles.footer}>
-      <div className={styles.copyright}>
-        Copyright {currentYear} {config.author}
-      </div>
+      <div className={styles.footerSocial}>
+        <StaticLogo />
 
-      <div className={styles.settings}>
-        {hasMounted && (
-          <a
+        <div className={cs(styles.settings,styles.toggleDarkModeContainer)}>
+          {hasMounted && (
+            <button
+            type="button"
             className={styles.toggleDarkMode}
-            href='#'
-            role='button'
             onClick={onToggleDarkMode}
             title='Toggle dark mode'
           >
             {isDarkMode ? <IoMoonSharp /> : <IoSunnyOutline />}
-          </a>
-        )}
-      </div>
-
-      <div className={styles.social}>
-        {config.twitter && (
-          <a
-            className={styles.twitter}
-            href={`https://twitter.com/${config.twitter}`}
-            title={`Twitter @${config.twitter}`}
-            target='_blank'
-            rel='noopener noreferrer'
-          >
-            <FaTwitter />
-          </a>
-        )}
-
-        {config.mastodon && (
-          <a
-            className={styles.mastodon}
-            href={config.mastodon}
-            title={`Mastodon ${config.getMastodonHandle()}`}
-            rel='me'
-          >
-            <FaMastodon />
-          </a>
-        )}
-
-        {config.zhihu && (
-          <a
-            className={styles.zhihu}
-            href={`https://zhihu.com/people/${config.zhihu}`}
-            title={`Zhihu @${config.zhihu}`}
-            target='_blank'
-            rel='noopener noreferrer'
-          >
-            <FaZhihu />
-          </a>
-        )}
-
-        {config.github && (
-          <a
-            className={styles.github}
-            href={`https://github.com/${config.github}`}
-            title={`GitHub @${config.github}`}
-            target='_blank'
-            rel='noopener noreferrer'
-          >
-            <FaGithub />
-          </a>
-        )}
-
-        {config.linkedin && (
-          <a
-            className={styles.linkedin}
-            href={`https://www.linkedin.com/in/${config.linkedin}`}
-            title={`LinkedIn ${config.author}`}
-            target='_blank'
-            rel='noopener noreferrer'
-          >
-            <FaLinkedin />
-          </a>
-        )}
-
-        {config.newsletter && (
-          <a
-            className={styles.newsletter}
-            href={`${config.newsletter}`}
-            title={`Newsletter ${config.author}`}
-            target='_blank'
-            rel='noopener noreferrer'
-          >
-            <FaEnvelopeOpenText />
-          </a>
-        )}
-
-        {config.youtube && (
-          <a
-            className={styles.youtube}
-            href={`https://www.youtube.com/${config.youtube}`}
-            title={`YouTube ${config.author}`}
-            target='_blank'
-            rel='noopener noreferrer'
-          >
-            <FaYoutube />
-          </a>
-        )}
+          </button>
+          )}
+        </div>
+        <div className={styles.social}>
+          <PageSocialButtons iconSize={32} />
+        </div>
       </div>
+      <div className="SiteInfo">
+        <div className={styles.siteInfoLinks}>
+            {footerLinks
+            ?.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>
+          <div className={styles.copyright}>© Copyright {currentYear}. All rights reserved.</div>
+        </div>
     </footer>
   )
 }

components/NotionPageHeader.tsx

@@ -1,13 +1,13 @@
 import type * as types from 'notion-types'
-import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp'
-import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
 import cs from 'classnames'
 import * as React from 'react'
-import { Breadcrumbs, Header, Search, useNotionContext } from 'react-notion-x'
+import { IoMoonSharp, IoSunnyOutline } from 'react-icons/io5'
+import { Header, Search, useNotionContext } from 'react-notion-x'
 
 import { isSearchEnabled, navigationLinks, navigationStyle } from '@/lib/config'
 import { useDarkMode } from '@/lib/use-dark-mode'
 
+import { StaticLogo } from './StaticLogo'
 import styles from './styles.module.css'
 
 function ToggleThemeButton() {
@@ -23,12 +23,13 @@ function ToggleThemeButton() {
   }, [toggleDarkMode])
 
   return (
-    <div
-      className={cs('breadcrumb', 'button', !hasMounted && styles.hidden)}
+    <button
+      type="button"
+      className={cs('breadcrumb', 'button', styles.toggleDarkMode, !hasMounted && styles.hidden)}
       onClick={onToggleTheme}
     >
       {hasMounted && isDarkMode ? <IoMoonSharp /> : <IoSunnyOutline />}
-    </div>
+    </button>
   )
 }
 
@@ -46,11 +47,12 @@ export function NotionPageHeader({
   return (
     <header className='notion-header'>
       <div className='notion-nav-header'>
-        <Breadcrumbs block={block} rootOnly={true} />
-
+        <div className="notion-nav-header-rhs breadcrumbs">
+          <StaticLogo />
+        </div>
         <div className='notion-nav-header-rhs breadcrumbs'>
           {navigationLinks
-            ?.map((link, index) => {
+            ?.map((link) => {
               if (!link.pageId && !link.url) {
                 return null
               }
@@ -59,23 +61,22 @@ export function NotionPageHeader({
                 return (
                   <components.PageLink
                     href={mapPageUrl(link.pageId)}
-                    key={index}
+                    key={`nav-${link.pageId}-${link.title}`}
                     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>
-                )
               }
+              return (
+                <components.Link
+                  href={link.url}
+                  key={`nav-${link.url}-${link.title}`}
+                  className={cs(styles.navLink, 'breadcrumb', 'button')}
+                >
+                  {link.title}
+                </components.Link>
+              )
             })
             .filter(Boolean)}
 

components/PageActions.tsx

@@ -1,5 +1,5 @@
-import { AiOutlineRetweet } from '@react-icons/all-files/ai/AiOutlineRetweet'
-import { IoHeartOutline } from '@react-icons/all-files/io5/IoHeartOutline'
+import { AiOutlineRetweet } from 'react-icons/ai'
+import { IoHeartOutline } from 'react-icons/io5'
 
 import styles from './styles.module.css'