From 4c707c1df1ab7acba308d0e93b2c5b6c4214c7b0 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Mon, 3 Jan 2022 17:56:12 +0800 Subject: [PATCH 01/16] =?UTF-8?q?feature:=20=E5=B0=81=E8=A3=85=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/FloatDarkModeButton.js | 3 ++- lib/global.js | 44 +------------------------------ lib/theme.js | 44 +++++++++++++++++++++++++++++++ 3 files changed, 47 insertions(+), 44 deletions(-) create mode 100644 lib/theme.js diff --git a/components/FloatDarkModeButton.js b/components/FloatDarkModeButton.js index 077e904a..3e3b246e 100644 --- a/components/FloatDarkModeButton.js +++ b/components/FloatDarkModeButton.js @@ -1,7 +1,8 @@ import { useEffect, useState } from 'react' -import { loadUserThemeFromCookies, saveTheme, useGlobal } from '@/lib/global' +import { useGlobal } from '@/lib/global' import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { loadUserThemeFromCookies, saveTheme } from '@/lib/theme' export default function FloatDarkModeButton () { const [show, switchShow] = useState(false) diff --git a/lib/global.js b/lib/global.js index a5346535..a9e3cac5 100644 --- a/lib/global.js +++ b/lib/global.js @@ -1,7 +1,7 @@ import lang from './lang' import { useContext, createContext, useState, useEffect } from 'react' -import cookie from 'react-cookies' import Router from 'next/router' +import { initTheme, loadUserThemeFromCookies } from './theme' const GlobalContext = createContext() /** @@ -76,48 +76,6 @@ const initLocale = (locale, changeLocale) => { } } } -/** - * 初始化主题 - * @param theme 用户默认主题state - * @param changeTheme 更改主题ChangeState函数 - * @description 读取cookie中存的用户主题 - */ -const initTheme = (theme, changeTheme) => { - if (!theme) { - const date = new Date() - const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches - const useDark = prefersDarkMode || (date.getHours() >= 18 || date.getHours() < 6) - const htmlElement = document.getElementsByTagName('html') - - if (useDark) { - changeTheme('dark') - saveTheme('dark') - htmlElement.classList?.remove('light') - htmlElement.classList?.add('dark') - } else { - changeTheme('light') - saveTheme('light') - htmlElement.classList?.remove('dark') - htmlElement.classList?.add('light') - } - } -} - -/** - * 读取默认主题 - * @returns {*} - */ -export const loadUserThemeFromCookies = () => { - return cookie.load('theme') -} - -/** - * 保存默认主题 - * @param newTheme - */ -export const saveTheme = (newTheme) => { - cookie.save('theme', newTheme, { path: '/' }) -} /** * 深度合并两个对象 diff --git a/lib/theme.js b/lib/theme.js new file mode 100644 index 00000000..b1865298 --- /dev/null +++ b/lib/theme.js @@ -0,0 +1,44 @@ +import cookie from 'react-cookies' + +/** + * 初始化主题 + * @param theme 用户默认主题state + * @param changeTheme 更改主题ChangeState函数 + * @description 读取cookie中存的用户主题 + */ +export const initTheme = (theme, changeTheme) => { + // 若未指定主题，则从时间和浏览器偏好中决定初始主题 + if (!theme) { + const date = new Date() + const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches + const useDark = prefersDarkMode || (date.getHours() >= 18 || date.getHours() < 6) + if (useDark) { + theme = 'dark' + } else { + theme = 'light' + } + } + if (typeof window !== 'undefined') { + const htmlElement = document.getElementsByTagName('html') + htmlElement.className = '' + changeTheme(theme) + saveTheme(theme) + htmlElement.classList?.add(theme) + } +} + +/** + * 读取默认主题 + * @returns {*} + */ +export const loadUserThemeFromCookies = () => { + return cookie.load('theme') +} + +/** + * 保存默认主题 + * @param newTheme + */ +export const saveTheme = (newTheme) => { + cookie.save('theme', newTheme, { path: '/' }) +} From 03f4771b68d76ef60e9bd2a310f731fa838737f4 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Sat, 8 Jan 2022 22:23:23 +0800 Subject: [PATCH 02/16] =?UTF-8?q?bugfix=EF=BC=9A=20=E5=85=BC=E5=AE=B9table?= =?UTF-8?q?=E8=A7=86=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/notion/getAllPageIds.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/notion/getAllPageIds.js b/lib/notion/getAllPageIds.js index 6821925e..5eb15570 100644 --- a/lib/notion/getAllPageIds.js +++ b/lib/notion/getAllPageIds.js @@ -15,7 +15,8 @@ export default function getAllPageIds (collectionQuery, viewId) { } else { const pageSet = new Set() Object.values(views).forEach(view => { - view?.blockIds?.forEach(id => pageSet.add(id)) + view?.blockIds?.forEach(id => pageSet.add(id)) // group视图 + view?.collection_group_results?.blockIds?.forEach(id => pageSet.add(id)) // table视图 }) pageIds = [...pageSet] } From 22b8447ac6a10f4489e3bd795d5aece6bad01b2a Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Sat, 8 Jan 2022 22:30:11 +0800 Subject: [PATCH 03/16] refactor merge : theme --- components/FloatDarkModeButton.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/FloatDarkModeButton.js b/components/FloatDarkModeButton.js index 63ae157e..ae082836 100644 --- a/components/FloatDarkModeButton.js +++ b/components/FloatDarkModeButton.js @@ -1,8 +1,9 @@ import { useEffect, useState } from 'react' -import { loadUserThemeFromCookies, saveTheme, useGlobal } from '@/lib/global' +import { useGlobal } from '@/lib/global' import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import BLOG from '@/blog.config' +import { loadUserThemeFromCookies, saveTheme } from '@/lib/theme' export default function FloatDarkModeButton () { if (!BLOG.widget?.showDarkMode) { From 69abbd8e3ed494a1dbe0397f746891c6246c0624 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Tue, 11 Jan 2022 10:25:29 +0800 Subject: [PATCH 04/16] =?UTF-8?q?feature:=20=E4=BC=98=E5=8C=96=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E4=BD=93=E7=A7=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/about.js | 8 ++++---- pages/article/[slug].js | 3 --- pages/search.js | 2 +- pages/tag/index.js | 7 +++---- 4 files changed, 8 insertions(+), 12 deletions(-) diff --git a/pages/about.js b/pages/about.js index 28a93342..0ccfeae3 100644 --- a/pages/about.js +++ b/pages/about.js @@ -21,7 +21,7 @@ import React from 'react' * @param {*} param0 * @returns */ -const About = ({ post, blockMap, tags, prev, next, allPosts, categories }) => { +const About = ({ post, blockMap, tags, prev, next, postCount, categories }) => { if (!post) { return } @@ -39,10 +39,10 @@ const About = ({ post, blockMap, tags, prev, next, allPosts, categories }) => { meta={meta} tags={tags} post={post} - totalPosts={allPosts} + postCount={postCount} categories={categories} > - + ) } @@ -69,7 +69,7 @@ export async function getStaticProps () { const next = allPosts.slice(index + 1, index + 2)[0] ?? allPosts[0] return { - props: { post, blockMap, tags, prev, next, allPosts, categories, postCount, latestPosts }, + props: { post, blockMap, tags, prev, next, categories, postCount, latestPosts }, revalidate: 1 } } diff --git a/pages/article/[slug].js b/pages/article/[slug].js index 8f055522..0a5c4bbb 100644 --- a/pages/article/[slug].js +++ b/pages/article/[slug].js @@ -16,7 +16,6 @@ const Slug = ({ tags, prev, next, - allPosts, recommendPosts, categories, postCount, @@ -39,7 +38,6 @@ const Slug = ({ post={post} postCount={postCount} latestPosts={latestPosts} - totalPosts={allPosts} categories={categories} > { +const Search = ({ posts, tags, categories, postCount }) => { let filteredPosts = [] const searchKey = getSearchKey() if (searchKey) { diff --git a/pages/tag/index.js b/pages/tag/index.js index 54405469..6977f37d 100644 --- a/pages/tag/index.js +++ b/pages/tag/index.js @@ -7,14 +7,14 @@ import { faTags } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import React from 'react' -export default function Tag ({ tags, allPosts, categories, postCount, latestPosts }) { +export default function Tag ({ tags, categories, postCount, latestPosts }) { const { locale } = useGlobal() const meta = { title: `${locale.COMMON.TAGS} | ${BLOG.title}`, description: BLOG.description, type: 'website' } - return + return
{locale.COMMON.TAGS}:
@@ -28,12 +28,11 @@ export default function Tag ({ tags, allPosts, categories, postCount, latestPost export async function getStaticProps () { const from = 'tag-index-props' - const { allPosts, categories, tags, postCount, latestPosts } = await getGlobalNotionData({ from, includePage: true, tagsCount: 0 }) + const { categories, tags, postCount, latestPosts } = await getGlobalNotionData({ from, includePage: true, tagsCount: 0 }) return { props: { tags, - posts: allPosts, categories, postCount, latestPosts From c2906083c3c49e75c076dcbbdb3c4f90b86311af Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Tue, 11 Jan 2022 10:51:05 +0800 Subject: [PATCH 05/16] =?UTF-8?q?bugfix:=20=E4=BF=AE=E5=A4=8D=E6=90=9C?= =?UTF-8?q?=E7=B4=A2=E8=83=8C=E6=99=AF=E9=81=AE=E7=BD=A9=E6=97=A0=E6=B3=95?= =?UTF-8?q?=E7=82=B9=E5=87=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/SearchDrawer.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/components/SearchDrawer.js b/components/SearchDrawer.js index d21dc3b4..da417f52 100644 --- a/components/SearchDrawer.js +++ b/components/SearchDrawer.js @@ -13,6 +13,7 @@ const SearchDrawer = ({ cRef }) => { } }) const hidden = () => { + console.log('点击') searchDrawer?.current?.classList?.add('hidden') } Router.events.on('routeChangeComplete', (...args) => { @@ -20,14 +21,14 @@ const SearchDrawer = ({ cRef }) => { }) return (
-
+
{/* 背景蒙版 */} -
+
) } From c70836a6a3e3ea302ed3fcf1b7abc3909c13c431 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Tue, 11 Jan 2022 10:57:37 +0800 Subject: [PATCH 06/16] feature: TopNav switchMenuShow --- components/TopNav.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/components/TopNav.js b/components/TopNav.js index 20fe43d8..021e7f23 100644 --- a/components/TopNav.js +++ b/components/TopNav.js @@ -43,6 +43,11 @@ const TopNav = ({ tags, currentTag, post, slot, categories, currentCategory, aut BLOG.autoCollapsedNavBar && window.removeEventListener('scroll', scrollTrigger) } }, []) + + const switchMenuShow = () => { + drawer?.current?.handleSwitchSideDrawerVisible() + } + return (
{/* 侧面抽屉 */} @@ -53,7 +58,7 @@ const TopNav = ({ tags, currentTag, post, slot, categories, currentCategory, aut
{/* 左侧LOGO 标题 */}
-
{ drawer.current.handleSwitchSideDrawerVisible() }} +
From 9e6707149d1ae7c72ff031f5c24b6e91539fb213 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Tue, 11 Jan 2022 13:44:30 +0800 Subject: [PATCH 07/16] =?UTF-8?q?feature:=20collapse=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Analytics.js | 8 +++---- components/BlogPostListScroll.js | 4 ++-- components/Collapse.js | 38 ++++++++++++++++++++++++++++++++ components/MenuButtonGroup.js | 17 ++++++++------ components/SearchDrawer.js | 1 - components/SideAreaLeft.js | 6 ++--- components/TopNav.js | 33 +++++++++++++++------------ layouts/BaseLayout.js | 2 +- 8 files changed, 77 insertions(+), 32 deletions(-) create mode 100644 components/Collapse.js diff --git a/components/Analytics.js b/components/Analytics.js index fbd23538..c7655654 100644 --- a/components/Analytics.js +++ b/components/Analytics.js @@ -13,10 +13,10 @@ export default function Analytics ({ postCount }) {
{postCount}{locale.COMMON.POSTS} - {/* */} - {/* | {locale.COMMON.VISITORS} */} - - | {locale.COMMON.VIEWS} + + | {locale.COMMON.VISITORS} + {/* + | {locale.COMMON.VIEWS} */}
} diff --git a/components/BlogPostListScroll.js b/components/BlogPostListScroll.js index 07fd9be1..1c378bfa 100644 --- a/components/BlogPostListScroll.js +++ b/components/BlogPostListScroll.js @@ -55,7 +55,7 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = BLOG.home return
{/* 文章列表 */} -
+
{postsToShow.map(post => ( ))} @@ -65,7 +65,7 @@ const BlogPostListScroll = ({ posts = [], currentSearch, showSummary = BLOG.home
{ handleGetMore() }} - className='w-full my-4 py-4 text-center cursor-pointer glassmorphism shadow-xl rounded-xl dark:text-gray-200' + className='w-full my-4 py-4 text-center cursor-pointer glassmorphism shadow-xl rounded-xl dark:text-gray-200' > {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`}
diff --git a/components/Collapse.js b/components/Collapse.js new file mode 100644 index 00000000..baca44cc --- /dev/null +++ b/components/Collapse.js @@ -0,0 +1,38 @@ +import React, { useEffect, useRef } from 'react' + +const Collapse = props => { + const collapseRef = useRef(null) + const collapseSection = element => { + const sectionHeight = element.scrollHeight + requestAnimationFrame(function () { + element.style.height = sectionHeight + 'px' + requestAnimationFrame(function () { + element.style.height = 0 + 'px' + }) + }) + } + const expandSection = element => { + const sectionHeight = element.scrollHeight + element.style.height = sectionHeight + 'px' + const clearTime = setTimeout(() => { + element.style.height = 'auto' + }, 400) + clearTimeout(clearTime) + } + useEffect(() => { + const element = collapseRef.current + if (props.isOpen) { + expandSection(element) + } else { + collapseSection(element) + } + }, [props.isOpen]) + return ( +
+ {props.children} +
+ ) +} +Collapse.defaultProps = { isOpen: false } + +export default Collapse diff --git a/components/MenuButtonGroup.js b/components/MenuButtonGroup.js index eda4cfdf..38df8131 100644 --- a/components/MenuButtonGroup.js +++ b/components/MenuButtonGroup.js @@ -6,27 +6,30 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faArchive, faHome, faTag, faTh, faUser } from '@fortawesome/free-solid-svg-icons' import BLOG from 'blog.config' -const MenuButtonGroup = ({ allowCollapse = false }) => { +const MenuButtonGroup = ({ allowCollapse = false, postCount }) => { const { locale } = useGlobal() const router = useRouter() + const archiveSlot =
{postCount}
+ const links = [ { id: 0, icon: faHome, name: locale.NAV.INDEX, to: '/' || '/', show: true }, - { id: 1, icon: faArchive, name: locale.NAV.ARCHIVE, to: '/archive', show: BLOG.menu.showArchive }, - { id: 2, icon: faTh, name: locale.COMMON.CATEGORY, to: '/category', show: BLOG.menu.showCategory }, - { id: 3, icon: faTag, name: locale.COMMON.TAGS, to: '/tag', show: BLOG.menu.showTag }, + { id: 1, icon: faTh, name: locale.COMMON.CATEGORY, to: '/category', show: BLOG.menu.showCategory }, + { id: 2, icon: faTag, name: locale.COMMON.TAGS, to: '/tag', show: BLOG.menu.showTag }, + { id: 3, icon: faArchive, name: locale.NAV.ARCHIVE, to: '/archive', slot: archiveSlot, show: BLOG.menu.showArchive }, { id: 4, icon: faUser, name: locale.NAV.ABOUT, to: '/about', show: BLOG.menu.showAbout } ] - return