insult whatever country you want

src/actions/hello/ai.ts

@@ -23,7 +23,6 @@ export async function promptAI(prompt: string): Promise<string> {
         ],
         max_tokens: 100,
       }),
-      //signal: AbortSignal.timeout(1000),
     });
 
     if (!response.ok) {

src/actions/hello/country-list.ts

@@ -0,0 +1,197 @@
+export const COUNTRIES = [
+  "Afghanistan",
+  "Albania",
+  "Algeria",
+  "Andorra",
+  "Angola",
+  "Antigua and Barbuda",
+  "Argentina",
+  "Armenia",
+  "Australia",
+  "Austria",
+  "Azerbaijan",
+  "Bahamas",
+  "Bahrain",
+  "Bangladesh",
+  "Barbados",
+  "Belarus",
+  "Belgium",
+  "Belize",
+  "Benin",
+  "Bhutan",
+  "Bolivia",
+  "Bosnia and Herzegovina",
+  "Botswana",
+  "Brazil",
+  "Brunei",
+  "Bulgaria",
+  "Burkina Faso",
+  "Burundi",
+  "Cabo Verde",
+  "Cambodia",
+  "Cameroon",
+  "Canada",
+  "Central African Republic",
+  "Chad",
+  "Chile",
+  "China",
+  "Colombia",
+  "Comoros",
+  "Congo (Congo-Brazzaville)",
+  "Costa Rica",
+  "Croatia",
+  "Cuba",
+  "Cyprus",
+  "Czechia",
+  "Denmark",
+  "Djibouti",
+  "Dominica",
+  "Dominican Republic",
+  "East Timor (Timor-Leste)",
+  "Ecuador",
+  "Egypt",
+  "El Salvador",
+  "Equatorial Guinea",
+  "Eritrea",
+  "Estonia",
+  "Eswatini",
+  "Ethiopia",
+  "Fiji",
+  "Finland",
+  "France",
+  "Gabon",
+  "Gambia",
+  "Georgia",
+  "Germany",
+  "Ghana",
+  "Greece",
+  "Grenada",
+  "Guatemala",
+  "Guinea",
+  "Guinea-Bissau",
+  "Guyana",
+  "Haiti",
+  "Honduras",
+  "Hungary",
+  "Iceland",
+  "India",
+  "Indonesia",
+  "Iran",
+  "Iraq",
+  "Ireland",
+  "Israel",
+  "Italy",
+  "Jamaica",
+  "Japan",
+  "Jordan",
+  "Kazakhstan",
+  "Kenya",
+  "Kiribati",
+  "Korea, North",
+  "Korea, South",
+  "Kosovo",
+  "Kuwait",
+  "Kyrgyzstan",
+  "Laos",
+  "Latvia",
+  "Lebanon",
+  "Lesotho",
+  "Liberia",
+  "Libya",
+  "Liechtenstein",
+  "Lithuania",
+  "Luxembourg",
+  "Madagascar",
+  "Malawi",
+  "Malaysia",
+  "Maldives",
+  "Mali",
+  "Malta",
+  "Marshall Islands",
+  "Mauritania",
+  "Mauritius",
+  "Mexico",
+  "Micronesia",
+  "Moldova",
+  "Monaco",
+  "Mongolia",
+  "Montenegro",
+  "Morocco",
+  "Mozambique",
+  "Myanmar",
+  "Namibia",
+  "Nauru",
+  "Nepal",
+  "Netherlands",
+  "New Zealand",
+  "Nicaragua",
+  "Niger",
+  "Nigeria",
+  "North Macedonia",
+  "Norway",
+  "Oman",
+  "Pakistan",
+  "Palau",
+  "Palestine",
+  "Panama",
+  "Papua New Guinea",
+  "Paraguay",
+  "Peru",
+  "Philippines",
+  "Poland",
+  "Portugal",
+  "Qatar",
+  "Romania",
+  "Russia",
+  "Rwanda",
+  "Saint Kitts and Nevis",
+  "Saint Lucia",
+  "Saint Vincent and the Grenadines",
+  "Samoa",
+  "San Marino",
+  "Sao Tome and Principe",
+  "Saudi Arabia",
+  "Senegal",
+  "Serbia",
+  "Seychelles",
+  "Sierra Leone",
+  "Singapore",
+  "Slovakia",
+  "Slovenia",
+  "Solomon Islands",
+  "Somalia",
+  "South Africa",
+  "South Sudan",
+  "Spain",
+  "Sri Lanka",
+  "Sudan",
+  "Suriname",
+  "Sweden",
+  "Switzerland",
+  "Syria",
+  "Taiwan",
+  "Tajikistan",
+  "Tanzania",
+  "Thailand",
+  "Togo",
+  "Tonga",
+  "Trinidad and Tobago",
+  "Tunisia",
+  "Turkey",
+  "Turkmenistan",
+  "Tuvalu",
+  "Uganda",
+  "Ukraine",
+  "United Arab Emirates",
+  "United Kingdom",
+  "United States",
+  "Uruguay",
+  "Uzbekistan",
+  "Vanuatu",
+  "Vatican City",
+  "Venezuela",
+  "Vietnam",
+  "Yemen",
+  "Zambia",
+  "Zimbabwe",
+] as const;

src/actions/hello/country.ts

@@ -1,7 +1,8 @@
 export async function getCountryFromHeaders(
   headers: Headers,
-): Promise<void | string> {
+): Promise<undefined | string> {
   const ip = headers.get("x-forwarded-for")?.split(",")[0].trim();
+  if (!ip) return "Iceland";
   if (!ip) return;
 
   try {

src/actions/hello/index.ts

@@ -2,14 +2,20 @@ import { defineAction } from "astro:actions";
 import { z } from "astro:schema";
 import { getCountryFromHeaders } from "./country";
 import { greetingPrompt, promptAI } from "./ai";
+import { COUNTRIES } from "./country-list";
 
 export const hello = {
   getGreeting: defineAction({
     input: z.object({
-      name: z.string(),
+      country: z.enum(COUNTRIES).optional(),
     }),
     handler: async (input, ctx) => {
-      const country = await getCountryFromHeaders(ctx.request.headers);
+      const country = input.country;
+      // if (country === undefined)
+      //   country = (await getCountryFromHeaders(ctx.request.headers)) as
+      //     | (typeof COUNTRIES)[number]
+      //     | undefined;
+
       // https://discord.com/channels/830184174198718474/1295282295510405202
       // TODO: Revisit this. Can't find the IP in the Astro request
       if (!country)
@@ -19,4 +25,13 @@ export const hello = {
       return `Something went wrong`;
     },
   }),
+  getCountry: defineAction({
+    handler: async (input, ctx) => {
+      try {
+        return getCountryFromHeaders(ctx.request.headers);
+      } catch (err) {
+        return undefined;
+      }
+    },
+  }),
 };

src/pages/insult-my-country.astro

@@ -1,6 +1,12 @@
 ---
+import { actions } from "astro:actions";
+import { COUNTRIES } from "~/actions/hello/country-list";
 import Layout from "~/layouts/Layout.astro";
 import PageContainer from "~/layouts/page-container.astro";
+const prerender = false;
+
+const { data } = await Astro.callAction(actions.hello.getCountry, {});
+const defaultCountry = data ?? "";
 ---
 
 <Layout title="Insult my country">
@@ -11,10 +17,33 @@ import PageContainer from "~/layouts/page-container.astro";
       <h1>Insult my country</h1>
       <p>This is a silly parody experiment. Don't take it seriously.</p>
       <div class="mt-4">
-        <button
-          class="rounded-full bg-andri py-1 px-4 font-medium text-white disabled:bg-gray-100 disabled:text-gray-300"
-          >Bring it!</button
+        <select
+          id="country"
+          class="w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-andri focus:border-andri"
         >
+          <option aria-placeholder="No country detected, select your own"
+          ></option>
+          {
+            COUNTRIES.map((country) => (
+              <option
+                selected={
+                  country.toLowerCase() === defaultCountry.toLowerCase()
+                    ? true
+                    : false
+                }
+                value={country}
+              >
+                {country}
+              </option>
+            ))
+          }
+        </select>
+        <div class="mt-4">
+          <button
+            class="rounded-full bg-andri py-1 px-4 font-medium text-white disabled:bg-gray-100 disabled:text-gray-300"
+            >Bring it!</button
+          >
+        </div>
       </div>
       <div
         id="results"
@@ -27,18 +56,25 @@ import PageContainer from "~/layouts/page-container.astro";
 
 <script>
   import { actions } from "astro:actions";
+  import { COUNTRIES } from "~/actions/hello/country-list";
 
   const button = document.querySelector("button");
   const results = document.querySelector("#results");
+  const countryEl = document.querySelector("#country") as HTMLSelectElement;
+  const country = countryEl
+    ? (countryEl.value as (typeof COUNTRIES)[number])
+    : undefined;
 
   button?.addEventListener("click", async () => {
     if (!button || !results) return; // No reason to continue
     button.setAttribute("disabled", "disabled");
     results.classList.add("hidden");
     // Show alert pop-up with greeting from action
     const { data, error } = await actions.hello.getGreeting({
-      name: "Houston",
+      country,
     });
+    button.removeAttribute("disabled");
+
     if (error || data === undefined) {
       results.innerHTML = "💩";
       results.classList.remove("hidden");