Refactor reCAPTCHA integration on landing page

Extracted reCAPTCHA site key and script into a dedicated component for better maintainability. Updated landing and waitlist sections to use the new RecaptchaScript and recaptchaSiteKey exports.

Author: EthanThatOneKid

codegen/html.tsx

@@ -1,4 +1,5 @@
 import { LandingPage } from "#/components/landing_page/mod.ts";
+import { CareersPage } from "#/components/careers_page/mod.ts";
 import { aliases, posts, topics } from "#/components/blog_page/data.ts";
 import { toTopicID } from "#/components/blog_page/posts.ts";
 import { BlogPage } from "#/components/blog_page/blog_page.tsx";
@@ -12,6 +13,9 @@ import { renderPostImageResponse } from "#/codegen/og.tsx";
 export async function generateHTML(directory: string) {
   await Deno.writeTextFile(`${directory}/index.html`, <LandingPage />);
 
+  await Deno.mkdir(`${directory}/careers`, { recursive: true });
+  await Deno.writeTextFile(`${directory}/careers/index.html`, <CareersPage />);
+
   await Deno.mkdir(`${directory}/blog`, { recursive: true });
   await Deno.writeTextFile(`${directory}/blog/index.html`, <BlogPage />);
 

components/landing_page/landing_page.tsx

@@ -1,6 +1,7 @@
 import { SCRIPT } from "@fartlabs/htx/script";
 import { featuredPosts } from "#/components/blog_page/data.ts";
 import { Layout } from "#/components/layout.tsx";
+import { RecaptchaScript } from "#/components/recaptcha_script.tsx";
 import { FAQsSection } from "./faqs_section.tsx";
 import { FeaturedBlogPostsSection } from "./featured_blog_posts_section.tsx";
 import { FeaturedGamesSection } from "./featured_games_section.tsx";
@@ -28,7 +29,7 @@ export function LandingPage() {
 const scripts = [
   <SCRIPT src="https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js" />,
   <SCRIPT src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js" />,
-  <SCRIPT src="https://www.google.com/recaptcha/api.js?render=6LfJUC8rAAAAALwhkiZR_6YxdJGF9Q42jOkAXfa1" />,
+  <RecaptchaScript />,
   <ClaimFocusScript />,
 ];
 

components/landing_page/waitlist_section.tsx

@@ -10,6 +10,7 @@ import {
   SPAN,
 } from "@fartlabs/htx";
 import { Link, Section } from "@fartlabs/css";
+import { recaptchaSiteKey } from "#/components/recaptcha_script.tsx";
 import { BorderTube } from "#/components/border-tube.tsx";
 
 const script = `async function submitWaitlistForm(event) {
@@ -28,7 +29,7 @@ const script = `async function submitWaitlistForm(event) {
     grecaptcha.ready(() => {
       grecaptcha.execute(
         // https://github.com/FartLabs/cpu.fartlabs.org/blob/6d1fbcc48efa186db592afb8b207b0ebc06132b4/lib/recaptcha.ts
-        "6LfJUC8rAAAAALwhkiZR_6YxdJGF9Q42jOkAXfa1",
+        "${recaptchaSiteKey}",
         { action: "submit" },
       ).then(resolve, reject);
     });

components/recaptcha_script.tsx

@@ -0,0 +1,11 @@
+import { SCRIPT } from "@fartlabs/htx/script";
+
+export const recaptchaSiteKey = "6LfJUC8rAAAAALwhkiZR_6YxdJGF9Q42jOkAXfa1";
+
+export function RecaptchaScript() {
+  return (
+    <SCRIPT
+      src={`https://www.google.com/recaptcha/api.js?render=${recaptchaSiteKey}`}
+    />
+  );
+}