Merge pull request #149 from teaxyz/new-home-page-layout

#145 init new home page

.github/workflows/ci.yml

@@ -69,10 +69,7 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - name: build tauri for Linux
-        run: |
+        uses: ./devops/ubuntu
-          sudo apt-get update
-          sudo apt-get install -y libgtk-3-dev webkit2gtk-4.0 libappindicator3-dev librsvg2-dev patchelf pkg-config
-          sh <(curl https://tea.xyz) build
       - uses: aws-actions/configure-aws-credentials@v1
         with:
           aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
@@ -126,14 +123,8 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
-      - name: install dependencies (ubuntu only)
-        if: matrix.platform.name == 'linux+x86-64'
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y libgtk-3-dev webkit2gtk-4.0 libappindicator3-dev librsvg2-dev
-
       - name: build tauri for MacOS
-        uses: teaxyz/setup@v0
+        # uses: teaxyz/setup@v0
         if: startsWith(matrix.platform.name, 'darwin')
         # FROM: https://tauri.app/v1/guides/distribution/sign-macos
         env:
@@ -146,16 +137,14 @@ jobs:
           # only used for notarization
           # APPLE_ID: ${{ secrets.APPLE_ID }}
           # APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
-        with:
+        run: |
-          target: build
+          sh <(curl https://tea.xyz) -ES xc build
 
       - name: build tauri for Linux
         # uses: teaxyz/setup@v0
         if: startsWith(matrix.platform.name, 'linux')
         # TODO: https://tauri.app/v1/guides/distribution/sign-linux
-        run: |
+        uses: ./devops/ubuntu
-          sudo apt-get install -y libgtk-3-dev webkit2gtk-4.0 libappindicator3-dev librsvg2-dev patchelf pkg-config
-          sh <(curl https://tea.xyz) build
       
       - name: build platform output
         id: build_platform

.github/workflows/main.yml

@@ -42,7 +42,7 @@ jobs:
         run: |
           sudo apt-get update
           sudo apt-get install -y libgtk-3-dev webkit2gtk-4.0 libappindicator3-dev librsvg2-dev patchelf pkg-config
-          sh <(curl https://tea.xyz) build
+          sh <(curl https://tea.xyz) xc build
 
   build_tauri:
     needs: changes
@@ -64,7 +64,7 @@ jobs:
     - uses: actions/checkout@v3
 
     - name: build tauri for MacOS
-      uses: teaxyz/setup@v0
+      # uses: teaxyz/setup@v0
       if: startsWith(matrix.platform.name, 'darwin')
       # FROM: https://tauri.app/v1/guides/distribution/sign-macos
       env:
@@ -77,17 +77,14 @@ jobs:
         # this only helps in notarization
         # APPLE_ID: ${{ secrets.APPLE_ID }}
         # APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
-      with:
+      run: |
-        target: build
+        sh <(curl https://tea.xyz) -ES xc build
 
     - name: build tauri for Linux
       # uses: teaxyz/setup@v0
       if: startsWith(matrix.platform.name, 'linux')
       # TODO: https://tauri.app/v1/guides/distribution/sign-linux
-      run: |
+      uses: ./devops/ubuntu
-        sudo apt-get update
-        sudo apt-get install -y libgtk-3-dev webkit2gtk-4.0 libappindicator3-dev librsvg2-dev patchelf pkg-config
-        sh <(curl https://tea.xyz) build
 
     - name: Get current unix ts - seconds
       id: date

.github/workflows/release.yml

@@ -34,7 +34,6 @@ jobs:
         echo "extension=$EXTENSION" >> $GITHUB_OUTPUT
     
     - name: build tauri for MacOS
-      uses: teaxyz/setup@v0
       if: startsWith(matrix.platform.name, 'darwin')
       # FROM: https://tauri.app/v1/guides/distribution/sign-macos
       env:
@@ -47,17 +46,14 @@ jobs:
         # this only helps in notarization
         # APPLE_ID: ${{ secrets.APPLE_ID }}
         # APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
-      with:
+      run: |
-        target: build
+        sh <(curl https://tea.xyz) -ES xc build
 
     - name: build tauri for Linux
       # uses: teaxyz/setup@v0
       if: startsWith(matrix.platform.name, 'linux')
       # TODO: https://tauri.app/v1/guides/distribution/sign-linux
-      run: |
+      uses: ./devops/ubuntu
-        sudo apt-get update
-        sudo apt-get install -y libgtk-3-dev webkit2gtk-4.0 libappindicator3-dev librsvg2-dev patchelf pkg-config
-        sh <(curl https://tea.xyz) build
 
 
     - name: Get current unix ts - seconds

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 yarn-error.log
 .DS_Store
+.pnpm-store

README.md

@@ -13,12 +13,23 @@ For better documentation checkout this [notion](https://www.notion.so/teaxyz/tea
 | nodejs.org |  >=16   |
 | pnpm.io    |  >=7.18.2 |
 | rust-lang.org |  >=1.62 |
+| rust-lang.org/cargo |  >=0.66 |
+| xcfile.dev | >=0.0.110 |
 
-# Getting Started
+## Tasks
+
+### setup
 ```sh
 pnpm install
 ```
 
+### build
+```sh
+pnpm install
+pnpm build:gui
+```
+
+## Development
 To develop the GUI within Tauri Webview
 ```
 $ pnpm dev:gui
@@ -28,11 +39,6 @@ To develop the GUI within your local browser at localhost:8080
 ```
 $ pnpm web:gui
 ```
-# Build
-```sh
-pnpm install
-pnpm build:gui
-```
 
 # Creating a release
 Tag any commit in the main branch, then push directly to the main branch.

devops/ubuntu/Dockerfile

@@ -0,0 +1,17 @@
+
+FROM ubuntu:20.04
+
+RUN apt-get update
+ARG DEBIAN_FRONTEND=noninteractive
+RUN apt-get install -y libgtk-3-dev webkit2gtk-4.0
+RUN apt-get install -y --fix-missing libappindicator3-dev librsvg2-dev
+RUN apt-get install -y --fix-missing patchelf pkg-config curl libatomic1 gcc-multilib libsoup-gnome2.4
+RUN apt-get install -y libjavascriptcoregtk-4.0-dev wget
+RUN curl https://tea.xyz -o ./tea.sh
+RUN chmod +x tea.sh
+RUN ./tea.sh --yes
+# Copies your code file from your action repository to the filesystem path `/` of the container
+COPY entrypoint.sh /entrypoint.sh
+
+# Code file to execute when the docker container starts up (`entrypoint.sh`)
+ENTRYPOINT ["/entrypoint.sh"]

devops/ubuntu/action.yml

@@ -0,0 +1,8 @@
+name: 'Tea Ubuntu'
+description: 'build gui using custom ubuntu'
+
+runs:
+  using: 'docker'
+  image: 'Dockerfile'
+  args:
+    - build

devops/ubuntu/entrypoint.sh

@@ -0,0 +1,3 @@
+#!/bin/sh -l
+tea -SE .
+tea -ES xc build

modules/gui/setupTest.js

@@ -1,4 +1,4 @@
 import matchers from '@testing-library/jest-dom/matchers';
-import { expect, vi } from 'vitest';
+import { expect } from 'vitest';
 
 expect.extend(matchers);

modules/gui/src/components/EssentialWorkshops/EssentialWorkshops.svelte

@@ -6,12 +6,15 @@
 	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
 	import { postsStore } from '$libs/stores';
 
+	export let title = 'Workshops';
+	export let ctaLabel = 'View all';
+
 	let courses: AirtablePost[] = [];
 
 	postsStore.subscribeByTag('course', (posts) => (courses = posts));
 </script>
 
-<PanelHeader title="Essential Workshops" ctaLabel="View all" ctaLink="/" />
+<PanelHeader {title} {ctaLabel} ctaLink="/" />
 {#if courses.length}
 	<Posts posts={courses} linkTarget="_blank" />
 {:else}

modules/gui/src/components/FooterLinks/FooterLinks.svelte

@@ -12,7 +12,7 @@
 					here.
 				</p>
 				<div class="w-3/4">
-					<img src="/static/images/footer-grid-element.svg" alt="grid" />
+					<img src="/images/footer-grid-element.svg" alt="grid" />
 				</div>
 			</div>
 

modules/gui/src/components/Packages/Packages.svelte

@@ -5,9 +5,13 @@
 	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
 	import PackageCard from '@tea/ui/PackageCard/PackageCard.svelte';
 	import { onMount } from 'svelte';
+
+	// TODO: replace with getting foundation essentials
 	import { getTopPackages } from '$libs/api/mock';
 	import { installPackage } from '@api';
 
+	export let title = 'Packages';
+
 	let packages: GUIPackage[] = [];
 
 	const getCTALabel = (state: PackageStates): string => {
@@ -27,7 +31,7 @@
 </script>
 
 <header class="flex items-center justify-between border border-gray bg-black p-4 text-primary">
-	<span>TOP PACKAGES</span>
+	<span>{title}</span>
 	<a href="/packages" class="font-sono text-sm underline">View all packages</a>
 </header>
 <ul class="grid grid-cols-3 bg-black">

modules/gui/src/components/PageHeader/PageHeader.svelte

@@ -1,3 +1,12 @@
-<header class="mb-8 font-machina text-6xl uppercase text-primary">
+<script lang="ts">
+	export let coverUrl = '';
+</script>
+
+<figure class="relative mb-8 h-32 w-full font-machina uppercase">
+	{#if coverUrl}
+		<img src={coverUrl} class="absolute z-0 h-32 w-full object-cover" alt="cover" />
+	{/if}
+	<div class="absolute bottom-0 z-10 text-6xl leading-[32px] text-primary">
 		<slot />
-</header>
+	</div>
+</figure>

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

@@ -2,27 +2,49 @@
 <script lang="ts">
 	import '$appcss';
 	import PageHeader from '$components/PageHeader/PageHeader.svelte';
-	import FeaturedPackages from '$components/FeaturedPackages/FeaturedPackages.svelte';
+	import EssentialWorkshops from '$components/EssentialWorkshops/EssentialWorkshops.svelte';
-	import GettingStarted from '$components/GettingStarted/GettingStarted.svelte';
+	import Packages from '$components/Packages/Packages.svelte';
-	import TopPackages from '$components/TopPackages/TopPackages.svelte';
 	import News from '$components/News/News.svelte';
-	import CategorizedPackages from '$components/CategorizedPackages/CategorizedPackages.svelte';
+
+	import HeaderCard from '@tea/ui/HeaderCard/HeaderCard.svelte';
+	import ListAction from '@tea/ui/ListAction/ListAction.svelte';
 </script>
 
 <div>
-	<PageHeader>Discover</PageHeader>
+	<PageHeader coverUrl="/images/headers/header_bg_1.png">Discover</PageHeader>
-	<section>
+	<section class="mt-8 mb-8">
-		<FeaturedPackages />
+		<Packages title="FOUNDATIN ESSENTIALS" />
 	</section>
-	<section class="mt-8">
+	<PageHeader coverUrl="/images/headers/header_bg_1.png">ASSET TYPE</PageHeader>
-		<GettingStarted />
+	<section class="mt-8 mb-8 flex gap-4">
+		<div>
+			<HeaderCard
+				title="Browser Packages"
+				imgUrl="/images/bored-ape.png"
+				ctaUrl="/packages"
+				ctaLabel="Browse packages >"
+				articleTitle="What are packages?"
+				description="Collections of files aggregated to form larger frameworks & functions. Think Python or Node.js."
+			/>
+			<ListAction title="Top packages this week" mainCtaTitle="VIEW ALL PACKAGES" />
+		</div>
+		<div>
+			<HeaderCard
+				title="Browse Scripts"
+				imgUrl="/images/bored-ape.png"
+				ctaUrl="/packages"
+				ctaLabel="Browse scripts >"
+				articleTitle="What are scripts?"
+				description="Invisible applications that chain packages together in order to perform cool actions on your computer."
+			/>
+			<ListAction title="Top scripts this week" mainCtaTitle="VIEW ALL SCRIPTS" />
+		</div>
 	</section>
-	<section class="mt-8">
+	<PageHeader coverUrl="/images/headers/header_bg_1.png">TUTORIALS</PageHeader>
-		<TopPackages />
+	<section class="mt-8 mb-8">
-	</section>
+		<EssentialWorkshops title="WORKSHOPS TO GET STARTED" ctaLabel="Read more articles >" />
-	<section class="mt-8">
-		<CategorizedPackages />
 	</section>
+	<PageHeader coverUrl="/images/headers/header_bg_1.png">OPEN-SOURCE NEWS</PageHeader>
 	<section class="mt-8">
 		<News />
 	</section>

modules/ui/src/HeaderCard/HeaderCard.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import '../app.css';
+
+	export let title: string;
+	export let imgUrl: string;
+	export let ctaUrl: string;
+	export let ctaLabel: string;
+
+	export let articleTitle: string;
+	export let description: string;
+</script>
+
+<section class="border border-gray bg-black">
+	<header class="flex justify-between p-4 text-primary">
+		<h1 class="uppercase ">{title}</h1>
+		<a href={ctaUrl} class="text-sm">{ctaLabel}</a>
+	</header>
+	<figure class="h-40">
+		<img class="h-40 w-full object-cover" src={imgUrl} alt={title} />
+	</figure>
+	<article class="m-4 border border-gray p-4">
+		<h2 class="uppercase text-primary">{articleTitle}</h2>
+		<p class="text-gray">{description}</p>
+	</article>
+</section>

modules/ui/src/ListAction/ListAction.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import Button from '../Button/Button.svelte';
+
+	export let title: string;
+	export let mainCtaTitle: string;
+</script>
+
+<section class="bg-black">
+	<header class="w-full border border-gray p-2 text-primary">{title}</header>
+	<ul class="border border-b-0 border-r-0 border-l-0 border-gray">
+		<li class="flex content-center border border-t-0 border-gray">
+			<figure class="m-2 w-10 bg-gray" />
+			<div class="flex flex-grow pt-4 leading-10">
+				<div class="text-sm">Homebrew</div>
+				<div class="pl-2 text-sm text-gray">ver 1.21</div>
+			</div>
+			<div class="m-2 w-28 border border-gray">
+				<Button>INSTALL</Button>
+			</div>
+		</li>
+		<li class="flex content-center border border-t-0 border-gray">
+			<figure class="m-2 w-10 bg-gray" />
+			<div class="flex flex-grow pt-4 leading-10">
+				<div class="text-sm">Homebrew</div>
+				<div class="pl-2 text-sm text-gray">ver 1.21</div>
+			</div>
+			<div class="m-2 w-28 border border-gray">
+				<Button>INSTALL</Button>
+			</div>
+		</li>
+		<li class="flex content-center border border-t-0 border-gray">
+			<figure class="m-2 w-10 bg-gray" />
+			<div class="flex flex-grow pt-4 leading-10">
+				<div class="text-sm">Homebrew</div>
+				<div class="pl-2 text-sm text-gray">ver 1.21</div>
+			</div>
+			<div class="m-2 w-28 border border-gray">
+				<Button>INSTALL</Button>
+			</div>
+		</li>
+		<li class="flex content-center border border-t-0 border-gray">
+			<figure class="m-2 w-10 bg-gray" />
+			<div class="flex flex-grow pt-4 leading-10">
+				<div class="text-sm">Homebrew</div>
+				<div class="pl-2 text-sm text-gray">ver 1.21</div>
+			</div>
+			<div class="m-2 w-28 border border-gray">
+				<Button>INSTALL</Button>
+			</div>
+		</li>
+		<li class="flex content-center border border-t-0 border-gray">
+			<figure class="m-2 w-10 bg-gray" />
+			<div class="flex flex-grow pt-4 leading-10">
+				<div class="text-sm">Homebrew</div>
+				<div class="pl-2 text-sm text-gray">ver 1.21</div>
+			</div>
+			<div class="m-2 w-28 border border-gray">
+				<Button>INSTALL</Button>
+			</div>
+		</li>
+	</ul>
+	<footer class="w-full border border-t-0 border-gray text-gray">
+		<a href="/" class="flex w-full">
+			<Button>
+				<div class="flex w-full justify-between p-2">
+					<button>{mainCtaTitle}</button>
+					<i class="icon-right-arrow" />
+				</div>
+			</Button>
+		</a>
+	</footer>
+</section>