feat: imgur proxying for blocked countries (#7104)

apps/frontend/src/app.vue

@@ -15,9 +15,12 @@ import { I18nDebugPanel, LoadingBar, NotificationPanel } from '@modrinth/ui'
 
 import AdsConsentNotification from '~/components/ui/AdsConsentNotification.vue'
 import { setupProviders } from '~/providers/setup.ts'
+import { setupUserCountryProvider } from '~/providers/setup/user-country.ts'
 
 import { useAuth } from './composables/auth'
 
+setupUserCountryProvider()
+
 const auth = await useAuth()
 setupProviders(auth)
 </script>

apps/frontend/src/composables/country.ts

@@ -1,6 +1,6 @@
 import type { ISO3166 } from '@modrinth/api-client'
+import { useUserCountry as useInjectedUserCountry } from '@modrinth/ui'
 
-import { useRequestHeaders, useState } from '#imports'
 import { countries, subdivisions } from '~/generated/state.json'
 
 export const useCountries = () => {
@@ -35,38 +35,4 @@ export const useSubdivisions = (countryCode: ComputedRef<string> | Ref<string> |
 	return computed(() => byCountry[unref(code)] ?? [])
 }
 
-export const useUserCountry = () => {
-	const country = useState<string>('userCountry', () => 'US')
-	const fromServer = useState<boolean>('userCountryFromServer', () => false)
-
-	if (import.meta.server) {
-		const headers = useRequestHeaders(['cf-ipcountry', 'accept-language'])
-		const cf = headers['cf-ipcountry']
-		if (cf) {
-			country.value = cf.toUpperCase()
-			fromServer.value = true
-		} else {
-			const al = headers['accept-language'] || ''
-			const tag = al.split(',')[0]
-			const val = tag.split('-')[1]?.toLowerCase()
-			if (val) {
-				country.value = val
-				fromServer.value = true
-			}
-		}
-	}
-
-	if (import.meta.client) {
-		onMounted(() => {
-			if (fromServer.value) return
-			// @ts-expect-error - ignore TS not knowing about navigator.userLanguage
-			const lang = navigator.language || navigator.userLanguage || ''
-			const region = lang.split('-')[1]
-			if (region) {
-				country.value = region.toUpperCase()
-			}
-		})
-	}
-
-	return country
-}
+export const useUserCountry = useInjectedUserCountry

apps/frontend/src/providers/setup/user-country.ts

@@ -0,0 +1,41 @@
+import { provideUserCountry } from '@modrinth/ui'
+import { onMounted } from 'vue'
+
+import { useRequestHeaders, useState } from '#imports'
+
+function getCountryFromLocale(locale: string | undefined) {
+	if (!locale) return undefined
+
+	try {
+		return new Intl.Locale(locale).region?.toUpperCase()
+	} catch {
+		return undefined
+	}
+}
+
+export function setupUserCountryProvider() {
+	const country = useState<string>('userCountry', () => 'US')
+	const fromServer = useState<boolean>('userCountryFromServer', () => false)
+
+	if (import.meta.server) {
+		const headers = useRequestHeaders(['cf-ipcountry', 'accept-language'])
+		const cloudflareCountry = headers['cf-ipcountry']
+		const locale = headers['accept-language']?.split(',')[0]?.split(';')[0]?.trim()
+		const detectedCountry = cloudflareCountry?.toUpperCase() ?? getCountryFromLocale(locale)
+
+		if (detectedCountry) {
+			country.value = detectedCountry
+			fromServer.value = true
+		}
+	}
+
+	if (import.meta.client) {
+		onMounted(() => {
+			if (!fromServer.value) {
+				country.value = getCountryFromLocale(navigator.language) ?? country.value
+			}
+		})
+	}
+
+	return provideUserCountry(country)
+}