Refactor to latest react-notion-x

.eslintrc.json

@@ -1,27 +1,17 @@
 {
   "root": true,
-  "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint", "react", "react-hooks"],
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react/recommended",
-    "plugin:react-hooks/recommended",
-    "prettier"
-  ],
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  },
-  "env": {
-    "browser": true,
-    "node": true
-  },
+  "extends": ["@fisch0920/eslint-config"],
   "rules": {
-    "@typescript-eslint/no-explicit-any": 0,
-    "@typescript-eslint/no-non-null-assertion": 0,
-    "@typescript-eslint/no-unused-vars": 2,
-    "react/prop-types": 0
+    "react/prop-types": "off",
+    "unicorn/no-array-reduce": "off",
+    "unicorn/filename-case": "off",
+    "no-process-env": "off",
+    "array-callback-return": "off",
+    "jsx-a11y/click-events-have-key-events": "off",
+    "jsx-a11y/no-static-element-interactions": "off",
+    "jsx-a11y/media-has-caption": "off",
+    "jsx-a11y/interactive-supports-focus": "off",
+    "jsx-a11y/anchor-is-valid": "off",
+    "@typescript-eslint/naming-convention": "off"
   }
 }

.github/workflows/build.yml

@@ -1,22 +1,44 @@
-name: Build
+name: CI
 
 on: [push, pull_request]
 
 jobs:
-  Build:
+  test:
+    name: Test Node.js ${{ matrix.node-version }}
     runs-on: ubuntu-latest
+    strategy:
+      fail-fast: true
+      matrix:
+        node-version:
+          - 18
+          - 22
+
     steps:
-      - uses: actions/checkout@v3
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v3
+        id: pnpm-install
+        with:
+          version: 9.12.2
+          run_install: false
 
-      - uses: actions/setup-node@v3
+      - name: Install Node.js
+        uses: actions/setup-node@v4
         with:
-          node-version: 16
-          cache: yarn
-
-      - run: yarn install --frozen-lockfile
-      - name: build
-        #        TODO Enable those lines below if you use a Redis cache, you'll also need to configure GitHub Repository Secrets
-        #        env:
-        #          REDIS_HOST: ${{ secrets.REDIS_HOST }}
-        #          REDIS_PASSWORD: ${{ secrets.REDIS_PASSWORD }}
-        run: yarn build
+          node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile --strict-peer-dependencies
+
+      - name: Run test
+        run: pnpm test
+
+      # TODO Enable those lines below if you use a Redis cache, you'll also need to configure GitHub Repository Secrets
+      # env:
+      #   REDIS_HOST: ${{ secrets.REDIS_HOST }}
+      #   REDIS_PASSWORD: ${{ secrets.REDIS_PASSWORD }}
+      # - name: Build
+      #   run: pnpm build

.prettierrc

@@ -7,14 +7,5 @@
   "bracketSpacing": true,
   "bracketSameLine": false,
   "arrowParens": "always",
-  "trailingComma": "none",
-  "importOrder": [
-    "^(react/(.*)$)|^(react$)|^(next/(.*)$)|^(next$)",
-    "<THIRD_PARTY_MODULES>",
-    "^(@/lib/(.*)$)|^(@/components/(.*)$)|^(@/styles/(.*)$)",
-    "^[./]"
-  ],
-  "importOrderSeparation": true,
-  "importOrderSortSpecifiers": true,
-  "importOrderGroupNamespaceSpecifiers": true
+  "trailingComma": "none"
 }

.vscode/launch.json

@@ -8,7 +8,6 @@
       "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/next",
       "runtimeArgs": ["dev"],
       "cwd": "${workspaceFolder}",
-      "port": 9229,
       "smartStep": true,
       "console": "integratedTerminal",
       "skipFiles": ["<node_internals>/**"],

components/ErrorPage.tsx

@@ -1,9 +1,7 @@
-import * as React from 'react'
-
 import { PageHead } from './PageHead'
 import styles from './styles.module.css'
 
