fix: inject turnstile sitekey into website during build

ibiixie · ibiixie · commit a701810daebd · 2025-08-05T22:18:53.000+02:00
Requires the CF_SITEKEY environment variable
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 .vscode
 **/secrets/**
 .env
+env.hcl
diff --git a/compose.dev.yaml b/compose.dev.yaml
@@ -1,7 +1,9 @@
 services:
   biixie_frontend:
+    pull_policy: never
     restart: no
   biixie_backend:
+    pull_policy: never
     restart: no
     environment:
       DEBUG: true
diff --git a/docker-bake.hcl b/docker-bake.hcl
@@ -1,3 +1,12 @@
+variable "CF_SITEKEY" {
+  default = "$CF_SITEKEY"
+
+  validation {
+    condition = CF_SITEKEY != ""
+    error_message = "CF_SITEKEY environment variable not set"
+  }
+}
+
 group "default" {
   targets = [ "frontend", "backend" ]
 }
@@ -6,6 +15,10 @@ target "frontend" {
   tags = [ "biixie/biixie.com:frontend-latest" ]
   content = "."
   dockerfile = "frontend/Dockerfile"
+
+  args = {
+    CF_SITEKEY = CF_SITEKEY
+  }
 }
 
 target "backend" {
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
@@ -25,6 +25,8 @@ RUN --mount=type=secret,id=GRAPHQL_GITHUB_API_TOKEN,env=GITHUB_TOKEN \
 RUN cat ./projects.json
 
 # Build website
+ARG CF_SITEKEY # Used to inject the Turnstile sitekey into the site.
+ENV CF_SITEKEY=$CF_SITEKEY
 RUN zola build
 
 # Serve the built website.
diff --git a/frontend/static/js/turnstile.js b/frontend/static/js/turnstile.js
@@ -2,12 +2,14 @@ let cfResponseToken = null;
 
 function verifyAction(action) {
   if (cfResponseToken == null) {
+    let cfSiteKey = document.documentElement.getAttribute("data-cf-sitekey");
+
     // Turnstile has not yet rendered.
     let turnstileDialog = document.getElementById("cf-turnstile-dialog");
     turnstileDialog.showModal();
 
     turnstile.render("#cf-turnstile-widget", {
-      sitekey: "0x4AAAAAAA5Z7Cr4D0kvesdz",
+      sitekey: cfSiteKey,
       callback: async function(token) {
         cfResponseToken = token;
 
diff --git a/frontend/templates/base.html b/frontend/templates/base.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <!-- force dark-mode on non-JS visitors cus why not >:3 -->
-<html lang="en" data-theme="dark">
+<html lang="en" data-theme="dark" data-cf-sitekey={{  get_env(name="CF_SITEKEY" ) }}>
   <head>
     <!-- This looks awful -->
     {% if section.title %}

-Original file line number
+Diff line change
@@ @@ -1,3 +1,4 @@ @@
 .vscode
 **/secrets/**
 .env
 +env.hcl