Fun blog title transition

components/NotionPageHeader.tsx

@@ -8,6 +8,7 @@ import { Breadcrumbs, Header, Search, useNotionContext } from 'react-notion-x'
 
 import { isSearchEnabled, navigationLinks, navigationStyle } from '@/lib/config'
 import { useDarkMode } from '@/lib/use-dark-mode'
+import { getBlockTitle } from 'notion-utils'
 
 import styles from './styles.module.css'
 
@@ -36,7 +37,22 @@ const ToggleThemeButton = () => {
 export const NotionPageHeader: React.FC<{
   block: types.CollectionViewPageBlock | types.PageBlock
 }> = ({ block }) => {
-  const { components, mapPageUrl } = useNotionContext()
+  const { components, mapPageUrl, recordMap } = useNotionContext()
+  const [showTitle, setShowTitle] = React.useState(false)
+  const title = getBlockTitle(block, recordMap)
+
+  React.useEffect(() => {
+    const titleElement = document.querySelector('.notion-title')
+    if (!titleElement) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => setShowTitle(!entry.isIntersecting),
+      { threshold: 0 }
+    )
+
+    observer.observe(titleElement)
+    return () => observer.disconnect()
+  }, [])
 
   if (navigationStyle === 'default') {
     return <Header block={block} />
@@ -47,6 +63,12 @@ export const NotionPageHeader: React.FC<{
       <div className='notion-nav-header'>
         <Breadcrumbs block={block} rootOnly={true} />
 
+        <div
+          className={`notion-nav-header-title breadcrumbs ${showTitle ? 'show' : ''}`}
+        >
+          {title}
+        </div>
+
         <div className='notion-nav-header-rhs breadcrumbs'>
           {navigationLinks
             ?.map((link, index) => {

styles/notion.css

@@ -359,6 +359,7 @@
 .notion-header {
   background: hsla(0, 0%, 100%, 0.8);
   backdrop-filter: saturate(80%) blur(8px);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 
 .dark-mode .notion-header {
@@ -402,3 +403,24 @@
 .notion-equation.notion-equation-block {
   align-items: center;
 }
+
+.notion-nav-header {
+  position: relative;
+}
+
+.notion-nav-header-title {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 50%;
+}
+
+.notion-nav-header-title.show {
+  opacity: 1;
+}