README.md

@@ -1,10 +1,22 @@
-# Kafka Dance Site
+# create-svelte
 
-Powered by Svelte!
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
 
 ## Developing
 
-Once you've downloaded the project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
 
 ```bash
 npm run dev
@@ -15,12 +27,12 @@ npm run dev -- --open
 
 ## Building
 
-To build out the production version:
+To create a production version of your app:
 
 ```bash
 npm run build
 ```
 
-This is currently configured to build as a completely static app.
-
 You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

package-lock.json

@@ -11,7 +11,6 @@
 				"@sveltejs/adapter-auto": "next",
 				"@sveltejs/adapter-static": "^1.0.0-next.41",
 				"@sveltejs/kit": "next",
-				"mdsvex": "^0.10.6",
 				"svelte": "^3.44.0",
 				"svelte-check": "^2.7.1",
 				"typescript": "^4.7.4",
@@ -294,12 +293,6 @@
 				"@types/node": "*"
 			}
 		},
-		"node_modules/@types/unist": {
-			"version": "2.0.6",
-			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
-			"integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==",
-			"dev": true
-		},
 		"node_modules/@vercel/nft": {
 			"version": "0.22.0",
 			"resolved": "https://registry.npmjs.org/@vercel/nft/-/nft-0.22.0.tgz",
@@ -1346,21 +1339,6 @@
 				"semver": "bin/semver.js"
 			}
 		},
-		"node_modules/mdsvex": {
-			"version": "0.10.6",
-			"resolved": "https://registry.npmjs.org/mdsvex/-/mdsvex-0.10.6.tgz",
-			"integrity": "sha512-aGRDY0r5jx9+OOgFdyB9Xm3EBr9OUmcrTDPWLB7a7g8VPRxzPy4MOBmcVYgz7ErhAJ7bZ/coUoj6aHio3x/2mA==",
-			"dev": true,
-			"dependencies": {
-				"@types/unist": "^2.0.3",
-				"prism-svelte": "^0.4.7",
-				"prismjs": "^1.17.1",
-				"vfile-message": "^2.0.4"
-			},
-			"peerDependencies": {
-				"svelte": "3.x"
-			}
-		},
 		"node_modules/merge2": {
 			"version": "1.4.1",
 			"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -1666,21 +1644,6 @@
 				"node": "^10 || ^12 || >=14"
 			}
 		},
-		"node_modules/prism-svelte": {
-			"version": "0.4.7",
-			"resolved": "https://registry.npmjs.org/prism-svelte/-/prism-svelte-0.4.7.tgz",
-			"integrity": "sha512-yABh19CYbM24V7aS7TuPYRNMqthxwbvx6FF/Rw920YbyBWO3tnyPIqRMgHuSVsLmuHkkBS1Akyof463FVdkeDQ==",
-			"dev": true
-		},
-		"node_modules/prismjs": {
-			"version": "1.29.0",
-			"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
-			"integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
-			"dev": true,
-			"engines": {
-				"node": ">=6"
-			}
-		},
 		"node_modules/queue-microtask": {
 			"version": "1.2.3",
 			"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -2238,39 +2201,12 @@
 				"node": ">=12.18"
 			}
 		},
-		"node_modules/unist-util-stringify-position": {
-			"version": "2.0.3",
-			"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
-			"integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
-			"dev": true,
-			"dependencies": {
-				"@types/unist": "^2.0.2"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/unified"
-			}
-		},
 		"node_modules/util-deprecate": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
 			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
 			"dev": true
 		},
-		"node_modules/vfile-message": {
-			"version": "2.0.4",
-			"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
-			"integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==",
-			"dev": true,
-			"dependencies": {
-				"@types/unist": "^2.0.0",
-				"unist-util-stringify-position": "^2.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/unified"
-			}
-		},
 		"node_modules/vite": {
 			"version": "3.1.0-beta.1",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-3.1.0-beta.1.tgz",
@@ -2589,12 +2525,6 @@
 				"@types/node": "*"
 			}
 		},
-		"@types/unist": {
-			"version": "2.0.6",
-			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
-			"integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==",
-			"dev": true
-		},
 		"@vercel/nft": {
 			"version": "0.22.0",
 			"resolved": "https://registry.npmjs.org/@vercel/nft/-/nft-0.22.0.tgz",
@@ -3290,18 +3220,6 @@
 				}
 			}
 		},
-		"mdsvex": {
-			"version": "0.10.6",
-			"resolved": "https://registry.npmjs.org/mdsvex/-/mdsvex-0.10.6.tgz",
-			"integrity": "sha512-aGRDY0r5jx9+OOgFdyB9Xm3EBr9OUmcrTDPWLB7a7g8VPRxzPy4MOBmcVYgz7ErhAJ7bZ/coUoj6aHio3x/2mA==",
-			"dev": true,
-			"requires": {
-				"@types/unist": "^2.0.3",
-				"prism-svelte": "^0.4.7",
-				"prismjs": "^1.17.1",
-				"vfile-message": "^2.0.4"
-			}
-		},
 		"merge2": {
 			"version": "1.4.1",
 			"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -3506,18 +3424,6 @@
 				"source-map-js": "^1.0.2"
 			}
 		},
-		"prism-svelte": {
-			"version": "0.4.7",
-			"resolved": "https://registry.npmjs.org/prism-svelte/-/prism-svelte-0.4.7.tgz",
-			"integrity": "sha512-yABh19CYbM24V7aS7TuPYRNMqthxwbvx6FF/Rw920YbyBWO3tnyPIqRMgHuSVsLmuHkkBS1Akyof463FVdkeDQ==",
-			"dev": true
-		},
-		"prismjs": {
-			"version": "1.29.0",
-			"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
-			"integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
-			"dev": true
-		},
 		"queue-microtask": {
 			"version": "1.2.3",
 			"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -3880,31 +3786,12 @@
 			"integrity": "sha512-c8HsD3IbwmjjbLvoZuRI26TZic+TSEe8FPMLLOkN1AfYRhdjnKBU6yL+IwcSCbdZiX4e5t0lfMDLDCqj4Sq70g==",
 			"dev": true
 		},
-		"unist-util-stringify-position": {
-			"version": "2.0.3",
-			"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
-			"integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
-			"dev": true,
-			"requires": {
-				"@types/unist": "^2.0.2"
-			}
-		},
 		"util-deprecate": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
 			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
 			"dev": true
 		},
-		"vfile-message": {
-			"version": "2.0.4",
-			"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
-			"integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==",
-			"dev": true,
-			"requires": {
-				"@types/unist": "^2.0.0",
-				"unist-util-stringify-position": "^2.0.0"
-			}
-		},
 		"vite": {
 			"version": "3.1.0-beta.1",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-3.1.0-beta.1.tgz",

package.json

@@ -13,7 +13,6 @@
 		"@sveltejs/adapter-auto": "next",
 		"@sveltejs/adapter-static": "^1.0.0-next.41",
 		"@sveltejs/kit": "next",
-		"mdsvex": "^0.10.6",
 		"svelte": "^3.44.0",
 		"svelte-check": "^2.7.1",
 		"typescript": "^4.7.4",

src/app.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&family=Inter:wght@600;800&family=Montserrat:wght@500&family=Roboto&family=Source+Serif+Pro&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&family=Montserrat:wght@500&family=Roboto&display=swap');
 
 :root {
 	font-family: 'Fira Sans', Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
@@ -18,6 +18,12 @@
 	--column-margin-top: 4rem;
 }
 
+.root-div {
+	height: 100vh;
+	display: flex;
+	flex-direction: column;
+}
+
 select, button, input {
 	font-family: Roboto, Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 	font-size: 90%;
@@ -170,8 +176,8 @@ h1 {
 }
 
 h1 .fun {
-	font-family: 'Inter', sans-serif;
+	/*font-family: sans-serif;*/
-	font-weight: 700;
+	font-weight: 600;
 	color: var(--accent-color);
 }
 
@@ -183,18 +189,12 @@ p {
 }
 
 h3 {
-	font-size: 1.2rem;
+	font-family: 'Montserrat', sans-serif;
-	margin-bottom: 0;
+	margin-top: 0;
-}
-
-h4 {
-	font-size: 1.1rem;
-	margin-bottom: 0;
 }
 
 p {
 	line-height: 1.5;
-	font-size: 1.3rem;
 }
 
 a {
@@ -211,35 +211,20 @@ h1, h2 {
 }
 
 h2 {
-	font-size: 2rem;
+	font-size: 1.2rem;
-	margin-bottom: 0;
 }
 
 pre {
+	font-size: 16px;
+	font-family: var(--font-mono);
 	background-color: rgba(255, 255, 255, 0.45);
 	border-radius: 3px;
 	box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
 	padding: 0.5em;
 	overflow-x: auto;
+	color: var(--text-color);
 }
 
-code {
-	font-size: 16px;
-	font-family: var(--font-mono);
-}
-
-/*
-.token.property {
-	color: #486eff;
-}
-.token.string {
-	color: #dc1daf;
-}
-.token.number {
-	color: #60250c;
-}
- */
-
 .bracket {
 	color: #a0adb9;
 }
@@ -270,15 +255,9 @@ button:focus:not(:focus-visible) {
 
 @media (min-width: 720px) {
 	h1 {
-		font-size: 6rem;
+		font-size: 5rem;
 	}
 	h2 {
 		font-size: 2rem;
 	}
 }
-
-@media (max-width: 719px) {
-	.wide-only {
-		display: none;
-	}
-}

src/app.html

@@ -7,6 +7,6 @@
 		%sveltekit.head%
 	</head>
 	<body>
-		%sveltekit.body%
+		<div class="root-div">%sveltekit.body%</div>
 	</body>
 </html>

src/lib/header/NavBar.svelte

@@ -1,8 +1,9 @@
 <script>
   import { page } from '$app/stores';
   const routes = [
+    { path: '/', name: 'Home' },
     { path: '/download', name: 'Download' },
-    { path: '/blog', name: 'Blog' },
+    //{ path: '/about', name: 'About' }
   ]
 </script>
 
@@ -10,21 +11,16 @@
     <div>
 
     </div>
-    <div>
     <ul data-sveltekit-prefetch>
-            <li class:active={$page.url.pathname === '/'}>
-                <a href='/'>Home</a>
-            </li>
         {#each routes as route}
-                <li class:active={$page.url.pathname.startsWith(route.path)}>
+            <li class:active={$page.url.pathname === route.path}>
                 <a href={route.path}>{route.name}</a>
             </li>
         {/each}
     </ul>
-    </div>
     <div style="display: flex; align-items: center;">
         <a title="Kafka Dance GitLab" href="https://gitlab.com/kafka-dance">
-            <img alt="GitLab Logo" style="height: 18px; width: auto;"
+            <img alt="GitLab Logo" style="height: 20px;"
                  class="white-glow"
                  src="/gitlab-logo-white.svg">
         </a>
@@ -50,7 +46,7 @@
     }
     li {
         content: '';
-        padding: 0 1em;
+        padding: 0 2em;
         white-space: nowrap;
     }
     li a {
@@ -59,9 +55,4 @@
     li.active::before {
         content: '> '
     }
-    @media (min-width: 480px) {
-        li {
-            padding: 0 2em;
-        }
-    }
 </style>

src/routes/+layout.js

@@ -1 +0,0 @@
-export const prerender = true

src/routes/+layout.svelte

@@ -1,4 +1,6 @@
 <script>
+	export const prerender = true
+
 	import '../app.css'
 	import Header from '$lib/header/Header.svelte'
 </script>
@@ -17,9 +19,11 @@
 		flex-direction: column;
 		padding: 1rem 1rem 0;
 		width: 100%;
+		/*
+		max-width: 1024px;
+		 */
 		margin: 0 auto;
 		box-sizing: border-box;
-		align-items: center;
 	}
 
 	footer {

src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <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'
@@ -30,6 +31,12 @@ JSON.parse(`{
   "purchaseId": "${id}"
 }`)
     ], 3)
+  let realTimeIndex = 0
+  const randomizeRealTime = () => setTimeout(() => {
+    realTimeIndex = (realTimeIndex + 1) % fakeObjects.length
+    randomizeRealTime()
+  }, 1500)
+  randomizeRealTime()
 
   let line = 0
   let oneShotText = JSON.stringify(fakeObjects[0])
@@ -65,15 +72,19 @@ JSON.parse(`{
     }
   }
   $: filteredObject = stringy(fakeObjects.filter(filterFunc)[0]) || 'No results found.'.padEnd(50)
