[ { "path": ".gitattributes", "content": "* text=auto eol=lf" }, { "path": ".github/workflows/close-inactive-issues.yml", "content": "name: Close inactive issues\n\non:\n schedule:\n - cron: '30 1 * * *'\n\njobs:\n close-issues:\n if: github.repository == 'lxchapu/astro-gyoza'\n runs-on: ubuntu-latest\n permissions:\n issues: write\n pull-requests: write\n steps:\n - uses: actions/stale@v9\n with:\n days-before-stale: 14\n days-before-close: 7\n days-before-pr-close: -1\n stale-issue-label: 'stale'\n stale-issue-message: 'This issue is stale because it has been open 14 days with no activity. Remove stale label or comment or this will be closed in 7 days.'\n stale-pr-message: 'This PR is stale because it has been open 14 days with no activity.'\n close-issue-message: 'This issue was closed because it has been inactive for 7 days since being marked as stale.'\n" }, { "path": ".gitignore", "content": "# build output\ndist/\n\n# generated types\n.astro/\n\n# dependencies\nnode_modules/\n\n# logs\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\n\n# environment variables\n.env\n.env.production\n\n# macOS-specific files\n.DS_Store\n\n# jetbrains setting folder\n.idea/\n" }, { "path": ".prettierignore", "content": ".astro/\nnode_modules/\ndist/\npnpm-lock.yaml" }, { "path": ".prettierrc", "content": "{\n \"printWidth\": 100,\n \"semi\": false,\n \"singleQuote\": true,\n \"plugins\": [\"prettier-plugin-astro\"],\n \"overrides\": [\n {\n \"files\": \"*.astro\",\n \"options\": {\n \"parser\": \"astro\"\n }\n }\n ]\n}\n" }, { "path": ".vscode/extensions.json", "content": "{\n \"recommendations\": [\"astro-build.astro-vscode\"],\n \"unwantedRecommendations\": []\n}\n" }, { "path": ".vscode/launch.json", "content": "{\n \"version\": \"0.2.0\",\n \"configurations\": [\n {\n \"command\": \"./node_modules/.bin/astro dev\",\n \"name\": \"Development server\",\n \"request\": \"launch\",\n \"type\": \"node-terminal\"\n }\n ]\n}\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2024 柃夏chapu\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "# Gyoza\n\nGyoza is a static blog template built with Astro and React.\n\n![astro version](https://img.shields.io/badge/astro-4.6-red)\n![node version](https://img.shields.io/badge/node-18.18-green)\n\nDemo Site:\n\n- [gyoza.lxchapu.com](https://gyoza.lxchapu.com)\n- [www.lxchapu.com](https://www.lxchapu.com)\n\nEnjoy it!\n\n## 📷 Screenshots\n\n![Preview](https://s2.loli.net/2024/05/06/A9rzC3Uym7RwdQc.webp)\n\n## 🎉 Features\n\n- ✅ 有着规范的 URL 和 OpenGraph 信息，对 SEO 友好\n- ✅ 支持站点地图\n- ✅ 支持 RSS 订阅\n- ✅ 支持夜间模式\n- ✅ 特殊日期变灰\n- ✅ 简单干净的配色和主题\n- ✅ 支持评论系统\n- ✅ 支持代码高亮\n\n## 🔧 Tech Stack\n\n- [Astro](https://astro.build/)\n- [React](https://reactjs.org/)\n- [Tailwind CSS](https://tailwindcss.com/)\n- [Framer Motion](https://www.framer.com/motion/)\n- [Jotai](https://jotai.org/)\n\n## 📖 Documentation\n\n前往：[Documentation](https://gyoza.lxchapu.com/posts/guide)\n\n## 🚀 Project Structure\n\n```text\n├── public/\n├── src/\n│   ├── components/\n│   ├── content/\n│   ├── layouts/\n│   ├── pages/\n│   ├── plugins/\n│   ├── store/\n│   ├── styles/\n│   ├── utils/\n│   └── config.json\n├── astro.config.mjs\n├── README.md\n├── package.json\n└── tsconfig.json\n```\n\n网站配置保存在 `config.json` 文件。\n\n## 🧞 Commands\n\n| Command | Action |\n| :------------- | :------------------------------------------- |\n| `pnpm i` | Installs dependencies |\n| `pnpm dev` | Starts local dev server at `localhost:4321` |\n| `pnpm build` | Build your production site to `./dist/` |\n| `pnpm preview` | Preview your build locally, before deploying |\n| `pnpm format` | Format code using Prettier |\n" }, { "path": "astro.config.js", "content": "import { defineConfig } from 'astro/config'\nimport { remarkReadingTime } from './src/plugins/remarkReadingTime'\nimport { rehypeCodeBlock } from './src/plugins/rehypeCodeBlock'\nimport { rehypeTableBlock } from './src/plugins/rehypeTableBlock'\nimport { rehypeCodeHighlight } from './src/plugins/rehypeCodeHighlight'\nimport { rehypeImage } from './src/plugins/rehypeImage'\nimport { rehypeLink } from './src/plugins/rehypeLink'\nimport { rehypeHeading } from './src/plugins/rehypeHeading'\nimport remarkDirective from 'remark-directive'\nimport { remarkSpoiler } from './src/plugins/remarkSpoiler'\nimport { remarkEmbed } from './src/plugins/remarkEmbed'\nimport tailwind from '@astrojs/tailwind'\nimport react from '@astrojs/react'\nimport sitemap from '@astrojs/sitemap'\nimport { rehypeHeadingIds } from '@astrojs/markdown-remark'\nimport { site } from './src/config.json'\nimport remarkMath from 'remark-math'\nimport rehypeKatex from 'rehype-katex'\nimport swup from '@swup/astro'\n\n// https://astro.build/config\nexport default defineConfig({\n site: site.url,\n integrations: [\n tailwind(),\n react(),\n sitemap(),\n swup({\n theme: false,\n animationClass: 'swup-transition-',\n containers: ['main'],\n morph: ['[component-export=\"Provider\"]'],\n }),\n ],\n markdown: {\n syntaxHighlight: false,\n smartypants: false,\n remarkPlugins: [remarkMath, remarkDirective, remarkEmbed, remarkSpoiler, remarkReadingTime],\n rehypePlugins: [\n rehypeHeadingIds,\n rehypeKatex,\n rehypeLink,\n rehypeImage,\n rehypeHeading,\n rehypeCodeBlock,\n rehypeCodeHighlight,\n rehypeTableBlock,\n ],\n remarkRehype: { footnoteLabel: '参考', footnoteBackLabel: '返回正文' },\n },\n vite: {\n build: {\n rollupOptions: {\n external: ['/pagefind/pagefind.js'],\n },\n },\n },\n})\n" }, { "path": "commitlint.config.js", "content": "export default {\n extends: ['@commitlint/config-conventional'],\n}\n" }, { "path": "package.json", "content": "{\n \"name\": \"astro-gyoza\",\n \"type\": \"module\",\n \"version\": \"0.0.1\",\n \"scripts\": {\n \"prepare\": \"pnpm exec simple-git-hooks\",\n \"dev\": \"astro dev\",\n \"build\": \"astro check && astro build && pagefind --site dist\",\n \"preview\": \"astro preview\",\n \"astro\": \"astro\",\n \"lint\": \"prettier --write .\",\n \"new-friend\": \"node scripts/new-friend.js\",\n \"new-post\": \"node scripts/new-post.js\",\n \"new-project\": \"node scripts/new-project.js\"\n },\n \"dependencies\": {\n \"@astrojs/check\": \"^0.5.10\",\n \"@astrojs/markdown-remark\": \"^5.1.0\",\n \"@astrojs/react\": \"^3.3.0\",\n \"@astrojs/rss\": \"^4.0.5\",\n \"@astrojs/sitemap\": \"^3.1.3\",\n \"@astrojs/tailwind\": \"^5.1.0\",\n \"@radix-ui/react-dialog\": \"^1.0.5\",\n \"@shikijs/rehype\": \"^1.3.0\",\n \"@swup/astro\": \"^1.4.1\",\n \"@types/chroma-js\": \"^2.4.4\",\n \"@types/lodash-es\": \"^4.17.12\",\n \"@types/react\": \"^18.2.78\",\n \"@types/react-dom\": \"^18.2.25\",\n \"@waline/client\": \"^3.1.3\",\n \"astro\": \"^4.6.1\",\n \"chroma-js\": \"^2.4.2\",\n \"clsx\": \"^2.1.0\",\n \"framer-motion\": \"^11.1.5\",\n \"hastscript\": \"^9.0.0\",\n \"jotai\": \"^2.8.0\",\n \"katex\": \"^0.16.10\",\n \"lodash-es\": \"^4.17.21\",\n \"mdast-util-to-string\": \"^4.0.0\",\n \"pagefind\": \"^1.1.0\",\n \"qrcode.react\": \"^3.1.0\",\n \"react\": \"^18.2.0\",\n \"react-dom\": \"^18.2.0\",\n \"react-toastify\": \"^10.0.5\",\n \"reading-time\": \"^1.5.0\",\n \"rehype-katex\": \"^7.0.0\",\n \"remark-directive\": \"^3.0.0\",\n \"remark-math\": \"^6.0.0\",\n \"tailwindcss\": \"^3.4.3\",\n \"typescript\": \"^5.4.5\",\n \"unist-util-visit\": \"^5.0.0\"\n },\n \"devDependencies\": {\n \"@commitlint/cli\": \"^19.3.0\",\n \"@commitlint/config-conventional\": \"^19.2.2\",\n \"@inquirer/prompts\": \"^5.0.2\",\n \"lint-staged\": \"^15.2.2\",\n \"micromark-util-symbol\": \"^2.0.0\",\n \"prettier\": \"^3.2.5\",\n \"prettier-plugin-astro\": \"^0.13.0\",\n \"simple-git-hooks\": \"^2.11.1\"\n },\n \"simple-git-hooks\": {\n \"commit-msg\": \"pnpm exec commitlint --edit $1\",\n \"pre-commit\": \"pnpm exec lint-staged\"\n },\n \"lint-staged\": {\n \"*.{js,jsx,ts,tsx.astro,md,css,json}\": \"prettier --write\"\n }\n}\n" }, { "path": "scripts/new-friend.js", "content": "import { input } from '@inquirer/prompts'\nimport fs from 'fs'\nimport path from 'path'\nimport { isFileNameSafe } from './utils.js'\n\nfunction getFriendFullPath(fileName) {\n return path.join('./src/content/friends', `${fileName}.yaml`)\n}\n\nconst fileName = await input({\n message: '请输入文件名称',\n validate: (value) => {\n if (!isFileNameSafe(value)) {\n return '文件名只能包含字母、数字和连字符'\n }\n const fullPath = getFriendFullPath(value)\n if (fs.existsSync(fullPath)) {\n return `${fullPath} 已存在`\n }\n return true\n },\n})\n\nconst title = await input({\n message: '请输入标题',\n})\nconst description = await input({\n message: '请输入描述',\n})\nconst link = await input({\n message: '请输入地址',\n})\nconst avatar = await input({\n message: '请输入头像地址',\n})\n\nconst content = `title: ${title}\ndescription: ${description}\nlink: ${link}\navatar: ${avatar}\n`\n\nconst fullPath = getFriendFullPath(fileName)\nfs.writeFileSync(fullPath, content)\nconsole.log(`${fullPath} 创建成功`)\n" }, { "path": "scripts/new-post.js", "content": "import { input } from '@inquirer/prompts'\nimport fs from 'fs'\nimport path from 'path'\nimport { isFileNameSafe } from './utils.js'\n\nfunction getPostFullPath(fileName) {\n return path.join('./src/content/posts', `${fileName}.md`)\n}\n\nconst fileName = await input({\n message: '请输入文件名称',\n validate: (value) => {\n if (!isFileNameSafe(value)) {\n return '文件名只能包含字母、数字和连字符'\n }\n const fullPath = getPostFullPath(value)\n if (fs.existsSync(fullPath)) {\n return `${fullPath} 已存在`\n }\n return true\n },\n})\n\nconst title = await input({\n message: '请输入文章标题',\n})\n\nconst content = `---\ntitle: ${title}\ndate: ${new Date().toISOString()}\ntags: []\ncomments: true\ndraft: false\n---\n`\n\nconst fullPath = getPostFullPath(fileName)\nfs.writeFileSync(fullPath, content)\nconsole.log(`${fullPath} 创建成功`)\n" }, { "path": "scripts/new-project.js", "content": "import { input } from '@inquirer/prompts'\nimport fs from 'fs'\nimport path from 'path'\nimport { isFileNameSafe } from './utils.js'\n\nfunction getProjectFullPath(fileName) {\n return path.join('./src/content/projects', `${fileName}.yaml`)\n}\n\nconst fileName = await input({\n message: '请输入文件名称',\n validate: (value) => {\n if (!isFileNameSafe(value)) {\n return '文件名只能包含字母、数字和连字符'\n }\n const fullPath = getProjectFullPath(value)\n if (fs.existsSync(fullPath)) {\n return `${fullPath} 已存在`\n }\n return true\n },\n})\n\nconst title = await input({\n message: '请输入项目名称',\n})\nconst description = await input({\n message: '请输入项目描述',\n})\nconst link = await input({\n message: '请输入项目地址',\n})\nconst image = await input({\n message: '请输入预览图片地址',\n})\n\nconst content = `title: ${title}\ndescription: ${description}\nlink: ${link}\nimage: ${image}\n`\n\nconst fullPath = getProjectFullPath(fileName)\nfs.writeFileSync(fullPath, content)\nconsole.log(`${fullPath} 创建成功`)\n" }, { "path": "scripts/utils.js", "content": "export function isFileNameSafe(fileName) {\n return /^[a-z0-9]+(-[a-z0-9]+)*$/.test(fileName)\n}\n" }, { "path": "src/components/AnimatedSignature.tsx", "content": "import Svg from '@/assets/signature.svg?raw'\n\nexport function AnimatedSignature() {\n return (\n \n )\n}\n" }, { "path": "src/components/BackToTopFAB.tsx", "content": "import { useAtomValue } from 'jotai'\nimport { pageScrollLocationAtom } from '@/store/scrollInfo'\nimport { AnimatePresence, motion } from 'framer-motion'\n\nexport function BackToTopFAB() {\n const scrollY = useAtomValue(pageScrollLocationAtom)\n const isShow = scrollY > 100\n\n return (\n
\n {isShow && }\n
\n )\n}\n\nfunction BackToTop() {\n const handleBackToTop = () => {\n window.scrollTo({\n top: 0,\n behavior: 'smooth',\n })\n }\n\n return (\n \n \n \n )\n}\n" }, { "path": "src/components/CategoryList.astro", "content": "---\ninterface Props {\n categories: {\n name: string\n slug: string\n count: number\n }[]\n}\n\nconst { categories } = Astro.props\n---\n\n{\n categories.length === 0 ? (\n
作者懒得分类🤪
\n ) : (\n
\n {categories.map((category) => (\n \n
\n
\n \n {category.name}\n {category.count}\n
\n \n ))}\n
\n )\n}\n" }, { "path": "src/components/Flashlight.tsx", "content": "import { useLayoutEffect, useState } from 'react'\n\nexport function Flashlight() {\n const [cursorX, setCursorX] = useState(0)\n const [cursorY, setCursorY] = useState(0)\n const isMobile = !window.matchMedia('(hover: hover)').matches\n\n if (isMobile) {\n return null\n }\n\n const backgroundImage = `radial-gradient(\n circle 16vmax at ${cursorX}px ${cursorY}px,\n rgba(0, 0, 0, 0) 0%,\n rgba(0, 0, 0, 0.5) 80%,\n rgba(0, 0, 0, 0.8) 100%\n )`\n\n useLayoutEffect(() => {\n const handleMouseMove = (event: MouseEvent) => {\n setCursorX(event.clientX)\n setCursorY(event.clientY)\n }\n\n document.addEventListener('mousemove', handleMouseMove)\n\n return () => {\n document.removeEventListener('mousemove', handleMouseMove)\n }\n }, [])\n\n return (\n
\n )\n}\n" }, { "path": "src/components/FriendList.astro", "content": "---\nimport { getCollection } from 'astro:content'\n\nconst friends = await getCollection('friends')\n---\n\n\n" }, { "path": "src/components/Highlight.astro", "content": "---\ninterface Props {\n class?: string\n}\n\nconst { class: className } = Astro.props\n---\n\n\n" }, { "path": "src/components/MarkdownWrapper.astro", "content": "---\ninterface Props {\n class?: string\n}\n\nconst { class: className } = Astro.props\n---\n\n
\n \n
\n" }, { "path": "src/components/ProjectList.astro", "content": "---\nimport { getCollection } from 'astro:content'\n\nconst projects = await getCollection('projects')\n---\n\n\n" }, { "path": "src/components/RootPortal.tsx", "content": "import { createPortal } from 'react-dom'\n\nexport function RootPortal({\n to = document.body,\n children,\n}: {\n to?: HTMLElement\n children: React.ReactNode\n}) {\n return createPortal(children, to)\n}\n" }, { "path": "src/components/SectionBlock.astro", "content": "---\ninterface Props {\n title: string\n}\n\nconst { title } = Astro.props\n---\n\n
\n
{title}
\n \n
\n" }, { "path": "src/components/TagList.astro", "content": "---\ninterface Props {\n tags: {\n name: string\n slug: string\n count?: number\n }[]\n}\n\nconst { tags } = Astro.props\n---\n\n{\n tags.length === 0 ? (\n
作者没有准备标签😦
\n ) : (\n
\n {tags.map((tag) => (\n \n
\n
\n {tag.name}\n {tag.count && ({tag.count})}\n
\n \n ))}\n
\n )\n}\n" }, { "path": "src/components/Timeline.astro", "content": "---\nimport type { CollectionEntry } from 'astro:content'\nimport { getShortDate } from '@/utils/date'\n\ninterface Props {\n posts: CollectionEntry<'posts'>[]\n}\n\nconst { posts } = Astro.props\n\nconst groupedPosts = posts.reduce<\n {\n year: number\n posts: CollectionEntry<'posts'>[]\n }[]\n>((acc, cur) => {\n const year = cur.data.date.getFullYear()\n const lastYearGroup = acc[acc.length - 1]\n if (lastYearGroup && lastYearGroup.year === year) {\n lastYearGroup.posts.push(cur)\n } else {\n acc.push({\n year,\n posts: [cur],\n })\n }\n return acc\n}, [])\n---\n\n
\n {\n groupedPosts.map((year) => (\n
\n \n {year.year}\n \n
    \n {year.posts.map((post) => (\n
  • \n \n {getShortDate(post.data.date)}\n \n \n {post.data.title}\n \n {post.data.sticky > 0 && }\n
    • \n ))}\n
\n
\n ))\n }\n
\n" }, { "path": "src/components/TimelineProgress.tsx", "content": "import { useEffect, useRef, useState } from 'react'\nimport { animate } from 'framer-motion'\nimport { getDaysInYear, getDiffInDays, getStartOfDay, getStartOfYear } from '@/utils/date'\n\nexport function TimelineProgress() {\n const [currentYear, setCurrentYear] = useState(0)\n const [dayOfYear, setDayOfYear] = useState(0)\n const [percentOfYear, setPercentOfYear] = useState(0)\n const [percentOfToday, setPercentOfToday] = useState(0)\n\n const updateInfo = () => {\n const now = new Date()\n setCurrentYear(now.getFullYear())\n\n const pastDays = getDiffInDays(getStartOfYear(now), now)\n setDayOfYear(pastDays)\n setPercentOfYear((pastDays / getDaysInYear(now)) * 100)\n\n const pastTime = now.getTime() - getStartOfDay(now).getTime()\n setPercentOfToday((pastTime / 86400 / 1000) * 100)\n }\n\n useEffect(() => {\n updateInfo()\n const interval = setInterval(updateInfo, 1000)\n return () => {\n clearInterval(interval)\n }\n }, [])\n\n return (\n <>\n

\n 今天是 {currentYear} 年的第 天\n

\n

\n 今年已过 %\n

\n

\n 今天已过 %\n

\n \n )\n}\n\nfunction CountUp({\n to,\n decimals,\n duration = 1,\n}: {\n to: number\n decimals: number\n duration?: number\n}) {\n const node = useRef(null)\n const prev = useRef(0)\n\n useEffect(() => {\n if (!node.current) return\n\n const control = animate(prev.current, to, {\n duration,\n onUpdate: (value) => {\n node.current!.textContent = value.toFixed(decimals)\n },\n })\n prev.current = to\n\n return () => {\n control.stop()\n }\n }, [to, decimals, duration])\n\n return \n}\n" }, { "path": "src/components/ToastContainer.tsx", "content": "import { ToastContainer as ReactToastContainer } from 'react-toastify'\nimport 'react-toastify/dist/ReactToastify.css';\n\nexport function ToastContainer() {\n return \n}\n\nfunction CloseButton({ closeToast }: { closeToast: (event: React.MouseEvent) => void }) {\n return \n}" }, { "path": "src/components/comment/Comments.astro", "content": "---\nimport { Waline } from './Waline'\nimport { waline } from '@/config.json'\n---\n\n
\n {waline.serverURL && }\n
\n" }, { "path": "src/components/comment/Waline.tsx", "content": "import { useEffect, useRef } from 'react'\nimport { init } from '@waline/client'\nimport '@waline/client/style'\n\nexport function Waline({ serverURL }: { serverURL: string }) {\n const ref = useRef(null)\n\n useEffect(() => {\n const walineInst = init({\n el: ref.current,\n serverURL,\n dark: \"[data-theme='dark']\",\n login: 'force',\n imageUploader: false,\n search: false,\n locale: {\n placeholder: '发条友善的评论吧（支持 Markdown 语法）…',\n },\n emoji: ['//unpkg.com/@waline/emojis@1.1.0/bilibili'],\n })\n\n return () => {\n if (ref.current) {\n walineInst?.destroy()\n }\n }\n }, [serverURL])\n\n return
\n}\n" }, { "path": "src/components/comment/index.ts", "content": "export { default as Comments } from './Comments.astro'\n" }, { "path": "src/components/footer/Footer.astro", "content": "---\nimport { ThemeSwitch } from './ThemeSwitch'\nimport { author, footer } from '@/config.json'\nimport { getAllPostsWordCount } from '@/utils/content'\nimport { RunningDays } from './RunningDays'\nimport Link from './Link.astro'\n\nconst sinceYear = new Date(footer.startTime).getFullYear()\nconst thisYear = new Date().getFullYear()\nconst copyDate = sinceYear === thisYear ? thisYear : `${sinceYear} - ${thisYear}`\n\nconst wordCount = await getAllPostsWordCount()\n\nconst wordCountStr = (wordCount / 1000).toFixed(1) + 'k'\n---\n\n
\n
\n
\n Powered by\n Astro\n & Designed by\n Gyoza\n
\n
\n ©{copyDate} {author.name}.\n \n \n RSS\n \n \n \n 站点地图\n \n
\n
\n \n |\n 共嘚嘚了 {wordCountStr} 字\n
\n
\n
\n \n
\n
\n" }, { "path": "src/components/footer/Link.astro", "content": "---\nimport type { HTMLAttributes } from 'astro/types'\n\ninterface Props extends HTMLAttributes<'a'> {\n href: string\n}\n\nconst { href, ...attrs } = Astro.props\n\nconst isExternal = href.startsWith('http')\n---\n\n\n" }, { "path": "src/components/footer/RunningDays.tsx", "content": "import { useLayoutEffect, useState } from 'react'\nimport { footer } from '@/config.json'\nimport { getDiffInDays } from '@/utils/date'\n\nexport function RunningDays() {\n const [days, setDays] = useState(0)\n\n useLayoutEffect(() => {\n const diffDays = getDiffInDays(new Date(footer.startTime))\n setDays(diffDays)\n }, [])\n\n if (days < 0) {\n return Ops! 网站还没有发布\n }\n\n return 已经运行了 {days} 天\n}\n" }, { "path": "src/components/footer/ThemeSwitch.tsx", "content": "import { themeAtom } from '@/store/theme'\nimport { useAtom } from 'jotai'\n\nexport function ThemeSwitch() {\n const [theme, setTheme] = useAtom(themeAtom)\n\n const left = { light: 4, system: 36, dark: 68 }[theme]\n\n return (\n
\n
\n \n setTheme('light')}\n >\n \n \n setTheme('system')}\n >\n \n \n setTheme('dark')}\n >\n \n \n
\n \n )\n}\n" }, { "path": "src/components/head/AccentColorInjector.astro", "content": "\n" }, { "path": "src/components/head/CommonHead.astro", "content": "---\nimport { site, author } from '@/config.json'\n\ninterface Props {\n title?: string\n description?: string\n image?: string\n}\n\nconst { title = site.title, description = site.description, image } = Astro.props\n\nconst titleWithSiteSuffix = title === site.title ? title : `${title} - ${site.title}`\n---\n\n\n\n\n\n\n\n{titleWithSiteSuffix}\n\n\n\n\n\n\n\n\n\n{image && }\n\n\n\n\n{author.twitterId && }\n{image && }\n\n\n\n" }, { "path": "src/components/head/PrintVersion.astro", "content": "\n" }, { "path": "src/components/head/ThemeLoader.astro", "content": "\n" }, { "path": "src/components/head/WebAnalytics.tsx", "content": "import { analytics } from '@/config.json'\n\nexport function WebAnalytics() {\n if (import.meta.env.DEV || !analytics.enable) return null\n\n return <>\n {\n analytics.umami.websiteId && \n }\n {\n analytics.google.measurementId && \n }\n {\n analytics.microsoftClarity.projectId && \n }\n \n}\n\nfunction UmamiAnalytics({\n serverUrl,\n websiteId,\n}: {\n serverUrl?: string,\n websiteId: string,\n}) {\n const src = `${serverUrl || 'https://cloud.umami.is'}/script.js`\n\n return \n \n \n )\n}\n\n\nfunction MicrosoftClarity({\n projectId,\n}: {\n projectId: string,\n}) {\n return (\n <>\n \n \n )\n}" }, { "path": "src/components/head/index.ts", "content": "export { default as AccentColorInjector } from './AccentColorInjector.astro'\nexport { default as CommonHead } from './CommonHead.astro'\nexport { default as PrintVersion } from './PrintVersion.astro'\nexport { default as ThemeLoader } from './ThemeLoader.astro'\nexport { WebAnalytics } from './WebAnalytics'\n" }, { "path": "src/components/head-gradient/HeadGradient.tsx", "content": "import { motion } from 'framer-motion'\n\nexport function HeadGradient() {\n return (\n \n )\n}\n" }, { "path": "src/components/head-gradient/index.ts", "content": "export { HeadGradient } from './HeadGradient'\n" }, { "path": "src/components/header/AnimatedLogo.tsx", "content": "import { AnimatePresence, motion } from 'framer-motion'\nimport { useShouldHeaderMetaShow, useIsMobile } from './hooks'\nimport { author } from '@/config.json'\n\nexport function AnimatedLogo() {\n const isMobile = useIsMobile()\n const shouldHeaderMetaShow = useShouldHeaderMetaShow()\n\n if (!isMobile) {\n return \n }\n\n return (\n \n {!shouldHeaderMetaShow && (\n \n \n \n )}\n \n )\n}\n\nfunction Logo() {\n return (\n \n \n \n )\n}\n" }, { "path": "src/components/header/BluredBackground.tsx", "content": "import { useHeaderBgOpacity } from './hooks'\n\nexport function BluredBackground() {\n const opacity = useHeaderBgOpacity()\n\n return (\n \n )\n}\n" }, { "path": "src/components/header/Header.tsx", "content": "import { BluredBackground } from './BluredBackground'\nimport { HeaderContent } from './HeaderContent'\nimport { SearchButton } from './SearchButton'\nimport { AnimatedLogo } from './AnimatedLogo'\nimport { HeaderMeta } from './HeaderMeta'\nimport { HeaderDrawer } from './HeaderDrawer'\nimport { useIsMobile } from './hooks'\n\nexport function Header() {\n const isMobile = useIsMobile()\n\n return (\n
\n \n
\n
\n {isMobile ? : }\n
\n
\n {isMobile ? : }\n \n
\n
\n \n
\n
\n
\n )\n}\n" }, { "path": "src/components/header/HeaderContent.tsx", "content": "import { useState } from 'react'\nimport { menus } from '@/config.json'\nimport { clsx } from 'clsx'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport {\n usePathName,\n useShouldAccessibleMenuShow,\n useShouldHeaderMenuBgShow,\n useShouldHeaderMetaShow,\n} from './hooks'\nimport { RootPortal } from '@/components/RootPortal'\n\nexport function HeaderContent() {\n return (\n <>\n \n \n \n )\n}\n\nfunction AnimatedMenu() {\n const shouldBgShow = useShouldHeaderMenuBgShow()\n const shouldHeaderMetaShow = useShouldHeaderMetaShow()\n\n return (\n \n {!shouldHeaderMetaShow && (\n \n \n \n )}\n \n )\n}\n\nfunction AccessibleMenu() {\n const shouldShow = useShouldAccessibleMenuShow()\n\n return (\n \n \n {shouldShow && (\n \n \n \n )}\n \n \n )\n}\n\nfunction HeaderMenu({ isBgShow }: { isBgShow: boolean }) {\n const pathName = usePathName()\n const [mouseX, setMouseX] = useState(0)\n const [mouseY, setMouseY] = useState(0)\n const [radius, setRadius] = useState(0)\n\n const background = `radial-gradient(${radius}px circle at ${mouseX}px ${mouseY}px, rgb(var(--color-accent) / 0.12) 0%, transparent 65%)`\n\n const handleMouseMove = ({ clientX, clientY, currentTarget }: React.MouseEvent) => {\n const bounds = currentTarget.getBoundingClientRect()\n setMouseX(clientX - bounds.left)\n setMouseY(clientY - bounds.top)\n setRadius(Math.sqrt(bounds.width ** 2 + bounds.height ** 2) / 2.5)\n }\n\n return (\n \n \n
\n {menus.map((menu) => (\n \n ))}\n
\n \n )\n}\n\nfunction HeaderMenuItem({\n href,\n isActive,\n title,\n icon,\n}: {\n href: string\n isActive: boolean\n title: string\n icon: string\n}) {\n return (\n \n
\n {isActive && (\n \n )}\n {title}\n
\n {isActive && (\n
\n )}\n \n )\n}\n" }, { "path": "src/components/header/HeaderDrawer.tsx", "content": "import { menus } from '@/config.json'\nimport { createContext, useContext, useState, forwardRef } from 'react'\nimport * as Dialog from '@radix-ui/react-dialog'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport clsx from 'clsx'\n\nconst contentVariants = {\n hidden: {\n x: '-100%',\n transition: {\n duration: 0.2,\n ease: 'easeOut',\n },\n },\n visible: {\n x: 0,\n transition: {\n staggerChildren: 0.1,\n delayChildren: 0.1,\n duration: 0.2,\n ease: 'easeOut',\n },\n },\n}\n\nconst menuItemVariants = {\n hidden: {\n opacity: 0,\n x: '-100%',\n },\n visible: {\n opacity: 1,\n x: 0,\n },\n}\n\nexport function HeaderDrawer({ zIndex = 999 }: { zIndex?: number }) {\n const [isOpen, setIsOpen] = useState(false)\n const overlayZIndex = zIndex - 1\n const contentZIndex = zIndex\n\n return (\n \n \n \n \n\n \n {isOpen && (\n \n \n \n \n\n \n \n \n \n \n \n \n \n )}\n \n \n )\n}\n\nconst TriggerButton = forwardRef((props, ref) => {\n return (\n \n \n \n )\n})\n\nfunction DrawerContentImpl() {\n const { dismiss } = useContext(DrawerContext)\n\n return (\n \n )\n}\n\nconst DrawerContext = createContext<{ dismiss(): void }>(null!)\n" }, { "path": "src/components/header/HeaderMeta.tsx", "content": "import { site } from '@/config.json'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { useHeaderMetaInfo, useShouldHeaderMetaShow } from './hooks'\n\nexport function HeaderMeta() {\n const { title, description, slug } = useHeaderMetaInfo()\n const shouldShow = useShouldHeaderMetaShow()\n\n return (\n \n {shouldShow && (\n \n
\n
{description}
\n

{title}

\n
\n
\n
{slug}
\n
{site.title}
\n
\n \n )}\n \n )\n}\n" }, { "path": "src/components/header/SearchButton.tsx", "content": "import { motion } from 'framer-motion'\nimport { useCurrentModal, useModal } from '@/components/ui/modal'\nimport { useEffect, useState } from 'react'\nimport { useDebounceValue } from '@/hooks/useDebounceValue'\n\nlet pagefind: any = null\nasync function loadPagefind() {\n if (import.meta.env.PROD && !pagefind) {\n const url = '/pagefind/pagefind.js'\n pagefind = await import(/* @vite-ignore */ url)\n }\n}\n\nexport function SearchButton() {\n const { present } = useModal()\n\n const openModal = () => {\n present({\n content: ,\n })\n }\n\n useSearchKeyboardEvents({ onOpen: openModal })\n\n return (\n \n \n \n )\n}\n\nfunction SearchPanel() {\n const [keyword, setKeyword] = useState('')\n const [isLoading, setIsLoading] = useState(false)\n const [results, setResults] = useState([])\n const debouncedKeyword = useDebounceValue(keyword, 350)\n\n const { dismiss } = useCurrentModal()\n\n async function search(value: string) {\n if (!value) {\n setResults([])\n return\n }\n setIsLoading(true)\n await loadPagefind()\n if (pagefind) {\n const res = await pagefind.search(value)\n const nextResults = await Promise.all(res.results.map((r: any) => r.data()))\n setResults(nextResults)\n }\n setIsLoading(false)\n }\n\n useEffect(() => {\n search(debouncedKeyword)\n }, [debouncedKeyword])\n\n let resultList = null\n if (import.meta.env.DEV) {\n resultList = (\n
\n
\n \n \n \n
\n
抱歉
\n
该功能基于 pagefind，请在构建后再次尝试。
\n
\n
\n
\n )\n } else if (isLoading) {\n resultList = (\n
\n \n \n \n
\n )\n } else if (keyword.length === 0) {\n resultList = (\n
\n \n \n \n
\n )\n } else if (results.length === 0) {\n resultList = (\n
\n
\n \n \n \n
无内容
\n
\n
\n )\n } else {\n resultList = (\n <>\n
找到以下 {results.length} 条结果
\n {results.map((item) => {\n return (\n \n
{item.meta.title}
\n

\n \n )\n })}\n \n )\n }\n\n return (\n \n setKeyword(e.target.value)}\n />\n
{resultList}
\n
\n \n Search by\n pagefind\n \n
\n \n )\n}\n\nfunction useSearchKeyboardEvents({ onOpen }: { onOpen: () => void }) {\n useEffect(() => {\n function handleKeyDown(event: KeyboardEvent) {\n if (event.key.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey)) {\n event.preventDefault()\n onOpen()\n }\n }\n\n window.addEventListener('keydown', handleKeyDown)\n\n return () => {\n window.removeEventListener('keydown', handleKeyDown)\n }\n }, [onOpen])\n}\n" }, { "path": "src/components/header/hooks.ts", "content": "import { useAtomValue } from 'jotai'\nimport {\n pathNameAtom,\n metaTitleAtom,\n metaDescriptionAtom,\n metaSlugAtom,\n hasMetaInfoAtom,\n} from '@/store/metaInfo'\nimport { pageScrollLocationAtom, pageScrollDirectionAtom } from '@/store/scrollInfo'\nimport { isMobileAtom } from '@/store/viewport'\nimport { floor } from 'lodash-es'\n\nconst threshold = 60\n\nexport function useHeaderBgOpacity() {\n const scrollY = useAtomValue(pageScrollLocationAtom)\n if (scrollY >= threshold * 2) {\n return 1\n } else if (scrollY <= threshold) {\n return 0\n } else {\n return floor((scrollY - threshold) / threshold, 2)\n }\n}\n\nexport function useHasMetaInfo() {\n return useAtomValue(hasMetaInfoAtom)\n}\n\nexport function useShouldHeaderMenuBgShow() {\n const scrollY = useAtomValue(pageScrollLocationAtom)\n return scrollY < threshold\n}\n\nexport function useIsMobile() {\n return useAtomValue(isMobileAtom)\n}\n\nexport function useShouldHeaderMetaShow() {\n const hasMetaInfo = useHasMetaInfo()\n const scrollY = useAtomValue(pageScrollLocationAtom)\n\n return hasMetaInfo && scrollY >= threshold\n}\n\nexport function useHeaderMetaInfo() {\n const title = useAtomValue(metaTitleAtom)\n const description = useAtomValue(metaDescriptionAtom)\n const slug = useAtomValue(metaSlugAtom)\n\n return {\n title,\n description,\n slug,\n }\n}\n\nexport function usePathName() {\n return useAtomValue(pathNameAtom)\n}\n\nexport function useShouldAccessibleMenuShow() {\n const scrollY = useAtomValue(pageScrollLocationAtom)\n const scrollDirection = useAtomValue(pageScrollDirectionAtom)\n const hasMetaInfo = useHasMetaInfo()\n\n return hasMetaInfo && scrollY >= 400 && scrollDirection === 'up'\n}\n" }, { "path": "src/components/hero/Hero.astro", "content": "---\nimport { hero, author } from '@/config.json'\nimport { SocialList } from './SocialList'\nimport Highlight from '@/components/Highlight.astro'\n---\n\n
\n \n
\n

