mirror of
https://github.com/prdlk/dotfiles.git
synced 2026-11-05 12:17:36 +00:00
115 lines
3.8 KiB
Markdown
115 lines
3.8 KiB
Markdown
# Hugo
|
|
|
|
For Hugo static sites. The widget renders on any page that includes the partial; siteverify happens at whatever backend handles your form submissions (a Cloudflare Pages Function, a Worker, an external API, or a form host with a server-side hook).
|
|
|
|
```html title="layouts/partials/turnstile.html"
|
|
<script
|
|
src="https://challenges.cloudflare.com/turnstile/v0/api.js"
|
|
async
|
|
defer
|
|
></script>
|
|
|
|
<form action="{{ .Site.Params.turnstileFormEndpoint }}" method="POST">
|
|
<input name="email" type="email" required />
|
|
<div
|
|
class="cf-turnstile"
|
|
data-sitekey="{{ .Site.Params.turnstileSitekey }}"
|
|
data-action="subscribe"
|
|
></div>
|
|
<button type="submit">Subscribe</button>
|
|
</form>
|
|
```
|
|
|
|
Add the params to your site config:
|
|
|
|
```toml title="hugo.toml"
|
|
[params]
|
|
turnstileSitekey = "YOUR_SITEKEY"
|
|
turnstileFormEndpoint = "/api/subscribe" # path to your existing form handler
|
|
```
|
|
|
|
Reference the partial from any layout or content file:
|
|
|
|
```text
|
|
{{ partial "turnstile.html" . }}
|
|
```
|
|
|
|
## Backend (where siteverify lives)
|
|
|
|
Hugo doesn't host server-side code, so the form endpoint must live elsewhere. Two common setups:
|
|
|
|
**Cloudflare Pages Function** (`functions/api/subscribe.js`):
|
|
|
|
```js
|
|
export async function onRequestPost({ request, env }) {
|
|
const form = await request.formData();
|
|
const token = form.get("cf-turnstile-response");
|
|
|
|
const expectedHostnames = new Set(
|
|
(env.TURNSTILE_HOSTNAMES ?? "")
|
|
.split(",")
|
|
.map((h) => h.trim())
|
|
.filter(Boolean),
|
|
);
|
|
if (expectedHostnames.size === 0) {
|
|
return new Response("forbidden", { status: 403 });
|
|
}
|
|
|
|
const r = await fetch("https://challenges.cloudflare.com/turnstile/v0/siteverify", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
|
body: new URLSearchParams({
|
|
secret: env.TURNSTILE_SECRET,
|
|
response: token,
|
|
remoteip: request.headers.get("CF-Connecting-IP"),
|
|
}),
|
|
});
|
|
const result = await r.json();
|
|
if (
|
|
r.ok !== true ||
|
|
result.success !== true ||
|
|
result.action !== "subscribe" ||
|
|
!expectedHostnames.has(result.hostname)
|
|
) {
|
|
return new Response("forbidden", { status: 403 });
|
|
}
|
|
|
|
// process subscribe
|
|
return new Response("ok");
|
|
}
|
|
```
|
|
|
|
`subscribe` is the stable action for this surface. Preserve an existing custom migration action and compare the returned action to the same value. Siteverify is mandatory for every widget mode, including pre-clearance. Set `TURNSTILE_HOSTNAMES` to the deployment-specific frontend hostnames; a production value must not include `localhost` or `127.0.0.1`.
|
|
|
|
After the user approves a canonical absolute `WRANGLER_BIN` outside the project, set the secret with `(set +x; printf '%s' "$WIDGET_SECRET" | "$WRANGLER_BIN" pages secret put TURNSTILE_SECRET)` (or use the dashboard's Pages → your project → Settings → Environment variables → Add secret).
|
|
|
|
**External backend**: any Node/Ruby/Python/Go handler can do the same call. See the [vanilla-html reference](./vanilla-html.md) for non-Cloudflare-specific snippets.
|
|
|
|
## Variant: shortcode for content files
|
|
|
|
If you want to drop the widget into Markdown content (not just layouts), create a shortcode:
|
|
|
|
```html title="layouts/shortcodes/turnstile-form.html"
|
|
{{ partial "turnstile.html" . }}
|
|
```
|
|
|
|
Use in content:
|
|
|
|
```markdown title="content/contact.md"
|
|
---
|
|
title: Contact
|
|
---
|
|
|
|
Contact us:
|
|
|
|
{{< turnstile-form >}}
|
|
```
|
|
|
|
## Substitutions
|
|
|
|
| Placeholder | Replace with |
|
|
| ------------------------ | -------------------------------------------------------------------- |
|
|
| `YOUR_SITEKEY` | The widget site key from Step 8 |
|
|
| `turnstileFormEndpoint` | The path or URL to your form handler (Pages Function, Worker, etc.) |
|
|
| `TURNSTILE_SECRET` | Env-var name in your backend. Value is the secret captured in Step 8.|
|