add docs demo and benchmark

docs/.vitepress/config.mjs

@@ -126,7 +126,7 @@ export default defineConfig({
         ],
       },
       { text: "Benchmark", link: "/guide/benchmark.md" },
-      { text: "Demo", link: "https://cap-starter.glitch.me/" },
+      { text: "Demo", link: "/guide/demo.md" }
     ],
 
     socialLinks: [

docs/.vitepress/theme/components/Benchmark.vue

@@ -43,7 +43,7 @@ async function runBenchmark() {
                 .slice(0, difficulty.value),
             ]),
             token: "",
-            expires: 1745328572815,
+            expires: (new Date().getTime()) + (6000*100),
           }),
           {
             status: 200,

docs/.vitepress/theme/components/Demo.vue

@@ -0,0 +1,56 @@
+<script setup>
+import Cap from "@cap.js/widget";
+
+window.CAP_CUSTOM_FETCH = async (url, options) => {
+  if (url === "/api/challenge") {
+    return new Response(
+      JSON.stringify({
+        challenge: Array.from({ length: 18 }, () => [
+          Array.from(
+            crypto.getRandomValues(
+              new Uint8Array(Math.ceil(32 / 2))
+            )
+          )
+            .map((byte) => byte.toString(16).padStart(2, "0"))
+            .join("")
+            .slice(0, 32),
+
+          Array.from(
+            crypto.getRandomValues(
+              new Uint8Array(Math.ceil(4 / 2))
+            )
+          )
+            .map((byte) => byte.toString(16).padStart(2, "0"))
+            .join("")
+            .slice(0, 4),
+        ]),
+        token: "",
+        expires: (new Date().getTime()) + (6000*100),
+      }),
+      {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      }
+    );
+  }
+  if (url === "/api/redeem") {
+    return new Response(
+      JSON.stringify({
+        success: true,
+        token: "",
+        expires: new Date().getTime() + 1000 * 60,
+      }),
+      {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      }
+    );
+  }
+  return await fetch(...arguments);
+};
+</script>
+
+<template>
+  <div style="margin-top: .6em;"></div>
+  <cap-widget data-cap-api-endpoint="/api/"></cap-widget>
+</template>

docs/.vitepress/theme/index.js

@@ -1,5 +1,6 @@
 // https://vitepress.dev/guide/custom-theme
 import Benchmark from "./components/Benchmark.vue";
+import Demo from "./components/Demo.vue";
 import { h } from "vue";
 import DefaultTheme from "vitepress/theme";
 import "./style.css";
@@ -14,5 +15,6 @@ export default {
   },
   enhanceApp({ app }) {
     app.component("Benchmark", Benchmark);
+    app.component("Demo", Demo);
   },
 };

docs/guide/demo.md

@@ -0,0 +1,18 @@
+# Demo
+
+### Default widget
+<Demo />
+
+### Custom widget
+<div style="
+    --cap-background: #161618;
+    --cap-color: #f3f3f3;
+    --cap-border-color: rgba(255, 255, 255, .05);
+    --cap-checkbox-border-radius: 6px;
+    --cap-border-radius: 4px;
+    --cap-checkbox-background: transparent;
+    --cap-checkmark: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cstyle%3E%40keyframes%20anim%7B0%25%7Bstroke-dashoffset%3A23.21320343017578px%7Dto%7Bstroke-dashoffset%3A0%7D%7D%3C%2Fstyle%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m5%2012%205%205L20%207%22%20style%3D%22stroke-dashoffset%3A0%3Bstroke-dasharray%3A23.21320343017578px%3Banimation%3Aanim%20.5s%20ease%22%2F%3E%3C%2Fsvg%3E);
+    --cap-spinner-color: white;
+    --cap-spinner-background-color: rgba(255, 255, 255, .1);">
+  <Demo custom />
+</div>

docs/index.md

@@ -15,7 +15,7 @@ hero:
       link: /guide
     - theme: alt
       text: Demo
-      link: https://cap-starter.glitch.me/
+      link: /guide/demo.md
     - theme: alt
       text: GitHub
       link: https://github.com/tiagorangel1/cap