Add visitor count

src/locales/en.json

@@ -18,6 +18,7 @@
   "home": {
     "welcome": "Welcome to Paimon.moe! 👋",
     "message": "Your best Genshin Impact companion! Help you plan what to farm with ascension calculator, also track your progress with todo and wish counter.",
+    "visitor": "{count} visitors in last 7 days",
     "banner": {
       "featured": [
         "Eula"

src/locales/id.json

@@ -18,6 +18,7 @@
   "home": {
     "welcome": "Selamat Datang di Paimon.moe! 👋",
     "message": "Your best Genshin Impact companion! Membantu kamu merencanakan apa yang harus di farm dengan kalkulator ascension, juga catat progress mu dengan todo dan wish counter.",
+    "visitor": "{count} pengunjung dalam 7 hari terakhir",
     "banner": {
       "summoned": "Pulang",
       "percentage": "dari semua {rarity}",

src/routes/_index/welcome.svelte

@@ -1,8 +1,41 @@
 <script>
+  import { createEventDispatcher, onMount } from 'svelte';
   import { t } from 'svelte-i18n';
+
+  const numberFormat = Intl.NumberFormat('en', {
+    maximumFractionDigits: 1,
+    minimumFractionDigits: 0,
+  });
+
+  const dispatch = createEventDispatcher();
+
+  let count = '...';
+
+  async function getData() {
+    const url = new URL(`${__paimon.env.API_HOST}/visitor`);
+
+    try {
+      const res = await fetch(url, {
+        method: 'GET',
+        headers: { 'Content-Type': 'application/json' },
+      });
+
+      const data = await res.json();
+      count = `${numberFormat.format(data.count / 1000)}k`;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  onMount(async () => {
+    getData();
+    await tick();
+    dispatch('done');
+  });
 </script>
 
 <div class="bg-item rounded-xl p-4">
   <p class="text-white font-bold font-display text-xl">{$t('home.welcome')}</p>
   <p class="text-white mt-2">{$t('home.message')}</p>
+  <p class="text-gray-400 mt-2">{$t('home.visitor', { values: { count } })}</p>
 </div>