Registration

.vitepress/components/Mermaid.vue

@@ -72,5 +72,5 @@ const renderChart = async () => {
 
 <template>
   <!-- eslint-disable-next-line vue/no-v-html -->
-  <div v-html="svg" />
+  <div class="mermaid-container" v-html="svg" />
 </template>

.vitepress/components/ApplicationNavbar.vue → .vitepress/components/Navbar.vue

@@ -1,15 +1,25 @@
 <script setup lang="ts">
 import { useRoute } from "vitepress";
 import type { DefaultTheme } from "vitepress";
+import { computed } from "vue";
 
-import { appNavbar } from "../application.navbar";
+import { appNavbar, dashboardNavbar } from "../navbars";
 
 const route = useRoute();
 
 // Filter items that have a link property (exclude items with nested children)
-const navItemsWithLinks = appNavbar.filter(
-  (item): item is DefaultTheme.NavItemWithLink => "link" in item,
-);
+const navItemsWithLinks = computed(() => {
+  if (route.path.startsWith("/app/")) {
+    return appNavbar.filter(
+      (item): item is DefaultTheme.NavItemWithLink => "link" in item,
+    );
+  } else if (route.path.startsWith("/dashboard/")) {
+    return dashboardNavbar.filter(
+      (item): item is DefaultTheme.NavItemWithLink => "link" in item,
+    );
+  }
+  return [];
+});
 
 const isActive = (link: string) => {
   if (!link) return false;

.vitepress/components/Pro.vue

@@ -3,7 +3,7 @@
 <template>
   <div class="c-pro info custom-block">
     <slot name="title">
-      <p class="custom-block-title">⚡PRO FEATURE</p>
+      <p class="custom-block-title">⚡PAID FEATURE</p>
     </slot>
     <p>
       <slot />

.vitepress/config.mts

@@ -5,13 +5,8 @@ import type { DefaultTheme } from "vitepress";
 
 import MermaidExample from "./mermaid";
 import {
-  conceptsSidebar,
-  dashboardSidebar,
-  guidesSidebar,
-  quickstartSidebar,
-  referenceSidebar,
-  troubleshootingSidebar,
-  tutorialsSidebar,
+  appSidebars,
+  dashboardSidebars,
 } from "./sidebars";
 
 // https://vitepress.dev/reference/site-config
@@ -72,18 +67,20 @@ export default defineConfig({
         link: "/app/quickstart/",
         activeMatch: "^/app(/.*)?$",
       },
-      { text: "Dashboard", link: "/dashboard/", activeMatch: "^/dashboard(/|$)" },
+      { text: "Dashboard", link: "/dashboard/quickstart/", activeMatch: "^/dashboard(/|$)" },
       { text: "FAQ", link: "/faq", activeMatch: "^/faq(/|$)" },
     ] satisfies DefaultTheme.NavItem[],
 
     sidebar: {
-      "/app/quickstart/": quickstartSidebar,
-      "/app/reference/": referenceSidebar,
-      "/app/guides/": guidesSidebar,
-      "/app/concepts/": conceptsSidebar,
-      "/app/tutorials/": tutorialsSidebar,
-      "/app/troubleshooting/": troubleshootingSidebar,
-      "/dashboard/": dashboardSidebar,
+      "/app/quickstart/": appSidebars.quickstartSidebar,
+      "/app/reference/": appSidebars.referenceSidebar,
+      "/app/guides/": appSidebars.guidesSidebar,
+      "/app/concepts/": appSidebars.conceptsSidebar,
+      "/app/tutorials/": appSidebars.tutorialsSidebar,
+      "/app/troubleshooting/": appSidebars.troubleshootingSidebar,
+      "/dashboard/quickstart/": dashboardSidebars.quickstartSidebar,
+      "/dashboard/guides/": dashboardSidebars.guidesSidebar,
+      "/dashboard/concepts/": dashboardSidebars.conceptsSidebar,
     },
 
     outline: {

.vitepress/navbars/dashboard.ts

@@ -0,0 +1,7 @@
+import type { DefaultTheme } from "vitepress";
+
+export const dashboardNavbar: DefaultTheme.NavItem[] = [
+  { text: "Get Started", link: "/dashboard/quickstart/" },
+  { text: "Guides", link: "/dashboard/guides/" },
+  { text: "Concepts", link: "/dashboard/concepts/" },
+];

.vitepress/navbars/index.ts

@@ -0,0 +1,2 @@
+export * from "./app";
+export * from "./dashboard";

.vitepress/sidebars/concepts.ts → .vitepress/sidebars/app/concepts.ts

@@ -12,16 +12,29 @@ export const conceptsSidebar: DefaultTheme.SidebarItem[] = [
         text: "CLI vs Desktop",
         link: "/app/concepts/cli_vs_desktop",
       },
-      {
-        text: "Instances & Authentication",
-        link: "/app/concepts/instances",
-      },
       {
         text: "Using Caido Offline",
         link: "/app/concepts/offline",
       },
     ],
   },
+  {
+    text: "Instances",
+    items: [
+      {
+        text: "Instance",
+        link: "/app/concepts/instance",
+      },
+      {
+        text: "Registration",
+        link: "/app/concepts/instance_registration",
+      },
+      {
+        text: "Authentication",
+        link: "/app/concepts/instance_authentication",
+      },
+    ],
+  },
   {
     text: "Internals",
     items: [

.vitepress/sidebars/app/index.ts

@@ -0,0 +1,6 @@
+export * from "./quickstart";
+export * from "./reference";
+export * from "./guides";
+export * from "./tutorials";
+export * from "./concepts";
+export * from "./troubleshooting";

.vitepress/sidebars/dashboard/concepts.ts

@@ -0,0 +1,21 @@
+import type { DefaultTheme } from "vitepress";
+
+export const conceptsSidebar: DefaultTheme.SidebarItem[] = [
+  {
+    text: "Concepts",
+    items: [
+      {
+        text: "Introduction",
+        link: "/dashboard/concepts/",
+      },
+      {
+        text: "Workspace",
+        link: "/dashboard/concepts/workspace",
+      },
+      {
+        text: "Registration Key",
+        link: "/dashboard/concepts/registration_key",
+      },
+    ],
+  },
+];

.vitepress/sidebars/dashboard.ts → .vitepress/sidebars/dashboard/guides.ts

@@ -1,12 +1,12 @@
 import type { DefaultTheme } from "vitepress";
 
-export const dashboardSidebar: DefaultTheme.SidebarItem[] = [
+export const guidesSidebar: DefaultTheme.SidebarItem[] = [
   {
-    text: "Dashboard",
+    text: "Guides",
     items: [
       {
         text: "Introduction",
-        link: "/dashboard/",
+        link: "/dashboard/guides/",
       },
     ],
   },
@@ -23,4 +23,13 @@ export const dashboardSidebar: DefaultTheme.SidebarItem[] = [
       },
     ],
   },
+  {
+    text: "Workspaces",
+    items: [
+      {
+        text: "Creating a registration key",
+        link: "/dashboard/guides/create_registration_key",
+      },
+    ],
+  },
 ];

.vitepress/sidebars/dashboard/index.ts

@@ -0,0 +1,3 @@
+export * from "./guides";
+export * from "./concepts";
+export * from "./quickstart";

.vitepress/sidebars/dashboard/quickstart.ts

@@ -0,0 +1,13 @@
+import type { DefaultTheme } from "vitepress";
+
+export const quickstartSidebar: DefaultTheme.SidebarItem[] = [
+  {
+    text: "Get Started",
+    items: [
+      {
+        text: "Introduction",
+        link: "/dashboard/quickstart/",
+      },
+    ],
+  },
+];

.vitepress/sidebars/index.ts

@@ -1,7 +1,2 @@
-export * from "./quickstart";
-export * from "./reference";
-export * from "./guides";
-export * from "./tutorials";
-export * from "./concepts";
-export * from "./troubleshooting";
-export * from "./dashboard";
+export * as appSidebars from "./app";
+export * as dashboardSidebars from "./dashboard";

.vitepress/theme/Layout.vue

@@ -1,20 +1,15 @@
 <script setup lang="ts">
-import { useRoute } from "vitepress";
 import DefaultThemeComponent from "vitepress/theme";
 
-import ApplicationNavbar from "../components/ApplicationNavbar.vue";
+import Navbar from "../components/Navbar.vue";
 
 const { Layout } = DefaultThemeComponent;
-const router = useRoute();
 </script>
 
 <template>
   <Layout>
     <template #doc-top>
-      <ApplicationNavbar
-        v-if="router.path.startsWith('/app/')"
-        style="margin-top: -48px; margin-left: -32px; z-index: 1"
-      />
+      <Navbar style="margin-top: -48px; margin-left: -32px; z-index: 1" />
     </template>
     <template #doc-before>
       <div style="height: var(--vp-nav-height)" />

.vitepress/theme/custom.css

@@ -29,8 +29,8 @@
 }
 
 img {
-    -webkit-box-shadow: 2px 5px 15px 3px rgba(0, 0, 0, 0.74);
-    box-shadow: 2px 5px 15px 3px rgba(0, 0, 0, 0.74);
+  -webkit-box-shadow: 2px 5px 15px 3px rgba(0, 0, 0, 0.74);
+  box-shadow: 2px 5px 15px 3px rgba(0, 0, 0, 0.74);
 }
 
 img[no-shadow] {
@@ -44,24 +44,35 @@ img[center] {
   margin-right: auto;
 }
 
+.mermaid-container {
+  display: flex;
+  justify-content: center;
+  margin: 1rem 0;
+}
+
+.mermaid-container svg {
+  max-width: 100%;
+  height: auto;
+}
+
 h1 {
-  color:#daa04a
+  color: #daa04a
 }
 
 h2 {
-  color:#b49566
+  color: #b49566
 }
 
 h3 {
-  color:#a38e7f;
+  color: #a38e7f;
 }
 
 h4 {
-  color:#b67474;
+  color: #b67474;
 }
 
 /* Hide default nav items since we're rendering custom nav via Layout slot */
-.VPNavBar .content > nav:not(.custom-nav-links) {
+.VPNavBar .content>nav:not(.custom-nav-links) {
   display: none;
 }
 
@@ -75,14 +86,16 @@ h4 {
 /* Media query for mobile view */
 @media (max-width: 600px) {
   .videos {
-    grid-template-columns: 1fr; /* Single column layout */
+    grid-template-columns: 1fr;
+    /* Single column layout */
   }
 }
 
 .video {
   min-height: 6rem;
   position: relative;
-  padding-bottom: 56.25%; /* 16:9 aspect ratio */
+  padding-bottom: 56.25%;
+  /* 16:9 aspect ratio */
   height: 0;
   overflow: hidden;
 }

package.json

@@ -22,7 +22,7 @@
     "@caido/eslint-config": "0.6.0",
     "@eslint/markdown": "7.2.0",
     "eslint": "9.28.0",
-    "mermaid": "11.9.0",
+    "mermaid": "11.12.2",
     "typescript": "5.6.2",
     "vitepress": "1.6.3",
     "vitepress-plugin-llms": "1.5.1",