Merge pull request #3 from BLaZeKiLL/wip/webray-app

WebRay App

.github/workflows/cd.yml

@@ -0,0 +1,67 @@
+name: Contentious Deployment
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Rust
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          targets: wasm32-unknown-unknown
+
+      - name: Setup Rust Cache
+        uses: Swatinem/rust-cache@v2
+
+      - name: Setup Wasm Pack
+        run: curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Build
+        env:
+          BASE_PATH: '/${{ github.event.repository.name }}'
+        run: |
+          yarn build
+
+      - name: Upload Artifacts
+        uses: actions/upload-pages-artifact@v2
+        with:
+          # this should match the `pages` option in your adapter-static options
+          path: 'build/'
+
+  deploy:
+    needs: build_site
+    runs-on: ubuntu-latest
+
+    permissions:
+      pages: write
+      id-token: write
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - name: Deploy
+        id: deployment
+        uses: actions/deploy-pages@v2

.github/workflows/ci.yml

@@ -0,0 +1,46 @@
+name: Contentious Integration
+
+on:
+  pull_request:
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Rust
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          targets: wasm32-unknown-unknown
+
+      - name: Setup Rust Cache
+        uses: Swatinem/rust-cache@v2
+
+      - name: Setup Wasm Pack
+        run: curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Build
+        env:
+          BASE_PATH: '/${{ github.event.repository.name }}'
+        run: |
+          yarn build
+
+      - name: Upload Artifacts
+        uses: actions/upload-pages-artifact@v2
+        with:
+          # this should match the `pages` option in your adapter-static options
+          path: 'build/'

.prettierrc

@@ -3,6 +3,13 @@
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
-	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
 }

package.json

@@ -14,19 +14,29 @@
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
+		"@iconify/json": "^2.2.174",
+		"@skeletonlabs/skeleton": "^2.7.1",
+		"@skeletonlabs/tw-plugin": "^0.3.1",
 		"@sveltejs/adapter-static": "2.0.3",
 		"@sveltejs/kit": "^1.27.4",
+		"@types/node": "^20.11.5",
 		"@typescript-eslint/eslint-plugin": "^6.0.0",
 		"@typescript-eslint/parser": "^6.0.0",
+		"autoprefixer": "^10.4.16",
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^9.0.0",
 		"eslint-plugin-svelte": "^2.30.0",
+		"postcss": "^8.4.32",
+		"postcss-load-config": "^5.0.2",
 		"prettier": "^3.0.0",
 		"prettier-plugin-svelte": "^3.0.0",
+		"prettier-plugin-tailwindcss": "^0.5.9",
 		"svelte": "^4.2.7",
 		"svelte-check": "^3.6.0",
+		"tailwindcss": "^3.3.6",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
+		"unplugin-icons": "^0.18.2",
 		"vite": "^4.4.2",
 		"vite-plugin-top-level-await": "^1.4.1",
 		"vite-plugin-wasm": "^3.3.0",

postcss.config.cjs

@@ -0,0 +1,13 @@
+const tailwindcss = require('tailwindcss');
+const autoprefixer = require('autoprefixer');
+
+const config = {
+	plugins: [
+		//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
+		tailwindcss(),
+		//But others, like autoprefixer, need to run after,
+		autoprefixer
+	]
+};
+
+module.exports = config;

src/app.d.ts

