docs: a bunch of improvements

docs/.vitepress/theme/style.css

@@ -160,3 +160,31 @@ code {
 img {
   border-radius: 8px;
 }
+
+.vp-doc [class*="language-"] > span.lang {
+  display: none;
+}
+
+:root {
+  --vp-font-family-mono: mono, ui-monospace, "Menlo", "Monaco", "Consolas",
+    "Liberation Mono", "Courier New", monospace !important;
+}
+
+@font-face {
+  font-family: mono;
+  src: url("/mono-normal.woff2");
+}
+
+@font-face {
+  font-family: mono;
+  font-style: italic;
+  src: url("/mono-italic.woff2");
+}
+
+.vp-code-group .tabs label {
+  line-height: 42px;
+}
+
+.vp-code-group .tabs {
+  padding: 0 8px;
+}

docs/guide/index.md

@@ -35,10 +35,7 @@ We're using the latest version of the library here for simplicity, but you shoul
 Next, add the `<cap-widget>` component to your HTML.
 
 ```html
-<cap-widget
-  id="cap"
-  data-cap-api-endpoint="<your cap api endpoint>"
-></cap-widget>
+<cap-widget id="cap" data-cap-api-endpoint="<your cap endpoint>"></cap-widget>
 ```
 
 ::: info  
@@ -91,7 +88,7 @@ Now, you'll need to change your server code to add the routes that Cap needs to
 
 ::: code-group
 
-```js [Elysia]
+```js [elysia]
 import { Elysia } from "elysia";
 import Cap from "@cap.js/server";
 
@@ -119,7 +116,7 @@ new Elysia()
 console.log(`🦊 Elysia is running at http://localhost:3000`);
 ```
 
-```js [Fastify]
+```js [fastify]
 import Fastify from "fastify";
 import Cap from "@cap.js/server";
 
@@ -146,7 +143,7 @@ fastify.listen({ port: 3000, host: "0.0.0.0" }).then(() => {
 });
 ```
 
-```js [Bun.serve]
+```js [bun.serve]
 import Cap from "@cap.js/server";
 
 const cap = new Cap({
@@ -179,7 +176,7 @@ Bun.serve({
 console.log(`Server running at http://localhost:3000`);
 ```
 
-```js [Express]
+```js [express]
 import express from "express";
 import Cap from "@cap.js/server";
 
@@ -221,4 +218,4 @@ Note that the token will immediately be deleted after this. To prevent this, use
 
 ## LLMs
 
-You can use this documentation's [llms.txt](/llms.txt) or [llms-full.txt](/llms-full.txt) (~8k tokens) to give to LLMs. 
+You can use this documentation's [llms.txt](/llms.txt) or [llms-full.txt](/llms-full.txt) (~8k tokens) to give to LLMs.

docs/guide/widget.md

@@ -17,6 +17,8 @@
 
 ```html [standalone server]
 <script src="https://<server url>/assets/widget.js"></script>
+
+<!-- tip: make sure to set the wasm endpoint too! -->
 ```
 
 :::
@@ -28,13 +30,11 @@ We're using the latest version of the library here for simplicity, but you shoul
 You can now use the `<cap-widget>` component in your HTML.
 
 ```html
-<cap-widget
-  id="cap"
-  data-cap-api-endpoint="<your cap api endpoint>"
-></cap-widget>
+<cap-widget id="cap" data-cap-api-endpoint="<your cap endpoint>"></cap-widget>
 ```
 
-> [!NOTE] You'll need to start a server with the Cap API running at the same URL as specified in the `data-cap-api-endpoint` attribute. In the server-side example we provided, it's set to `/api`, but you can change this by replacing every `app.post('/api/...', ...)` to `app.post('/your endpoint/...', ...)`.
+> [!NOTE].  
+> You'll need to start a server with an API exposing the Cap methods running at the same URL as specified in the `data-cap-api-endpoint` attribute.  
 
 > [!TIP] The following attributes are supported:
 >
@@ -71,7 +71,7 @@ You can change the text on each label of the widget by setting the `data-cap-i18
 ```html
 <cap-widget
   id="cap"
-  data-cap-api-endpoint="<your cap api endpoint>"
+  data-cap-api-endpoint="<your cap endpoint>"
   data-cap-i18n-verifying-label="Verifying..."
   data-cap-i18n-initial-state="I'm a human"
   data-cap-i18n-solved-label="I'm a human"

docs/package.json

@@ -6,13 +6,12 @@
     "preview": "vitepress preview"
   },
   "devDependencies": {
-    "mermaid": "^11.6.0",
-    "vitepress-plugin-mermaid": "^2.0.17",
     "vue": "^3.5.13"
   },
   "dependencies": {
     "@cap.js/widget": "^0.0.22",
     "vitepress": "^1.6.3",
-    "vitepress-plugin-llms": "^1.1.1"
+    "vitepress-plugin-llms": "^1.1.1",
+    "vitepress-plugin-mermaid": "^2.0.17"
   }
 }