sage
/
kafka-dance-site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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:
Sage Vaillancourt 2022-09-01 00:02:09 -04:00
parent c8583f3837
commit d681e1dac8
7 changed files with 226 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

26
src/lib/Todo.svelte Normal file
View File

@ -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>

6
src/lib/header/NavBar.svelte
View File

@ -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>

6
src/routes/+layout.svelte
View File

@ -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 {

137
src/routes/+page.svelte
View File

@ -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>
<button class="colored">Download Now</button>
<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>
<a href="/example_query.png">
<img class="big-photo" src="/example_query.png" alt="Example query" />
</a>
</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>

11
svelte.config.js
View File

@ -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,
}
};