feat(api): adds scalar api reference documentation

Author: antlio

docusaurus.config.ts

@@ -1,11 +1,15 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
+import type { ScalarOptions } from '@scalar/docusaurus'
 import type { Config } from '@docusaurus/types'
 import { themes } from 'prism-react-renderer'
-
+import fs from 'fs'
 const lightCodeTheme = themes.okaidia;
 const darkCodeTheme = themes.okaidia;
 
+// Read the openapi.yaml file
+const specFile = fs.readFileSync('./openapi.yaml', 'utf8')
+
 const config: Config = {
   title: "Mistral AI Large Language Models",
   tagline: "Documentation for the deployment and usage of Mistral AI's LLMs",
@@ -154,7 +158,22 @@ const config: Config = {
         respectPrefersColorScheme: true,
       },
     }),
-    plugins: [require.resolve('docusaurus-lunr-search')],
+    plugins: [
+      require.resolve('docusaurus-lunr-search'),
+      [
+        '@scalar/docusaurus',
+        {
+          label: 'API',
+          route: '/api',
+          configuration: {
+            spec: {
+              content: specFile,
+            },
+            hideDarkModeToggle: true,
+          },
+        } as ScalarOptions,
+      ],
+    ],
 };
 
-module.exports = config;
+export default config;

src/css/api-reference.css

@@ -0,0 +1,93 @@
+/*
+	Scalar Global Variables
+*/
+:root {
+	--scalar-color-accent: var(--ifm-color-primary);
+	--scalar-link-color: var(--ifm-link-color);
+	--scalar-link-color-hover: var(--ifm-link-color);
+	--scalar-semibold: var(--ifm-font-weight-semibold);
+	--scalar-sidebar-active-background: orange;
+	--scalar-border-width: 1px;
+}
+
+/*
+	API Reference Styles
+*/
+.scalar-app {
+
+	/* Reset styles */
+	h2,
+	h3 {
+		margin-bottom: 0;
+		font-size: var(--scalar-font-size-1);
+	}
+
+	h2 > span {
+		display: inline-block!important;
+		font-size: var(--scalar-font-size-4);
+		font-weight: var(--scalar-semibold);
+	}
+
+	.models-list h3 {
+		font-size: var(--scalar-font-size-4);
+		font-weight: var(--scalar-normal);
+	}
+
+	ul {
+		padding-left: 0;
+		margin-bottom: 0;
+	}
+
+	.parameter-item-trigger {
+		align-items: center!important;
+	}
+
+	/* Introduction code styles */
+	.markdown code {
+		border: none;
+	}
+
+	.introduction-card-item {
+		--scalar-border-width: 1px;
+	}
+
+	/* Sidebar styles */
+	.sidebar {
+		.sidebar-search-input {
+			font-size: 14px;
+			font-weight: 400;
+		}
+
+		.sidebar-heading-link {
+			color: var(--ifm-menu-color);
+			padding-right: 6px;
+		}
+
+		.active_page.sidebar-heading p {
+			color: var(--ifm-menu-color-active);
+		}	
+
+		.sidebar-heading-link:hover {
+			color: var(--ifm-color-primary);
+		}
+
+		.sidebar-indent-nested .sidebar-heading {
+				--scalar-sidebar-indent-base: 12px;
+		}
+
+		.sidebar-pages {
+			padding-right: 0;
+		}
+
+		.toggle-nested-icon {
+			display: none;
+		}
+	}
+}
+
+/*
+	Scalar Client Modal styles
+*/
+.scalar-client {
+	--scalar-border-width: 0.5px;
+}