wallpapers: be a bit more precise, hide precison on mobile

src/components/wallpaper.astro

@@ -4,6 +4,11 @@ import wallpapers from "../../public/wallpapers.json";
 
 const wallpaper = wallpapers[Math.floor(Math.random() * wallpapers.length)];
 
+// Get first part of location
+const [location1, ...locationRest] = wallpaper.location.split(",");
+
+// Get rest of location
+const location2 = locationRest.join(",");
 ---
 
 <div
@@ -34,7 +39,7 @@ const wallpaper = wallpapers[Math.floor(Math.random() * wallpapers.length)];
                         d="M9.69 18.933l.003.001C9.89 19.02 10 19 10 19s.11.02.308-.066l.002-.001.006-.003.018-.008a5.741 5.741 0 00.281-.14c.186-.096.446-.24.757-.433.62-.384 1.445-.966 2.274-1.765C15.302 14.988 17 12.493 17 9A7 7 0 103 9c0 3.492 1.698 5.988 3.355 7.584a13.731 13.731 0 002.273 1.765 11.842 11.842 0 00.976.544l.062.029.018.008.006.003zM10 11.25a2.25 2.25 0 100-4.5 2.25 2.25 0 000 4.5z"
                         clip-rule="evenodd"></path>
                 </svg>
-                <span class="ml-1 text-sm">{wallpaper.location}</span>
+                <span class="ml-1 text-sm">{location1}<span class="hidden md:inline">,{location2}</span></span>
             </div>
         </div>
 

utils/wallpapers.ts

@@ -38,8 +38,9 @@ for await (const dirEntry of Deno.readDir(imagesPath)) {
     const date = dateObject.toISOString().split("T")[0];
 
     // Http request to get location
+    // Documentation: https://nominatim.org/release-docs/develop/api/Reverse/
     const response = await fetch(
-        `https://nominatim.openstreetmap.org/reverse?format=json&lat=${exif.latitude}&lon=${exif.longitude}&zoom=5`,
+        `https://nominatim.openstreetmap.org/reverse?format=json&lat=${exif.latitude}&lon=${exif.longitude}&zoom=8`,
         { headers: { "User-Agent": "https://philippeloctaux.com" } }
     );
     const data = await response.json();