#186 cp svelte components into electron. WARNING: doesnt work like th…

…e tauri build yet

modules/desktop/.eslintignore

@@ -11,5 +11,6 @@ node_modules
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
-src-tauri/target/*
-coverage/*
+coverage/*
+build/*
+dist/*

modules/desktop/.prettierignore

@@ -12,12 +12,7 @@ pnpm-lock.yaml
 package-lock.json
 yarn.lock
 build
-/src-tauri/src/*
-/src-tauri/icons/*
-/src-tauri/target/**/*
-/src-tauri/build/*
-/src-tauri/Cargo.lock
-/src-tauri/Cargo.toml
-src-tauri
 coverage/*
-**/*.plist
+**/*.plist
+build/*
+dist/*

modules/desktop/README.md

@@ -10,10 +10,7 @@ Once you've created a project and installed dependencies with `npm install` (or
 
 ```bash
 # use if you need interaction with the rust handlers
-pnpm tauri dev
-
-# or if ui dev only
-pnpm run dev -- --open
+pnpm dev
 ```
 
 ## Building

modules/desktop/package.json

@@ -6,13 +6,17 @@
 	"author": "tea.xyz",
 	"main": "src/electron.cjs",
 	"scripts": {
+		"dev": "cross-env NODE_ENV=dev npm run dev:all",
+		"dev:all": "concurrently -n=svelte,electron -c='#ff3e00',blue \"npm run dev:svelte\" \"npm run dev:electron\"",
+		"dev:svelte": "vite dev",
+		"dev:electron": "electron src/electron.cjs",
 		"pack": "electron-builder --dir --config electron-builder.config.cjs",
 		"dist": "pnpm build && electron-builder --config electron-builder.config.cjs",
 		"package": "pnpm build && electron-builder --config electron-builder.config.cjs",
 		"dev:package": "pnpm build && electron-builder --config electron-builder.config.cjs --dir",
 		"electron": "concurrently --kill-others \"vite dev\" \"electron src/electron.cjs\"",
-		"dev": "vite dev --port 8080",
-		"build": "vite build",
+		"olddev": "vite dev",
+		"build": "vite build && cp build/app.html build/index.html",
 		"preview": "vite preview",
 		"unit:test": "vitest",
 		"coverage": "vitest run --coverage",
@@ -37,7 +41,8 @@
 		"@typescript-eslint/eslint-plugin": "^5.27.0",
 		"@typescript-eslint/parser": "^5.27.0",
 		"autoprefixer": "^10.4.13",
-		"concurrently": "^6.5.1",
+		"concurrently": "^7.6.0",
+		"cross-env": "^7.0.3",
 		"electron": "22.1.0",
 		"electron-builder": "^23.6.0",
 		"electron-reloader": "^1.2.3",
@@ -57,7 +62,7 @@
 		"tslib": "^2.3.1",
 		"typescript": "^4.7.4",
 		"vite": "^4.0.0",
-		"vitest": "^0.27.1"
+		"vitest": "^0.28.3"
 	},
 	"type": "module",
 	"dependencies": {
@@ -67,14 +72,17 @@
 		"@vitest/coverage-c8": "^0.27.1",
 		"bcryptjs": "^2.4.3",
 		"buffer": "^6.0.3",
+		"electron-context-menu": "^3.6.1",
 		"electron-log": "^4.4.8",
 		"electron-serve": "^1.1.0",
+		"electron-vite": "^1.0.18",
 		"electron-window-state": "^5.0.3",
 		"fuse.js": "^6.6.2",
 		"lodash": "^4.17.21",
 		"lorem-ipsum": "^2.0.8",
 		"svelte-markdown": "^0.2.3",
 		"svelte-watch-resize": "^1.0.3",
+		"upath": "^2.0.1",
 		"url-join": "^5.0.0"
 	},
 	"pnpm": {

modules/desktop/playwright.config.ts

@@ -0,0 +1,10 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+	webServer: {
+		command: 'npm run build && npm run preview',
+		port: 4173
+	}
+};
+
+export default config;

modules/desktop/postcss.config.cjs

@@ -0,0 +1,12 @@
+const { theme, plugins } = require('@tea/ui/tailwind.config.cjs');
+
+module.exports = {
+	plugins: {
+		tailwindcss: {
+			content: ['./src/**/*.{html,svelte,ts,js}', '../ui/src/**/*.{html,svelte,ts,js}'],
+			theme,
+			plugins: [...plugins]
+		},
+		autoprefixer: {}
+	}
+};

modules/desktop/setupTest.js

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

modules/desktop/src/app.css

