From 91cca57992a9ebfee692d5b1e3d6b0a9f14170ee Mon Sep 17 00:00:00 2001 From: Sage Vaillancourt Date: Mon, 29 Aug 2022 07:29:38 -0400 Subject: [PATCH] Better transitions Rename app in package.json Set up for purely static builds Accept cluster_deleted messages Delete unused pages --- package-lock.json | 17 ++- package.json | 3 +- src/app.css | 22 +++- src/lib/QueryInput.svelte | 98 +++++++++------- src/lib/header/NavBar.svelte | 8 -- src/lib/state.js | 9 +- src/routes/+page.svelte | 33 +++++- src/routes/about/+page.js | 13 --- src/routes/about/+page.svelte | 52 --------- src/routes/todos/+page.server.js | 70 ----------- src/routes/todos/+page.svelte | 192 ------------------------------- src/routes/todos/_api.js | 27 ----- svelte.config.js | 7 +- 13 files changed, 139 insertions(+), 412 deletions(-) delete mode 100644 src/routes/about/+page.js delete mode 100644 src/routes/about/+page.svelte delete mode 100644 src/routes/todos/+page.server.js delete mode 100644 src/routes/todos/+page.svelte delete mode 100644 src/routes/todos/_api.js diff --git a/package-lock.json b/package-lock.json index 49016f6..3e87388 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "my-app", + "name": "kafka-dance-frontend", "version": "0.0.1", "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "my-app", + "name": "kafka-dance-frontend", "version": "0.0.1", "dependencies": { "@fontsource/fira-mono": "^4.5.0", @@ -16,6 +16,7 @@ }, "devDependencies": { "@sveltejs/adapter-auto": "next", + "@sveltejs/adapter-static": "^1.0.0-next.39", "@sveltejs/kit": "next", "@types/cookie": "^0.5.1", "eslint": "^8.22.0", @@ -265,6 +266,12 @@ "tiny-glob": "^0.2.9" } }, + "node_modules/@sveltejs/adapter-static": { + "version": "1.0.0-next.39", + "resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-1.0.0-next.39.tgz", + "integrity": "sha512-EeD39H6iEe0UEKnKxLFTZFZpi/FcX5xfbAvsMQ+B09aDZccpQmkJBSIo+4kq1JsQGSjwi/+J3aE9bR67R6CIyQ==", + "dev": true + }, "node_modules/@sveltejs/adapter-vercel": { "version": "1.0.0-next.66", "resolved": "https://registry.npmjs.org/@sveltejs/adapter-vercel/-/adapter-vercel-1.0.0-next.66.tgz", @@ -3412,6 +3419,12 @@ "tiny-glob": "^0.2.9" } }, + "@sveltejs/adapter-static": { + "version": "1.0.0-next.39", + "resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-1.0.0-next.39.tgz", + "integrity": "sha512-EeD39H6iEe0UEKnKxLFTZFZpi/FcX5xfbAvsMQ+B09aDZccpQmkJBSIo+4kq1JsQGSjwi/+J3aE9bR67R6CIyQ==", + "dev": true + }, "@sveltejs/adapter-vercel": { "version": "1.0.0-next.66", "resolved": "https://registry.npmjs.org/@sveltejs/adapter-vercel/-/adapter-vercel-1.0.0-next.66.tgz", diff --git a/package.json b/package.json index a49c17e..09d7a61 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ }, "devDependencies": { "@sveltejs/adapter-auto": "next", + "@sveltejs/adapter-static": "^1.0.0-next.39", "@sveltejs/kit": "next", "@types/cookie": "^0.5.1", "eslint": "^8.22.0", @@ -27,8 +28,8 @@ }, "type": "module", "dependencies": { - "@zerodevx/svelte-json-view": "^0.2.1", "@fontsource/fira-mono": "^4.5.0", + "@zerodevx/svelte-json-view": "^0.2.1", "cookie": "^0.4.1", "highlight.js": "^11.6.0", "svelte-highlight": "^6.2.1" diff --git a/src/app.css b/src/app.css index 4fad9ab..050af8c 100644 --- a/src/app.css +++ b/src/app.css @@ -24,7 +24,7 @@ flex-direction: column; } -select, button { +select, button, input { font-family: Roboto, Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 90%; border-style: solid; @@ -34,6 +34,18 @@ select, button { padding: 0.2em; } +select, input { + padding: 0.3em; + background-color: white; + border-radius: 4px; +} + +select option { + padding: 0.3em; + background-color: white; + border-radius: 4px; +} + button { padding: 0.4em 1.0em; border-radius: 5px; @@ -82,6 +94,13 @@ button.danger:hover { border-color: black; } +.collapsed-hint { + width: 100%; + text-align: right; + font-size: 200%; + color: #666; +} + nav { font-family: 'Liberation Sans', sans-serif; } @@ -209,6 +228,7 @@ button { border-style: solid; border-color: #b3ddef; border-width: 1px; + justify-content: space-between; } button:focus:not(:focus-visible) { diff --git a/src/lib/QueryInput.svelte b/src/lib/QueryInput.svelte index 38d9b23..1892363 100644 --- a/src/lib/QueryInput.svelte +++ b/src/lib/QueryInput.svelte @@ -1,5 +1,6 @@ - - - About - - - -
-

