aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorMatt Strapp <matt@mattstrapp.net>2023-09-28 09:49:16 -0500
committerMatt Strapp <matt@mattstrapp.net>2023-09-28 09:49:16 -0500
commite430645e4a637148bcf6d5846a84fe97f85bc0a9 (patch)
treea7c49f980a4f7e8fd52c4b5622bce601c9a45ab2
parentLint (diff)
downloadtrinkets-e430645e4a637148bcf6d5846a84fe97f85bc0a9.tar
trinkets-e430645e4a637148bcf6d5846a84fe97f85bc0a9.tar.gz
trinkets-e430645e4a637148bcf6d5846a84fe97f85bc0a9.tar.bz2
trinkets-e430645e4a637148bcf6d5846a84fe97f85bc0a9.tar.lz
trinkets-e430645e4a637148bcf6d5846a84fe97f85bc0a9.tar.xz
trinkets-e430645e4a637148bcf6d5846a84fe97f85bc0a9.tar.zst
trinkets-e430645e4a637148bcf6d5846a84fe97f85bc0a9.zip
Make the website less ugly, especially on mobile
Signed-off-by: Matt Strapp <matt@mattstrapp.net>
-rw-r--r--app/package.json1
-rw-r--r--app/src/lib/svelte/Navigation.svelte42
-rw-r--r--app/src/lib/ts/truncate.worker.ts4
-rw-r--r--app/src/routes/+layout.svelte46
-rw-r--r--pnpm-lock.yaml16
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'}