Add docs for Middleware

README.md

@@ -35,6 +35,10 @@ There are also some other helpful packages:
 
 - **@cap.js/wasm**: Experimental WASM solvers built using Rust.
 
+We also provide a middleware for a Cloudflare browser check-like experience. Currently, this is only available for Elysia:
+
+- [@cap.js/middleware-elysia](https://capjs.js.org/guide/middleware/elysia.html)
+
 It's designed to be a drop-in replacement for existing CAPTCHA solutions, with a focus on performance and UX.
 
 Cap is built with JavaScript, runs on any JS runtime (Bun, Node.js, Deno), and has no dependencies. If you're not using any JS runtime, you can also use the standalone mode with Docker, which relies entirely on a simple REST API to create and validate challenges.

docs/.vitepress/config.mjs

@@ -168,6 +168,13 @@ export default withMermaid({
           { text: "@cap.js/cli", link: "/guide/cli.md" },
         ],
       },
+      {
+        text: "Middleware",
+        items: [
+          { text: "About", link: "/guide/middleware/index.md" },
+          { text: "Elysia", link: "/guide/middleware/elysia.md" },
+        ],
+      },
       {
         text: "Proof-of-work",
         items: [

docs/.vitepress/theme/style.css

@@ -43,15 +43,15 @@
  *   in custom container, badges, etc.
  * -------------------------------------------------------------------------- */
 
- :root {
+:root {
   --vp-c-default-1: var(--vp-c-gray-1);
   --vp-c-default-2: var(--vp-c-gray-2);
   --vp-c-default-3: var(--vp-c-gray-3);
   --vp-c-default-soft: var(--vp-c-gray-soft);
 
-  --vp-c-brand-1: #26B5FA;
-  --vp-c-brand-2: #0688E5;
-  --vp-c-brand-3: #0076D8;
+  --vp-c-brand-1: #26b5fa;
+  --vp-c-brand-2: #0688e5;
+  --vp-c-brand-3: #0076d8;
   --vp-c-brand-soft: var(--vp-c-indigo-soft);
 
   --vp-c-tip-1: var(--vp-c-brand-1);
@@ -86,7 +86,6 @@
   --vp-button-brand-active-bg: var(--vp-c-brand-1);
 }
 
-
 ::selection {
   background-color: #3e63dd;
   color: rgb(255, 255, 255);
@@ -98,7 +97,11 @@
 
 :root {
   --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: -webkit-linear-gradient(280deg, #38c2fe, #0279db);
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    280deg,
+    #38c2fe,
+    #0279db
+  );
   /*
   --vp-home-hero-name-background: -webkit-linear-gradient(
     120deg,
@@ -106,8 +109,12 @@
     #41d1ff
   );
 */
-  --vp-home-hero-image-background-image: -webkit-linear-gradient(-45deg, #38c2fe52, #0279db33);
-  
+  --vp-home-hero-image-background-image: -webkit-linear-gradient(
+    -45deg,
+    #38c2fe52,
+    #0279db33
+  );
+
   --vp-home-hero-image-filter: blur(44px);
 }
 
@@ -148,4 +155,8 @@
 
 code {
   white-space: pre-wrap !important;
-}
+}
+
+img {
+  border-radius: 8px;
+}

docs/guide/middleware/elysia.md

@@ -0,0 +1,26 @@
+# Elysia Middleware
+
+## Usage
+
+```javascript
+import { Elysia, file } from "elysia";
+import { capMiddleware } from "@cap.js/elysia-middleware";
+
+new Elysia()
+  .use(
+    capMiddleware({
+      token_validity_hours: 32,
+      tokens_store_path: ".data/tokensList.json",
+      token_size: 16, // token size in bytes
+      verification_template_path: join(
+        dirname(fileURLToPath(import.meta.url)),
+        "./index.html"
+      ),
+      scoping: "scoped", // 'global' | 'scoped'
+    })
+  )
+  .get("/", () => "Hello Elysia!")
+  .listen(3000);
+```
+
+That's it! You can now use the middleware to protect your routes.

docs/guide/middleware/index.md

@@ -0,0 +1,9 @@
+# About Middlewares
+
+Cap's Middlewares allow you to replicate the experience of Cloudflare's browser check. This helps prevent bots, spam, and automated abuse before users ever reach your protected resource.
+
+This is currently only available for Elysia, but we plan to support more frameworks in the future.
+
+![Example of Cap's middleware](./demo.png)
+
+These are extremely simple to integrate and use.

docs/index.md

@@ -67,6 +67,10 @@ There are also some other helpful packages:
 
 - **@cap.js/wasm**: WASM solvers for Node and Web built with Rust.
 
+We also provide a middleware for a Cloudflare browser check-like experience. Currently, this is only available for Elysia:
+
+- [@cap.js/middleware-elysia](https://capjs.js.org/guide/middleware/elysia.html)
+
 It's designed to be a drop-in replacement for existing CAPTCHA solutions, with a focus on performance and UX.
 
 Cap is built with JavaScript, runs on any JS runtime (Bun, Node.js, Deno), and has no dependencies. If you're not using any JS runtime, you can also use the standalone mode with Docker, which relies entirely on a simple REST API to create and validate challenges.