-export const ErrorPage: React.FC<{ statusCode: number }> = ({ statusCode }) => {
+export function ErrorPage({ statusCode }: { statusCode: number }) {
   const title = 'Error'
 
   return (

components/Footer.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react'
-
 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'
@@ -9,6 +7,7 @@ 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 * as React from 'react'
 
 import * as config from '@/lib/config'
 import { useDarkMode } from '@/lib/use-dark-mode'
@@ -17,7 +16,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 = () => {
+export function FooterImpl() {
   const [hasMounted, setHasMounted] = React.useState(false)
   const { isDarkMode, toggleDarkMode } = useDarkMode()
   const currentYear = new Date().getFullYear()
@@ -36,7 +35,9 @@ export const FooterImpl: React.FC = () => {
 
   return (
     <footer className={styles.footer}>
-      <div className={styles.copyright}>Copyright {currentYear} {config.author}</div>
+      <div className={styles.copyright}>
+        Copyright {currentYear} {config.author}
+      </div>
 
       <div className={styles.settings}>
         {hasMounted && (

components/GitHubShareButton.tsx

@@ -1,8 +1,6 @@
-import * as React from 'react'
-
 import styles from './styles.module.css'
 
-export const GitHubShareButton: React.FC = () => {
+export function GitHubShareButton() {
   return (
     <a
       href='https://github.com/transitive-bullshit/nextjs-notion-starter-kit'

components/Loading.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react'
-
 import { LoadingIcon } from './LoadingIcon'
 import styles from './styles.module.css'
 
-export const Loading: React.FC = () => (
-  <div className={styles.container}>
-    <LoadingIcon />
-  </div>
-)
+export function Loading() {
+  return (
+    <div className={styles.container}>
+      <LoadingIcon />
+    </div>
+  )
+}

components/LoadingIcon.tsx

@@ -1,10 +1,8 @@
-import * as React from 'react'
-
 import cs from 'classnames'
 
 import styles from './styles.module.css'
 
-export const LoadingIcon = (props) => {
+export function LoadingIcon(props: any) {
   const { className, ...rest } = props
   return (
     <svg

components/NotionPage.tsx

@@ -1,19 +1,18 @@
-import * as React from 'react'
+import cs from 'classnames'
 import dynamic from 'next/dynamic'
-import Image from 'next/image'
+import Image from 'next/legacy/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-
-import cs from 'classnames'
-import { PageBlock } from 'notion-types'
+import { type PageBlock } from 'notion-types'
 import { formatDate, getBlockTitle, getPageProperty } from 'notion-utils'
+import * as React from 'react'
 import BodyClassName from 'react-body-classname'
 import { NotionRenderer } from 'react-notion-x'
 import TweetEmbed from 'react-tweet-embed'
 import { useSearchParam } from 'react-use'
 
+import type * as types from '@/lib/types'
 import * as config from '@/lib/config'
-import * as types from '@/lib/types'
 import { mapImageUrl } from '@/lib/map-image-url'
 import { getCanonicalPageUrl, mapPageUrl } from '@/lib/map-page-url'
 import { searchNotion } from '@/lib/search-notion'
@@ -97,7 +96,7 @@ const Modal = dynamic(
   }
 )
 
-const Tweet = ({ id }: { id: string }) => {
+function Tweet({ id }: { id: string }) {
   return <TweetEmbed tweetId={id} />
 }
 
@@ -142,12 +141,12 @@ const propertyTextValue = (
   return defaultFn()
 }
 
-export const NotionPage: React.FC<types.PageProps> = ({
+export function NotionPage({
   site,
   recordMap,
   error,
   pageId
-}) => {
+}: types.PageProps) {
   const router = useRouter()
   const lite = useSearchParam('lite')
 

components/NotionPageHeader.tsx

@@ -1,17 +1,16 @@
-import * as React from 'react'
-
-import * as types from 'notion-types'
+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 { isSearchEnabled, navigationLinks, navigationStyle } from '@/lib/config'
 import { useDarkMode } from '@/lib/use-dark-mode'
 
 import styles from './styles.module.css'
 
-const ToggleThemeButton = () => {
+function ToggleThemeButton() {
   const [hasMounted, setHasMounted] = React.useState(false)
   const { isDarkMode, toggleDarkMode } = useDarkMode()
 
@@ -33,9 +32,11 @@ const ToggleThemeButton = () => {
   )
 }
 
-export const NotionPageHeader: React.FC<{
+export function NotionPageHeader({
+  block
+}: {
   block: types.CollectionViewPageBlock | types.PageBlock
-}> = ({ block }) => {
+}) {
   const { components, mapPageUrl } = useNotionContext()
 
   if (navigationStyle === 'default') {

components/Page404.tsx

@@ -1,11 +1,9 @@
-import * as React from 'react'
-
-import * as types from '@/lib/types'
+import type * as types from '@/lib/types'
 
 import { PageHead } from './PageHead'
 import styles from './styles.module.css'
 
-export const Page404: React.FC<types.PageProps> = ({ site, pageId, error }) => {
+export function Page404({ site, pageId, error }: types.PageProps) {
   const title = site?.name || 'Notion Page Not Found'
 
   return (

components/PageActions.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react'
-
 import { AiOutlineRetweet } from '@react-icons/all-files/ai/AiOutlineRetweet'
 import { IoHeartOutline } from '@react-icons/all-files/io5/IoHeartOutline'
 
@@ -8,7 +6,7 @@ import styles from './styles.module.css'
 /**
  * @see https://developer.twitter.com/en/docs/twitter-for-websites/web-intents/overview
  */
-export const PageActions: React.FC<{ tweet: string }> = ({ tweet }) => {
+export function PageActions({ tweet }: { tweet: string }) {
   return (
     <div className={styles.pageActions}>
       <a

components/PageAside.tsx

@@ -1,17 +1,19 @@
-import * as React from 'react'
-
-import { Block, ExtendedRecordMap } from 'notion-types'
+import { type Block, type ExtendedRecordMap } from 'notion-types'
 
 import { getPageTweet } from '@/lib/get-page-tweet'
 
 import { PageActions } from './PageActions'
 import { PageSocial } from './PageSocial'
 
-export const PageAside: React.FC<{
+export function PageAside({
+  block,
+  recordMap,
+  isBlogPost
+}: {
   block: Block
   recordMap: ExtendedRecordMap
   isBlogPost: boolean
-}> = ({ block, recordMap, isBlogPost }) => {
+}) {
   if (!block) {
     return null
   }