Merge pull request #30 from teaxyz/navbar

#29 init dev of navbar

.github/create-invalidate-preview.sh

@@ -36,7 +36,10 @@ then
     domain=$(echo $new_config | jq '.Distribution.DomainName' | tr -d '"')
     aws cloudfront wait distribution-deployed --id $distribution_id
 else
-    invalidation_id=$(aws cloudfront create-invalidation --distribution-id $distribution_id --paths /* | jq '.Invalidation.Id' | tr -d '"') 
+    echo "invalidating distribution_id: $distribution_id"
+    invalidation_id=$(aws cloudfront create-invalidation --distribution-id $distribution_id --paths "/*" | jq '.Invalidation.Id' | tr -d '"') 
+    
+    echo "invalidation_id: $invalidation_id"
     aws cloudfront wait invalidation-completed --distribution-id $distribution_id --id $invalidation_id
 fi
 

.github/workflows/ci.yml

@@ -28,9 +28,7 @@ jobs:
             - 'packages/ui/src/**'
     - name: get s3 preview folder
       id: preview
-      run: |
+      run: echo "folder=${{ github.event.number }}-merge" >> $GITHUB_OUTPUT
-        preview=$(echo $GITHUB_REF_NAME | sed -e 's/\//-/g')
-        echo "folder=$preview" >> $GITHUB_OUTPUT
   no_preview:
     needs: changes
     if: needs.changes.outputs.svelte == 'false'

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 yarn-error.log
+.DS_Store

packages/gui/package.json

@@ -14,12 +14,12 @@
     "format": "prettier --plugin-search-dir . --write ."
   },
   "devDependencies": {
-    "@tea/ui": "workspace:*",
     "@playwright/test": "1.25.0",
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/adapter-static": "1.0.0-next.48",
     "@sveltejs/kit": "next",
     "@tauri-apps/cli": "1.2.0",
+    "@tea/ui": "workspace:*",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
     "@typescript-eslint/parser": "^5.27.0",
     "autoprefixer": "^10.4.13",

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", "shell-open"] }
+tauri = { version = "1.2.0", features = ["http-all", "shell-open", "window-all"] }
 uuid = "1.2.1"
 futures = "0.3"
 

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

@@ -26,6 +26,38 @@
         "open": true,
         "scope": [],
         "sidecar": false
+      },
+      "window": {
+        "all": true,
+        "center": true,
+        "close": true,
+        "create": true,
+        "hide": true,
+        "maximize": true,
+        "minimize": true,
+        "print": true,
+        "requestUserAttention": true,
+        "setAlwaysOnTop": true,
+        "setCursorGrab": true,
+        "setCursorIcon": true,
+        "setCursorPosition": true,
+        "setCursorVisible": true,
+        "setDecorations": true,
+        "setFocus": true,
+        "setFullscreen": true,
+        "setIcon": true,
+        "setIgnoreCursorEvents": true,
+        "setMaxSize": true,
+        "setMinSize": true,
+        "setPosition": true,
+        "setResizable": true,
+        "setSize": true,
+        "setSkipTaskbar": true,
+        "setTitle": true,
+        "show": true,
+        "startDragging": true,
+        "unmaximize": true,
+        "unminimize": true
       }
     },
     "bundle": {
@@ -73,7 +105,8 @@
         "height": 600,
         "resizable": true,
         "title": "gui",
-        "width": 800
+        "width": 800,
+        "decorations": false
       }
     ]
   }

packages/gui/src/+layout.ts

@@ -1,2 +0,0 @@
-export const prerender = true
-export const ssr = false

packages/gui/src/components/Badges/Badges.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="Badges"/>

packages/gui/src/components/BigBlackSpace/BigBlackSpace.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="BigBlackSpace"/>

packages/gui/src/components/CliBanner/CliBanner.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="CLI Hero"/>

packages/gui/src/components/EssentialWorkshops/EssentialWorkshops.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="EssentialWorkshops"/>

packages/gui/src/components/FeaturedCourses/FeaturedCourses.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="FeaturedCourses"/>

packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="FeaturedPackages"/>

packages/gui/src/components/GettingStarted/GettingStarted.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="GettingStarted"/>

packages/gui/src/components/InstalledPackages/InstalledPackages.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="InstalledPackages"/>

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

@@ -1,40 +1,164 @@
 <script type="ts">
+    import { page } from '$app/stores';
     import { open } from '@tauri-apps/api/shell';
+    import { appWindow } from '@tauri-apps/api/window';
+
+    import { beforeUpdate } from 'svelte';
+
+
     const openGithub = () => {
         open('https://github.com/teaxyz')
     }
+
+    let maximized = false;
+    const toggleMaximize = () => {
+        maximized = !maximized;
+        if (maximized) {
+            appWindow.maximize();
+        } else {
+            appWindow.unmaximize();
+        }
+    }
+
+    let routes = [
+        {
+            path: '/',
+            active: false,
+            label: 'DISCOVER'
+        },
+        {
+            path: '/documentation',
+            active: false,
+            label: 'DOCUMENTATION'
+        },
+        {
+            path: '/cli',
+            active: false,
+            label: 'TEA CLI INSTALL'
+        },
+        {
+            path: '/packages',
+            active: false,
+            label: 'PACKAGES'
+        }
+    ];
+
+    beforeUpdate(async () => {
+        const currentPath = $page.url.pathname;
+
+        for(let i = 0; i < routes.length; i++) {
+            let { path } = routes[i];
+            routes[i].active = currentPath.includes(path);
+        }
+        if (currentPath !== '/') {
+            routes[0].active = false;
+        }
+    });
 </script>
 
-<ul id="NavBar" class="bg-primary">
+<ul id="NavBar" >
-    <li>
+    <nav data-tauri-drag-region class="flex justify-between">
-        <a href="/">Home / Tea Icon</a>
+        <div class="flex gap-1 p-3">
-    </li>
+            <button class="titlebar-button" id="titlebar-close" on:click={appWindow.close}>
-    <li>
+                <img src="/images/close.svg" alt="close" />
-        <input type="search" placeholder="search" />
+            </button>
-    </li>
+            <button class="titlebar-button" id="titlebar-minimize" on:click={appWindow.minimize}>
-    <li>
+                <img
-        <a href="/">Discover</a>
+                src="/images/minimize.svg"
-    </li>
+                alt="minimize"
-    <li>
+                />
-        <a href="/documentation">Documentation</a>
+            </button>
-    </li>
+            <button class="titlebar-button" id="titlebar-maximize" on:click={toggleMaximize}>
-    <li>
+                <img
-        <a href="/cli">TEA CLI INSTALL</a>
+                src="/images/expand.svg"
-    </li>
+                alt="maximize"
-    <li>
+                />
-        <a href="/packages">PACKAGES</a>
+            </button>
-    </li>
+        </div>
-    <li>
+        <a href="/">
-        <button on:click={openGithub}>view on github</button>
+            <img width="40" height="40" src="/images/tea-icon.png" alt="tea" />
-    </li>
+        </a>
-    <li>
+    </nav>
-        <a href="/profile">user profile</a>
+
+    <input class="w-full bg-black h-12 p-4 border border-x-0 border-gray" type="search" placeholder="search" />
+
+    {#each routes as route}
+        <li class={route.active ? "nav_button active": "nav_button"}>
+            <a href={route.path}>{route.label}</a>
+        </li>
+    {/each}
+    <li class="nav_button">
+        <button on:click={openGithub}>VIEW ON GITHUB</button>
     </li>
+
+    <footer class="border border-x-0 border-gray w-full">
+        <a href="/profile">
+            <section class="flex">
+                <img width="40" height="40" src="/images/bored-ape.png" alt="profile"/>
+                <div class="p-2 text-gray">@user_name</div>
+            </section>
+        </a>
+    </footer>
 </ul>
 
 <style>
-    #NavBar {
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+    ul {
         height: 100vh;
         width: 100%;
     }
+
+    @layer components {
+        .nav_button {
+            transition: all .3s;
+            color: theme('colors.white');
+            padding: theme('spacing.4') theme('spacing.2');
+        }
+        .nav_button:hover {
+            color: theme('colors.black');
+            background-color: theme('colors.primary');
+        }
+        .nav_button.active {
+            color: theme('colors.black');
+            background-color: theme('colors.primary');
+        }
+    }
+
+    nav:hover {
+        transition: all .3s;
+        background-color: #2d2d2d;
+    }
+
+    .titlebar-button {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        width: 16px;
+        height: 16px;
+        border-radius: 8px;
+        opacity: 0.9;
+    }
+    .titlebar-button img {
+        transition: opacity .3s;
+        opacity: 0;
+    }
+    .titlebar-button:hover img {
+        opacity: 1;
+    }
+    #titlebar-close {
+        background-color: orangered;
+    }
+    #titlebar-minimize {
+        background-color: orange;
+    }
+    #titlebar-maximize {
+        background-color: green;
+    }
+
+    footer {
+        position: absolute;
+        bottom: 20px;
+    }
 </style>

packages/gui/src/components/PackageBanner/PackageBanner.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="PackageBanner"/>

packages/gui/src/components/PackageReviews/PackageReviews.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+
+<Placeholder label="PackageReviews"/>

packages/gui/src/components/Preflight/Preflight.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="Preflight"/>

packages/gui/src/components/ProfileBanner/ProfileBanner.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+<Placeholder label="ProfileBanner"/>

packages/gui/src/components/SearchPackages/SearchPackages.svelte

@@ -0,0 +1,31 @@
+<script>
+    import "$appcss";
+    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+</script>
+
+<div class="bg-black border border-gray">
+    <section class="flex">
+        <h2>Filter Packages</h2>
+        <input type="search" class="text-white bg-black border border-gray"/>
+    </section>
+    <ul class="grid grid-cols-3 gap-8 mt-8">
+        <li>
+            <a href="/packages/pkg-a"><Placeholder label="Pkg A"></Placeholder></a>
+        </li>
+        <li>
+            <a href="/packages/pkg-b"><Placeholder label="Pkg B"></Placeholder></a>
+        </li>
+        <li>
+            <a href="/packages/pkg-c"><Placeholder label="Pkg C"></Placeholder></a>
+        </li>
+        <li>
+            <a href="/packages/pkg-a"><Placeholder label="Pkg D"></Placeholder></a>
+        </li>
+        <li>
+            <a href="/packages/pkg-b"><Placeholder label="Pkg E"></Placeholder></a>
+        </li>
+        <li>
+            <a href="/packages/pkg-c"><Placeholder label="Pkg F"></Placeholder></a>
+        </li>
+    </ul>
+</div>

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

@@ -11,7 +11,7 @@
     });
 </script>
 
-<div>
+<div id="main-layout">
     <nav class="">
         <NavBar/>
     </nav>
@@ -22,12 +22,14 @@
             </header>
         {/if}
         <figure></figure>
-        <slot></slot>
+        <div>
+            <slot></slot>
+        </div>
     </section>
 </div>
 
 <style>
-    div {
+    #main-layout {
         width: 100vh;
         height: 100vh;
     }
@@ -44,6 +46,7 @@
     }
     figure {
         position: absolute;
+        z-index: 0;
         top: 180px;
         left: 0px;
         right: 0px;
@@ -58,4 +61,12 @@
         height: 50px;
         border-bottom: #CCC 1px solid;
     }
+
+    slot {
+        z-index: 1;
+    }
+
+    div {
+        position: relative;
+    }
 </style>

packages/gui/src/routes/+layout.ts

@@ -0,0 +1,2 @@
+export const ssr = false;
+export const prerender = false;

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

@@ -2,20 +2,20 @@
 <script lang="ts">
     import "$appcss";
     import { backLink } from '$libs/stores';
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
     import PageHeader from "$components/PageHeader/PageHeader.svelte";
-
+    import FeaturedPackages from "$components/FeaturedPackages/FeaturedPackages.svelte";
+    import GettingStarted from "$components/GettingStarted/GettingStarted.svelte";
     backLink.set('');
 </script>
 
 
 <div>
     <PageHeader>Discover</PageHeader>
-    <header>
+    <section>
-        <Placeholder label="featured packages"/>
+        <FeaturedPackages/>
-    </header>
+    </section>
     <section class="mt-8">
-        <Placeholder label="Getting started with tea"/>
+        <GettingStarted/>
     </section>
 </div>
 

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

@@ -1,7 +1,8 @@
 <script>
     import "$appcss";
     import PageHeader from "$components/PageHeader/PageHeader.svelte";
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+    import CliBanner from "$components/CliBanner/CliBanner.svelte";
+    import BigBlackSpace from "$components/BigBlackSpace/BigBlackSpace.svelte";
     import { backLink } from '$libs/stores';
     backLink.set('/');
 </script>
@@ -10,11 +11,11 @@
 <div>
     <PageHeader>INSTALL TEA</PageHeader>
 
-    <header>
+    <section>
-        <Placeholder label="big tea icon version with copy curl"/>
+        <CliBanner/>
-    </header>
+    </section>
 
     <section class="mt-8">
-        <Placeholder label="big black blank space"/>
+        <BigBlackSpace/>
     </section>
 </div>

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

@@ -1,7 +1,8 @@
 <script>
     import "$appcss";
     import PageHeader from "$components/PageHeader/PageHeader.svelte";
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+    import FeaturedCourses from "$components/FeaturedCourses/FeaturedCourses.svelte";
+    import EssentialWorkshops from "$components/EssentialWorkshops/EssentialWorkshops.svelte";
     import { backLink } from '$libs/stores';
     backLink.set('/');
 </script>
@@ -10,11 +11,11 @@
 <div>
     <PageHeader>Documentation</PageHeader>
 
-    <header>
+    <section>
-        <Placeholder label="featured courses"/>
+        <FeaturedCourses/>
-    </header>
+    </section>
 
     <section class="mt-8">
-        <Placeholder label="Essential workshops"/>
+        <EssentialWorkshops/>
     </section>
 </div>

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

@@ -1,7 +1,7 @@
 <script>
     import "$appcss";
     import PageHeader from "$components/PageHeader/PageHeader.svelte";
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+    import SearchPackages from "$components/SearchPackages/SearchPackages.svelte";
     import { backLink } from '$libs/stores';
     backLink.set('/');
 </script>
@@ -9,27 +9,5 @@
 
 <div>
     <PageHeader>Packages</PageHeader>
-    <section>
+    <SearchPackages/>
-        <Placeholder label="filter packages"/>
-    </section>
-    <ul class="grid grid-cols-3 gap-8 mt-8">
-        <li>
-            <a href="/packages/pkg-a"><Placeholder label="Pkg A"></Placeholder></a>
-        </li>
-        <li>
-            <a href="/packages/pkg-b"><Placeholder label="Pkg B"></Placeholder></a>
-        </li>
-        <li>
-            <a href="/packages/pkg-c"><Placeholder label="Pkg C"></Placeholder></a>
-        </li>
-        <li>
-            <a href="/packages/pkg-a"><Placeholder label="Pkg D"></Placeholder></a>
-        </li>
-        <li>
-            <a href="/packages/pkg-b"><Placeholder label="Pkg E"></Placeholder></a>
-        </li>
-        <li>
-            <a href="/packages/pkg-c"><Placeholder label="Pkg F"></Placeholder></a>
-        </li>
-    </ul>
 </div>

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

@@ -1,9 +1,9 @@
 <script>
     import "$appcss";
     import PageHeader from "$components/PageHeader/PageHeader.svelte";
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
-    import { page } from '$app/stores';
     import { backLink } from '$libs/stores';
+    import PackageBanner from '$components/PackageBanner/PackageBanner.svelte';
+    import PackageReviews from '$components/PackageReviews/PackageReviews.svelte';
     backLink.set('/packages');
 
     /** @type {import('./$types').PageData} */
@@ -13,9 +13,9 @@
 <div>
     <PageHeader>{data.title}</PageHeader>
     <section>
-        <Placeholder label="package cover w/ copy link" />
+        <PackageBanner/>
     </section>
     <section class="mt-8">
-        <Placeholder label="reviews" />
+        <PackageReviews/>
     </section>
 </div>

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

@@ -2,6 +2,10 @@
     import "$appcss";
     import PageHeader from "$components/PageHeader/PageHeader.svelte";
     import Placeholder from "$components/Placeholder/Placeholder.svelte";
+    import ProfileBanner from "$components/ProfileBanner/ProfileBanner.svelte";
+    import Preflight from "$components/Preflight/Preflight.svelte";
+    import Badges from "$components/Badges/Badges.svelte";
+    import InstalledPackages from "$components/InstalledPackages/InstalledPackages.svelte";
     import { backLink } from '$libs/stores';
     backLink.set('/');
 </script>
@@ -10,21 +14,21 @@
 <div>
     <PageHeader>PROFILE</PageHeader>
 
-    <header>
+    <section>
-        <Placeholder label="github username and wallet address"/>
+        <ProfileBanner/>
-    </header>
+    </section>
 
     <section class="mt-8 grid grid-cols-2 gap-8">
         <div>
-            <Placeholder label="pre-flight"/>
+            <Preflight/>
         </div>
         <div>
-            <Placeholder label="badges"/>
+            <Badges/>
         </div>
     </section>
 
     <section class="mt-8">
-        <Placeholder label="my installs"/>
+        <InstalledPackages/>
     </section>
 
 </div>

packages/gui/static/images/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"/></svg>

packages/gui/static/images/expand.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 19H5l.007-7H7v5h5v2Zm6.992-7H17V7h-5V5h7l-.008 7Z"/></svg>

packages/gui/static/images/minimize.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20 14H4v-4h16"/></svg>

packages/ui/tailwind.config.cjs

@@ -2,6 +2,7 @@
 const primary = '#00ffd0';
 const black = '#1a1a1a';
 const white = '#fff';
+const gray = '#949494';
 
 module.exports = {
   content: ['./src/**/*.{html,js,svelte,ts}'],
@@ -11,6 +12,7 @@ module.exports = {
       green: primary,
       black,
       white,
+      gray,
     },
     extend: {
       fontFamily: {