feat: guide page

client/src/languages/en.json

@@ -87,5 +87,20 @@
       }
     },
     "more": "More documentation will soon arrive here..."
+  },
+  "guide": {
+    "introduction": {
+      "1": "To access the API, there are a few ways to do it.",
+      "2": "It depends on what you are trying to accomplish with it."
+    },
+    "direct": {
+      "1": "Direct request with",
+      "2": "block"
+    },
+    "fetch": {
+      "1": "Using fetch API",
+      "2": "You can use it, but I personally don't recommend it.",
+      "3": "data is a base64 string"
+    }
   }
 }

client/src/languages/id.json

@@ -87,5 +87,20 @@
       }
     },
     "more": "Dokumentasi lebih lanjut akan segera tiba disini..."
+  },
+  "guide": {
+    "introduction": {
+      "1": "Ada beberapa cara untuk mengakses API.",
+      "2": "Cara tersebut tergantung pada apa yang Bapak ingin capai."
+    },
+    "direct": {
+      "1": "Request langsung dengan blok",
+      "2": ""
+    },
+    "fetch": {
+      "1": "Menggunakan fetch API",
+      "2": "Bapak bisa menggunakannya, tapi saya secara personal tidak merekomendasikannya.",
+      "3": "data adalah string dengan isi base64"
+    }
   }
 }

client/src/routes/guide.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Codeblock from '../components/codeblock.svelte';
   import { _ } from 'svelte-i18n';
   // This page is meant to guide people on how to use the API.
 </script>
@@ -14,8 +15,49 @@
 </svelte:head>
 
 <section>
-  <p class="text-lg py-4">
-    Sorry for the inconvinience. For now, please refer to the <a class="underline" href="/api">API</a> first. I'll work on
-    this page later on.
+  <h1>{$_('navigation.guide')}</h1>
+  <p>
+    {$_('guide.introduction.1')}
+    {$_('guide.introduction.2')}
   </p>
 </section>
+
+<section>
+  <h2>{$_('guide.direct.1')} <code>&lt;img&gt;</code> {$_('guide.direct.2')}</h2>
+  <Codeblock>
+    &lt;img src="https://jokesbapak2.herokuapp.com/v1/" /&gt;
+  </Codeblock>
+</section>
+
+<section>
+  <h2>{$_('guide.fetch.1')}</h2>
+  <p>{$_('guide.fetch.2')}</p>
+  <Codeblock>
+    fetch("https://jokesbapak2.herokuapp.com/v1/")<br>
+    &nbsp;&nbsp;.then(response => response.text())<br>
+    &nbsp;&nbsp;.then(data => console.log(data))<br>
+    <br>
+    // {$_('guide.fetch.3')}<br>
+      <br>
+    &lt;img src="data:image/jpeg;base64, &lcub; data &rcub;" /&gt;
+  </Codeblock>
+</section>
+
+<style>
+  p {
+    @apply text-base py-2 'lg:w-2/3';
+  }
+  h1 {
+    @apply text-4xl font-bold py-2;
+  }
+  h2 {
+    @apply text-2xl font-bold py-2;
+  }
+  a {
+    /* This would probably be an error if you installed WindiCSS extension on VSCode */
+    @apply 'hover:underline' 'dark:text-dodger-200' text-dodger-700;
+  }
+  section {
+    @apply pt-6;
+  }
+</style>

client/src/routes/index.svelte

@@ -27,7 +27,7 @@
     </div>
     <div class="flex-1 md:px-6 w-full">
       <div class="max-w-xs mx-auto">
-        <img src={env.API_ENDPOINT + `/today`} alt="Sample joke" class="py-6 shadow-2xl bg-gray-200 dark:bg-gray-800" />
+        <img src={env.API_ENDPOINT + `/today`} alt="Sample joke" class="py-6 shadow-2xl" />
       </div>
       <Codeblock>$ curl -XGET 'https://jokesbapak2.herokuapp.com/v1/'</Codeblock>
       <p class="text-sm text-center py-4 opacity-70 hover:opacity-100 transition duration-300 ease-in-out">

client/src/routes/why.svelte

@@ -50,7 +50,7 @@
     @apply text-base py-2 'lg:w-2/3';
   }
   h1 {
-    @apply text-3xl 'md:text-3xl' font-bold py-2;
+    @apply text-3xl font-bold py-2;
   }
   a {
     /* This would probably be an error if you installed WindiCSS extension on VSCode */