feat: update deps; fix eslint issues; fix bug with collections

.github/workflows/build.yml

@@ -1,40 +1,29 @@
 name: CI
 
-on: [push, pull_request]
+on: [push]
 
 jobs:
   test:
     name: Test Node.js ${{ matrix.node-version }}
     runs-on: ubuntu-latest
+
     strategy:
       fail-fast: true
       matrix:
         node-version:
-          - 18
+          - 20
           - 22
 
     steps:
-      - 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
-
-      - name: Install Node.js
-        uses: actions/setup-node@v4
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'pnpm'
 
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile --strict-peer-dependencies
-
-      - name: Run test
-        run: pnpm test
+      - run: pnpm install --frozen-lockfile --strict-peer-dependencies
+      - run: pnpm test
 
       # TODO Enable those lines below if you use a Redis cache, you'll also need to configure GitHub Repository Secrets
       # env:

.prettierignore

@@ -4,6 +4,3 @@ dist/
 node_modules/
 .next/
 .vercel/
-
-.demo/
-.renderer/

components/Footer.tsx

@@ -22,7 +22,7 @@ export function FooterImpl() {
   const currentYear = new Date().getFullYear()
 
   const onToggleDarkMode = React.useCallback(
-    (e) => {
+    (e: any) => {
       e.preventDefault()
       toggleDarkMode()
     },

components/NotionPage.tsx

@@ -39,36 +39,67 @@ const Code = dynamic(() =>
   import('react-notion-x/build/third-party/code').then(async (m) => {
     // add / remove any prism syntaxes here
     await Promise.allSettled([
+      // @ts-expect-error Ignore prisma types
       import('prismjs/components/prism-markup-templating.js'),
+      // @ts-expect-error Ignore prisma types
       import('prismjs/components/prism-markup.js'),
+      // @ts-expect-error Ignore prisma types
       import('prismjs/components/prism-bash.js'),
+      // @ts-expect-error Ignore prisma types
       import('prismjs/components/prism-c.js'),
+      // @ts-expect-error Ignore prisma types
       import('prismjs/components/prism-cpp.js'),
+      // @ts-expect-error Ignore prisma types
       import('prismjs/components/prism-csharp.js'),
+      // @ts-expect-error Ignore prisma types
       import('prismjs/components/prism-docker.js'),
+      // @ts-expect-error Ignore prisma types
       import('prismjs/components/prism-java.js'),
+      // @ts-expect-error Ignore prisma types
       import('prismjs/components/prism-js-templates.js'),
+      // @ts-expect-error Ignore prisma types
       import('prismjs/components/prism-coffeescript.js'),
+      // @ts-expect-error Ignore prisma types
       import('prismjs/components/prism-diff.js'),
+      // @ts-expect-error Ignore prisma types
       import('prismjs/components/prism-git.js'),
+      // @ts-expect-error Ignore prisma types
       import('prismjs/components/prism-go.js'),
+      // @ts-expect-error Ignore prisma types
       import('prismjs/components/prism-graphql.js'),
+      // @ts-expect-error Ignore prisma types
       import('prismjs/components/prism-handlebars.js'),
+      // @ts-expect-error Ignore prisma types
       import('prismjs/components/prism-less.js'),
+      // @ts-expect-error Ignore prisma types
       import('prismjs/components/prism-makefile.js'),
+      // @ts-expect-error Ignore prisma types
       import('prismjs/components/prism-markdown.js'),
+      // @ts-expect-error Ignore prisma types
       import('prismjs/components/prism-objectivec.js'),
+      // @ts-expect-error Ignore prisma types
       import('prismjs/components/prism-ocaml.js'),
+      // @ts-expect-error Ignore prisma types
       import('prismjs/components/prism-python.js'),
+      // @ts-expect-error Ignore prisma types
       import('prismjs/components/prism-reason.js'),
+      // @ts-expect-error Ignore prisma types
       import('prismjs/components/prism-rust.js'),
+      // @ts-expect-error Ignore prisma types
       import('prismjs/components/prism-sass.js'),
+      // @ts-expect-error Ignore prisma types
       import('prismjs/components/prism-scss.js'),
+      // @ts-expect-error Ignore prisma types
       import('prismjs/components/prism-solidity.js'),
+      // @ts-expect-error Ignore prisma types
       import('prismjs/components/prism-sql.js'),
+      // @ts-expect-error Ignore prisma types
       import('prismjs/components/prism-stylus.js'),
+      // @ts-expect-error Ignore prisma types
       import('prismjs/components/prism-swift.js'),
+      // @ts-expect-error Ignore prisma types
       import('prismjs/components/prism-wasm.js'),
+      // @ts-expect-error Ignore prisma types
       import('prismjs/components/prism-yaml.js')
     ])
     return m.Code
@@ -112,7 +143,7 @@ function Tweet({ id }: { id: string }) {
 }
 
 const propertyLastEditedTimeValue = (
-  { block, pageHeader },
+  { block, pageHeader }: any,
   defaultFn: () => React.ReactNode
 ) => {
   if (pageHeader && block?.last_edited_time) {
@@ -125,7 +156,7 @@ const propertyLastEditedTimeValue = (
 }
 
 const propertyDateValue = (
-  { data, schema, pageHeader },
+  { data, schema, pageHeader }: any,
   defaultFn: () => React.ReactNode
 ) => {
   if (pageHeader && schema?.name?.toLowerCase() === 'published') {
@@ -142,7 +173,7 @@ const propertyDateValue = (
 }
 
 const propertyTextValue = (
-  { schema, pageHeader },
+  { schema, pageHeader }: any,
   defaultFn: () => React.ReactNode
 ) => {
   if (pageHeader && schema?.name?.toLowerCase() === 'author') {
@@ -189,11 +220,11 @@ export function NotionPage({
     if (lite) params.lite = lite
 
     const searchParams = new URLSearchParams(params)
-    return mapPageUrl(site, recordMap, searchParams)
+    return site ? mapPageUrl(site, recordMap!, searchParams) : undefined
   }, [site, recordMap, lite])
 
   const keys = Object.keys(recordMap?.block || {})
-  const block = recordMap?.block?.[keys[0]]?.value
+  const block = recordMap?.block?.[keys[0]!]?.value
 
   // const isRootPage =
   //   parsePageId(block?.id) === parsePageId(site?.rootNotionPageId)
@@ -205,7 +236,11 @@ export function NotionPage({
 
   const pageAside = React.useMemo(
     () => (
-      <PageAside block={block} recordMap={recordMap} isBlogPost={isBlogPost} />
+      <PageAside
+        block={block!}
+        recordMap={recordMap!}
+        isBlogPost={isBlogPost}
+      />
     ),
     [block, recordMap, isBlogPost]
   )
@@ -238,8 +273,9 @@ export function NotionPage({
     g.block = block
   }
 
-  const canonicalPageUrl =
-    !config.isDev && getCanonicalPageUrl(site, recordMap)(pageId)
+  const canonicalPageUrl = config.isDev
+    ? undefined
+    : getCanonicalPageUrl(site, recordMap)(pageId)
 
   const socialImage = mapImageUrl(
     getPageProperty<string>('Social Image', block, recordMap) ||
@@ -286,7 +322,7 @@ export function NotionPage({
         defaultPageCoverPosition={config.defaultPageCoverPosition}
         mapPageUrl={siteMapPageUrl}
         mapImageUrl={mapImageUrl}
-        searchNotion={config.isSearchEnabled ? searchNotion : null}
+        searchNotion={config.isSearchEnabled ? searchNotion : undefined}
         pageAside={pageAside}
         footer={footer}
       />

components/NotionPageHeader.tsx

@@ -51,7 +51,7 @@ export function NotionPageHeader({
         <div className='notion-nav-header-rhs breadcrumbs'>
           {navigationLinks
             ?.map((link, index) => {
-              if (!link.pageId && !link.url) {
+              if (!link?.pageId && !link?.url) {
                 return null
               }
 

components/styles.module.css

@@ -19,7 +19,8 @@
   line-height: 1.5;
   color: rgb(55, 53, 47);
   caret-color: rgb(55, 53, 47);
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica,
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica,
     'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol';
   background-color: var(--bg-color);
 }

eslint.config.js

@@ -0,0 +1,22 @@
+import { config } from '@fisch0920/config/eslint'
+
+export default [
+  ...config,
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    rules: {
+      'react/prop-types': 'off',
+      'unicorn/no-array-reduce': 'off',
+      'unicorn/filename-case': 'off',
+      'unicorn/prefer-global-this': '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'
+    }
+  }
+]

lib/acl.ts

@@ -4,7 +4,7 @@ export async function pageAcl({
   site,
   recordMap,
   pageId
-}: PageProps): Promise<PageProps> {
+}: PageProps): Promise<PageProps | undefined> {
   if (!site) {
     return {
       error: {