diff options
Diffstat (limited to 'clients/www')
24 files changed, 489 insertions, 0 deletions
diff --git a/clients/www/.eslintignore b/clients/www/.eslintignore new file mode 100644 index 0000000..3897265 --- /dev/null +++ b/clients/www/.eslintignore @@ -0,0 +1,13 @@ +.DS_Store +node_modules +/build +/.svelte-kit +/package +.env +.env.* +!.env.example + +# Ignore files for PNPM, NPM and YARN +pnpm-lock.yaml +package-lock.json +yarn.lock diff --git a/clients/www/.eslintrc.cjs b/clients/www/.eslintrc.cjs new file mode 100644 index 0000000..ebc1958 --- /dev/null +++ b/clients/www/.eslintrc.cjs @@ -0,0 +1,30 @@ +module.exports = { + root: true, + extends: [ + 'eslint:recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:svelte/recommended', + 'prettier' + ], + parser: '@typescript-eslint/parser', + plugins: ['@typescript-eslint'], + parserOptions: { + sourceType: 'module', + ecmaVersion: 2020, + extraFileExtensions: ['.svelte'] + }, + env: { + browser: true, + es2017: true, + node: true + }, + overrides: [ + { + files: ['*.svelte'], + parser: 'svelte-eslint-parser', + parserOptions: { + parser: '@typescript-eslint/parser' + } + } + ] +}; diff --git a/clients/www/.gitignore b/clients/www/.gitignore new file mode 100644 index 0000000..b8f5758 --- /dev/null +++ b/clients/www/.gitignore @@ -0,0 +1,12 @@ +.DS_Store +node_modules +/build +/.svelte-kit +/package +.env +.env.* +!.env.example +vite.config.js.timestamp-* +vite.config.ts.timestamp-* + +/dev-dist
\ No newline at end of file diff --git a/clients/www/.npmrc b/clients/www/.npmrc new file mode 100644 index 0000000..b6f27f1 --- /dev/null +++ b/clients/www/.npmrc @@ -0,0 +1 @@ +engine-strict=true diff --git a/clients/www/.prettierignore b/clients/www/.prettierignore new file mode 100644 index 0000000..3897265 --- /dev/null +++ b/clients/www/.prettierignore @@ -0,0 +1,13 @@ +.DS_Store +node_modules +/build +/.svelte-kit +/package +.env +.env.* +!.env.example + +# Ignore files for PNPM, NPM and YARN +pnpm-lock.yaml +package-lock.json +yarn.lock diff --git a/clients/www/.prettierrc b/clients/www/.prettierrc new file mode 100644 index 0000000..a77fdde --- /dev/null +++ b/clients/www/.prettierrc @@ -0,0 +1,9 @@ +{ + "useTabs": true, + "singleQuote": true, + "trailingComma": "none", + "printWidth": 100, + "plugins": ["prettier-plugin-svelte"], + "pluginSearchDirs": ["."], + "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] +} diff --git a/clients/www/.vscode/settings.json b/clients/www/.vscode/settings.json new file mode 100644 index 0000000..c35c0ee --- /dev/null +++ b/clients/www/.vscode/settings.json @@ -0,0 +1,117 @@ +{ + "prettier.documentSelectors": [ + "**/*.svelte" + ], + "tailwindCSS.classAttributes": [ + "class", + "accent", + "active", + "aspectRatio", + "background", + "badge", + "bgBackdrop", + "bgDark", + "bgDrawer", + "bgLight", + "blur", + "border", + "button", + "buttonAction", + "buttonBack", + "buttonClasses", + "buttonComplete", + "buttonDismiss", + "buttonNeutral", + "buttonNext", + "buttonPositive", + "buttonTextCancel", + "buttonTextConfirm", + "buttonTextFirst", + "buttonTextLast", + "buttonTextNext", + "buttonTextPrevious", + "buttonTextSubmit", + "caretClosed", + "caretOpen", + "chips", + "color", + "controlSeparator", + "controlVariant", + "cursor", + "display", + "element", + "fill", + "fillDark", + "fillLight", + "flex", + "gap", + "gridColumns", + "height", + "hover", + "inactive", + "indent", + "justify", + "meter", + "padding", + "position", + "regionAnchor", + "regionBackdrop", + "regionBody", + "regionCaption", + "regionCaret", + "regionCell", + "regionChildren", + "regionChipList", + "regionChipWrapper", + "regionCone", + "regionContent", + "regionControl", + "regionDefault", + "regionDrawer", + "regionFoot", + "regionFootCell", + "regionFooter", + "regionHead", + "regionHeadCell", + "regionHeader", + "regionIcon", + "regionInput", + "regionInterface", + "regionInterfaceText", + "regionLabel", + "regionLead", + "regionLegend", + "regionList", + "regionListItem", + "regionNavigation", + "regionPage", + "regionPanel", + "regionRowHeadline", + "regionRowMain", + "regionSummary", + "regionSymbol", + "regionTab", + "regionTrail", + "ring", + "rounded", + "select", + "shadow", + "slotDefault", + "slotFooter", + "slotHeader", + "slotLead", + "slotMessage", + "slotMeta", + "slotPageContent", + "slotPageFooter", + "slotPageHeader", + "slotSidebarLeft", + "slotSidebarRight", + "slotTrail", + "spacing", + "text", + "track", + "width", + "zIndex" + ] +}
\ No newline at end of file diff --git a/clients/www/README.md b/clients/www/README.md new file mode 100644 index 0000000..5c91169 --- /dev/null +++ b/clients/www/README.md @@ -0,0 +1,38 @@ +# create-svelte + +Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte). + +## Creating a project + +If you're seeing this, you've probably already done this step. Congrats! + +```bash +# create a new project in the current directory +npm create svelte@latest + +# create a new project in my-app +npm create svelte@latest my-app +``` + +## Developing + +Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: + +```bash +npm run dev + +# or start the server and open the app in a new browser tab +npm run dev -- --open +``` + +## Building + +To create a production version of your app: + +```bash +npm run build +``` + +You can preview the production build with `npm run preview`. + +> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. diff --git a/clients/www/package.json b/clients/www/package.json new file mode 100644 index 0000000..8c15875 --- /dev/null +++ b/clients/www/package.json @@ -0,0 +1,43 @@ +{ + "name": "website", + "description": "The actual website", + "version": "0.0.1", + "private": true, + "scripts": { + "dev": "vite dev", + "build": "vite build && cp .svelte-kit/output/server/sw.js.map .svelte-kit/output/server/workbox-*.map 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 --plugin-search-dir . --check . && eslint .", + "format": "prettier --plugin-search-dir . --write ." + }, + "devDependencies": { + "@skeletonlabs/skeleton": "2.3.0", + "@skeletonlabs/tw-plugin": "0.2.2", + "@sveltejs/adapter-auto": "^2.1.0", + "@sveltejs/adapter-static": "^2.0.3", + "@sveltejs/kit": "^1.26.0", + "@tailwindcss/forms": "0.5.6", + "@tailwindcss/typography": "0.5.10", + "@types/node": "20.8.7", + "@typescript-eslint/eslint-plugin": "^6.8.0", + "@typescript-eslint/parser": "^6.8.0", + "@vite-pwa/sveltekit": "^0.2.7", + "autoprefixer": "10.4.16", + "eslint": "^8.51.0", + "eslint-config-prettier": "^9.0.0", + "eslint-plugin-svelte": "^2.34.0", + "postcss": "8.4.31", + "prettier": "^3.0.3", + "prettier-plugin-svelte": "^3.0.3", + "svelte": "^4.2.2", + "svelte-check": "^3.5.2", + "tailwindcss": "3.3.3", + "tslib": "^2.6.2", + "typescript": "^5.2.2", + "vite": "^4.5.0", + "vite-plugin-tailwind-purgecss": "0.1.3" + }, + "type": "module" +}
\ No newline at end of file diff --git a/clients/www/postcss.config.cjs b/clients/www/postcss.config.cjs new file mode 100644 index 0000000..16dce0b --- /dev/null +++ b/clients/www/postcss.config.cjs @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}
\ No newline at end of file diff --git a/clients/www/src/app.d.ts b/clients/www/src/app.d.ts new file mode 100644 index 0000000..4c48b71 --- /dev/null +++ b/clients/www/src/app.d.ts @@ -0,0 +1,12 @@ +// See https://kit.svelte.dev/docs/types#app +// for information about these interfaces +// and what to do when importing types + +import 'vite-plugin-pwa/info' + +declare namespace App { + // interface Locals {} + // interface PageData {} + // interface Error {} + // interface Platform {} +} diff --git a/clients/www/src/app.html b/clients/www/src/app.html new file mode 100644 index 0000000..fff52f4 --- /dev/null +++ b/clients/www/src/app.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html lang="en" class="dark"> + <head> + <meta charset="utf-8" /> + <link rel="icon" href="%sveltekit.assets%/img/favicon.png" /> + <meta name="viewport" content="width=device-width" /> + %sveltekit.head% + </head> + <body data-sveltekit-preload-data="hover" data-theme="vintage"> + <div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div> + </body> +</html> diff --git a/clients/www/src/app.postcss b/clients/www/src/app.postcss new file mode 100644 index 0000000..ddaec40 --- /dev/null +++ b/clients/www/src/app.postcss @@ -0,0 +1,9 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; +@tailwind variants; + +html, +body { + @apply h-full overflow-hidden; +}
\ No newline at end of file diff --git a/clients/www/src/lib/offlineToast.ts b/clients/www/src/lib/offlineToast.ts new file mode 100644 index 0000000..3ae943e --- /dev/null +++ b/clients/www/src/lib/offlineToast.ts @@ -0,0 +1,33 @@ +import { getToastStore, type ToastSettings } from '@skeletonlabs/skeleton'; + +const toastStore = getToastStore(); + +const offline: ToastSettings = { + message: 'You are currently offline.', + background: 'variant-filled-error', + autohide: false +}; + +const online: ToastSettings = { + message: 'You are back online.', + background: 'variant-filled-success', + autohide: true, + timeout: 3000 +}; + +/** + * Make a toast for if the PWA is ever brought offline for whatever reason. + */ +export default function offlineToast() { + window.addEventListener('offline', () => { + toastStore.clear(); + toastStore.trigger(offline); + }); + + window.addEventListener('online', () => { + toastStore.clear(); + setTimeout(() => { + toastStore.trigger(online); + }, 300); + }); +} diff --git a/clients/www/src/routes/+layout.svelte b/clients/www/src/routes/+layout.svelte new file mode 100644 index 0000000..15780c3 --- /dev/null +++ b/clients/www/src/routes/+layout.svelte @@ -0,0 +1,33 @@ +<script lang="ts"> + import '../app.postcss'; + import { AppShell, AppBar, LightSwitch, initializeStores } from '@skeletonlabs/skeleton'; + + import { pwaInfo } from 'virtual:pwa-info'; + + $: webManifest = pwaInfo ? pwaInfo.webManifest.linkTag : ''; + + initializeStores(); +</script> + +<svelte:head> + <!-- eslint-disable-next-line svelte/no-at-html-tags VitePWA can probably be trusted --> + {@html webManifest} +</svelte:head> + +<!-- App Shell --> +<AppShell> + <svelte:fragment slot="header"> + <!-- App Bar --> + <AppBar gridColumns="grid-cols-3" slotDefault="place-self-center" slotTrail="place-content-end"> + <svelte:fragment slot="lead"> + <LightSwitch /> + </svelte:fragment> + <a href="#">Zelda: Oracle Password Generator</a> + <svelte:fragment slot="trail"> + <a href="#">TODO: SOURCE CODE</a> + </svelte:fragment> + </AppBar> + </svelte:fragment> + <!-- Page Route Content --> + <slot /> +</AppShell> diff --git a/clients/www/src/routes/+layout.ts b/clients/www/src/routes/+layout.ts new file mode 100644 index 0000000..c8cacf0 --- /dev/null +++ b/clients/www/src/routes/+layout.ts @@ -0,0 +1 @@ +export const prerender = true;
\ No newline at end of file diff --git a/clients/www/src/routes/+page.svelte b/clients/www/src/routes/+page.svelte new file mode 100644 index 0000000..2ea190a --- /dev/null +++ b/clients/www/src/routes/+page.svelte @@ -0,0 +1 @@ +TODO: Draw the rest of the owl
\ No newline at end of file diff --git a/clients/www/static/.nojekyll b/clients/www/static/.nojekyll new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/clients/www/static/.nojekyll diff --git a/clients/www/static/img/favicon.png b/clients/www/static/img/favicon.png Binary files differnew file mode 100644 index 0000000..d4307cd --- /dev/null +++ b/clients/www/static/img/favicon.png diff --git a/clients/www/static/img/pwa-192x192.png b/clients/www/static/img/pwa-192x192.png Binary files differnew file mode 100644 index 0000000..d7fcf17 --- /dev/null +++ b/clients/www/static/img/pwa-192x192.png diff --git a/clients/www/svelte.config.js b/clients/www/svelte.config.js new file mode 100644 index 0000000..0fe9ccb --- /dev/null +++ b/clients/www/svelte.config.js @@ -0,0 +1,18 @@ +import adapter from '@sveltejs/adapter-static'; +import { vitePreprocess } from '@sveltejs/kit/vite'; + + +/** @type {import('@sveltejs/kit').Config} */ +const config = { + extensions: ['.svelte'], + // Consult https://kit.svelte.dev/docs/integrations#preprocessors + // for more information about preprocessors + preprocess: [ vitePreprocess()], + kit: { + adapter: adapter(), + paths: { + base: process.env.NODE_ENV === "production" ? "/oracle-client" : "", + } + } +}; +export default config;
\ No newline at end of file diff --git a/clients/www/tailwind.config.ts b/clients/www/tailwind.config.ts new file mode 100644 index 0000000..f9b395d --- /dev/null +++ b/clients/www/tailwind.config.ts @@ -0,0 +1,27 @@ +import { join } from 'path' +import type { Config } from 'tailwindcss' +import forms from '@tailwindcss/forms'; +import typography from '@tailwindcss/typography'; +import { skeleton } from '@skeletonlabs/tw-plugin' + +export default { + darkMode: 'class', + content: ['./src/**/*.{html,js,svelte,ts}', join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')], + theme: { + extend: {}, + }, + plugins: [ + forms, + typography, + skeleton({ + themes: { + preset: [ + { + name: 'vintage', + enhancements: true, + }, + ], + }, + }), + ], +} satisfies Config; diff --git a/clients/www/tsconfig.json b/clients/www/tsconfig.json new file mode 100644 index 0000000..92885b8 --- /dev/null +++ b/clients/www/tsconfig.json @@ -0,0 +1,18 @@ +{ + "extends": "./.svelte-kit/tsconfig.json", + "compilerOptions": { + "allowJs": true, + "checkJs": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "resolveJsonModule": true, + "skipLibCheck": true, + "sourceMap": true, + "strict": true, + "types": ["vite-plugin-pwa/client"] + } + // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias + // + // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes + // from the referenced tsconfig.json - TypeScript does not merge them in +} diff --git a/clients/www/vite.config.ts b/clients/www/vite.config.ts new file mode 100644 index 0000000..ca89d5b --- /dev/null +++ b/clients/www/vite.config.ts @@ -0,0 +1,43 @@ +import { purgeCss } from 'vite-plugin-tailwind-purgecss'; +import { sveltekit } from '@sveltejs/kit/vite'; +import { defineConfig } from 'vite'; +import { SvelteKitPWA } from '@vite-pwa/sveltekit'; + +export default defineConfig({ + build: { + sourcemap: true + }, + css: { + devSourcemap: false + }, + plugins: [ + sveltekit(), + SvelteKitPWA({ + devOptions: { + enabled: true, + type: 'module' + }, + manifest: { + name: 'Oracle Client', + short_name: 'Oracle Client', + theme_color: '#3EBCC5', + description: "A web-based client for the Oracle of Ages/Seasons password system", + display_override: ["window-controls-overlay", "standalone", "minimal-ui"], + display: "fullscreen", + icons: [ + { + src: "img/pwa-192x192.png", + sizes: "192x192", + type: "image/png", + } + ], + id: "." + }, + registerType: 'autoUpdate', + workbox: { + globPatterns: ['client/**/*.{js,css,html,svg,png}'] + } + }), + purgeCss() + ] +}); |
