Vaultrice voting integration

.prettierignore

@@ -25,4 +25,5 @@ docs
 *.html
 
 ## Project specific ignores
-integrations/runkit/src/webframe.ts
+integrations/runkit/src/webframe.ts
+integrations/vaultrice-voting/src/script.raw.js

integrations/vaultrice-voting/.gitignore

@@ -0,0 +1 @@
+dist

integrations/vaultrice-voting/CHANGELOG.md

@@ -0,0 +1,8 @@
+# @gitbook/integration-vaultrice-voting
+
+## 0.1.0
+
+### Minor Changes
+
+- initial version
+

integrations/vaultrice-voting/gitbook-manifest.yaml

@@ -0,0 +1,76 @@
+name: vaultrice-voting-widget
+title: Vaultrice Voting Integration
+description: Add interactive voting widgets to your GitBook documentation with real-time results.
+visibility: public
+organization: lTQNmOvSMj7VuZMuxuG8
+icon: ./assets/icon.png
+previewImages:
+    - ./assets/voting-preview.png
+    - ./assets/install-config.png
+    # - ./assets/add-widget.png
+    - ./assets/widget-config.png
+    # - ./assets/widget-preview-1.png
+    # - ./assets/widget-preview-2.png
+summary: |
+    # Overview
+
+    The Vaultrice Voting Integration allows you to embed interactive voting widgets directly into your GitBook pages. Users can vote on options and see real-time results without requiring any backend infrastructure.
+
+    # Features
+
+    - **Real-time voting**: Vote counts update instantly across all clients
+    - **No backend required**: Powered by Vaultrice's encrypted key-value storage
+    - **Persistent results**: Vote data is stored securely and persists across sessions
+    - **Customizable**: Configure titles, descriptions, and voting options
+
+    # How it works
+
+    Once installed, you can insert voting widgets into any page. Configure the voting options, title, and description through the block editor. Results are displayed in real-time as users vote.
+
+# Integration script (we'll return this from fetch_published_script)
+script: ./src/index.ts
+
+blocks:
+    - id: vote-block
+      title: Vaultrice Voting Widget
+      description: Insert a Vaultrice voting widget.
+      categories:
+          - content
+          - other
+
+# Integration user-configurable settings
+configurations:
+    account:
+        properties:
+            projectId:
+                type: string
+                title: Vaultrice Project ID
+                description: 'Create an account and paste your Project ID. (like here: https://www.vaultrice.com/docs/quickstart)'
+            apiKey:
+                type: string
+                title: Vaultrice API Key
+                description: 'Create an account and paste your API Key. (like here: https://www.vaultrice.com/docs/quickstart)'
+            apiSecret:
+                type: string
+                title: Vaultrice API Secret
+                description: 'Create an account and paste your API Secret. (like here: https://www.vaultrice.com/docs/quickstart)'
+        required:
+            - projectId
+            - apiKey
+            - apiSecret
+
+# Secrets — GitBook stores these securely and passes them to the worker
+# secrets:
+#   API_SECRET: ${{ env.VAULTRICE_API_SECRET }}
+
+# Scopes your integration needs
+scopes:
+    []
+    # - space:content:read
+    # - space:content:write
+
+externalLinks:
+    - label: Vaultrice Website
+      url: https://www.vaultrice.com
+    - label: Vaultrice App
+      url: https://www.vaultrice.app

integrations/vaultrice-voting/package.json

@@ -0,0 +1,28 @@
+{
+    "name": "@gitbook/integration-vaultrice-voting",
+    "version": "0.1.0",
+    "private": true,
+    "dependencies": {
+        "@gitbook/api": "*",
+        "@gitbook/runtime": "*"
+    },
+    "devDependencies": {
+        "@gitbook/cli": "workspace:*",
+        "@gitbook/tsconfig": "workspace:*",
+        "@types/react": "^19.1.13",
+        "@types/react-dom": "^19.1.9",
+        "@vaultrice/react-components": "^1.2.1",
+        "@vitejs/plugin-react": "5.0.2",
+        "react": "19.1.1",
+        "react-dom": "19.1.1",
+        "vite": "7.1.5"
+    },
+    "scripts": {
+        "typecheck": "tsc --noEmit",
+        "build:widget": "vite build --config vite.widget.config.ts && cp dist/voting.mjs src/script.raw.js",
+        "build": "bun run build:widget",
+        "publish-integrations-staging": "bun run build && gitbook publish .",
+        "check": "gitbook check",
+        "publish-integrations": "bun run build && gitbook publish ."
+    }
+}

integrations/vaultrice-voting/src/index.ts

@@ -0,0 +1,95 @@
+import {
+    createIntegration,
+    FetchEventCallback,
+    FetchPublishScriptEventCallback,
+    RuntimeContext,
+    RuntimeEnvironment,
+} from '@gitbook/runtime';
+import { VoteBlock } from './vote-block';
+
+// @ts-ignore
+// eslint-disable-next-line import/no-unresolved
+import script from './script.raw.js?raw'; // the generated string module
+
+type VaultriceContext = RuntimeContext<
+    RuntimeEnvironment<
+        {},
+        {
+            projectId?: string;
+            apiKey?: string;
+            apiSecret?: string;
+        }
+    >
+>;
+
+/**
+ * serve the published script: return JS string with placeholders replaced
+ */
+export const handleFetchPublishedScript: FetchPublishScriptEventCallback = async (
+    event,
+    { environment }: VaultriceContext,
+) => {
+    return new Response(script as string, {
+        headers: {
+            'Content-Type': 'application/javascript',
+            'Cache-Control': 'public, max-age=3600',
+        },
+    });
+};
+
+/**
+ * Generic HTTP handler (GitBook calls /integration)
+ */
+export const handleFetch: FetchEventCallback = async (request, context) => {
+    const url = new URL(request.url);
+    const path = url.pathname;
+
+    if (path.endsWith('voting.js') && url.searchParams.get('script') === 'true') {
+        return handleFetchPublishedScript(request as any, context as any) as any;
+    }
+
+    return new Response(
+        `<!doctype html>
+    <html>
+      <head>
+        <meta charset="utf-8" />
+        <meta name="color-scheme" content="light dark" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Vaultrice Voting iframe</title>
+        <style>
+          * { margin: 0; padding: 0; box-sizing: border-box; }
+          html,body { width: 100%; height: 100%; }
+          #root { padding: 12px; }
+        </style>
+      </head>
+      <body>
+        <div id="root"><div class="loading">Loading voting widget...</div></div>
+        <script type="module">
+          // Import the ES module served by the integration (same path with script param)
+          import init from '${url.origin}${url.pathname}/voting.js?script=true&v=${context.environment.integration.version}';
+          // call the exported init() to setup message listeners and rendering
+          (async () => {
+            try {
+              const api = await init();
+              // optional: keep reference (api) to call later if needed
+            } catch (err) {
+              console.error('Widget init failed', err);
+            }
+          })();
+        </script>
+      </body>
+    </html>`,
+        {
+            headers: {
+                'Content-Type': 'text/html',
+                'Cache-Control': 'public, max-age=86400',
+            },
+        },
+    );
+};
+
+export default createIntegration({
+    fetch: handleFetch,
+    fetch_published_script: handleFetchPublishedScript,
+    components: [VoteBlock],
+});