ivabus/gui
1
0
Fork 0
mirror of https://github.com/ivabus/gui synced 2025-06-07 15:50:27 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

create basic navbar with routing to all pages/views

Browse source
This commit is contained in:
neil 2022-11-22 09:08:39 +08:00
parent 3b5cacb93a
commit 827b91aa9f
13 changed files with 225 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
packages/gui/src-tauri/Cargo.lock generated
View file

@ -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",

2
packages/gui/src-tauri/Cargo.toml
View file

@ -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"] }

12
packages/gui/src-tauri/tauri.conf.json
View file

@ -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": {

39
packages/gui/src/components/NavBar/NavBar.svelte Normal file
View file

@ -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>

58
packages/gui/src/routes/+page.svelte
View file

@ -1,30 +1,44 @@
<!-- home / discover / welcome page -->
<script lang="ts">
import "../app.css";
import { get } from '../libs/api';
import type { S3Package } from '../libs/types';
import "$appcss";
// import { get } from '../libs/api';
// import type { S3Package } from '../libs/types';
import Button from '@tea/ui/Button/Button.svelte';
let packages: S3Package[] = []
async function loadPackages(){
try {
const data = await get<S3Package[]>('/packages');
console.log(data);
if (packages.length) {
packages = data;
}
} catch (error) {
console.error(error);
}
}
import NavBar from '$components/NavBar/NavBar.svelte';
// let packages: S3Package[] = []
// async function loadPackages(){
// try {
// const data = await get<S3Package[]>('/packages');
// console.log(data);
// if (packages.length) {
// packages = data;
// }
// } catch (error) {
// console.error(error);
// }
// }
</script>
<a href="/others">Go to install package</a>
<Button primary={true} on:click={loadPackages} label="Load Packages"></Button>
<ul>
{#each packages as p}
<li>{p.full_name}</li>
{/each}
</ul>
<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}
<li>{p.full_name}</li>
{/each}
</ul>
<a href="/packages/specific">Go to specific package</a> -->
<Button primary={true} label="does nothing" />
</div>
</section>
<style>
ul {

17
packages/gui/src/routes/cli/+page.svelte Normal file
View file

@ -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>

17
packages/gui/src/routes/documentation/+page.svelte Normal file
View file

@ -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>

24
packages/gui/src/routes/packages/+page.svelte Normal file
View file

@ -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>

17
packages/gui/src/routes/packages/[slug]/+page.svelte Normal file
View file

@ -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>

10
packages/gui/src/routes/packages/[slug]/+page.ts Normal file
View file

@ -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...'
};
}

16
packages/gui/src/routes/profile/+page.svelte Normal file
View file

@ -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>

10
packages/gui/tsconfig.json
View file

@ -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

11
packages/gui/vite.config.ts
View file

@ -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;