[#1] Clearer location

web/package.json

@@ -35,7 +35,7 @@
     "@uppy/react": "^4.0.1",
     "@uppy/tus": "^4.0.0",
     "@uppy/webcam": "^4.0.1",
-    "country-flag-icons": "^1.5.13",
+    "countries-list": "^3.1.1",
     "date-fns": "^4.1.0",
     "humanize-string": "2.1.0",
     "react": "18.3.1",

web/src/entry.client.tsx

@@ -1,4 +1,4 @@
-import { hasFlag } from 'country-flag-icons'
+import { countries } from 'countries-list'
 import { hydrateRoot, createRoot } from 'react-dom/client'
 
 import App from 'src/App'
@@ -21,7 +21,7 @@ if (!redwoodAppElement)
       "exists in your 'web/src/index.html' file."
   )
 
-if (!hasFlag(process.env.COUNTRY))
+if (!Object.keys(countries).includes(process.env.COUNTRY))
   throw new Error(
     'Invalid COUNTRY environment variable, please select a valid ISO-3166-1 alpha-2 country code\n See https://en.wikipedia.org/wiki/ISO_3166-1#Codes'
   )

web/src/pages/HomePage/HomePage.tsx

@@ -1,6 +1,7 @@
 import { mdiCompass, mdiContacts } from '@mdi/js'
 import Icon from '@mdi/react'
-import getUnicodeFlagIcon from 'country-flag-icons/unicode'
+import type { TCountryCode } from 'countries-list'
+import { getCountryData } from 'countries-list'
 
 import { Link, routes } from '@redwoodjs/router'
 import { Metadata } from '@redwoodjs/web'
@@ -22,8 +23,18 @@ const HomePage = () => (
 
     <div className="hero min-h-[calc(100vh-6rem)]">
       <div className="hero-content flex flex-col gap-8">
-        <div className="text-center">
+        <div className="flex flex-col text-center gap-8">
           <TitlesCell className="text-primary" />
+          <h3 className="text-xl">
+            📍{' '}
+            {[
+              process.env.CITY,
+              process.env.STATE,
+              getCountryData(process.env.COUNTRY as TCountryCode).name,
+            ]
+              .filter((s) => s && s !== '')
+              .join(', ')}
+          </h3>
         </div>
         <div className="flex gap-2">
           <Link
@@ -53,11 +64,6 @@ const HomePage = () => (
         {getLogoComponent('gitea')}
       </a>
     </div>
-    <div className="fixed bottom-2 right-2 z-10">
-      <p className="btn btn-square text-xl">
-        {getUnicodeFlagIcon(process.env.COUNTRY)}
-      </p>
-    </div>
   </>
 )