feat(examples): improve api example, closes #1535 (#1957)

examples/api/public/global.css

@@ -5,16 +5,16 @@
 }
 
 body {
-  background: #18191a;
+  background: rgb(24, 25, 26, 0.8);
 }
 
 .noselect {
   -webkit-touch-callout: none;
-    -webkit-user-select: none;
-     -khtml-user-select: none;
-       -moz-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 .logo-container {
@@ -30,20 +30,14 @@ body {
 }
 
 .logo {
-  width: 32px;
-  height: 32px;
   cursor: pointer;
-  position: fixed;
-  z-index: 10;
-  top: 7px;
-  right: 10px;
 }
 
 #response {
-  height:100%;
+  height: 100%;
   max-height: 100%;
   margin-top: 1em;
-  background: rgb(36, 37, 38);
+  background: rgb(36, 37, 38, 0.8);
   color: #f0f4f5;
   border: solid 1px rgba(255, 255, 255, 0.055);
   box-shadow: 0 1px 5px 0 rgb(0 0 0 / 20%);
@@ -55,8 +49,9 @@ body {
 }
 
 input,
-select, textarea {
-  background: rgb(53, 53, 53);
+select,
+textarea {
+  background: rgb(53, 53, 53, 0.9);
   color: #fff;
   font-family: system-ui, sans-serif;
   border: none !important;
@@ -98,17 +93,6 @@ button:active {
   transition: 0.2s ease;
 }
 
-.bottom {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  text-align: center;
-  width: 100%;
-  padding: 5px;
-  background: #333;
-  color: #eef;
-}
-
 .dark-link {
   color: white;
   text-decoration: none !important;
@@ -119,30 +103,30 @@ button:active {
   box-shadow: 0 1px 5px 0 rgb(0 0 0 / 20%);
 }
 
-.dark-link:hover{
+.dark-link:hover {
   background: #3d392a;
 }
 
-.nv{
+.nv {
   color: #fff;
   cursor: pointer;
   transition: 0.25s ease;
 }
 
-.nv:hover{
+.nv:hover {
   color: #ffe07a;
   padding-left: 8px;
   border-left: solid 5px #ffe07a;
 }
 
-.nv_selected{
+.nv_selected {
   color: #67D6ED;
   padding-left: 8px;
   border-left: solid 5px #67D6ED;
 }
 
 .content {
-  background: rgb(36, 37, 38);
+  background: rgb(36, 37, 38, 0.5);
   color: #f0f4f5;
   padding: 20px;
   width: 100%;
@@ -150,18 +134,18 @@ button:active {
   box-shadow: 0 1px 5px 0 rgb(0 0 0 / 20%);
 }
 
-main{
+main {
   height: 100%;
 }
 
-[type="radio"]:checked ~ label {
+[type="radio"]:checked~label {
   background: rgb(36, 37, 38);
   color: #67D6ED;
   border-bottom: 1px solid transparent;
   z-index: 2;
 }
 
-[type="radio"]:checked ~ label ~ .content {
+[type="radio"]:checked~label~.content {
   z-index: 1;
 }
 
@@ -177,10 +161,10 @@ main{
   flex-direction: column;
 }
 
-.just-around{
+.just-around {
   justify-content: space-between;
 }
 
 .hidden {
   display: none;
-}
+}

examples/api/src-tauri/tauri.conf.json

@@ -74,7 +74,8 @@
     },
     "windows": [
       {
-        "title": "Tauri API Validation"
+        "title": "Tauri API Validation",
+        "transparent": true
       }
     ],
     "security": {

examples/api/src/App.svelte

@@ -1,5 +1,6 @@
 <script>
   import { onMount } from "svelte";
+  import { writable } from "svelte/store";
   import hotkeys from "hotkeys-js";
   import { open } from "@tauri-apps/api/shell";
   import { invoke } from "@tauri-apps/api/tauri";
@@ -73,25 +74,31 @@
 
   let selected = views[0];
 
-  let responses = [""];
+  let responses = writable([]);
+  let response = ''
 
   function select(view) {
     selected = view;
   }
 
   function onMessage(value) {
-    responses += typeof value === "string" ? value : JSON.stringify(value);
-    responses += "\n";
+    responses.update(r => [`[${new Date().toLocaleTimeString()}]` + ': ' + (typeof value === "string" ? value : JSON.stringify(value)), ...r])
   }
 
   function onLogoClick() {
     open("https://tauri.studio/");
   }
+
+  onMount(() => {
+    responses.subscribe(r => {
+      response = r.join('\n')
+    })
+  })
 </script>
 
 <main>
   <div class="flex row noselect just-around" style="margin=1em;" data-tauri-drag-region>
-    <img src="tauri logo.png" height="60" on:click={onLogoClick} alt="logo" />
+    <img class="logo" src="tauri logo.png" height="60" on:click={onLogoClick} alt="logo" />
     <div>
       <a class="dark-link" target="_blank" href="https://tauri.studio/en/docs/getting-started/intro">
         Documentation
@@ -121,9 +128,9 @@
     <p class="flex row just-around">
       <strong>Tauri Console</strong>
       <a class="nv" on:click={()=> {
-        responses = [""];
+        responses.update(() => []);
         }}>clear</a>
     </p>
-    {responses}
+    {@html response}
   </div>
 </main>

examples/api/src/components/Cli.svelte

@@ -9,6 +9,15 @@
 </script>
 
 <div>
+  This binary can be run on the terminal and takes the following arguments:
+  <ul>
+    <li>--config PATH</li>
+    <li>--theme light|dark|system</li>
+    <li>--verbose</li>
+  </ul>
+  Additionally, it has a <i>update --background</i> subcommand.
+  Note that the arguments are only parsed, not implemented.
+  <br>
   <button class="button" id="cli-matches" on:click={cliMatches}>
     Get matches
   </button>

examples/api/src/components/Http.svelte

@@ -1,7 +1,7 @@
 <script>
   import { getClient, Body } from "@tauri-apps/api/http";
   let httpMethod = "GET";
-  let httpUrl = "";
+  let httpUrl = "https://jsonplaceholder.typicode.com/todos/1";
   let httpBody = "";
 
   export let onMessage;