From 683e39edcbc158e4c6bbf517a9a8d9ee7784d92a Mon Sep 17 00:00:00 2001
From: Reinaldy Rafli <aldy505@tutanota.com>
Date: Fri, 16 Jul 2021 15:59:36 +0700
Subject: [PATCH] feat: guide page

---
 client/src/languages/en.json   | 15 +++++++++++
 client/src/languages/id.json   | 15 +++++++++++
 client/src/routes/guide.svelte | 48 +++++++++++++++++++++++++++++++---
 client/src/routes/index.svelte |  2 +-
 client/src/routes/why.svelte   |  2 +-
 5 files changed, 77 insertions(+), 5 deletions(-)

diff --git a/client/src/languages/en.json b/client/src/languages/en.json
index c83e506..6d574fb 100644
--- a/client/src/languages/en.json
+++ b/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"
+    }
   }
 }
diff --git a/client/src/languages/id.json b/client/src/languages/id.json
index 8f11c91..0742ecf 100644
--- a/client/src/languages/id.json
+++ b/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"
+    }
   }
 }
diff --git a/client/src/routes/guide.svelte b/client/src/routes/guide.svelte
index d0b4dd0..90e642e 100644
--- a/client/src/routes/guide.svelte
+++ b/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>
\ No newline at end of file
diff --git a/client/src/routes/index.svelte b/client/src/routes/index.svelte
index 2dab2e6..ed6948d 100644
--- a/client/src/routes/index.svelte
+++ b/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">
diff --git a/client/src/routes/why.svelte b/client/src/routes/why.svelte
index 2f1d662..523d128 100644
--- a/client/src/routes/why.svelte
+++ b/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 */