Skip to content

docs: add <script nomodule> iife fallback to recommended snippets #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
forgetso wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs: add <script nomodule> iife fallback to recommended snippets #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/content/docs/de/basics/client-side-rendering.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ sind beide in Ordnung.

```html
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
```

Nun können Sie das Procaptcha Widget entweder implizit oder explizit rendern.
Expand Down Expand Up @@ -42,6 +43,7 @@ gelöst wurde.
<head>
<title>Procaptcha Demo</title>
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
</head>
<body>
<form action="" method="POST">
Expand Down Expand Up @@ -75,6 +77,7 @@ ID `procaptcha-container` erstellt, in dem das Widget gerendert wird.
async
defer
></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
</head>
<body>
<div id="procaptcha-container"></div>
Expand Down
3 changes: 2 additions & 1 deletion src/content/docs/de/basics/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,8 @@ So fügen Sie das Procaptcha Widget hinzu:
<div>

```html
<script src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
```
</div>

Expand Down
6 changes: 4 additions & 2 deletions src/content/docs/de/basics/invisible-captcha.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,8 @@ Fügen Sie die `procaptcha`-Klasse und Datenattribute direkt zu Ihren Formularel
<!DOCTYPE html>
<html>
<head>
<script src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
</head>
<body>
<form>
Expand Down Expand Up @@ -116,7 +117,8 @@ Für mehr Kontrolle über den CAPTCHA-Lebenszyklus:
<!DOCTYPE html>
<html>
<head>
<script src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
</head>
<body>
<form id="demo-form">
Expand Down
1 change: 1 addition & 0 deletions src/content/docs/de/demos/client-example-bundle.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ den `<YOUR SITE KEY HERE>`-Platzhalter durch Ihren eigenen sitekey zu ersetzen.
<link href="//cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css" />
<title>Procaptcha demo: Simple page</title>
<script id="procaptchaScript" type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
</head>
<body>
<div class="mui-container">
Expand Down
3 changes: 3 additions & 0 deletions src/content/docs/en/basics/client-side-rendering.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ are both fine.

```html
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
```

Now, you can either render the Procaptcha widget implicitly or explicitly.
Expand Down Expand Up @@ -42,6 +43,7 @@ is solved.
<head>
<title>Procaptcha Demo</title>
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
</head>
<body>
<form action="" method="POST">
Expand Down Expand Up @@ -75,6 +77,7 @@ id `procaptcha-container` where the widget will be rendered.
async
defer
></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
</head>
<body>
<div id="procaptcha-container"></div>
Expand Down
3 changes: 2 additions & 1 deletion src/content/docs/en/basics/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,8 @@ To add the Procaptcha widget:
<div>

```html
<script src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
```
</div>

