Skip to content

Commit ad8e4b2

Browse files
transitive-bullshittransitive-bullshit
committed
feat: add root pages for examples
1 parent 1364fa5 commit ad8e4b2

File tree

8 files changed

+298
-155
lines changed

8 files changed

+298
-155
lines changed

‎examples/full/components/NotionPage.tsx‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import React from 'react'
2+
import Head from 'next/head'
3+
import Image from 'next/image'
4+
import dynamic from 'next/dynamic'
5+
6+
import { getPageTitle } from 'notion-utils'
7+
import { NotionRenderer } from 'react-notion-x'
8+
import { ExtendedRecordMap } from 'notion-types'
9+
10+
// -----------------------------------------------------------------------------
11+
// dynamic imports for optional components
12+
// -----------------------------------------------------------------------------
13+
14+
const Code = dynamic(() =>
15+
import('react-notion-x').then((notion) => notion.Code)
16+
)
17+
18+
const Collection = dynamic(() =>
19+
import('react-notion-x').then((notion) => notion.Collection)
20+
)
21+
22+
const CollectionRow = dynamic(
23+
() => import('react-notion-x').then((notion) => notion.CollectionRow),
24+
{
25+
ssr: false
26+
}
27+
)
28+
29+
// NOTE: PDF support via "react-pdf" can sometimes cause errors depending on your
30+
// build setup. If you're running into issues, just disable PDF support altogether.
31+
const Pdf = dynamic(
32+
() => import('react-notion-x').then((notion) => (notion as any).Pdf),
33+
{ ssr: false }
34+
)
35+
36+
const Equation = dynamic(() =>
37+
import('react-notion-x').then((notion) => notion.Equation)
38+
)
39+
40+
export const NotionPage = ({
41+
recordMap,
42+
previewImagesEnabled,
43+
rootPageId,
44+
rootDomain
45+
}: {
46+
recordMap: ExtendedRecordMap
47+
previewImagesEnabled?: boolean
48+
rootPageId?: string
49+
rootDomain?: string
50+
}) => {
51+
if (!recordMap) {
52+
return null
53+
}
54+
55+
const title = getPageTitle(recordMap)
56+
console.log(title, recordMap)
57+
58+
// useful for debugging from the dev console
59+
if (typeof window !== 'undefined') {
60+
const keys = Object.keys(recordMap?.block || {})
61+
const block = recordMap?.block?.[keys[0]]?.value
62+
const g = window as any
63+
g.recordMap = recordMap
64+
g.block = block
65+
}
66+
67+
return (
68+
<>
69+
<Head>
70+
<meta name='description' content='React Notion X Full Demo' />
71+
<title>{title}</title>
72+
</Head>
73+
74+
<NotionRenderer
75+
recordMap={recordMap}
76+
fullPage={true}
77+
darkMode={false}
78+
rootDomain={rootDomain}
79+
rootPageId={rootPageId}
80+
previewImages={previewImagesEnabled}
81+
components={{
82+
// remove this if you don't want to use next/image
83+
// NOTE: custom images will only take effect if previewImages is true and
84+
// if the image has a valid preview image defined in recordMap.preview_images[src]
85+
image: ({
86+
src,
87+
alt,
88+
89+
width,
90+
height,
91+
92+
className,
93+
style,
94+
95+
...rest
96+
}) => {
97+
const layout = width && height ? 'intrinsic' : 'fill'
98+
99+
return (
100+
<Image
101+
{...rest}
102+
className={className}
103+
src={src}
104+
alt={alt}
105+
width={layout === 'intrinsic' && width}
106+
height={layout === 'intrinsic' && height}
107+
objectFit={style?.objectFit}
108+
objectPosition={style?.objectPosition}
109+
layout={layout}
110+
/>
111+
)
112+
},
113+
code: Code,
114+
collection: Collection,
115+
collectionRow: CollectionRow,
116+
equation: Equation,
117+
pdf: Pdf
118+
}}
119+
/>
120+
</>
121+
)
122+
}

‎examples/full/lib/config.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// TODO: change these to your own values
2+
// NOTE: rootNotionSpaceId is optional; set it to undefined if you don't want to
3+
// use it.
4+
export const rootNotionPageId = '067dd719a912471ea9a3ac10710e7fdf'
5+
export const rootNotionSpaceId = 'fde5ac74-eea3-4527-8f00-4482710e1af3'
6+
7+
// NOTE: having this enabled can be pretty expensive as it re-generates preview
8+
// images each time a page is built. In a production setting, we recommend that
9+
// you cache the preview image results in a key-value database.
10+
export const previewImagesEnabled = true
11+
12+
export const isDev =
13+
process.env.NODE_ENV === 'development' || !process.env.NODE_ENV
14+
15+
export const port = process.env.PORT || 3000
16+
export const rootDomain = isDev ? `localhost:${port}` : null

‎examples/full/pages/[pageId].tsx‎

Lines changed: 20 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,24 @@
11
import React from 'react'
2-
import Head from 'next/head'
3-
import Image from 'next/image'
4-
import dynamic from 'next/dynamic'
52

63
import { NotionAPI } from 'notion-client'
7-
import { getPageTitle, getAllPagesInSpace } from 'notion-utils'
8-
import { NotionRenderer, defaultMapPageUrl } from 'react-notion-x'
9-
10-
import { getPreviewImages } from '../lib/preview-images'
4+
import { getAllPagesInSpace } from 'notion-utils'
5+
import { defaultMapPageUrl } from 'react-notion-x'
116
import { ExtendedRecordMap } from 'notion-types'
127

13-
// TODO: change these to your own values
14-
// NOTE: rootNotionSpaceId is optional; set it to undefined if you don't want to
15-
// use it.
16-
const rootNotionPageId = '067dd719a912471ea9a3ac10710e7fdf'
17-
const rootNotionSpaceId = 'fde5ac74-eea3-4527-8f00-4482710e1af3'
18-
19-
// NOTE: having this enabled can be pretty expensive as it re-generates preview
20-
// images each time a page is built. In a production setting, we recommend that
21-
// you cache the preview image results in a key-value database.
22-
const previewImagesEnabled = true
23-
24-
const isDev = process.env.NODE_ENV === 'development' || !process.env.NODE_ENV
25-
const notion = new NotionAPI()
26-
27-
// -----------------------------------------------------------------------------
28-
// dynamic imports for optional components
29-
// -----------------------------------------------------------------------------
30-
31-
const Code = dynamic(() =>
32-
import('react-notion-x').then((notion) => notion.Code)
33-
)
34-
35-
const Collection = dynamic(() =>
36-
import('react-notion-x').then((notion) => notion.Collection)
37-
)
38-
39-
const CollectionRow = dynamic(
40-
() => import('react-notion-x').then((notion) => notion.CollectionRow),
41-
{
42-
ssr: false
43-
}
44-
)
45-
46-
// NOTE: PDF support via "react-pdf" can sometimes cause errors depending on your
47-
// build setup. If you're running into issues, just disable PDF support altogether.
48-
const Pdf = dynamic(
49-
() => import('react-notion-x').then((notion) => (notion as any).Pdf),
50-
{ ssr: false }
51-
)
8+
import { getPreviewImages } from '../lib/preview-images'
9+
import { NotionPage } from '../components/NotionPage'
10+
import {
11+
rootNotionPageId,
12+
rootNotionSpaceId,
13+
rootDomain,
14+
isDev,
15+
previewImagesEnabled
16+
} from '../lib/config'
5217

53-
const Equation = dynamic(() =>
54-
import('react-notion-x').then((notion) => notion.Equation)
55-
)
18+
export const notion = new NotionAPI()
5619

