From 8c1dc5388fbd1b854db4a035eb3f0db8db9d105d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= Date: Mon, 22 Jan 2024 22:58:55 +0100 Subject: [PATCH] refactor(webui): switch to SvelteKit | prettier everything --- webui/.eslintrc.cjs | 28 +-- webui/README.md | 10 +- webui/package.json | 132 +++++++-------- webui/src/lib/api.ts | 8 +- webui/src/lib/components/BrowseAdd.svelte | 144 ++++++++-------- .../src/lib/components/display/UpEntry.svelte | 101 +++++------ .../components/display/UpObjectCard.svelte | 92 +++++----- .../components/display/UpObjectLabel.svelte | 72 ++++---- webui/src/lib/components/layout/Footer.svelte | 160 +++++++++--------- webui/src/lib/components/util.scss | 24 +-- .../src/lib/components/utils/Ellipsis.svelte | 16 +- .../lib/components/utils/IconButton.svelte | 136 +++++++-------- .../lib/components/utils/LabelBorder.svelte | 96 +++++------ .../lib/components/utils/ProgessBar.svelte | 114 ++++++------- webui/src/lib/components/utils/Spinner.svelte | 40 ++--- webui/src/lib/debug.ts | 60 ++++--- webui/src/lib/i18n/en.json | 22 +-- webui/src/lib/i18n/index.ts | 14 +- webui/src/lib/notifications.ts | 28 +-- webui/src/lib/styles/colors-app.scss | 139 +++++++-------- webui/src/lib/styles/common.scss | 66 ++++---- webui/src/lib/styles/fonts.scss | 12 +- webui/src/lib/styles/main.scss | 44 ++--- webui/src/lib/types/base.ts | 36 ++-- webui/src/lib/util/browse.ts | 6 +- webui/src/lib/util/mediatypes.ts | 66 ++++---- webui/src/lib/util/title.ts | 16 +- webui/vite.config.ts | 52 +++--- 28 files changed, 855 insertions(+), 879 deletions(-) diff --git a/webui/.eslintrc.cjs b/webui/.eslintrc.cjs index 252e67b..d443827 100644 --- a/webui/.eslintrc.cjs +++ b/webui/.eslintrc.cjs @@ -28,15 +28,21 @@ module.exports = { } } ], - rules: { - "svelte/valid-compile": ["error", { "ignoreWarnings": true }], - "@typescript-eslint/no-explicit-any": "warn", - "@typescript-eslint/no-unused-vars": ["warn", { - argsIgnorePattern: "^_", - varsIgnorePattern: "^_" - }], - "no-console": ["error", { - allow: ["debug", "warn", "error"] - }], - }, + rules: { + 'svelte/valid-compile': ['error', { ignoreWarnings: true }], + '@typescript-eslint/no-explicit-any': 'warn', + '@typescript-eslint/no-unused-vars': [ + 'warn', + { + argsIgnorePattern: '^_', + varsIgnorePattern: '^_' + } + ], + 'no-console': [ + 'error', + { + allow: ['debug', 'warn', 'error'] + } + ] + } }; diff --git a/webui/README.md b/webui/README.md index 76c32b5..bb2350d 100644 --- a/webui/README.md +++ b/webui/README.md @@ -1,6 +1,6 @@ -*Psst — looking for a more complete solution? Check out [SvelteKit](https://kit.svelte.dev), the official framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing.* +_Psst — looking for a more complete solution? Check out [SvelteKit](https://kit.svelte.dev), the official framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing._ -*Looking for a shareable component template instead? You can [use SvelteKit for that as well](https://kit.svelte.dev/docs#packaging) or the older [sveltejs/component-template](https://github.com/sveltejs/component-template)* +_Looking for a shareable component template instead? You can [use SvelteKit for that as well](https://kit.svelte.dev/docs#packaging) or the older [sveltejs/component-template](https://github.com/sveltejs/component-template)_ --- @@ -15,8 +15,7 @@ npx degit sveltejs/template svelte-app cd svelte-app ``` -*Note that you will need to have [Node.js](https://nodejs.org) installed.* - +_Note that you will need to have [Node.js](https://nodejs.org) installed._ ## Get started @@ -49,12 +48,11 @@ npm run build You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com). - ## Single-page app mode By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere. -If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json: +If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for _any_ path. You can make it so by editing the `"start"` command in package.json: ```js "start": "sirv public --single" diff --git a/webui/package.json b/webui/package.json index 60d54c3..1a3c10c 100644 --- a/webui/package.json +++ b/webui/package.json @@ -1,68 +1,68 @@ { - "name": "upend-kestrel", - "version": "2.0.0", - "private": true, - "type": "module", - "scripts": { - "dev": "vite dev", - "build": "vite build", - "preview": "vite preview", - "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", - "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", - "lint": "prettier --check . && eslint .", - "format": "prettier --write ." - }, - "devDependencies": { - "@sveltejs/adapter-auto": "^3.0.0", - "@sveltejs/kit": "^2.0.0", - "@sveltejs/vite-plugin-svelte": "^3.0.0", - "@types/eslint": "8.56.0", - "@typescript-eslint/eslint-plugin": "^6.0.0", - "@typescript-eslint/parser": "^6.0.0", - "eslint": "^8.56.0", - "eslint-config-prettier": "^9.1.0", - "eslint-plugin-svelte": "^2.35.1", - "prettier": "^3.1.1", - "prettier-plugin-svelte": "^3.1.2", - "svelte": "^4.2.7", - "svelte-check": "^3.6.0", - "tslib": "^2.4.1", - "typescript": "^5.0.0", - "vite": "^5.0.3" - }, - "dependencies": { - "@ibm/plex": "^6.3.0", - "@recogito/annotorious": "^2.7.11", - "@types/d3": "^7.4.3", - "@types/debug": "^4.1.12", - "@types/dompurify": "^3.0.5", - "@types/lodash": "^4.14", - "@types/marked": "^4.3.2", - "@types/node": "^18.19.8", - "@types/three": "^0.160.0", - "@types/wavesurfer.js": "^6.0.12", - "@upnd/upend": "file:../tools/upend_js", - "@upnd/wasm-web": "file:../tools/upend_wasm/pkg-web", - "boxicons": "^2.1.4", - "d3": "^7.8.5", - "date-fns": "^2.30.0", - "debug": "^4.3.4", - "dompurify": "^2.4.7", - "filesize": "^8.0.7", - "history": "^5.3.0", - "i18next": "^22.5.1", - "lodash": "^4.17.21", - "lru-cache": "^6.0.0", - "marked": "^4.3.0", - "match-sorter": "^6.3.1", - "mitt": "^3.0.1", - "normalize.css": "^8.0.1", - "sass": "^1.66.1", - "sirv-cli": "^2.0.2", - "sswr": "^1.11.0", - "svelte-i18next": "^1.2.2", - "three": "^0.147.0", - "vite-plugin-static-copy": "^0.13.1", - "wavesurfer.js": "^6.6.4" - } + "name": "upend-kestrel", + "version": "2.0.0", + "private": true, + "type": "module", + "scripts": { + "dev": "vite dev", + "build": "vite build", + "preview": "vite preview", + "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", + "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", + "lint": "prettier --check . && eslint .", + "format": "prettier --write ." + }, + "devDependencies": { + "@sveltejs/adapter-auto": "^3.0.0", + "@sveltejs/kit": "^2.0.0", + "@sveltejs/vite-plugin-svelte": "^3.0.0", + "@types/eslint": "8.56.0", + "@typescript-eslint/eslint-plugin": "^6.0.0", + "@typescript-eslint/parser": "^6.0.0", + "eslint": "^8.56.0", + "eslint-config-prettier": "^9.1.0", + "eslint-plugin-svelte": "^2.35.1", + "prettier": "^3.1.1", + "prettier-plugin-svelte": "^3.1.2", + "svelte": "^4.2.7", + "svelte-check": "^3.6.0", + "tslib": "^2.4.1", + "typescript": "^5.0.0", + "vite": "^5.0.3" + }, + "dependencies": { + "@ibm/plex": "^6.3.0", + "@recogito/annotorious": "^2.7.11", + "@types/d3": "^7.4.3", + "@types/debug": "^4.1.12", + "@types/dompurify": "^3.0.5", + "@types/lodash": "^4.14", + "@types/marked": "^4.3.2", + "@types/node": "^18.19.8", + "@types/three": "^0.160.0", + "@types/wavesurfer.js": "^6.0.12", + "@upnd/upend": "file:../tools/upend_js", + "@upnd/wasm-web": "file:../tools/upend_wasm/pkg-web", + "boxicons": "^2.1.4", + "d3": "^7.8.5", + "date-fns": "^2.30.0", + "debug": "^4.3.4", + "dompurify": "^2.4.7", + "filesize": "^8.0.7", + "history": "^5.3.0", + "i18next": "^22.5.1", + "lodash": "^4.17.21", + "lru-cache": "^6.0.0", + "marked": "^4.3.0", + "match-sorter": "^6.3.1", + "mitt": "^3.0.1", + "normalize.css": "^8.0.1", + "sass": "^1.66.1", + "sirv-cli": "^2.0.2", + "sswr": "^1.11.0", + "svelte-i18next": "^1.2.2", + "three": "^0.147.0", + "vite-plugin-static-copy": "^0.13.1", + "wavesurfer.js": "^6.6.4" + } } diff --git a/webui/src/lib/api.ts b/webui/src/lib/api.ts index 99f0a8e..0cb7876 100644 --- a/webui/src/lib/api.ts +++ b/webui/src/lib/api.ts @@ -1,6 +1,6 @@ -import { UpEndApi } from "@upnd/upend"; -import { UpEndWasmExtensionsWeb } from "@upnd/upend/wasm/web"; -import wasmURL from "@upnd/wasm-web/upend_wasm_bg.wasm?url"; +import { UpEndApi } from '@upnd/upend'; +import { UpEndWasmExtensionsWeb } from '@upnd/upend/wasm/web'; +import wasmURL from '@upnd/wasm-web/upend_wasm_bg.wasm?url'; const wasm = new UpEndWasmExtensionsWeb(wasmURL); -export default new UpEndApi({ instanceUrl: "/", wasmExtensions: wasm }); +export default new UpEndApi({ instanceUrl: '/', wasmExtensions: wasm }); diff --git a/webui/src/lib/components/BrowseAdd.svelte b/webui/src/lib/components/BrowseAdd.svelte index 338f6f4..9f1b8ea 100644 --- a/webui/src/lib/components/BrowseAdd.svelte +++ b/webui/src/lib/components/BrowseAdd.svelte @@ -1,90 +1,90 @@
(editable = true)} - on:keydown={(ev) => { - if (["Space", "Enter"].includes(ev.key)) editable = true; - }} + class="view" + class:editable + on:click={() => (editable = true)} + on:keydown={(ev) => { + if (['Space', 'Enter'].includes(ev.key)) editable = true; + }} > -
- -
- {#if editable} -
- { - dispatch("input", ev.detail); - editable = false; - }} - on:focus={(ev) => { - if (!ev.detail) editable = false; - }} - /> -
- {/if} +
+ +
+ {#if editable} +
+ { + dispatch('input', ev.detail); + editable = false; + }} + on:focus={(ev) => { + if (!ev.detail) editable = false; + }} + /> +
+ {/if}
diff --git a/webui/src/lib/components/display/UpEntry.svelte b/webui/src/lib/components/display/UpEntry.svelte index f33ae85..88ddab5 100644 --- a/webui/src/lib/components/display/UpEntry.svelte +++ b/webui/src/lib/components/display/UpEntry.svelte @@ -1,67 +1,58 @@
-
- -
-
- {$attributeLabels[entry.attribute] || entry.attribute} -
-
- {#if entry.value.t === "Address"} - - {:else} - {entry.value.c} - {/if} -
+
+ +
+
+ {$attributeLabels[entry.attribute] || entry.attribute} +
+
+ {#if entry.value.t === 'Address'} + + {:else} + {entry.value.c} + {/if} +
diff --git a/webui/src/lib/components/display/UpObjectCard.svelte b/webui/src/lib/components/display/UpObjectCard.svelte index 7070dea..d653a4c 100644 --- a/webui/src/lib/components/display/UpObjectCard.svelte +++ b/webui/src/lib/components/display/UpObjectCard.svelte @@ -1,59 +1,59 @@
- -
- {#if thumbnail} - - {:else} -
- -
- {/if} -
- -
-
- + +
+ {#if thumbnail} + + {:else} +
+ +
+ {/if} +
+ +
+
+
diff --git a/webui/src/lib/components/display/UpObjectLabel.svelte b/webui/src/lib/components/display/UpObjectLabel.svelte index c44c86d..47bb547 100644 --- a/webui/src/lib/components/display/UpObjectLabel.svelte +++ b/webui/src/lib/components/display/UpObjectLabel.svelte @@ -1,48 +1,48 @@
- - {#if backpath.length} - - {#each backpath as component} - - {component} - - {/each} - - {/if} - - {label} - - + + {#if backpath.length} + + {#each backpath as component} + + {component} + + {/each} + + {/if} + + {label} + +
diff --git a/webui/src/lib/components/layout/Footer.svelte b/webui/src/lib/components/layout/Footer.svelte index 3013b4b..e6d2f2a 100644 --- a/webui/src/lib/components/layout/Footer.svelte +++ b/webui/src/lib/components/layout/Footer.svelte @@ -1,106 +1,106 @@ diff --git a/webui/src/lib/components/util.scss b/webui/src/lib/components/util.scss index d538e4d..9a3af70 100644 --- a/webui/src/lib/components/util.scss +++ b/webui/src/lib/components/util.scss @@ -1,17 +1,17 @@ section.labelborder { - margin-top: 0.66rem; + margin-top: 0.66rem; - header { - display: flex; - align-items: end; - justify-content: space-between; + header { + display: flex; + align-items: end; + justify-content: space-between; - border-bottom: 1px solid var(--foreground); - padding-bottom: 0.33rem; - margin-bottom: 0.33rem; + border-bottom: 1px solid var(--foreground); + padding-bottom: 0.33rem; + margin-bottom: 0.33rem; - h3 { - margin: 0; - } - } + h3 { + margin: 0; + } + } } diff --git a/webui/src/lib/components/utils/Ellipsis.svelte b/webui/src/lib/components/utils/Ellipsis.svelte index b59e8ad..a02f0f2 100644 --- a/webui/src/lib/components/utils/Ellipsis.svelte +++ b/webui/src/lib/components/utils/Ellipsis.svelte @@ -1,15 +1,15 @@
{value}
diff --git a/webui/src/lib/components/utils/IconButton.svelte b/webui/src/lib/components/utils/IconButton.svelte index 944a31c..8b03f31 100644 --- a/webui/src/lib/components/utils/IconButton.svelte +++ b/webui/src/lib/components/utils/IconButton.svelte @@ -1,88 +1,88 @@ diff --git a/webui/src/lib/components/utils/LabelBorder.svelte b/webui/src/lib/components/utils/LabelBorder.svelte index cb28df7..4273406 100644 --- a/webui/src/lib/components/utils/LabelBorder.svelte +++ b/webui/src/lib/components/utils/LabelBorder.svelte @@ -1,63 +1,63 @@
-
{ - if (hide) { - hidden = !hidden; - } - }} - on:keydown={(ev) => { - if (["Space", "Enter"].includes(ev.key) && hide) hidden = !hidden; - }} - > - -

- -
-
- -
+
{ + if (hide) { + hidden = !hidden; + } + }} + on:keydown={(ev) => { + if (['Space', 'Enter'].includes(ev.key) && hide) hidden = !hidden; + }} + > + +

+ +
+
+ +
diff --git a/webui/src/lib/components/utils/ProgessBar.svelte b/webui/src/lib/components/utils/ProgessBar.svelte index 938fa9b..9148e61 100644 --- a/webui/src/lib/components/utils/ProgessBar.svelte +++ b/webui/src/lib/components/utils/ProgessBar.svelte @@ -1,71 +1,67 @@ -
-
-
- - {value ? Math.round(value) : "?"}% - -
+
+
+
+ + {value ? Math.round(value) : '?'}% + +
diff --git a/webui/src/lib/components/utils/Spinner.svelte b/webui/src/lib/components/utils/Spinner.svelte index 850eeb4..5a501d4 100644 --- a/webui/src/lib/components/utils/Spinner.svelte +++ b/webui/src/lib/components/utils/Spinner.svelte @@ -1,30 +1,30 @@ diff --git a/webui/src/lib/debug.ts b/webui/src/lib/debug.ts index a3fdd96..dd9308f 100644 --- a/webui/src/lib/debug.ts +++ b/webui/src/lib/debug.ts @@ -1,36 +1,34 @@ export const DEBUG = { - imageQueueHalt: Boolean(localStorage.getItem("DEBUG:IMAGEHALT")), - mockJobs: parseInt(localStorage.getItem("DEBUG:MOCK:JOBS") || "0"), - mockNotifications: parseInt( - localStorage.getItem("DEBUG:MOCK:NOTIFICATIONS") || "0", - ), + imageQueueHalt: Boolean(localStorage.getItem('DEBUG:IMAGEHALT')), + mockJobs: parseInt(localStorage.getItem('DEBUG:MOCK:JOBS') || '0'), + mockNotifications: parseInt(localStorage.getItem('DEBUG:MOCK:NOTIFICATIONS') || '0') }; export function lipsum(length: number): string { - const words = [ - "lorem", - "ipsum", - "dolor", - "sit", - "amet", - "consectetur", - "adipiscing", - "elit", - "sed", - "do", - "eiusmod", - "tempor", - "incididunt", - "ut", - "labore", - "et", - "dolore", - "magna", - "aliqua", - ]; - const result = ["lorem", "ipsum"]; - for (let i = 0; i < length; i++) { - result.push(words[Math.floor(Math.random() * words.length)]); - } - return result.join(" "); + const words = [ + 'lorem', + 'ipsum', + 'dolor', + 'sit', + 'amet', + 'consectetur', + 'adipiscing', + 'elit', + 'sed', + 'do', + 'eiusmod', + 'tempor', + 'incididunt', + 'ut', + 'labore', + 'et', + 'dolore', + 'magna', + 'aliqua' + ]; + const result = ['lorem', 'ipsum']; + for (let i = 0; i < length; i++) { + result.push(words[Math.floor(Math.random() * words.length)]); + } + return result.join(' '); } diff --git a/webui/src/lib/i18n/en.json b/webui/src/lib/i18n/en.json index 0715079..f313ba5 100644 --- a/webui/src/lib/i18n/en.json +++ b/webui/src/lib/i18n/en.json @@ -1,13 +1,13 @@ { - "attributes": { - "FILE_MIME": "MIME type", - "FILE_SIZE": "File size", - "ADDED": "Added at", - "LAST_VISITED": "Last visited at", - "NUM_VISITED": "Times visited", - "ATTR_LABEL": "Label", - "IS": "Type", - "TYPE": "Type ID", - "MEDIA_DURATION": "Duration" - } + "attributes": { + "FILE_MIME": "MIME type", + "FILE_SIZE": "File size", + "ADDED": "Added at", + "LAST_VISITED": "Last visited at", + "NUM_VISITED": "Times visited", + "ATTR_LABEL": "Label", + "IS": "Type", + "TYPE": "Type ID", + "MEDIA_DURATION": "Duration" + } } diff --git a/webui/src/lib/i18n/index.ts b/webui/src/lib/i18n/index.ts index 650b200..3856cc0 100644 --- a/webui/src/lib/i18n/index.ts +++ b/webui/src/lib/i18n/index.ts @@ -1,12 +1,12 @@ -import i18next from "i18next"; -import { createI18nStore } from "svelte-i18next"; -import en from "./en.json"; +import i18next from 'i18next'; +import { createI18nStore } from 'svelte-i18next'; +import en from './en.json'; i18next.init({ - lng: "en", - resources: { - en, - }, + lng: 'en', + resources: { + en + } }); export const i18n = createI18nStore(i18next); diff --git a/webui/src/lib/notifications.ts b/webui/src/lib/notifications.ts index b7bb370..464bee8 100644 --- a/webui/src/lib/notifications.ts +++ b/webui/src/lib/notifications.ts @@ -1,27 +1,27 @@ -import mitt from "mitt"; +import mitt from 'mitt'; type NotifyEvents = { - notification: UpNotification; + notification: UpNotification; }; -export type UpNotificationLevel = "info" | "warning" | "error"; +export type UpNotificationLevel = 'info' | 'warning' | 'error'; export interface INotification { - id: string; - content: string; - level: UpNotificationLevel; + id: string; + content: string; + level: UpNotificationLevel; } export class UpNotification implements INotification { - id: string; - content: string; - level: UpNotificationLevel; + id: string; + content: string; + level: UpNotificationLevel; - constructor(content: string, level?: UpNotificationLevel) { - this.id = String(Math.random()); - this.content = content; - this.level = level || "info"; - } + constructor(content: string, level?: UpNotificationLevel) { + this.id = String(Math.random()); + this.content = content; + this.level = level || 'info'; + } } export const notify = mitt(); diff --git a/webui/src/lib/styles/colors-app.scss b/webui/src/lib/styles/colors-app.scss index 0a2812a..6c829cc 100644 --- a/webui/src/lib/styles/colors-app.scss +++ b/webui/src/lib/styles/colors-app.scss @@ -1,92 +1,83 @@ -@use "colors"; -@use "sass:color"; +@use 'colors'; +@use 'sass:color'; -@mixin rebase( - $rebase03, - $rebase02, - $rebase01, - $rebase00, - $rebase0, - $rebase1, - $rebase2, - $rebase3 -) { - --foreground: #{$rebase0}; - --foreground-lighter: #{$rebase1}; - --foreground-lightest: #{$rebase2}; - --background: #{$rebase03}; - --background-lighter: #{$rebase02}; - --background-lightest: #{color.adjust($rebase02, $lightness: 1.5%)}; - --primary: #{colors.$blue}; - --primary-lighter: #{color.adjust(colors.$blue, $lightness: 25%)}; +@mixin rebase($rebase03, $rebase02, $rebase01, $rebase00, $rebase0, $rebase1, $rebase2, $rebase3) { + --foreground: #{$rebase0}; + --foreground-lighter: #{$rebase1}; + --foreground-lightest: #{$rebase2}; + --background: #{$rebase03}; + --background-lighter: #{$rebase02}; + --background-lightest: #{color.adjust($rebase02, $lightness: 1.5%)}; + --primary: #{colors.$blue}; + --primary-lighter: #{color.adjust(colors.$blue, $lightness: 25%)}; - background-color: $rebase03; - color: $rebase0; + background-color: $rebase03; + color: $rebase0; } @mixin accentize($accent) { - a, - a:active, - a:visited, - code.url { - color: $accent; - } - h1, - h2, - h3, - h4, - h5, - h6 { - color: $accent; - } + a, + a:active, + a:visited, + code.url { + color: $accent; + } + h1, + h2, + h3, + h4, + h5, + h6 { + color: $accent; + } } @media (prefers-color-scheme: light) { - html { - @include rebase( - colors.$base3, - colors.$base2, - colors.$base1, - colors.$base0, - colors.$base00, - colors.$base01, - colors.$base02, - colors.$base03 - ); - } + html { + @include rebase( + colors.$base3, + colors.$base2, + colors.$base1, + colors.$base0, + colors.$base00, + colors.$base01, + colors.$base02, + colors.$base03 + ); + } } html { - @include rebase( - colors.$base03, - colors.$base02, - colors.$base01, - colors.$base00, - colors.$base0, - colors.$base1, - colors.$base2, - colors.$base3 - ); + @include rebase( + colors.$base03, + colors.$base02, + colors.$base01, + colors.$base00, + colors.$base0, + colors.$base1, + colors.$base2, + colors.$base3 + ); } html, body { - color: var(--foreground); - background: var(--background); + color: var(--foreground); + background: var(--background); - h1, - h2, - h3, - h4, - h5, - h6 { - color: var(--foreground-lighter); - border-color: var(--foreground); - } + h1, + h2, + h3, + h4, + h5, + h6 { + color: var(--foreground-lighter); + border-color: var(--foreground); + } - a, - a:active, - a:visited { - color: var(--foreground-lighter); - } + a, + a:active, + a:visited { + color: var(--foreground-lighter); + } } diff --git a/webui/src/lib/styles/common.scss b/webui/src/lib/styles/common.scss index f889a8d..17b4ebe 100644 --- a/webui/src/lib/styles/common.scss +++ b/webui/src/lib/styles/common.scss @@ -1,68 +1,68 @@ -@use "sass:color"; -@use "colors"; +@use 'sass:color'; +@use 'colors'; html { - box-sizing: border-box; + box-sizing: border-box; } * { - box-sizing: inherit; + box-sizing: inherit; } select { - background: var(--background-lighter); - color: var(--foreground); - font-family: var(--default-font); + background: var(--background-lighter); + color: var(--foreground); + font-family: var(--default-font); - border: 1px solid var(--foreground-lighter); - border-radius: 4px; + border: 1px solid var(--foreground-lighter); + border-radius: 4px; } .spinner { - font-size: 2em; + font-size: 2em; } .button { - border: 1px solid var(--foreground); - border-radius: 4px; + border: 1px solid var(--foreground); + border-radius: 4px; - background: var(--background-lighter); - color: var(--foreground); + background: var(--background-lighter); + color: var(--foreground); - padding: 0.25em 1em; - line-height: 1; + padding: 0.25em 1em; + line-height: 1; - display: block; - text-align: center; + display: block; + text-align: center; - cursor: pointer; + cursor: pointer; - input { - display: none; - } + input { + display: none; + } - &.disabled, - &:disabled { - pointer-events: none; - opacity: 0.7; - } + &.disabled, + &:disabled { + pointer-events: none; + opacity: 0.7; + } - @media screen and (max-width: 600px) { - padding: 0.5em; - } + @media screen and (max-width: 600px) { + padding: 0.5em; + } } .mark-entity::first-letter, .mark-entity *::first-letter { - color: color.scale(color.mix(colors.$base1, colors.$red), $saturation: -33%); + color: color.scale(color.mix(colors.$base1, colors.$red), $saturation: -33%); } .mark-attribute::first-letter, .mark-attribute *::first-letter { - color: color.mix(colors.$base1, colors.$green); + color: color.mix(colors.$base1, colors.$green); } .mark-value::first-letter, .mark-value *::first-letter { - color: color.mix(colors.$base1, colors.$blue); + color: color.mix(colors.$base1, colors.$blue); } diff --git a/webui/src/lib/styles/fonts.scss b/webui/src/lib/styles/fonts.scss index b42c10c..5868cd8 100644 --- a/webui/src/lib/styles/fonts.scss +++ b/webui/src/lib/styles/fonts.scss @@ -1,13 +1,13 @@ -@import "node_modules/@ibm/plex/scss/ibm-plex.scss"; +@import 'node_modules/@ibm/plex/scss/ibm-plex.scss'; html { - --default-font: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; - --monospace-font: "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Consolas", - "Inconsolata", "Hack", monospace; - font-size: 16px; + --default-font: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + --monospace-font: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Consolas', 'Inconsolata', 'Hack', + monospace; + font-size: 16px; } html, body { - font-family: var(--default-font); + font-family: var(--default-font); } diff --git a/webui/src/lib/styles/main.scss b/webui/src/lib/styles/main.scss index 6a0e253..66947e5 100644 --- a/webui/src/lib/styles/main.scss +++ b/webui/src/lib/styles/main.scss @@ -1,37 +1,37 @@ -@use "normalize.css/normalize.css"; -@use "colors-app"; -@use "fonts"; -@use "common"; +@use 'normalize.css/normalize.css'; +@use 'colors-app'; +@use 'fonts'; +@use 'common'; body { - height: calc(100vh - 2rem); - display: flex; - flex-direction: column; + height: calc(100vh - 2rem); + display: flex; + flex-direction: column; } main { - flex-grow: 1; + flex-grow: 1; } .image-queued, .image-loading { - animation: gradient 1.5s ease infinite; + animation: gradient 1.5s ease infinite; - color: transparent; // Hide alt-text + color: transparent; // Hide alt-text - @keyframes gradient { - 0% { - background-color: rgba(255, 255, 255, 0.2); - } - 50% { - background-color: rgba(255, 255, 255, 0.4); - } - 100% { - background-color: rgba(255, 255, 255, 0.2); - } - } + @keyframes gradient { + 0% { + background-color: rgba(255, 255, 255, 0.2); + } + 50% { + background-color: rgba(255, 255, 255, 0.4); + } + 100% { + background-color: rgba(255, 255, 255, 0.2); + } + } } .image-queued { - opacity: 0.5; + opacity: 0.5; } diff --git a/webui/src/lib/types/base.ts b/webui/src/lib/types/base.ts index 3fe291b..925fe0d 100644 --- a/webui/src/lib/types/base.ts +++ b/webui/src/lib/types/base.ts @@ -1,35 +1,35 @@ -import type { IValue } from "@upnd/upend/types"; +import type { IValue } from '@upnd/upend/types'; export type WidgetChange = - | AttributeCreate - | AttributeUpdate - | AttributeDelete - | EntryInAdd - | EntryInDelete; + | AttributeCreate + | AttributeUpdate + | AttributeDelete + | EntryInAdd + | EntryInDelete; export interface AttributeCreate { - type: "create"; - attribute: string; - value: IValue; + type: 'create'; + attribute: string; + value: IValue; } export interface AttributeUpdate { - type: "update"; - attribute: string; - value: IValue; + type: 'update'; + attribute: string; + value: IValue; } export interface AttributeDelete { - type: "delete"; - address: string; + type: 'delete'; + address: string; } export interface EntryInAdd { - type: "entry-add"; - address: string; + type: 'entry-add'; + address: string; } export interface EntryInDelete { - type: "entry-delete"; - address: string; + type: 'entry-delete'; + address: string; } diff --git a/webui/src/lib/util/browse.ts b/webui/src/lib/util/browse.ts index b3b0cca..af2f46b 100644 --- a/webui/src/lib/util/browse.ts +++ b/webui/src/lib/util/browse.ts @@ -1,6 +1,6 @@ -import type { Readable } from "svelte/store"; +import type { Readable } from 'svelte/store'; export interface BrowseContext { - index: Readable; - addresses: Readable; + index: Readable; + addresses: Readable; } diff --git a/webui/src/lib/util/mediatypes.ts b/webui/src/lib/util/mediatypes.ts index 5d012eb..0293b41 100644 --- a/webui/src/lib/util/mediatypes.ts +++ b/webui/src/lib/util/mediatypes.ts @@ -1,41 +1,37 @@ -import type { EntityInfo } from "@upnd/upend/types"; -import type { UpObject } from "@upnd/upend"; -import { ATTR_IN } from "@upnd/upend/constants"; +import type { EntityInfo } from '@upnd/upend/types'; +import type { UpObject } from '@upnd/upend'; +import { ATTR_IN } from '@upnd/upend/constants'; export function getTypes(entity: UpObject, entityInfo: EntityInfo) { - const mimeType = String(entity?.get("FILE_MIME")); + const mimeType = String(entity?.get('FILE_MIME')); - const video = - ["video", "application/x-matroska"].some((p) => mimeType.startsWith(p)) || - entity?.identify().some((l) => l.endsWith(".avi")); - const audio = - (["audio", "application/x-riff"].some((p) => mimeType.startsWith(p)) && - !video) || - [".ogg", ".mp3", ".wav"].some( - (suffix) => - entity?.identify().some((l) => l.toLowerCase().endsWith(suffix)), - ); - const image = mimeType.startsWith("image"); - const text = mimeType.startsWith("text"); - const pdf = mimeType.startsWith("application/pdf"); - const model = - mimeType?.startsWith("model") || - entity?.identify().some((l) => l.endsWith(".stl")); - const web = entityInfo?.t == "Url"; - const fragment = Boolean(entity?.get("ANNOTATES")); + const video = + ['video', 'application/x-matroska'].some((p) => mimeType.startsWith(p)) || + entity?.identify().some((l) => l.endsWith('.avi')); + const audio = + (['audio', 'application/x-riff'].some((p) => mimeType.startsWith(p)) && !video) || + ['.ogg', '.mp3', '.wav'].some((suffix) => + entity?.identify().some((l) => l.toLowerCase().endsWith(suffix)) + ); + const image = mimeType.startsWith('image'); + const text = mimeType.startsWith('text'); + const pdf = mimeType.startsWith('application/pdf'); + const model = mimeType?.startsWith('model') || entity?.identify().some((l) => l.endsWith('.stl')); + const web = entityInfo?.t == 'Url'; + const fragment = Boolean(entity?.get('ANNOTATES')); - const group = entity?.backlinks.some((e) => e.attribute == ATTR_IN); + const group = entity?.backlinks.some((e) => e.attribute == ATTR_IN); - return { - mimeType, - audio, - video, - image, - text, - pdf, - model, - web, - fragment, - group, - }; + return { + mimeType, + audio, + video, + image, + text, + pdf, + model, + web, + fragment, + group + }; } diff --git a/webui/src/lib/util/title.ts b/webui/src/lib/util/title.ts index dd37bb0..a61e60d 100644 --- a/webui/src/lib/util/title.ts +++ b/webui/src/lib/util/title.ts @@ -1,10 +1,10 @@ export function updateTitle(route?: string, title?: string) { - let newTitle = "UpEnd"; - if (route?.length) { - newTitle += ` | ${route}`; - } - if (title?.length) { - newTitle += ` - ${title}`; - } - document.title = newTitle; + let newTitle = 'UpEnd'; + if (route?.length) { + newTitle += ` | ${route}`; + } + if (title?.length) { + newTitle += ` - ${title}`; + } + document.title = newTitle; } diff --git a/webui/vite.config.ts b/webui/vite.config.ts index 89e1e47..343d176 100644 --- a/webui/vite.config.ts +++ b/webui/vite.config.ts @@ -1,30 +1,30 @@ -import { sveltekit } from "@sveltejs/kit/vite"; -import { defineConfig } from "vite"; -import { viteStaticCopy } from "vite-plugin-static-copy"; -import * as path from "path"; +import { sveltekit } from '@sveltejs/kit/vite'; +import { defineConfig } from 'vite'; +import { viteStaticCopy } from 'vite-plugin-static-copy'; +import * as path from 'path'; // https://vitejs.dev/config/ export default defineConfig({ - plugins: [ - sveltekit(), - viteStaticCopy({ - targets: [ - { - src: path.join(__dirname, "node_modules/boxicons", "fonts"), - dest: path.resolve(__dirname, "dist/vendor/boxicons"), - }, - { - src: path.join(__dirname, "node_modules/boxicons", "css"), - dest: path.resolve(__dirname, "dist/vendor/boxicons"), - }, - ], - }), - ], - server: { - proxy: { - "/api": { - target: "http://localhost:8093/", - }, - }, - }, + plugins: [ + sveltekit(), + viteStaticCopy({ + targets: [ + { + src: path.join(__dirname, 'node_modules/boxicons', 'fonts'), + dest: path.resolve(__dirname, 'dist/vendor/boxicons') + }, + { + src: path.join(__dirname, 'node_modules/boxicons', 'css'), + dest: path.resolve(__dirname, 'dist/vendor/boxicons') + } + ] + }) + ], + server: { + proxy: { + '/api': { + target: 'http://localhost:8093/' + } + } + } });