create basic navbar with routing to all pages/views

packages/gui/src-tauri/Cargo.lock

@@ -1688,6 +1688,16 @@ version = "1.16.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "86f0b0d4bf799edbc74508c1e8bf170ff5f41238e5f8225603ca7caaae2b7860"
 
+[[package]]
+name = "open"
+version = "3.0.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b4a3100141f1733ea40b53381b0ae3117330735ef22309a190ac57b9576ea716"
+dependencies = [
+ "pathdiff",
+ "windows-sys 0.36.1",
+]
+
 [[package]]
 name = "openssl"
 version = "0.10.42"
@@ -1793,6 +1803,12 @@ version = "1.0.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b1de2e551fb905ac83f73f7aedf2f0cb4a0da7e35efa24a202a936269f1f18e1"
 
+[[package]]
+name = "pathdiff"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8835116a5c179084a830efb3adc117ab007512b535bc1a21c991d3b32a6b44dd"
+
 [[package]]
 name = "percent-encoding"
 version = "2.2.0"
@@ -2712,9 +2728,11 @@ dependencies = [
  "ignore",
  "objc",
  "once_cell",
+ "open",
  "percent-encoding",
  "rand 0.8.5",
  "raw-window-handle",
+ "regex",
  "semver 1.0.14",
  "serde",
  "serde_json",
@@ -2766,6 +2784,7 @@ dependencies = [
  "png 0.17.7",
  "proc-macro2",
  "quote",
+ "regex",
  "semver 1.0.14",
  "serde",
  "serde_json",

packages/gui/src-tauri/Cargo.toml

@@ -17,7 +17,7 @@ tauri-build = { version = "1.2.0", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.2.0", features = ["http-all"] }
+tauri = { version = "1.2.0", features = ["http-all", "shell-open"] }
 uuid = "1.2.1"
 reqwest = { version = "0.11", features = ["json", "blocking"] }
 hyper = { version = "0.14", features = ["full"] }

packages/gui/src-tauri/tauri.conf.json

@@ -15,7 +15,17 @@
       "http": {
         "all": true,
         "request": true,
-        "scope": ["https://api.tea.xyz/v1/*"]
+        "scope": [
+          "https://api.tea.xyz/v1/*",
+          "https://github.com/*"
+        ]
+      },
+      "shell": {
+        "all": false,
+        "execute": false,
+        "open": true,
+        "scope": [],
+        "sidecar": false
       }
     },
     "bundle": {

packages/gui/src/components/NavBar/NavBar.svelte

@@ -0,0 +1,39 @@
+<script type="ts">
+    import { open } from '@tauri-apps/api/shell';
+    const openGithub = () => {
+        open('https://github.com/teaxyz')
+    }
+</script>
+
+<ul id="NavBar" class="bg-primary">
+    <li>
+        <a href="/">Home / Tea Icon</a>
+    </li>
+    <li>
+        <input type="search" placeholder="search" />
+    </li>
+    <li>
+        <a href="/">Discover</a>
+    </li>
+    <li>
+        <a href="/documentation">Documentation</a>
+    </li>
+    <li>
+        <a href="/cli">TEA CLI INSTALL</a>
+    </li>
+    <li>
+        <a href="/packages">PACKAGES</a>
+    </li>
+    <li>
+        <button on:click={openGithub}>view on github</button>
+    </li>
+    <li>
+        <a href="/profile">user profile</a>
+    </li>
+</ul>
+
+<style>
+    #NavBar {
+        height: 100vh;
+    }
+</style>

packages/gui/src/routes/+page.svelte

@@ -1,24 +1,33 @@
+<!-- home / discover / welcome page -->
 <script lang="ts">
-    import "../app.css";
+    import "$appcss";
-    import { get } from '../libs/api';
+    // import { get } from '../libs/api';
-    import type { S3Package } from '../libs/types';
+    // import type { S3Package } from '../libs/types';
     import Button from '@tea/ui/Button/Button.svelte';
 
-    let packages: S3Package[] = []
+    import NavBar from '$components/NavBar/NavBar.svelte';
-    async function loadPackages(){
+
-        try {
+    // let packages: S3Package[] = []
-            const data = await get<S3Package[]>('/packages');
+    // async function loadPackages(){
-            console.log(data);
+    //     try {
-            if (packages.length) {
+    //         const data = await get<S3Package[]>('/packages');
-                packages = data;
+    //         console.log(data);
-            }
+    //         if (packages.length) {
-        } catch (error) {
+    //             packages = data;
-            console.error(error);
+    //         }
-        }
+    //     } catch (error) {
-    }
+    //         console.error(error);
+    //     }
+    // }
 </script>
 
-<a href="/others">Go to install package</a>
+<section class="flex">
+    <nav>
+        <NavBar/>
+    </nav>
+    <div>
+        <h1>Home / Discover</h1>
+        <!-- <a href="/others">Go to install package</a>
         <Button primary={true}  on:click={loadPackages} label="Load Packages"></Button>
         <ul>
             {#each packages as p}
@@ -26,6 +35,11 @@
             {/each}
         </ul>
         
+        <a href="/packages/specific">Go to specific package</a> -->
+        <Button primary={true} label="does nothing" />
+    </div>
+</section>
+
 <style>
     ul {
         color: green;

packages/gui/src/routes/cli/+page.svelte

@@ -0,0 +1,17 @@
+<script>
+    import "$appcss";
+
+    import NavBar from '$components/NavBar/NavBar.svelte';
+    import { page } from '$app/stores';
+    /** @type {import('./$types').PageData} */
+    export let data;
+</script>
+
+<section class="flex">
+    <nav>
+        <NavBar/>
+    </nav>
+    <div>
+        <h1>How to install cli</h1>
+    </div>
+</section>

packages/gui/src/routes/documentation/+page.svelte

@@ -0,0 +1,17 @@
+<script>
+    import "$appcss";
+
+    import NavBar from '$components/NavBar/NavBar.svelte';
+    import { page } from '$app/stores';
+    /** @type {import('./$types').PageData} */
+    export let data;
+</script>
+
+<section class="flex">
+    <nav>
+        <NavBar/>
+    </nav>
+    <div>
+        <h1>Documentation</h1>
+    </div>
+</section>

packages/gui/src/routes/packages/+page.svelte

@@ -0,0 +1,24 @@
+<!-- package list -->
+<script lang="ts">
+    import "$appcss";
+
+    import NavBar from '$components/NavBar/NavBar.svelte';
+
+</script>
+
+<section class="flex">
+    <nav>
+        <NavBar/>
+    </nav>
+    <div>
+        <h1>Packages Listing</h1>
+        <ul>
+            <li>
+                <a href="/packages/pkg-a">Sample Pkg A</a>
+            </li>
+            <li>
+                <a href="/packages/pkg-b">Sample Pkg B</a>
+            </li>
+        </ul>
+    </div>
+</section>

packages/gui/src/routes/packages/[slug]/+page.svelte

@@ -0,0 +1,17 @@
+<script>
+    import "$appcss";
+
+    import NavBar from '$components/NavBar/NavBar.svelte';
+    import { page } from '$app/stores';
+    /** @type {import('./$types').PageData} */
+    export let data;
+</script>
+
+<section class="flex">
+    <nav>
+        <NavBar/>
+    </nav>
+    <div>
+        <h1>{data.title}: {$page.params.slug}</h1>
+    </div>
+</section>

packages/gui/src/routes/packages/[slug]/+page.ts

@@ -0,0 +1,10 @@
+import type { LoadEvent } from '@sveltejs/kit';
+ 
+/** @type {import('./$types').PageLoad} */
+export function load({ params }: LoadEvent) {
+    // TODO: search package details here
+    return {
+        title: `Hello Package: ${params.slug}!`,
+        content: 'Welcome to our blog. Lorem ipsum dolor sit amet...'
+    };
+}

packages/gui/src/routes/profile/+page.svelte

@@ -0,0 +1,16 @@
+<!-- user profile page -->
+<script lang="ts">
+    import "$appcss";
+
+    import NavBar from '$components/NavBar/NavBar.svelte';
+
+</script>
+
+<section class="flex">
+    <nav>
+        <NavBar/>
+    </nav>
+    <div>
+        <h1>User Profile</h1>
+    </div>
+</section>

packages/gui/tsconfig.json

@@ -8,8 +8,14 @@
 		"resolveJsonModule": true,
 		"skipLibCheck": true,
 		"sourceMap": true,
-		"strict": true
+		"strict": true,
+		"paths": {
+			"$appcss": ["src/app.css"],
+			"$libs/*": ["src/lib/*"],
+			"$components/*": ["src/components/*"],
+			"@tea/ui": ["../ui/src/*"],
 		}
+	},
 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
 	//
 	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes

packages/gui/vite.config.ts

@@ -1,8 +1,17 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import type { UserConfig } from 'vite';
+import path from 'path';
 
 const config: UserConfig = {
-	plugins: [sveltekit()]
+	plugins: [sveltekit()],
+	resolve: {
+		alias: {
+			'@tea/ui/*': path.resolve('../ui/src/*'),
+			$components: path.resolve('./src/components'),
+			$libs: path.resolve('./src/libs'),
+			$appcss: path.resolve('./src/app.css'),
+		}
+	}
 };
 
 export default config;