@@ -1,59 +1,43 @@
-:root {
-	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-		'Open Sans', 'Helvetica Neue', sans-serif;
-}
-
-.text-primary {
-	color: #ff3e00;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-.button {
-	padding: 10px 10px;
-	display: inline-block;
-	background-color: #ff3e00;
-	color: white;
-	text-decoration: none;
-	border: none;
+@font-face {
+	font-family: 'pp-neue-machina';
+	src: url('/fonts/PPNeueMachina-InktrapLight.woff');
 }
 
-/* The sidebar menu */
-.sidenav {
-	height: 100%; /* Full-height: remove this if you want "auto" height */
-	width: 160px; /* Set the width of the sidebar */
-	position: fixed; /* Fixed Sidebar (stay in place on scroll) */
-	z-index: 1; /* Stay on top */
-	top: 0; /* Stay at the top */
-	left: 0;
-	background-color: #ff3e00;
-	overflow-x: hidden; /* Disable horizontal scroll */
-	padding-top: 20px;
+@font-face {
+	font-family: 'sono';
+	src: url('/fonts/Sono-Light.woff2');
 }
 
-.sidenav a {
-	padding: 6px 8px 6px 16px;
-	text-decoration: none;
-	font-size: 20px;
-	font-weight: bold;
-	color: white;
-	display: block;
+html {
+	background-color: #1a1a1a;
+	color: #fff;
+	user-select: none;
+	cursor: default;
 }
 
-.sidenav a:hover {
-	background-color: #f1f1f1;
-	color: $primary;
+@layer base {
+	html {
+		font-family: sono, sans-serif;
+	}
 }
 
-.main {
-	margin-left: 160px; /* Same as the width of the sidebar */
-	padding: 0px 10px;
+.text-primary,
+header,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+button,
+.click-copy {
+	font-family: 'pp-neue-machina' !important;
 }
 
-/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
-@media screen and (max-height: 450px) {
-	.sidenav {
-		padding-top: 15px;
-	}
-	.sidenav a {
-		font-size: 18px;
-	}
+.pk-version {
+	font-family: 'sono';
 }

modules/desktop/src/app.d.ts

@@ -0,0 +1,9 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+// and what to do when importing types
+declare namespace App {
+	// interface Locals {}
+	// interface PageData {}
+	// interface Error {}
+	// interface Platform {}
+}

modules/desktop/src/app.html

@@ -2,14 +2,11 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="/favicon.ico" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<script>
-			const ipc = require('electron').ipcRenderer;
-		</script>
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width" />
 		%sveltekit.head%
 	</head>
 	<body>
-		<div id="svelte">%sveltekit.body%</div>
+		<div>%sveltekit.body%</div>
 	</body>
 </html>

modules/desktop/src/components/Badges/Badges.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import '$appcss';
+	import Placeholder from '$components/Placeholder/Placeholder.svelte';
+
+	export let arg1: string;
+</script>
+
+<Placeholder label="Badges" />
+<h1>{arg1 || 'tes'}</h1>

modules/desktop/src/components/BigBlackSpace/BigBlackSpace.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import '$appcss';
+</script>
+
+<section class="border-gray h-56 border bg-black" />

modules/desktop/src/components/CategorizedPackages/CategorizedPackages.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import PanelHeader from '@tea/ui/PanelHeader/PanelHeader.svelte';
+	import MiniPackageCard from '@tea/ui/MiniPackageCard/MiniPackageCard.svelte';
+	import type { Category } from '$libs/types';
+	import { onMount } from 'svelte';
+	import { getCategorizedPackages } from '@api';
+
+	let categories: Category[] = [];
+
+	onMount(async () => {
+		categories = await getCategorizedPackages();
+	});
+</script>
+
+{#each categories as category}
+	<PanelHeader ctaLabel={category.cta_label} ctaLink={'#'} title={category.label} />
+	<ul class="border-gray grid grid-cols-3 border border-r-0 bg-black">
+		{#each category.packages as pkg}
+			<div class="border-gray border border-t-0 border-l-0 p-4">
+				<MiniPackageCard {pkg} ctaLabel="DETAILS" link={`/packages/${pkg.slug}`} />
+			</div>
+		{/each}
+	</ul>
+{/each}

modules/desktop/src/components/CliBanner/CliBanner.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import '$appcss';
+	import Button from '@tea/ui/Button/Button.svelte';
+	let copyButtonText = 'COPY';
+	const copyValue = `sh <(curl https://tea.xyz)`;
+
+	const onCopy = () => {
+		copyButtonText = 'COPIED!';
+		navigator.clipboard.writeText(copyValue);
+	};
+</script>
+
+<section class="border-gray mt-4 border bg-black">
+	<header class="flex flex-col items-center py-8">
+		<figure>
+			<img alt="tea" src="/images/tea-icon.png" class="rounded-md" />
+		</figure>
+		<p class="text-primary">tea.cli ver. 0.6.0</p>
+	</header>
+	<footer class="border-gray flex h-20 border-t text-white">
+		<input class="flex-grow bg-black pl-4" disabled value="sh <(curl tea.xyz)>" />
+		<Button class="w-16 border-0 border-l-2 text-sm" onClick={onCopy}>{copyButtonText}</Button>
+		<Button class="w-56 border-0 border-l-2 text-sm" onClick={() => console.log('cli')}
+			>OPEN IN TERMINAL</Button
+		>
+	</footer>
+</section>

modules/desktop/src/components/EssentialWorkshops/EssentialWorkshops.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import '$appcss';
+	import type { AirtablePost } from '@tea/ui/types';
+	import Posts from '@tea/ui/Posts/Posts.svelte';
+	import PanelHeader from '@tea/ui/PanelHeader/PanelHeader.svelte';
+	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} {ctaLabel} ctaLink="/" />
+{#if courses.length}
+	<Posts posts={courses} linkTarget="_blank" />
+{:else}
+	<section class="border-gray h-64 border bg-black p-4">
+		<Preloader />
+	</section>
+{/if}

modules/desktop/src/components/FeaturedCourses/FeaturedCourses.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import '$appcss';
+	import { postsStore } from '$libs/stores';
+	import type { Course } from '$libs/types';
+
+	import Gallery from '@tea/ui/Gallery/Gallery.svelte';
+
+	let courses: Course[] = [];
+
+	postsStore.subscribeByTag('featured_course', (posts) => {
+		courses = posts.map((post) => {
+			return {
+				title: post.title,
+				sub_title: post.sub_title,
+				banner_image_url: post.thumb_image_url,
+				link: post.link
+			} as Course;
+		});
+	});
+</script>
+
+<Gallery
+	title="FEATURED COURSES"
+	items={courses.map((course) => ({
+		title: course.title,
+		subTitle: course.sub_title,
+		imageUrl: course.banner_image_url,
+		link: course.link
+	}))}
+	linkTarget="_blank"
+/>