feat: improve styling, update deps, fixes

lib/map-image-url.ts

@@ -1,3 +1,12 @@
+import { Block } from 'notion-types'
 import { defaultMapImageUrl } from 'react-notion-x'
 
-export const mapImageUrl = defaultMapImageUrl
+import { defaultPageIcon, defaultPageCover } from './config'
+
+export const mapImageUrl = (url: string, block: Block) => {
+  if (url === defaultPageCover || url === defaultPageIcon) {
+    return url
+  }
+
+  return defaultMapImageUrl(url, block)
+}

lib/preview-images.ts

@@ -3,7 +3,9 @@ import lqip from 'lqip-modern'
 import pMap from 'p-map'
 import pMemoize from 'p-memoize'
 import { ExtendedRecordMap, PreviewImage, PreviewImageMap } from 'notion-types'
+import { getPageImageUrls } from 'notion-utils'
 
+import { defaultPageIcon, defaultPageCover } from './config'
 import { db } from './db'
 import { mapImageUrl } from './map-image-url'
 
@@ -16,41 +18,10 @@ import { mapImageUrl } from './map-image-url'
 export async function getPreviewImageMap(
   recordMap: ExtendedRecordMap
 ): Promise<PreviewImageMap> {
-  const blockIds = Object.keys(recordMap.block)
-  const imageUrls: string[] = blockIds
-    .map((blockId) => {
-      const block = recordMap.block[blockId]?.value
-
-      if (block) {
-        if (block.type === 'image') {
-          const signedUrl = recordMap.signed_urls?.[block.id]
-          const source = signedUrl || block.properties?.source?.[0]?.[0]
-
-          if (source) {
-            return {
-              block,
-              url: source
-            }
-          }
-        }
-
-        if ((block.format as any)?.page_cover) {
-          const source = (block.format as any).page_cover
-
-          return {
-            block,
-            url: source
-          }
-        }
-      }
-
-      return null
-    })
-    .filter(Boolean)
-    .map(({ block, url }) => mapImageUrl(url, block))
+  const urls: string[] = getPageImageUrls(recordMap, { mapImageUrl })
+    .concat([defaultPageIcon, defaultPageCover])
     .filter(Boolean)
 
-  const urls = Array.from(new Set(imageUrls))
   const previewImagesMap = Object.fromEntries(
     await pMap(urls, async (url) => [url, await getPreviewImage(url)], {
       concurrency: 8

next.config.js

@@ -11,7 +11,8 @@ module.exports = withBundleAnalyzer({
       'notion.so',
       'images.unsplash.com',
       'pbs.twimg.com',
-      'abs.twimg.com'
+      'abs.twimg.com',
+      'transitivebullsh.it'
     ],
     formats: ['image/avif', 'image/webp']
   }

package.json

@@ -36,16 +36,16 @@
     "lqip-modern": "^1.2.0",
     "next": "^12.1.0",
     "node-fetch": "^2.6.1",
-    "notion-client": "^6.0.2",
+    "notion-client": "^6.0.5",
     "notion-types": "^6.0.2",
-    "notion-utils": "^6.0.2",
+    "notion-utils": "^6.0.5",
     "p-map": "^5.3.0",
     "p-memoize": "^6.0.1",
     "react": "^17.0.2",
     "react-body-classname": "^1.3.1",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
-    "react-notion-x": "^6.0.2",
+    "react-notion-x": "^6.0.5",
     "react-static-tweets": "^0.7.1",
     "react-use": "^17.3.2",
     "static-tweets": "^0.7.1",

styles/notion.css

@@ -324,8 +324,8 @@
   border-radius: 16px;
 }
 
-/* if you don't want rounded page images, remove this */
-.notion-page-icon-wrapper img.notion-page-icon {
+/* if you don't want rounded page icon images, remove this */
+.notion-page-icon-hero.notion-page-icon-image img.notion-page-icon {
   border-radius: 50%;
   box-shadow: 0 8px 40px 0 rgb(0 0 0 / 21%);
 }

yarn.lock

@@ -2111,6 +2111,11 @@ is-url-superb@4:
   resolved "https://registry.yarnpkg.com/is-url-superb/-/is-url-superb-4.0.0.tgz#b54d1d2499bb16792748ac967aa3ecb41a33a8c2"
   integrity sha512-GI+WjezhPPcbM+tqE9LnmsY5qqjwHzTvjJ36wxYX5ujNXefSUJ/T17r5bqDV8yLhcgB59KTPNOc9O9cmHTPWsA==
 
+is-url-superb@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/is-url-superb/-/is-url-superb-6.1.0.tgz#182f0d92b482412afeadfba8e6ea2c76680e3631"
+  integrity sha512-LXdhGlYqUPdvEyIhWPEEwYYK3yrUiPcBjmFGlZNv1u5GtIL5qQRf7ddDyPNAvsMFqdzS923FROpTQU97tLe3JQ==
+
 is-weakref@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.1.tgz#842dba4ec17fa9ac9850df2d6efbc1737274f2a2"
@@ -2569,26 +2574,27 @@ normalize-url@^6.0.1:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a"
   integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==
 
-notion-client@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/notion-client/-/notion-client-6.0.2.tgz#b2d57d10b15600909745cc51f2568cd161248345"
-  integrity sha512-pLudRb0ARP9HH98zIma3KWVzfE/p2d6/HpphxAIJaFMDZoieCh5Pv97mtiYlvf+ovChG8rQUnzv+hMhMsNHpmw==
+notion-client@^6.0.5:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/notion-client/-/notion-client-6.0.5.tgz#39991aa21c81aea5580125c29dd92b89ff9c9f76"
+  integrity sha512-5xUhwVPfHO/CIqMTK/78qqbnDaXNAhvBz86Gv8PumuveSMLRKgBfQ2QuXgj0F+cTxRoGSA+RZD+s/D31z/sJSg==
   dependencies:
     got "^11.8.1"
     notion-types "^6.0.2"
-    notion-utils "^6.0.2"
+    notion-utils "^6.0.5"
     p-map "^5.3.0"
 
 notion-types@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/notion-types/-/notion-types-6.0.2.tgz#23caae984f27eb266377cb257ba467e676510cda"
   integrity sha512-KFc9d+MbqLHh0nh3Tf+XDCizTAMg387Yv9xlSuDWI4V67/FX9ptiByjzHZdglxmgySzgNkN8/EKrTyKO0Kf/EQ==
 
-notion-utils@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/notion-utils/-/notion-utils-6.0.2.tgz#94169e0d3197006a69dcfc75613a931e372674a1"
-  integrity sha512-bz91gapW+yc/ABgx6RHpKdwcoPFH1TkNF2SHoWpG55JJ5ImcAh99jVOn1UByAOHnI0c26vHXrWwdvZZV6Zh55w==
+notion-utils@^6.0.5:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/notion-utils/-/notion-utils-6.0.5.tgz#7ba2cfdcb77549c429878e901505c7b44569a198"
+  integrity sha512-bdVLH4sHkglaN+mfvjB5wD0zfLQ0rbSvT76dQnp29aemvSIHVBxRAexkwnKhKMlYZsBVksFmtJmWt5Xm9Mw96A==
   dependencies:
+    is-url-superb "^6.1.0"
     notion-types "^6.0.2"
     p-queue "^7.2.0"
 
@@ -3151,10 +3157,10 @@ react-modal@^3.14.3:
     react-lifecycles-compat "^3.0.0"
     warning "^4.0.3"
 
-react-notion-x@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/react-notion-x/-/react-notion-x-6.0.2.tgz#10b9e6f9485e042094d19d1ed40d8d63b6b24e6f"
-  integrity sha512-Rh237nW2Y+a6HH0HB2JvvBU7VzFNXk9PZ3iNUUXW34ZaprOgSMsKEtywqYlguHEezLMihpBtVQymtIrr6i5tLg==
+react-notion-x@^6.0.5:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/react-notion-x/-/react-notion-x-6.0.5.tgz#a31e604754124290561da4f9f8a1bffc976b7b94"
+  integrity sha512-tBKJRRlhQuYcI4jm7UxqekNsPU35t/Hgi6mv6gE2OKXYE5Q8tkHHAr1rlp4zIal8wK9gxbvIfEzOJU+lingh/g==
   dependencies:
     "@matejmazur/react-katex" "^3.1.3"
     date-fns "^2.15.0"
@@ -3164,7 +3170,7 @@ react-notion-x@^6.0.2:
     lodash.throttle "^4.1.1"
     medium-zoom "^1.0.6"
     notion-types "^6.0.2"
-    notion-utils "^6.0.2"
+    notion-utils "^6.0.5"
     prismjs "^1.27.0"
     rc-dropdown "^3.3.3"
     rc-menu "^9.5.1"