From d5fbb449398943b73b050bf99912f0e79dc452fc Mon Sep 17 00:00:00 2001 From: lisha Date: Tue, 1 Aug 2023 13:50:09 +0800 Subject: [PATCH 1/2] feat: page not found --- docusaurus.config.js | 13 +++++----- static/js/custom.js | 60 ++++++++++++++++++++++++++++++++++++++++++++ static/js/scroll.js | 12 --------- 3 files changed, 66 insertions(+), 19 deletions(-) create mode 100644 static/js/custom.js delete mode 100644 static/js/scroll.js diff --git a/docusaurus.config.js b/docusaurus.config.js index c49383150a6c..26b97b4f62e7 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -28,7 +28,7 @@ const config = { async: true, }, { - src: '/js/scroll.js', // 添加你的 JavaScript 文件名、 + src: '/js/custom.js', // 添加你的 JavaScript 文件名、 async: true, }, ], @@ -147,7 +147,6 @@ const config = { 'docusaurus-plugin-sass', ], - themeConfig: /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ @@ -185,17 +184,18 @@ const config = { docs: { sidebar: { hideable: true, - autoCollapseCategories: true + autoCollapseCategories: true, }, }, - navbar: { // title: 'My Site', logo: { alt: 'Seeed Studio', - src: 'https://files.seeedstudio.com/wiki/wiki-platform/SeeedStudio.png', - srcDark: 'https://files.seeedstudio.com/wiki/wiki-platform/seeed_white_logo.png', + src: + 'https://files.seeedstudio.com/wiki/wiki-platform/SeeedStudio.png', + srcDark: + 'https://files.seeedstudio.com/wiki/wiki-platform/seeed_white_logo.png', href: 'Getting_Started', className: 'navbar_logo_items', }, @@ -431,7 +431,6 @@ const config = { isCloseable: false, }, }), - } module.exports = config diff --git a/static/js/custom.js b/static/js/custom.js new file mode 100644 index 000000000000..9f4f2186f65a --- /dev/null +++ b/static/js/custom.js @@ -0,0 +1,60 @@ +window.onload = function () { + // sidebar location + setTimeout(() => { + const list = document.querySelectorAll('.menu__link--active') + // 检查选中菜单项是否存在 + if (list.length) { + // 使用 scrollIntoView 将选中菜单项滚动到可视区域 + list[list.length - 1].scrollIntoView({ block: 'center' }) + } + }, 1000) + + // page not found + if (document.body.textContent.includes('Page Not Found')) { + let element = document.querySelector('.hero__title') // 使用元素的ID选择元素 + let parent = element.parentNode // 获取父元素 + let children = Array.from(parent.children) // 获取父元素的所有子元素 + + for (let i = 0; i < children.length; i++) { + // 检查元素是否是我们想要保留的元素 + if (children[i] !== element) { + parent.removeChild(children[i]) // 如果不是，删除该元素 + } + } + const child = document.createElement('div') + child.innerHTML = ` +

We could not find what you were looking for.

+

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

+ + + + + Getting Started + + + + + + + + + + Github + + + + + ` + parent.appendChild(child) + } +} diff --git a/static/js/scroll.js b/static/js/scroll.js deleted file mode 100644 index 28e7a74b2794..000000000000 --- a/static/js/scroll.js +++ /dev/null @@ -1,12 +0,0 @@ -window.onload = function () { - setTimeout(() => { - console.log(999) - const list = document.querySelectorAll(".menu__link--active") - - // 检查选中菜单项是否存在 - if (list.length) { - // 使用 scrollIntoView 将选中菜单项滚动到可视区域 - list[list.length - 1].scrollIntoView({ block: 'center' }) - } - }, 1000) -} From 9a47b646ea511a937b3dd5bb42673ad8145d849e Mon Sep 17 00:00:00 2001 From: lisha Date: Wed, 2 Aug 2023 13:43:19 +0800 Subject: [PATCH 2/2] feat: recomputer page software --- sidebars.js | 1 + .../recomputer/{index.css => hardware.css} | 40 +++---- src/components/recomputer/hardware.tsx | 101 ++++++++++++++++++ src/components/recomputer/index.tsx | 101 ++---------------- src/components/recomputer/software.css | 80 ++++++++++++++ src/components/recomputer/software.tsx | 101 ++++++++++++++++++ 6 files changed, 310 insertions(+), 114 deletions(-) rename src/components/recomputer/{index.css => hardware.css} (55%) create mode 100644 src/components/recomputer/hardware.tsx create mode 100644 src/components/recomputer/software.css create mode 100644 src/components/recomputer/software.tsx diff --git a/sidebars.js b/sidebars.js index c81480c69ee4..d9a0cff2c3b7 100644 --- a/sidebars.js +++ b/sidebars.js @@ -2171,6 +2171,7 @@ const sidebars = { 'Edge/reComputer/reComputer_Jetson_GPIO', 'Edge/reComputer/reComputer_Jetson_Series_GPIO_Grove', 'Edge/reComputer/jetson_FAQ', + 'Edge/reComputer/RecomputerPage', { type: 'category', label: 'Application', diff --git a/src/components/recomputer/index.css b/src/components/recomputer/hardware.css similarity index 55% rename from src/components/recomputer/index.css rename to src/components/recomputer/hardware.css index f4a2e721c48d..a69670c53bc7 100644 --- a/src/components/recomputer/index.css +++ b/src/components/recomputer/hardware.css @@ -1,40 +1,40 @@ -.dvc_container { +.hardware_container { display: flex; max-width: 950px; padding: 20px 0; margin: 0 auto; } -.dvc_container a { +.hardware_container a { width: 100%; height: 100%; color: var(--text-color); } -.dvc_container a:hover { +.hardware_container a:hover { text-decoration: none; } -.dvc_container .brand-list { +.hardware_container .brand-list { display: flex; margin-right: 30px; font-size: 23px; font-weight: bold; flex: 2.5; } -.dvc_container .scene-list { +.hardware_container .scene-list { flex: 3; } -.dvc_container .brand-list ul { +.hardware_container .brand-list ul { width: 77%; list-style: none; } -.dvc_container .scene-list ul { +.hardware_container .scene-list ul { width: 100%; list-style: none; padding: 0; } -.dvc_container .brand-list li, -.dvc_container .scene-list li { +.hardware_container .brand-list li, +.hardware_container .scene-list li { cursor: pointer; margin-bottom: 10px; border: 1px solid var(--ifm-color-emphasis-300); @@ -42,39 +42,39 @@ color: var(--text-color); } -.dvc_container .brand-list li.selected, -.dvc_container .brand-list li:hover { +.hardware_container .brand-list li.selected, +.hardware_container .brand-list li:hover { border-color: #8fc31f; background-size: cover; background-position: center; color: #fff; } -.dvc_container .brand-list li.selected a, -.dvc_container .brand-list li:hover a { +.hardware_container .brand-list li.selected a, +.hardware_container .brand-list li:hover a { /* color: #8fc31f; */ color: transparent; } -.dvc_container .scene-list li:hover, -.dvc_container .scene-list li.selected { +.hardware_container .scene-list li:hover, +.hardware_container .scene-list li.selected { border-color: #000000; box-shadow: 0 0 2px 1px var(--ifm-color-primary-dark); background-color: #000000; transition: transform 0.5s ease-in-out; transform: scale(1.1); } -.dvc_container .scene-list li.selected a, -.dvc_container .scene-list li:hover a { +.hardware_container .scene-list li.selected a, +.hardware_container .scene-list li:hover a { color: #8fc31f; } -.dvc_container .scene-item { +.hardware_container .scene-item { display: flex; font-size: 30px; font-weight: bold; } -.dvc_container .scene-item img { +.hardware_container .scene-item img { width: 100px; margin-right: 12px; } -.dvc_container .srene-title { +.hardware_container .srene-title { align-self: center; } diff --git a/src/components/recomputer/hardware.tsx b/src/components/recomputer/hardware.tsx new file mode 100644 index 000000000000..b961de8d1d9a --- /dev/null +++ b/src/components/recomputer/hardware.tsx @@ -0,0 +1,101 @@ +import React, { useState } from 'react'; +import './hardware.css'; + +const HardwarePage = () => { + const [selectedBrand, setSelectedBrand] = useState([]); + const [selectedScenes, setSelectedScenes] = useState([]); + const brands = [ + { id: 1, name: 'CVEDIA-RT',link:'https://www.baidu.com/',bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/cvedia-logo.jpg', scenes: [4] }, + { id: 2, name: 'Lumeo', link:'https://www.baidu.com/',bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/lumeo-logo.jpg', scenes: [4] }, + { id: 3, name: 'alwaysAI', link:'https://www.baidu.com/',bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/jetsonaitools83.png', scenes: [1] }, + { id: 4, name: 'YOLOv8',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/yolov8-logo.png', scenes: [1, 2, 4] }, + { id: 5, name: 'YOLOv5',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/jetsonaitools80.png', scenes: [2, 4] }, + { id: 6, name: 'roboflow',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/jetsonaitools81.png', scenes: [1, 4] }, + { id: 7, name: 'Allxon',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/jetsonaitools4.png', scenes: [5] }, + { id: 8, name: 'Deci',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/jetsonaitools82.png', scenes: [3] }, + { id: 9, name: 'Edge Impulse',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/ei-logo.png', scenes: [1, 2, 4] }, + { id: 10, name: 'Cochl.Sense',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/cochl-logo.png', scenes: [4] }, + ]; + const scenes = [ + { id: 1, name: 'Data Upload & Label',link:'https://www.baidu.com/',img:'huang.png', brands: [3, 4, 6, 9]}, + { id: 2, name: 'Train',link:'https://www.baidu.com/', img:'huang.png',brands: [4, 5, 9] }, + { id: 3, name: 'Optimize',link:'https://www.baidu.com/',img:'huang.png', brands: [8] }, + { id: 4, name: 'Deploy',link:'https://www.baidu.com/', img:'huang.png',brands: [1, 2, 4, 5, 6, 9, 10] }, + { id: 5, name: 'Remote Manage',link:'https://www.baidu.com/', img:'huang.png',brands: [7] }, + ]; + const handleBrandMouseEnter = (brand) => { + setSelectedBrand([brand]); + const associatedScenes = scenes.filter((scene) => + scene.brands.includes(brand.id) + ); + setSelectedScenes(associatedScenes); + }; + + const handleSceneMouseEnter = (scene) => { + + setSelectedBrand([]); + const associatedBrandIds = scene.brands; + const associatedBrands = brands.filter((brand) => + associatedBrandIds.includes(brand.id) + ) + console.log(associatedBrands); + + setSelectedScenes([scene]); + associatedBrands.length&&setSelectedBrand(associatedBrands); + }; + + const getBrandNameById = (brandId) => { + const brand = brands.find((brand) => brand.id === brandId); + return brand ? brand.name : ''; + }; + +const handleMouseLeave=()=>{ + setSelectedBrand([]); + setSelectedScenes([]); +} + return ( +
+
+
    + {brands.map((brand) => ( +
  • handleBrandMouseEnter(brand)} + onMouseLeave={handleMouseLeave} + className={ + `padding--sm ${selectedBrand.find((d) => d.id === brand.id) ? 'selected' : ''}` + } + style={{backgroundImage:selectedBrand.find((d) => d.id === brand.id) ? `url(${brand.bg})` :''}} + > + {brand.name} +
    • + ))} +
+
+
+
    + {scenes.map((scene) => ( +
  • handleSceneMouseEnter(scene)} + onMouseLeave={handleMouseLeave} + className={ + `padding--sm ${selectedScenes.find((s) => s.id === scene.id) ? 'selected' : ''}` + } + > + + +
    {scene.name}
    +     +
    • + ))} +
+
+ +
+ ); +}; + +export default HardwarePage; \ No newline at end of file diff --git a/src/components/recomputer/index.tsx b/src/components/recomputer/index.tsx index 8e8dfde1a10e..bdfca8dd47d6 100644 --- a/src/components/recomputer/index.tsx +++ b/src/components/recomputer/index.tsx @@ -1,101 +1,14 @@ import React, { useState } from 'react'; -import './index.css'; +import HardwarePage from './hardware' +import SoftwarePage from './software' -const BrandSceneList = () => { - const [selectedBrand, setSelectedBrand] = useState([]); - const [selectedScenes, setSelectedScenes] = useState([]); - const brands = [ - { id: 1, name: 'CVEDIA-RT',link:'https://www.baidu.com/',bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/cvedia-logo.jpg', scenes: [4] }, - { id: 2, name: 'Lumeo', link:'https://www.baidu.com/',bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/lumeo-logo.jpg', scenes: [4] }, - { id: 3, name: 'alwaysAI', link:'https://www.baidu.com/',bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/jetsonaitools83.png', scenes: [1] }, - { id: 4, name: 'YOLOv8',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/yolov8-logo.png', scenes: [1, 2, 4] }, - { id: 5, name: 'YOLOv5',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/jetsonaitools80.png', scenes: [2, 4] }, - { id: 6, name: 'roboflow',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/jetsonaitools81.png', scenes: [1, 4] }, - { id: 7, name: 'Allxon',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/jetsonaitools4.png', scenes: [5] }, - { id: 8, name: 'Deci',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/jetsonaitools82.png', scenes: [3] }, - { id: 9, name: 'Edge Impulse',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/ei-logo.png', scenes: [1, 2, 4] }, - { id: 10, name: 'Cochl.Sense',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/cochl-logo.png', scenes: [4] }, - ]; - const scenes = [ - { id: 1, name: 'Data Upload & Label',link:'https://www.baidu.com/',img:'huang.png', brands: [3, 4, 6, 9]}, - { id: 2, name: 'Train',link:'https://www.baidu.com/', img:'huang.png',brands: [4, 5, 9] }, - { id: 3, name: 'Optimize',link:'https://www.baidu.com/',img:'huang.png', brands: [8] }, - { id: 4, name: 'Deploy',link:'https://www.baidu.com/', img:'huang.png',brands: [1, 2, 4, 5, 6, 9, 10] }, - { id: 5, name: 'Remote Manage',link:'https://www.baidu.com/', img:'huang.png',brands: [7] }, - ]; - const handleBrandMouseEnter = (brand) => { - setSelectedBrand([brand]); - const associatedScenes = scenes.filter((scene) => - scene.brands.includes(brand.id) - ); - setSelectedScenes(associatedScenes); - }; - - const handleSceneMouseEnter = (scene) => { - - setSelectedBrand([]); - const associatedBrandIds = scene.brands; - const associatedBrands = brands.filter((brand) => - associatedBrandIds.includes(brand.id) - ) - console.log(associatedBrands); - - setSelectedScenes([scene]); - associatedBrands.length&&setSelectedBrand(associatedBrands); - }; - - const getBrandNameById = (brandId) => { - const brand = brands.find((brand) => brand.id === brandId); - return brand ? brand.name : ''; - }; - -const handleMouseLeave=()=>{ - setSelectedBrand([]); - setSelectedScenes([]); -} +const computerPageA = () => { return ( -
-
-
    - {brands.map((brand) => ( -
  • handleBrandMouseEnter(brand)} - onMouseLeave={handleMouseLeave} - className={ - `padding--sm ${selectedBrand.find((d) => d.id === brand.id) ? 'selected' : ''}` - } - style={{backgroundImage:selectedBrand.find((d) => d.id === brand.id) ? `url(${brand.bg})` :''}} - > - {brand.name} -
    • - ))} -
-
-
-
    - {scenes.map((scene) => ( -
  • handleSceneMouseEnter(scene)} - onMouseLeave={handleMouseLeave} - className={ - `padding--sm ${selectedScenes.find((s) => s.id === scene.id) ? 'selected' : ''}` - } - > - - -
    {scene.name}
    -     -
    • - ))} -
-
- +
+ +
); }; -export default BrandSceneList; \ No newline at end of file +export default computerPageA; \ No newline at end of file diff --git a/src/components/recomputer/software.css b/src/components/recomputer/software.css new file mode 100644 index 000000000000..ff1e71e42ff7 --- /dev/null +++ b/src/components/recomputer/software.css @@ -0,0 +1,80 @@ +.software_container { + display: flex; + max-width: 950px; + padding: 20px 0; + margin: 0 auto; +} +.software_container a { + width: 100%; + height: 100%; + color: var(--text-color); +} +.software_container a:hover { + text-decoration: none; +} +.software_container .brand-list { + display: flex; + margin-right: 30px; + font-size: 23px; + font-weight: bold; + flex: 2.5; +} +.software_container .scene-list { + flex: 3; +} +.software_container .brand-list ul { + width: 77%; + list-style: none; +} + +.software_container .scene-list ul { + width: 100%; + list-style: none; + padding: 0; +} + +.software_container .brand-list li, +.software_container .scene-list li { + cursor: pointer; + margin-bottom: 10px; + border: 1px solid var(--ifm-color-emphasis-300); + border-radius: 5px; + color: var(--text-color); +} + +.software_container .brand-list li.selected, +.software_container .brand-list li:hover { + border-color: #8fc31f; + background-size: cover; + background-position: center; + color: #fff; +} +.software_container .brand-list li.selected a, +.software_container .brand-list li:hover a { + /* color: #8fc31f; */ + color: transparent; +} +.software_container .scene-list li:hover, +.software_container .scene-list li.selected { + border-color: #000000; + box-shadow: 0 0 2px 1px var(--ifm-color-primary-dark); + background-color: #000000; + transition: transform 0.5s ease-in-out; + transform: scale(1.1); +} +.software_container .scene-list li.selected a, +.software_container .scene-list li:hover a { + color: #8fc31f; +} +.software_container .scene-item { + display: flex; + font-size: 30px; + font-weight: bold; +} +.software_container .scene-item img { + width: 100px; + margin-right: 12px; +} +.software_container .srene-title { + align-self: center; +} diff --git a/src/components/recomputer/software.tsx b/src/components/recomputer/software.tsx new file mode 100644 index 000000000000..5c8c277b9412 --- /dev/null +++ b/src/components/recomputer/software.tsx @@ -0,0 +1,101 @@ +import React, { useState } from 'react'; +import './software.css'; + +const SoftwarePage = () => { + const [selectedBrand, setSelectedBrand] = useState([]); + const [selectedScenes, setSelectedScenes] = useState([]); + const brands = [ + { id: 1, name: 'CVEDIA-RT',link:'https://www.baidu.com/',bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/cvedia-logo.jpg', scenes: [4] }, + { id: 2, name: 'Lumeo', link:'https://www.baidu.com/',bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/lumeo-logo.jpg', scenes: [4] }, + { id: 3, name: 'alwaysAI', link:'https://www.baidu.com/',bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/jetsonaitools83.png', scenes: [1] }, + { id: 4, name: 'YOLOv8',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/yolov8-logo.png', scenes: [1, 2, 4] }, + { id: 5, name: 'YOLOv5',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/jetsonaitools80.png', scenes: [2, 4] }, + { id: 6, name: 'roboflow',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/jetsonaitools81.png', scenes: [1, 4] }, + { id: 7, name: 'Allxon',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/jetsonaitools4.png', scenes: [5] }, + { id: 8, name: 'Deci',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/jetsonaitools82.png', scenes: [3] }, + { id: 9, name: 'Edge Impulse',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/ei-logo.png', scenes: [1, 2, 4] }, + { id: 10, name: 'Cochl.Sense',link:'https://www.baidu.com/', bg:'https://files.seeedstudio.com/wiki/recomputerzhongwen/cochl-logo.png', scenes: [4] }, + ]; + const scenes = [ + { id: 1, name: 'Data Upload & Label',link:'https://www.baidu.com/',img:'huang.png', brands: [3, 4, 6, 9]}, + { id: 2, name: 'Train',link:'https://www.baidu.com/', img:'huang.png',brands: [4, 5, 9] }, + { id: 3, name: 'Optimize',link:'https://www.baidu.com/',img:'huang.png', brands: [8] }, + { id: 4, name: 'Deploy',link:'https://www.baidu.com/', img:'huang.png',brands: [1, 2, 4, 5, 6, 9, 10] }, + { id: 5, name: 'Remote Manage',link:'https://www.baidu.com/', img:'huang.png',brands: [7] }, + ]; + const handleBrandMouseEnter = (brand) => { + setSelectedBrand([brand]); + const associatedScenes = scenes.filter((scene) => + scene.brands.includes(brand.id) + ); + setSelectedScenes(associatedScenes); + }; + + const handleSceneMouseEnter = (scene) => { + + setSelectedBrand([]); + const associatedBrandIds = scene.brands; + const associatedBrands = brands.filter((brand) => + associatedBrandIds.includes(brand.id) + ) + console.log(associatedBrands); + + setSelectedScenes([scene]); + associatedBrands.length&&setSelectedBrand(associatedBrands); + }; + + const getBrandNameById = (brandId) => { + const brand = brands.find((brand) => brand.id === brandId); + return brand ? brand.name : ''; + }; + +const handleMouseLeave=()=>{ + setSelectedBrand([]); + setSelectedScenes([]); +} + return ( +
+
+
    + {brands.map((brand) => ( +
  • handleBrandMouseEnter(brand)} + onMouseLeave={handleMouseLeave} + className={ + `padding--sm ${selectedBrand.find((d) => d.id === brand.id) ? 'selected' : ''}` + } + style={{backgroundImage:selectedBrand.find((d) => d.id === brand.id) ? `url(${brand.bg})` :''}} + > + {brand.name} +
    • + ))} +
+
+
+
    + {scenes.map((scene) => ( +
  • handleSceneMouseEnter(scene)} + onMouseLeave={handleMouseLeave} + className={ + `padding--sm ${selectedScenes.find((s) => s.id === scene.id) ? 'selected' : ''}` + } + > + + +
    {scene.name}
    +     +
    • + ))} +
+
+ +
+ ); +}; + +export default SoftwarePage; \ No newline at end of file