Skip to content

docs: pair <script type="module"> with <script nomodule> fallback #40

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: pair <script type="module"> with <script nomodule> fallback #40

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
10 changes: 10 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,8 +10,11 @@ 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>
```

The `nomodule` fallback ensures the widget also loads in environments that do not execute ES module scripts (older browsers, some crawlers).

Now, you can either render the Procaptcha widget implicitly or explicitly.

## Implicit Rendering
Expand Down Expand Up @@ -42,6 +45,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 +79,12 @@ 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