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.
This commit is contained in:
parent
c8583f3837
commit
d681e1dac8
|
@ -9,6 +9,7 @@
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@sveltejs/adapter-auto": "next",
|
"@sveltejs/adapter-auto": "next",
|
||||||
|
"@sveltejs/adapter-static": "^1.0.0-next.41",
|
||||||
"@sveltejs/kit": "next",
|
"@sveltejs/kit": "next",
|
||||||
"svelte": "^3.44.0",
|
"svelte": "^3.44.0",
|
||||||
"svelte-check": "^2.7.1",
|
"svelte-check": "^2.7.1",
|
||||||
|
@ -17,9 +18,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@cloudflare/workers-types": {
|
"node_modules/@cloudflare/workers-types": {
|
||||||
"version": "3.14.1",
|
"version": "3.15.0",
|
||||||
"resolved": "https://registry.npmjs.org/@cloudflare/workers-types/-/workers-types-3.14.1.tgz",
|
"resolved": "https://registry.npmjs.org/@cloudflare/workers-types/-/workers-types-3.15.0.tgz",
|
||||||
"integrity": "sha512-B1/plF62pt+H2IJHvApK8fdOJAVsvojvacuac8x8s+JIyqbropMyqNqHTKLm3YD8ZFLGwYeFTudU+PQ7vGvBdA==",
|
"integrity": "sha512-meL/Afy5qdIsgfdnlbVfcYUh/YjHk23EWUvgmULf6iDrDbrBcd+fse2os3CC7rxSfScdP1OqJVTHgRSEjUm/Pw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/@esbuild/linux-loong64": {
|
"node_modules/@esbuild/linux-loong64": {
|
||||||
|
@ -164,14 +165,14 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@sveltejs/adapter-auto": {
|
"node_modules/@sveltejs/adapter-auto": {
|
||||||
"version": "1.0.0-next.69",
|
"version": "1.0.0-next.71",
|
||||||
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-1.0.0-next.69.tgz",
|
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-1.0.0-next.71.tgz",
|
||||||
"integrity": "sha512-DSrcYgrJ1YFnxJecTiktV4A01B2Avn5t6HvO49YJiGp2mdSxCxJbvqn6I4tPB1T64AInBLFUMmKBK9o9ZJbBMA==",
|
"integrity": "sha512-Qsl82HcehWJbZztXgmU/nTPDeeIaB4jrOQpSvy3Pi8octs+rEf/CO87Wk06EP+M/zUzEHDNENMOx0DgWuHpj7Q==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@sveltejs/adapter-cloudflare": "1.0.0-next.32",
|
"@sveltejs/adapter-cloudflare": "1.0.0-next.32",
|
||||||
"@sveltejs/adapter-netlify": "1.0.0-next.75",
|
"@sveltejs/adapter-netlify": "1.0.0-next.76",
|
||||||
"@sveltejs/adapter-vercel": "1.0.0-next.71"
|
"@sveltejs/adapter-vercel": "1.0.0-next.72"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@sveltejs/adapter-cloudflare": {
|
"node_modules/@sveltejs/adapter-cloudflare": {
|
||||||
|
@ -186,9 +187,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@sveltejs/adapter-netlify": {
|
"node_modules/@sveltejs/adapter-netlify": {
|
||||||
"version": "1.0.0-next.75",
|
"version": "1.0.0-next.76",
|
||||||
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-netlify/-/adapter-netlify-1.0.0-next.75.tgz",
|
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-netlify/-/adapter-netlify-1.0.0-next.76.tgz",
|
||||||
"integrity": "sha512-1zTR/U/ceEAyqIGJ74v54G+JbIR+fSmTN9qfqGOM0gBwVoBVRUujGm4tDFJQNYzvuGzVnC7br/rhYMLZd2JluQ==",
|
"integrity": "sha512-XC33i13N+zkDP1rKrssQ55TPzt4DkLjKux6g1xW2MB+5KxnC9PP2rIkocKxFw/pK2XU8cUIgmOJ1y5PQrHaiKg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@iarna/toml": "^2.2.5",
|
"@iarna/toml": "^2.2.5",
|
||||||
|
@ -197,10 +198,16 @@
|
||||||
"tiny-glob": "^0.2.9"
|
"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": {
|
"node_modules/@sveltejs/adapter-vercel": {
|
||||||
"version": "1.0.0-next.71",
|
"version": "1.0.0-next.72",
|
||||||
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-vercel/-/adapter-vercel-1.0.0-next.71.tgz",
|
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-vercel/-/adapter-vercel-1.0.0-next.72.tgz",
|
||||||
"integrity": "sha512-Tj8za7fMXheaiB6hNqv61jr/AmAUm+G8huoY1cIvtSqqBHzGmiZH+GFK1Tq/e8e0XR2Xb/ZpZCQSyrFLU2grIQ==",
|
"integrity": "sha512-oNs8FQaYC2NnwDcvX/jc9MDNqXc9HxwGPQNkd+1vBpFVWZl9mShQgCcOMzfTOIH0ka984jYNa0ZawYYHex79xg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@vercel/nft": "^0.22.0",
|
"@vercel/nft": "^0.22.0",
|
||||||
|
@ -208,13 +215,13 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@sveltejs/kit": {
|
"node_modules/@sveltejs/kit": {
|
||||||
"version": "1.0.0-next.454",
|
"version": "1.0.0-next.460",
|
||||||
"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.454.tgz",
|
"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.460.tgz",
|
||||||
"integrity": "sha512-Adbd837/E8B8TPVPlQZT4R0o3NekmtyUEYnI46M/YupMtg1NnaVdLF8Na6xoivtnIY7dP5H10zGJhGsTon3fPQ==",
|
"integrity": "sha512-bwDkwzEN72+1K5FXqBQGrYOwyA6V5sSSec/A6qXMTfh4uycFTiIQh/e2ki3pxfG0SwijrUo43FEbdKLyBiuDgQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"hasInstallScript": true,
|
"hasInstallScript": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@sveltejs/vite-plugin-svelte": "^1.0.1",
|
"@sveltejs/vite-plugin-svelte": "^1.0.3",
|
||||||
"cookie": "^0.5.0",
|
"cookie": "^0.5.0",
|
||||||
"devalue": "^3.1.2",
|
"devalue": "^3.1.2",
|
||||||
"kleur": "^4.1.4",
|
"kleur": "^4.1.4",
|
||||||
|
@ -239,9 +246,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@sveltejs/vite-plugin-svelte": {
|
"node_modules/@sveltejs/vite-plugin-svelte": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.3.tgz",
|
||||||
"integrity": "sha512-8tTVbNuraeDchBaArNbwaZLpO0feM7BRSdZU5yeM4Clasx2p1p1CYBoWh+VgxZlxiark49HXummkHqKztbl8lA==",
|
"integrity": "sha512-0Qu51m2W9RBlxWPp8i31KJpnqmjWMOne8vAzgmOX6ZM9uX+/RAv6BNhEMcNoP5MsyLjyW1ZTCiJoaZZ5EeqpFg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@rollup/pluginutils": "^4.2.1",
|
"@rollup/pluginutils": "^4.2.1",
|
||||||
|
@ -2303,9 +2310,9 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@cloudflare/workers-types": {
|
"@cloudflare/workers-types": {
|
||||||
"version": "3.14.1",
|
"version": "3.15.0",
|
||||||
"resolved": "https://registry.npmjs.org/@cloudflare/workers-types/-/workers-types-3.14.1.tgz",
|
"resolved": "https://registry.npmjs.org/@cloudflare/workers-types/-/workers-types-3.15.0.tgz",
|
||||||
"integrity": "sha512-B1/plF62pt+H2IJHvApK8fdOJAVsvojvacuac8x8s+JIyqbropMyqNqHTKLm3YD8ZFLGwYeFTudU+PQ7vGvBdA==",
|
"integrity": "sha512-meL/Afy5qdIsgfdnlbVfcYUh/YjHk23EWUvgmULf6iDrDbrBcd+fse2os3CC7rxSfScdP1OqJVTHgRSEjUm/Pw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"@esbuild/linux-loong64": {
|
"@esbuild/linux-loong64": {
|
||||||
|
@ -2414,14 +2421,14 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@sveltejs/adapter-auto": {
|
"@sveltejs/adapter-auto": {
|
||||||
"version": "1.0.0-next.69",
|
"version": "1.0.0-next.71",
|
||||||
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-1.0.0-next.69.tgz",
|
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-1.0.0-next.71.tgz",
|
||||||
"integrity": "sha512-DSrcYgrJ1YFnxJecTiktV4A01B2Avn5t6HvO49YJiGp2mdSxCxJbvqn6I4tPB1T64AInBLFUMmKBK9o9ZJbBMA==",
|
"integrity": "sha512-Qsl82HcehWJbZztXgmU/nTPDeeIaB4jrOQpSvy3Pi8octs+rEf/CO87Wk06EP+M/zUzEHDNENMOx0DgWuHpj7Q==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"@sveltejs/adapter-cloudflare": "1.0.0-next.32",
|
"@sveltejs/adapter-cloudflare": "1.0.0-next.32",
|
||||||
"@sveltejs/adapter-netlify": "1.0.0-next.75",
|
"@sveltejs/adapter-netlify": "1.0.0-next.76",
|
||||||
"@sveltejs/adapter-vercel": "1.0.0-next.71"
|
"@sveltejs/adapter-vercel": "1.0.0-next.72"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@sveltejs/adapter-cloudflare": {
|
"@sveltejs/adapter-cloudflare": {
|
||||||
|
@ -2436,9 +2443,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@sveltejs/adapter-netlify": {
|
"@sveltejs/adapter-netlify": {
|
||||||
"version": "1.0.0-next.75",
|
"version": "1.0.0-next.76",
|
||||||
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-netlify/-/adapter-netlify-1.0.0-next.75.tgz",
|
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-netlify/-/adapter-netlify-1.0.0-next.76.tgz",
|
||||||
"integrity": "sha512-1zTR/U/ceEAyqIGJ74v54G+JbIR+fSmTN9qfqGOM0gBwVoBVRUujGm4tDFJQNYzvuGzVnC7br/rhYMLZd2JluQ==",
|
"integrity": "sha512-XC33i13N+zkDP1rKrssQ55TPzt4DkLjKux6g1xW2MB+5KxnC9PP2rIkocKxFw/pK2XU8cUIgmOJ1y5PQrHaiKg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"@iarna/toml": "^2.2.5",
|
"@iarna/toml": "^2.2.5",
|
||||||
|
@ -2447,10 +2454,16 @@
|
||||||
"tiny-glob": "^0.2.9"
|
"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": {
|
"@sveltejs/adapter-vercel": {
|
||||||
"version": "1.0.0-next.71",
|
"version": "1.0.0-next.72",
|
||||||
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-vercel/-/adapter-vercel-1.0.0-next.71.tgz",
|
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-vercel/-/adapter-vercel-1.0.0-next.72.tgz",
|
||||||
"integrity": "sha512-Tj8za7fMXheaiB6hNqv61jr/AmAUm+G8huoY1cIvtSqqBHzGmiZH+GFK1Tq/e8e0XR2Xb/ZpZCQSyrFLU2grIQ==",
|
"integrity": "sha512-oNs8FQaYC2NnwDcvX/jc9MDNqXc9HxwGPQNkd+1vBpFVWZl9mShQgCcOMzfTOIH0ka984jYNa0ZawYYHex79xg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"@vercel/nft": "^0.22.0",
|
"@vercel/nft": "^0.22.0",
|
||||||
|
@ -2458,12 +2471,12 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@sveltejs/kit": {
|
"@sveltejs/kit": {
|
||||||
"version": "1.0.0-next.454",
|
"version": "1.0.0-next.460",
|
||||||
"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.454.tgz",
|
"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.460.tgz",
|
||||||
"integrity": "sha512-Adbd837/E8B8TPVPlQZT4R0o3NekmtyUEYnI46M/YupMtg1NnaVdLF8Na6xoivtnIY7dP5H10zGJhGsTon3fPQ==",
|
"integrity": "sha512-bwDkwzEN72+1K5FXqBQGrYOwyA6V5sSSec/A6qXMTfh4uycFTiIQh/e2ki3pxfG0SwijrUo43FEbdKLyBiuDgQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"@sveltejs/vite-plugin-svelte": "^1.0.1",
|
"@sveltejs/vite-plugin-svelte": "^1.0.3",
|
||||||
"cookie": "^0.5.0",
|
"cookie": "^0.5.0",
|
||||||
"devalue": "^3.1.2",
|
"devalue": "^3.1.2",
|
||||||
"kleur": "^4.1.4",
|
"kleur": "^4.1.4",
|
||||||
|
@ -2478,9 +2491,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@sveltejs/vite-plugin-svelte": {
|
"@sveltejs/vite-plugin-svelte": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.3.tgz",
|
||||||
"integrity": "sha512-8tTVbNuraeDchBaArNbwaZLpO0feM7BRSdZU5yeM4Clasx2p1p1CYBoWh+VgxZlxiark49HXummkHqKztbl8lA==",
|
"integrity": "sha512-0Qu51m2W9RBlxWPp8i31KJpnqmjWMOne8vAzgmOX6ZM9uX+/RAv6BNhEMcNoP5MsyLjyW1ZTCiJoaZZ5EeqpFg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"@rollup/pluginutils": "^4.2.1",
|
"@rollup/pluginutils": "^4.2.1",
|
||||||
|
|
|
@ -11,6 +11,7 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@sveltejs/adapter-auto": "next",
|
"@sveltejs/adapter-auto": "next",
|
||||||
|
"@sveltejs/adapter-static": "^1.0.0-next.41",
|
||||||
"@sveltejs/kit": "next",
|
"@sveltejs/kit": "next",
|
||||||
"svelte": "^3.44.0",
|
"svelte": "^3.44.0",
|
||||||
"svelte-check": "^2.7.1",
|
"svelte-check": "^2.7.1",
|
||||||
|
|
|
@ -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>
|
|
@ -3,15 +3,15 @@
|
||||||
const routes = [
|
const routes = [
|
||||||
{ path: '/', name: 'Home' },
|
{ path: '/', name: 'Home' },
|
||||||
{ path: '/download', name: 'Download' },
|
{ path: '/download', name: 'Download' },
|
||||||
{ path: '/about', name: 'About' }
|
//{ path: '/about', name: 'About' }
|
||||||
]
|
]
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul data-sveltekit-prefetch>
|
||||||
{#each routes as route}
|
{#each routes as route}
|
||||||
<li class:active={$page.url.pathname === route.path}>
|
<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>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
@ -1,4 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
|
export const prerender = true
|
||||||
|
|
||||||
import '../app.css'
|
import '../app.css'
|
||||||
import Header from '$lib/header/Header.svelte'
|
import Header from '$lib/header/Header.svelte'
|
||||||
</script>
|
</script>
|
||||||
|
@ -8,9 +10,7 @@
|
||||||
<slot />
|
<slot />
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<!--
|
<footer>Copyright 2022</footer>
|
||||||
<footer>Version {clientVersion}</footer>
|
|
||||||
-->
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
main {
|
main {
|
||||||
|
|
|
@ -1,22 +1,110 @@
|
||||||
<script>
|
<script>
|
||||||
import logo from '$lib/kd-full-logo.png';
|
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>
|
</script>
|
||||||
|
|
||||||
<h1>Data should be <span class="fun">Fun</span></h1>
|
|
||||||
<div class="logo-json-box">
|
<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" />
|
<img src="/json.png" alt="With Kafka Dance, browsing Kafka data is easy" />
|
||||||
-->
|
-->
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>Kafka Dance is a simple, elegant way to interact with your Kafka servers.</p>
|
<div class="eye-catch">
|
||||||
<div>
|
<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>
|
<button class="colored">Download Now</button>
|
||||||
</div>
|
</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">
|
<a href="/example_query.png">
|
||||||
<img class="big-photo" src="/example_query.png" alt="Example query" />
|
<img class="big-photo" src="/example_query.png" alt="Example query" />
|
||||||
</a>
|
</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>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
@ -24,10 +112,26 @@
|
||||||
padding-top: 1em;
|
padding-top: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-top: 2em;
|
||||||
|
font-size: 4rem;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
text-align: center;
|
text-align: left;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
margin-bottom: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye-catch {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye-catch h2 {
|
||||||
|
font-size: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
|
@ -54,15 +158,30 @@
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
color: var(--accent-color);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
padding: 0.5em 2em;
|
padding: 0.5em 2em;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.button-container {
|
||||||
|
margin-top: 6em;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
.logo-json-box {
|
.logo-json-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.columns {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,9 +1,18 @@
|
||||||
|
import * as staticAdapter from '@sveltejs/adapter-static';
|
||||||
import adapter from '@sveltejs/adapter-auto';
|
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} */
|
/** @type {import('@sveltejs/kit').Config} */
|
||||||
const config = {
|
const config = {
|
||||||
kit: {
|
kit: {
|
||||||
adapter: adapter()
|
adapter: a,
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue