feat: changing to new rest countries api

as returned by https://restcountries.com/v3.1/all

16-countries-page-from-api/src/main/resources/public/output.css

@@ -555,6 +555,10 @@ video {
   display: contents;
 }
 
+.h-10 {
+  height: 2.5rem;
+}
+
 .h-14 {
   height: 3.5rem;
 }
@@ -600,8 +604,21 @@ video {
   height: 100vh;
 }
 
-.max-h-60 {
+.max-h-20 {
-  max-height: 15rem;
+  max-height: 5rem;
+}
+
+.max-h-56 {
+  max-height: 14rem;
+}
+
+.min-h-fit {
+  min-height: -moz-fit-content;
+  min-height: fit-content;
+}
+
+.min-h-\[350px\] {
+  min-height: 350px;
 }
 
 .w-16 {
@@ -938,18 +955,6 @@ html {
     grid-column: 1 / -1;
   }
 
-  .md\:mr-0 {
-    margin-right: 0px;
-  }
-
-  .md\:mr-8 {
-    margin-right: 2rem;
-  }
-
-  .md\:mr-10 {
-    margin-right: 2.5rem;
-  }
-
   .md\:flex {
     display: flex;
   }
@@ -996,10 +1001,6 @@ html {
     min-width: max-content;
   }
 
-  .md\:max-w-full {
-    max-width: 100%;
-  }
-
   .md\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -1052,18 +1053,6 @@ html {
     padding-right: 0.5rem;
   }
 
-  .md\:pr-8 {
-    padding-right: 2rem;
-  }
-
-  .md\:pr-0 {
-    padding-right: 0px;
-  }
-
-  .md\:pr-10 {
-    padding-right: 2.5rem;
-  }
-
   .md\:text-2xl {
     font-size: 1.5rem;
     line-height: 2rem;

16-countries-page-from-api/src/main/resources/templates/country.html

@@ -90,7 +90,7 @@
       <img
         src="https://flagcdn.com/de.svg"
         th:src="${country.flag}"
-        th:alt="|flag of ${country.name}|"
+        th:alt="|flag of ${country.nameView}|"
         class="w-full md:w-10/12"
       />
       <section
@@ -99,7 +99,7 @@
       >
         <h1
           class="text-2xl font-bold pt-2 -mb-4 md:col-span-full md:text-3xl"
-          th:text="${country.name}"
+          th:text="${country.nameView}"
         >
           Germany
         </h1>
@@ -126,7 +126,7 @@
           </div>
           <div class="flex">
             <dt class="font-bold mr-2">Capital:</dt>
-            <dd th:text="${country.capital}">Berlin</dd>
+            <dd th:text="${country.capitalView}">Berlin</dd>
           </div>
         </dl>
 
@@ -167,7 +167,10 @@
         </section>
       </section>
     </main>
-    <script th:replace="~{index :: script#dark-mode-scripts}" type="text/javascript">
+    <script
+      th:replace="~{index :: script#dark-mode-scripts}"
+      type="text/javascript"
+    >
       document.addEventListener("DOMContentLoaded", function () {
         const darkMode = localStorage.getItem("darkMode");
         console.log("yoyo");

16-countries-page-from-api/src/main/resources/templates/index.html

@@ -83,16 +83,16 @@
           <input
             class="appearance-none flex-grow focus:outline-none mr-2 dark:bg-dark-blue dark:placeholder:text-white"
             type="text"
-            id="country-name-input"
+            id="country.nameView-input"
             name="countryName"
-            list="country-names-list"
+            list="country.nameViews-list"
             placeholder="Search for a country..."
           />
         </div>
-        <datalist id="country-names-list">
+        <datalist id="country.nameViews-list">
           <option
             th:each="country : ${allCountriesList}"
-            th:value="${country.name}"
+            th:value="${country.nameView}"
             value=""
           ></option>
         </datalist>
@@ -137,21 +137,21 @@
         th:each="country : ${countriesList}"
         id="germany"
         th:id="${country.alpha3Code}"
-        class="bg-white h-[350px] w-[275px] flex flex-col rounded-lg shadow-lg dark:bg-dark-blue"
+        class="bg-white min-h-[350px] w-[275px] flex flex-col rounded-lg shadow-lg dark:bg-dark-blue"
       >
         <a
           href="country.html"
-          th:href="@{~/country(countryName=${country.name})}"
+          th:href="@{~/country(countryName=${country.nameView})}"
         >
           <img
             src="https://flagcdn.com/de.svg"
             th:src="${country.flag}"
             alt="flag of Germany"
-            th:alt="|flag of ${country.name}|"
+            th:alt="|flag of ${country.nameView}|"
-            class="rounded-t-lg max-h-60"
+            class="rounded-t-lg max-h-56 w-full"
           />
-          <section class="p-8 space-y-3">
+          <section class="p-8 space-y-3 min-h-fit">
-            <h2 class="text-2xl font-bold" th:text="${country.name}">
+            <h2 class="text-2xl font-bold" th:text="${country.nameView}">
               Germany
             </h2>
             <dl class="space-y-1">
@@ -169,7 +169,7 @@
               </div>
               <div class="flex">
                 <dt class="font-bold mr-2">Capital:</dt>
-                <dd th:text="${country.capital}">Berlin</dd>
+                <dd th:text="${country.capitalView}">Berlin</dd>
               </div>
             </dl>
           </section>
@@ -255,7 +255,10 @@
         .getElementById("toggleDarkMode")
         .addEventListener("click", function () {
           document.documentElement.classList.toggle("dark");
-          localStorage.setItem("darkMode", document.documentElement.classList.contains("dark"))
+          localStorage.setItem(
+            "darkMode",
+            document.documentElement.classList.contains("dark")
+          );
         });
     </script>
   </body>

16-countries-page-from-api/src/main/scala/example/Country.scala

@@ -4,29 +4,45 @@ import upickle.default._
 import scala.jdk.CollectionConverters._
 
 final case class Country(
-  name: String,
+    name: Name,
-  alpha3Code: String,
+    cca3: String,
-  nativeName: String = "",
+    population: Int,
-  population: Int,
+    region: String,
-  region: String,
+    subregion: String = "",
-  subregion: String,
+    flags: Flags,
-  flag: String,
+    capital: List[String] = List.empty,
-  capital: String = "",
+    tld: Option[String] = None, // maybe optional?
-  topLevelDomain: Option[String], // maybe optional?
+    currencies: Map[String, Currency] = Map.empty,
-  currencies: List[Currency] = List.empty,
+    languages: Map[String, String] = Map.empty,
-  languages: List[Language],
+    borders: List[String] = List.empty
-  borders: List[String] = List.empty,
 ) derives ReadWriter {
-  def currenciesView = currencies.map(_.name).asJava
+  def currenciesView = currencies.values.map(_.name).toList.asJava
-  def languagesView = languages.map(_.name).asJava
+  def languagesView = languages.values.toList.asJava
+  def nameView = name.common
+  def capitalView = capital.headOption.getOrElse("")
+  def nativeName = name.nativeName.headOption.map(_._2.common).getOrElse("")
+  def topLevelDomain = tld
+  def alpha3Code = cca3
+  def flag = flags.svg
+}
+
+final case class Name(
+    common: String,
+    nativeName: Map[String, Name.Native] = Map.empty
+) derives ReadWriter
+object Name {
+  final case class Native(
+      common: String
+  ) derives ReadWriter
 }
 
 final case class Currency(
-  code: String,
+    name: String,
-  name: String
+    symbol: String = ""
 ) derives ReadWriter
 
-final case class Language(
+final case class Flags(
-  name: String,
+    png: String,
-  nativeName: String = ""
+    svg: String,
+    alt: String = ""
 ) derives ReadWriter

16-countries-page-from-api/src/main/scala/example/Main.scala

@@ -27,7 +27,7 @@ object MinimalApplication extends cask.Routes{
 
   def loadCountries() = {
     val countries: List[Country] = upickle.default.read[List[Country]](
-      scala.io.Source.fromResource("temporary/data.json").getLines().mkString,
+      scala.io.Source.fromResource("temporary/all.json").getLines().mkString,
       true
     )
     countries

16-countries-page-from-api/src/main/scala/example/Routes.scala

@@ -106,12 +106,12 @@ case class Routes(countries: List[Country])(implicit
   @cask.get("/country")
   def getCountryPage(countryName: String) = {
     val context = new Context()
-    countries.find(_.name == countryName) match {
+    countries.find(_.name.common == countryName) match {
       case Some(selectedCountry) =>
         context.setVariable("country", selectedCountry)
         val borderCountries = countries
           .filter(c => selectedCountry.borders.contains(c.alpha3Code))
-          .map(_.name)
+          .map(_.name.common)
           .sortBy(_.length())
           .asJava