5720
export const getStaticProps = async (context) => {
58-
const pageId = (context.params.pageId as string) || rootNotionPageId
21+
const pageId = context.params.pageId as string
5922
const recordMap = await notion.getPage(pageId)
6023

6124
if (previewImagesEnabled) {
@@ -101,83 +64,13 @@ export async function getStaticPaths() {
10164
}
10265
}
10366

104-
export default function NotionPage({
105-
recordMap
106-
}: {
107-
recordMap: ExtendedRecordMap
108-
}) {
109-
if (!recordMap) {
110-
return null
111-
}
112-
113-
const title = getPageTitle(recordMap)
114-
console.log(title, recordMap)
115-
116-
const port = process.env.PORT || 3000
117-
const rootDomain = isDev ? `localhost:${port}` : null
118-
119-
// useful for debugging from the dev console
120-
if (typeof window !== 'undefined') {
121-
const keys = Object.keys(recordMap?.block || {})
122-
const block = recordMap?.block?.[keys[0]]?.value
123-
const g = window as any
124-
g.recordMap = recordMap
125-
g.block = block
126-
}
127-
67+
export default function Page({ recordMap }: { recordMap: ExtendedRecordMap }) {
12868
return (
129-
<>
130-
<Head>
131-
<meta name='description' content='React Notion X demo' />
132-
<title>{title}</title>
133-
</Head>
134-
135-
<NotionRenderer
136-
recordMap={recordMap}
137-
fullPage={true}
138-
darkMode={false}
139-
rootDomain={rootDomain}
140-
rootPageId={rootNotionPageId}
141-
previewImages={previewImagesEnabled}
142-
components={{
143-
// remove this if you don't want to use next/image
144-
// NOTE: custom images will only take effect if previewImages is true and
145-
// if the image has a valid preview image defined in recordMap.preview_images[src]
146-
image: ({
147-
src,
148-
alt,
149-
150-
width,
151-
height,
152-
153-
className,
154-
style,
155-
156-
...rest
157-
}) => {
158-
const layout = width && height ? 'intrinsic' : 'fill'
159-
160-
return (
161-
<Image
162-
{...rest}
163-
className={className}
164-
src={src}
165-
alt={alt}
166-
width={layout === 'intrinsic' && width}
167-
height={layout === 'intrinsic' && height}
168-
objectFit={style?.objectFit}
169-
objectPosition={style?.objectPosition}
170-
layout={layout}
171-
/>
172-
)
173-
},
174-
code: Code,
175-
collection: Collection,
176-
collectionRow: CollectionRow,
177-
equation: Equation,
178-
pdf: Pdf
179-
}}
180-
/>
181-
</>
69+
<NotionPage
70+
recordMap={recordMap}
71+
rootDomain={rootDomain}
72+
rootPageId={rootNotionPageId}
73+
previewImagesEnabled={previewImagesEnabled}
74+
/>
18275
)
18376
}

‎examples/full/pages/index.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React from 'react'
2+
3+
import { NotionAPI } from 'notion-client'
4+
import { ExtendedRecordMap } from 'notion-types'
5+
6+
import { getPreviewImages } from '../lib/preview-images'
7+
import { NotionPage } from '../components/NotionPage'
8+
import {
9+
rootNotionPageId,
10+
rootDomain,
11+
previewImagesEnabled
12+
} from '../lib/config'
13+
14+
export const notion = new NotionAPI()
15+
16+
export const getStaticProps = async () => {
17+
const pageId = rootNotionPageId
18+
const recordMap = await notion.getPage(pageId)
19+
20+
if (previewImagesEnabled) {
21+
await getPreviewImages(recordMap)
22+
}
23+
24+
return {
25+
props: {
26+
recordMap
27+
},
28+
revalidate: 10
29+
}
30+
}
31+
32+
export default function Page({ recordMap }: { recordMap: ExtendedRecordMap }) {
33+
return (
34+
<NotionPage
35+
recordMap={recordMap}
36+
rootDomain={rootDomain}
37+
rootPageId={rootNotionPageId}
38+
previewImagesEnabled={previewImagesEnabled}
39+
/>
40+
)
41+
}

‎examples/minimal/components/NotionPage.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from 'react'
2+
import Head from 'next/head'
3+
4+
import { getPageTitle } from 'notion-utils'
5+
import { NotionRenderer } from 'react-notion-x'
6+
import { ExtendedRecordMap } from 'notion-types'
7+
8+
export const NotionPage = ({
9+
recordMap,
10+
rootPageId,
11+
rootDomain
12+
}: {
13+
recordMap: ExtendedRecordMap
14+
rootPageId?: string
15+
rootDomain?: string
16+
}) => {
17+
if (!recordMap) {
18+
return null
19+
}
20+
21+
const title = getPageTitle(recordMap)
22+
console.log(title, recordMap)
23+
24+
return (
25+
<>
26+
<Head>
27+
<meta name='description' content='React Notion X Minimal Demo' />
28+
<title>{title}</title>
29+
</Head>
30+
31+
<NotionRenderer
32+
recordMap={recordMap}
33+
fullPage={true}
34+
darkMode={false}
35+
rootDomain={rootDomain}
36+
rootPageId={rootPageId}
37+
/>
38+
</>
39+
)
40+
}

0 commit comments

Comments
 (0)