Many visual improvements.

Added simple mock JSON viewer to explain different query types. Better style for headers on home page. Added tiny Todo component. Added very simple footer. Added static Svelte adapter, but something about it is currently busted.
2022-09-01 00:02:09 -04:00 · 2022-09-01 00:02:09 -04:00 · d681e1dac8
parent c8583f3837
commit d681e1dac8
7 changed files with 226 additions and 58 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -9,6 +9,7 @@
 			"version": "0.0.1",
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "next",
+				"@sveltejs/adapter-static": "^1.0.0-next.41",
 				"@sveltejs/kit": "next",
 				"svelte": "^3.44.0",
 				"svelte-check": "^2.7.1",
@ -17,9 +18,9 @@
 			}
 		},
 		"node_modules/@cloudflare/workers-types": {
-			"version": "3.14.1",
-			"resolved": "https://registry.npmjs.org/@cloudflare/workers-types/-/workers-types-3.14.1.tgz",
-			"integrity": "sha512-B1/plF62pt+H2IJHvApK8fdOJAVsvojvacuac8x8s+JIyqbropMyqNqHTKLm3YD8ZFLGwYeFTudU+PQ7vGvBdA==",
+			"version": "3.15.0",
+			"resolved": "https://registry.npmjs.org/@cloudflare/workers-types/-/workers-types-3.15.0.tgz",
+			"integrity": "sha512-meL/Afy5qdIsgfdnlbVfcYUh/YjHk23EWUvgmULf6iDrDbrBcd+fse2os3CC7rxSfScdP1OqJVTHgRSEjUm/Pw==",
 			"dev": true
 		},
 		"node_modules/@esbuild/linux-loong64": {
@ -164,14 +165,14 @@
 			}
 		},
 		"node_modules/@sveltejs/adapter-auto": {
-			"version": "1.0.0-next.69",
-			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-1.0.0-next.69.tgz",
-			"integrity": "sha512-DSrcYgrJ1YFnxJecTiktV4A01B2Avn5t6HvO49YJiGp2mdSxCxJbvqn6I4tPB1T64AInBLFUMmKBK9o9ZJbBMA==",
+			"version": "1.0.0-next.71",
+			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-1.0.0-next.71.tgz",
+			"integrity": "sha512-Qsl82HcehWJbZztXgmU/nTPDeeIaB4jrOQpSvy3Pi8octs+rEf/CO87Wk06EP+M/zUzEHDNENMOx0DgWuHpj7Q==",
 			"dev": true,
 			"dependencies": {
 				"@sveltejs/adapter-cloudflare": "1.0.0-next.32",
-				"@sveltejs/adapter-netlify": "1.0.0-next.75",
-				"@sveltejs/adapter-vercel": "1.0.0-next.71"
+				"@sveltejs/adapter-netlify": "1.0.0-next.76",
+				"@sveltejs/adapter-vercel": "1.0.0-next.72"
 			}
 		},
 		"node_modules/@sveltejs/adapter-cloudflare": {
@ -186,9 +187,9 @@
 			}
 		},
 		"node_modules/@sveltejs/adapter-netlify": {
-			"version": "1.0.0-next.75",
-			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-netlify/-/adapter-netlify-1.0.0-next.75.tgz",
-			"integrity": "sha512-1zTR/U/ceEAyqIGJ74v54G+JbIR+fSmTN9qfqGOM0gBwVoBVRUujGm4tDFJQNYzvuGzVnC7br/rhYMLZd2JluQ==",
+			"version": "1.0.0-next.76",
+			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-netlify/-/adapter-netlify-1.0.0-next.76.tgz",
+			"integrity": "sha512-XC33i13N+zkDP1rKrssQ55TPzt4DkLjKux6g1xW2MB+5KxnC9PP2rIkocKxFw/pK2XU8cUIgmOJ1y5PQrHaiKg==",
 			"dev": true,
 			"dependencies": {
 				"@iarna/toml": "^2.2.5",
@ -197,10 +198,16 @@
 				"tiny-glob": "^0.2.9"
 			}
 		},
