From 1007fec2a1c50b0bbf732938e89c239421592b4a Mon Sep 17 00:00:00 2001
From: fullstackmafia <ugwuraphael@gmail.com>
Date: Mon, 4 Jan 2021 18:09:32 +0400
Subject: [PATCH 1/4] Updated Svelte docs

---
 frontend/docs/svelte.mdx | 152 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 152 insertions(+)
 create mode 100644 frontend/docs/svelte.mdx

diff --git a/frontend/docs/svelte.mdx b/frontend/docs/svelte.mdx
new file mode 100644
index 0000000..2c074ef
--- /dev/null
+++ b/frontend/docs/svelte.mdx
@@ -0,0 +1,152 @@
+
+
+----------
+
+id: svelte
+title: Svelte
+hide_title: false
+hide_table_of_contents: false
+keywords:
+
+- final space
+- finalspace
+- finalspaceapi
+- final space wiki
+- api
+- restapi
+- rest api
+- example
+- svelte
+- axios
+description: A live example of the Final Space API using Svelte alongside Axios to retrieve data.
+
+The code samples below will show you how to implement the Final Space API using either the Fetch API or [Axios](https://www.npmjs.com/package/axios) in Svelte.
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+defaultValue="svelte"
+values={[
+{label: 'Svelte + Fetch API', value: 'svelte-fetch'},
+{label: 'Svelte + Axios', value: 'svelte-axios'},
+]}>
+You can check out this example on CodeSandbox.
+:::note Code
+
+    // App.svelte
+    
+        <style>
+      .parent {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        margin: 20px;
+      }
+    
+      .imageStyle {
+        display: flex;
+        box-shadow: 0 10px 5px 0 rgba(0, 0, 0, 0.3);
+        padding: 20px;
+        margin: 30px;
+        border-radius: 7px;
+        flex-direction: column;
+        background-color: #000000;
+        align-items: center;
+      }
+    
+      .fontStyle {
+        color: #33ccff;
+        font-family: "Darker Grotesque", sans-serif;
+        font-weight: 300;
+      }
+    </style>
+    
+    <div class="{'parent'}">
+        {#each characters as character}
+          <div>
+            <section class="{'imageStyle'}"> 
+              <img src={character.img_url} alt={character.name} />
+              <h4 class="{'fontStyle'}">{character.name}</h4>
+            </section>
+    
+         </div>
+       {:else}
+          <p>loading...</p>
+       {/each}
+    </div>
+    
+    <script>
+      import { onMount } from "svelte";
+    
+      let characters = [];
+    
+      onMount(async () => {
+        const res = await fetch(`https://finalspaceapi.com/api/v0/character?limit=5`);
+        characters = await res.json();
+      });
+    </script>
+
+:::
+
+You can check out this example here on CodeSandbox.
+To use this example, remember to add the Axios dependency to your project and install it.
+:::note Code
+
+    // App.svelte
+    
+    <style>
+      .parent {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        margin: 20px;
+      }
+    
+      .imageStyle {
+        display: flex;
+        box-shadow: 0 10px 5px 0 rgba(0, 0, 0, 0.3);
+        padding: 20px;
+        margin: 30px;
+        border-radius: 7px;
+        flex-direction: column;
+        background-color: #000000;
+        align-items: center;
+      }
+    
+      .fontStyle {
+        color: #33ccff;
+        font-family: "Darker Grotesque", sans-serif;
+        font-weight: 300;
+      }
+    </style>
+    
+    <div class="{'parent'}">
+        {#each characters as character}
+          <div>
+            <section class="{'imageStyle'}"> 
+              <img src={character.img_url} alt={character.name} />
+              <h4 class="{'fontStyle'}">{character.name}</h4>
+            </section>
+    
+         </div>
+       {:else}
+          <p>loading...</p>
+       {/each}
+    </div>
+    
+    <script>
+      import { onMount } from "svelte";
+      import axios from "axios";
+    
+      let characters = [];
+    
+      onMount(async () => {
+        const res = "https://finalspaceapi.com/api/v0/character?limit=5";
+        axios.get(res).then(response => {
+          characters = response.data;
+        });
+      });
+    </script>
+
+:::
+
+
+

From c9ff1ef801726c8faedf1d998d7cdbd34bc330e1 Mon Sep 17 00:00:00 2001
From: fullstackmafia <ugwuraphael@gmail.com>
Date: Mon, 4 Jan 2021 18:28:59 +0400
Subject: [PATCH 2/4] new updates

---
 frontend/docs/svelte.mdx | 44 ++++++++++++++++++++++++++--------------
 frontend/sidebars.js     |  2 +-
 2 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/frontend/docs/svelte.mdx b/frontend/docs/svelte.mdx
index 2c074ef..fb6704c 100644
--- a/frontend/docs/svelte.mdx
+++ b/frontend/docs/svelte.mdx
@@ -1,6 +1,4 @@
-
-
-----------
+---
 
 id: svelte
 title: Svelte
@@ -19,21 +17,31 @@ keywords:
 - svelte
 - axios
 description: A live example of the Final Space API using Svelte alongside Axios to retrieve data.
+---
 
 The code samples below will show you how to implement the Final Space API using either the Fetch API or [Axios](https://www.npmjs.com/package/axios) in Svelte.
+
+
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-defaultValue="svelte"
-values={[
-{label: 'Svelte + Fetch API', value: 'svelte-fetch'},
-{label: 'Svelte + Axios', value: 'svelte-axios'},
-]}>
-You can check out this example on CodeSandbox.
+
+
+<Tabs
+  defaultValue="svelte"
+  values={[
+    {label: 'Svelte + Fetch API', value: 'svelte-fetch'},
+    {label: 'Svelte + Axios', value: 'svelte-axios'},
+  ]}>
+  <TabItem value="Svelte">
+      
+You can check out this example [on CodeSandbox](https://codesandbox.io/s/finalapi-svelte-urxd7).
+
+
 :::note Code
 
-    // App.svelte
-    
-        <style>
+// App.svelte
+```jsx   
+    <style>
       .parent {
         align-items: center;
         display: flex;
@@ -83,13 +91,16 @@ You can check out this example on CodeSandbox.
         characters = await res.json();
       });
     </script>
-
+```
 :::
+ </TabItem>
+  <TabItem value="Svelte + Axios">
 
-You can check out this example here on CodeSandbox.
+You can check out this example [here on CodeSandbox](https://codesandbox.io/s/finalapi-svelte-axios-of957).
 To use this example, remember to add the Axios dependency to your project and install it.
 :::note Code
 
+```jsx
     // App.svelte
     
     <style>
@@ -145,8 +156,11 @@ To use this example, remember to add the Axios dependency to your project and in
         });
       });
     </script>
-
+```
 :::
 
+  </TabItem>
+</Tabs>
+
 
 
diff --git a/frontend/sidebars.js b/frontend/sidebars.js
index e53b274..6c63618 100644
--- a/frontend/sidebars.js
+++ b/frontend/sidebars.js
@@ -1,7 +1,7 @@
 module.exports = {
   someSidebar: {
     "Getting Started": ["intro", "character", "episode", "location", "quote"],
-    Examples: ["react", "vuejs", "javascript", "angular", "slider"],
+    Examples: ["react", "vuejs", "javascript", "angular", "slider", "svelte"],
     About: ["about"],
   },
 }

From 2cb2dca98dd3edb8a9994ca6da86e744c0469e5c Mon Sep 17 00:00:00 2001
From: fullstackmafia <ugwuraphael@gmail.com>
Date: Mon, 4 Jan 2021 20:35:25 +0400
Subject: [PATCH 3/4] made new updates

---
 frontend/docs/svelte.mdx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/docs/svelte.mdx b/frontend/docs/svelte.mdx
index fb6704c..d280c84 100644
--- a/frontend/docs/svelte.mdx
+++ b/frontend/docs/svelte.mdx
@@ -39,8 +39,9 @@ You can check out this example [on CodeSandbox](https://codesandbox.io/s/finalap
 
 :::note Code
 
-// App.svelte
 ```jsx   
+    // App.svelte
+
     <style>
       .parent {
         align-items: center;
@@ -93,11 +94,12 @@ You can check out this example [on CodeSandbox](https://codesandbox.io/s/finalap
     </script>
 ```
 :::
- </TabItem>
+  </TabItem>
   <TabItem value="Svelte + Axios">
 
 You can check out this example [here on CodeSandbox](https://codesandbox.io/s/finalapi-svelte-axios-of957).
 To use this example, remember to add the Axios dependency to your project and install it.
+
 :::note Code
 
 ```jsx
@@ -157,7 +159,6 @@ To use this example, remember to add the Axios dependency to your project and in
       });
     </script>
 ```
-:::
 
   </TabItem>
 </Tabs>

From 1c1fa34edf89824c6d1f66489c7ae8991372d200 Mon Sep 17 00:00:00 2001
From: fullstackmafia <ugwuraphael@gmail.com>
Date: Mon, 4 Jan 2021 20:40:38 +0400
Subject: [PATCH 4/4] made new updates

---
 frontend/docs/svelte.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/docs/svelte.mdx b/frontend/docs/svelte.mdx
index d280c84..ff8b428 100644
--- a/frontend/docs/svelte.mdx
+++ b/frontend/docs/svelte.mdx
@@ -152,7 +152,7 @@ To use this example, remember to add the Axios dependency to your project and in
       let characters = [];
     
       onMount(async () => {
-        const res = "https://finalspaceapi.com/api/v0/character?limit=5";
+        const res = "https://finalspaceapi.com/api/v0/character?limit=6";
         axios.get(res).then(response => {
           characters = response.data;
         });