diff --git a/components/Footer.tsx b/components/Footer.tsx index 9500ce7fab..ccdaf4e92f 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -1,3 +1,4 @@ +import { FaCat } from '@react-icons/all-files/fa/FaCat' import { FaEnvelopeOpenText } from '@react-icons/all-files/fa/FaEnvelopeOpenText' import { FaGithub } from '@react-icons/all-files/fa/FaGithub' import { FaLinkedin } from '@react-icons/all-files/fa/FaLinkedin' @@ -7,6 +8,7 @@ import { FaYoutube } from '@react-icons/all-files/fa/FaYoutube' import { FaZhihu } from '@react-icons/all-files/fa/FaZhihu' import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp' import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline' +import { SiPixiv } from '@react-icons/all-files/si/SiPixiv' import * as React from 'react' import * as config from '@/lib/config' @@ -54,6 +56,16 @@ export function FooterImpl() {
+ {config.myCat && ( + + + + )} + {config.twitter && ( )} + {config.pixiv && ( + + + + )} + {config.zhihu && ( { + const handleContextMenu = (event: MouseEvent) => { + event.preventDefault(); + }; + + const handleSelectStart = (event: Event) => { + event.preventDefault(); + }; + + const handleCopy = (event: ClipboardEvent) => { + event.preventDefault(); + }; + + document.addEventListener('contextmenu', handleContextMenu); + document.addEventListener('selectstart', handleSelectStart); + document.addEventListener('copy', handleCopy); + + return () => { + document.removeEventListener('contextmenu', handleContextMenu); + document.removeEventListener('selectstart', handleSelectStart); + document.removeEventListener('copy', handleCopy); + }; +}, []); const components = React.useMemo>( () => ({ @@ -328,7 +352,6 @@ export function NotionPage({ footer={footer} /> - ) } diff --git a/components/PageSocial.module.css b/components/PageSocial.module.css index c82a8ee9a9..f32f925850 100644 --- a/components/PageSocial.module.css +++ b/components/PageSocial.module.css @@ -79,13 +79,18 @@ border-color: #3b5998; } -.twitter .actionBgPane { +.myCat .actionBgPane, .myCat:hover { + background: #ffbf5a; +} +.twitter .actionBgPane, .twitter:hover { background: #2795e9; } -.twitter:hover { - border-color: #2795e9; +.mastodon .actionBgPane, .mastodon:hover { + background: #6364FF; +} +.pixiv .actionBgPane, .pixiv:hover { + background: #0096fa; } - .linkedin .actionBgPane { background: #0077b5; } diff --git a/components/PageSocial.tsx b/components/PageSocial.tsx index 5301c06656..9c50da40f1 100644 --- a/components/PageSocial.tsx +++ b/components/PageSocial.tsx @@ -11,8 +11,16 @@ interface SocialLink { icon: React.ReactNode href?: string } - +// SNS图标管理部分 const socialLinks: SocialLink[] = [ + config.myCat && { + name: 'myCat', + href: `${config.myCat}`, + title: `MyCat ${config.myCat}`, + icon: ( + + ) + }, config.twitter && { name: 'twitter', href: `https://twitter.com/${config.twitter}`, @@ -23,7 +31,6 @@ const socialLinks: SocialLink[] = [ ) }, - config.github && { name: 'github', href: `https://github.com/${config.github}`, @@ -66,6 +73,28 @@ const socialLinks: SocialLink[] = [ ) + }, + + config.mastodon && { + name: 'mastodon', + href: `${config.mastodon}`, + title: `Mastodon ${config.mastodon}`, + icon: ( + + + + ) + }, + + config.pixiv && { + name: 'pixiv', + href: `https://www.pixiv.net/users/${config.pixiv}`, + title: `Pixiv ${config.pixiv}`, + icon: ( + + + + ) } ].filter(Boolean) diff --git a/components/styles.module.css b/components/styles.module.css index f5f636cb37..2fda039bd0 100644 --- a/components/styles.module.css +++ b/components/styles.module.css @@ -71,7 +71,7 @@ .social a { cursor: pointer; font-size: 2em; - display: inline-flex; + display: table-cell; padding: 0.25em; margin-right: 1vw; transition: color 250ms ease-out; @@ -90,15 +90,18 @@ .toggleDarkMode:hover { color: #2795e9; } - +.myCat:hover { + color: #ffbf5a; +} .twitter:hover { color: #2795e9; } - .mastodon:hover { - color: #5a4be1; + color: #6364FF; +} +.pixiv:hover { + color: #0096fa; } - .zhihu:hover { color: #0066ff; } diff --git a/lib/config.ts b/lib/config.ts index 119f375cf2..66e4fcba0c 100644 --- a/lib/config.ts +++ b/lib/config.ts @@ -20,6 +20,9 @@ import { type Site } from './types' +export const pixiv = '2781527' +export const myCat = "https://seto-life.vercel.app/" + export const rootNotionPageId: string = parsePageId( getSiteConfig('rootNotionPageId'), { uuid: false } @@ -56,6 +59,7 @@ export const description: string = getSiteConfig('description', 'Notion Blog') export const language: string = getSiteConfig('language', 'en') // social accounts + export const twitter: string | undefined = getSiteConfig('twitter') export const mastodon: string | undefined = getSiteConfig('mastodon') export const github: string | undefined = getSiteConfig('github') @@ -65,6 +69,7 @@ export const newsletter: string | undefined = getSiteConfig('newsletter') export const zhihu: string | undefined = getSiteConfig('zhihu') export const getMastodonHandle = (): string | undefined => { + if (!mastodon) { return } diff --git a/lib/site-config.ts b/lib/site-config.ts index fd76b0abab..e33a1ba82b 100644 --- a/lib/site-config.ts +++ b/lib/site-config.ts @@ -11,11 +11,14 @@ export interface SiteConfig { language?: string twitter?: string + myCat?: string + pixiv?: string github?: string linkedin?: string newsletter?: string youtube?: string zhihu?: string + mastodon?: string defaultPageIcon?: string | null diff --git a/public/favicon-128x128.png b/public/favicon-128x128.png index 8be6cf3486..aec39335ff 100644 Binary files a/public/favicon-128x128.png and b/public/favicon-128x128.png differ diff --git a/public/favicon-192x192.png b/public/favicon-192x192.png index a53861f38e..e2bb4d342d 100644 Binary files a/public/favicon-192x192.png and b/public/favicon-192x192.png differ diff --git a/public/favicon.ico b/public/favicon.ico index ea2f437d9d..dd79a927a6 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/favicon.png b/public/favicon.png index d91bdfb3cb..9e4f0ad2cd 100644 Binary files a/public/favicon.png and b/public/favicon.png differ diff --git a/site.config.ts b/site.config.ts index cded79c3bf..2ab78900f9 100644 --- a/site.config.ts +++ b/site.config.ts @@ -2,27 +2,29 @@ import { siteConfig } from './lib/site-config' export default siteConfig({ // the site's root Notion page (required) - rootNotionPageId: '7875426197cf461698809def95960ebf', + rootNotionPageId: '858447c91db0434282b31b8d08d8df83', // if you want to restrict pages to a single notion workspace (optional) // (this should be a Notion ID; see the docs for how to extract this) rootNotionSpaceId: null, // basic site info (required) - name: 'Next.js Notion Starter Kit', + name: 'KujiraTiku', domain: 'nextjs-notion-starter-kit.transitivebullsh.it', - author: 'Travis Fischer', + author: 'KujiraTiku', // open graph metadata (optional) - description: 'Example Next.js Notion Starter Kit Site', + description: '清熱鯨騰草', // social usernames (optional) - twitter: 'transitive_bs', - github: 'transitive-bullshit', - linkedin: 'fisch2', - // mastodon: '#', // optional mastodon profile URL, provides link verification + myCat:'https://seto-life.vercel.app/', + twitter: 'KujiraTiku', + // github: 'transitive-bullshit', + // linkedin: 'fisch2', + mastodon: 'https://fedibird.com/@TikuTalk', // optional mastodon profile URL, provides link verification // newsletter: '#', // optional newsletter URL // youtube: '#', // optional youtube channel name or `channel/UCGbXXXXXXXXXXXXXXXXXXXXXX` + pixiv: '2781527', // default notion icon and cover images for site-wide consistency (optional) // page-specific values will override these site-wide defaults @@ -50,16 +52,24 @@ export default siteConfig({ // whether to use the default notion navigation style or a custom one with links to // important pages. To use `navigationLinks`, set `navigationStyle` to `custom`. - navigationStyle: 'default' - // navigationStyle: 'custom', - // navigationLinks: [ - // { - // title: 'About', - // pageId: 'f1199d37579b41cbabfc0b5174f4256a' - // }, - // { - // title: 'Contact', - // pageId: '6a29ebcb935a4f0689fe661ab5f3b8d1' - // } - // ] -}) + // navigationStyle: 'default' + navigationStyle: 'custom', + navigationLinks: [ + { + title: 'Home', + pageId: '858447c91db0434282b31b8d08d8df83' + }, + { + title: 'About', + pageId: 'About-8ff57d87b0654b0b8c38b5e05947d5d7' + }, + { + title: 'Blog', + pageId: 'Blog-6d3fa135bc944d3d93d5c71007f874c9' + }, + { + title: 'Gallery', + pageId: 'Gallery-8135fc5f12fb4115970586bd53484963' + } + ] +}) \ No newline at end of file diff --git a/styles/notion.css b/styles/notion.css index 94a7f309fe..2bc167b0d5 100644 --- a/styles/notion.css +++ b/styles/notion.css @@ -6,9 +6,16 @@ * whereas our goal with this site is to adjust Notion's styling in a few key * places to add some flare. */ - -.notion { - --notion-max-width: 720px; + img{ + /* SPの長押し禁止 */ + -webkit-touch-callout:none; + -webkit-user-select:none; + -moz-touch-callout:none; + -moz-user-select:none; + user-select:none; +} + .notion { + --notion-max-width: 840px; --notion-header-height: 54px; } @@ -18,25 +25,38 @@ .notion-page { padding-bottom: calc(max(5vh, 32px)) !important; - line-height: 1.65; + padding-left: 0; + padding-right: 0; } .index-page { - --notion-max-width: 900px; + --notion-max-width: 840px; +} +.notion-aside { + top: 120px; +} +.notion-aside-table-of-contents { + max-height: calc(100vh - 120px - 18px); } - .notion-text { - padding: 0.5em 2px; + padding: 0.3em 2px; } .notion-asset-caption { - text-align: center; + /* text-align: center; */ } .notion-asset-wrapper { margin-top: 1em; margin-bottom: 1em; } +.notion-asset-wrapper img { + border-radius: 5px; +} +.notion-asset-wrapper > div { + height: 100%; + display: contents !important; +} .notion-asset-wrapper-video > div, .notion-asset-wrapper-video video { @@ -48,35 +68,45 @@ margin: 0 auto; overflow-x: auto; } - +/*blog 不显示标题*/ +.notion-collection-header { + display: none; +} .notion-nav-header-rhs { gap: 0.5rem; } - +/*blog间隔尺寸*/ .notion-gallery-grid { - grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); - grid-gap: 6vmin; - gap: 6vmin; + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + grid-gap: 3vmin; + gap: 3vmin; +} +.notion-collection-card-property:first-child { + font-size: 14px; + font-weight: 700; } - .notion-gallery-grid .notion-page-icon-inline { display: none; } - .notion-gallery-grid .notion-page-title-text { - font-size: 2em; + font-size: 1.8em; white-space: unset; } - .notion-gallery-grid .notion-collection-card-property { white-space: unset; text-overflow: unset; } - .notion-gallery-grid .notion-property-text { font-size: 14px; } - +/* 列表状态影藏多余的标题 */ +.notion-list-item-body .notion-property-title { + display: none; +} +/* 看板布局 影响下方左右拉动条*/ +.notion-board { + overflow: hidden; +} .notion-collection-card { border-radius: 16px; box-shadow: none; @@ -104,9 +134,15 @@ .notion-collection-card:hover .notion-collection-card-cover { filter: brightness(120%); } +.notion-collection-card-cover { + height: 140px; +} +.notion-collection-card-property { + padding: 2px 0; +} .notion-collection-card-body { - padding: 10px; + padding: 3px; } /* only target safari */ @@ -332,6 +368,9 @@ } /* disable highlighting in dark mode */ +.dark-mode { + --bg-color: #2f2f2f; +} .dark-mode .notion-red_background, .dark-mode .notion-pink_background, .dark-mode .notion-blue_background, @@ -356,7 +395,6 @@ .notion-page-icon-hero.notion-page-icon-image img { border-radius: 50%; } - .notion-header { background: hsla(0, 0%, 100%, 0.8); backdrop-filter: saturate(180%) blur(16px); @@ -403,3 +441,14 @@ .notion-equation.notion-equation-block{ align-items: center; } +@media screen and (max-width:768px) { + .notion-gallery-grid .notion-property-text { + font-size: 16px; + } + .notion-header .notion-nav-header { + font-size: 12px; + } + .notion-header .button { + padding: 5px; + } +} \ No newline at end of file diff --git a/styles/prism-theme.css b/styles/prism-theme.css index a38996278f..89ec7e9dd1 100644 --- a/styles/prism-theme.css +++ b/styles/prism-theme.css @@ -8,7 +8,7 @@ } .dark-mode .notion-code { - background-color: rgba(17, 24, 39, 1); + background-color: #2b2b2b; border-color: rgba(55, 65, 81, 1); } .notion code {