feature framework integrations

Author: light-source

src/content/docs/en/framework-integrations/angular-integration.mdx

@@ -0,0 +1,55 @@
+---
+title: "Angular Integration"
+description: "Procaptcha has an official Angular component, that provides seamless integration of Prosopo Procaptcha into any Angular project."
+i18nReady: true
+---
+
+Procaptcha has an official Angular component, that provides seamless integration of Prosopo Procaptcha into any Angular project.
+The integration component supports all the [Procaptcha render options](/en/basics/client-side-rendering/#procaptcha-options).
+
+## 1. Installation
+
+`npm install @prosopo/angular-procaptcha-wrapper`
+
+## 2. Example of usage
+
+### 2.1) Basic setup
+
+```typescript
+import { Component } from "@angular/core";
+import {
+    ProcaptchaComponent,
+    type ProcaptchaRenderOptions,
+} from "@prosopo/angular-procaptcha-wrapper";
+
+@Component({
+    selector: "app-root",
+    imports: [ProcaptchaComponent],
+    template: `
+    <procaptcha-component [settings]="procaptchaSettings"
+                          [htmlAttributes]="{class:'my-app__procaptcha'}"/>`,
+    styles: "",
+})
+export class AppComponent {
+    procaptchaSettings: ProcaptchaRenderOptions = {
+        siteKey: "your-site-key",
+    };
+}
+```
+
+### 2.2) Advanced usage
+
+```typescript
+// ...
+
+export class AppComponent {
+    procaptchaSettings: ProcaptchaRenderOptions = {
+        siteKey: environment.PROCATCHA_SITE_KEY,
+        captchaType: "pow",
+        language: "en",
+        callback: (token: string) => {
+            console.log("verified", token);
+        },
+    };
+}
+```

src/content/docs/en/framework-integrations/react-integration.mdx

@@ -0,0 +1,45 @@
+---
+title: "React Integration"
+description: "Procaptcha has an official React component, that provides seamless integration of Prosopo Procaptcha into any React project."
+i18nReady: true
+---
+
+Procaptcha has an official React component, that provides seamless integration of Prosopo Procaptcha into any React project.
+The integration component supports all the [Procaptcha render options](/en/basics/client-side-rendering/#procaptcha-options).
+
+## 1. Installation
+
+`npm install @prosopo/react-procaptcha-wrapper`
+
+## 2. Example of usage
+
+### 2.1) Basic setup
+
+```typescript jsx
+import {ProcaptchaComponent} from "@prosopo/react-procaptcha-wrapper";
+
+// ...
+
+<ProcaptchaComponent siteKey={"my-site-key"}/>;
+```
+
+### 2.2) Advanced usage
+
+```typescript jsx
+// ...
+
+<ProcaptchaComponent
+    siteKey={siteKey}
+    captchaType={"pow"}
+    language={"en"}
+    callback={(token: string): void => {
+        console.log("verified", token);
+    }}
+    htmlAttributes={{
+        className: "my-app__procaptcha",
+        style: {
+            maxWidth: "600px",
+        },
+    }}
+/>
+```

src/content/docs/en/framework-integrations/svelte-integration.mdx

@@ -0,0 +1,43 @@
+---
+title: "Svelte Integration"
+description: "Procaptcha has an official Svelte component, that provides seamless integration of Prosopo Procaptcha into any Svelte project."
+i18nReady: true
+---
+
+Procaptcha has an official Svelte component, that provides seamless integration of Prosopo Procaptcha into any Svelte project.
+The integration component supports all the [Procaptcha render options](/en/basics/client-side-rendering/#procaptcha-options).
+
+## 1. Installation
+
+`npm install @prosopo/svelte-procaptcha-wrapper`
+
+## 2. Example of usage
+
+### 2.1) Basic setup
+
+```sveltehtml
+<script lang="ts">
+import {ProcaptchaComponent} from "@prosopo/svelte-procaptcha-wrapper";
+</script>
+
+<ProcaptchaComponent siteKey={"my-site-key"}/>;
+```
+
+### 2.2) Advanced usage
+
+```sveltehtml
+<script lang="ts">
+import {ProcaptchaComponent} from "@prosopo/svelte-procaptcha-wrapper";
+
+const siteKey = "my-site-key";
+const handleVerification = (token: string): void => {
+    console.log('verified', token);
+};
+</script>
+
+<ProcaptchaComponent siteKey="{siteKey}"
+captchaType="pow"
+language="en"
+callback={handleVerification}
+htmlAttributes={{class: "my-app__procaptcha"}} />
+```

src/content/docs/en/framework-integrations/vue-integration.mdx

@@ -0,0 +1,48 @@
+---
+title: "Vue Integration"
+description: "Procaptcha has an official Vue component, that provides seamless integration of Prosopo Procaptcha into any Vue project."
+i18nReady: true
+---
+
+Procaptcha has an official Vue component, that provides seamless integration of Prosopo Procaptcha into any Vue project.
+The integration component supports all the [Procaptcha render options](/en/basics/client-side-rendering/#procaptcha-options).
+
+## 1. Installation
+
+`npm install @prosopo/vue-procaptcha-wrapper`
+
+## 2. Example of usage
+
+### 2.1) Basic setup
+
+```vue
+<script setup lang="ts">
+import {ProcaptchaComponent} from "@prosopo/vue-procaptcha-wrapper";
+</script>
+
+<template>
+<ProcaptchaComponent :siteKey={"my-site-key"}/>
+</template>
+```
+
+### 2.2) Advanced usage
+
+```vue
+// ...
+
+<ProcaptchaComponent
+    :siteKey={"my-site-key"}
+    :captchaType={"image"}
+    :callbacks={{
+        onVerified: (token: string): void => {
+            console.log("verified", token);
+        },
+    }}
+    :htmlAttributes={{
+        className: "my-app__procaptcha",
+        style: {
+            maxWidth: "600px",
+        },
+    }}
+/>;
+```

src/i18n/en/nav.ts

@@ -44,6 +44,27 @@ export default [
 		slug: 'basics/faq',
 		key: 'basics/faq',
 	},
+	{text: 'Framework integrations', header: true, type: 'learn', key: 'framework-integrations'},
+	{
+		text: 'Angular Integration',
+		slug: 'framework-integrations/angular-integration',
+		key: 'framework-integrations/angular-integration',
+	},
+	{
+		text: 'React Integration',
+		slug: 'framework-integrations/react-integration',
+		key: 'framework-integrations/react-integration',
+	},
+	{
+		text: 'Svelte Integration',
+		slug: 'framework-integrations/svelte-integration',
+		key: 'framework-integrations/svelte-integration',
+	},
+	{
+		text: 'Vue Integration',
+		slug: 'framework-integrations/vue-integration',
+		key: 'framework-integrations/vue-integration',
+	},
 	{text: 'Demos', header: true, type: 'learn', key: 'demos'},
 	{
 		text: 'React Frontend Client Example',