feat: preview image improvements

lib/config.ts

@@ -95,7 +95,8 @@ export const includeNotionIdInUrls: boolean = getSiteConfig(
 // ----------------------------------------------------------------------------
 
 // Optional redis instance for persisting preview images
-export const isRedisEnabled: boolean = getSiteConfig('isRedisEnabled', false)
+export const isRedisEnabled: boolean =
+  getSiteConfig('isRedisEnabled', false) || !!getEnv('REDIS_ENABLED', null)
 
 // (if you want to enable redis, only REDIS_HOST and REDIS_PASSWORD are required)
 // we recommend that you store these in a local `.env` file

lib/preview-images.ts

@@ -3,7 +3,7 @@ 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 { getPageImageUrls, normalizeUrl } from 'notion-utils'
 
 import { defaultPageIcon, defaultPageCover } from './config'
 import { db } from './db'
@@ -18,22 +18,32 @@ import { mapImageUrl } from './map-image-url'
 export async function getPreviewImageMap(
   recordMap: ExtendedRecordMap
 ): Promise<PreviewImageMap> {
-  const urls: string[] = getPageImageUrls(recordMap, { mapImageUrl })
+  const urls: string[] = getPageImageUrls(recordMap, {
+    mapImageUrl
+  })
     .concat([defaultPageIcon, defaultPageCover])
     .filter(Boolean)
 
   const previewImagesMap = Object.fromEntries(
-    await pMap(urls, async (url) => [url, await getPreviewImage(url)], {
-      concurrency: 8
-    })
+    await pMap(
+      urls,
+      async (url) => {
+        const cacheKey = normalizeUrl(url)
+        return [cacheKey, await getPreviewImage(url, { cacheKey })]
+      },
+      {
+        concurrency: 8
+      }
+    )
   )
 
   return previewImagesMap
 }
 
-async function createPreviewImage(url: string): Promise<PreviewImage | null> {
-  const cacheKey = url
-
+async function createPreviewImage(
+  url: string,
+  { cacheKey }: { cacheKey: string }
+): Promise<PreviewImage | null> {
   try {
     const cachedPreviewImage = await db.get(cacheKey)
     if (cachedPreviewImage) {
@@ -42,7 +52,7 @@ async function createPreviewImage(url: string): Promise<PreviewImage | null> {
 
     const { body } = await got(url, { responseType: 'buffer' })
     const result = await lqip(body)
-    console.log('lqip', result.metadata)
+    console.log('lqip', { ...result.metadata, url, cacheKey })
 
     const previewImage = {
       originalWidth: result.metadata.originalWidth,

package.json

@@ -27,14 +27,14 @@
   "dependencies": {
     "@keyv/redis": "^2.2.3",
     "classnames": "^2.3.1",
-    "date-fns": "^2.25.0",
+    "date-fns": "^2.28.0",
     "expiry-map": "^2.0.0",
-    "fathom-client": "^3.0.0",
-    "got": "^11.8.2",
+    "fathom-client": "^3.4.1",
+    "got": "^12.0.3",
     "isomorphic-unfetch": "^3.1.0",
     "keyv": "^4.1.1",
     "lqip-modern": "^1.2.0",
-    "next": "^12.1.0",
+    "next": "^12.1.1",
     "node-fetch": "^2.6.1",
     "notion-client": "^6.0.11",
     "notion-types": "^6.0.6",
@@ -54,7 +54,7 @@
   "devDependencies": {
     "@next/bundle-analyzer": "^12.1.0",
     "@types/classnames": "^2.3.1",
-    "@types/node": "^16.11.2",
+    "@types/node": "^17.0.23",
     "@types/node-fetch": "^3.0.3",
     "@types/react": "^17.0.31",
     "@typescript-eslint/eslint-plugin": "^5.15.0",

pages/_app.tsx

@@ -26,13 +26,9 @@ import 'styles/notion.css'
 // global style overrides for prism theme (optional)
 import 'styles/prism-theme.css'
 
-// here we're bringing in any languages we want to support for
-// syntax highlighting via Notion's Code block
-import 'prismjs'
-import 'prismjs/components/prism-markup'
-import 'prismjs/components/prism-javascript'
-import 'prismjs/components/prism-typescript'
-import 'prismjs/components/prism-bash'
+// import any languages we want to support for syntax highlighting via Notion's
+// Code block and prismjs
+// import 'prismjs/components/prism-typescript'
 
 import React from 'react'
 import { useRouter } from 'next/router'