+		"node_modules/@sveltejs/adapter-static": {
+			"version": "1.0.0-next.41",
+			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-1.0.0-next.41.tgz",
+			"integrity": "sha512-Bw6MfEuzuqjKZuVCG7ZHXiOIy/LDoRVR278eeAf4kcwl1B8+YEvChqdCvG2N5Ur+rxUIHstPgeX39HezS8d+mw==",
+			"dev": true
+		},
 		"node_modules/@sveltejs/adapter-vercel": {
-			"version": "1.0.0-next.71",
-			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-vercel/-/adapter-vercel-1.0.0-next.71.tgz",
-			"integrity": "sha512-Tj8za7fMXheaiB6hNqv61jr/AmAUm+G8huoY1cIvtSqqBHzGmiZH+GFK1Tq/e8e0XR2Xb/ZpZCQSyrFLU2grIQ==",
+			"version": "1.0.0-next.72",
+			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-vercel/-/adapter-vercel-1.0.0-next.72.tgz",
+			"integrity": "sha512-oNs8FQaYC2NnwDcvX/jc9MDNqXc9HxwGPQNkd+1vBpFVWZl9mShQgCcOMzfTOIH0ka984jYNa0ZawYYHex79xg==",
 			"dev": true,
 			"dependencies": {
 				"@vercel/nft": "^0.22.0",
@ -208,13 +215,13 @@
 			}
 		},
 		"node_modules/@sveltejs/kit": {
-			"version": "1.0.0-next.454",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.454.tgz",
-			"integrity": "sha512-Adbd837/E8B8TPVPlQZT4R0o3NekmtyUEYnI46M/YupMtg1NnaVdLF8Na6xoivtnIY7dP5H10zGJhGsTon3fPQ==",
+			"version": "1.0.0-next.460",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.460.tgz",
+			"integrity": "sha512-bwDkwzEN72+1K5FXqBQGrYOwyA6V5sSSec/A6qXMTfh4uycFTiIQh/e2ki3pxfG0SwijrUo43FEbdKLyBiuDgQ==",
 			"dev": true,
 			"hasInstallScript": true,
 			"dependencies": {
-				"@sveltejs/vite-plugin-svelte": "^1.0.1",
+				"@sveltejs/vite-plugin-svelte": "^1.0.3",
 				"cookie": "^0.5.0",
 				"devalue": "^3.1.2",
 				"kleur": "^4.1.4",
@ -239,9 +246,9 @@
 			}
 		},
 		"node_modules/@sveltejs/vite-plugin-svelte": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.2.tgz",
