Skip to content

Commit 663f5cd

Browse files
onnimonnionnimonni
authored
Merge pull request #2 from onnimonni/modernization-with-fixes
Merge modernization PR from the master and replace notion-react-x dependency with my fork
2 parents 0e40674 + b6db3ac commit 663f5cd

23 files changed

+2608
-2758
lines changed

‎.dockerignore

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.vscode/
2+
3+
.git/
4+
.github/
5+
6+
node_modules/
7+
*.log
8+

‎.mise.toml

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
[tools]
2+
# There was a moment when Notion search API was broken
3+
# It was fixed directly in react-notion-x dependency
4+
# When trying to replace the dependency I tried to run
5+
# $ brew install vips
6+
# $ yarn add https://github.com/NotionX/react-notion-x#v6.16.2
7+
# There's weird errors if one is building react-notion-x directly from github
8+
# 'ValueError: invalid mode: 'rU' while trying to load binding.gyp'
9+
# These should be fixed by downgrading python to 3.10
10+
# Source: https://stackoverflow.com/a/74732671
11+
python = ['3.10']
12+
13+
# The node-gyp module doesn't work properly when using node 20
14+
# TypeError: Cannot assign to read only property 'cflags' of object '#<Object>'
15+
# See more: https://stackoverflow.com/a/77910474/1337062
16+
node = ['20']
17+
"npm:yarn" = "latest"
18+
19+
# To be able to build the notion-react-x directly from Github master
20+
"npm:lerna" = "^4.0.0"

‎Dockerfile

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
FROM node:lts
2+
WORKDIR /app
3+
4+
COPY package.json /app
5+
COPY package-lock.json /app
6+
RUN npm ci
7+
8+
COPY . /app
9+
RUN npm run build
10+
11+
CMD ["npm", "run", "start"]

‎components/Footer.tsx

Lines changed: 25 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,30 @@
11
import * as React from 'react'
22

3-
import { FaEnvelopeOpenText } from '@react-icons/all-files/fa/FaEnvelopeOpenText'
4-
import { FaGithub } from '@react-icons/all-files/fa/FaGithub'
5-
import { FaLinkedin } from '@react-icons/all-files/fa/FaLinkedin'
6-
import { FaMastodon } from '@react-icons/all-files/fa/FaMastodon'
7-
import { FaTwitter } from '@react-icons/all-files/fa/FaTwitter'
8-
import { FaYoutube } from '@react-icons/all-files/fa/FaYoutube'
9-
import { FaZhihu } from '@react-icons/all-files/fa/FaZhihu'
10-
import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp'
11-
import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
3+
import { IoMoonSharp, IoSunnyOutline } from 'react-icons/io5'
124

135
import * as config from '@/lib/config'
14-
import { useDarkMode } from '@/lib/use-dark-mode'
15-
6+
import { DarkModeContext } from '@/lib/use-dark-mode'
7+
import { socialLinks } from './PageSocial'
168
import styles from './styles.module.css'
9+
import { cs } from 'react-notion-x'
1710

18-
// TODO: merge the data and icons from PageSocial with the social links in Footer
1911

2012
export const FooterImpl: React.FC = () => {
21-
const [hasMounted, setHasMounted] = React.useState(false)
22-
const { isDarkMode, toggleDarkMode } = useDarkMode()
23-
const currentYear = new Date().getFullYear()
13+
const [hasMounted, setHasMounted] = React.useState(false);
14+
const { isDarkMode, toggleDarkMode } = React.useContext(DarkModeContext);
15+
const currentYear = new Date().getFullYear();
2416

2517
const onToggleDarkMode = React.useCallback(
2618
(e) => {
2719
e.preventDefault()
2820
toggleDarkMode()
2921
},
3022
[toggleDarkMode]
31-
)
23+
);
3224

3325
React.useEffect(() => {
3426
setHasMounted(true)
35-
}, [])
27+
}, []);
3628

3729
return (
3830
<footer className={styles.footer}>
@@ -52,89 +44,29 @@ export const FooterImpl: React.FC = () => {
5244
)}
5345
</div>
5446

