Ap get started

.vitepress/config.mts

@@ -6,7 +6,7 @@ import type { DefaultTheme } from "vitepress";
 import {
   clientSdkNavbar,
   pluginsNavbar,
-  quickstartNavbar,
+  introductionNavbar,
 } from "./navbars";
 import { clientSdkSidebars, pluginsSidebars } from "./sidebars";
 
@@ -55,9 +55,9 @@ export default defineConfig({
         component: "NavItem",
         props: {
           text: "Get Started",
-          link: "/quickstart/",
-          activeMatch: "^/quickstart(/|$)",
-          items: quickstartNavbar,
+          link: "/introduction/",
+          activeMatch: "^/introduction(/|$)",
+          items: introductionNavbar,
         },
       },
       {
@@ -89,6 +89,7 @@ export default defineConfig({
     ] satisfies DefaultTheme.NavItem[],
 
     sidebar: {
+      "/plugins/quickstart/": pluginsSidebars.quickstartSidebar,
       "/plugins/guides/": pluginsSidebars.guidesSidebar,
       "/plugins/tutorials/": pluginsSidebars.tutorialsSidebar,
       "/plugins/reference/": pluginsSidebars.referenceSidebar,

.vitepress/navbars/index.ts

@@ -1,3 +1,8 @@
-export * from "./plugins";
-export * from "./client-sdk";
-export * from "./quickstart";
+import type { DefaultTheme } from "vitepress";
+
+export { pluginsNavbar } from "./plugins";
+export { clientSdkNavbar } from "./client-sdk";
+
+export const introductionNavbar: DefaultTheme.NavItemWithLink[] = [
+  { text: "Get Started", link: "/introduction/" },
+];

.vitepress/navbars/plugins.ts

@@ -1,6 +1,7 @@
 import type { DefaultTheme } from "vitepress";
 
 export const pluginsNavbar: DefaultTheme.NavItemWithLink[] = [
+  { text: "Creating Your First Plugin", link: "/plugins/quickstart/" },
   { text: "Guides", link: "/plugins/guides/" },
   { text: "Tutorials", link: "/plugins/tutorials/" },
   { text: "Reference", link: "/plugins/reference/" },

.vitepress/sidebars/plugins/guides.ts

@@ -1,35 +1,6 @@
 import type { DefaultTheme } from "vitepress";
 
 export const guidesSidebar: DefaultTheme.SidebarItem[] = [
-  {
-    text: "Getting Started",
-    items: [
-      {
-        text: "Getting Started",
-        link: "/plugins/guides/",
-      },
-      {
-        text: "Configure Package",
-        link: "/plugins/guides/config",
-      },
-      {
-        text: "AI Assisted Coding",
-        link: "/plugins/guides/vibe_coding",
-      },
-      {
-        text: "Set Up Repository",
-        link: "/plugins/guides/repository",
-      },
-      {
-        text: "Submit to Store",
-        link: "/plugins/guides/store",
-      },
-      {
-        text: "Contributing",
-        link: "/plugins/guides/documentation",
-      },
-    ],
-  },
   {
     text: "Frontend Guides",
     items: [

.vitepress/sidebars/plugins/index.ts

@@ -2,3 +2,4 @@ export * from "./guides";
 export * from "./tutorials";
 export * from "./reference";
 export * from "./concepts";
+export * from "./quickstart";

.vitepress/sidebars/plugins/quickstart.ts

@@ -0,0 +1,49 @@
+import type { DefaultTheme } from "vitepress";
+
+export const quickstartSidebar: DefaultTheme.SidebarItem[] = [
+  {
+    text: "Creating Your First Plugin",
+    items: [
+      {
+        text: "Introduction",
+        link: "/plugins/quickstart/",
+      },
+      {
+        text: "Configuring a Plugin",
+        link: "/plugins/quickstart/config",
+      },
+      {
+        text: "Building a Plugin",
+        link: "/plugins/quickstart/build",
+      },
+      {
+        text: "Frontend Component Basics",
+        link: "/plugins/quickstart/frontend",
+      },
+      {
+        text: "Backend Component Basics",
+        link: "/plugins/quickstart/backend",
+      },
+      {
+        text: "Hot Reload",
+        link: "/plugins/quickstart/reload",
+      },
+      {
+        text: "AI Assisted Coding",
+        link: "/plugins/quickstart/vibe_coding",
+      },
+      {
+        text: "Set Up Repository",
+        link: "/plugins/quickstart/repository",
+      },
+      {
+        text: "Submit to Store",
+        link: "/plugins/quickstart/store",
+      },
+      {
+        text: "Contributing",
+        link: "/plugins/quickstart/documentation",
+      },
+    ],
+  },
+];

src/index.md

@@ -13,7 +13,7 @@ hero:
   actions:
     - theme: brand
       text: Get Started
-      link: /quickstart
+      link: /introduction
     - theme: alt
       text: Plugins
       link: /plugins/guides/

src/introduction.md

@@ -0,0 +1,23 @@
+# Welcome to the Caido Developer Documentation!
+
+Here, you will find a wealth of information and resources for the [Software Development Kits (SDKs)](https://en.wikipedia.org/wiki/Software_development_kit) offered by Caido.
+
+## Plugins
+
+For users looking to customize/extend Caido's functionality, the [@caido/sdk-frontend](/plugins/reference/sdks/frontend/), [@caido/sdk-backend](/plugins/reference/sdks/backend/) kits provide the components and features for creating your own custom plugins.
+
+::: tip
+View the [Creating Your First Plugin](/plugins/quickstart/) documentation to learn how to create your own Caido plugin.
+:::
+
+The [@caido/sdk-workflow](/plugins/reference/sdks/workflow/) kit provides the interface for working with Caido data [using the JavaScript node](https://docs.caido.io/app/guides/workflows_javascript.html) in workflows.
+
+For both plugins and workflows, a number of [modules](/plugins/reference/modules/) are supported for Caido’s QuickJS JavaScript engine.
+
+## Client SDK
+
+The [@caido/sdk-client](/client-sdk/reference/) kit provides an interface for programmatic access to a running Caido instance from external scripts and tools.
+
+::: tip
+View the [Install the SDK](/client-sdk/guides/install.md) guide to get started.
+:::

src/plugins/quickstart/backend.md

@@ -0,0 +1,25 @@
+# Backend Component Basics
+
+The backend component of a plugin exposes functions that the frontend can call.
+
+In the Demo Plugin, when the `Generate random string` button is clicked, `onGenerateClick` calls `sdk.backend.generateRandomString(10)`, assigns the returned string to `myVar`, and the read-only `InputText` updates to show that value.
+
+```ts
+import type { DefineAPI, SDK } from "caido:plugin";
+
+const generateRandomString = (sdk: SDK, length: number) => {
+  const randomString = Math.random()
+    .toString(36)
+    .substring(2, length + 2);
+  sdk.console.log(`Generating random string: ${randomString}`);
+  return randomString;
+};
+
+export type API = DefineAPI<{
+  generateRandomString: typeof generateRandomString;
+}>;
+
+export function init(sdk: SDK<API>) {
+  sdk.api.register("generateRandomString", generateRandomString);
+}
+```

src/plugins/quickstart/build.md

@@ -0,0 +1,37 @@
+# Building a Plugin
+
+To build the plugin files into an installable package, enter the following terminal command:
+
+```bash
+pnpm build
+```
+
+The output will resemble:
+
+<img alt="Build output." src="/_images/plugin_build.png" center/>
+
+Once the plugin is built, a `plugin_package.zip` file will be created in the `/dist` directory.
+
+<img alt="The plugin_package.zip file." src="/_images/plugin_package_file.png" center/>
+
+In Caido, navigate to the **Plugins** interface and click on the `Install Package` button.
+
+<img alt="Plugins interface." src="/_images/plugins_interface.png" center/>
+
+Select the `/demo/dist/plugin_package.zip` file to install the plugin.
+
+<img alt="Selecting the plugin_package.zip file." src="/_images/plugin_package_file_select.png" center/>
+
+A new row will be added to list of installed plugins in the table of the **Installed** tab.
+
+<img alt="Installed plugins list." src="/_images/installed_plugins.png" center/>
+
+The plugin will also appear in the **Plugins** section of the side navigation menu.
+
+<img alt="Installed plugins side navigation menu list." src="/_images/installed_plugin.png" center/>
+
+## What's next?
+
+You may have noticed that even though the plugin's display name was set to `Demo Plugin` in the `/demo/caido.config.ts` file, it is displayed as **</> My Plugin** in the side navigation menu.
+
+To learn how to fix this mismatch, continue with [Frontend Component Basics](/plugins/quickstart/frontend.md).