changes specific to transitivebullsh.it

Author: transitive-bullshit

components/HeroHeader.tsx

@@ -0,0 +1,135 @@
+import raf from 'raf'
+import random from 'random'
+import React, { Component } from 'react'
+import FluidAnimation from 'react-fluid-animation'
+
+const exp = random.exponential()
+const numSplatsPerEpoch = 1
+const minSplatRadius = 0.01
+const maxSplatRadius = 0.03
+
+export class HeroHeader extends Component<{
+  className?: string
+}> {
+  _time: number = Date.now()
+  _direction: number
+  _tickRaf: any
+  _timeout: any
+  _animation: any
+
+  componentDidMount() {
+    this._time = Date.now()
+    this._direction = 1
+    this._reset()
+    this._tick()
+  }
+
+  componentWillUnmount() {
+    if (this._tickRaf) {
+      raf.cancel(this._tickRaf)
+      this._tickRaf = null
+    }
+
+    if (this._timeout) {
+      clearTimeout(this._timeout)
+      this._timeout = null
+    }
+  }
+
+  render() {
+    return (
+      <FluidAnimation
+        className={this.props.className}
+        animationRef={this._animationRef}
+      />
+    )
+  }
+
+  _animationRef = (ref) => {
+    this._animation = ref
+    this._reset()
+  }
+
+  _reset() {
+    if (this._animation) {
+      this._animation.config.splatRadius = random.float(
+        minSplatRadius,
+        maxSplatRadius
+      )
+      this._animation.addRandomSplats(random.int(100, 180))
+    }
+  }
+
+  _tick = () => {
+    this._tickRaf = null
+    this._timeout = null
+
+    let scale = 1.0
+
+    if (this._animation) {
+      const w = this._animation.width
+      const h = this._animation.height
+
+      // adjust the intensity scale depending on the canvas width, so it's less
+      // intense on smaller screens
+      const s = Math.max(0.1, Math.min(1, w / 1200))
+      scale = Math.pow(s, 1.2)
+
+      this._animation.config.splatRadius = random.float(
+        minSplatRadius * scale,
+        maxSplatRadius * scale
+      )
+
+      const splats = []
+      for (let i = 0; i < numSplatsPerEpoch; ++i) {
+        const color = [random.float(10), random.float(10), random.float(10)]
+
+        const w0 = w / 3.0
+        const w1 = (w * 2.0) / 3.0
+
+        const h0 = h / 3.0
+        const h1 = (h * 2.0) / 3.0
+
+        // eslint-disable-next-line no-constant-condition
+        while (true) {
+          const x = random.float(w)
+          const y = random.float(h)
+
+          // favor uniformly distributed samples within the center-ish of the canvas
+          if (x > w0 && x < w1 && y > h0 && y < h1) {
+            continue
+          }
+
+          const dx = random.float(-1, 1) * random.float(200, 3000) * scale
+          const dy = random.float(-1, 1) * random.float(200, 3000) * scale
+          const splat = { x, y, dx, dy, color }
+          splats.push(splat)
+          break
+        }
+
+        // old version which generated samples along a circle
+        // const t = random.float(2 * Math.PI)
+        // const cos = Math.cos(t)
+        // const sin = Math.sin(t)
+        // const x = w / 2 + r * cos
+        // const y = h / 2 + r * sin + yOffset
+        // const k = random.float() > 0.98 ? random.float(3, 10) : 1
+        // const dx = k * random.float(-1, 1) * random.float(50, 300) * cos
+        // const dy = k * random.float(-1, 1) * random.float(50, 300) * sin
+        // const splat = { x, y, dx, dy, color }
+        // splats.push(splat)
+      }
+
+      this._animation.addSplats(splats)
+    }
+
+    // using an exponential distribution here allows us to favor bursts of activity
+    // but also allow for more occasional pauses
+    const dampenedScale = Math.pow(scale, 0.2)
+    const timeout = (exp() * 100) / dampenedScale
+
+    this._timeout = setTimeout(() => {
+      this._tickRaf = raf(this._tick)
+    }, timeout)
+  }
+}

components/NotionPage.tsx