-			"integrity": "sha512-8tTVbNuraeDchBaArNbwaZLpO0feM7BRSdZU5yeM4Clasx2p1p1CYBoWh+VgxZlxiark49HXummkHqKztbl8lA==",
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.3.tgz",
+			"integrity": "sha512-0Qu51m2W9RBlxWPp8i31KJpnqmjWMOne8vAzgmOX6ZM9uX+/RAv6BNhEMcNoP5MsyLjyW1ZTCiJoaZZ5EeqpFg==",
 			"dev": true,
 			"dependencies": {
 				"@rollup/pluginutils": "^4.2.1",
@ -2303,9 +2310,9 @@
 	},
 	"dependencies": {
 		"@cloudflare/workers-types": {
-			"version": "3.14.1",
-			"resolved": "https://registry.npmjs.org/@cloudflare/workers-types/-/workers-types-3.14.1.tgz",
-			"integrity": "sha512-B1/plF62pt+H2IJHvApK8fdOJAVsvojvacuac8x8s+JIyqbropMyqNqHTKLm3YD8ZFLGwYeFTudU+PQ7vGvBdA==",
+			"version": "3.15.0",
+			"resolved": "https://registry.npmjs.org/@cloudflare/workers-types/-/workers-types-3.15.0.tgz",
+			"integrity": "sha512-meL/Afy5qdIsgfdnlbVfcYUh/YjHk23EWUvgmULf6iDrDbrBcd+fse2os3CC7rxSfScdP1OqJVTHgRSEjUm/Pw==",
 			"dev": true
 		},
 		"@esbuild/linux-loong64": {
@ -2414,14 +2421,14 @@
 			}
 		},
 		"@sveltejs/adapter-auto": {
-			"version": "1.0.0-next.69",
-			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-1.0.0-next.69.tgz",
-			"integrity": "sha512-DSrcYgrJ1YFnxJecTiktV4A01B2Avn5t6HvO49YJiGp2mdSxCxJbvqn6I4tPB1T64AInBLFUMmKBK9o9ZJbBMA==",
+			"version": "1.0.0-next.71",
+			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-1.0.0-next.71.tgz",
+			"integrity": "sha512-Qsl82HcehWJbZztXgmU/nTPDeeIaB4jrOQpSvy3Pi8octs+rEf/CO87Wk06EP+M/zUzEHDNENMOx0DgWuHpj7Q==",
 			"dev": true,
 			"requires": {
 				"@sveltejs/adapter-cloudflare": "1.0.0-next.32",
-				"@sveltejs/adapter-netlify": "1.0.0-next.75",
-				"@sveltejs/adapter-vercel": "1.0.0-next.71"
+				"@sveltejs/adapter-netlify": "1.0.0-next.76",
+				"@sveltejs/adapter-vercel": "1.0.0-next.72"
 			}
 		},
 		"@sveltejs/adapter-cloudflare": {
@ -2436,9 +2443,9 @@
 			}
 		},
 		"@sveltejs/adapter-netlify": {
-			"version": "1.0.0-next.75",
-			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-netlify/-/adapter-netlify-1.0.0-next.75.tgz",
-			"integrity": "sha512-1zTR/U/ceEAyqIGJ74v54G+JbIR+fSmTN9qfqGOM0gBwVoBVRUujGm4tDFJQNYzvuGzVnC7br/rhYMLZd2JluQ==",
+			"version": "1.0.0-next.76",
+			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-netlify/-/adapter-netlify-1.0.0-next.76.tgz",
+			"integrity": "sha512-XC33i13N+zkDP1rKrssQ55TPzt4DkLjKux6g1xW2MB+5KxnC9PP2rIkocKxFw/pK2XU8cUIgmOJ1y5PQrHaiKg==",
 			"dev": true,
 			"requires": {
 				"@iarna/toml": "^2.2.5",
@ -2447,10 +2454,16 @@
 				"tiny-glob": "^0.2.9"
 			}
 		},
+		"@sveltejs/adapter-static": {
+			"version": "1.0.0-next.41",
+			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-1.0.0-next.41.tgz",
+			"integrity": "sha512-Bw6MfEuzuqjKZuVCG7ZHXiOIy/LDoRVR278eeAf4kcwl1B8+YEvChqdCvG2N5Ur+rxUIHstPgeX39HezS8d+mw==",
+			"dev": true
+		},
 		"@sveltejs/adapter-vercel": {
-			"version": "1.0.0-next.71",
-			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-vercel/-/adapter-vercel-1.0.0-next.71.tgz",
-			"integrity": "sha512-Tj8za7fMXheaiB6hNqv61jr/AmAUm+G8huoY1cIvtSqqBHzGmiZH+GFK1Tq/e8e0XR2Xb/ZpZCQSyrFLU2grIQ==",
+			"version": "1.0.0-next.72",
+			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-vercel/-/adapter-vercel-1.0.0-next.72.tgz",
+			"integrity": "sha512-oNs8FQaYC2NnwDcvX/jc9MDNqXc9HxwGPQNkd+1vBpFVWZl9mShQgCcOMzfTOIH0ka984jYNa0ZawYYHex79xg==",
 			"dev": true,
 			"requires": {
 				"@vercel/nft": "^0.22.0",
@ -2458,12 +2471,12 @@
 			}
 		},
 		"@sveltejs/kit": {
-			"version": "1.0.0-next.454",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.454.tgz",
-			"integrity": "sha512-Adbd837/E8B8TPVPlQZT4R0o3NekmtyUEYnI46M/YupMtg1NnaVdLF8Na6xoivtnIY7dP5H10zGJhGsTon3fPQ==",
+			"version": "1.0.0-next.460",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.460.tgz",
+			"integrity": "sha512-bwDkwzEN72+1K5FXqBQGrYOwyA6V5sSSec/A6qXMTfh4uycFTiIQh/e2ki3pxfG0SwijrUo43FEbdKLyBiuDgQ==",
 			"dev": true,
 			"requires": {
-				"@sveltejs/vite-plugin-svelte": "^1.0.1",
+				"@sveltejs/vite-plugin-svelte": "^1.0.3",
 				"cookie": "^0.5.0",
 				"devalue": "^3.1.2",
 				"kleur": "^4.1.4",
@ -2478,9 +2491,9 @@
 			}
 		},
 		"@sveltejs/vite-plugin-svelte": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.2.tgz",
