fix(challenge): omit solution from client js bundle (#67)

* fix(challenge): omit solution from client js bundle

* build: use backticks instead of quotes for challenge input variable

.gitignore

@@ -35,3 +35,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# generated
+lib/constants.server.tmp.ts
+lib/challenge-input.ts

app/api/challenge/route.ts

@@ -1,4 +1,4 @@
-import { CHALLENGE_SOLUTION } from "@/lib/constants";
+import { CHALLENGE_SOLUTION } from "@/lib/constants.server";
 import type { NextRequest } from "next/server";
 
 export async function GET(request: NextRequest) {

components/challenge-dialog.tsx

@@ -21,27 +21,7 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
-import { CHALLENGE_SOLUTION } from "@/lib/constants";
-
-const caesarShift = (str: string, amount: number): string => {
-  if (amount < 0) {
-    return caesarShift(str, amount + 26);
-  }
-  let output = "";
-  for (let i = 0; i < str.length; i++) {
-    let c = str[i]!;
-    if (c.match(/[a-z]/i)) {
-      const code = str.charCodeAt(i);
-      if (code >= 65 && code <= 90) {
-        c = String.fromCharCode(((code - 65 + amount) % 26) + 65);
-      } else if (code >= 97 && code <= 122) {
-        c = String.fromCharCode(((code - 97 + amount) % 26) + 97);
-      }
-    }
-    output += c;
-  }
-  return output;
-};
+import { CHALLENGE_INPUT } from "@/lib/challenge-input";
 
 export function ChallengeDialog() {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
@@ -90,11 +70,7 @@ export function ChallengeDialog() {
           <div>
             <div>
               <Label htmlFor="challenge-code">Code</Label>
-              <Input
-                id="challenge-code"
-                value={caesarShift(CHALLENGE_SOLUTION, 23)}
-                readOnly
-              />
+              <Input id="challenge-code" value={CHALLENGE_INPUT} readOnly />
             </div>
             <Accordion type="single" collapsible>
               <AccordionItem value="item-1">

lib/caesar.ts

@@ -0,0 +1,19 @@
+export const caesarShift = (str: string, amount: number): string => {
+  if (amount < 0) {
+    return caesarShift(str, amount + 26);
+  }
+  let output = "";
+  for (let i = 0; i < str.length; i++) {
+    let c = str[i]!;
+    if (c.match(/[a-z]/i)) {
+      const code = str.charCodeAt(i);
+      if (code >= 65 && code <= 90) {
+        c = String.fromCharCode(((code - 65 + amount) % 26) + 65);
+      } else if (code >= 97 && code <= 122) {
+        c = String.fromCharCode(((code - 97 + amount) % 26) + 97);
+      }
+    }
+    output += c;
+  }
+  return output;
+};

lib/constants.server.ts

@@ -0,0 +1,13 @@
+import "server-only";
+// NOTE: if the first line of this file is changed, updates to `scripts/build-challenge-input.ts` are required
+import { z } from "zod";
+
+const DEFAULT_CHALLENGE_SOLUTION = `this-is-so-secret`;
+
+const serverEnvironmentSchema = z.object({
+  CHALLENGE_SOLUTION: z.string().min(1).optional(),
+});
+const safeServerEnv = serverEnvironmentSchema.parse(process.env);
+
+export const CHALLENGE_SOLUTION =
+  safeServerEnv.CHALLENGE_SOLUTION ?? DEFAULT_CHALLENGE_SOLUTION;

lib/constants.ts

@@ -48,5 +48,3 @@ const getBaseUrl = () => {
 };
 
 export const BASE_URL = getBaseUrl();
-
-export const CHALLENGE_SOLUTION = `"I'm going on an adventure!" - Bilbo Baggins`;

package.json

@@ -1,8 +1,9 @@
 {
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
-    "build": "next build",
+    "dev": "npm run build:challenge-input && next dev --turbopack",
+    "build": "npm run build:challenge-input && next build",
+    "build:challenge-input": "tsx scripts/build-challenge-input.ts",
     "start": "next start",
     "lint": "next lint",
     "format": "prettier . --write --ignore-unknown",
@@ -27,6 +28,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-icons": "^5.3.0",
+    "server-only": "^0.0.1",
     "sugar-high": "^0.7.5",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
@@ -39,11 +41,13 @@
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.2",
     "autoprefixer": "^10.4.20",
+    "dotenv": "^16.4.7",
     "eslint": "^9.17.0",
     "eslint-config-next": "^15.1.3",
     "postcss": "^8.4.47",
     "prettier": "^3.3.3",
     "tailwindcss": "^3.4.17",
+    "tsx": "^4.19.2",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.18.0"
   },