[#1] Clearer location

.env.defaults

@@ -21,6 +21,8 @@ LAST_NAME=lastname
 DEFAULT_THEME=light
 
 COUNTRY=US
+STATE=New York
+CITY=Manhattan
 
 SMTP_HOST=smtp.example.com
 SMTP_PORT=465

.env.example

@@ -9,6 +9,8 @@ LAST_NAME=lastname
 DEFAULT_THEME=light
 
 COUNTRY=US
+STATE=New York
+CITY=Manhattan
 
 SMTP_HOST=smtp.example.com
 SMTP_PORT=465

Dockerfile

@@ -62,6 +62,9 @@ FROM api_build as web_build_with_prerender
 
 ARG FIRST_NAME
 ARG LAST_NAME
+ARG COUNTRY
+ARG STATE
+ARG CITY
 ARG DEFAULT_THEME
 ARG API_ADDRESS_PROD
 ARG API_ADDRESS_DEV
@@ -75,6 +78,9 @@ FROM base as web_build
 
 ARG FIRST_NAME
 ARG LAST_NAME
+ARG COUNTRY
+ARG STATE
+ARG CITY
 ARG DEFAULT_THEME
 ARG API_ADDRESS_PROD
 ARG API_ADDRESS_DEV

README.md

@@ -25,6 +25,8 @@ services:
       - FIRST_NAME=first name                               # Your first name
       - LAST_NAME=lastname                                  # Your last name
       - COUNTRY=US                                          # ISO-3166-1 alpha-2 country code, https://en.wikipedia.org/wiki/ISO_3166-1#Codes
+      - STATE=New York                                      # Optional, state or province
+      - CITY=Manhattan                                      # Optional
       - DEFAULT_THEME=light                                 # 'light' or 'dark'
       - SMTP_HOST=smtp.example.com
       - SMTP_PORT=465

api/package.json

@@ -11,7 +11,7 @@
     "@redwoodjs/graphql-server": "8.4.0",
     "@tus/file-store": "^1.4.0",
     "@tus/server": "^1.7.0",
-    "country-flag-icons": "^1.5.13",
+    "countries-list": "^3.1.1",
     "graphql-scalars": "^1.23.0",
     "nodemailer": "^6.9.14"
   },

api/src/server.ts

@@ -16,9 +16,9 @@ enum Theme {
 }
 
 ;(async () => {
-  const { hasFlag } = await import('country-flag-icons')
+  const { countries } = await import('countries-list')
 
-  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'
     )

docker-compose.yml

@@ -13,6 +13,8 @@ services:
       - FIRST_NAME=first name                               # Your first name
       - LAST_NAME=lastname                                  # Your last name
       - COUNTRY=US                                          # ISO-3166-1 alpha-2 country code, https://en.wikipedia.org/wiki/ISO_3166-1#Codes
+      - STATE=New York                                      # Optional, state or province
+      - CITY=Manhattan                                      # Optional
       - DEFAULT_THEME=light                                 # 'light' or 'dark'
       - SMTP_HOST=smtp.example.com
       - SMTP_PORT=465

redwood.toml

@@ -9,7 +9,7 @@
   title = "${FIRST_NAME} ${LAST_NAME}"
   port = 8910
   apiUrl = "/api"
-  includeEnvironmentVariables = ["FIRST_NAME", "LAST_NAME", "COUNTRY", "DEFAULT_THEME", "API_ADDRESS_PROD", "API_ADDRESS_DEV"]
+  includeEnvironmentVariables = ["FIRST_NAME", "LAST_NAME", "COUNTRY", "STATE", "CITY", "DEFAULT_THEME", "API_ADDRESS_PROD", "API_ADDRESS_DEV"]
 [generate]
   tests = false
   stories = false

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>
   </>
 )
 

yarn.lock

@@ -7336,7 +7336,7 @@ __metadata:
     "@tus/file-store": "npm:^1.4.0"
     "@tus/server": "npm:^1.7.0"
     "@types/nodemailer": "npm:^6.4.15"
-    country-flag-icons: "npm:^1.5.13"
+    countries-list: "npm:^3.1.1"
     graphql-scalars: "npm:^1.23.0"
     nodemailer: "npm:^6.9.14"
   languageName: unknown
@@ -9062,10 +9062,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"country-flag-icons@npm:^1.5.13":
+"countries-list@npm:^3.1.1":
-  version: 1.5.13
+  version: 3.1.1
-  resolution: "country-flag-icons@npm:1.5.13"
+  resolution: "countries-list@npm:3.1.1"
-  checksum: 10c0/beee2fe225469507d6c8df90376e031f08a5f103f65cd68e1db0679e82d4ffb2fbb27a3bb19defd112745b5c19d1972df615df21813c8c2074062dd5eb08eabb
+  checksum: 10c0/26734d5927ee9dafa30e4da214b6ab7ecf7cdd93516e5bb077d6fdb1f9f37b4fd8698987b0062c1f3b0c95d18fe947f941ef0ab8c3cc486ef33f1c3dca2678b7
   languageName: node
   linkType: hard
 
@@ -19242,7 +19242,7 @@ __metadata:
     "@uppy/tus": "npm:^4.0.0"
     "@uppy/webcam": "npm:^4.0.1"
     autoprefixer: "npm:^10.4.20"
-    country-flag-icons: "npm:^1.5.13"
+    countries-list: "npm:^3.1.1"
     daisyui: "npm:^4.12.10"
     date-fns: "npm:^4.1.0"
     humanize-string: "npm:2.1.0"