55-
<div className={styles.social}>
56-
{config.twitter && (
57-
<a
58-
className={styles.twitter}
59-
href={`https://twitter.com/${config.twitter}`}
60-
title={`Twitter @${config.twitter}`}
61-
target='_blank'
62-
rel='noopener noreferrer'
63-
>
64-
<FaTwitter />
65-
</a>
66-
)}
67-
68-
{config.mastodon && (
69-
<a
70-
className={styles.mastodon}
71-
href={config.mastodon}
72-
title={`Mastodon ${config.getMastodonHandle()}`}
73-
rel='me'
74-
>
75-
<FaMastodon />
76-
</a>
77-
)}
78-
79-
{config.zhihu && (
80-
<a
81-
className={styles.zhihu}
82-
href={`https://zhihu.com/people/${config.zhihu}`}
83-
title={`Zhihu @${config.zhihu}`}
84-
target='_blank'
85-
rel='noopener noreferrer'
86-
>
87-
<FaZhihu />
88-
</a>
89-
)}
47+
<style
48+
dangerouslySetInnerHTML={{
49+
__html: socialLinks.map((action) => (
50+
`.social-link-footer-${action.name} {}
51+
.social-link-footer-${action.name}:hover { color: ${action.color}; }
52+
`
53+
)).join('\n')
54+
}}
55+
/>
9056

91-
{config.github && (
92-
<a
93-
className={styles.github}
94-
href={`https://github.com/${config.github}`}
95-
title={`GitHub @${config.github}`}
96-
target='_blank'
97-
rel='noopener noreferrer'
98-
>
99-
<FaGithub />
100-
</a>
101-
)}
102-
103-
{config.linkedin && (
104-
<a
105-
className={styles.linkedin}
106-
href={`https://www.linkedin.com/in/${config.linkedin}`}
107-
title={`LinkedIn ${config.author}`}
108-
target='_blank'
109-
rel='noopener noreferrer'
110-
>
111-
<FaLinkedin />
112-
</a>
113-
)}
114-
115-
{config.newsletter && (
57+
<div className={styles.social}>
58+
{socialLinks.map((action) => (
11659
<a
117-
className={styles.newsletter}
118-
href={`${config.newsletter}`}
119-
title={`Newsletter ${config.author}`}
60+
className={cs(styles[action.name], `social-link-footer-${action.name}`)}
61+
href={action.href}
62+
title={action.title}
12063
target='_blank'
12164
rel='noopener noreferrer'
12265
>
123-
<FaEnvelopeOpenText />
66+
{action.icon({ size: 16 })}
12467
</a>
125-
)}
68+
))}
12669

127-
{config.youtube && (
128-
<a
129-
className={styles.youtube}
130-
href={`https://www.youtube.com/${config.youtube}`}
131-
title={`YouTube ${config.author}`}
132-
target='_blank'
133-
rel='noopener noreferrer'
134-
>
135-
<FaYoutube />
136-
</a>
137-
)}
13870
</div>
13971
</footer>
14072
)

‎components/NotionPage.tsx

Lines changed: 44 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import * as types from '@/lib/types'
1717
import { mapImageUrl } from '@/lib/map-image-url'
1818
import { getCanonicalPageUrl, mapPageUrl } from '@/lib/map-page-url'
1919
import { searchNotion } from '@/lib/search-notion'
20-
import { useDarkMode } from '@/lib/use-dark-mode'
20+
import { DarkModeContext, useDarkMode } from '@/lib/use-dark-mode'
2121

