mirror of
https://github.com/d0zingcat/nextjs-notion-starter-kit.git
synced 2026-05-14 07:26:43 +00:00
feat: improve page metadata display
This commit is contained in:
Travis Fischer
@@ -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
|
||||
}),
|
||||
[]
|
||||
)
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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,
|
||||
|
||||
30
yarn.lock
30
yarn.lock
@@ -2928,14 +2928,14 @@ 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:
|
||||
@@ -2943,10 +2943,10 @@ notion-types@^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==
|
||||
|
||||
Reference in New Issue
Block a user