feat: jokes number

client/package.json

@@ -42,6 +42,7 @@
     "@fontsource/rubik": "4.5.0",
     "@sentry/browser": "6.9.0",
     "dotenv": "10.0.0",
+    "ohmyfetch": "^0.2.0",
     "svelte-i18n": "3.3.9"
   }
 }

client/src/languages/en.json

@@ -2,6 +2,7 @@
   "meta": {
     "title": "Jokesbapak2",
     "tagline": "Largest collection of Indonesian dad jokes",
+    "tagline-total": "Largest collection ({total}!) of Indonesian dad jokes",
     "explanation": "Instead of returning a joke in JSON format like others normally would, we return it on images!"
   },
   "error": {

client/src/languages/id.json

@@ -2,6 +2,7 @@
   "meta": {
     "title": "Jokesbapak2",
     "tagline": "Koleksi jokes bapak2 terbesar",
+    "tagline-total": "Koleksi jokes bapak2 terbesar ({total}!)",
     "explanation": "Daripada mengirimkan candaan dalam format JSON seperti yang lainnya, kami mengirimkan gambar!"
   },
   "error": {

client/src/routes/index.svelte

@@ -1,8 +1,25 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
   import { _ } from 'svelte-i18n';
+  import { $fetch as omf } from 'ohmyfetch';
   import { goto } from '$app/navigation';
   import env from '$lib/env';
   import Codeblock from '../components/codeblock.svelte';
+
+  interface TotalResponse {
+    message: string;
+  }
+
+  let total;
+
+  onMount(async () => {
+    const totalJokes = async (): Promise<string> => {
+      const response = await omf<TotalResponse>(`${env.API_ENDPOINT}/total`);
+      return response.message;
+    };
+
+    total = await totalJokes();
+  });
 </script>
 
 <svelte:head>
@@ -19,7 +36,7 @@
 <section>
   <div class="flex flex-col lg:flex-row items-center py-8">
     <div class="flex-1">
-      <h1 class="text-5xl md:text-6xl font-bold py-2">{$_('meta.tagline')}</h1>
+      <h1 class="text-5xl md:text-6xl font-bold py-2">{$_('meta.tagline-total', { values: { total } })}</h1>
       <p class="text-base py-4 md:w-2/3">{$_('meta.explanation')}</p>
     </div>
     <div class="flex-1 md:px-6 w-full">

client/yarn.lock

@@ -672,6 +672,11 @@ deepmerge@^4.2.2:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
   integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
 
+destr@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/destr/-/destr-1.1.0.tgz#2da6add6ba71e04fd0abfb1e642d4f6763235095"
+  integrity sha512-Ev/sqS5AzzDwlpor/5wFCDu0dYMQu/0x2D6XfAsQ0E7uQmamIgYJ6Dppo2T2EOFVkeVYWjc+PCLKaqZZ57qmLg==
+
 detect-indent@^6.0.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.1.0.tgz#592485ebbbf6b3b1ab2be175c8393d04ca0d57e6"
@@ -1329,6 +1334,11 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
+node-fetch@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
+  integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
+
 node-releases@^1.1.71:
   version "1.1.73"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.73.tgz#dd4e81ddd5277ff846b80b52bb40c49edf7a7b20"
@@ -1351,6 +1361,15 @@ nth-check@^2.0.0:
   dependencies:
     boolbase "^1.0.0"
 
+ohmyfetch@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/ohmyfetch/-/ohmyfetch-0.2.0.tgz#09c03a6c107ddfe6a75c83f0a9cdaa59fb31e54b"
+  integrity sha512-tbrMD8LauY8xivHmDJItpfth/caVDHmDljeZE+4DzA2sbSp72Vzb//NJD1LtAm3pEnK5hY48i4V/zcraeiS3FQ==
+  dependencies:
+    destr "^1.1.0"
+    node-fetch "^2.6.1"
+    ufo "^0.6.10"
+
 once@^1.3.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@@ -2013,6 +2032,11 @@ typescript@*, typescript@4.3.5:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4"
   integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==
 
+ufo@^0.6.10:
+  version "0.6.11"
+  resolved "https://registry.yarnpkg.com/ufo/-/ufo-0.6.11.tgz#69311ed4abc8ab671c83754b79ce0d396fea1075"
+  integrity sha512-Yu7TJThwlr23peOkX/+hm6LfkyBs+eDWV880468PTrjKBKjjsNWFFwIuOqDfmXngRo9TZ4+twFYueRH0OLl0Gw==
+
 uniqs@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"