fix: client load

This commit is contained in:
KazooTTT
2024-11-23 21:57:41 +08:00
parent 7e78500e45
commit 9f392106bd
4 changed files with 413 additions and 425 deletions

View File

@ -1,34 +1,28 @@
'use client'
import React from 'react' import React from 'react'
import Giscus from '@giscus/react' import Giscus from '@giscus/react'
const id = 'inject-comments' const id = 'inject-comments'
const GiscusComment = () => { const GiscusComment = () => {
const [mounted, setMounted] = React.useState(false)
React.useEffect(() => {
setMounted(true)
}, [])
return ( return (
<div id={id} className='mt-8 w-full'> <div id={id} className='mt-8 w-full'>
{mounted ? ( <Giscus
<Giscus id={id}
id={id} repo='KazooTTT/kazoottt-blog'
repo='KazooTTT/kazoottt-blog' repoId='R_kgDOMa4jRQ'
repoId='R_kgDOMa4jRQ' category='Announcements'
category='Announcements' categoryId='DIC_kwDOMa4jRc4CjRFe'
categoryId='DIC_kwDOMa4jRc4CjRFe' mapping='pathname'
mapping='pathname' strict='0'
strict='0' reactionsEnabled='1'
reactionsEnabled='1' emitMetadata='0'
emitMetadata='0' inputPosition='bottom'
inputPosition='bottom' theme={localStorage.getItem('theme') ?? 'preferred_color_scheme'}
theme={localStorage.getItem('theme') ?? 'preferred_color_scheme'} lang='zh-CN'
lang='zh-CN' loading='lazy'
loading='lazy' />
/>
) : null}
</div> </div>
) )
} }

View File

@ -23,5 +23,5 @@ const { Content } = await entry.render()
<PostLayout post={entry}> <PostLayout post={entry}>
<Content /> <Content />
<GiscusComment client:only='react' /> <GiscusComment client:only='react' client:load />
</PostLayout> </PostLayout>

View File

@ -211,5 +211,5 @@ const projects = [...directProjects, ...mdProjects].slice(0, MAX_PROJECTS)
</div> </div>
</Section> </Section>
</div> </div>
<GiscusComment client:only='react' /> <GiscusComment client:only='react' client:load />
</PageLayout> </PageLayout>

View File