-			"integrity": "sha512-8tTVbNuraeDchBaArNbwaZLpO0feM7BRSdZU5yeM4Clasx2p1p1CYBoWh+VgxZlxiark49HXummkHqKztbl8lA==",
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.3.tgz",
+			"integrity": "sha512-0Qu51m2W9RBlxWPp8i31KJpnqmjWMOne8vAzgmOX6ZM9uX+/RAv6BNhEMcNoP5MsyLjyW1ZTCiJoaZZ5EeqpFg==",
 			"dev": true,
 			"requires": {
 				"@rollup/pluginutils": "^4.2.1",
--- a/package.json
+++ b/package.json
@ -11,6 +11,7 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "next",
+		"@sveltejs/adapter-static": "^1.0.0-next.41",
 		"@sveltejs/kit": "next",
 		"svelte": "^3.44.0",
 		"svelte-check": "^2.7.1",
--- a/src/lib/Todo.svelte
+++ b/src/lib/Todo.svelte
@ -0,0 +1,26 @@
+<script>
+  import { browser } from '$app/environment'
+  const isDev = browser
+</script>
+
+{#if isDev}
+    <div class="todo">
+        <slot></slot>
+    </div>
+{/if}
+
+<style>
+    .todo {
+        z-index: 99;
+        background-color: #f5f563;
+        padding: 1em;
+        margin-top: 1em;
+        margin-bottom: 1em;
+        border-radius: 6px;
+    }
+    .todo::before {
+        content: 'TODO: ';
+        font-weight: bold;
+    }
+
+</style>
--- a/src/lib/header/NavBar.svelte
+++ b/src/lib/header/NavBar.svelte
@ -3,15 +3,15 @@
  const routes = [
    { path: '/', name: 'Home' },
    { path: '/download', name: 'Download' },
-    { path: '/about', name: 'About' }
+    //{ path: '/about', name: 'About' }
  ]
 </script>

 <nav>
-    <ul>
+    <ul data-sveltekit-prefetch>
        {#each routes as route}
            <li class:active={$page.url.pathname === route.path}>
-                <a sveltekit:prefetch href={route.path}>{route.name}</a>
+                <a href={route.path}>{route.name}</a>
            </li>
        {/each}
    </ul>
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -1,4 +1,6 @@
 <script>
+	export const prerender = true
+
 	import '../app.css'
 	import Header from '$lib/header/Header.svelte'
 </script>
@ -8,9 +10,7 @@
 	<slot />
 </main>

-<!--
-<footer>Version {clientVersion}</footer>
-->
+<footer>Copyright 2022</footer>

 <style>
 	main {
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -1,22 +1,110 @@
 <script>
  import logo from '$lib/kd-full-logo.png';
+  import Todo from "$lib/Todo.svelte";
+
+  const id = 'a59038fa-5098-4e7a-836b-f62342ac445b'
+  const id2 = '1b581662-2f49-4307-af93-fcd97a1dbd8e'
+  const repeat = (arr, n) => [].concat(...Array(n).fill(arr));
+  const fakeJson = repeat([
+`{
+  "eventType": "purchase",
+  "username": "sagev",
+  "itemName": "Bean Enchilada",
+  "quantity": 2,
+  "purchaseId": "${id}"
+}`,
+`{
+  "eventType": "purchase",
+  "username": "cameronl",
+  "itemName": "Taco",
+  "quantity": 2
+  "purchaseId": "${id2}"
+}`,
+`{
+  "eventType": "refund",
+  "username": "sagev",
+  "refundStatus": "APPROVED",
+  "approvedBy": "westonm",
+  "purchaseId": "${id}"
+}`
+    ], 3)
+  let realTimeIndex = 0
+  const randomizeRealTime = () => setTimeout(() => {
+    realTimeIndex = (realTimeIndex + 1) % fakeJson.length
+    randomizeRealTime()
+  }, 2000)
+  randomizeRealTime()
+
+  let line = 0
+  let oneShotText = fakeJson[0]
+  const loadingColor = '#df5dcf'
+  let oneShotColor = loadingColor
+  const blockLines = 7
+  const fakeJsonLines = fakeJson.join('\n').split('\n')
+  const randomizeOneShot = (wait = 50) => setTimeout(() => {
+    if (line < fakeJsonLines.length - blockLines) {
+      line += 1
+      oneShotColor = loadingColor
+      oneShotText = fakeJsonLines.slice(line, line + blockLines).join('\n')
+      randomizeOneShot()
+    } else {
+      line = 0
+      oneShotColor = 'var(--accent-color)'
+      randomizeOneShot(4000)
+    }
+  }, wait)
+  randomizeOneShot()
+
 </script>

-<h1>Data should be <span class="fun">Fun</span></h1>
 <div class="logo-json-box">
-    <h2>With <img class="inline-logo" src={logo} alt="Kafka Dance" />, it is.</h2>
    <!--
    <img src="/json.png" alt="With Kafka Dance, browsing Kafka data is easy" />
    -->
 </div>
 <div class="content">
-    <p>Kafka Dance is a simple, elegant way to interact with your Kafka servers.</p>
-    <div>
+    <div class="eye-catch">
+        <h1>Data should be <span class="fun">Fun</span></h1>
+        <h2>With <img class="inline-logo" src={logo} alt="Kafka Dance" />, it is.</h2>
+        <div class="button-container">
            <button class="colored">Download Now</button>
        </div>
+        <Todo>
+            Push 'What is Kafka Dance?' down further, but come up with a visual indicator that there's
+            more to read. Something like this, but better:
+        </Todo>
+        <h3>Continue reading, below</h3>
+    </div>
+
+    <div>
+        <h2>What is Kafka Dance?</h2>
+        <h3>Kafka Dance is a simple, elegant way to interact with your Kafka servers.</h3>
        <a href="/example_query.png">
            <img class="big-photo" src="/example_query.png" alt="Example query" />
        </a>
+    </div>
+
+    <div>
+        <h2>Query data your way</h2>
+        <Todo>Combine these into one display with a switch?</Todo>
+        <div class="columns">
+            <div>
+                <h3>Search your message history</h3>
+                <pre style={`color: ${oneShotColor}`};>{oneShotText}</pre>
+            </div>
+
+            <div style="margin: 12px"></div>
+
+            <div>
+                <h3>Or monitor for new messages in real time</h3>
+                {#if realTimeIndex % 2 === 0}
+                    <pre>{fakeJson[realTimeIndex]}</pre>
+                {:else}
+                    <pre>{fakeJson[realTimeIndex]}</pre>
+                {/if}
+            </div>
+        </div>
+    </div>
 </div>

 <style>
@ -24,10 +112,26 @@
        padding-top: 1em;
    }

+    h2 {
+        margin-top: 2em;
+        font-size: 4rem;
+        color: black;
+    }
+
    .content {
-        text-align: center;
+        text-align: left;
        display: flex;
+        align-items: center;
        flex-direction: column;
+        margin-bottom: 2em;
+    }
+
+    .eye-catch {
+        margin-bottom: 1em;
+    }
+
+    .eye-catch h2 {
+        font-size: 2.5rem;
    }

    h2 {
@ -54,15 +158,30 @@
        height: auto;
    }

+    pre {
+        color: var(--accent-color);
+        font-weight: bold;
+    }
+
    button {
        padding: 0.5em 2em;
        font-size: 100%;
    }

+    .button-container {
+        margin-top: 6em;
+        text-align: center;
+    }
+
    .logo-json-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
+
+    .columns {
+        display: flex;
+        flex-direction: row;
+    }
 </style>
--- a/svelte.config.js
+++ b/svelte.config.js
@ -1,9 +1,18 @@
+import * as staticAdapter from '@sveltejs/adapter-static';
 import adapter from '@sveltejs/adapter-auto';

+const a = adapter()
+const s = staticAdapter.default({
+	pages: 'build',
+	assets: 'build',
+	fallback: null,
+	precompress: false
+})
+
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	kit: {
-		adapter: adapter()
+		adapter: a,
 	}
 };