@@ -1,5 +1,8 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
+
+import 'unplugin-icons/types/svelte';
+
 declare global {
 	namespace App {
 		// interface Error {}

src/app.html

@@ -1,12 +1,12 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="dark">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
+	<body data-theme="webray-theme" data-sveltekit-preload-data="hover">
+		<div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
 	</body>
 </html>

src/app.pcss

@@ -0,0 +1,11 @@
+/* Write your global styles here, in PostCSS syntax */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html, body { @apply h-full overflow-hidden; }
+
+/* Chrome, Safari and Opera */
+::-webkit-scrollbar {
+    width: 2px;
+}

src/lib/components/drawer/WebrayDrawer.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+</script>
+
+<div class="flex max-h-full flex-col py-2">
+    <span class="px-2">
+        <slot name="header"/>
+    </span>
+
+	<div
+		class="my-2 flex snap-y snap-mandatory scroll-py-4 flex-col gap-4 px-2 overflow-y-scroll scroll-smooth"
+	>
+		<slot />
+	</div>
+
+	<span class="px-2">
+		<slot name="footer"/>
+	</span>
+</div>

src/lib/components/fields/WebrayField.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+
+</script>
+
+<div class="snap-start shrink-0 card text-center">
+    Field
+</div>

src/lib/components/toolbar/WebrayToolbar.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+
+</script>
+
+<div class="flex flex-row p-2">
+    <span><slot name="lead"/></span>
+    <span class="grow"></span>
+    <span><slot name="center"/></span>
+    <span class="grow"></span>
+    <span><slot name="trail"/></span>
+</div>

src/lib/components/ui/WebrayAppBar.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    import { AppBar } from '@skeletonlabs/skeleton';
+</script>
+
+<AppBar gridColumns="grid-cols-3" slotDefault="place-self-center" slotTrail="place-content-end">
+	<svelte:fragment slot="lead">
+        File
+    </svelte:fragment>
+	<span>WebRay</span>
+	<svelte:fragment slot="trail">
+        GitHub
+    </svelte:fragment>
+</AppBar>

src/lib/components/ui/WebrayFooter.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+
+</script>
+
+<div class="w-full flex flex-col border-t border-surface-600">
+
+</div>

src/lib/components/ui/WebrayLeftBar.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import WebrayField from "../fields/WebrayField.svelte";
+    import WebrayDrawer from "../drawer/WebrayDrawer.svelte";
+
+    import Scene from "~icons/iconamoon/3d-light";
+</script>
+
+<div class="h-full flex flex-col border-r border-surface-600">
+    <WebrayDrawer>
+        <span slot="header" class="flex flex-row">
+            <Scene style="font-size: 1.5rem"/>
+        </span>
+
+        {#each Array.from({ length: 30 }) as _, i}
+            <WebrayField />
+        {/each}
+
+        <span slot="footer">
+            +
+        </span>
+    </WebrayDrawer>
+</div>

src/lib/components/ui/WebrayRenderBar.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import WebrayToolbar from "../toolbar/WebrayToolbar.svelte"
+
+    import Download from "~icons/uil/image-download";
+    import Render from "~icons/material-symbols/rocket-launch";
+</script>
+
+<WebrayToolbar>
+    <span slot="lead">
+        <Render style="font-size: 1.5rem"/>
+    </span>
+    <span slot="trail">
+        <Download style="font-size: 1.5rem"/>
+    </span>
+</WebrayToolbar>

src/lib/components/ui/WebrayRightBar.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import WebrayField from "../fields/WebrayField.svelte";
+    import WebrayDrawer from "../drawer/WebrayDrawer.svelte";
+
+    import Camera from '~icons/material-symbols/android-camera-outline';
+    import RenderSettings from '~icons/cil/tv';
+</script>
+
+<div class="h-full flex flex-col border-l border-surface-600">
+    <div class="h-1/2">
+        <WebrayDrawer>
+            <h2 slot="header">
+                <Camera style="font-size: 1.5rem"/>
+            </h2>
+
+            {#each Array.from({ length: 10 }) as _, i}
+                <WebrayField />
+            {/each}
+        </WebrayDrawer>
+    </div>
+    <hr>
+    <div class="h-1/2">
+        <WebrayDrawer>
+            <h2 slot="header">
+                <RenderSettings style="font-size: 1.5rem"/>
+            </h2>
+
+            {#each Array.from({ length: 10 }) as _, i}
+                <WebrayField /> 
+            {/each}
+        </WebrayDrawer>
+    </div>
+</div>

src/routes/+layout.svelte

@@ -0,0 +1,42 @@
+<script>
+	import '../app.pcss';
+
+	import { AppShell } from '@skeletonlabs/skeleton';
+
+	import WebrayLeftBar from '$lib/components/ui/WebrayLeftBar.svelte';
+	import WebrayRightBar from '$lib/components/ui/WebrayRightBar.svelte';
+	import WebrayAppBar from '$lib/components/ui/WebrayAppBar.svelte';
+	import WebrayRenderBar from '$lib/components/ui/WebrayRenderBar.svelte';
+	import WebrayFooter from '$lib/components/ui/WebrayFooter.svelte';
+</script>
+
+<AppShell
+	slotPageContent="overflow-y-auto flex flex-col items-center bg-gray-950"
+	slotSidebarLeft="w-1/6 overflow-y-clip"
+	slotSidebarRight="w-1/6 overflow-y-clip"
+	slotPageFooter="h-1/6"
+>
+	<svelte:fragment slot="header">
+		<WebrayAppBar />
+	</svelte:fragment>
+
+	<svelte:fragment slot="sidebarLeft">
+		<WebrayLeftBar />
+	</svelte:fragment>
+
+	<svelte:fragment slot="sidebarRight">
+		<WebrayRightBar />
+	</svelte:fragment>
+
+	<svelte:fragment slot="pageHeader">
+		<WebrayRenderBar />
+	</svelte:fragment>
+
+	<!-- Router Slot -->
+	<slot />
+	<!-- ---- / ---- -->
+	<svelte:fragment slot="pageFooter">
+		<WebrayFooter />
+	</svelte:fragment>
+	<!-- (footer) -->
+</AppShell>