From eaebe1f67c2e2c5098fe515b2d7400668ae9a060 Mon Sep 17 00:00:00 2001 From: sumingcheng Date: Tue, 10 Dec 2024 22:14:07 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=A6=96=E9=A1=B5=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...30\347\272\247\347\261\273\345\236\213.md" | 2 + docusaurus.config.js | 7 +- package-lock.json | 9 + package.json | 1 + sidebars.js | 16 +- src/components/NeonButton/index.js | 14 ++ src/components/NeonButton/styles.module.scss | 96 ++++++++ src/pages/index.js | 201 +++++++++++++-- src/pages/index.module.css | 23 -- src/pages/index.module.scss | 232 ++++++++++++++++++ 10 files changed, 546 insertions(+), 55 deletions(-) create mode 100644 src/components/NeonButton/index.js create mode 100644 src/components/NeonButton/styles.module.scss delete mode 100644 src/pages/index.module.css create mode 100644 src/pages/index.module.scss diff --git "a/docs/Frontend/TypeScript/90.\351\253\230\347\272\247\347\261\273\345\236\213.md" "b/docs/Frontend/TypeScript/90.\351\253\230\347\272\247\347\261\273\345\236\213.md" index 701e0128..d7419227 100644 --- "a/docs/Frontend/TypeScript/90.\351\253\230\347\272\247\347\261\273\345\236\213.md" +++ "b/docs/Frontend/TypeScript/90.\351\253\230\347\272\247\347\261\273\345\236\213.md" @@ -145,6 +145,7 @@ function doStuff(q: A | B) { ## 可辨识联合类型 +```typescript interface Square { kind: "square"; size: number; @@ -164,3 +165,4 @@ case "square": return s.size _ s.size; case "rectangle": return s.width _ s.height; } } +``` diff --git a/docusaurus.config.js b/docusaurus.config.js index fb780a89..77c18d3b 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -30,7 +30,7 @@ const config = { onBrokenLinks: "throw", onBrokenMarkdownLinks: "warn", - // 即使不使���国际化，也必须在此设置有用的元数据 + // 即使不使用国际化，也必须在此设置有用的元数据 // 例如，中文网站可将"en"替换为"zh-CN" i18n: { defaultLocale: "zh-CN", @@ -119,6 +119,11 @@ const config = { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap", }, + { + tagName: "link", + rel: "stylesheet", + href: "https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap", + }, ], navbar: navbar, footer: { diff --git a/package-lock.json b/package-lock.json index a313b585..bf917e92 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "prism-react-renderer": "^2.3.0", "react": "^18.0.0", "react-dom": "^18.0.0", + "react-icons": "^5.4.0", "sass": "^1.82.0" }, "devDependencies": { @@ -14416,6 +14417,14 @@ "react-dom": "^16.6.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-icons": { + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz", + "integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index 03fefd26..958f08d0 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "prism-react-renderer": "^2.3.0", "react": "^18.0.0", "react-dom": "^18.0.0", + "react-icons": "^5.4.0", "sass": "^1.82.0" }, "devDependencies": { diff --git a/sidebars.js b/sidebars.js index 4b664dcb..c2aa87d2 100644 --- a/sidebars.js +++ b/sidebars.js @@ -1,13 +1,5 @@ /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */ const sidebars = { - // Resource - resourceSidebar: [ - { - type: "autogenerated", - dirName: "Resource", - }, - ], - // Backend goSidebar: [ { @@ -221,6 +213,14 @@ const sidebars = { dirName: "Other/Notes", }, ], + + // Resource + resourceSidebar: [ + { + type: "autogenerated", + dirName: "Resource", + }, + ], } module.exports = sidebars diff --git a/src/components/NeonButton/index.js b/src/components/NeonButton/index.js new file mode 100644 index 00000000..e0412434 --- /dev/null +++ b/src/components/NeonButton/index.js @@ -0,0 +1,14 @@ +import React from 'react'; +import styles from './styles.module.scss'; + +export default function NeonButton({ children, to, className, ...props }) { + return ( + + {children} + + ); +} \ No newline at end of file diff --git a/src/components/NeonButton/styles.module.scss b/src/components/NeonButton/styles.module.scss new file mode 100644 index 00000000..907882f0 --- /dev/null +++ b/src/components/NeonButton/styles.module.scss @@ -0,0 +1,96 @@ +.neonButton { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.8rem 2rem; + font-size: 1.2rem; + font-weight: 600; + color: #fff; + background: var(--ifm-color-primary); + border: none; + border-radius: 8px; + text-decoration: none; + cursor: pointer; + z-index: 1; + + &::before, + &::after { + content: ''; + position: absolute; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + border-radius: 10px; + transition: 0.3s ease-in-out; + } + + &::before { + z-index: -2; + background: linear-gradient( + 90deg, + #00fff3, + // 霓虹青色 + #ff00c1, + // 霓虹粉 + #00ff8f, + // 荧光绿 + #9600ff, + // 紫罗兰 + #00fff3 // 回到霓虹青色 + ); + background-size: 300%; + filter: blur(5px); + opacity: 0; + transition: opacity 0.3s ease; + } + + &::after { + z-index: -1; + background: var(--ifm-color-primary); + border-radius: 8px; + } + + &:hover { + color: #fff; + text-decoration: none; + + &::before { + opacity: 1; + animation: glowing 2s linear infinite; + } + } + + &:active { + transform: translateY(0); + } +} + +@keyframes glowing { + 0% { + background-position: 0% center; + opacity: 0.8; + } + 25% { + opacity: 1; + } + 50% { + background-position: -100% center; + opacity: 1; + } + 75% { + opacity: 0.8; + } + 100% { + background-position: -200% center; + opacity: 0.8; + } +} + +// 暗色主题只改变背景色 +[data-theme='dark'] .neonButton { + &::after { + background: var(--ifm-color-primary-darker); + } +} diff --git a/src/pages/index.js b/src/pages/index.js index 23753a28..36e6e077 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,45 +1,200 @@ -import clsx from "clsx"; -import Link from "@docusaurus/Link"; -import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; -import Layout from "@theme/Layout"; -import HomepageFeatures from "@site/src/components/HomepageFeatures"; +import clsx from "clsx" +import Link from "@docusaurus/Link" +import useDocusaurusContext from "@docusaurus/useDocusaurusContext" +import Layout from "@theme/Layout" +import Heading from "@theme/Heading" +import styles from "./index.module.scss" +import { useColorMode } from '@docusaurus/theme-common' +import { + RiJavascriptFill, + RiReactjsFill, + RiVuejsFill, + RiHtml5Fill, + RiCss3Fill, + RiNodejsFill, + RiDatabase2Fill, + RiGithubFill, + RiBookFill, + RiCodeBoxFill, + RiWindowFill, + RiSettings4Fill, + RiFileTextFill, + RiFolderOpenFill, + RiGlobalFill, + RiTerminalBoxFill, + RiToolsFill, + RiAppsLine, + RiCodeSSlashFill, + RiServerFill +} from 'react-icons/ri' -import Heading from "@theme/Heading"; -import styles from "./index.module.css"; +import { + FaJava, + FaPython, + FaDocker, + FaReact, + FaDatabase, + FaCode, + FaNetworkWired, + FaRegFileCode, + FaDesktop, + FaCogs, + FaCubes, + FaGlobe, + FaBook, + FaFolder +} from 'react-icons/fa' + +import NeonButton from '../components/NeonButton' + +// 添加一个辅助函数来处理路径 +const getDocPath = (path) => `/docs-hub${path}` + +// 定义文档分类 +const categories = [ + { + title: '后端开发', + enTitle: 'Backend', + items: [ + { name: 'Go', icon: , path: '/docs/Backend/Go' }, + { name: 'Python', icon: , path: '/docs/Backend/Python' }, + { name: 'Java', icon: , path: '/docs/Backend/Java' }, + { name: 'Docker', icon: , path: '/docs/Backend/Docker' }, + { name: 'MySQL', icon: , path: '/docs/Backend/MySQL' }, + { name: 'Redis', icon: , path: '/docs/Backend/Redis' }, + { name: 'Nginx', icon: , path: '/docs/Backend/Nginx' }, + { name: 'ElasticSearch', icon: , path: '/docs/Backend/ElasticSearch' }, + { name: 'MQ', icon: , path: '/docs/Backend/MQ' }, + { name: 'MongoDB', icon: , path: '/docs/Backend/MongoDB' }, + { name: 'Git', icon: , path: '/docs/Backend/Git' }, + { name: '正则', icon: , path: '/docs/Backend/Regular' }, + ] + }, + { + title: '前端开发', + enTitle: 'Frontend', + items: [ + { name: 'JavaScript', icon: , path: '/docs/Frontend/JavaScript' }, + { name: 'TypeScript', icon: , path: '/docs/Frontend/TypeScript' }, + { name: 'Vue', icon: , path: '/docs/Frontend/Vue' }, + { name: 'React', icon: , path: '/docs/Frontend/React' }, + { name: 'HTML', icon: , path: '/docs/Frontend/HTML' }, + { name: 'CSS', icon: , path: '/docs/Frontend/CSS' }, + { name: 'DOM', icon: , path: '/docs/Frontend/DOM' }, + { name: 'BOM', icon: , path: '/docs/Frontend/BOM' }, + { name: 'Node', icon: , path: '/docs/Frontend/Node' }, + { name: 'Electron', icon: , path: '/docs/Frontend/Electron' }, + { name: '工程化', icon: , path: '/docs/Frontend/Engineering' }, + { name: 'Quasar', icon: , path: '/docs/Frontend/Quasar' }, + ] + }, + { + title: '面试题', + enTitle: 'Interview', + items: [ + { name: '后端面试', icon: , path: '/docs/Interview/Backend' }, + { name: '前端面试', icon: , path: '/docs/Interview/Frontend' }, + ] + }, + { + title: '网络', + enTitle: 'Network', + items: [ + { name: 'AJAX', icon: , path: '/docs/Network/AJAX' }, + { name: 'HTTP', icon: , path: '/docs/Network/HTTP' }, + ] + }, + { + title: 'Web3', + enTitle: 'Web3', + items: [ + { name: 'IPFS', icon: , path: '/docs/Web3/IPFS' }, + { name: 'Web3基础', icon: , path: '/docs/Web3/Learning' }, + ] + }, + { + title: '资源导航', + enTitle: 'Resources', + items: [ + { name: '资源', icon: , path: '/docs/Resource' }, + { name: '软件', icon: , path: '/docs/Resource/Soft' }, + ] + }, + { + title: '其他', + enTitle: 'Others', + items: [ + { name: '食谱', icon: , path: '/docs/Other/CookBook' }, + { name: '笔记', icon: , path: '/docs/Other/Notes' }, + ] + } +] function HomepageHeader() { - const { siteConfig } = useDocusaurusContext(); + const { siteConfig } = useDocusaurusContext() + const { colorMode } = useColorMode() + return ( -
+
- {siteConfig.title} + Documentation Center -

{siteConfig.tagline}

+

+ 前端、后端、Web3 一站式技术文档中心 +

+ + 开始阅读文档 📚 + +
+
+
+ ) +} + +function CategoryCard({ category }) { + return ( +
+

+ {category.enTitle} +

+
+ {category.items.map((item) => ( - Docusaurus Tutorial - 5min ⏱️ +
+ {item.icon} + {item.name} +
-
+ ))}
-
- ); + + ) } export default function Home() { - const { siteConfig } = useDocusaurusContext(); + const { siteConfig } = useDocusaurusContext() + return ( -
- +
+
+
+ {categories.map((category, idx) => ( + + ))} +
+
- ); + ) } diff --git a/src/pages/index.module.css b/src/pages/index.module.css deleted file mode 100644 index 9f71a5da..00000000 --- a/src/pages/index.module.css +++ /dev/null @@ -1,23 +0,0 @@ -/** - * CSS files with the .module.css suffix will be treated as CSS modules - * and scoped locally. - */ - -.heroBanner { - padding: 4rem 0; - text-align: center; - position: relative; - overflow: hidden; -} - -@media screen and (max-width: 996px) { - .heroBanner { - padding: 2rem; - } -} - -.buttons { - display: flex; - align-items: center; - justify-content: center; -} diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss new file mode 100644 index 00000000..016c882c --- /dev/null +++ b/src/pages/index.module.scss @@ -0,0 +1,232 @@ +// 变量定义 +$hero-gradient-light: linear-gradient(145deg, #3578e5 0%, #1d4ed8 100%); +$hero-gradient-dark: linear-gradient(145deg, #2b3137 0%, #1b1e21 100%); +$transition-normal: all 0.3s ease; +$transition-fast: all 0.2s ease; +$font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; +$font-body: 'Noto Sans SC', sans-serif; + +// Hero Banner +.heroBanner { + padding: 6rem 0; + text-align: left; + position: relative; + overflow: hidden; + background: $hero-gradient-dark; + color: white; + + &::before { + content: 'Sumingcheng'; + position: absolute; + right: -5%; + top: 50%; + transform: translateY(-50%); + font-size: 100px; + font-weight: 900; + opacity: 0.03; + white-space: nowrap; + z-index: 0; + font-family: 'Noto Sans SC', sans-serif; + } + + &.light { + background: $hero-gradient-light; + } + + &.dark { + background: $hero-gradient-dark; + } + + .container { + position: relative; + z-index: 1; + padding-left: 4rem; + + h1 { + font-size: 2.5rem; + font-weight: 800; + margin-bottom: 1rem; + background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.8)); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + font-family: $font-heading; + letter-spacing: -0.02em; + } + + p { + font-size: 1.3rem; + opacity: 0.9; + margin-bottom: 2rem; + } + } + + @media screen and (max-width: 996px) { + padding: 4rem 0; + text-align: center; + + &::before { + font-size: 80px; + opacity: 0.02; + right: -10%; + } + + .container { + padding-left: 1rem; + padding-right: 1rem; + + h1 { + font-size: 2rem; + } + + p { + font-size: 1.1rem; + } + } + } +} + +// 按钮容器 +.buttons { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; + margin-top: 2rem; +} + +// 主要内容区 +.main { + padding: 2rem 0; +} + +// 分类列表 +.categories { + display: flex; + flex-direction: column; + gap: 1.5rem; + padding: 1rem; + + @media screen and (max-width: 768px) { + grid-template-columns: 1fr; + } +} + +// 分类卡片 +.categoryCard { + background: var(--ifm-card-background-color); + border-radius: var(--ifm-card-border-radius); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + padding: 1.2rem; + transition: $transition-normal; + width: 100%; + border: 1px solid var(--ifm-color-emphasis-200); + + &:hover { + transform: translateY(-2px); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); + border-color: var(--ifm-color-primary); + } +} + +// 分类标题 +.categoryTitle { + position: relative; + margin-bottom: 0.8rem; + font-size: 1.8rem; + font-weight: 700; + color: var(--ifm-heading-color); + padding-bottom: 0.6rem; + text-transform: uppercase; + letter-spacing: 0.02em; + font-family: $font-heading; + + &::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 60px; + height: 4px; + background: var(--ifm-color-primary); + border-radius: 2px; + } + + &::before { + content: attr(data-cn); + position: absolute; + right: 0; + bottom: 0.5rem; + font-size: 1rem; + font-weight: 400; + opacity: 0.5; + font-family: $font-body; + } +} + +// 分类网格 +.categoryGrid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); + gap: 0.8rem; + + @media screen and (max-width: 768px) { + grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); + } +} + +// 项目链接 +.itemLink { + text-decoration: none; + color: inherit; +} + +// 项目卡片 +.itemCard { + display: flex; + flex-direction: column; + align-items: center; + padding: 0.8rem; + border-radius: 8px; + background: var(--ifm-background-surface-color); + transition: $transition-fast; + border: 1px solid var(--ifm-color-emphasis-200); + height: 100%; + + &:hover { + background: var(--ifm-color-emphasis-100); + transform: translateY(-2px); + border-color: var(--ifm-color-primary); + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); + } + + [data-theme='dark'] & { + background: var(--ifm-card-background-color); + border-color: var(--ifm-color-emphasis-300); + + &:hover { + background: var(--ifm-color-emphasis-200); + border-color: var(--ifm-color-primary); + } + } +} + +// 项目名称 +.itemName { + font-size: 0.9rem; + font-weight: 500; + text-align: center; + color: var(--ifm-font-color-base); +} + +// 项目图标 +.itemIcon { + font-size: 1.4rem; + margin-bottom: 0.4rem; + color: var(--ifm-color-primary); + transition: $transition-fast; +} + +.itemCard:hover .itemIcon { + transform: scale(1.1); +}