d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-17 23:16:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #756 from tangly1024/feat-font-debug

Browse Source 
Feat font debug
This commit is contained in:
tangly1024
2023-02-09 12:27:22 +08:00
committed by GitHub
parent 2e4f0484bc 8cb74d0002
commit 528b5184f5
31 changed files with 149 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.local
View File

@@ -1,2 +1,2 @@
# 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
NEXT_PUBLIC_VERSION=3.9.4
NEXT_PUBLIC_VERSION=3.9.5

3
blog.config.js
View File

@@ -22,7 +22,8 @@ const BLOG = {
CONTACT_TELEGRAM: 'https://t.me/tangly_1024', // 你的telegram 地址 例如 https://t.me/tangly_1024
CONTACT_LINKEDIN: '', // 你的linkedIn 首页
// 网站默认使用PingFangSC及NotoSansSC，
// 网站默认使用PingFangSC及NotoSansSC
FONT_STYLE: 'font-serif', // ['font-serif','font-sans'] 两种可选，分别是衬线和无衬线: 参考 https://www.jianshu.com/p/55e410bd2115
// 如需自定义字体，请将CUSTOM_FONT改为 true，并将CUSTOM_FONT_URL改为你的字体CSS地址，同时在CUSTOM_FONT_SANS与CUSTOM_FONT_SERIF中指定你的font-family
CUSTOM_FONT: process.env.NEXT_PUBLIC_CUSTOM_FONT || false, // 是否使用自定义字体
// 自定义字体示例： 请先将 CUSTOM_FONT 改为 true， 并将 CUSTOM_FONT_URL 改为你的字体CSS地址，同时在 CUSTOM_FONT_SANS 与 CUSTOM_FONT_SERIF 中指定你的 fontfamily

173
components/DebugPanel.js
View File

@@ -1,6 +1,6 @@
import BLOG from '@/blog.config'
import * as ThemeMap from '@/themes'
import { useState } from 'react'
import { useEffect, useState } from 'react'
import Select from './Select'
import { ALL_THEME } from '@/themes'
import { useGlobal } from '@/lib/global'
@@ -8,20 +8,39 @@ import { useGlobal } from '@/lib/global'
*
* @returns 调试面板
*/
export function DebugPanel () {
export function DebugPanel() {
const [show, setShow] = useState(false)
const { theme, changeTheme, switchTheme } = useGlobal()
const { theme, changeTheme, switchTheme, locale } = useGlobal()
const [siteConfig, updateSiteConfig] = useState({})
const [themeConfig, updateThemeConfig] = useState({})
const [debugTheme, updateDebugTheme] = useState(BLOG.THEME)
const themeOptions = []
ALL_THEME.forEach(t => {
themeOptions.push({ value: t, text: t })
})
// 主题下拉框
const themeOptions = ALL_THEME.map(t => ({ value: t, text: t }))
function toggleShow () {
useEffect(() => {
changeTheme(BLOG.THEME)
updateSiteConfig(Object.assign({}, BLOG))
updateThemeConfig(Object.assign({}, ThemeMap[BLOG.THEME].THEME_CONFIG))
}, [])
function toggleShow() {
setShow(!show)
}
function filterResult (text) {
function handleChangeDebugTheme() {
const newTheme = switchTheme()
updateThemeConfig(Object.assign({}, ThemeMap[newTheme].THEME_CONFIG))
updateDebugTheme(newTheme)
}
function handleUpdateDebugTheme(e) {
changeTheme(e)
updateThemeConfig(Object.assign({}, ThemeMap[theme].THEME_CONFIG))
updateDebugTheme(e)
}
function filterResult(text) {
switch (text) {
case 'true':
return <span className='text-green-500'>true</span>
@@ -34,76 +53,72 @@ export function DebugPanel () {
}
return (
<>
{/* 调试按钮 */}
<div>
<div
style={{ writingMode: 'vertical-lr' }}
className={`bg-black text-white shadow-2xl p-2.5 rounded-l-xl cursor-pointer ${show ? 'right-96' : 'right-0'} fixed bottom-36 duration-200 z-50`}
onClick={toggleShow}
>
{show
? (
<i className="fas fa-times">&nbsp;关闭调试</i>
)
: (
<i className="fas fa-tools">&nbsp;打开调试</i>
)}
</div>
</div>
<div
className={` ${
show ? 'shadow-card' : '-right-96'
} w-96 overflow-y-scroll font-sans h-full p-5 bg-white fixed right-0 bottom-0 z-50 duration-200`}
>
<div className="flex space-x-1 my-12">
<Select
label="主题切换"
value={theme}
options={themeOptions}
onChange={changeTheme}
/>
<div className="p-2 cursor-pointer" onClick={switchTheme}>
<i className="fas fa-sync" />
</div>
</div>
<div>
<div className="font-bold w-18 border-b my-2">
站点配置[blog.config.js]
</div>
<div className="text-xs">
{Object.keys(BLOG).map(k => (
<div key={k} className="justify-between flex py-1">
<span className="bg-blue-400 p-0.5 rounded text-white mr-2">
{k}
</span>
<span className="whitespace-nowrap">
{filterResult(BLOG[k] + '')}
</span>
</div>
))}
</div>
</div>
<div>
<div className="font-bold w-18 border-b my-2">
主题配置{'(config_' + theme + '.js)'}:
</div>
<div className="text-xs">
{Object.keys(ThemeMap[theme].THEME_CONFIG).map(k => (
<div key={k} className="justify-between flex py-1">
<span className="bg-indigo-500 p-0.5 rounded text-white mr-2">
{k}
</span>
<span className="whitespace-nowrap">
{filterResult(ThemeMap[theme].THEME_CONFIG[k] + '')}
</span>
<>
{/* 调试按钮 */}
<div>
<div
style={{ writingMode: 'vertical-lr' }}
className={`bg-black text-white shadow-2xl p-2.5 rounded-l-xl cursor-pointer ${show ? 'right-96' : 'right-0'} fixed bottom-56 duration-200 z-50`}
onClick={toggleShow}
>
{show
? <i className="fas fa-times">&nbsp;{locale.COMMON.DEBUG_CLOSE}</i>
: <i className="fas fa-tools">&nbsp;{locale.COMMON.DEBUG_OPEN}</i>}
</div>
))}
</div>
</div>
</div>
</>
</div>
{/* 调试侧拉抽屉 */}
<div
className={` ${show ? 'shadow-card' : '-right-96'} w-96 overflow-y-scroll h-full p-5 bg-white fixed right-0 bottom-0 z-50 duration-200`}
>
<div className="flex space-x-1 my-5">
<Select
label={locale.COMMON.THEME_SWITCH}
value={debugTheme}
options={themeOptions}
onChange={handleUpdateDebugTheme}
/>
<div className="p-2 cursor-pointer" onClick={handleChangeDebugTheme}>
<i className="fas fa-sync" />
</div>
</div>
<div>
<div>
<div className="font-bold w-18 border-b my-2">
主题配置{`config_${debugTheme}.js`}:
</div>
<div className="text-xs">
{Object.keys(themeConfig).map(k => (
<div key={k} className="justify-between flex py-1">
<span className="bg-indigo-500 p-0.5 rounded text-white mr-2">
{k}
</span>
<span className="whitespace-nowrap">
{filterResult(themeConfig[k] + '')}
</span>
</div>
))}
</div>
</div>
<div className="font-bold w-18 border-b my-2">
站点配置[blog.config.js]
</div>
<div className="text-xs">
{siteConfig && Object.keys(siteConfig).map(k => (
<div key={k} className="justify-between flex py-1">
<span className="bg-blue-500 p-0.5 rounded text-white mr-2">
{k}
</span>
<span className="whitespace-nowrap">
{filterResult(siteConfig[k] + '')}
</span>
</div>
))}
</div>
</div>
</div>
</>
)
}

4
lib/global.js
View File

@@ -37,7 +37,9 @@ export function GlobalContextProvider({ children }) {
function switchTheme() {
const currentIndex = ALL_THEME.indexOf(theme)
const newIndex = currentIndex < ALL_THEME.length - 1 ? currentIndex + 1 : 0
changeTheme(ALL_THEME[newIndex])
const newTheme = ALL_THEME[newIndex]
changeTheme(newTheme)
return newTheme
}
function changeTheme(theme) {

5
lib/lang/en-US.js
View File

@@ -35,7 +35,10 @@ export default {
SUBMIT: 'Submit',
POST_TIME: 'Post on',
LAST_EDITED_TIME: 'Last edited',
RECENT_COMMENTS: 'Recent Comments'
RECENT_COMMENTS: 'Recent Comments',
DEBUG_OPEN: 'Debug',
DEBUG_CLOSE: 'Close',
THEME_SWITCH: 'Theme Switch'
},
PAGINATION: {
PREV: 'Prev',

5
lib/lang/zh-CN.js
View File

@@ -37,7 +37,10 @@ export default {
SUBMIT: '提交',
POST_TIME: '发布于',
LAST_EDITED_TIME: '最后更新',
RECENT_COMMENTS: '最新评论'
RECENT_COMMENTS: '最新评论',
DEBUG_OPEN: '开启调试',
DEBUG_CLOSE: '关闭调试',
THEME_SWITCH: '切换主题'
},
PAGINATION: {
PREV: '上一页',

4
lib/notion/getNotionData.js
View File

@@ -236,8 +236,8 @@ async function getPageRecordMapByNotionAPI({ pageId, from }) {
})
}
const categoryOptions = getAllCategories({ allPages, categoryOptions: getCategoryOptions(schema), sliceCount: BLOG.PREVIEW_CATEGORY_COUNT })
const tagOptions = getAllTags({ allPages, sliceCount: BLOG.PREVIEW_TAG_COUNT, tagOptions: getTagOptions(schema) })
const categoryOptions = getAllCategories({ allPages, categoryOptions: getCategoryOptions(schema) })
const tagOptions = getAllTags({ allPages, tagOptions: getTagOptions(schema) })
const siteInfo = getBlogInfo({ collection, block })
const customNav = getCustomNav({ allPages: collectionData.filter(post => post.type === 'Page' && post.status === 'Published') })
const latestPosts = getLatestPosts({ allPages, from, latestPostCount: 5 })

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "notion-next",
"version": "3.9.4",
"version": "3.9.5",
"homepage": "https://github.com/tangly1024/NotionNext.git",
"license": "MIT",
"repository": {

2
pages/_document.js
View File

@@ -17,7 +17,7 @@ class MyDocument extends Document {
<CommonScript />
</Head>
<body className={'tracking-wider subpixel-antialiased bg-day dark:bg-night'}>
<body className={`${BLOG.FONT_STYLE} tracking-wider bg-day dark:bg-night`}>
<Main />
<NextScript />
</body>

2
pages/search/index.js
View File

@@ -19,7 +19,7 @@ const Search = props => {
return searchContent.toLowerCase().includes(searchKey.toLowerCase())
})
} else {
filteredPosts = posts
filteredPosts = []
}
const { locale } = useGlobal()

2
themes/example/components/ExampleRecentComments.js
View File

@@ -29,7 +29,7 @@ const ExampleRecentComments = (props) => {
<div className='dark:text-gray-400 text-gray-400 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}>--{comment.nick}</Link></div>
</div>)}
</>;
</>
}
export default ExampleRecentComments

4
themes/fukasawa/components/GroupMenu.js
View File

@@ -39,13 +39,13 @@ function GroupMenu ({ customNav }) {
{link.slot}
</Link>
);
)
} else {
return null
}
})}
</nav>
);
)
}
export default GroupMenu