@ -5,414 +5,408 @@ import Button from '@/components/Button.astro'
import GiscusComment from '@/components/GiscusComment' import GiscusComment from '@/components/GiscusComment'
const SOFTWARE_TOOLS = { const SOFTWARE_TOOLS = {
development: { development: {
title: 'Development', title: 'Development',
sections: { sections: {
ide: { ide: {
title: 'IDE & Editors', title: 'IDE & Editors',
tools: [ tools: [
{ {
name: 'WindSurf', name: 'WindSurf',
description: 'AI-Powered IDE', description: 'AI-Powered IDE',
href: 'https://windsurf.app/', href: 'https://windsurf.app/'
}, },
{ {
name: 'Cursor', name: 'Cursor',
description: 'AI-Powered Code Editor', description: 'AI-Powered Code Editor',
href: 'https://cursor.sh/', href: 'https://cursor.sh/',
iconPath: 'cursor' iconPath: 'cursor'
}, },
{ {
name: 'VS Code', name: 'VS Code',
description: 'Code Editor', description: 'Code Editor',
href: 'https://code.visualstudio.com/', href: 'https://code.visualstudio.com/',
iconPath: 'vscode' iconPath: 'vscode'
}, },
{ {
name: 'JetBrains Suite', name: 'JetBrains Suite',
description: 'Professional IDEs', description: 'Professional IDEs',
href: 'https://www.jetbrains.com/' href: 'https://www.jetbrains.com/'
} }
] ]
} }
} }
}, },
design: { design: {
title: 'Design & Creative', title: 'Design & Creative',
sections: { sections: {
design: { design: {
title: 'Design Software', title: 'Design Software',
tools: [ tools: [
{ {
name: 'Figma', name: 'Figma',
description: 'Design Tool', description: 'Design Tool',
href: 'https://www.figma.com/', href: 'https://www.figma.com/',
iconPath: 'figma' iconPath: 'figma'
}, },
{ {
name: 'Canva', name: 'Canva',
description: 'Design Tool', description: 'Design Tool',
href: 'https://www.canva.com/', href: 'https://www.canva.com/',
iconPath: 'canva' iconPath: 'canva'
} }
] ]
}, },
recording: { recording: {
title: 'Screen Recording & Screenshots', title: 'Screen Recording & Screenshots',
tools: [ tools: [
{ {
name: 'CleanShot X', name: 'CleanShot X',
description: 'Screenshot & Recording', description: 'Screenshot & Recording',
href: 'https://cleanshot.com/' href: 'https://cleanshot.com/'
}, },
{ {
name: 'OBS Studio', name: 'OBS Studio',
description: 'Streaming & Recording', description: 'Streaming & Recording',
href: 'https://obsproject.com/' href: 'https://obsproject.com/'
}, },
{ {
name: 'Picsew', name: 'Picsew',
description: 'Screenshot Tool', description: 'Screenshot Tool',
href: 'https://apps.apple.com/app/picsew-screenshot-stitching/id1208145167' href: 'https://apps.apple.com/app/picsew-screenshot-stitching/id1208145167'
}, },
{ {
name: 'Shotr', name: 'Shotr',
description: 'Screenshot Tool', description: 'Screenshot Tool',
href: 'https://shotr.app/' href: 'https://shotr.app/'
}, },
{ {
name: 'QuickRecorder', name: 'QuickRecorder',
description: 'Screen Recording', description: 'Screen Recording',
href: '#' href: '#'
} }
] ]
} }
} }
}, },
productivity: { productivity: {
title: 'Productivity', title: 'Productivity',
sections: { sections: {
browser: { browser: {
title: 'Browsers', title: 'Browsers',
tools: [ tools: [
{ {
name: 'Arc Browser', name: 'Arc Browser',
description: 'Modern Browser', description: 'Modern Browser',
href: 'https://arc.net/', href: 'https://arc.net/',
iconPath: 'arc' iconPath: 'arc'
}, },
{ {
name: 'Google Chrome', name: 'Google Chrome',
description: 'Web Browser', description: 'Web Browser',
href: 'https://www.google.com/chrome/' href: 'https://www.google.com/chrome/'
}, },
{ {
name: 'Microsoft Edge', name: 'Microsoft Edge',
description: 'Web Browser', description: 'Web Browser',
href: 'https://www.microsoft.com/edge' href: 'https://www.microsoft.com/edge'
} }
] ]
}, },
notes: { notes: {
title: 'Note Taking', title: 'Note Taking',
tools: [ tools: [
{ {
name: 'Obsidian', name: 'Obsidian',
description: 'Note Taking', description: 'Note Taking',
href: 'https://obsidian.md/', href: 'https://obsidian.md/',
iconPath: 'obsidian' iconPath: 'obsidian'
}, },
{ {
name: 'Notion', name: 'Notion',
description: 'Note Taking', description: 'Note Taking',
href: 'https://notion.so/', href: 'https://notion.so/',
iconPath: 'notion' iconPath: 'notion'
}, },
{ {
name: 'Flomo', name: 'Flomo',
description: 'Quick Notes', description: 'Quick Notes',
href: 'https://flomoapp.com/' href: 'https://flomoapp.com/'
} }
] ]
}, },
tools: { tools: {
title: 'Productivity Tools', title: 'Productivity Tools',
tools: [ tools: [
{ {
name: '1Password', name: '1Password',
description: 'Password Manager', description: 'Password Manager',
href: 'https://1password.com/' href: 'https://1password.com/'
}, },
{ {
name: 'Raindrop.io', name: 'Raindrop.io',
description: 'Bookmark Manager', description: 'Bookmark Manager',
href: 'https://raindrop.io/' href: 'https://raindrop.io/'
}, },
{ {
name: 'n8n', name: 'n8n',
description: 'Workflow Automation', description: 'Workflow Automation',
href: 'https://n8n.io/' href: 'https://n8n.io/'
}, },
{ {
name: 'Follow', name: 'Follow',
description: 'RSS Reader', description: 'RSS Reader',
href: '#' href: '#'
}, },
{ {
name: '滴答清单', name: '滴答清单',
description: 'Task Management', description: 'Task Management',
href: 'https://dida365.com/' href: 'https://dida365.com/'
} }
] ]
} }
} }
}, },
ai: { ai: {
title: 'AI Tools', title: 'AI Tools',
sections: { sections: {
assistants: { assistants: {
title: 'AI Assistants', title: 'AI Assistants',
tools: [ tools: [
{ {
name: 'ChatGPT', name: 'ChatGPT',
description: 'AI Assistant', description: 'AI Assistant',
href: 'https://chat.openai.com/', href: 'https://chat.openai.com/',
iconPath: 'chatgpt' iconPath: 'chatgpt'
}, },
{ {
name: 'Claude', name: 'Claude',
description: 'AI Assistant', description: 'AI Assistant',
href: 'https://claude.ai/' href: 'https://claude.ai/'
}, },
{ {
name: 'Poe', name: 'Poe',
description: 'AI Platform', description: 'AI Platform',
href: 'https://poe.com/' href: 'https://poe.com/'
}, },
{ {
name: 'Google Notebook LLM', name: 'Google Notebook LLM',
description: 'AI Assistant', description: 'AI Assistant',
href: 'https://notebooklm.google.com/' href: 'https://notebooklm.google.com/'
} }
] ]
} }
} }
}, },
media: { media: {
title: 'Media & Entertainment', title: 'Media & Entertainment',
sections: { sections: {
music: { music: {
title: 'Music', title: 'Music',
tools: [ tools: [
{ {
name: 'Apple Music', name: 'Apple Music',
description: 'Music Streaming', description: 'Music Streaming',
href: 'https://music.apple.com/' href: 'https://music.apple.com/'
}, },
{ {
name: '网易云音乐', name: '网易云音乐',
description: 'Music Platform', description: 'Music Platform',
href: 'https://music.163.com/' href: 'https://music.163.com/'
} }
] ]
}, },
reading: { reading: {
title: 'Reading & Writing', title: 'Reading & Writing',
tools: [ tools: [
{ {
name: '微信读书', name: '微信读书',
description: 'Reading Platform', description: 'Reading Platform',
href: 'https://weread.qq.com/' href: 'https://weread.qq.com/'
}, },
{ {
name: 'Personal Blog', name: 'Personal Blog',
description: 'Built with Astro', description: 'Built with Astro',
href: '/' href: '/'
}, },
{ {
name: 'Hashnode', name: 'Hashnode',
description: 'Blog Platform', description: 'Blog Platform',
href: 'https://hashnode.com/' href: 'https://hashnode.com/'
} }
] ]
} }
} }
}, },
health: { health: {
title: 'Health & Fitness', title: 'Health & Fitness',
sections: { sections: {
tracking: { tracking: {
title: 'Health Tracking', title: 'Health Tracking',
tools: [ tools: [
{ {
name: 'AutoSleep', name: 'AutoSleep',
description: 'Sleep Tracking', description: 'Sleep Tracking',
href: 'https://autosleep.app/' href: 'https://autosleep.app/'
}, },
{ {
name: 'Grow', name: 'Grow',
description: 'Health Tracking', description: 'Health Tracking',
href: '#' href: '#'
}, },
{ {
name: 'Keep', name: 'Keep',
description: 'Fitness App', description: 'Fitness App',
href: 'https://www.gotokeep.com/' href: 'https://www.gotokeep.com/'
} }
] ]
} }
} }
} }
} }
const DEVICES = { const DEVICES = {
computing: { computing: {
title: 'Computing Devices', title: 'Computing Devices',
sections: { sections: {
devices: { devices: {
title: 'Devices', title: 'Devices',
tools: [ tools: [
{ {
name: 'Mac Mini M2 Pro', name: 'Mac Mini M2 Pro',
description: '主力机 (32GB, 512GB)', description: '主力机 (32GB, 512GB)',
iconPath: 'apple' iconPath: 'apple'
}, },
{ {
name: 'MacBook Air M1', name: 'MacBook Air M1',
description: '移动办公 (16GB, 256GB)', description: '移动办公 (16GB, 256GB)',
iconPath: 'apple' iconPath: 'apple'
}, },
{ {
name: '机械师整机', name: '机械师整机',
description: '台式机 (i5, 32GB, 512GB)', description: '台式机 (i5, 32GB, 512GB)',
iconPath: 'windows' iconPath: 'windows'
} }
] ]
} }
} }
}, },
mobile: { mobile: {
title: 'Mobile Devices', title: 'Mobile Devices',
sections: { sections: {
phone: { phone: {
title: 'Phone', title: 'Phone',
tools: [ tools: [
{ {
name: 'iPhone 13', name: 'iPhone 13',
description: '手机 (256GB)', description: '手机 (256GB)',
iconPath: 'apple' iconPath: 'apple'
} }
] ]
}, },
tablet: { tablet: {
title: 'Tablet', title: 'Tablet',
tools: [ tools: [
{ {
name: 'iPad Mini 5', name: 'iPad Mini 5',
description: '平板', description: '平板',
iconPath: 'apple' iconPath: 'apple'
} }
] ]
} }
} }
}, },
wearables: { wearables: {
title: 'Smart Wearables', title: 'Smart Wearables',
sections: { sections: {
watch: { watch: {
title: 'Smart Watch', title: 'Smart Watch',
tools: [ tools: [
{ {
name: 'Apple Watch S9', name: 'Apple Watch S9',
description: '智能手表', description: '智能手表',
iconPath: 'apple' iconPath: 'apple'
} }
] ]
}, },
audio: { audio: {
title: 'Audio Devices', title: 'Audio Devices',
tools: [ tools: [
{ {
name: 'AirPods Pro 2', name: 'AirPods Pro 2',
description: '无线耳机', description: '无线耳机',
iconPath: 'apple' iconPath: 'apple'
} }
] ]
} }
} }
}, },
imaging: { imaging: {
title: 'Imaging Equipment', title: 'Imaging Equipment',
sections: { sections: {
cameras: { cameras: {
title: 'Camera System', title: 'Camera System',
tools: [ tools: [
{ {
name: '松下 GX9', name: '松下 GX9',
description: '相机', description: '相机',
iconPath: 'round-photo' iconPath: 'round-photo'
}, },
{ {
name: 'Panasonic 14-140mm', name: 'Panasonic 14-140mm',
description: '变焦镜头', description: '变焦镜头',
iconPath: 'tool' iconPath: 'tool'
}, },
{ {
name: 'Panasonic 25mm', name: 'Panasonic 25mm',
description: '定焦镜头', description: '定焦镜头',
iconPath: 'tool' iconPath: 'tool'
}, },
{ {
name: 'Panasonic 100-300mm', name: 'Panasonic 100-300mm',
description: '长焦镜头', description: '长焦镜头',
iconPath: 'tool' iconPath: 'tool'
}, },
{ {
name: 'DJI Action 5 Pro', name: 'DJI Action 5 Pro',
description: '运动相机', description: '运动相机',
iconPath: 'round-photo' iconPath: 'round-photo'
} }
] ]
} }
} }
} }
} }
--- ---
<PageLayout meta={{ title: 'Tools & Devices' }}> <PageLayout meta={{ title: 'Tools & Devices' }}>
<div class='w-full'> <div class='w-full'>
<Button title='Back' href='/' style='button'> <Button title='Back' href='/' style='button'>
<svg <svg
xmlns='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg'
width='14' width='14'
height='14' height='14'
viewBox='0 0 24 24' viewBox='0 0 24 24'
slot='icon-before' slot='icon-before'
> >
<path <path
fill='currentColor' fill='currentColor'
d='m6.921 12.5l5.792 5.792L12 19l-7-7l7-7l.713.708L6.921 11.5H19v1z' d='m6.921 12.5l5.792 5.792L12 19l-7-7l7-7l.713.708L6.921 11.5H19v1z'
> >
</path> </path>
</svg> </svg>
</Button> </Button>
<div class='mt-5 flex w-full flex-col gap-y-10'> <div class='mt-5 flex w-full flex-col gap-y-10'>
<div> <div>
<h1 class='mb-1 text-2xl font-bold'>Tools & Devices</h1> <h1 class='mb-1 text-2xl font-bold'>Tools & Devices</h1>
<p>Tools, software, and devices I use daily</p> <p>Tools, software, and devices I use daily</p>
</div> </div>
<CategorySection <CategorySection title='Software Tools' categories={Object.values(SOFTWARE_TOOLS)} />
title="Software Tools"
categories={Object.values(SOFTWARE_TOOLS)}
/>
<CategorySection <CategorySection title='Hardware Devices' categories={Object.values(DEVICES)} />
title="Hardware Devices" </div>
categories={Object.values(DEVICES)} </div>
/> <GiscusComment client:only='react' client:load />
</div>
</div>
<GiscusComment client:only='react' />
</PageLayout> </PageLayout>