2222
import { Footer } from './Footer'
2323
import { GitHubShareButton } from './GitHubShareButton'
@@ -172,7 +172,7 @@ export const NotionPage: React.FC<types.PageProps> = ({
172172
// lite mode is for oembed
173173
const isLiteMode = lite === 'true'
174174

175-
const { isDarkMode } = useDarkMode()
175+
const { isDarkMode, toggleDarkMode } = useDarkMode()
176176

177177
const siteMapPageUrl = React.useMemo(() => {
178178
const params: any = {}
@@ -233,8 +233,8 @@ export const NotionPage: React.FC<types.PageProps> = ({
233233

234234
const socialImage = mapImageUrl(
235235
getPageProperty<string>('Social Image', block, recordMap) ||
236-
(block as PageBlock).format?.page_cover ||
237-
config.defaultPageCover,
236+
(block as PageBlock).format?.page_cover ||
237+
config.defaultPageCover,
238238
block
239239
)
240240

@@ -244,44 +244,46 @@ export const NotionPage: React.FC<types.PageProps> = ({
244244

245245
return (
246246
<>
247-
<PageHead
248-
pageId={pageId}
249-
site={site}
250-
title={title}
251-
description={socialDescription}
252-
image={socialImage}
253-
url={canonicalPageUrl}
254-
/>
255-
256-
{isLiteMode && <BodyClassName className='notion-lite' />}
257-
{isDarkMode && <BodyClassName className='dark-mode' />}
258-
259-
<NotionRenderer
260-
bodyClassName={cs(
261-
styles.notion,
262-
pageId === site.rootNotionPageId && 'index-page'
263-
)}
264-
darkMode={isDarkMode}
265-
components={components}
266-
recordMap={recordMap}
267-
rootPageId={site.rootNotionPageId}
268-
rootDomain={site.domain}
269-
fullPage={!isLiteMode}
270-
previewImages={!!recordMap.preview_images}
271-
showCollectionViewDropdown={false}
272-
showTableOfContents={showTableOfContents}
273-
minTableOfContentsItems={minTableOfContentsItems}
274-
defaultPageIcon={config.defaultPageIcon}
275-
defaultPageCover={config.defaultPageCover}
276-
defaultPageCoverPosition={config.defaultPageCoverPosition}
277-
mapPageUrl={siteMapPageUrl}
278-
mapImageUrl={mapImageUrl}
279-
searchNotion={config.isSearchEnabled ? searchNotion : null}
280-
pageAside={pageAside}
281-
footer={footer}
282-
/>
283-
284-
<GitHubShareButton />
247+
<DarkModeContext.Provider value={{ isDarkMode, toggleDarkMode }}>
248+
<PageHead
249+
pageId={pageId}
250+
site={site}
251+
title={title}
252+
description={socialDescription}
253+
image={socialImage}
254+
url={canonicalPageUrl}
255+
/>
256+
257+
{isLiteMode && <BodyClassName className='notion-lite' />}
258+
{isDarkMode && <BodyClassName className='dark-mode' />}
259+
260+
<NotionRenderer
261+
bodyClassName={cs(
262+
styles.notion,
263+
pageId === site.rootNotionPageId && 'index-page'
264+
)}
265+
darkMode={isDarkMode}
266+
components={components}
267+
recordMap={recordMap}
268+
rootPageId={site.rootNotionPageId}
269+
rootDomain={site.domain}
270+
fullPage={!isLiteMode}
271+
previewImages={!!recordMap.preview_images}
272+
showCollectionViewDropdown={false}
273+
showTableOfContents={showTableOfContents}
274+
minTableOfContentsItems={minTableOfContentsItems}
275+
defaultPageIcon={config.defaultPageIcon}
276+
defaultPageCover={config.defaultPageCover}
277+
defaultPageCoverPosition={config.defaultPageCoverPosition}
278+
mapPageUrl={siteMapPageUrl}
279+
mapImageUrl={mapImageUrl}
280+
searchNotion={config.isSearchEnabled ? searchNotion : null}
281+
pageAside={pageAside}
282+
footer={footer}
283+
/>
284+
285+
{config.isGithubShareButtonEnabled && <GitHubShareButton />}
286+
</DarkModeContext.Provider>
285287
</>
286288
)
287289
}

‎components/NotionPageHeader.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
11
import * as React from 'react'
22

3-
import * as types from 'notion-types'
4-
import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp'
5-
import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
63
import cs from 'classnames'
4+
import * as types from 'notion-types'
5+
import { IoMoonSharp, IoSunnyOutline } from 'react-icons/io5'
76
import { Breadcrumbs, Header, Search, useNotionContext } from 'react-notion-x'
87

98
import { isSearchEnabled, navigationLinks, navigationStyle } from '@/lib/config'
10-
import { useDarkMode } from '@/lib/use-dark-mode'
9+
import { DarkModeContext } from '@/lib/use-dark-mode'
1110

1211
import styles from './styles.module.css'
1312

1413
const ToggleThemeButton = () => {
1514
const [hasMounted, setHasMounted] = React.useState(false)
16-
const { isDarkMode, toggleDarkMode } = useDarkMode()
15+
const { isDarkMode, toggleDarkMode } = React.useContext(DarkModeContext)
1716

1817
React.useEffect(() => {
1918
setHasMounted(true)

‎components/PageActions.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react'
22

3-
import { AiOutlineRetweet } from '@react-icons/all-files/ai/AiOutlineRetweet'
4-
import { IoHeartOutline } from '@react-icons/all-files/io5/IoHeartOutline'
3+
import { AiOutlineRetweet } from 'react-icons/ai'
4+
import { IoHeartOutline } from 'react-icons/io5'
55

66
import styles from './styles.module.css'
77

0 commit comments

Comments
 (0)