\n Hi there, I'm {hero.name}👋
{hero.bio}\n

\n
{hero.description}
\n \n
\n
\n \n \"Site\n
\n
\n\n
\n

\n {hero.yiyan}\n

\n
\n \n
\n
\n \n\n" }, { "path": "src/components/hero/SocialList.tsx", "content": "import clsx from 'clsx'\nimport { hero } from '@/config.json'\nimport { motion } from 'framer-motion'\n\nconst itemVariants = {\n hidden: {\n opacity: 0,\n y: 40,\n },\n visible: {\n opacity: 1,\n y: 0,\n },\n}\n\nexport function SocialList({ className }: { className?: string }) {\n return (\n \n {hero.socials.map((social) => (\n \n \n \n \n \n \n ))}\n \n )\n}\n" }, { "path": "src/components/post/ActionAside.tsx", "content": "import { sponsor, site } from '@/config.json'\nimport { motion } from 'framer-motion'\nimport * as QR from 'qrcode.react'\nimport { useAtomValue } from 'jotai'\nimport { metaSlugAtom, metaTitleAtom } from '@/store/metaInfo'\nimport clsx from 'clsx'\nimport { toast } from 'react-toastify'\nimport { useModal } from '@/components/ui/modal'\n\ninterface ShareData {\n url: string\n text: string\n}\n\nconst shareList = [\n {\n name: 'Twitter',\n icon: 'icon-x',\n onClick: (data: ShareData) => {\n window.open(\n `https://twitter.com/intent/tweet?url=${encodeURIComponent(data.url)}&text=${encodeURIComponent(data.text)}&via=${encodeURIComponent(site.title)}`,\n )\n },\n },\n {\n name: '复制链接',\n icon: 'icon-link',\n onClick: (data: ShareData) => {\n navigator.clipboard.writeText(data.url)\n toast.success('已复制到剪贴板')\n },\n },\n]\n\nexport function ActionAside() {\n return (\n \n \n \n \n )\n}\n\nfunction ShareButton() {\n const postSlug = useAtomValue(metaSlugAtom)\n const postTitle = useAtomValue(metaTitleAtom)\n const { present } = useModal()\n\n const url = new URL(postSlug, site.url).href\n const text = `嘿，我发现了一片宝藏文章「${postTitle}」哩，快来看看吧！`\n\n const openModal = () => {\n present({\n content: ,\n })\n }\n\n return (\n openModal()}\n >\n \n \n )\n}\n\nfunction ShareModal({ url, text }: { url: string; text: string }) {\n return (\n \n

分享此内容

\n
\n
\n \n
\n
分享到...
\n
    \n {shareList.map((item) => (\n item.onClick({ url, text })}\n role=\"button\"\n aria-label={`Share to ${item.name}`}\n >\n \n {item.name}\n \n ))}\n
\n
\n
\n \n )\n}\n\nfunction DonateButton() {\n const { present } = useModal()\n\n const openDonate = () => {\n present({\n content: ,\n })\n }\n\n return (\n openDonate()}\n >\n \n \n )\n}\n\nfunction DonateContent() {\n return (\n \n

感谢您的支持，这将成为我前进的最大动力。

\n
\n \n
\n \n )\n}\n" }, { "path": "src/components/post/Outdate.tsx", "content": "import { useEffect, useState } from 'react'\nimport { getDiffInDays, getFormattedDate } from '@/utils/date'\nimport { motion, AnimatePresence } from 'framer-motion'\n\nexport function Outdate({ lastMod }: { lastMod: Date }) {\n const [isShow, setIsShow] = useState(false)\n\n useEffect(() => {\n const diffDays = getDiffInDays(lastMod)\n if (diffDays > 30) {\n setIsShow(true)\n }\n }, [lastMod])\n\n return (\n \n {isShow && (\n \n \n 这篇文章最后修改于 {getFormattedDate(lastMod)}\n ，部分内容可能已经不适用，如有疑问可联系作者。\n \n \n )}\n \n )\n}\n" }, { "path": "src/components/post/PostArchiveInfo.astro", "content": "---\nimport { slugify } from '@/utils/content'\n\ninterface Props {\n tags: string[]\n category?: string\n class?: string\n}\n\nconst { tags, category, class: className } = Astro.props\n---\n\n
\n {\n category && (\n
\n \n \n {category}\n \n
\n )\n }\n {\n tags.length > 0 && (\n
\n \n {tags.map((tag, index) => (\n <>\n {index > 0 && , }\n \n {tag}\n \n \n ))}\n
\n )\n }\n
\n" }, { "path": "src/components/post/PostCard.astro", "content": "---\nimport type { CollectionEntry } from 'astro:content'\nimport { PostCardHoverOverlay } from './PostCardHoverOverlay'\nimport PostMetaInfo from './PostMetaInfo.astro'\n\ninterface Props {\n entry: CollectionEntry<'posts'>\n}\n\nconst { entry } = Astro.props\n\nconst { remarkPluginFrontmatter } = await entry.render()\n---\n\n\n \n

\n {entry.data.title}\n {\n entry.data.sticky > 0 && (\n \n )\n }\n

\n
\n {\n entry.data.cover && (\n \n )\n }\n {entry.data.summary &&

{entry.data.summary}

}\n
\n
\n \n
\n 继续阅读\n \n \n \n \n \n \n
\n
\n\n" }, { "path": "src/components/post/PostCardHoverOverlay.tsx", "content": "import { AnimatePresence, motion } from 'framer-motion'\nimport { useEffect, useRef, useState } from 'react'\n\nexport function PostCardHoverOverlay() {\n const ref = useRef(null)\n const [enter, setEnter] = useState(false)\n\n const handleMouseEnter = () => {\n setEnter(true)\n }\n const handleMouseLeave = () => {\n setEnter(false)\n }\n const handleFocus = () => {\n setEnter(true)\n }\n const handleBlur = () => {\n setEnter(false)\n }\n\n useEffect(() => {\n const $ref = ref.current\n if (!$ref) return\n const $parent = $ref.parentElement?.parentElement\n if (!$parent) return\n\n $parent.addEventListener('mouseenter', handleMouseEnter)\n $parent.addEventListener('mouseleave', handleMouseLeave)\n $parent.addEventListener('focus', handleFocus)\n $parent.addEventListener('blur', handleBlur)\n\n return () => {\n $parent.removeEventListener('mouseenter', handleMouseEnter)\n $parent.removeEventListener('mouseleave', handleMouseLeave)\n $parent.removeEventListener('focus', handleFocus)\n $parent.removeEventListener('blur', handleBlur)\n }\n }, [])\n\n return (\n <>\n
\n \n {enter && (\n \n )}\n \n \n )\n}\n" }, { "path": "src/components/post/PostCopyright.tsx", "content": "import { author, site } from '@/config.json'\nimport { getFormattedDateTime } from '@/utils/date'\nimport { AnimatedSignature } from '../AnimatedSignature'\nimport { useEffect, useState } from 'react'\nimport { toast } from \"react-toastify\";\n\nfunction getPostUrl(slug: string) {\n return new URL(slug, site.url).href\n}\n\nexport function PostCopyright({\n title,\n slug,\n lastMod,\n}: {\n title: string\n slug: string\n lastMod: Date\n}) {\n const [lastModStr, setLastModStr] = useState('')\n const url = getPostUrl(slug)\n\n function handleCopyUrl() {\n navigator.clipboard.writeText(url)\n toast.success('已复制文章链接')\n }\n\n useEffect(() => {\n setLastModStr(getFormattedDateTime(lastMod))\n }, [lastMod])\n\n return (\n
\n

文章标题：{title}

\n

文章作者：{author.name}

\n

\n 文章链接：{url}\n \n [复制]\n \n

\n

最后修改时间：{lastModStr}

\n
\n
\n
\n \n
\n

\n 商业转载请联系站长获得授权，非商业转载请注明本文出处及文章链接，您可以自由地在任何媒体以任何形式复制和分发作品，也可以修改和创作，但是分发衍生作品时必须采用相同的许可协议。\n
\n 本文采用\n \n CC BY-NC-SA 4.0\n \n 进行许可。\n

\n
\n
\n )\n}\n" }, { "path": "src/components/post/PostList.astro", "content": "---\nimport type { CollectionEntry } from 'astro:content'\nimport PostCard from './PostCard.astro'\n\ninterface Props {\n posts: CollectionEntry<'posts'>[]\n}\n\nconst { posts } = Astro.props\n---\n\n
\n
    \n {\n posts.map((post) => (\n
  • \n \n
    • \n ))\n }\n
