Improve docs

docs/.vitepress/config.mjs

@@ -15,11 +15,12 @@ export default defineConfig({
     sidebar: [
       { text: "Get started", link: "/guide/index.md" },
       { text: "Effectiveness", link: "/guide/effectiveness.md"},
+      { text: "Demo", link: "../demo/" },
       {
-        text: "Examples",
+        text: "Modules",
         items: [
-          { text: "Markdown Examples", link: "/markdown-examples" },
-          { text: "Runtime API Examples", link: "/api-examples" },
+          { text: "Floating", link: "/guide/floating.md" },
+          { text: "Interstitial", link: "/guide/interstitial.md" },
         ],
       },
     ],

docs/guide/effectiveness.md

@@ -2,7 +2,7 @@
 
 Cap is designed to reduce spam and abuse on websites and web apps. While it won’t block all spam, it’s highly effective at keeping most bots at bay.
 
-## How It Works
+## The PoW mechanism
 
 Cap uses a Proof-of-Work (PoW) system, similar to Friendly Captcha, but with a focus on adding complexity to discourage spammers and automated bots. Instead of simply verifying if you're human, Cap creates a computational task that bots find hard to solve.
 
@@ -12,12 +12,11 @@ Once solved, the widget sends the results back to the server for validation. If
 
 ## Privacy
 
-Cap is fully compliant with GDPR and CCPA. It doesn’t use cookies or track you in intrusive ways. We never sell your data, and we don't even collect personal information unless you create a management account. No ads, no tracking. Period.
+Cap is fully compliant with GDPR and CCPA. It doesn’t use cookies or track you in intrusive ways. We never sell your data, and we don't even collect personal information. No ads, no tracking. Period.
 
 ## Security
 
 * IP addresses are only stored in-memory
-* Requests are stored in-memory in order to check if everything is OK
-* Challenges get progressively more difficult depending on how much requests are made (resets every 30 minutes)
+* Requests are stored in-memory in make sure they are not tampered with (hashed tokens only, this is stored in .data/tokensList.json by default)
 * Confirmation tokens reset after 20 minutes
 * Challenges are only valid for 10 minutes

docs/guide/floating.md

@@ -0,0 +1,20 @@
+# Floating mode
+
+Cap can automatically hide the captcha until the form is submitted. To use this feature, add the `data-cap-floating` attribute to the Cap widget with the query selector of the `cap-widget` element you want to use.
+
+```html
+<cap-widget id="floating" data-api-endpoint="https://<your website url>/api/"></cap-widget>
+<button data-cap-floating="#floating" onclick="console.log('solved')" data-cap-floating-position="bottom"> Trigger floating mode</button>
+```
+
+You'll also need to import both the Cap library and the floating mode script from JSDelivr:
+```html
+<script src="https://cdn.jsdelivr.net/gh/tiagorangel1/cap/src/js/min/cap.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/tiagorangel1/cap/src/js/min/cap-floating.min.js"></script>
+```
+
+The following attributes are supported:
+
+- `data-cap-floating`: The query selector of the `cap-widget` element you want to use.
+- `data-cap-floating-position`: The position of the floating widget. Can be `top` or `bottom`.
+- `data-cap-floating-offset`: The offset of the floating widget from the trigger element.

docs/guide/index.md

@@ -7,7 +7,7 @@ Cap is a library designed for safeguarding against spam and abuse by utilizing a
 
 ## Adding the Cap widget
 
-Cap is built to be straightforward and requires no API tokens for setup. Start by importing the Cap library:
+Cap is built to be straightforward and requires no API tokens for setup. Start by importing the Cap library from JSDelivr:
 
 ```html
 <script src="https://cdn.jsdelivr.net/gh/tiagorangel1/cap/src/js/min/cap.min.js"></script>
@@ -16,9 +16,11 @@ Cap is built to be straightforward and requires no API tokens for setup. Start b
 Next, add the `<cap-widget>` component to your HTML.
 
 ```html
-<cap-widget id="cap" data-api-endpoint="https://trycap.glitch.me/api/"></cap-widget>
+<cap-widget id="cap" data-api-endpoint="https://<your website url>/api/"></cap-widget>
 ```
 
+**Note:** You'll need to start a server with the Cap API running at the same URL as specified in the `data-api-endpoint` attribute.
+
 Then, in your JavaScript, listen for the `solve` event to capture the token when generated:
 
 ```js

docs/guide/interstitial.md

@@ -0,0 +1,14 @@
+# Interstitial mode
+
+Interstitial mode is an alternative to the floating mode that'll show a dialog with the widget. It'll automatically hide the widget until the user clicks on the trigger element, and the widget will automatically start solving.
+
+To use it, you'll need to call `await CapInterstitial()` from your JS.
+
+```html
+<script src="https://cdn.jsdelivr.net/gh/tiagorangel1/cap/src/js/min/cap.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/tiagorangel1/cap/src/js/min/cap-interstitial.min.js"></script>
+```
+```js
+const token = await CapInterstitial();
+console.log("Token:", token)
+```

docs/index.md

@@ -10,9 +10,9 @@ hero:
     - theme: brand
       text: Documentation
       link: /guide
-  - theme: alt
-    text: Demo
-    link: ../demo/
+    - theme: alt
+      text: Demo
+      link: ../demo/
 
 features:
   - icon: ⚡️