diff options
Diffstat (limited to '')
| -rw-r--r-- | app/package.json | 1 | ||||
| -rw-r--r-- | app/src/lib/svelte/Navigation.svelte | 42 | ||||
| -rw-r--r-- | app/src/lib/ts/truncate.worker.ts | 4 | ||||
| -rw-r--r-- | app/src/routes/+layout.svelte | 46 | ||||
| -rw-r--r-- | pnpm-lock.yaml | 16 |
5 files changed, 91 insertions, 18 deletions
diff --git a/app/package.json b/app/package.json index 2905c41..217907e 100644 --- a/app/package.json +++ b/app/package.json @@ -5,6 +5,7 @@ "@floating-ui/dom": "1.5.2" }, "devDependencies": { + "@iconify/svelte": "^3.1.4", "@skeletonlabs/skeleton": "2.1.0", "@skeletonlabs/tw-plugin": "0.2.0", "@sveltejs/adapter-auto": "^2.1.0", diff --git a/app/src/lib/svelte/Navigation.svelte b/app/src/lib/svelte/Navigation.svelte index fd3c914..973924a 100644 --- a/app/src/lib/svelte/Navigation.svelte +++ b/app/src/lib/svelte/Navigation.svelte @@ -1,11 +1,45 @@ <script lang="ts"> - import { AppRail, AppRailAnchor } from '@skeletonlabs/skeleton'; + import Icon from '@iconify/svelte'; + import { AppRail, AppRailAnchor, getDrawerStore } from '@skeletonlabs/skeleton'; import { page } from '$app/stores'; + + const drawerStore = getDrawerStore(); + + function drawerClose(): void { + drawerStore.close(); + } </script> -<AppRail> +<AppRail data-sveltekit-reload> <svelte:fragment slot="lead"> - <AppRailAnchor href="/" selected={$page.url.pathname === '/'}>Home!</AppRailAnchor> + <AppRailAnchor href="/" selected={$page.url.pathname === '/'} on:click={drawerClose}> + <svelte:fragment slot="lead"> + <Icon icon="carbon:home" width="35" /> + </svelte:fragment> + Home! + </AppRailAnchor> + </svelte:fragment> + <AppRailAnchor + href="/truncate" + selected={$page.url.pathname === '/truncate'} + data-sveltekit-reload + on:click={drawerClose} + > + <svelte:fragment slot="lead"> + <Icon icon="carbon:page-break" width="35" /> + </svelte:fragment> + Truncate! + </AppRailAnchor> + <svelte:fragment slot="trail"> + <AppRailAnchor + href="https://github.com/rosstheross/rosstheross.github.io" + rel="noreferrer" + target="_blank" + > + <svelte:fragment slot="lead"> + <Icon icon="carbon:logo-github" width="35" /> + </svelte:fragment> + Source + </AppRailAnchor> </svelte:fragment> - <AppRailAnchor href="/truncate" selected={$page.url.pathname === '/truncate'}>Truncate!</AppRailAnchor> </AppRail> diff --git a/app/src/lib/ts/truncate.worker.ts b/app/src/lib/ts/truncate.worker.ts index ad00011..eaa65fe 100644 --- a/app/src/lib/ts/truncate.worker.ts +++ b/app/src/lib/ts/truncate.worker.ts @@ -1,9 +1,11 @@ import type { TruncateRequest, TruncateResponse } from '../types/truncate-worker'; onmessage = async (message: MessageEvent<TruncateRequest>) => { + console.log('File received. Truncating...'); const file = message.data.file; const buffer = await file.arrayBuffer(); const truncated = buffer.slice(0, message.data.size); - postMessage({ file: truncated } as TruncateResponse); }; + +console.log('Worker successfully loaded!'); diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte index 6ad0d22..519a11d 100644 --- a/app/src/routes/+layout.svelte +++ b/app/src/routes/+layout.svelte @@ -2,11 +2,19 @@ import { useRegisterSW } from 'virtual:pwa-register/svelte'; import { pwaInfo } from 'virtual:pwa-info'; import { onMount } from 'svelte'; + import { + AppShell, + AppBar, + getDrawerStore, + getToastStore, + initializeStores, + Toast, + Drawer + } from '@skeletonlabs/skeleton'; - import '../app.postcss'; - import { AppShell, AppBar, getToastStore, initializeStores, Toast } from '@skeletonlabs/skeleton'; import Navigation from '$lib/svelte/Navigation.svelte'; + import '../app.postcss'; // Floating UI for Popups // import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom'; // import { storePopup } from '@skeletonlabs/skeleton'; @@ -14,8 +22,15 @@ initializeStores(); + const drawerStore = getDrawerStore(); const toastStore = getToastStore(); + function drawerOpen() { + drawerStore.open({ + width: 'w-[80px]' + }); + } + onMount(async () => { if (pwaInfo) { useRegisterSW({ @@ -46,25 +61,30 @@ {@html webManifestLink} </svelte:head> +<Drawer> + <Navigation /> +</Drawer> + <Toast position="br" /> <!-- App Shell --> -<AppShell> +<AppShell slotSidebarLeft="w-0 lg:w-64"> <svelte:fragment slot="header"> <!-- App Bar --> <AppBar> <svelte:fragment slot="lead"> + <div class="flex items-center"> + <button class="lg:hidden btn btn-sm mr-4" on:click={drawerOpen}> + <span> + <svg viewBox="0 0 100 80" class="fill-token w-4 h-4"> + <rect width="100" height="20" /> + <rect y="30" width="100" height="20" /> + <rect y="60" width="100" height="20" /> + </svg> + </span> + </button> <strong class="text-xl uppercase">A!</strong> - </svelte:fragment> - <svelte:fragment slot="trail"> - <a - class="btn btn-sm variant-ghost-surface" - href="https://github.com/rosstheross/rosstheross.github.io" - target="_blank" - rel="noreferrer" - > - Frontend Source - </a> + </div> </svelte:fragment> </AppBar> </svelte:fragment> diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 43251d9..4ef157f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -21,6 +21,9 @@ importers: specifier: 1.5.2 version: 1.5.2 devDependencies: + '@iconify/svelte': + specifier: ^3.1.4 + version: 3.1.4(svelte@4.2.1) '@skeletonlabs/skeleton': specifier: 2.1.0 version: 2.1.0(svelte@4.2.1) @@ -1603,6 +1606,19 @@ packages: resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==} dev: true + /@iconify/svelte@3.1.4(svelte@4.2.1): + resolution: {integrity: sha512-YDwQlN46ka8KPRayDb7TivmkAPizfTXi6BSRNqa1IV0+byA907n8JcgQafA7FD//pW5XCuuAhVx6uRbKTo+CfA==} + peerDependencies: + svelte: '*' + dependencies: + '@iconify/types': 2.0.0 + svelte: 4.2.1 + dev: true + + /@iconify/types@2.0.0: + resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==} + dev: true + /@jridgewell/gen-mapping@0.3.3: resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==} engines: {node: '>=6.0.0'} |