From 859517a0bac4d9569554edc07a9e863efabe9cbf Mon Sep 17 00:00:00 2001 From: agoodbook Date: Mon, 18 Mar 2024 19:30:01 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/books.mdx | 12 -- docs/frontend.mdx | 3 - docs/guide.mdx | 30 --- docs/index.mdx | 1 + docs/plugin-library/nprogress.mdx | 4 +- docs/started.mdx | 79 ------- docs/storeroom.mdx | 14 -- docs/up-projects.mdx | 13 -- docusaurus.config.ts | 102 +-------- sidebars.ts | 11 +- src/assets/icons/CategorySvg.tsx | 22 ++ .../CommonComponents/BrowserWindow/index.tsx | 42 ---- .../BrowserWindow/styles.module.css | 86 -------- .../CommonComponents/DocTable/index.scss | 61 ------ .../CommonComponents/DocTable/index.tsx | 56 ----- .../MainComponent/index.tsx | 4 +- .../MainComponent/main.css | 0 .../NProgress/ConfigAction/index.tsx | 6 +- .../{NProgressStyle.tsx => index.tsx} | 10 +- src/components/NavigationList/index.css | 169 +++++++++++++++ src/components/NavigationList/index.scss | 196 ------------------ src/components/NavigationList/index.tsx | 93 +++++---- ...{theme.custom.css => right-menu.theme.css} | 0 src/css/custom.css | 166 +-------------- src/data/frontend.ts | 46 +--- src/pages/index.tsx | 2 +- src/theme/Navbar/Layout/index.js | 134 ------------ versioned_docs/version-2.0.0/hello.md | 1 - versioned_docs/version-3.0.0/index.md | 1 - versioned_docs/version-4.0.0/doc2.md | 5 - versioned_docs/version-4.0.0/index.md | 1 - .../version-2.0.0-sidebars.json | 8 - .../version-3.0.0-sidebars.json | 8 - .../version-4.0.0-sidebars.json | 8 - versions.json | 5 - 35 files changed, 270 insertions(+), 1129 deletions(-) delete mode 100644 docs/books.mdx delete mode 100644 docs/guide.mdx create mode 100644 docs/index.mdx delete mode 100644 docs/started.mdx delete mode 100644 docs/storeroom.mdx delete mode 100644 docs/up-projects.mdx create mode 100644 src/assets/icons/CategorySvg.tsx delete mode 100644 src/components/CommonComponents/BrowserWindow/index.tsx delete mode 100644 src/components/CommonComponents/BrowserWindow/styles.module.css delete mode 100644 src/components/CommonComponents/DocTable/index.scss delete mode 100644 src/components/CommonComponents/DocTable/index.tsx rename src/components/{CommonComponents => }/MainComponent/index.tsx (82%) rename src/components/{CommonComponents => }/MainComponent/main.css (100%) rename src/components/NProgress/{NProgressStyle.tsx => index.tsx} (84%) create mode 100644 src/components/NavigationList/index.css delete mode 100644 src/components/NavigationList/index.scss rename src/components/NavigationList/{theme.custom.css => right-menu.theme.css} (100%) delete mode 100644 src/theme/Navbar/Layout/index.js delete mode 100644 versioned_docs/version-2.0.0/hello.md delete mode 100644 versioned_docs/version-3.0.0/index.md delete mode 100644 versioned_docs/version-4.0.0/doc2.md delete mode 100644 versioned_docs/version-4.0.0/index.md delete mode 100644 versioned_sidebars/version-2.0.0-sidebars.json delete mode 100644 versioned_sidebars/version-3.0.0-sidebars.json delete mode 100644 versioned_sidebars/version-4.0.0-sidebars.json delete mode 100644 versions.json diff --git a/docs/books.mdx b/docs/books.mdx deleted file mode 100644 index 02bd199..0000000 --- a/docs/books.mdx +++ /dev/null @@ -1,12 +0,0 @@ ---- -id: books -hide_last_update: true -hide_table_of_contents: true ---- - -# 藏书阁 - -import NavigationList from "../src/components/NavigationList"; -import * as Data from '../src/data/books' - - diff --git a/docs/frontend.mdx b/docs/frontend.mdx index e6999b0..59ee3dc 100644 --- a/docs/frontend.mdx +++ b/docs/frontend.mdx @@ -23,8 +23,6 @@ import {FrontendData as Data} from "../src/data"; - - @@ -35,4 +33,3 @@ import {FrontendData as Data} from "../src/data"; - \ No newline at end of file diff --git a/docs/guide.mdx b/docs/guide.mdx deleted file mode 100644 index 690d3c5..0000000 --- a/docs/guide.mdx +++ /dev/null @@ -1,30 +0,0 @@ ---- -id: guide ---- -# 指南 -import DocTable from "../src/components/CommonComponents/DocTable"; - - { - return {data} - } - }, - { - title: "属性", - dataIndex: "desc" - } -]} dataSource={[ - { - name: "p", - desc: "段落标签" - }, - { - name: "link", - desc: "链接标签" - } -]}/> - diff --git a/docs/index.mdx b/docs/index.mdx new file mode 100644 index 0000000..403b1ce --- /dev/null +++ b/docs/index.mdx @@ -0,0 +1 @@ +# 开始 \ No newline at end of file diff --git a/docs/plugin-library/nprogress.mdx b/docs/plugin-library/nprogress.mdx index 954c6a3..354480e 100644 --- a/docs/plugin-library/nprogress.mdx +++ b/docs/plugin-library/nprogress.mdx @@ -1,4 +1,4 @@ -import NProgressStyle from "../../src/components/NProgress/NProgressStyle"; +import Index from "../../src/components/NProgress"; import NProgressShowCase from "../../src/components/NProgress/NProgressShowCase"; import ConfigAction from "../../src/components/NProgress/ConfigAction"; @@ -55,7 +55,7 @@ NProgress.isRendered() //检查进度条是否已经被渲染。返回值boolean border-left-color: #2e8555 !important; } ``` - + ## 项目引用 diff --git a/docs/started.mdx b/docs/started.mdx deleted file mode 100644 index 9d6a109..0000000 --- a/docs/started.mdx +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: started -title: '重构' ---- - -## Markdown与JavaScript的结合 - -Markdown作为一种文本标记语言，其与JavaScript的结合为文档的动态重构提供了更多可能性。在现代Web开发中，JavaScript的强大功能使得我们可以通过前端技术对Markdown文档进行实时的、交互式的重构和展示。 - -### 1. **动态渲染** - -使用JavaScript可以实现Markdown文档的动态渲染，使用户能够在浏览器中实时预览文档效果。通过引入诸如Marked.js等Markdown解析库，我们可以将Markdown文本转换为HTML，并在页面上动态呈现，提升用户体验。 - -```javascript -// 使用Marked.js库进行Markdown渲染 -const markdownText = "# Hello, Markdown!"; -const htmlOutput = marked(markdownText); - -// 将渲染结果插入页面 -document.getElementById("preview").innerHTML = htmlOutput; -``` - -### 2. **交互式编辑器** - -结合JavaScript，我们可以构建交互式的Markdown编辑器，使用户能够在页面上直接编辑Markdown文本，并实时查看渲染效果。这种实时编辑与预览的交互方式有助于用户更直观地进行文档创作。 - -```javascript -// 实时监听文本编辑框的输入，进行动态渲染 -const editor = document.getElementById("editor"); -const preview = document.getElementById("preview"); - -editor.addEventListener("input", function () { - const markdownText = editor.value; - const htmlOutput = marked(markdownText); - preview.innerHTML = htmlOutput; -}); -``` - -### 3. **主题定制与样式切换** - -通过JavaScript，我们可以实现Markdown文档主题的动态切换。用户可以根据个人喜好选择不同的主题，而不必修改文档本身。这种主题切换的功能提高了用户的个性化体验。 - -```javascript -// 切换Markdown文档的主题样式 -function changeTheme(themeName) { - const preview = document.getElementById("preview"); - preview.className = themeName; -} - -// 用户选择不同主题时触发主题切换 -const themeSelector = document.getElementById("themeSelector"); -themeSelector.addEventListener("change", function () { - const selectedTheme = themeSelector.value; - changeTheme(selectedTheme); -}); -``` - -### 4. **实时协作与评论功能** - -结合WebSocket等实时通信技术，可以实现多用户实时协作编辑Markdown文档的功能。此外，通过JavaScript还可以嵌入评论系统，让用户能够在文档中进行实时交流与反馈。 - -```javascript -// 使用WebSocket实现实时协作编辑 -const socket = new WebSocket("wss://example.com/socket"); - -socket.addEventListener("message", function (event) { - const receivedText = event.data; - const htmlOutput = marked(receivedText); - document.getElementById("collaborativePreview").innerHTML = htmlOutput; -}); - -// 用户编辑时将文本发送到服务器 -editor.addEventListener("input", function () { - const editedText = editor.value; - socket.send(editedText); -}); -``` - -在未来，随着前端技术的不断创新，Markdown与JavaScript的结合将为用户提供更为丰富、动态的文档阅读与编辑体验。这种融合将进一步推动文档处理方式的演进，满足用户对于交互性、实时性的需求。 \ No newline at end of file diff --git a/docs/storeroom.mdx b/docs/storeroom.mdx deleted file mode 100644 index e6a47a5..0000000 --- a/docs/storeroom.mdx +++ /dev/null @@ -1,14 +0,0 @@ ---- -id: storeroom -hide_table_of_contents: true -hide_last_update: true ---- - -# 杂物库 -
我想着放一些稀奇的玩意，当作乐趣。
- -import NavigationList from "../src/components/NavigationList"; -import { StoreroomData as Data } from "../src/data"; - - - diff --git a/docs/up-projects.mdx b/docs/up-projects.mdx deleted file mode 100644 index 96db196..0000000 --- a/docs/up-projects.mdx +++ /dev/null @@ -1,13 +0,0 @@ ---- -id: up-projects -hide_table_of_contents: true -hide_last_update: true ---- - -# 创意工坊 -创意工坊：造轮子，用轮子。 - -import NavigationList from "../src/components/NavigationList"; -import {UpProjectsData as Data} from "../src/data"; - - diff --git a/docusaurus.config.ts b/docusaurus.config.ts index f1c3579..0c628cd 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -1,23 +1,21 @@ import { themes as prismThemes } from "prism-react-renderer"; import type { Config } from "@docusaurus/types"; import type * as Preset from "@docusaurus/preset-classic"; + const username: string = "agoodbook"; const repo: string = "agoodbook.github.io"; -let config: Config; -config = { - title: "AGoodBook", // 站点名称 - tagline: "书山有路勤为径，学海无涯苦作舟", // slogan，标语 + +let config: Config = { + title: "AGoodBook", + tagline: "书山有路勤为径，学海无涯苦作舟", favicon: "img/favicon.ico", trailingSlash: true, - // 配置网站站点url url: `https://agoodbook.github.io/`, - // 仅agoodbook.github.io仓库使用 '/', 其它仓库页面一律使用 '//' baseUrl: "/", - // GitHub部署配置 - organizationName: username, // 用户名 - projectName: repo, // 仓库名 + organizationName: username, + projectName: repo, deploymentBranch: "gh-pages", onBrokenLinks: "throw", @@ -47,30 +45,9 @@ config = { docs: { sidebarPath: "./sidebars.ts", editUrl: `https://github.com/${username}/${repo}/tree/main`, - lastVersion: "current", remarkPlugins: [ [require("@docusaurus/remark-plugin-npm2yarn"), { sync: true }], ], - versions: { - current: { - label: "5.x", - }, - "4.0.0": { - label: "4.0.0", - path: "4.0.0", - banner: "none", - }, - "3.0.0": { - label: "3.0.0", - path: "3.0.0", - banner: "none", - }, - "2.0.0": { - label: "2.0.0", - path: "2.0.0", - banner: "none", - }, - }, }, theme: { customCss: "./src/css/custom.css", @@ -85,32 +62,24 @@ config = { autoCollapseCategories: true, }, }, - versions: { - "2.0.0": "versioned_docs/version-2.0.0", - "3.0.0": "versioned_docs/version-3.0.0", - "4.0.0": "versioned_docs/version-4.0.0", - "5.0.0": "docs", - // 添加更多版本... - }, themes: ["@docusaurus/theme-search-algolia"], algolia: { appId: "X1Z85QJPUV", apiKey: "bf7211c161e8205da2f933a02534105a", indexName: "docusaurus-2", }, - // Replace with your project's social card image: "img/docusaurus-social-card.jpg", navbar: { - title: "AGoodBook", // 导航上站点名称 + title: "AGoodBook", logo: { - alt: "AGoodBook", // 站点 logo 文字替换 - src: "img/logo.svg", // 站点 logo 链接 + alt: "AGoodBook", + src: "img/logo.svg", }, items: [ { type: "doc", position: "left", - docId: "started", + docId: "index", label: "文档", }, { to: "docs/frontend", label: "前端", position: "left" }, @@ -121,55 +90,6 @@ config = { position: "left", className: "custom-search", }, - { - type: "html", - position: "right", - value: ` - -
- -
- -
-
-
-
- happy - normal - sad - angry -
- -
-
- `, - className: "custom-feedback", - }, - // right - { to: "docs/books", label: "藏书阁", position: "right" }, - { to: "docs/up-projects", label: "创意工坊", position: "right" }, - { to: "docs/storeroom", label: "杂物库", position: "right" }, - - { - type: "docsVersionDropdown", - position: "right", - }, - { - type: "localeDropdown", - position: "right", - dropdownItemsAfter: [ - { - type: "html", - value: '
', - }, - { - href: `https://github.com/${username}/${repo}/issues/3526`, - label: "帮助我们翻译", - }, - ], - }, { href: `https://github.com/${username}/${repo}`, label: "GitHub", diff --git a/sidebars.ts b/sidebars.ts index 68140e2..3f7ea2d 100644 --- a/sidebars.ts +++ b/sidebars.ts @@ -2,16 +2,7 @@ import type { SidebarsConfig } from "@docusaurus/plugin-content-docs"; const sidebars: SidebarsConfig = { docs: [ - { - type: "doc", - id: "started", - label: "介绍", - }, - { - type: "doc", - id: "guide", - label: "指南", - }, + "index", { type: "doc", id: "actions", diff --git a/src/assets/icons/CategorySvg.tsx b/src/assets/icons/CategorySvg.tsx new file mode 100644 index 0000000..4a9eb91 --- /dev/null +++ b/src/assets/icons/CategorySvg.tsx @@ -0,0 +1,22 @@ +import React from "react"; + +function CategorySvg({ width = 40, height = 40 }) { + return ( + + s + + + ); +} + +export default CategorySvg; diff --git a/src/components/CommonComponents/BrowserWindow/index.tsx b/src/components/CommonComponents/BrowserWindow/index.tsx deleted file mode 100644 index 536adcc..0000000 --- a/src/components/CommonComponents/BrowserWindow/index.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from "react"; -import styles from "./styles.module.css"; - -/** - * 模仿浏览器窗口组件 - */ -const BrowserWindow = (props: any) => { - return ( -
-
-
- - - -
-
- -
-
-
- - - -
-
-
- -
{props.children}
-
- ); -}; - -export default BrowserWindow; diff --git a/src/components/CommonComponents/BrowserWindow/styles.module.css b/src/components/CommonComponents/BrowserWindow/styles.module.css deleted file mode 100644 index bca4458..0000000 --- a/src/components/CommonComponents/BrowserWindow/styles.module.css +++ /dev/null @@ -1,86 +0,0 @@ -:root { - --browser-window-bg: #ebedf0; - --browser-window-link-bg: #ffffff; - --browser-window-color: #000; -} - -[data-theme="dark"] { - --browser-window-bg: #444950; - --browser-window-link-bg: #1b1b1d; - --browser-window-color: #fff; -} - -.container { - border: 3px solid var(--browser-window-bg); - border-radius: 10px; -} - -.row { - padding: 5px 10px; - background: var(--browser-window-bg); - border-top-left-radius: 4px; - border-top-right-radius: 4px; - display: flex; - justify-content: space-between; - align-items: center; -} - -.left { - min-width: 40px; - white-space: nowrap; -} - -.right { - min-width: 25px; -} - -.middle { - flex: 1; - min-width: 50px; - margin: 0 10px; - border-radius: 50px; - overflow: hidden; -} - -.middle input { - height: 30px; -} - -.row:after { - content: ""; - display: table; - clear: both; -} - -.dot { - margin-top: 4px; - height: 12px; - width: 12px; - border-radius: 50%; - display: inline-block; - margin-right: 5px; -} - -input[type="text"] { - width: 100%; - border-radius: 3px; - border: none; - background-color: var(--browser-window-link-bg); - margin-top: -8px; - height: 30px; - color: var(--browser-window-color); - padding-left: 15px; -} - -.bar { - width: 17px; - height: 3px; - background-color: #aaa; - margin: 3px 0; - display: block; -} - -.content { - padding: 10px; - min-height: 80px; -} \ No newline at end of file diff --git a/src/components/CommonComponents/DocTable/index.scss b/src/components/CommonComponents/DocTable/index.scss deleted file mode 100644 index 6894efe..0000000 --- a/src/components/CommonComponents/DocTable/index.scss +++ /dev/null @@ -1,61 +0,0 @@ -:root { - --table-radius: 5px; - --table-border-color: #f7f7f7; -} - -[data-theme="dark"] { - --table-border-color: #606770; -} - -.doc-table-list { - width: 100%; - - - - table { - border: 1px solid var(--table-border-color); - border-collapse: separate; - border-spacing: 0; - overflow: hidden; - border-radius: var(--table-radius); - - tbody tr { - position: relative; - } - - tr:first-child th:first-child { - border-top-left-radius: var(--table-radius); - } - - tr:first-child th:last-child { - border-top-right-radius: var(--table-radius); - } - - tr:last-child td:first-child { - border-bottom-left-radius: var(--table-radius); - } - - tr:last-child td:last-child { - border-bottom-right-radius: var(--table-radius); - } - - thead tr th { - width: 100vw; - text-align: left; - } - - tbody tr:hover:after { - content: " "; - position: absolute; - left: 0; - top: 0; - width: calc(100% - 0px); - height: calc(100% - 0px); - cursor: pointer; - border-color: var(--ifm-color-primary); - box-shadow: inset 0 0 5px 2px var(--ifm-color-primary); - z-index: 999; - //margin: 5px; - } - } -} diff --git a/src/components/CommonComponents/DocTable/index.tsx b/src/components/CommonComponents/DocTable/index.tsx deleted file mode 100644 index 1b6c018..0000000 --- a/src/components/CommonComponents/DocTable/index.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { Column, Columns, DataSource } from "@site/src"; -import "./index.scss"; -interface Props { - columns: Columns; - dataSource: DataSource[]; -} - -/** - * @param props.columns 必填项 title、dataIndex 选项 width、render - * @param props.dataSource 必填项 key 必须是columns内的dataIndex - */ -function DocTable(props: Props) { - const { columns, dataSource } = props; - const renderColumn = (column: Column, rowData: DataSource) => { - if (column.render) { - return column.render(rowData[column.dataIndex]); - } - return rowData[column.dataIndex]; - }; - - return ( -
- - - - {columns.map((column) => { - return ( - - ); - })} - - - - {dataSource.map((data, key: number) => { - return ( - - {columns.map((column) => { - return ( - - ); - })} - - ); - })} - -
- {column.title} -
{renderColumn(column, data)}
-
- ); -} - -export default DocTable; diff --git a/src/components/CommonComponents/MainComponent/index.tsx b/src/components/MainComponent/index.tsx similarity index 82% rename from src/components/CommonComponents/MainComponent/index.tsx rename to src/components/MainComponent/index.tsx index 0cc7466..34f1d2b 100644 --- a/src/components/CommonComponents/MainComponent/index.tsx +++ b/src/components/MainComponent/index.tsx @@ -2,7 +2,7 @@ import BrowserOnly from "@docusaurus/BrowserOnly"; import { ConfigProvider } from "antd"; import "./main.css"; -function Index(props: { children: any }) { +function AntdMainComponent(props: { children: any }) { return ( {() => ( @@ -21,4 +21,4 @@ function Index(props: { children: any }) { ); } -export default Index; +export default AntdMainComponent; diff --git a/src/components/CommonComponents/MainComponent/main.css b/src/components/MainComponent/main.css similarity index 100% rename from src/components/CommonComponents/MainComponent/main.css rename to src/components/MainComponent/main.css diff --git a/src/components/NProgress/ConfigAction/index.tsx b/src/components/NProgress/ConfigAction/index.tsx index 43b848b..3107752 100644 --- a/src/components/NProgress/ConfigAction/index.tsx +++ b/src/components/NProgress/ConfigAction/index.tsx @@ -1,12 +1,12 @@ import NProgress from "@site/src/utils/nprogress"; import { Button, Divider, InputNumber, Space, Switch, Tag } from "antd"; -import MainComponent from "@site/src/components/CommonComponents/MainComponent"; import React, { useState } from "react"; +import AntdMainComponent from "@site/src/components/MainComponent"; function ConfigAction() { const [isStarted, setIsStarted] = useState(); return ( - +
全局配置操作按钮，请点击播放按钮查看效果。
} wrap> - + ); } diff --git a/src/components/NProgress/NProgressStyle.tsx b/src/components/NProgress/index.tsx similarity index 84% rename from src/components/NProgress/NProgressStyle.tsx rename to src/components/NProgress/index.tsx index d7b0ffc..2bc13ea 100644 --- a/src/components/NProgress/NProgressStyle.tsx +++ b/src/components/NProgress/index.tsx @@ -1,8 +1,8 @@ import { ColorPicker, Slider } from "antd"; -import MainComponent from "@site/src/components/CommonComponents/MainComponent"; import React from "react"; +import AntdMainComponent from "@site/src/components/MainComponent"; -function NProgressStyle() { +function Container() { function setNProgressBgColor(value: string) { document.documentElement.style.setProperty("--nprogress-bg", value); } @@ -21,7 +21,7 @@ function NProgressStyle() { } return ( - +
全局样式配置，请点击播放按钮查看效果。
背景色:   @@ -36,8 +36,8 @@ function NProgressStyle() { 进度条高度:
- + ); } -export default NProgressStyle; +export default Container; diff --git a/src/components/NavigationList/index.css b/src/components/NavigationList/index.css new file mode 100644 index 0000000..5bd6d9c --- /dev/null +++ b/src/components/NavigationList/index.css @@ -0,0 +1,169 @@ +@import "right-menu.theme.css"; + +:root { + --border-color: #ececec; + --navigation-bg: #fff; + --tooltip-color-bg: #fff; + --tooltip-color: #2c2b2b; +} + +[data-theme='dark'] { + --border-color: #282828; + --navigation-bg: #2c2e2f; + --tooltip-color-bg: #2c2e2f; + --tooltip-color: #a0a1a1; +} + +/*导航类别样式*/ +.navigation-bar-category { + display: flex; + align-items: center; + margin: 10px 0; +} + +.navigation-bar-category svg { + margin-right: 10px; +} + +/*结束线*/ + +/*导航项容器*/ +.navigation-list-container { + display: flex; + flex-wrap: wrap; + margin-bottom: 20px; + margin-top: -10px; +} + +/*结束线*/ + +/*单个导航项*/ + +.navbar-tooltip .ant-tooltip-inner { + color: var(--tooltip-color) !important; + background-color: var(--tooltip-color-bg); +} + +.navbar-tooltip .ant-tooltip-arrow:after, .navbar-tooltip .ant-tooltip-arrow:before { + background-color: var(--tooltip-color-bg); +} + + +.navigation .color { + color: var(--color); +} + +.navigation .content { + background-color: var(--navigation-bg); + border: 1px solid var(--border-color); +} + +.navigation a { + list-style: none; + text-decoration: none; +} + +.navigation .content { + transition: transform 0.2s ease; + border-radius: 5px; + display: flex; + align-items: center; + padding: 5px; + height: 110px; +} + +.navigation .navbar-icon { + width: 50px; + height: 50px; + display: flex; + justify-content: center; + align-items: center; + margin: 0 10px; + border-radius: 50%; +} + +.navigation .desc { + width: calc(100% - 70px); +} + +.navigation .title { + font-weight: 600; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; + overflow: hidden; + text-overflow: ellipsis; +} + +.navigation .small { + font-size: 12px; + color: #a0a1a1; +} + +.navigation:hover .content { + transform: translateY(-10px); + box-shadow: 0 0 20px rgba(0, 76, 163, 0.1); +} + +.navigation:hover .navbar-icon { + transform: rotate(360deg); + transition: all 0.5s ease; +} + +/*结束线*/ + +/*4个占满*/ +@media screen and (min-width: 997px) { + .navigation { + width: calc(25% - 15px); /* 每个div宽度为25%，减去边距的宽度 */ + margin: 10px; + } + + .navigation:nth-child(4n + 1) { + margin-left: 0; + } + + .navigation:nth-child(4n + 4) { + margin-right: 0; + } +} + +/*3个占满*/ +@media screen and (min-width: 769px) and (max-width: 996px) { + .navigation { + width: calc(33.33% - 13.33px); + margin: 10px; + } + + .navigation:nth-child(3n + 1) { + margin-left: 0; + } + + .navigation:nth-child(3n + 3) { + margin-right: 0; + } +} + +/*2个占满*/ +@media screen and (min-width: 481px) and (max-width: 768px) { + .navigation { + width: calc(50% - 10px); + margin: 10px; + } + + .navigation:nth-child(2n + 1) { + margin-left: 0; + } + + .navigation:nth-child(2n + 2) { + margin-right: 0; + } +} + +/*1个占满*/ +@media screen and (max-width: 480px) { + .navigation { + width: 100%; + margin: 10px 0; + } +} diff --git a/src/components/NavigationList/index.scss b/src/components/NavigationList/index.scss deleted file mode 100644 index 5860eb6..0000000 --- a/src/components/NavigationList/index.scss +++ /dev/null @@ -1,196 +0,0 @@ -@import "theme.custom.css"; - -:root { - --border-color: #ececec; - --navigator-container-bg: #fff; - --tooltip-color-bg: #fff; - --tooltip-color: #2c2b2b; -} - -[data-theme='dark'] { - --border-color: #282828; - --navigator-container-bg: #2c2e2f; - --tooltip-color-bg: #1b1b1d; - --tooltip-color: #a0a1a1; -} - -.navigator-container { - .tooltip { - background-color: var(--tooltip-color-bg); - color: var(--color); - border-radius: 10px; - transition: none !important; - } -} - -.navbar-tooltip { - .ant-tooltip-inner { - color: var(--tooltip-color) !important; - } -} - -.color { - color: var(--color); -} - -.border { - border: 1px solid var(--border-color); -} - -.navigator-container .content { - background-color: var(--navigator-container-bg); -} - -.tag-container { - display: flex; - align-items: center; - margin: 10px 0; - - svg { - width: 30px; - margin-right: 10px; - } -} - - -.navigator-container { - display: flex; - flex-wrap: wrap; - margin-bottom: 20px; - margin-top: -10px; - - .box { - cursor: pointer; - transition: all 0.3s ease; - - a { - list-style: none; - text-decoration: none; - } - } - - .content { - transition: transform 0.2s ease; - border-radius: 5px; - display: flex; - align-items: center; - padding: 5px; - height: 110px; - - .navbar-icon { - width: 50px; - height: 50px; - display: flex; - justify-content: center; - align-items: center; - margin: 0 10px; - border-radius: 50%; - } - - .desc { - width: calc(100% - 70px); - .title { - font-weight: 600; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 1; - overflow: hidden; - text-overflow: ellipsis; - } - - .small { - font-size: 12px; - color: #a0a1a1; - } - } - } - - .box:hover { - .content { - transform: translateY(-10px); - box-shadow: 0 0 20px rgba($color: #004ca3, $alpha: 0.1); - } - - .navbar-icon { - transform: rotate(360deg); - transition: all 0.5s ease; - } - - } - - -} - -.tag-container { - display: flex; - align-items: center; - margin: 10px 0; - - svg { - width: 30px; - margin-right: 10px; - } -} - -/** -响应式媒体 - */ -@media screen and (min-width: 997px) { - .navigator-container { - .box { - width: calc(100% / 4 - 60px / 4); /* 每个div宽度为25%，减去边距的宽度 */ - margin: 10px; - } - - .box:nth-child(4n + 1) { - margin-left: 0; - } - - .box:nth-child(4n + 4) { - margin-right: 0; - } - } -} - -@media screen and (min-width: 769px) and (max-width: 996px) { - .navigator-container { - .box { - width: calc(100% / 3 - 40px / 3); - margin: 10px; - } - - .box:nth-child(3n + 1) { - margin-left: 0; - } - - .box:nth-child(3n + 3) { - margin-right: 0; - } - } -} - -@media screen and (min-width: 481px) and (max-width: 768px) { - .navigator-container { - .box { - width: calc(50% - 10px); - margin: 10px; - } - - .box:nth-child(2n + 1) { - margin-left: 0; - } - - .box:nth-child(2n + 2) { - margin-right: 0; - } - } -} - -@media screen and (max-width: 480px) { - .navigator-container { - .box { - width: 100%; - margin: 10px 0; - } - } -} \ No newline at end of file diff --git a/src/components/NavigationList/index.tsx b/src/components/NavigationList/index.tsx index 683befe..ad49ab8 100644 --- a/src/components/NavigationList/index.tsx +++ b/src/components/NavigationList/index.tsx @@ -6,35 +6,40 @@ import SettingSvg from "@site/src/assets/icons/SettingSvg"; import { Tooltip } from "antd"; import { StyleProvider } from "@ant-design/cssinjs"; import BrowserOnly from "@docusaurus/BrowserOnly"; -import "./index.scss"; import WebSvg from "@site/src/assets/icons/WebSvg"; +import CategorySvg from "@site/src/assets/icons/CategorySvg"; +import "./index.css"; interface Props { dataSource: Navigations; title: string; } -function NavTitle(props: { title: string }) { + +// 渲染图标组件 +const RenderIcon: React.FC<{ icon: string | React.FC }> = ({ icon }) => { + if (typeof icon === "string") { + return ; + } + + if (typeof icon === "function") { + return React.createElement(icon as React.FC); + } + + return ; +}; + +// 分类栏目 +function NavigationBarCategory(props: { title: string }) { return ( -
- - - +
+
{props.title}
); } -function NavBar(props: { navigationItem: NavigationItem }) { +// 导航项 +function Navigation(props: { navigationItem: NavigationItem }) { const { title, smallTitle, @@ -75,19 +80,7 @@ function NavBar(props: { navigationItem: NavigationItem }) { }); } - const renderIcon = () => { - if (typeof icon === "string") { - return ; - } - - if (typeof icon === "function") { - return React.createElement(icon as React.FC); - } - - return ; - }; - - const handleMenuItemOnClick = (item: ContextMenu) => { + function handleMenuItemOnClick(item: ContextMenu) { if (item.action === "see-to-website") { return window.open(item.url, "_blank"); } @@ -116,14 +109,18 @@ function NavBar(props: { navigationItem: NavigationItem }) { aElement.click(); document.body.removeChild(aElement); } - }; + } + + function handleHideTooltip(e) { + let wrap = document.querySelector(".navigation"); - function handleTooltipColor() { - const theme = document.querySelector("html").dataset["theme"]; - if (theme === "light") { - return "#fff"; + if (!wrap) { + return; + } + + if (!wrap.contains(e.target)) { + setIsShowDesc(false); } - return "#2c2e2f"; } useEffect(() => { @@ -139,9 +136,9 @@ function NavBar(props: { navigationItem: NavigationItem }) { ]); } - window.addEventListener("click", () => setIsShowDesc(false)); + window.addEventListener("click", handleHideTooltip); return () => { - window.removeEventListener("click", () => setIsShowDesc(false)); + window.removeEventListener("click", handleHideTooltip); }; }, []); @@ -150,20 +147,21 @@ function NavBar(props: { navigationItem: NavigationItem }) { document.querySelector(".navigation")} > -
+
{ if (url === "#") e.preventDefault(); }} target="_blank" - className="content border" + className="content" > -
{renderIcon()}
+
+ +
{title}
{smallTitle}
@@ -194,6 +192,7 @@ function NavBar(props: { navigationItem: NavigationItem }) { ); } +// 以导航项为个体组合成的列表 export default function NavigationList(props: Props) { const { dataSource, title } = props; return ( @@ -201,10 +200,12 @@ export default function NavigationList(props: Props) { {() => { return ( <> - -
+ +
{dataSource.map((item) => { - return ; + return ( + + ); })}
diff --git a/src/components/NavigationList/theme.custom.css b/src/components/NavigationList/right-menu.theme.css similarity index 100% rename from src/components/NavigationList/theme.custom.css rename to src/components/NavigationList/right-menu.theme.css diff --git a/src/css/custom.css b/src/css/custom.css index d28e508..b477b1e 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1,10 +1,3 @@ -/** - * Any CSS included here will be global. The classic template - * bundles Infima by default. Infima is a CSS framework designed to - * work well for content-centric websites. - */ - -/* You can override the default Infima variables here. */ :root { /*通用变量*/ --nprogress-height: 3px; @@ -25,10 +18,6 @@ --nprogress-bg: var(--ifm-color-primary); --code-block-bg: #f6f8fa; --border: #d9d9d9; - --feedback-bg: #fff; - --feedback-border: #d9d9d9; - --feedback-caret-color: var(--ifm-color-primary); - --feedback-shadow: 0 0 1px 1px var(--ifm-color-primary); } /* For readability concerns, you should choose a lighter palette in dark mode. */ @@ -47,43 +36,18 @@ --nprogress-bg: var(--ifm-color-primary); --code-block-bg: #282a36; --border: #686868; - --feedback-bg: #090a11; - --feedback-border: #242526; - --feedback-caret-color: #fff; - --feedback-shadow: 0 0 1px 1px #fff; -} - -/* Antd组件变量 */ -.css-var-r1 { - --ant-color-bg-elevated: var(--code-block-bg) !important; - --ant-slider-rail-bg: var(--code-block-bg) !important; - --ant-slider-rail-hover-bg: var(--code-block-bg) !important; - --ant-color-text: var(--color) !important; - --ant-color-border: var(--border) !important; } #nprogress .bar { background: var(--nprogress-bg) !important; height: var(--nprogress-height) !important; - } + #nprogress .spinner-icon { border-top-color: var(--nprogress-bg) !important; border-left-color: var(--nprogress-bg) !important; } -@media screen and (min-width: 768px) { - .custom-search .DocSearch { - width: 200px; - } -} - -@media screen and (max-width: 997px) { - .custom-feedback { - display: none; - } -} - .navigation-item { height: 80px; margin-bottom: 10px; @@ -126,6 +90,7 @@ .navigation-item svg, .navbar-icon svg { color: var(--icon-color-svg); } + .navbar-icon svg { width: 100%; height: 100%; @@ -135,6 +100,7 @@ .pointer { cursor: pointer; } + /*省略号*/ .ellipsis { display: -webkit-box; @@ -150,129 +116,7 @@ align-items: center; } -code { - padding: 0 5px; -} -.navbar__link,.navbar__item { +.navbar__link, .navbar__item { white-space: nowrap; -} - -/*自定义反馈按钮*/ -.custom-feedback { - position: relative; -} - -.custom-feedback button { - height: 35px; - cursor: pointer; - border-radius: 5px; - border: 1px solid var(--feedback-border); - padding: 0 10px; - background-color: var(--feedback-bg); - font-weight: bolder; -} - -.custom-feedback .send-container { - display: none; - width: 300px; - min-height: 180px; - border: 1px solid var(--feedback-border); - position: absolute; - top: 45px; - border-radius: 10px; - left: 50%; - transform: translate(-50%, 0); - background-color: var(--feedback-bg); -} - -.custom-feedback .send-container .email, -.custom-feedback .send-container .content { - height: 40px; - border-radius: 5px; - margin: 5px; - display: flex; - justify-content: center; - align-items: center; - border: 1px solid var(--feedback-border); - -} - -.custom-feedback .send-container .email input, -.custom-feedback .send-container .content textarea { - background-color: var(--feedback-bg); -} - -.custom-feedback .send-container .email input { - width: 100%; - height: 100%; - outline: none; - border: none; - border-radius: 5px; - padding: 0 10px; -} - -.custom-feedback .send-container .content { - height: 100px; -} - -.custom-feedback .send-container .content textarea { - width: 100%; - height: 100%; - outline: none; - border: none; - border-radius: 5px; - padding: 10px; - resize: none; - font-family: "微软雅黑", Arial, sans-serif; -} - -.custom-feedback .send-container .email input:focus,.custom-feedback .send-container .content textarea:focus { - box-shadow: var(--feedback-shadow); - caret-color: var(--feedback-caret-color); -} - -.custom-feedback .send-container footer { - display: flex; - align-items: center; - height: 50px; - justify-content: space-between; - padding: 0 5px; - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; -} -.custom-feedback .send-container footer .emoji-container { - padding: 0 10px; - display: flex; - align-items: center; - justify-content: space-between; - color: red; -} - -.custom-feedback .send-container footer .emoji-container img { - cursor: pointer; - width: 30px; - height: 30px; - padding: 3px; - border-radius: 50%; -} - -.emoji-active { - background-color: var(--ifm-color-primary); -} - -.custom-feedback .send-container footer .emoji-container img:hover { - background-color: var(--ifm-color-primary); -} - -.custom-feedback .send-container footer button { - padding: 5px 10px; - border-radius: 5px; - cursor: pointer; -} - -.custom-feedback .tips { - font-size: 12px; - color: #f55b5b; - padding: 5px 10px; -} +} \ No newline at end of file diff --git a/src/data/frontend.ts b/src/data/frontend.ts index 43be806..267f7f1 100644 --- a/src/data/frontend.ts +++ b/src/data/frontend.ts @@ -45,10 +45,6 @@ import ReactNativeSvg from "@site/src/assets/icons/ReactNativeSvg"; import FlutterSvg from "@site/src/assets/icons/FlutterSvg"; import UniAppSvg from "@site/src/assets/icons/UniAppSvg"; import WechatMiniSvg from "@site/src/assets/icons/WechatMiniSvg"; -import AntDesignSvg from "@site/src/assets/icons/AntDesignSvg"; -import ElementUiSvg from "@site/src/assets/icons/ElementUiSvg"; -import NpmSvg from "@site/src/assets/icons/NpmSvg"; -import YarnSvg from "@site/src/assets/icons/YarnSvg"; import WebRTCSvg from "@site/src/assets/icons/WebRTCSvg"; import GraphQLSvg from "@site/src/assets/icons/GraphQLSvg"; import WebAssemblySvg from "@site/src/assets/icons/WebAssemblySvg"; @@ -66,7 +62,7 @@ export const ThreeMusketeers: Navigations = [ { title: "CSS", smallTitle: - "CSS，即层叠样式表（Cascading NProgressStyle Sheets），是一种用于描述HTML或XML（包括SVG或XHTML等XML方言）文档展示样式的语言。", + "CSS，即层叠样式表（Cascading Index Sheets），是一种用于描述HTML或XML（包括SVG或XHTML等XML方言）文档展示样式的语言。", url: "https://agoodbook.github.io/css/", icon: CssSvg, officialWebsiteUrl: "https://developer.mozilla.org/zh-CN/docs/Web/CSS", @@ -439,46 +435,6 @@ export const MobileEndFrame: Navigations = [ }, ]; -/** - * UI组件库 - */ -export const UIComponentsLibrary: Navigations = [ - { - title: "Ant Design", - smallTitle: - "Ant Design 是一套由阿里巴巴（Alibaba）前端团队开发的企业级UI设计语言和React组件库。它提供了一套完整的设计规范和React组件，用于构建现代化、美观、易用的Web应用程序。Ant Design的目标是通过提供一致的设计语言和可复用的React组件，简化企业级应用程序的开发流程。", - url: "https://agoodbook.github.io/ant-design/", - icon: AntDesignSvg, - }, - { - title: "ElementUi", - smallTitle: - "Element UI 是一套基于 Vue.js 的开源 UI 框架，提供了一系列丰富的可复用组件，用于构建现代化的 Web 应用程序。它是饿了么（Eleme）前端团队推出的项目，目的是为 Vue.js 开发者提供一套符合设计规范、易于使用和高度可定制的 UI 组件库。", - url: "https://agoodbook.github.io/element-ui/", - icon: ElementUiSvg, - }, -]; - -/** - * 包管理器 - */ -export const PackageManager: Navigations = [ - { - title: "NPM", - smallTitle: - "npm（Node Package Manager）是用于Node.js平台的包管理工具。它是一个强大的工具，用于查找、安装、分享和管理JavaScript代码的包或模块。npm是Node.js的默认包管理器，随同Node.js一同安装。", - url: "https://agoodbook.github.io/npm/", - icon: NpmSvg, - }, - { - title: "Yarn", - smallTitle: - "Yarn 是一个用于管理 JavaScript 依赖关系的包管理工具，它提供了与 npm 类似的功能，但在某些方面进行了改进。Yarn 的目标是提供更快、可靠和安全的依赖管理工具。", - url: "https://agoodbook.github.io/yarn/", - icon: YarnSvg, - }, -]; - /** * 探索前端技术 */ diff --git a/src/pages/index.tsx b/src/pages/index.tsx index fdf7892..633d573 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -23,7 +23,7 @@ function HomepageHeader() { className={ "button button--secondary button--lg" + " " + styles.link } - to="/docs/started" + to="/docs/index" > diff --git a/src/theme/Navbar/Layout/index.js b/src/theme/Navbar/Layout/index.js deleted file mode 100644 index 5a594ad..0000000 --- a/src/theme/Navbar/Layout/index.js +++ /dev/null @@ -1,134 +0,0 @@ -import React, { useEffect } from "react"; -import Layout from "@theme-original/Navbar/Layout"; -import useMessage from "antd/es/message/useMessage"; - -function clearEmojiState(element) { - Array.from(element.children).map((item) => { - changeEmojiState(item, "remove"); - }); -} - -function clearFormValue() { - Object.keys(arguments).forEach((item) => { - arguments[item].value = ""; - }); -} - -function clearErrTip(_this) { - _this.innerHTML = ""; -} - -function changeEmojiState(_this, operator) { - _this.classList[operator]("emoji-active"); -} - -function validateForm(email, content, emoji) { - if (!email.value.trim()) { - return "邮箱不能为空"; - } - - const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; - if (!emailRegex.test(email.value.trim())) { - return "请输入正确的邮箱格式"; - } - - if (!content.value.trim()) { - return "请填写您要反馈的内容"; - } - - if (!emoji) { - return "在发送前，请选择一种表情哦"; - } - - return ""; -} - -function isShowFeedbackModal(_this, state) { - _this.style.display = state; -} - -export default function LayoutWrapper(props) { - const [messageApi, context] = useMessage(); - useEffect(() => { - if (document) { - /*获取点击反馈按钮、发送按钮等元素*/ - const feedbackButton = document.querySelector(".custom-feedback"); - const sendButton = document.querySelector(".custom-feedback .send-btn"); - - /*发送反馈模态框*/ - const sendContainer = document.querySelector( - ".custom-feedback .send-container", - ); - - /*获取email、content、emoji等表单值*/ - let emojiValue = ""; - const emailElement = document.querySelector( - ".custom-feedback #feedback-email", - ); - const contentElement = document.querySelector( - ".custom-feedback #feedback-content", - ); - - /*错误提示元素*/ - const errTipElement = document.querySelector(".custom-feedback .tips"); - - /*获取emoji父容器元素*/ - const emojiContainer = document.querySelector( - ".custom-feedback .emoji-container", - ); - - /*监听feedback按钮的点击事件*/ - feedbackButton.addEventListener("click", () => { - isShowFeedbackModal(sendContainer, "block"); - }); - - sendButton.addEventListener("click", (event) => { - event.stopPropagation(); - const errTipContent = validateForm( - emailElement, - contentElement, - emojiValue, - ); - if (errTipContent) { - errTipElement.innerHTML = errTipContent; - return; - } - messageApi.success("您已提交反馈，稍后您将收到我的回复").then(() => {}); - console.log({ - emoji: emojiValue, - email: emailElement.value, - content: contentElement.value, - }); - closeModal(); - }); - - emojiContainer.addEventListener("click", (e) => { - clearEmojiState(emojiContainer); - if (e.target instanceof HTMLImageElement) { - changeEmojiState(e.target, "add"); - emojiValue = e.target.dataset.emoji; - } - }); - - function closeModal() { - clearFormValue(emailElement, contentElement); - clearEmojiState(emojiContainer); - clearErrTip(errTipElement); - isShowFeedbackModal(sendContainer, "none"); - } - - window.addEventListener("click", (event) => { - if (!feedbackButton.contains(event.target)) { - closeModal(); - } - }); - } - }, []); - - return ( - <> - {context} - - - ); -} diff --git a/versioned_docs/version-2.0.0/hello.md b/versioned_docs/version-2.0.0/hello.md deleted file mode 100644 index dfe0179..0000000 --- a/versioned_docs/version-2.0.0/hello.md +++ /dev/null @@ -1 +0,0 @@ -哈喽 \ No newline at end of file diff --git a/versioned_docs/version-3.0.0/index.md b/versioned_docs/version-3.0.0/index.md deleted file mode 100644 index f3ca610..0000000 --- a/versioned_docs/version-3.0.0/index.md +++ /dev/null @@ -1 +0,0 @@ -你好 \ No newline at end of file diff --git a/versioned_docs/version-4.0.0/doc2.md b/versioned_docs/version-4.0.0/doc2.md deleted file mode 100644 index 71e394d..0000000 --- a/versioned_docs/version-4.0.0/doc2.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -id: doc2 ---- - -文档2 \ No newline at end of file diff --git a/versioned_docs/version-4.0.0/index.md b/versioned_docs/version-4.0.0/index.md deleted file mode 100644 index f3ca610..0000000 --- a/versioned_docs/version-4.0.0/index.md +++ /dev/null @@ -1 +0,0 @@ -你好 \ No newline at end of file diff --git a/versioned_sidebars/version-2.0.0-sidebars.json b/versioned_sidebars/version-2.0.0-sidebars.json deleted file mode 100644 index f4b7c00..0000000 --- a/versioned_sidebars/version-2.0.0-sidebars.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "myAutogeneratedSidebar": [ - { - "type": "autogenerated", - "dirName": "." - } - ] -} diff --git a/versioned_sidebars/version-3.0.0-sidebars.json b/versioned_sidebars/version-3.0.0-sidebars.json deleted file mode 100644 index f4b7c00..0000000 --- a/versioned_sidebars/version-3.0.0-sidebars.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "myAutogeneratedSidebar": [ - { - "type": "autogenerated", - "dirName": "." - } - ] -} diff --git a/versioned_sidebars/version-4.0.0-sidebars.json b/versioned_sidebars/version-4.0.0-sidebars.json deleted file mode 100644 index f4b7c00..0000000 --- a/versioned_sidebars/version-4.0.0-sidebars.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "myAutogeneratedSidebar": [ - { - "type": "autogenerated", - "dirName": "." - } - ] -} diff --git a/versions.json b/versions.json deleted file mode 100644 index 4693e83..0000000 --- a/versions.json +++ /dev/null @@ -1,5 +0,0 @@ -[ - "4.0.0", - "3.0.0", - "2.0.0" -]