Merge pull request #187 from janhq/pena-patch

Update the docs per discussion

docs/cortex-platform/overview.mdx

@@ -0,0 +1,5 @@
+---
+title: Overview
+description: Cortex Platform Overview.
+slug: /cortex-platform
+---

docs/quickstart.mdx

@@ -14,10 +14,10 @@ import TabItem from "@theme/TabItem";
 
 ## Installation
 ```sh
-# Install using Brew for Mac and Linux
+# Install using Brew for Mac
 brew install cortexso
 
-# Install using winger for Windows
+# Install using Winget for Windows
 winget install cortexso
 
 # Install using Sudo for Linux

docusaurus.config.ts

@@ -222,9 +222,10 @@ const config: Config = {
       };
     },
     [
-      "@scalar/docusaurus",
+      "./src/plugins/scalar/index.ts",
       {
         label: "API Reference",
+        showNavLink: false,
         route: "/api-reference",
         configuration: {
           spec: {
@@ -367,12 +368,21 @@ const config: Config = {
       items: [
         {
           type: "doc",
-          position: "left",
+          position: "right",
           docId: "overview",
           label: "Docs",
         },
+        {
+          to: "/api-reference",
+          label: "API Reference",
+          position: "right",
+        },
         // { to: "/docs/cli", label: "CLI", position: "left" },
-        { to: "/models", label: "Models", position: "right" },
+        {
+          type: "custom-productMegaMenu",
+          position: "left",
+        },
+        { to: "/models", label: "Models", position: "left" },
         {
           type: "search",
           position: "right",

sidebars.ts

@@ -167,6 +167,14 @@ const sidebars: SidebarsConfig = {
     },
     { type: "doc", id: "troubleshooting", label: "Troubleshooting" },
   ],
+  platform: [
+    {
+      type: "html",
+      value: "GET STARTED",
+      className: "sidebar-divider",
+    },
+    "cortex-platform/overview",
+  ]
 };
 
 export default sidebars;

src/components/NavbarMegaMenu/index.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import { motion } from "framer-motion";
+import Link from "@docusaurus/Link";
+
+const transition = {
+  type: "spring",
+  mass: 0.5,
+  damping: 11.5,
+  stiffness: 100,
+  restDelta: 0.001,
+  restSpeed: 0.001,
+};
+
+export const MenuItem = ({
+  setActive,
+  active,
+  item,
+  children,
+}: {
+  setActive: (item: string) => void;
+  active: string | null;
+  item: string;
+  children?: React.ReactNode;
+}) => {
+  return (
+    <div onMouseEnter={() => setActive(item)} className="relative ">
+      <motion.p
+        transition={{ duration: 0.3 }}
+        className="mb-0 navbar__item navbar__link"
+      >
+        {item}
+      </motion.p>
+      {active !== null && (
+        <motion.div
+          initial={{ opacity: 0, scale: 0.85, y: 0 }}
+          animate={{ opacity: 1, scale: 1, y: 0 }}
+          transition={transition}
+        >
+          {active === item && (
+            <div className="absolute top-[calc(100%_+_0px)] left-1/2 transform -translate-x-1/2 pt-4">
+              <motion.div
+                transition={transition}
+                layoutId="active" // layoutId ensures smooth animation
+                className="bg-white dark:bg-black backdrop-blur-sm rounded-2xl overflow-hidden border border-black/[0.2] dark:border-white/[0.2] shadow-xl"
+              >
+                <motion.div
+                  layout // layout ensures smooth animation
+                  className="w-max h-full p-4"
+                >
+                  {children}
+                </motion.div>
+              </motion.div>
+            </div>
+          )}
+        </motion.div>
+      )}
+    </div>
+  );
+};
+
+export const Menu = ({
+  setActive,
+  children,
+}: {
+  setActive: (item: string | null) => void;
+  children: React.ReactNode;
+}) => {
+  return (
+    <div
+      onMouseLeave={() => setActive(null)} // resets the state
+    >
+      {children}
+    </div>
+  );
+};
+
+export const ProductItem = ({
+  title,
+  description,
+  href,
+  src,
+}: {
+  title: string;
+  description: string;
+  href: string;
+  src: string;
+}) => {
+  return (
+    <Link href={href} className="flex space-x-2">
+      <div>
+        <h4 className="text-xl font-bold mb-1 text-black dark:text-white">
+          {title}
+        </h4>
+        <p className="text-neutral-700 text-sm max-w-[10rem] dark:text-neutral-300">
+          {description}
+        </p>
+      </div>
+    </Link>
+  );
+};
+
+export const HoveredLink = ({ children, ...rest }: any) => {
+  return (
+    <Link
+      {...rest}
+      className="text-neutral-700 dark:text-neutral-200 hover:no-underline hover:text-blue-600"
+    >
+      {children}
+    </Link>
+  );
+};

src/components/ProductsMenu/index.tsx

@@ -0,0 +1,59 @@
+import { HoveredLink, Menu, MenuItem, ProductItem } from "../NavbarMegaMenu";
+import { useState } from "react";
+
+const ProductsMenu = () => {
+  const [active, setActive] = useState<string | null>(null);
+
+  return (
+    <Menu setActive={setActive}>
+      <MenuItem setActive={setActive} active={active} item="Products">
+        <div className="flex flex-col space-y-3 text-sm min-w-64">
+          <HoveredLink href="/docs">
+            <div className="py-1">
+              <h4 className="mb-1">Cortex.cpp</h4>
+              <p className="mb-0 text-neutral-600 dark:text-neutral-400">
+                Local AI Engine
+              </p>
+            </div>
+          </HoveredLink>
+          <HoveredLink href="/docs/cortex-platform">
+            <div className="py-1">
+              <h4 className="mb-1 ">Cortex Platform</h4>
+              <p className="mb-0 text-neutral-600 dark:text-neutral-400">
+                Self-hosted AI Platform
+              </p>
+            </div>
+          </HoveredLink>
+          <HoveredLink>
+            <div className="py-1">
+              <div className="flex gap-x-2 items-center">
+                <h4 className="mb-1 ">Cortex Desktop </h4>
+                <div className="inline-flex font-medium text-xs bg-yellow-400 text-yellow-800 py-1 px-2 rounded-full">
+                  Coming Soon
+                </div>
+              </div>
+              <p className="mb-0 text-neutral-600 dark:text-neutral-400">
+                Easy-to-use Desktop app
+              </p>
+            </div>
+          </HoveredLink>
+          <HoveredLink>
+            <div className="py-1">
+              <div className="flex gap-x-2 items-center">
+                <h4 className="mb-1 ">Cortex Server </h4>
+                <div className="inline-flex font-medium text-xs bg-yellow-400 text-yellow-800 py-1 px-2 rounded-full">
+                  Coming Soon
+                </div>
+              </div>
+              <p className="mb-0 text-neutral-600 dark:text-neutral-400">
+                Run Cortex in Production
+              </p>
+            </div>
+          </HoveredLink>
+        </div>
+      </MenuItem>
+    </Menu>
+  );
+};
+
+export default ProductsMenu;

src/plugins/scalar/index.ts

@@ -0,0 +1,62 @@
+import type { LoadContext, Plugin } from "@docusaurus/types";
+import type { ReferenceProps } from "@scalar/api-reference-react";
+
+export type ScalarOptions = {
+  label: string;
+  route: string;
+  showNavLink?: boolean;
+} & ReferenceProps;
+
+/**
+ * Used to set default options from the user-provided options
+ * This is also useful to ensure backwards compatibility with older configs that don't have the new options
+ */
+const createDefaultScalarOptions = (options: ScalarOptions): ScalarOptions => ({
+  showNavLink: true,
+  ...options,
+});
+
+/**
+ * Scalar's Docusaurus plugin for Api References
+ */
+function ScalarDocusaurusCustomPlugin(
+  context: LoadContext,
+  options: ScalarOptions
+): Plugin<ReferenceProps> {
+  const defaultOptions = createDefaultScalarOptions(options);
+
+  return {
+    name: "@scalar/docusaurus",
+
+    async loadContent() {
+      return defaultOptions;
+    },
+
+    async contentLoaded({ content, actions }) {
+      const { addRoute } = actions;
+
+      // If showNavLink is true, add a link to the navbar
+      if (defaultOptions.showNavLink) {
+        (
+          context.siteConfig.themeConfig.navbar as {
+            items: Record<string, string>[];
+          }
+        ).items.push({
+          to: defaultOptions.route ?? "/scalar",
+          label: defaultOptions.label ?? "Scalar",
+          position: "left",
+        });
+      }
+
+      addRoute({
+        path: defaultOptions.route,
+        component: "@scalar/docusaurus/dist/ScalarDocusaurus",
+        // Provide the path to the loaded spec as a prop to your component
+        exact: true,
+        ...content,
+      });
+    },
+  };
+}
+
+export default ScalarDocusaurusCustomPlugin;

src/theme/NavbarItem/ComponentTypes.tsx

@@ -1,7 +1,9 @@
 import ComponentTypes from "@theme-original/NavbarItem/ComponentTypes";
 import SocialNavbar from "@site/src/components/SocialNavbar";
+import ProductsMenu from "@site/src/components/ProductsMenu";
 
 export default {
   ...ComponentTypes,
   "custom-socialNavbar": SocialNavbar,
+  "custom-productMegaMenu": ProductsMenu,
 };

static/openapi/jan.json

@@ -1216,7 +1216,7 @@
     ],
     "x-tagGroups": [
         {
-            "name": "Endpoints",
+            "name": "CORTEX.CPP",
             "tags": [
                 "Inference",
                 "Embeddings",
@@ -1228,7 +1228,7 @@
             ]
         },
         {
-            "name": "Assistants",
+            "name": "CORTEX PLATFORM",
             "tags": [
                 "Assistants",
                 "Messages",