Expand Down
6 changes: 4 additions & 2 deletions src/content/docs/en/basics/invisible-captcha.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,8 @@ Add the `procaptcha` class and data attributes directly to your form elements:
<!DOCTYPE html>
<html>
<head>
<script src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
</head>
<body>
<form>
Expand Down Expand Up @@ -116,7 +117,8 @@ For more control over the CAPTCHA lifecycle:
<!DOCTYPE html>
<html>
<head>
<script src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
</head>
<body>
<form id="demo-form">
Expand Down
1 change: 1 addition & 0 deletions src/content/docs/en/demos/client-example-bundle.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ the [Prosopo portal](https://portal.prosopo.io).
<link href="//cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css" />
<title>Procaptcha demo: Simple page</title>
<script id="procaptchaScript" type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
</head>
<body>
<div class="mui-container">
Expand Down
3 changes: 3 additions & 0 deletions src/content/docs/es/basics/client-side-rendering.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ Primero, debe incluir el recurso JavaScript de Procaptcha en algún lugar de su

```html
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
```

Ahora, puede renderizar el widget de Procaptcha de forma implícita o explícita.
Expand All @@ -33,6 +34,7 @@ Aquí hay un ejemplo completo donde Procaptcha se está utilizando para proteger
<head>
<title>Procaptcha Demo</title>
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
</head>
<body>
<form action="" method="POST">
Expand Down Expand Up @@ -64,6 +66,7 @@ El script se carga en el encabezado del documento y se le da el id `procaptcha-s
async
defer
></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
</head>
<body>
<div id="procaptcha-container"></div>
Expand Down
3 changes: 2 additions & 1 deletion src/content/docs/es/basics/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,8 @@ Para agregar el widget de Procaptcha:
<div>

```html
<script src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
```
</div>

Expand Down
6 changes: 4 additions & 2 deletions src/content/docs/es/basics/invisible-captcha.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,8 @@ Agregue la clase `procaptcha` y los atributos de datos directamente a sus elemen
<!DOCTYPE html>
<html>
<head>
<script src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
</head>
<body>
<form>
Expand Down Expand Up @@ -119,7 +120,8 @@ Para más control sobre el ciclo de vida del CAPTCHA:
<!DOCTYPE html>
<html>
<head>
<script src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
</head>
<body>
<form id="demo-form">
Expand Down
1 change: 1 addition & 0 deletions src/content/docs/es/demos/client-example-bundle.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ el [portal de Prosopo](https://portal.prosopo.io).
<link href="//cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css" />
<title>Procaptcha demo: Simple page</title>
<script id="procaptchaScript" type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
</head>
<body>
<div class="mui-container">
Expand Down
3 changes: 3 additions & 0 deletions src/content/docs/fr/basics/client-side-rendering.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ Tout d'abord, vous devez inclure la ressource JavaScript Procaptcha quelque part

```html
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
```

Maintenant, vous pouvez soit rendre le widget Procaptcha implicitement, soit explicitement.
Expand All @@ -33,6 +34,7 @@ Voici un exemple complet où Procaptcha est utilisé pour protéger un formulair
<head>
<title>Procaptcha Demo</title>
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
</head>
<body>
<form action="" method="POST">
Expand Down Expand Up @@ -64,6 +66,7 @@ Le script est chargé dans le head du document et se voit attribuer l'id `procap
async
defer
></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
</head>
<body>
<div id="procaptcha-container"></div>
Expand Down
3 changes: 2 additions & 1 deletion src/content/docs/fr/basics/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,8 @@ Pour ajouter le widget Procaptcha :
<div>

```html
<script src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
```
</div>

Expand Down
6 changes: 4 additions & 2 deletions src/content/docs/fr/basics/invisible-captcha.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,8 @@ Ajoutez la classe `procaptcha` et les attributs de données directement à vos
<!DOCTYPE html>
<html>
<head>
<script src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
</head>
<body>
<form>
Expand Down Expand Up @@ -116,7 +117,8 @@ Pour plus de contrôle sur le cycle de vie du CAPTCHA :
<!DOCTYPE html>
<html>
<head>
<script src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
</head>
<body>
<form id="demo-form">
Expand Down
1 change: 1 addition & 0 deletions src/content/docs/fr/demos/client-example-bundle.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ Enregistrez ce fichier sur votre machine locale et ouvrez-le dans un navigateur
<link href="//cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css" />
<title>Procaptcha demo: Simple page</title>
<script id="procaptchaScript" type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
</head>
<body>
<div class="mui-container">
Expand Down
3 changes: 3 additions & 0 deletions src/content/docs/it/basics/client-side-rendering.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ Prima di tutto, deve includere la risorsa JavaScript Procaptcha da qualche parte

```html
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
```

Ora, può renderizzare il widget Procaptcha implicitamente o esplicitamente.
Expand All @@ -33,6 +34,7 @@ Ecco un esempio completo dove Procaptcha viene utilizzato per proteggere un form
<head>
<title>Procaptcha Demo</title>
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
</head>
<body>
<form action="" method="POST">
Expand Down Expand Up @@ -64,6 +66,7 @@ Lo script viene caricato nell'head del documento e gli viene assegnato l'id `pro
async
defer
></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
</head>
<body>
<div id="procaptcha-container"></div>
Expand Down
3 changes: 2 additions & 1 deletion src/content/docs/it/basics/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,8 @@ Per aggiungere il widget Procaptcha:
<div>

```html
<script src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
```
</div>

Expand Down
6 changes: 4 additions & 2 deletions src/content/docs/it/basics/invisible-captcha.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,8 @@ Aggiunga la classe `procaptcha` e gli attributi data direttamente agli elementi
<!DOCTYPE html>
<html>
<head>
<script src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
</head>
<body>
<form>
Expand Down Expand Up @@ -116,7 +117,8 @@ Per un maggiore controllo sul ciclo di vita del CAPTCHA:
<!DOCTYPE html>
<html>
<head>
<script src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
</head>
<body>
<form id="demo-form">
Expand Down
1 change: 1 addition & 0 deletions src/content/docs/it/demos/client-example-bundle.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ Salvi questo file sulla sua macchina locale e lo apra in un browser per vedere i
<link href="//cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css" />
<title>Procaptcha demo: Simple page</title>
<script id="procaptchaScript" type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
</head>
<body>
<div class="mui-container">
Expand Down
3 changes: 3 additions & 0 deletions src/content/docs/pt-br/basics/client-side-rendering.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ são ambas opções válidas.

```html
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
```

Agora, você pode renderizar o widget Procaptcha implicitamente ou explicitamente.
Expand Down Expand Up @@ -40,6 +41,7 @@ for resolvido.
<head>
<title>Procaptcha Demo</title>
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
</head>
<body>
<form action="" method="POST">
Expand Down Expand Up @@ -73,6 +75,7 @@ id `procaptcha-container` onde o widget será renderizado.
async
defer
></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
</head>
<body>
<div id="procaptcha-container"></div>
Expand Down
3 changes: 2 additions & 1 deletion src/content/docs/pt-br/basics/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,8 @@ Para adicionar o widget Procaptcha:
<div>

```html
<script src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
```
</div>

Expand Down
6 changes: 4 additions & 2 deletions src/content/docs/pt-br/basics/invisible-captcha.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,8 @@ Adicione a classe `procaptcha` e atributos de dados diretamente aos seus element
<!DOCTYPE html>
<html>
<head>
<script src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
</head>
<body>
<form>
Expand Down Expand Up @@ -116,7 +117,8 @@ Para mais controle sobre o ciclo de vida do CAPTCHA:
<!DOCTYPE html>
<html>
<head>
<script src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
</head>
<body>
<form id="demo-form">
Expand Down
1 change: 1 addition & 0 deletions src/content/docs/pt-br/demos/client-example-bundle.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ Salve este arquivo em sua máquina local e abra-o em um navegador para ver o bun
<link href="//cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css" />
<title>Procaptcha demo: Simple page</title>
<script id="procaptchaScript" type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
</head>
<body>
<div class="mui-container">
Expand Down