diff --git a/README.md b/README.md index ffe88d9..a906411 100644 --- a/README.md +++ b/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. diff --git a/docs/.vitepress/config.mjs b/docs/.vitepress/config.mjs index 50869b5..504aa38 100644 --- a/docs/.vitepress/config.mjs +++ b/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: [ diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css index e6ebf02..ac80f66 100644 --- a/docs/.vitepress/theme/style.css +++ b/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; -} \ No newline at end of file +} + +img { + border-radius: 8px; +} diff --git a/docs/guide/middleware/demo.png b/docs/guide/middleware/demo.png new file mode 100644 index 0000000..531a40b Binary files /dev/null and b/docs/guide/middleware/demo.png differ diff --git a/docs/guide/middleware/elysia.md b/docs/guide/middleware/elysia.md new file mode 100644 index 0000000..3d6dcdf --- /dev/null +++ b/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. \ No newline at end of file diff --git a/docs/guide/middleware/index.md b/docs/guide/middleware/index.md new file mode 100644 index 0000000..a9d429c --- /dev/null +++ b/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. \ No newline at end of file diff --git a/docs/index.md b/docs/index.md index 315df24..1fbde12 100644 --- a/docs/index.md +++ b/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.