\n
\n" }, { "path": "src/components/post/PostMetaInfo.astro", "content": "---\nimport { RelativeDate } from './RelativeDate'\n\ninterface Props {\n date: Date\n lastMod?: Date\n words: number\n readingMinutes: number\n class?: string\n}\n\nconst { date, lastMod, words, readingMinutes, class: className } = Astro.props\n---\n\n
\n
\n \n \n {lastMod && (已编辑)}\n
\n
\n \n {words} 字\n
\n
\n \n {Math.ceil(readingMinutes)} 分钟\n
\n
\n" }, { "path": "src/components/post/PostNav.astro", "content": "---\nimport type { CollectionEntry } from 'astro:content'\n\ninterface Props {\n prev?: CollectionEntry<'posts'>\n next?: CollectionEntry<'posts'>\n class?: string\n}\n\nconst { prev, next, class: className } = Astro.props\n---\n\n
\n
\n {\n prev && (\n \n \n {prev.data.title}\n \n )\n }\n
\n
\n {\n next && (\n \n {next.data.title}\n \n \n )\n }\n
\n
\n" }, { "path": "src/components/post/PostPagination.astro", "content": "---\ninterface Props {\n current: number\n total: number\n getPageUrl: (page: number) => string\n}\n\nconst { current, total, getPageUrl } = Astro.props\n\nconst items = []\nif (current > 1) items.push({ isButton: true, page: current - 1, icon: 'left', label: '上一页' })\nif (current > 1) items.push({ isButton: true, page: 1 })\nif (current > 3) items.push({ isButton: false, icon: 'more' })\nif (current > 2) items.push({ isButton: true, page: current - 1 })\nitems.push({ isButton: false, page: current })\nif (current < total - 1) items.push({ isButton: true, page: current + 1 })\nif (current < total - 2) items.push({ isButton: false, icon: 'more' })\nif (current < total) items.push({ isButton: true, page: total })\nif (current < total)\n items.push({ isButton: true, page: current + 1, icon: 'right', label: '下一页' })\n---\n\n
\n {\n items.map((item) => {\n if (item.isButton) {\n return (\n \n {item.icon ? : item.page}\n \n )\n } else {\n return (\n \n {item.icon ? : item.page}\n \n )\n }\n })\n }\n
\n" }, { "path": "src/components/post/PostToc.tsx", "content": "import { pageScrollLocationAtom, pageScrollDirectionAtom } from '@/store/scrollInfo'\nimport type { MarkdownHeading } from 'astro'\nimport clsx from 'clsx'\nimport { useAtomValue } from 'jotai'\nimport { startTransition, useEffect, useRef, useState } from 'react'\n\nfunction useActiveItem() {\n const [activeItem, setActiveItem] = useState('')\n const scrollY = useAtomValue(pageScrollLocationAtom)\n\n useEffect(() => {\n const $article = document.querySelector('#markdown-wrapper')\n if (!$article) return\n const $headings = Array.from($article.querySelectorAll('h1,h2,h3,h4,h5,h6'))\n for (let i = 0; i < $headings.length; i++) {\n const item = $headings[i]\n const nextItem = $headings[i + 1]\n const itemTop = item.getBoundingClientRect().top\n const nextItemTop = nextItem ? nextItem.getBoundingClientRect().top : 10000\n\n if (itemTop <= 80 && nextItemTop > 80) {\n startTransition(() => {\n setActiveItem(item.id)\n })\n break\n }\n }\n }, [scrollY])\n\n return activeItem\n}\n\nexport function PostToc({ headings }: { headings: MarkdownHeading[] }) {\n const activeItem = useActiveItem()\n\n return (\n \n {headings.map((item) => (\n \n ))}\n \n )\n}\n\nexport function TocItem({\n slug,\n text,\n depth,\n isActive,\n}: {\n slug: string\n text: string\n depth: number\n isActive: boolean\n}) {\n const itemRef = useRef(null)\n const scrollDirection = useAtomValue(pageScrollDirectionAtom)\n\n useEffect(() => {\n if (!isActive) return\n const $item = itemRef.current\n if (!$item) return\n const $container = $item.parentElement\n if (!$container) return\n\n const containerHeight = $container.clientHeight\n const itemHeight = $item.clientHeight\n const itemOffsetTop = $item.offsetTop\n const scrollTop = $container.scrollTop\n\n const itemTop = itemOffsetTop - scrollTop\n const itemBottom = itemTop + itemHeight\n\n if (itemTop < 0 || itemBottom > containerHeight) {\n if (scrollDirection === 'up') {\n $container.scrollTop = itemOffsetTop - containerHeight + itemHeight\n\n } else {\n $container.scrollTop = itemOffsetTop\n }\n }\n }, [isActive])\n\n return (\n
  • \n \n \n {text}\n \n
    • \n )\n}\n" }, { "path": "src/components/post/ReadingProgress.tsx", "content": "import { useEffect, useState } from 'react'\nimport { useAtomValue } from 'jotai'\nimport { pageScrollLocationAtom } from '@/store/scrollInfo'\nimport { floor } from 'lodash-es'\n\nexport function ReadingProgress() {\n const [percent, setPercent] = useState(0)\n const scrollY = useAtomValue(pageScrollLocationAtom)\n\n useEffect(() => {\n const $article = document.querySelector('#markdown-wrapper')\n if (!$article) return\n\n const { offsetHeight, offsetTop } = $article as HTMLElement\n const fullHeight = offsetHeight + offsetTop - window.innerHeight\n\n if (scrollY > fullHeight) {\n setPercent(100)\n } else {\n setPercent(floor((scrollY / fullHeight) * 100))\n }\n }, [scrollY])\n\n return (\n
    \n 进度 {percent}%\n
    \n )\n}\n" }, { "path": "src/components/post/RelativeDate.tsx", "content": "import { getRelativeTime, getFormattedDate } from '@/utils/date'\nimport { useEffect, useState } from 'react'\n\nexport function RelativeDate({ date }: { date: Date }) {\n const [dateStr, setDateStr] = useState(getFormattedDate(date))\n\n useEffect(() => {\n const relative = getRelativeTime(date)\n if (relative) {\n setDateStr(relative)\n }\n }, [date])\n\n return {dateStr}\n}\n" }, { "path": "src/components/provider/HeaderMetaInfoProvider.tsx", "content": "import { useSetAtom } from 'jotai'\nimport { useEffect } from 'react'\nimport { pathNameAtom, metaTitleAtom, metaDescriptionAtom, metaSlugAtom } from '@/store/metaInfo'\n\nexport function HeaderMetaInfoProvider({\n pathName,\n title = '',\n description = '',\n slug = '',\n}: {\n pathName: string\n title?: string\n description?: string\n slug?: string\n}) {\n const setPathName = useSetAtom(pathNameAtom)\n const setTitle = useSetAtom(metaTitleAtom)\n const setDescription = useSetAtom(metaDescriptionAtom)\n const setSlug = useSetAtom(metaSlugAtom)\n\n useEffect(() => {\n // 去掉 pathName 结尾的 '/'\n if (pathName !== '/') {\n setPathName(pathName.replace(/\\/$/, ''))\n } else {\n setPathName(pathName)\n }\n setTitle(title)\n setDescription(description)\n setSlug(slug)\n }, [pathName, title, description, slug])\n\n return null\n}\n" }, { "path": "src/components/provider/PageScrollInfoProvider.tsx", "content": "import { useLayoutEffect, useRef } from 'react'\nimport { throttle } from 'lodash-es'\nimport { useSetAtom } from 'jotai'\nimport { pageScrollLocationAtom, pageScrollDirectionAtom } from '@/store/scrollInfo'\n\nexport function PageScrollInfoProvider() {\n const setScrollLocation = useSetAtom(pageScrollLocationAtom)\n const setScrollDirection = useSetAtom(pageScrollDirectionAtom)\n const prevScrollY = useRef(0)\n\n const scrollHandler = throttle(\n () => {\n let currentTop = document.documentElement.scrollTop\n\n if (currentTop === 0) {\n const bodyStyle = document.body.style\n if (bodyStyle.position === 'fixed') {\n const bodyTop = bodyStyle.top\n currentTop = Math.abs(parseInt(bodyTop, 10))\n }\n }\n\n setScrollDirection(prevScrollY.current - currentTop > 0 ? 'up' : 'down')\n prevScrollY.current = currentTop\n setScrollLocation(currentTop)\n },\n 16,\n {\n leading: false,\n },\n )\n\n useLayoutEffect(() => {\n scrollHandler()\n window.addEventListener('scroll', scrollHandler)\n return () => {\n window.removeEventListener('scroll', scrollHandler)\n }\n }, [])\n return null\n}\n" }, { "path": "src/components/provider/Provider.tsx", "content": "import { HeaderMetaInfoProvider } from './HeaderMetaInfoProvider'\nimport { PageScrollInfoProvider } from './PageScrollInfoProvider'\nimport { ThemeProvider } from './ThemeProvider'\nimport { ViewportProvider } from './ViewportProvider'\n\nexport function Provider(props: {\n pathName: string\n title?: string\n description?: string\n slug?: string\n}) {\n return (\n <>\n \n \n \n \n \n )\n}\n" }, { "path": "src/components/provider/ThemeProvider.tsx", "content": "import { useAtomValue } from 'jotai'\nimport { useEffect } from 'react'\nimport { getSystemTheme, changePageTheme, setLocalTheme } from '@/utils/theme'\nimport { themeAtom } from '@/store/theme'\n\nexport function ThemeProvider() {\n const theme = useAtomValue(themeAtom)\n\n function handlePrefersColorSchemeChange(event: MediaQueryListEvent) {\n if (theme === 'system') {\n changePageTheme(event.matches ? 'dark' : 'light')\n }\n }\n\n useEffect(() => {\n setLocalTheme(theme)\n\n if (theme === 'system') {\n const systemTheme = getSystemTheme()\n changePageTheme(systemTheme)\n } else {\n changePageTheme(theme)\n }\n\n const query = window.matchMedia('(prefers-color-scheme: dark)')\n query.addEventListener('change', handlePrefersColorSchemeChange)\n\n return () => {\n query.removeEventListener('change', handlePrefersColorSchemeChange)\n }\n }, [theme])\n\n return null\n}\n" }, { "path": "src/components/provider/ViewportProvider.tsx", "content": "import { useSetAtom } from 'jotai'\nimport { useEffect } from 'react'\nimport { isMobileAtom } from '@/store/viewport'\n\nexport function ViewportProvider() {\n const setIsMobile = useSetAtom(isMobileAtom)\n\n const handleResize = (event: MediaQueryListEvent) => {\n setIsMobile(!event.matches)\n }\n\n useEffect(() => {\n const query = window.matchMedia('(min-width: 768px)')\n setIsMobile(!query.matches)\n query.addEventListener('change', handleResize)\n return () => {\n query.removeEventListener('change', handleResize)\n }\n }, [])\n\n return null\n}\n" }, { "path": "src/components/ui/modal/Modal.tsx", "content": "import { modalStackAtom } from '@/store/modalStack'\nimport { useSetAtom } from 'jotai'\nimport * as Dialog from '@radix-ui/react-dialog'\nimport { motion } from 'framer-motion'\nimport { CurrentModalContext } from './context'\n\nexport function Modal({\n children,\n index,\n id,\n}: {\n index: number\n children: React.ReactNode\n id: string\n}) {\n const baseZIndex = 1000\n const overlayZIndex = baseZIndex + index\n const contentZIndex = baseZIndex + index + 1\n const setModalStack = useSetAtom(modalStackAtom)\n\n const close = () => {\n setModalStack((stack) => stack.filter((modal) => modal.id !== id))\n }\n\n return (\n {\n if (!isOpen) {\n close()\n }\n }}\n >\n \n \n \n \n\n {\n if (e.target === e.currentTarget) {\n close()\n }\n }}\n >\n \n {children}\n \n \n \n \n )\n}\n" }, { "path": "src/components/ui/modal/ModalStack.tsx", "content": "import { useAtomValue } from 'jotai'\nimport { Modal } from './Modal'\nimport { modalStackAtom } from '@/store/modalStack'\nimport { AnimatePresence } from 'framer-motion'\n\nexport function ModalStack() {\n const modalStack = useAtomValue(modalStackAtom)\n\n return (\n \n {modalStack.map((modal, index) => (\n \n {modal.content}\n \n ))}\n \n )\n}\n" }, { "path": "src/components/ui/modal/context.ts", "content": "import { createContext } from 'react'\n\nexport const CurrentModalContext = createContext<{\n dismiss: () => void\n}>(null as any)\n" }, { "path": "src/components/ui/modal/hooks.ts", "content": "import { useContext, useId, useRef } from 'react'\nimport { useSetAtom } from 'jotai'\nimport { modalStackAtom } from '@/store/modalStack'\nimport { CurrentModalContext } from './context'\n\ntype ModalProps = {\n id?: string\n content: React.ReactNode\n}\n\nexport function useModal() {\n const id = useId()\n const currentCount = useRef(0)\n const setModalStack = useSetAtom(modalStackAtom)\n\n return {\n present(props: ModalProps) {\n const modalId = `${id}-${currentCount.current++}`\n const modalProps = {\n ...props,\n id: props.id ?? modalId,\n }\n setModalStack((stack) => [...stack, modalProps])\n return () => {\n setModalStack((stack) => stack.filter((modal) => modal.id !== modalProps.id))\n }\n },\n }\n}\n\nexport function useCurrentModal() {\n return useContext(CurrentModalContext)\n}\n" }, { "path": "src/components/ui/modal/index.ts", "content": "export * from './hooks'\nexport * from './ModalStack'\n" }, { "path": "src/config.json", "content": "{\n \"site\": {\n \"url\": \"https://gyoza.lxchapu.com\",\n \"title\": \"Gyoza\",\n \"description\": \"这是一个使用 Astro 和 React 开发的博客主题。\",\n \"keywords\": \"Gyoza,blog,Astro,theme,lxchapu,博客主题\",\n \"lang\": \"zh-CN\",\n \"favicon\": \"/favicon.ico\",\n \"appleTouchIcon\": \"/apple-touch-icon.png\"\n },\n \"author\": {\n \"name\": \"lxchapu\",\n \"twitterId\": \"@lxchapu\",\n \"avatar\": \"https://s2.loli.net/2024/04/30/ozsnuS5Ihf3xMBG.webp\"\n },\n \"hero\": {\n \"name\": \"Gyoza\",\n \"bio\": \"A static blog template build with Astro and React.\",\n \"description\": \"Clean, Cute, Fast.\",\n \"socials\": [\n {\n \"name\": \"Github\",\n \"icon\": \"icon-github\",\n \"url\": \"https://github.com/lxchapu/astro-gyoza\",\n \"color\": \"rgb(24, 23, 23)\"\n },\n {\n \"name\": \"X\",\n \"icon\": \"icon-x\",\n \"url\": \"https://twitter.com/lxchapu\",\n \"color\": \"rgb(36, 46, 54)\"\n },\n {\n \"name\": \"Email\",\n \"icon\": \"icon-mail\",\n \"url\": \"mailto:lxchapu@outlook.com\",\n \"color\": \"rgb(212, 70, 56)\"\n }\n ],\n \"yiyan\": \"当第一颗卫星飞向大气层外，我们便以为自己终有一日会征服宇宙。\"\n },\n \"color\": {\n \"accent\": [\n { \"light\": \"#F55555\", \"dark\": \"#FCCF31\" },\n { \"light\": \"#0396FF\", \"dark\": \"#ABDCFF\" },\n { \"light\": \"#fb7287\", \"dark\": \"#99D8CF\" },\n { \"light\": \"#F072B6\", \"dark\": \"#FFF886\" },\n { \"light\": \"#9F44D3\", \"dark\": \"#E2B0FF\" },\n { \"light\": \"#FF6666\", \"dark\": \"#A1CCD1\" },\n { \"light\": \"#F6416C\", \"dark\": \"#838BC6\" },\n { \"light\": \"#32CCBC\", \"dark\": \"#90F7EC\" },\n { \"light\": \"#33A6B8\", \"dark\": \"#79F1A4\" },\n { \"light\": \"#F55555\", \"dark\": \"#FCCF31\" }\n ],\n \"bg\": {\n \"primary\": { \"light\": \"#ffffff\", \"dark\": \"#1c1c1e\" },\n \"secondary\": { \"light\": \"#f4f4f5\", \"dark\": \"#27272a\" }\n },\n \"text\": {\n \"primary\": { \"light\": \"#373a3c\", \"dark\": \"#ffffff\" },\n \"secondary\": { \"light\": \"#71717a\", \"dark\": \"#d1d5db\" }\n },\n \"border\": {\n \"primary\": { \"light\": \"#e4e4e7\", \"dark\": \"#3f3f46\" }\n }\n },\n \"menus\": [\n {\n \"name\": \"首页\",\n \"link\": \"/\",\n \"icon\": \"icon-pantone\"\n },\n {\n \"name\": \"归档\",\n \"link\": \"/archives\",\n \"icon\": \"icon-archive\"\n },\n {\n \"name\": \"项目\",\n \"link\": \"/projects\",\n \"icon\": \"icon-flask\"\n },\n {\n \"name\": \"关于\",\n \"link\": \"/about\",\n \"icon\": \"icon-ghost\"\n },\n {\n \"name\": \"友链\",\n \"link\": \"/friends\",\n \"icon\": \"icon-hearts\"\n }\n ],\n \"posts\": {\n \"perPage\": 10\n },\n \"footer\": {\n \"startTime\": \"2024-04-14T00:00:00Z\"\n },\n \"waline\": {\n \"serverURL\": \"https://waline.lxchapu.com\"\n },\n \"sponsor\": {\n \"wechat\": \"https://object.lxchapu.com/bed%2F2024%2F0507_6e3e8f73df2d4e6d.webp\"\n },\n \"analytics\": {\n \"enable\": false,\n \"google\": {\n \"measurementId\": \"\"\n },\n \"umami\": {\n \"serverUrl\": \"\",\n \"websiteId\": \"\"\n },\n \"microsoftClarity\": {\n \"projectId\": \"\"\n }\n }\n}\n" }, { "path": "src/content/config.ts", "content": "import { z, defineCollection } from 'astro:content'\n\nconst postsCollection = defineCollection({\n type: 'content',\n schema: z.object({\n title: z.string(),\n date: z.date(),\n lastMod: z.date().optional(),\n summary: z.string().optional(),\n cover: z.string().optional(),\n category: z.string().optional(),\n tags: z.array(z.string()).default([]),\n comments: z.boolean().default(true),\n draft: z.boolean().default(false),\n sticky: z.number().default(0),\n }),\n})\n\nconst projectsCollection = defineCollection({\n type: 'data',\n schema: z.object({\n title: z.string(),\n description: z.string(),\n image: z.string(),\n link: z.string().url(),\n }),\n})\n\nconst specCollection = defineCollection({\n type: 'content',\n schema: z.object({\n title: z.string(),\n description: z.string(),\n comments: z.boolean().default(true),\n }),\n})\n\nconst friendsCollection = defineCollection({\n type: 'data',\n schema: z.object({\n title: z.string(),\n description: z.string(),\n avatar: z.string(),\n link: z.string().url(),\n }),\n})\n\nexport const collections = {\n posts: postsCollection,\n projects: projectsCollection,\n spec: specCollection,\n friends: friendsCollection,\n}\n" }, { "path": "src/content/friends/Keigo.yml", "content": "title: Keigo\ndescription: 那天早上的霧散了,不止早上,不止霧\nlink: https://astro.sliverkeigo.top/\navatar: https://www.sliverkeigo.top/_next/image?url=https%3A%2F%2Fsliverkeigo.top%2Fapi%2Fv2%2Fobjects%2Favatar%2Fd7mox619mtisq9vtxt.png&w=384&q=75\n" }, { "path": "src/content/friends/astro-docs.yaml", "content": "title: Astro Docs\ndescription: Astro 入门指南\nlink: https://docs.astro.build/en/getting-started/\navatar: https://s2.loli.net/2023/12/13/YbKirkO21CtdvMD.png\n" }, { "path": "src/content/friends/lxchapu.yaml", "content": "title: '柃夏chapu'\ndescription: '生活明朗，万物可爱。'\nlink: 'https://www.lxchapu.com'\navatar: 'https://s2.loli.net/2024/04/23/tIxXmT45RbBDWH8.webp'\n" }, { "path": "src/content/posts/embed.md", "content": "---\ntitle: 在文章中嵌入视频和代码\ndate: 2024-04-04\nlastMod: 2024-05-18T07:29:49.820Z\ntags: [Video, Markdown]\ncategory: 例子\nsummary: 这篇文章介绍了如何在文章中嵌入视频和代码。\n---\n\n## Codepen\n\n```md\n::codepen{#gOyLepE author=\"lxchapu\"}\n```\n\n::codepen{#gOyLepE author=\"lxchapu\"}\n\n## YouTube\n\n```md\n::youtube{#BuKft9LpL_0}\n```\n\n::youtube{#BuKft9LpL_0}\n\n## Bilibili\n\n```md\n::bilibili{#BV1Mx4y1Y7pJ}\n```\n\n::bilibili{#BV1Mx4y1Y7pJ}\n" }, { "path": "src/content/posts/guide.md", "content": "---\ntitle: Gyoza 使用指南\ndate: 2024-04-01\nlastMod: 2024-08-10T03:58:16.758Z\nsummary: 欢迎使用 Gyoza，Gyoza 是一款 Astro 博客主题，它保持简洁和可爱的风格。本篇文章将会介绍如何使用并部署 Gyoza。\ncategory: 教程\ntags: [Astro, Gyoza]\nsticky: 1\n---\n\n## 前置条件\n\n- node 版本 >= 18.18.0\n- pnpm 版本 > 8.1.0\n\n## 安装\n\n### 克隆仓库\n\n登录 Github 账号，打开 [lxchapu/astro-gyoza](https://github.com/lxchapu/astro-gyoza)，点击右上角的 Fork 按钮，将仓库克隆到你自己的账号下。\n\n复制这个仓库的地址，打开终端，使用 `git clone` 命令将仓库克隆到本地。\n\n> 本项目推荐使用 pnpm 作为你的包管理器，如果你还没有安装 pnpm，请先安装 pnpm。\n\n### 安装依赖\n\n```sh\ncd astro-gyoza\npnpm install\n```\n\n### 命令介绍\n\n本地运行\n\n```sh\npnpm dev\n```\n\n打包静态文件\n\n```sh\npnpm build\n```\n\n本地预览\n\n```sh\npnpm preview\n```\n\n### 配置项\n\n本项目中的绝大部分配置都定义在 `src/config.json` 文件中。\n\n你应该首先将 `site.url` 修改成自己的域名，避免导航错误。\n\n以下是配置项的说明：\n\n```json\n{\n \"site\": {\n \"url\": \"\", // 网站地址\n \"title\": \"\", // 网站标题\n \"description\": \"\", // 通用的网站描述 SEO\n \"keywords\": \"\", // 通用的网站关键词 SEO\n \"lang\": \"zh-CN\", // 网站的语言\n \"favicon\": \"\", // 浏览器图标，存放在 public 目录下\n \"appleTouchIcon\": \"\" // 苹果设备图标，存放在 public 目录下\n },\n \"author\": {\n \"name\": \"\", // 作者名称\n \"twitterId\": \"\", // 推特账号 ID，以 @ 开头，用于 Open Graph\n \"avatar\": \"\" // 作者头像地址\n },\n // 首页 Hero 组件\n \"hero\": {\n \"name\": \"\", // 显示的名称\n \"bio\": \"\", // 一句话介绍\n \"description\": \"\", // 补充描述\n // 社交账号\n \"socials\": [\n {\n \"name\": \"\", // 社交平台类型\n \"icon\": \"\", // 社交平台图标\n \"url\": \"\", // 链接\n \"color\": \"\" // 图标颜色\n }\n ],\n \"yiyan\": \"\" // 显示一言\n },\n \"color\": {\n // 强调色，请填写 16 进制颜色值。每次会从中随机取出一组\n \"accent\": [{ \"light\": \"\", \"dark\": \"\" }],\n // 背景色\n \"bg\": {\n \"primary\": { \"light\": \"\", \"dark\": \"\" },\n \"secondary\": { \"light\": \"\", \"dark\": \"\" }\n },\n // 文字颜色\n \"text\": {\n \"primary\": { \"light\": \"\", \"dark\": \"\" },\n \"secondary\": { \"light\": \"\", \"dark\": \"\" }\n },\n // 边框颜色\n \"border\": {\n \"primary\": { \"light\": \"\", \"dark\": \"\" }\n }\n },\n // 顶部导航栏\n \"menus\": [\n {\n \"name\": \"首页\",\n \"link\": \"/\",\n \"icon\": \"icon-pantone\"\n }\n ],\n \"posts\": {\n \"perPage\": 10 // 每一页显示的文章数量\n },\n \"footer\": {\n \"startTime\": \"\" // 博客网站开始时间 请使用 ISO 格式\n },\n // Waline 评论系统，前往 https://waline.js.org/ 查看\n \"waline\": {\n \"serverURL\": \"\"\n },\n // 赞助\n \"sponsor\": {\n \"wechat\": \"\" // 微信赞赏码图片地址\n },\n // 如果需要使用网站数据统计，将 enable 修改为 true，并填写对应的配置\n \"analytics\": {\n \"enable\": false,\n // https://analytics.google.com\n \"google\": {\n \"measurementId\": \"\"\n },\n // https://umami.is/docs\n \"umami\": {\n \"serverUrl\": \"\",\n \"websiteId\": \"\"\n },\n // https://clarity.microsoft.com/\n \"microsoftClarity\": {\n \"projectId\": \"\"\n }\n }\n}\n```\n\n## 部署\n\n> 这里只介绍了 Vercel，你当然可以选择其他平台例如：Cloudflare Pages 或你自己的服务器。 \n> 部署之前，确保你已经修改 `site.url`。\n\n### 部署到 Vercel\n\n登录 Vercel 账号，点击右上角的 Add new... 选择 Project。然后在 Import Git Repository 中选择刚刚 Fork 的仓库，点击 Import 按钮。\n\n进入项目配置页面，直接点击 Deploy 按钮，静静等待部署完成就 👌 了。\n\nVercel 会为你分配一个域名，你可以在项目设置中设置自定义域名，更多操作请参考 Vercel 文档。\n" }, { "path": "src/content/posts/how-to-use-icons.md", "content": "---\ntitle: 如何在 Gyoza 中使用图标？\ndate: 2024-05-08T10:54:27.000Z\ntags: [Icon]\ncategory: 教程\ncomments: true\ndraft: false\n---\n\nGyoza 选择 font-class 的方式引用图标。这些图标大部分来源于 [Remix Icons](https://remixicon.com/)，并且在 [iconfont](https://www.iconfont.cn/) 上进行管理和导出。\n\n下图展示了项目中的所有图标：\n\n![所有图标](https://s2.loli.net/2024/05/08/mbdT5HqYMEajyRG.webp)\n\n当你在添加首页显示的社交账号时，你可能会想要使用这些图标。在对应的配置项中填写图标下面有 `icon-` 前缀的名称即可。\n\n如果是在组件中使用图标，可以按照如下方式：\n\n```jsx\n\n```\n\n## 为什么不是 SVG 图标？\n\n你可能看到很多的项目在使用 [iconify](https://iconify.design/)。iconify 是一个开源图标集，包含超过 20 万个图标，提供了多种框架的引入方式。Astro 中也有对应的插件 astro-icon 可以使用（如果对此感兴趣，可以查看他们的[文档](https://github.com/natemoo-re/astro-icon)）。\n\n我在项目中也尝试使用过 iconify，但是出于以下几个原因，我最终还是转向了 font-class 的方式：\n\n- 由于项目中同时使用了 Astro 和 React，而在 Astro 组件和 React 组件中使用 iconify 图标的方式是不同的，这会导致代码中不得不存在两种使用方式。\n- iconify 在加载时需要请求它的服务器，~~我会担心请求失败~~，虽然这种担心是多余的。\n- 有一个功能是我会在渲染文章时往 markdown 中注入一些图标，例如外部链接尾部的图标，iconify 想要做到这一点并不方便。\n- 在 HTML 中直接嵌入 SVG icon 的方式并不优雅，使用 font-class 只需要对应的类名，感觉相较而言最终的 HTML 体积小一点，页面加载会快点。我还没有做过具体的测试，但是至少我会尽量避免页面中出现大量的 SVG 仅仅只是作为图标使用。\n- 该项目中用到的图标并不多，主要是一些常用的社交账号的图标，供自定义联系方式时使用。我希望所有图标集中在一起管理，这样更方便一点。\n\n我必须要承认，目前的图标方案并不优雅，每当图标集合发生修改时我都需要更新对应的字体文件和 CSS 文件。而且其他人想要管理图标集合也变得困难。\n\n也许我会在未来尝试其他方式，例如 [@iconify/tailwind](https://github.com/iconify/iconify/tree/main/plugins/tailwind)，如果你有更好的方案，也欢迎给我留言。\n\n## 自定义图标\n\n如果你想要替换 iconfont 的图标，请修改以下文件：\n\n```text\npublic/fonts/iconfont.ttf\npublic/fonts/iconfont.woff\npublic/fonts/iconfont.woff2\nsrc/styles/iconfont.css\n```\n\n注意，这将会替换掉项目中使用的所有图标，所以请确保你知道自己在做什么。\n" }, { "path": "src/content/posts/markdown.md", "content": "---\ntitle: Markdown 示例\ndate: 2024-04-01\nsummary: 这是一篇 Markdown 文章的示例。展示了 Markdown 的语法和渲染效果。\ncategory: 例子\ntags: [Markdown]\n---\n\n下面是在 Astro 中编写 Markdown 内容时，可以使用的一些基本 Markdown 语法示例。\n\n## 标题\n\n你应该避免在 Markdown 正文中重复创建文章标题，因为文章标题会根据 `frontmatter` 中 `title` 自动生成。\n\n> 避免标题层级过深，一般到三级标题就够了。\n\n# 一级\n\n## 二级\n\n### 三级 `inline code`\n\n#### 四级\n\n##### 五级\n\n###### 六级\n\n## 段落\n\nXerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.\n\n使用行尾使用两个空格进行段落内的换行\n\nAll work and no play makes Jack a dull boy. \nAll work and no play makes Jack a dull boy.\n\n## 图片\n\n小尺寸的图片\n\n![图片描述](https://picsum.photos/seed/picsum/250/400)\n\n大尺寸的图片\n\n![图片描述](https://picsum.photos/seed/picsum/1200/900)\n\n带标题的图片\n\n![图片描述](https://picsum.photos/seed/picsum/400/300 '图片标题')\n\n## 强调\n\n这是**重要内容**，这是*次要内容*\n\n## 删除线\n\n~~这是一段被删除的文本。~~\n\n## 引用\n\nThe blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.\n\n> Tiam, ad mint andaepu dandae nostion secatur sequo quae. \n> **Note** that you can use _Markdown syntax_ within a blockquote.\n\n嵌套的引用\n\n> 引用\n>\n> > 嵌套的引用\n\n带脚标的引用\n\n> Don't communicate by sharing memory, share memory by communicating.
    \n> — Rob Pike[^1]\n\n[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.\n\n## 分割线\n\n---\n\n## 链接\n\n这是内部链接 [Gyoza 使用指南](/posts/guide)\n\n这是外部连接 [React **中文**文档](https://zh-hans.react.dev/)\n\n自动渲染成连接 \n\n邮箱地址 \n\n## 表格\n\n设置单元格对齐\n\n| Name | Age | Fruit |\n| :---- | :-: | -----: |\n| Bob | 27 | Apple |\n| Alice | 23 | Banana |\n| John | 28 | Orange |\n\n支持行内 Markdown\n\n| Italics | Bold | Code |\n| --------- | -------- | ------ |\n| _italics_ | **bold** | `code` |\n\n表格溢出\n\n| A | B | C | D | E | F |\n| -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------- | ---------------------------------------------------------- | -------------------------------------------------------------------- |\n| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Phasellus ultricies, sapien non euismod aliquam, dui ligula tincidunt odio, at accumsan nulla sapien eget ex. | Proin eleifend dictum ipsum, non euismod ipsum pulvinar et. Vivamus sollicitudin, quam in pulvinar aliquam, metus elit pretium purus | Proin sit amet velit nec enim imperdiet vehicula. | Ut bibendum vestibulum quam, eu egestas turpis gravida nec | Sed scelerisque nec turpis vel viverra. Vivamus vitae pretium sapien |\n\n## 代码块\n\n### Syntax\n\nwe can use 3 backticks ``` in new line and write snippet and close with 3 backticks on new line and to highlight language specific syntac, write one word of language name after first 3 backticks, for eg. html, javascript, css, markdown, typescript, txt, bash\n\n```html\n\n\n \n \n Example HTML5 Document\n \n \n

    Test

    \n \n\n```\n\n```\nconst var text = \"hello world\"\n```\n\n## KaTeX 公式\n\n使用 `$` 符号包裹公式生成行内公式，例如：$E = mc^2$。\n\n使用 `$$` 符号包裹公式来生成独立公式。例如：\n\n$$\ne^{i\\pi} + 1 = 0\n$$\n\n也可以使用代码块（` ```math `）的方式：\n\n```math\n\\oint_{\\partial V} \\mathbf{E} \\cdot d\\mathbf{A} = \\frac{Q}{\\epsilon_0}\n```\n\n## List Types\n\n### Ordered List\n\n#### Syntax\n\n```markdown\n1. First item\n2. Second item\n3. Third item\n```\n\n#### Output\n\n1. First item\n2. Second item\n3. Third item\n\n### Unordered List\n\n#### Syntax\n\n```markdown\n- List item\n- Another item\n- And another item\n```\n\n#### Output\n\n- List item\n- Another item\n- And another item\n\n### Nested list\n\n#### Syntax\n\n```markdown\n- Fruit\n - Apple\n - Orange\n - Banana\n- Dairy\n - Milk\n - Cheese\n```\n\n#### Output\n\n- Fruit\n - Apple\n - Orange\n - Banana\n- Dairy\n - Milk\n - Cheese\n\n## Other Elements — abbr, sub, sup, kbd, mark\n\n### Syntax\n\n```markdown\nGIF is a bitmap image format.\n\nH2O\n\nXn + Yn = Zn\n\nPress CTRL+ALT+Delete to end the session.\n\nMost salamanders are nocturnal, and hunt for insects, worms, and other small creatures.\n```\n\n#### Output\n\nGIF is a bitmap image format.\n\nH2O\n\nXn + Yn = Zn\n\nPress CTRL+ALT+Delete to end the session.\n\nMost salamanders are nocturnal, and hunt for insects, worms, and other small creatures.\n\n## Spoiler\n\n```md\n||hide content||\n```\n\n正常情况下，该内容会隐藏 ||hide content||，鼠标悬浮时才会显示。\n" }, { "path": "src/content/projects/gyoza.yaml", "content": "title: Gyoza\ndescription: Gyoza 是一个使用 Astro 和 React 开发的响应式博客主题\nimage: https://s2.loli.net/2024/03/02/hba5MAilRXguZtr.webp\nlink: https://github.com/lxchapu/astro-gyoza\n" }, { "path": "src/content/spec/about.md", "content": "---\ntitle: 自述\ndescription: 这是一份站长的自述报告，请查收。\ncomments: false\n---\n\n## 关于 Gyoza\n\nGyoza 是一个使用 Astro 和 React 开发的博客主题。Gyoza 借鉴了 [Shiro](https://github.com/innei/Shiro) 和一些网站的设计。\n\nGyoza 的核心理念是简洁，快速，可爱。\n\n- 在 [Markdown 示例](/posts/markdown) 中展示了 Markdown 的渲染样式\n- 可以前往 [Gyoza 使用指南](/posts/guide) 了解 Gyoza 的使用方法\n\nGyoza 是开源的，如果你对这个项目感兴趣，欢迎前往 Gyoza 的 [Github 仓库](https://github.com/lxchapu/astro-gyoza) 来提 Issue 或者 PR。\n\n## 关于作者\n\n我是 lxchapu，是一名前端开发者，喜欢各种有趣的东西。欢迎访问我的个人网站 [www.lxchapu.com](https://www.lxchapu.com)，了解关于我更多的信息。\n\n## 致谢\n\n感谢以下项目：\n\n- [Astro](https://astro.build/)\n- [React](https://reactjs.org/)\n- [Tailwind CSS](https://tailwindcss.com/)\n- [Framer Motion](https://www.framer.com/motion/)\n- [Jotai](https://jotai.org/)\n" }, { "path": "src/content/spec/friends.md", "content": "---\ntitle: 朋友们\ndescription: 我的小伙伴们和一些有趣的站点。\ncomments: true\n---\n\n## 怎么申请友链？\n\n想要交换友链的小伙伴们，欢迎去本站的 [Github 仓库](https://github.com/lxchapu/astro-gyoza/tree/main/src/content/friends)提交一个 PR。审核通过后，就可以在这里展示啦。\n\n请在`/src/content/friends/`目录下添加一个`.yaml`文件，参考格式：\n\n```yml\ntitle: 网站名称\ndescription: 一句话介绍下你的网站或者你自己\nlink: 网站地址\navatar: 头像地址\n```\n" }, { "path": "src/content/spec/projects.md", "content": "---\ntitle: 项目\ndescription: 这些是我创建或参与的项目，如果你感兴趣不妨去给个 Star。\ncomments: false\n---\n" }, { "path": "src/env.d.ts", "content": "/// \n/// \n" }, { "path": "src/hooks/useDebounceValue.ts", "content": "import { useEffect, useState } from 'react'\n\nexport function useDebounceValue(value: T, delay: number) {\n const [debouncedValue, setDebouncedValue] = useState(value)\n\n useEffect(() => {\n const handler = setTimeout(() => {\n setDebouncedValue(value)\n }, delay)\n\n return () => {\n clearTimeout(handler)\n }\n }, [value, delay])\n\n return debouncedValue\n}\n" }, { "path": "src/layouts/Layout.astro", "content": "---\nimport {\n CommonHead,\n WebAnalytics,\n ThemeLoader,\n AccentColorInjector,\n PrintVersion,\n} from '@/components/head'\nimport { BackToTopFAB } from '@/components/BackToTopFAB'\nimport { ToastContainer } from '@/components/ToastContainer'\nimport { ModalStack } from '@/components/ui/modal'\nimport { site } from '@/config.json'\nimport '@/styles/global.css'\n\ninterface Props {\n title?: string\n description?: string\n image?: string\n}\n\nconst { title, description, image } = Astro.props\n---\n\n\n\n \n \n \n \n \n \n \n \n \n\n \n \n \n \n\n" }, { "path": "src/layouts/MarkdownLayout.astro", "content": "---\nimport Layout from './Layout.astro'\nimport { HeadGradient } from '@/components/head-gradient'\nimport Footer from '@/components/footer/Footer.astro'\nimport { Header } from '@/components/header/Header'\nimport { Provider } from '@/components/provider/Provider'\nimport 'katex/dist/katex.min.css'\n\ninterface Props {\n title: string\n description?: string\n image?: string\n mdTitle: string\n mdDescription: string\n mdSlug: string\n}\n\nconst { title, description, image, mdTitle, mdDescription, mdSlug } = Astro.props\n---\n\n\n \n\n
    \n
    \n \n
    \n \n
    \n
    \n