feat: Scaffold initial React dashboard app within the website repo

docusaurus.config.js

@@ -92,6 +92,7 @@ const config = {
             label: "Documentation",
           },
           { to: "/blog", label: "Blog", position: "left" },
+          { to: "/dashboard", label: "Dashboard", position: "left" },
           {
             href: "https://github.com/kmesh-net/kmesh/releases",
             label: "Downloads",
@@ -152,11 +153,11 @@ const config = {
     [
       "docusaurus-lunr-search",
       {
-        languages: ["en",'zh'],
+        languages: ["en", "zh"],
         indexDocs: true,
         indexBlog: true,
         indexPages: false,
-      }
+      },
     ],
   ],
 };

src/components/DashboardLayout.js

@@ -0,0 +1,41 @@
+import React from "react";
+import Layout from "@theme/Layout";
+import Link from "@docusaurus/Link";
+import { useLocation } from "@docusaurus/router";
+import "../css/dashboard.css";
+
+const SIDEBAR_ITEMS = [
+  { label: "Overview", path: "/dashboard" },
+  { label: "Topology", path: "/dashboard/topology" },
+  { label: "Waypoints", path: "/dashboard/waypoints" },
+  { label: "Policies", path: "/dashboard/policies" },
+  { label: "Metrics", path: "/dashboard/metrics" },
+];
+
+export default function DashboardLayout({ children, title }) {
+  const location = useLocation();
+
+  return (
+    <Layout title={title || "Dashboard"}>
+      <div className="dashboard-container">
+        <aside className="dashboard-sidebar">
+          {SIDEBAR_ITEMS.map((item) => {
+            const isActive =
+              location.pathname === item.path ||
+              location.pathname === item.path + "/";
+            return (
+              <Link
+                key={item.path}
+                to={item.path}
+                className={`dashboard-sidebar-link ${isActive ? "active" : ""}`}
+              >
+                {item.label}
+              </Link>
+            );
+          })}
+        </aside>
+        <main className="dashboard-content">{children}</main>
+      </div>
+    </Layout>
+  );
+}

src/css/dashboard.css

@@ -0,0 +1,52 @@
+.dashboard-container {
+  display: flex;
+  min-height: calc(100vh - 60px);
+}
+
+.dashboard-sidebar {
+  width: 250px;
+  flex-shrink: 0;
+  border-right: 1px solid var(--ifm-toc-border-color);
+  background-color: var(--ifm-background-surface-color);
+  padding: 1rem 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.dashboard-sidebar-link {
+  padding: 0.75rem 1.5rem;
+  color: var(--ifm-font-color-base);
+  text-decoration: none;
+  font-weight: 500;
+  transition:
+    background-color 0.2s,
+    color 0.2s;
+}
+
+.dashboard-sidebar-link:hover {
+  background-color: var(--ifm-color-primary-lightest);
+  color: var(--ifm-color-primary-dark);
+  text-decoration: none;
+}
+
+[data-theme="dark"] .dashboard-sidebar-link:hover {
+  background-color: var(--ifm-color-primary-darkest);
+  color: var(--ifm-color-primary-light);
+}
+
+.dashboard-sidebar-link.active {
+  background-color: var(--ifm-color-primary-lightest);
+  color: var(--ifm-color-primary-dark);
+  border-right: 3px solid var(--ifm-color-primary);
+}
+
+[data-theme="dark"] .dashboard-sidebar-link.active {
+  background-color: var(--ifm-color-primary-darkest);
+  color: var(--ifm-color-primary-light);
+}
+
+.dashboard-content {
+  flex-grow: 1;
+  padding: 2rem;
+  background-color: var(--ifm-background-color);
+}

src/pages/dashboard/index.js

@@ -0,0 +1,11 @@
+import React from "react";
+import DashboardLayout from "../../components/DashboardLayout";
+
+export default function DashboardOverview() {
+  return (
+    <DashboardLayout title="Overview - Dashboard">
+      <h1>Overview</h1>
+      <p>Welcome to the Kmesh Dashboard. This is the overview page.</p>
+    </DashboardLayout>
+  );
+}

src/pages/dashboard/metrics.js

@@ -0,0 +1,11 @@
+import React from "react";
+import DashboardLayout from "../../components/DashboardLayout";
+
+export default function DashboardMetrics() {
+  return (
+    <DashboardLayout title="Metrics - Dashboard">
+      <h1>Metrics</h1>
+      <p>Performance and observability metrics will be displayed here.</p>
+    </DashboardLayout>
+  );
+}

src/pages/dashboard/policies.js

@@ -0,0 +1,11 @@
+import React from "react";
+import DashboardLayout from "../../components/DashboardLayout";
+
+export default function DashboardPolicies() {
+  return (
+    <DashboardLayout title="Policies - Dashboard">
+      <h1>Policies</h1>
+      <p>Configure routing and security policies here.</p>
+    </DashboardLayout>
+  );
+}

src/pages/dashboard/topology.js

@@ -0,0 +1,11 @@
+import React from "react";
+import DashboardLayout from "../../components/DashboardLayout";
+
+export default function DashboardTopology() {
+  return (
+    <DashboardLayout title="Topology - Dashboard">
+      <h1>Topology</h1>
+      <p>Service mesh topology will be visualized here.</p>
+    </DashboardLayout>
+  );
+}

src/pages/dashboard/waypoints.js

@@ -0,0 +1,11 @@
+import React from "react";
+import DashboardLayout from "../../components/DashboardLayout";
+
+export default function DashboardWaypoints() {
+  return (
+    <DashboardLayout title="Waypoints - Dashboard">
+      <h1>Waypoints</h1>
+      <p>Manage and monitor waypoint proxies here.</p>
+    </DashboardLayout>
+  );
+}