feat: improve page metadata display

Author: transitive-bullshit

components/NotionPage.tsx

@@ -15,7 +15,7 @@ import { Tweet, TwitterContextProvider } from 'react-static-tweets'
 import { NotionRenderer } from 'react-notion-x'
 
 // utils
-import { getBlockTitle, getPageProperty } from 'notion-utils'
+import { getBlockTitle, getPageProperty, formatDate } from 'notion-utils'
 import { mapPageUrl, getCanonicalPageUrl } from 'lib/map-page-url'
 import { mapImageUrl } from 'lib/map-image-url'
 import { getPageTweet } from 'lib/get-page-tweet'
@@ -68,6 +68,30 @@ const Modal = dynamic(
   }
 )
 
+const propertyLastEditedTimeValue = (
+  { block, pageHeader },
+  defaultFn: () => React.ReactNode
+) => {
+  if (pageHeader && block?.last_edited_time) {
+    return `Last updated ${formatDate(block?.last_edited_time, {
+      month: 'long'
+    })}`
+  } else {
+    return defaultFn()
+  }
+}
+
+const propertyTextValue = (
+  { schema, pageHeader },
+  defaultFn: () => React.ReactNode
+) => {
+  if (pageHeader && schema?.name?.toLowerCase() === 'author') {
+    return <b>{defaultFn()}</b>
+  } else {
+    return defaultFn()
+  }
+}
+
 export const NotionPage: React.FC<types.PageProps> = ({
   site,
   recordMap,
@@ -87,7 +111,9 @@ export const NotionPage: React.FC<types.PageProps> = ({
       Pdf,
       Modal,
       Tweet,
-      Header: NotionPageHeader
+      Header: NotionPageHeader,
+      propertyLastEditedTimeValue,
+      propertyTextValue
     }),
     []
   )

package.json

@@ -39,16 +39,16 @@
     "next": "^12.1.1",
     "next-api-og-image": "^2.2.1",
     "node-fetch": "^2.6.1",
-    "notion-client": "^6.8.3",
+    "notion-client": "^6.9.1",
     "notion-types": "^6.7.0",
-    "notion-utils": "^6.8.3",
+    "notion-utils": "^6.9.1",
     "p-map": "^5.3.0",
     "p-memoize": "^6.0.1",
     "posthog-js": "^1.20.2",
     "react": "^17.0.2",
     "react-body-classname": "^1.3.1",
     "react-dom": "^17.0.2",
-    "react-notion-x": "^6.8.4",
+    "react-notion-x": "^6.9.1",
     "react-static-tweets": "^0.7.2",
     "react-use": "^17.3.2",
     "static-tweets": "^0.7.2"

pages/api/social-image.tsx

@@ -75,17 +75,26 @@ export default withOGImage<'query', 'id'>({
       //   getPageProperty<string>('Description', block, recordMap) ||
       //   config.description
 
+      const timeUpdated = getPageProperty<number>(
+        'Last Updated',
+        block,
+        recordMap
+      )
       const timePublished = getPageProperty<number>(
         'Published',
         block,
         recordMap
       )
-      const datePublished = timePublished ? new Date(timePublished) : undefined
+      const dateUpdated = timeUpdated
+        ? new Date(timeUpdated)
+        : timePublished
+        ? new Date(timePublished)
+        : undefined
       const date =
-        isBlogPost && datePublished
-          ? `${datePublished.toLocaleString('en-US', {
+        isBlogPost && dateUpdated
+          ? `${dateUpdated.toLocaleString('en-US', {
               month: 'long'
-            })} ${datePublished.getFullYear()}`
+            })} ${dateUpdated.getFullYear()}`
           : undefined
       const detail = date || site.domain
 

styles/notion.css

@@ -163,6 +163,10 @@
   text-align: center;
 }
 
+.notion-collection-row {
+  padding-bottom: 1em;
+}
+
 .notion-collection-page-properties .notion-collection-column-title {
   display: none;
 }
@@ -173,7 +177,10 @@
 }
 
 .notion-collection-row-value {
+  display: flex;
+  align-items: center;
   padding: 0;
+  min-height: 23px;
 }
 
 .notion-page-cover-wrapper,

yarn.lock

@@ -2928,25 +2928,25 @@ normalize-url@^7.0.3:
   resolved "https://registry.npmjs.org/normalize-url/-/normalize-url-7.0.3.tgz"
   integrity sha512-RiCOdwdPnzvwcBFJE4iI1ss3dMVRIrEzFpn8ftje6iBfzBInqlnRrNhxcLwBEKjPPXQKzm1Ptlxtaiv9wdcj5w==
 
-notion-client@^6.8.3:
-  version "6.8.3"
-  resolved "https://registry.yarnpkg.com/notion-client/-/notion-client-6.8.3.tgz#855f999fdddd0c69940b96ecf4045557bfdcecc1"
-  integrity sha512-o6ZJxn3N/cGqwxV9+3BY4cEIFsyb6zBbI5/GT2Xtj6+ZL7hBCK7OuJhOOhz3WyhIepQDUCt4z/YNwvWTdiBDyA==
+notion-client@^6.9.1:
+  version "6.9.1"
+  resolved "https://registry.yarnpkg.com/notion-client/-/notion-client-6.9.1.tgz#8a1294fcd2609133aba681166c4363917fde0ce7"
+  integrity sha512-YRFe7B2uF4OoBHVpNZKEr6a/l03/9iJav3kE8/V1FBnSZkdx7Bi4qboQHwoviWWuMmpYKbCS7+nJtn4AvMCkJw==
   dependencies:
     got "^11.8.1"
     notion-types "^6.7.0"
-    notion-utils "^6.8.3"
+    notion-utils "^6.9.1"
     p-map "^5.3.0"
 
 notion-types@^6.7.0:
   version "6.7.0"
   resolved "https://registry.yarnpkg.com/notion-types/-/notion-types-6.7.0.tgz#f5ccb8ef701389b2bf52e5561bd31bc60c49ccdf"
   integrity sha512-j7O6juQDOPgAinELMMpvVn0c8Vgr+Dhqm7UTTnhILnBhbOtQKaIYPCNKA4AJw/OPzzy1iEJ6KrthTEkPbQYEeg==
 
-notion-utils@^6.8.3:
-  version "6.8.3"
-  resolved "https://registry.yarnpkg.com/notion-utils/-/notion-utils-6.8.3.tgz#efc5973722517efa3e8cc915978996d689d84663"
-  integrity sha512-Nwqw19txK8WTHT5BhJLJ9BCqRkz7b1LdbCR3LeQuIhfs2zOHd56gWENT6jh5mmKrQn3PlinVjWo2pl3HwGKd3A==
+notion-utils@^6.9.1:
+  version "6.9.1"
+  resolved "https://registry.yarnpkg.com/notion-utils/-/notion-utils-6.9.1.tgz#203fd0f94277ed3e55ffb8febbeacbf9714d347a"
+  integrity sha512-w5+ha+oGSZvFMgkHuNGtFl6b4ZrYu5wgqlDani3mKJMmdwgEd3koYKv8OkXYF8VS7+YAqX9y4Avqt7xR1z5dtQ==
   dependencies:
     is-url-superb "^6.1.0"
     mem "^9.0.2"
@@ -3511,17 +3511,17 @@ react-modal@^3.14.3:
     react-lifecycles-compat "^3.0.0"
     warning "^4.0.3"
 
-react-notion-x@^6.8.4:
-  version "6.8.4"
-  resolved "https://registry.yarnpkg.com/react-notion-x/-/react-notion-x-6.8.4.tgz#5ef6ae3ac4ee5cd320fbcca7cd2e1f6aa47c1123"
-  integrity sha512-a3C2mApZrfUuoqjfM6xfSYL5dsHlgOp6smcfgFLHYDbdmg/XBih2/hBgw1CGhKcRa7L5EBVbwuOUkA0z2GDpLg==
+react-notion-x@^6.9.1:
+  version "6.9.1"
+  resolved "https://registry.yarnpkg.com/react-notion-x/-/react-notion-x-6.9.1.tgz#d209c262d83f66f374c4b507992b79789cf2c476"
+  integrity sha512-rTK7adUVo3FRtue1JOpBnG/ZOhNkv4NTqWi5Tf2/3Ptu5zqJed3Gu9Q/y6IfwMFoZmjIe4+yLIg/fO1TMSXPRg==
   dependencies:
     "@matejmazur/react-katex" "^3.1.3"
     "@radix-ui/react-dropdown-menu" "^0.1.6"
     katex "^0.13.18"
     medium-zoom "^1.0.6"
     notion-types "^6.7.0"
-    notion-utils "^6.8.3"
+    notion-utils "^6.9.1"
     prismjs "^1.27.0"
     react-fast-compare "^3.2.0"
     react-hotkeys-hook "^3.0.3"
@@ -4191,7 +4191,7 @@ swr@^1.0.0-beta.5:
   resolved "https://registry.npmjs.org/swr/-/swr-1.2.2.tgz"
   integrity sha512-ky0BskS/V47GpW8d6RU7CPsr6J8cr7mQD6+do5eky3bM0IyJaoi3vO8UhvrzJaObuTlGhPl2szodeB2dUd76Xw==
 
-tar-fs@*, tar-fs@^2.0.0, tar-fs@^2.1.1:
+tar-fs@^2.0.0, tar-fs@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.1.1.tgz#489a15ab85f1f0befabb370b7de4f9eb5cbe8784"
   integrity sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==