From bb21ff8e9b9333eeab1867751012107a2ff11652 Mon Sep 17 00:00:00 2001
From: Sage Vaillancourt <sagev9000@tutanota.com>
Date: Fri, 2 Sep 2022 00:44:42 -0400
Subject: [PATCH] Add a few more things.

'Return to home' to download page.
Javascript filter mockup.
GitLab link on NavBar.
Misc visual improvements.
---
 src/app.css                      |  31 ++++++-
 src/lib/header/NavBar.svelte     |  18 +++-
 src/routes/+page.svelte          | 140 +++++++++++++++++++++++--------
 src/routes/download/+page.svelte |   3 +
 4 files changed, 153 insertions(+), 39 deletions(-)

diff --git a/src/app.css b/src/app.css
index 7b128f2..8af9d56 100644
--- a/src/app.css
+++ b/src/app.css
@@ -47,7 +47,6 @@ select option {
 }
 
 button {
-	padding: 0.4em 1.0em;
 	border-radius: 5px;
 	border-style: solid;
 	background-color: white;
@@ -55,6 +54,8 @@ button {
 	width: auto;;
 	transition: 100ms linear;
 	font-weight: 600;
+	padding: 0.5em 2em;
+	font-size: 100%;
 }
 
 button:hover {
@@ -113,6 +114,12 @@ button.danger:hover {
 	border-color: black;
 }
 
+.button-container {
+	margin-top: 2em;
+	text-align: center;
+}
+
+
 .collapsed-hint {
 	width: 100%;
 	text-align: right;
@@ -165,7 +172,7 @@ h1 {
 	font-weight: normal;
 	font-family: serif;
 	color: black;
-	font-size: 3rem;
+	font-size: 4rem;
 }
 
 h1 .fun {
@@ -226,6 +233,26 @@ button:focus:not(:focus-visible) {
 	outline: none;
 }
 
+.pulse {
+	animation: pulse 2s infinite;
+}
+
+.white-glow:hover {
+	filter: drop-shadow(0px 0px 2px #ffffff);
+}
+
+@keyframes pulse {
+	0% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.8;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
 @media (min-width: 720px) {
 	h1 {
 		font-size: 5rem;
diff --git a/src/lib/header/NavBar.svelte b/src/lib/header/NavBar.svelte
index 8c19a45..7dec3c9 100644
--- a/src/lib/header/NavBar.svelte
+++ b/src/lib/header/NavBar.svelte
@@ -8,6 +8,9 @@
 </script>
 
 <nav>
+    <div>
+
+    </div>
     <ul data-sveltekit-prefetch>
         {#each routes as route}
             <li class:active={$page.url.pathname === route.path}>
@@ -15,18 +18,25 @@
             </li>
         {/each}
     </ul>
+    <div style="display: flex; align-items: center;">
+        <a title="Kafka Dance GitLab" href="https://gitlab.com/kafka-dance">
+            <img alt="GitLab Logo" style="height: 20px;"
+                 class="white-glow"
+                 src="/gitlab-logo-white.svg">
+        </a>
+    </div>
 </nav>
 
 <style>
     nav {
         display: flex;
+        flex-direction: row;
         background-color: var(--accent-color);
         color: white;
-        align-content: center;
-        justify-content: center;
-        text-align: center;
+        justify-content: space-between;
         font-weight: bold;
-        font-size: 125%;
+        padding-left: 1em;
+        padding-right: 1em;
     }
     ul {
         padding: 0;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 603aefa..6c4858c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -5,43 +5,46 @@
   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([
-`{
+
+  const stringy = o => o && JSON.stringify(o, null, 2)
+
+  const fakeObjects = repeat([
+JSON.parse(`{
   "eventType": "purchase",
   "username": "sagev",
   "itemName": "Bean Enchilada",
   "quantity": 2,
   "purchaseId": "${id}"
-}`,
-`{
+}`),
+JSON.parse(`{
   "eventType": "purchase",
   "username": "cameronl",
   "itemName": "Taco",
-  "quantity": 2
+  "quantity": 7,
   "purchaseId": "${id2}"
-}`,
-`{
+}`),
+JSON.parse(`{
   "eventType": "refund",
   "username": "sagev",
   "refundStatus": "APPROVED",
   "approvedBy": "westonm",
   "purchaseId": "${id}"
-}`
+}`)
     ], 3)
   let realTimeIndex = 0
   const randomizeRealTime = () => setTimeout(() => {
-    realTimeIndex = (realTimeIndex + 1) % fakeJson.length
+    realTimeIndex = (realTimeIndex + 1) % fakeObjects.length
     randomizeRealTime()
-  }, 2000)
+  }, 1500)
   randomizeRealTime()
 
   let line = 0
-  let oneShotText = fakeJson[0]
+  let oneShotText = JSON.stringify(fakeObjects[0])
   const loadingColor = '#df5dcf'
   let oneShotColor = loadingColor
   const blockLines = 7
-  const fakeJsonLines = fakeJson.join('\n').split('\n')
-  const randomizeOneShot = (wait = 50) => setTimeout(() => {
+  const fakeJsonLines = fakeObjects.map(o => JSON.stringify(o, null, 2)).join('\n').split('\n')
+  const randomizeOneShot = (wait = 30) => setTimeout(() => {
     if (line < fakeJsonLines.length - blockLines) {
       line += 1
       oneShotColor = loadingColor
@@ -55,6 +58,26 @@
   }, wait)
   randomizeOneShot()
 
+  const filterTexts = [
+    'message.approvedBy === "westonm"',
+    'message.itemName.includes("Bean")',
+    'message.quantity > 4',
+  ]
+  let filterTextIndex = 0
+  $: filterFunc = text => {
+    try {
+      return new Function('message', 'return ' + filterTexts[filterTextIndex])(text)
+    } catch (e) {
+      return undefined
+    }
+  }
+  $: filteredObject = stringy(fakeObjects.filter(filterFunc)[0]) || 'No results found.'.padEnd(50)
+  const nextFilterText = () => setTimeout(() => {
+    filterTextIndex = (filterTextIndex + 1) % filterTexts.length
+    nextFilterText()
+  }, 2800)
+  nextFilterText()
+
 </script>
 
 <div class="logo-json-box">
@@ -65,9 +88,9 @@
 <div class="content">
     <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>
+        <h2 class="with-kafka-dance">With <span><img class="inline-logo" src={logo} alt="Kafka Dance" />,</span> it is.</h2>
         <div class="button-container">
-            <button class="colored">Download Now</button>
+            <a href="/download"><button class="colored">Download Now</button></a>
         </div>
         <Todo>
             Push 'What is Kafka Dance?' down further, but come up with a visual indicator that there's
@@ -75,8 +98,8 @@
         </Todo>
     </div>
 
-    <div>
-        <h3 style="text-align: center; margin-top: 10em;">Continue reading, below</h3>
+    <div class="column">
+        <h3 class="continue-reading">Read how<br><br><span class="pulse">V</span></h3>
         <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">
@@ -86,18 +109,26 @@
 
     <div>
         <h2>Query data your way</h2>
-        <Todo>Combine these into one display with a switch?</Todo>
         <div class="data-display">
             <div class="data-display-section">
                 <h3>Search your message history</h3>
                 <pre style={`color: ${oneShotColor}`};>{oneShotText}</pre>
             </div>
 
-            <div style="margin: 12px"></div>
-
             <div class="data-display-section real-time-display">
-                <h3>Or monitor for new messages in real time</h3>
-                <pre>{fakeJson[realTimeIndex]}</pre>
+                <h3>Or monitor in real time</h3>
+                <pre>{JSON.stringify(fakeObjects[realTimeIndex], null, 2)}</pre>
+            </div>
+        </div>
+    </div>
+
+    <div>
+        <h2>Flexible search</h2>
+        <h3>Powered by Javascript</h3>
+        <div class="data-display">
+            <div class="data-display-section">
+                <pre style="width: 90%; margin-top: 0; padding-bottom: 0.5em; border-bottom: solid #fbc; border-radius: 0; border-width: 1px;"><span style="color: #533;">=&gt;</span> {filterTexts[filterTextIndex]}</pre>
+                <pre>{filteredObject}</pre>
             </div>
         </div>
     </div>
@@ -108,8 +139,15 @@
         padding-top: 1em;
     }
 
+    .with-kafka-dance span {
+        padding-right: 0.2em;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        flex-wrap: nowrap;
+    }
+
     .data-display-section h3 {
-        text-decoration: underline;
     }
     .data-display-section {
         padding: 1em 1em 0;
@@ -117,6 +155,7 @@
         border-style: solid;
         border-width: 2px;
         border-color: var(--accent-color);
+        margin: 1em;
     }
 
     .real-time-display {
@@ -128,10 +167,21 @@
         color: white;
     }
 
+    pre {
+        max-width: 75vw;
+        overflow: hidden;
+    }
+
     h2 {
-        margin-top: 2em;
+        flex-wrap: wrap;
         font-size: 4rem;
         color: black;
+        margin: 2em 0.5em 0.5em;
+    }
+
+    h3 {
+        margin-left: 2em;
+        margin-right: 2em;
     }
 
     .content {
@@ -142,12 +192,18 @@
         margin-bottom: 2em;
     }
 
+    .column {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
     .eye-catch {
         margin-bottom: 1em;
     }
 
     .eye-catch h2 {
-        font-size: 2.5rem;
+        font-size: 1.5rem;
     }
 
     h2 {
@@ -168,9 +224,9 @@
     img.big-photo {
         display: inline-block;
         /*max-width: 40vw;*/
-        max-height: 50vw;
+        /*max-height: 50vw;*/
         margin-top: 2em;
-        width: auto;
+        max-width: 60vw;
         height: auto;
     }
 
@@ -180,14 +236,8 @@
         box-shadow: none;
     }
 
-    button {
-        padding: 0.5em 2em;
-        font-size: 100%;
-    }
-
     .button-container {
         margin-top: 6em;
-        text-align: center;
     }
 
     .logo-json-box {
@@ -199,11 +249,35 @@
 
     .data-display {
         display: flex;
+        flex-wrap: wrap;
         flex-direction: column;
+        justify-content: center;
     }
+
+    .data-display h3 {
+        margin-left: 0;
+        margin-right: 0;
+    }
+
+    .continue-reading {
+        display: none;
+    }
+
     @media (min-width: 720px) {
+        .eye-catch h2 {
+            font-size: 2rem;
+        }
         .data-display {
             flex-direction: row;
         }
+        img.big-photo {
+            width: 70vw;
+        }
+
+        .continue-reading {
+            display: block;
+            text-align: center;
+            margin-top: 10em;
+        }
     }
 </style>
diff --git a/src/routes/download/+page.svelte b/src/routes/download/+page.svelte
index 8e22415..40a2b4a 100644
--- a/src/routes/download/+page.svelte
+++ b/src/routes/download/+page.svelte
@@ -4,6 +4,9 @@
 <h1>Thank you for your interest!</h1>
 <h2>Kafka Dance is not yet available for download</h2>
 <p>However, a <a href="https://sage-melba-f44713.netlify.app/">demo version</a> is available online.</p>
+<div class="button-container">
+    <a href="/"><button class="colored">Return to Home</button></a>
+</div>
 
 <style>
     p {