Skip to content

Commit 3bd1fab

Browse files
gauravmmgauravmm
committed
Dark mode dep fixed.
1 parent 9e3e107 commit 3bd1fab

File tree

8 files changed

+85
-121
lines changed

8 files changed

+85
-121
lines changed

‎components/Footer.tsx

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,31 @@
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 { FaEnvelopeOpenText, FaGithub, FaLinkedin, FaMastodon, FaTwitter, FaYoutube, FaZhihu } from 'react-icons/fa'
4+
import { IoMoonSharp, IoSunnyOutline } from 'react-icons/io5'
125

136
import * as config from '@/lib/config'
14-
import { useDarkMode } from '@/lib/use-dark-mode'
7+
import { DarkModeContext, useDarkMode } from '@/lib/use-dark-mode'
158

169
import styles from './styles.module.css'
1710

1811
// TODO: merge the data and icons from PageSocial with the social links in Footer
1912

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

2518
const onToggleDarkMode = React.useCallback(
2619
(e) => {
2720
e.preventDefault()
2821
toggleDarkMode()
2922
},
3023
[toggleDarkMode]
31-
)
24+
);
3225

3326
React.useEffect(() => {
3427
setHasMounted(true)
35-
}, [])
28+
}, []);
3629

3730
return (
3831
<footer className={styles.footer}>

‎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+
<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

‎lib/use-dark-mode.ts

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
import useDarkModeImpl from '@fisch0920/use-dark-mode'
1+
import React from "react";
2+
import { useLocalStorage } from "react-use";
23

3-
export function useDarkMode() {
4-
const darkMode = useDarkModeImpl(false, { classNameDark: 'dark-mode' })
54

5+
export function useDarkMode() {
6+
const [isDarkMode, setIsDarkMode] = useLocalStorage<boolean>('dark-mode', false)
67
return {
7-
isDarkMode: darkMode.value,
8-
toggleDarkMode: darkMode.toggle
8+
isDarkMode,
9+
toggleDarkMode: () => setIsDarkMode(!isDarkMode)
910
}
1011
}
12+
13+
export const DarkModeContext = React.createContext<ReturnType<typeof useDarkMode> | null>(null);

‎package-lock.json

Lines changed: 16 additions & 48 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"repository": "transitive-bullshit/nextjs-notion-starter-kit",
88
"license": "MIT",
99
"engines": {
10-
"node": ">=20.11"
10+
"node": ">=20"
1111
},
1212
"scripts": {
1313
"dev": "next dev",
@@ -25,10 +25,8 @@
2525
"test:prettier": "prettier '**/*.{js,jsx,ts,tsx}' --check"
2626
},
2727
"dependencies": {
28-
"@fisch0920/use-dark-mode": "^2.4.0",
2928
"@keyvhq/core": "^2.1.1",
3029
"@keyvhq/redis": "^2.1.4",
31-
"@react-icons/all-files": "^4.1.0",
3230
"@vercel/og": "^0.6.2",
3331
"classnames": "^2.5.1",
3432
"date-fns": "^3.6.0",
@@ -48,6 +46,7 @@
4846
"react-body-classname": "^1.3.1",
4947
"react-dom": "^18.3.1",
5048
"react-notion-x": "^6.16.0",
49+
"react-icons": "^5.2.1",
5150
"react-tweet-embed": "^2.0.0",
5251
"react-use": "^17.5.1",
5352
"rss": "^1.2.2"

‎pages/_document.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react'
22
import Document, { Head, Html, Main, NextScript } from 'next/document'
33

4-
import { IconContext } from '@react-icons/all-files'
4+
import { IconContext } from 'react-icons'
55

66
export default class MyDocument extends Document {
77
render() {

0 commit comments

Comments
 (0)