page not found && recomputer page software

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

sidebars.js

@@ -2172,6 +2172,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',

src/components/recomputer/index.css → src/components/recomputer/hardware.css

@@ -1,80 +1,80 @@
-.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);
 	border-radius: 5px;
 	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;
 }

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 (
+    <div className="hardware_container">
+      <div className="brand-list ">
+        <ul>
+          {brands.map((brand) => (
+            <li
+              key={brand.id}
+              onMouseEnter={() => 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})` :''}}
+            >
+              <a target='_blank' href={brand.link}>{brand.name}</a>
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div className="scene-list">
+        <ul>
+          {scenes.map((scene) => (
+            <li
+              key={scene.id}
+              onMouseEnter={() => handleSceneMouseEnter(scene)}
+              onMouseLeave={handleMouseLeave}
+              className={
+                `padding--sm ${selectedScenes.find((s) => s.id === scene.id) ? 'selected' : ''}`
+              }
+            >
+                <a className='scene-item' target='_blank' href={scene.link}>
+                <img
+                        src={require("../../../assets/recomputer/nvidia_icon.png").default}
+                      />
+                <div className='srene-title'>  {scene.name}</div>
+                  </a> 
+            </li>
+          ))}
+        </ul>
+      </div>
+
+    </div>
+  );
+};
+
+export default HardwarePage;

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 (
-    <div className="dvc_container">
-      <div className="brand-list ">
-        <ul>
-          {brands.map((brand) => (
-            <li
-              key={brand.id}
-              onMouseEnter={() => 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})` :''}}
-            >
-              <a target='_blank' href={brand.link}>{brand.name}</a>
-            </li>
-          ))}
-        </ul>
-      </div>
-      <div className="scene-list">
-        <ul>
-          {scenes.map((scene) => (
-            <li
-              key={scene.id}
-              onMouseEnter={() => handleSceneMouseEnter(scene)}
-              onMouseLeave={handleMouseLeave}
-              className={
-                `padding--sm ${selectedScenes.find((s) => s.id === scene.id) ? 'selected' : ''}`
-              }
-            >
-                <a className='scene-item' target='_blank' href={scene.link}>
-                <img
-                        src={require("../../../assets/recomputer/nvidia_icon.png").default}
-                      />
-                <div className='srene-title'>  {scene.name}</div>
-                  </a> 
-            </li>
-          ))}
-        </ul>
-      </div>
-
+    <div>
+      <HardwarePage></HardwarePage>
+      <SoftwarePage></SoftwarePage>
     </div>
   );
 };
 
-export default BrandSceneList;
+export default computerPageA;