-
+  const nextFilterText = () => setTimeout(() => {
-  let realTimeIndex = 0
+    filterTextIndex = (filterTextIndex + 1) % filterTexts.length
-  if (typeof window !== 'undefined') {
+    nextFilterText()
-    window.setInterval(() => realTimeIndex = (realTimeIndex + 1) % fakeObjects.length, 1500)
+  }, 2800)
-    window.setInterval(() => filterTextIndex = (filterTextIndex + 1) % filterTexts.length, 2800)
+  nextFilterText()
-  }
 
 </script>
 
+<div class="logo-json-box">
+    <!--
+    <img src="/json.png" alt="With Kafka Dance, browsing Kafka data is easy" />
+    -->
+</div>
 <div class="content">
     <div class="eye-catch">
         <h1>Data should be <span class="fun">Fun</span></h1>
@@ -81,6 +92,10 @@ JSON.parse(`{
         <div class="button-container">
             <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
+            more to read. Something like this, but better:
+        </Todo>
     </div>
 
     <div class="column">
@@ -97,12 +112,12 @@ JSON.parse(`{
         <div class="data-display">
             <div class="data-display-section">
                 <h3>Search your message history</h3>
-                <pre style={`color: ${oneShotColor}`};><code>{oneShotText}</code></pre>
+                <pre style={`color: ${oneShotColor}`};>{oneShotText}</pre>
             </div>
 
             <div class="data-display-section real-time-display">
                 <h3>Or monitor in real time</h3>
-                <pre><code>{JSON.stringify(fakeObjects[realTimeIndex], null, 2)}</code></pre>
+                <pre>{JSON.stringify(fakeObjects[realTimeIndex], null, 2)}</pre>
             </div>
         </div>
     </div>
@@ -111,34 +126,17 @@ JSON.parse(`{
         <h2>Flexible search</h2>
         <h3>Powered by Javascript</h3>
         <div class="data-display">
-            <div class="data-display-section standalone-data-display">
+            <div class="data-display-section">
-                    <pre><code><span style="color: #533;" class="wide-only">=&gt; </span>{filterTexts[filterTextIndex]}</code></pre>
+                <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>
-                <hr>
+                <pre>{filteredObject}</pre>
-                <pre><code>{filteredObject}</code></pre>
             </div>
         </div>
     </div>
 </div>
 
 <style>
-    h3 {
+    h1 {
-        margin-top: 0;
+        padding-top: 1em;
-    }
-
-    .standalone-data-display pre {
-        width: 90%;
-        margin-top: 0;
-    }
-
-    .data-display-section hr {
-        margin-top: -0.5em;
-        border-radius: 0;
-        border-top-style: none;
-        border-right-style: none;
-        border-left-style: none;
-        border-bottom-style: solid;
-        border-bottom-width: 1px;
-        border-bottom-color: #fbc;
     }
 
     .with-kafka-dance span {
@@ -149,6 +147,8 @@ JSON.parse(`{
         flex-wrap: nowrap;
     }
 
+    .data-display-section h3 {
+    }
     .data-display-section {
         padding: 1em 1em 0;
         border-radius: 4px;
@@ -199,7 +199,7 @@ JSON.parse(`{
     }
 
     .eye-catch {
-        margin: 1em;
+        margin-bottom: 1em;
     }
 
     .eye-catch h2 {
@@ -223,8 +223,10 @@ JSON.parse(`{
 
     img.big-photo {
         display: inline-block;
+        /*max-width: 40vw;*/
+        /*max-height: 50vw;*/
         margin-top: 2em;
-        max-width: 90vw;
+        max-width: 60vw;
         height: auto;
     }
 
@@ -238,6 +240,13 @@ JSON.parse(`{
         margin-top: 6em;
     }
 
+    .logo-json-box {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+    }
+
     .data-display {
         display: flex;
         flex-wrap: wrap;
@@ -262,8 +271,7 @@ JSON.parse(`{
             flex-direction: row;
         }
         img.big-photo {
-            max-width: 70vw;
+            width: 70vw;
-            max-height: 70vh;
         }
 
         .continue-reading {

src/routes/api/posts/+server.js

@@ -1,28 +0,0 @@
-import { json } from '@sveltejs/kit'
-
-const fetchMarkdownPosts = async () => {
-  const allPostFiles = import.meta.glob('/src/routes/blog/*.md')
-  const iterablePostFiles = Object.entries(allPostFiles)
-
-  return Promise.all(
-    iterablePostFiles.map(async ([path, resolver]) => {
-      const { metadata } = await resolver()
-      const postPath = path.slice(11, -3)
-
-      return {
-        meta: metadata,
-        path: postPath,
-      }
-    })
-  )
-}
-
-export const GET = async () => {
-  const allPosts = await fetchMarkdownPosts()
-
-  const sortedPosts = allPosts.sort((a, b) => {
-    return new Date(b.meta.date) - new Date(a.meta.date)
-  })
-
-  return json(sortedPosts)
-}

src/routes/blog/+page.js

@@ -1,4 +0,0 @@
-export async function load ({ fetch }) {
-  const response = await fetch('/api/posts')
-  return await response.json()
-}

src/routes/blog/+page.svelte

@@ -1,68 +0,0 @@
-<script>
-    export let data = {}
-    $: dataList = Object.values(data)
-</script>
-
-<h1>Blog</h1>
-<div class="content">
-    {#each dataList as datum}
-        <a href={datum.path}>
-            <div class="with-image">
-                <div class="blog-entry">
-                    <div class="metadata">
-                        <h2>{datum.meta.title}</h2>
-                        <p>{datum.meta.date}</p>
-                    </div>
-                    <p class="description">{datum.meta.description}</p>
-                </div>
-                <img src={datum.meta.headerImage} alt={datum.meta.headerImageAlt}>
-            </div>
-        </a>
-    {/each}
-</div>
-
-<style>
-    .with-image {
-        display: flex;
-        flex-direction: column;
-        background-color: rgba(0, 0, 0, 0.03);
-        padding: 1em;
-        transition: background-color 300ms;
-    }
-    .with-image:hover {
-        background-color: rgba(0, 0, 0, 0.08);
-    }
-    .with-image img {
-        max-width: 90%;
-    }
-    .blog-entry {
-        display: flex;
-        flex-direction: column;
-    }
-    .metadata {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-    }
-    .metadata * {
-        margin: 0;
-    }
-
-    .content {
-        flex-grow: 1;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    a {
-        text-decoration: none;
-    }
-
-    @media (min-width: 720px) {
-        .blog-entry {
-            max-width: 70vw;
-        }
-    }
-</style>

src/routes/blog/[post]/+page.js

@@ -1,9 +0,0 @@
-export async function load({ params }){
-  const post = await import(/* @vite-ignore */ `../${params.post}.md`)
-  const content = post.default
-
-  return {
-    content,
-    metadata: post.metadata,
-  }
-}

src/routes/blog/[post]/+page.svelte

@@ -1,66 +0,0 @@
-<script>
-  export let data
-</script>
-
-<svelte:head>
-    <style>
-        /*
-         * Done within <head> because elements within svelte:component
-         * are otherwise not styled
-         */
-        .content p, .content h2, .content h3, .content h4 {
-            font-family: 'Source Serif Pro', serif;
-        }
-        .content h3 {
-            font-size: 1.3rem;
-        }
-    </style>
-</svelte:head>
-
-<div class="title-with-image">
-    <h1>{data.metadata.title}</h1>
-    <img src={data.metadata.headerImage}  alt={data.metadata.headerImageAlt}/>
-</div>
-<div class="content">
-    <svelte:component this={data.content} />
-</div>
-
-<style>
-    h1 {
-        margin-bottom: 0;
-    }
-
-    .content {
-        max-width: 90vw;
-        display: flex;
-        flex-direction: column;
-        flex-wrap: wrap;
-    }
-
-    .title-with-image {
-        display: flex;
-        flex-direction: column;
-        flex-wrap: wrap;
-        align-items: center;
-        justify-content: center;
-    }
-    .title-with-image h1 {
-        font-size: 5rem;
-    }
-    .title-with-image img {
-        margin: 0 2em 0;
-    }
-    .title-with-image img {
-        max-width: 80vw;
-    }
-
-    @media (min-width: 720px) {
-        .content {
-            flex-wrap: nowrap;
-            max-width: calc(min(700px, 100%));
-        }
-        .title-with-image img {
-            max-width: 30vw;
-        }
-    }
-</style>

src/routes/blog/what-is-kafka.md

@@ -1,69 +0,0 @@
----
-title: What is Kafka?
-date: "2022-09-02"
-description: "A brief description of the increasingly-popular event system, Apache Kafka."
-headerImage: "/kafka-logo.png"
-headerImageAlt: "Kafka's logo"
----
-
-Initially built by LinkedIn, Apache Kafka is a distributed event store and stream processing platform. But, in more
-practical terms, what does it _do?_
-
-## Basics of Kafka
-
-The core principles of Kafka are very simple. There are three key components: producers, consumers, and the kafka cluster.
-
-### Producers
-
-Producers are responsible for creating new messages for your Kafka system. Every time an event occurs that the system
-should know about, a producer will generate a message describing this event.
-
-For example, a bookstore may have an application that _produces_ a message every time someone buys a new book:
-
-```json
-{
-  "action": "purchase",
-  "title": "The Metamorphosis",
-  "price": 9.99,
-  "buyerId": "84694fc7",
-  "storeNum": "FL-231"
-}
-```
-
-The rest of the system decides what exactly to _do_ with this new information. Those parts of the system are called
-**Consumers**.
-
-### Consumers
-
-Whenever a message is produced in the Kafka system, a consumer can act in response to that new information.
-
-Returning to the previous example: this particular bookstore may have a service that informs authors and publishers
-every time one of their books has been purchased. This service may work as a consumer. Then, every time a book is
-purchased, the service _consumes_ the new message, and alerts the creators however it sees fit.
-
-One of the main benefits of this structure is an inherent loose coupling. Producers do not care how consumers work. If a
-consumer wants to send a text, rent a billboard, or order an ice cream, the producer simply is not interested. This
-allows each part of the system to focus on its own piece of the domain, each staying smaller and more self-contained.
-
-### Kafka Cluster
-
-The Kafka cluster, in short is what facilitates the connection between producers and consumers. An indefinite number of
-producers and consumers can connect to the cluster, and the cluster itself can be powered by many servers.
-
-The cluster decides exactly which messages need to go where, and a key part of this process is its use of **Topics**.
-
-### Topics
-
-"Topics" are Kafka's way of dividing up messages into different categories. A simple topic for our bookstore might be
-`book_purchases`, or `coffee_orders` (for the requisite café inside). So, when a book is sold, our producer would push a
-new message into the `book_purchases` topic. And of course, when someone orders a delicious fancy latte, a message is
-instead put into the `coffee_orders` topic.
-
-Importantly, consumers do not blindly receive every message produced in the system. Instead, they subscribe to
-individual topics. Our author-notification service might subscribe just to the `book_purchases` topic, not being
-very interested in messages from `coffee_orders`.
-
-Thus, every time the Kafka cluster receives a newly-produced message with a given topic, it only forwards it along to
-consumers that have intentionally subscribed.
-
-TODO: Wrap it up.

static/gitlab-logo-white.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M0 0h100v100H0z" fill="none"/><path d="M99.82 56.61 94.21 39.4 83.13 5.25a1.92 1.92 0 0 0-3.63 0L68.41 39.38H31.58L20.5 5.25a1.92 1.92 0 0 0-3.63 0L5.8 39.38.2 56.61a3.82 3.82 0 0 0 1.38 4.26L50 96.06l48.42-35.18a3.83 3.83 0 0 0 1.4-4.26" fill="#ec6d2e" style="fill:#fff"/><path d="m50 96 18.42-56.63H31.6z" fill="#9c9b9b" style="fill:#fff"/><path d="M50 96 31.58 39.37H5.8z" fill="#c6c6c5" style="fill:#fff"/><path d="M5.79 39.39.19 56.61a3.82 3.82 0 0 0 1.38 4.26L50 96.06z" fill="#ececec" style="fill:#fff"/><path d="M5.8 39.39h25.8L20.5 5.27a1.92 1.92 0 0 0-3.63 0z" fill="#9c9b9b" style="fill:#fff"/><path d="m50 96 18.42-56.63h25.8z" fill="#c6c6c5" style="fill:#fff"/><path d="m94.21 39.39 5.6 17.22a3.82 3.82 0 0 1-1.38 4.26L50 96l44.2-56.64z" fill="#ececec" style="fill:#fff"/><path d="M94.22 39.39h-25.8L79.5 5.27a1.92 1.92 0 0 1 3.63 0z" fill="#9c9b9b" style="fill:#fff"/></svg>

svelte.config.js

@@ -1,23 +1,19 @@
-import adapter from '@sveltejs/adapter-static';
+import * as staticAdapter from '@sveltejs/adapter-static';
-import { mdsvex } from "mdsvex";
+import adapter from '@sveltejs/adapter-auto';
 
-/** @type {import('@sveltejs/kit').Config} */
+const a = adapter()
-const config = {
+const s = staticAdapter.default({
-	kit: {
-		adapter: adapter({
 	pages: 'build',
 	assets: 'build',
 	fallback: null,
 	precompress: false
-		}),
-	},
-
-	extensions: ['.svelte', '.svx', '.md'],
-	preprocess: [
-		mdsvex({
-			extensions: ['.svx', '.md']
 })
-	],
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: a,
+	}
 };
 
 export default config;