2
themes/hexo/LayoutBase.js
View File

@@ -71,7 +71,7 @@ const LayoutBase = props => {
id="container-inner"
className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' pt-14 w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'}
>
<div className="w-full max-w-4xl overflow-x-hidden scroll-hidden">
<div className="w-full max-w-4xl h-full">
{onLoading ? <LoadingCover /> : children}
</div>
<SideRight {...props} slot={rightAreaSlot} />

7
themes/medium/LayoutBase.js
View File

@@ -42,10 +42,13 @@ const LayoutBase = props => {
{slotTop}
{children}
</div>
{/* 底部 */}
<Footer title={siteInfo?.title} />
</div>
{/* 桌面端右侧 */}
<div className='hidden xl:block border-l dark:border-transparent w-96 relative z-10'>
<div className={`hidden xl:block border-l dark:border-transparent w-96 relative z-10 ${CONFIG_MEDIUM.RIGHT_PANEL_DARK ? 'bg-hexo-black-gray dark' : ''}`}>
<div className='py-14 px-6 sticky top-0'>
<Tabs>
{slotRight}
@@ -64,8 +67,6 @@ const LayoutBase = props => {
</div>
{/* 移动端底部 */}
<Footer title={siteInfo?.title} />
<BottomMenuBar {...props} className='block md:hidden' />
</div>
</ThemeGlobalMedium.Provider>

2
themes/medium/LayoutCategory.js
View File

@@ -5,7 +5,7 @@ import BLOG from '@/blog.config'
export const LayoutCategory = props => {
const { category } = props
const slotTop = <div className='flex items-center font-sans py-8'><div className='text-xl'><i className='mr-2 fas fa-th' />分类：</div>{category}</div>
const slotTop = <div className='flex items-center py-8'><div className='text-xl'><i className='mr-2 fas fa-th' />分类：</div>{category}</div>
return <LayoutBase {...props} slotTop={slotTop}>
{BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}

7
themes/medium/LayoutSlug.js
View File

@@ -3,7 +3,6 @@ import { useGlobal } from '@/lib/global'
import React from 'react'
import Catalog from './components/Catalog'
import { ArticleLock } from './components/ArticleLock'
import JumpToTopButton from './components/JumpToTopButton'
import formatDate from '@/lib/formatDate'
import BLOG from '@/blog.config'
import Link from 'next/link'
@@ -31,7 +30,7 @@ export const LayoutSlug = props => {
const slotRight = post?.toc && post?.toc?.length > 3 && (
<div key={locale.COMMON.TABLE_OF_CONTENTS} >
<Catalog toc={post.toc} />
<JumpToTopButton className='text-gray-400 hover:text-green-500 hover:bg-gray-100 py-1 duration-200' />
{/* <JumpToTopButton className='text-gray-400 hover:text-green-500 hover:bg-gray-100 py-1 duration-200' /> */}
</div>
)
@@ -43,10 +42,10 @@ export const LayoutSlug = props => {
{!lock && <div id='container'>
{/* title */}
<h1 className="text-3xl pt-12 font-sans dark:text-gray-300">{post?.title}</h1>
<h1 className="text-3xl pt-12 dark:text-gray-300">{post?.title}</h1>
{/* meta */}
<section className="py-2 items-center text-sm font-sans px-1">
<section className="py-2 items-center text-sm px-1">
<div className='flex flex-wrap text-gray-500 py-1 dark:text-gray-600'>
<span className='whitespace-nowrap'> <i className='far fa-calendar mr-2' />{date}</span>
<span className='mx-1'>|</span>

2
themes/medium/LayoutTag.js
View File

@@ -5,7 +5,7 @@ import BlogPostListPage from './components/BlogPostListPage'
export const LayoutTag = (props) => {
const { tag } = props
const slotTop = <div className='flex items-center font-sans py-8'><div className='text-xl'><i className='mr-2 fas fa-tag'/>标签：</div>{tag}</div>
const slotTop = <div className='flex items-center py-8'><div className='text-xl'><i className='mr-2 fas fa-tag'/>标签：</div>{tag}</div>
return <LayoutBase {...props} slotTop={slotTop}>
{BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}

2
themes/medium/components/ArticleLock.js
View File

@@ -22,7 +22,7 @@ export const ArticleLock = props => {
}
}
return <div id='container' className='w-full flex justify-center items-center h-96 font-sans'>
return <div id='container' className='w-full flex justify-center items-center h-96 '>
<div className='text-center space-y-3'>
<div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
<div className='flex mx-4'>

2
themes/medium/components/BlogPostCard.js
View File

@@ -20,7 +20,7 @@ const BlogPostCard = ({ post, showSummary }) => {
href={`${BLOG.SUB_PATH}/${post.slug}`}
passHref
className={
'cursor-pointer font-bold font-sans hover:underline text-3xl leading-tight text-gray-700 dark:text-gray-300 hover:text-green-500 dark:hover:text-green-400'
'cursor-pointer font-bold hover:underline text-3xl leading-tight text-gray-700 dark:text-gray-300 hover:text-green-500 dark:hover:text-green-400'
}>
{post.title}

2
themes/medium/components/Catalog.js
View File

@@ -65,7 +65,7 @@ const Catalog = ({ toc }) => {
<Progress />
</div>
<div className='overflow-y-auto max-h-96 overscroll-none scroll-hidden' ref={tRef}>
<nav className='h-full font-sans text-black'>
<nav className='h-full text-black'>
{toc.map((tocItem) => {
const id = uuidToId(tocItem.id)
tocIds.push(id)

2
themes/medium/components/GroupMenu.js
View File

@@ -21,7 +21,7 @@ function GroupMenu ({ customNav }) {
}
return (
<nav id='nav' className='font-sans text-md'>
<nav id='nav' className=' text-md'>
{links.map(link => {
if (link.show) {
const selected = (router.pathname === link.to) || (router.asPath === link.to)

2
themes/medium/components/InfoCard.js
View File

@@ -6,7 +6,7 @@ import SocialButton from './SocialButton'
const InfoCard = (props) => {
const { siteInfo } = props
return <div id='info-card' className='py-4'>
<div className='items-center justify-center font-sans '>
<div className='items-center justify-center'>
<div className='hover:scale-105 transform duration-200 cursor-pointer flex justify-center' onClick={ () => { Router.push('/about') }}>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR}/>

2
themes/medium/components/LogoBar.js
View File

@@ -3,7 +3,7 @@ import Link from 'next/link'
export default function LogoBar (props) {
const { siteInfo } = props
return (
<div id='top-wrapper' className='w-full flex items-center font-sans'>
<div id='top-wrapper' className='w-full flex items-center '>
<Link href='/' className='text-md md:text-xl dark:text-gray-200'>
{siteInfo?.title}
</Link>

2
themes/medium/components/Progress.js
View File

@@ -28,7 +28,7 @@ const Progress = ({ targetRef, showPercent = true }) => {
}, [percent])
return (
<div className="h-4 w-full shadow-2xl bg-hexo-light-gray dark:bg-hexo-black-gray font-sans">
<div className="h-4 w-full shadow-2xl bg-hexo-light-gray dark:bg-black">
<div
className="h-4 bg-gray-600 duration-200"
style={{ width: `${percent}%` }}

3
themes/medium/config_medium.js
View File

@@ -1,5 +1,8 @@
const CONFIG_MEDIUM = {
// Style
RIGHT_PANEL_DARK: process.env.NEXT_PUBLIC_MEDIUM_RIGHT_DARK || false, // 右侧面板深色模式
POST_LIST_COVER: true, // 文章列表显示图片封面
POST_LIST_PREVIEW: true, // 列表显示文章预览
POST_LIST_CATEGORY: true, // 列表显示文章分类

4
themes/next/components/MenuButtonGroup.js
View File

@@ -42,12 +42,12 @@ const MenuButtonGroup = (props) => {
{link.slot}
</Link>
);
)
} else {
return <></>
}
})}
</nav>
);
)
}
export default MenuButtonGroup

2
themes/next/components/NextRecentComments.js
View File

@@ -29,7 +29,7 @@ const NextRecentComments = (props) => {
<div className='dark:text-gray-400 text-gray-400 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } } }>--{comment.nick}</Link></div>
</div>)}
</>;
</>
}
export default NextRecentComments

2
themes/nobelium/LayoutSearch.js
View File

@@ -7,6 +7,7 @@ import SearchInput from './components/SearchInput'
import Mark from 'mark.js'
import LayoutBase from './LayoutBase'
import { isBrowser } from '@/lib/utils'
import Tags from './components/Tags'
export const LayoutSearch = props => {
const { keyword } = props
@@ -48,6 +49,7 @@ export const LayoutSearch = props => {
<SearchInput {...props} />
</div>
<Tags {...props}/>
{BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
</LayoutBase>

2
themes/nobelium/components/ExampleRecentComments.js
View File

@@ -29,7 +29,7 @@ const ExampleRecentComments = (props) => {
<div className='dark:text-gray-400 text-gray-400 font-sans text-sm text-right cursor-pointer hover:text-red-500 hover:underline pt-1'><Link href={{ pathname: comment.url, hash: comment.objectId, query: { target: 'comment' } }}>--{comment.nick}</Link></div>
</div>)}
</>;
</>
}
export default ExampleRecentComments

11
themes/nobelium/components/Tags.js
View File

@@ -1,14 +1,15 @@
import Link from 'next/link'
const Tags = (props) => {
const { tags, tag } = props
const Tags = props => {
const { tagOptions, tag } = props
console.log(props)
const currentTag = tag
if (!tags) return null
if (!tagOptions) return null
return (
<div className="tag-container">
<ul className="flex max-w-full mt-4 overflow-x-auto">
{Object.keys(tags).map(key => {
const tag = tags[key]
{Object.keys(tagOptions).map(key => {
const tag = tagOptions[key]
const selected = tag.name === currentTag
return (
<li

2
themes/nobelium/config_nobelium.js
View File

@@ -1,4 +1,4 @@
const CONFIG_NOBELIUM = {
TEST_CONFIG: 'TESET'
TEST_CONFIG: 'TEST'
}
export default CONFIG_NOBELIUM