@@ -4,7 +4,13 @@ import Image from 'next/legacy/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { type PageBlock } from 'notion-types'
-import { formatDate, getBlockTitle, getPageProperty } from 'notion-utils'
+import {
+  formatDate,
+  getBlockTitle,
+  getPageProperty,
+  normalizeTitle,
+  parsePageId
+} from 'notion-utils'
 import * as React from 'react'
 import BodyClassName from 'react-body-classname'
 import {
@@ -80,15 +86,6 @@ const Collection = dynamic(() =>
     (m) => m.Collection
   )
 )
-const Equation = dynamic(() =>
-  import('react-notion-x/build/third-party/equation').then((m) => m.Equation)
-)
-const Pdf = dynamic(
-  () => import('react-notion-x/build/third-party/pdf').then((m) => m.Pdf),
-  {
-    ssr: false
-  }
-)
 const Modal = dynamic(
   () =>
     import('react-notion-x/build/third-party/modal').then((m) => {
@@ -152,11 +149,35 @@ const propertyTextValue = (
   return defaultFn()
 }
 
+const propertySelectValue = (
+  { schema, value, key, pageHeader },
+  defaultFn: () => React.ReactNode
+) => {
+  value = normalizeTitle(value)
+
+  if (pageHeader && schema.type === 'multi_select' && value) {
+    return (
+      <Link href={`/tags/${value}`} key={key}>
+        <a>{defaultFn()}</a>
+      </Link>
+    )
+  }
+
+  return defaultFn()
+}
+
+const HeroHeader = dynamic<{ className?: string }>(
+  () => import('./HeroHeader').then((m) => m.HeroHeader),
+  { ssr: false }
+)
+
 export function NotionPage({
   site,
   recordMap,
   error,
-  pageId
+  pageId,
+  tagsPage,
+  propertyToFilterName
 }: types.PageProps) {
   const router = useRouter()
   const lite = useSearchParam('lite')
@@ -167,14 +188,13 @@ export function NotionPage({
       nextLink: Link,
       Code,
       Collection,
-      Equation,
-      Pdf,
       Modal,
       Tweet,
       Header: NotionPageHeader,
       propertyLastEditedTimeValue,
       propertyTextValue,
-      propertyDateValue
+      propertyDateValue,
+      propertySelectValue
     }),
     []
   )
@@ -199,6 +219,8 @@ export function NotionPage({
   //   parsePageId(block?.id) === parsePageId(site?.rootNotionPageId)
   const isBlogPost =
     block?.type === 'page' && block?.parent_table === 'collection'
+  const isBioPage =
+    parsePageId(block?.id) === parsePageId('8d0062776d0c4afca96eb1ace93a7538')
 
   const showTableOfContents = !!isBlogPost
   const minTableOfContentsItems = 3
@@ -212,6 +234,16 @@ export function NotionPage({
 
   const footer = React.useMemo(() => <Footer />, [])
 
+  const pageCover = React.useMemo(() => {
+    if (isBioPage) {
+      return (
+        <HeroHeader className='notion-page-cover-wrapper notion-page-cover-hero' />
+      )
+    } else {
+      return null
+    }
+  }, [isBioPage])
+
   if (router.isFallback) {
     return <Loading />
   }
@@ -220,7 +252,9 @@ export function NotionPage({
     return <Page404 site={site} pageId={pageId} error={error} />
   }
 
-  const title = getBlockTitle(block, recordMap) || site.name
+  const name = getBlockTitle(block, recordMap) || site.name
+  const title =
+    tagsPage && propertyToFilterName ? `${propertyToFilterName} ${name}` : name
 
   console.log('notion page', {
     isDev: config.isDev,
@@ -269,7 +303,8 @@ export function NotionPage({
       <NotionRenderer
         bodyClassName={cs(
           styles.notion,
-          pageId === site.rootNotionPageId && 'index-page'
+          pageId === site.rootNotionPageId && 'index-page',
+          tagsPage && 'tags-page'
         )}
         darkMode={isDarkMode}
         components={components}
@@ -284,11 +319,14 @@ export function NotionPage({
         defaultPageIcon={config.defaultPageIcon}
         defaultPageCover={config.defaultPageCover}
         defaultPageCoverPosition={config.defaultPageCoverPosition}
+        linkTableTitleProperties={false}
         mapPageUrl={siteMapPageUrl}
         mapImageUrl={mapImageUrl}
         searchNotion={config.isSearchEnabled ? searchNotion : null}
         pageAside={pageAside}
         footer={footer}
+        pageTitle={tagsPage && propertyToFilterName ? title : undefined}
+        pageCover={pageCover}
       />
 
       <GitHubShareButton />

components/PageHead.tsx

@@ -95,6 +95,7 @@ export function PageHead({
         href={rssFeedUrl}
         title={site?.name}
       />
+      <meta name='follow.it-verification-code' content='c0A1rAARM3FC2XRfMAke' />
 
       <meta property='og:title' content={title} />
       <meta name='twitter:title' content={title} />

lib/types.ts

@@ -16,6 +16,8 @@ export interface PageProps {
   recordMap?: ExtendedRecordMap
   pageId?: string
   error?: PageError
+  tagsPage?: boolean
+  propertyToFilterName?: string | string
 }
 
 export interface ExtendedTweetRecordMap extends ExtendedRecordMap {

package.json

@@ -38,6 +38,7 @@
     "expiry-map": "^2.0.0",
     "fathom-client": "^3.4.1",
     "ky": "^1.7.2",
+    "lodash.omit": "^4.5.0",
     "lqip-modern": "^2.2.1",
     "next": "^15.0.3",
     "notion-client": "^7.1.3",
@@ -47,9 +48,12 @@
     "p-memoize": "^7.1.1",
     "posthog-js": "^1.181.0",
     "prismjs": "^1.29.0",
+    "raf": "^3.4.1",
+    "random": "^5.1.1",
     "react": "^18.2.0",
     "react-body-classname": "^1.3.1",
     "react-dom": "^18.2.0",
+    "react-fluid-animation": "^1.0.1",
     "react-notion-x": "^7.2.3",
     "react-tweet": "^3.2.1",
     "react-use": "^17.4.2",
@@ -58,7 +62,9 @@
   "devDependencies": {
     "@fisch0920/eslint-config": "^1.4.0",
     "@next/bundle-analyzer": "^15.0.2",
+    "@types/lodash.omit": "^4.5.6",
     "@types/node": "^22.8.6",
+    "@types/raf": "^3.4.3",
     "@types/react": "^18.0.21",
     "cross-env": "^7.0.2",
     "eslint": "^8.57.1",

pages/[pageId].tsx

@@ -14,7 +14,7 @@ export const getStaticProps: GetStaticProps<PageProps, Params> = async (
   try {
     const props = await resolveNotionPage(domain, rawPageId)
 
-    return { props, revalidate: 10 }
+    return { props, revalidate: 60 }
   } catch (err) {
     console.error('page error', domain, rawPageId, err)
 

pages/_app.tsx

@@ -1,5 +1,6 @@
 // used for rendering equations (optional)
-import 'katex/dist/katex.min.css'
+// import 'katex/dist/katex.min.css'
+
 // used for code syntax highlighting (optional)
 import 'prismjs/themes/prism-coy.css'
 // core styles shared by all of react-notion-x (required)

pages/_document.tsx

@@ -12,9 +12,19 @@ export default class MyDocument extends Document {
               rel='icon'
               type='image/png'
               sizes='32x32'
-              href='favicon.png'
+              href='favicon-32x32.png'
+            />
+            <link
+              rel='apple-touch-icon'
+              sizes='180x180'
+              href='/apple-touch-icon.png'
+            />
+            <link
+              rel='icon'
+              type='image/png'
+              sizes='96x96'
+              href='/favicon-96x96.png'
             />
-
             <link rel='manifest' href='/manifest.json' />
           </Head>
 

pages/index.tsx

@@ -6,7 +6,7 @@ export const getStaticProps = async () => {
   try {
     const props = await resolveNotionPage(domain)
 
-    return { props, revalidate: 10 }
+    return { props, revalidate: 60 }
   } catch (err) {
     console.error('page error', domain, err)
 

pages/robots.txt.tsx

@@ -14,8 +14,11 @@ export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
     }
   }
 
-  // cache for up to one day
-  res.setHeader('Cache-Control', 'public, max-age=86400, immutable')
+  // cache at vercel edge for up to one day
+  res.setHeader(
+    'Cache-Control',
+    'max-age=0, s-maxage=86400, stale-while-revalidate=3600'
+  )
   res.setHeader('Content-Type', 'text/plain')
 
   // only allow the site to be crawlable on the production deployment