Add crude song API integration

components/ArtistListItem.vue

@@ -1,19 +1,21 @@
 <script setup lang="ts">
 const { runningOrder, country, artist, title, flag, artistID } = defineProps(['runningOrder', 'country', 'artist', 'title', 'flag', 'artistID'])
+const config = useRuntimeConfig()
+const apiBase = config.public.apiBase
 </script>
 
 <template>
     <NuxtLink :to="`/review/${artistID}`">
     <div class="flex gap-4 border border-slate-200 justify-between overflow-clip items-center rounded-2xl ArtistCard">
-        <h2 class="w-1/4 text-center text-slate-300 text-6xl">{{ runningOrder }}</h2>
+        <h2 class="w-1/4 text-center text-slate-300 text-3xl md:text-6xl">{{ runningOrder }}</h2>
         <div class="flex flex-col w-1/2">
             <h2>{{ country }}</h2>
-            <p class="flex md:gap-2 text-sm flex-col md:flex-row">
-                <span class="font-bold">{{ artist }}</span>
+            <p class="flex md:gap-2 text-xs md:text-lg flex-col md:flex-row">
+                <span class="font-semibold">{{ artist }}</span>
                 <span class="italic">{{ title }}</span>
             </p>
         </div>
-        <img class="w-1/4" src="https://placehold.co/100" alt="{{ flag }}">
+        <img :src="`${apiBase}/static/flags/${flag.toLowerCase()}.webp`" class="w-1/4" />
     </div>
     </NuxtLink>
 </template>

nuxt.config.ts

@@ -15,4 +15,9 @@ export default defineNuxtConfig({
   vite: {
     plugins: [tailwindcss() as any],
   },
+  runtimeConfig: {
+    public: {
+      apiBase: process.env.API_BASE || 'http://localhost:8000',
+    },
+  },
 })

package.json

@@ -21,5 +21,19 @@
     "vue": "^3.5.13",
     "vue-router": "^4.5.1"
   },
-  "packageManager": "[email protected]+sha512.da9dc28cd3ff40d0592188235ab25d3202add8a207afbedc682220e4a0029ffbff4562102b9e6e46b4e3f9e8bd53e6d05de48544b0c57d4b0179e22c76d1199b"
+  "packageManager": "[email protected]+sha512.da9dc28cd3ff40d0592188235ab25d3202add8a207afbedc682220e4a0029ffbff4562102b9e6e46b4e3f9e8bd53e6d05de48544b0c57d4b0179e22c76d1199b",
+  "pnpm": {
+    "ignoredBuiltDependencies": [
+      "@parcel/watcher",
+      "esbuild",
+      "sharp",
+      "unrs-resolver"
+    ],
+    "onlyBuiltDependencies": [
+      "@parcel/watcher",
+      "esbuild",
+      "sharp",
+      "unrs-resolver"
+    ]
+  }
 }

pages/index.vue

@@ -6,7 +6,7 @@ const { data: participants } = await useFetch('/api/participants')
     <div>
         <div class="grid md:grid-cols-2 gap-4">
             <div v-for="participant in participants" :key="participant.id">
-                <ArtistListItem :runningOrder="participant.runningOrder" :country="participant.country" :artist="participant.artist" :title="participant.title" :flag="participant.flag" :artistID="participant.id" />
+                <ArtistListItem :runningOrder="participant.running_order" :country="participant.country_fi" :artist="participant.artist" :title="participant.title" :flag="participant.country_code" :artistID="participant.id" />
             </div>
         </div>
     </div>

server/api/participants.get.ts

@@ -1,30 +1,9 @@
-export default defineEventHandler((event) => {
-    return [
-        {
-            id: 1,
-            year: 2025,
-            country: "Suomi",
-            artist: "Käärijä",
-            title: "Cha Cha Cha",
-            runningOrder: 1,
-            lyricsOriginal: "Original lyrics",
-            lyricsTranslationFI: "Käännös suomeksi",
-            tags: [],
-            img: "https://via.placeholder.com/150",
-            flag: "fin"
-        },
-        {
-            id: 2,
-            year: 2025,
-            country: "Ruotsi",
-            artist: "Loreen",
-            title: "Loreen",
-            runningOrder: 2,
-            lyricsOriginal: "Original lyrics",
-            lyricsTranslationFI: "Käännös suomeksi",
-            tags: [],
-            img: "https://via.placeholder.com/150",
-            flag: "swe"
-        },
-    ]
+export default defineEventHandler(async (event) => {
+    const config = useRuntimeConfig(event)
+    const apiBase = config.public.apiBase
+    
+    const response = await $fetch(`${apiBase}/songs`)
+    
+    return response
+    
 })

server/api/user.get.ts

@@ -0,0 +1,8 @@
+export default defineEventHandler(async (event) => {
+    return {
+        id: 1,
+        avatar: 0,
+        username: 'Kalle',
+        
+    }
+})