About this app

- -

- This is a SvelteKit app. You can make your own by typing the - following into your command line and following the prompts: -

- - 
npm create svelte@latest
- -

- The page you're looking at is purely static HTML, with no client-side interactivity needed. - Because of that, we don't need to load any JavaScript. Try viewing the page's source, or opening - the devtools network panel and reloading. -

- -

- The TODOs page illustrates SvelteKit's data loading and form handling. Try using - it with JavaScript disabled! -

-
- - diff --git a/src/routes/todos/+page.server.js b/src/routes/todos/+page.server.js deleted file mode 100644 index b86686a..0000000 --- a/src/routes/todos/+page.server.js +++ /dev/null @@ -1,70 +0,0 @@ -import { api } from './_api'; - -/** @type {import('./$types').PageServerLoad} */ -export const load = async ({ locals }) => { - // locals.userid comes from src/hooks.js - const response = await api('GET', `todos/${locals.userid}`); - - if (response.status === 404) { - // user hasn't created a todo list. - // start with an empty array - return { - todos: [] - }; - } - - if (response.status === 200) { - return { - todos: await response.json() - }; - } - - throw new Error("@migration task: Migrate this return statement (https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3292699)"); - return { - status: response.status - }; -}; - -/** @type {import('./$types').Action} */ -export const POST = async ({ request, locals }) => { - const form = await request.formData(); - - await api('POST', `todos/${locals.userid}`, { - text: form.get('text') - }); - - throw new Error("@migration task: Migrate this return statement (https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3292699)"); - return {}; -}; - -// If the user has JavaScript disabled, the URL will change to -// include the method override unless we redirect back to /todos -const redirect = { - status: 303, - headers: { - location: '/todos' - } -}; - -/** @type {import('./$types').Action} */ -export const PATCH = async ({ request, locals }) => { - const form = await request.formData(); - - await api('PATCH', `todos/${locals.userid}/${form.get('uid')}`, { - text: form.has('text') ? form.get('text') : undefined, - done: form.has('done') ? !!form.get('done') : undefined - }); - - throw new Error("@migration task: Migrate this return statement (https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3292699)"); - return redirect; -}; - -/** @type {import('./$types').Action} */ -export const DELETE = async ({ request, locals }) => { - const form = await request.formData(); - - await api('DELETE', `todos/${locals.userid}/${form.get('uid')}`); - - throw new Error("@migration task: Migrate this return statement (https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3292699)"); - return redirect; -}; diff --git a/src/routes/todos/+page.svelte b/src/routes/todos/+page.svelte deleted file mode 100644 index bb20c62..0000000 --- a/src/routes/todos/+page.svelte +++ /dev/null @@ -1,192 +0,0 @@ - - - - Todos - - - -
-

Todos

- -
{ - form.reset(); - } - }} - > - -
- - {#each todos as todo (todo.uid)} -
-
{ - todo.done = !!data.get('done'); - } - }} - > - - -
- {/each} -
- - diff --git a/src/routes/todos/_api.js b/src/routes/todos/_api.js deleted file mode 100644 index c56bb95..0000000 --- a/src/routes/todos/_api.js +++ /dev/null @@ -1,27 +0,0 @@ -/* - This module is used by the /todos endpoint to - make calls to api.svelte.dev, which stores todos - for each user. The leading underscore indicates that this is - a private module, _not_ an endpoint — visiting /todos/_api - will net you a 404 response. - - (The data on the todo app will expire periodically; no - guarantees are made. Don't use it to organise your life.) -*/ - -const base = 'https://api.svelte.dev'; - -/** - * @param {string} method - * @param {string} resource - * @param {Record} [data] - */ -export function api(method, resource, data) { - return fetch(`${base}/${resource}`, { - method, - headers: { - 'content-type': 'application/json' - }, - body: data && JSON.stringify(data) - }); -} diff --git a/svelte.config.js b/svelte.config.js index cd43a72..90cf393 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -1,9 +1,12 @@ -// import adapter from '@sveltejs/adapter-auto'; +import adapter from '@sveltejs/adapter-static'; /** @type {import('@sveltejs/kit').Config} */ const config = { kit: { - //adapter: adapter(), + adapter: adapter(), + prerender: { + default: true + }, // Override http methods in the Todo forms methodOverride: {