Bump up h2 font-size.

Other CSS tweaks, including header margin-bottoms.

README.md

@@ -1,22 +1,10 @@
-# create-svelte
+# Kafka Dance Site
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+Powered by 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 created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+Once you've downloaded the project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
 
 ```bash
 npm run dev
@@ -27,12 +15,12 @@ npm run dev -- --open
 
 ## Building
 
-To create a production version of your app:
+To build out the production version:
 
 ```bash
 npm run build
 ```
 
-You can preview the production build with `npm run preview`.
+This is currently configured to build as a completely static app.
 
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+You can preview the production build with `npm run preview`.

package-lock.json

@@ -11,6 +11,7 @@
 				"@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",
@@ -293,6 +294,12 @@
 				"@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",
@@ -1339,6 +1346,21 @@
 				"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",
@@ -1644,6 +1666,21 @@
 				"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",
@@ -2201,12 +2238,39 @@
 				"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",
@@ -2525,6 +2589,12 @@
 				"@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",
@@ -3220,6 +3290,18 @@
 				}
 			}
 		},
+		"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",
@@ -3424,6 +3506,18 @@
 				"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",
@@ -3786,12 +3880,31 @@
 			"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,6 +13,7 @@
 		"@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=Montserrat:wght@500&family=Roboto&display=swap');
+@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');
 
 :root {
 	font-family: 'Fira Sans', Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
@@ -18,12 +18,6 @@
 	--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%;
@@ -176,8 +170,8 @@ h1 {
 }
 
 h1 .fun {
-	/*font-family: sans-serif;*/
+	font-family: 'Inter', sans-serif;
-	font-weight: 600;
+	font-weight: 700;
 	color: var(--accent-color);
 }
 
@@ -189,12 +183,18 @@ p {
 }
 
 h3 {
-	font-family: 'Montserrat', sans-serif;
+	font-size: 1.2rem;
-	margin-top: 0;
+	margin-bottom: 0;
+}
+
+h4 {
+	font-size: 1.1rem;
+	margin-bottom: 0;
 }
 
 p {
 	line-height: 1.5;
+	font-size: 1.3rem;
 }
 
 a {
@@ -211,20 +211,35 @@ h1, h2 {
 }
 
 h2 {
-	font-size: 1.2rem;
+	font-size: 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;
 }
@@ -255,9 +270,15 @@ button:focus:not(:focus-visible) {
 
 @media (min-width: 720px) {
 	h1 {
-		font-size: 5rem;
+		font-size: 6rem;
 	}
 	h2 {
 		font-size: 2rem;
 	}
 }
+
+@media (max-width: 719px) {
+	.wide-only {
+		display: none;
+	}
+}

src/app.html

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

src/lib/header/NavBar.svelte

@@ -1,9 +1,8 @@
 <script>
   import { page } from '$app/stores';
   const routes = [
-    { path: '/', name: 'Home' },
     { path: '/download', name: 'Download' },
-    //{ path: '/about', name: 'About' }
+    { path: '/blog', name: 'Blog' },
   ]
 </script>
 
@@ -11,16 +10,21 @@
     <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 === route.path}>
+                <li class:active={$page.url.pathname.startsWith(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: 20px;"
+            <img alt="GitLab Logo" style="height: 18px; width: auto;"
                  class="white-glow"
                  src="/gitlab-logo-white.svg">
         </a>
@@ -46,7 +50,7 @@
     }
     li {
         content: '';
-        padding: 0 2em;
+        padding: 0 1em;
         white-space: nowrap;
     }
     li a {
@@ -55,4 +59,9 @@
     li.active::before {
         content: '> '
     }
+    @media (min-width: 480px) {
+        li {
+            padding: 0 2em;
+        }
+    }
 </style>

src/routes/+layout.js

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

src/routes/+layout.svelte

@@ -1,6 +1,4 @@
 <script>
-	export const prerender = true
-
 	import '../app.css'
 	import Header from '$lib/header/Header.svelte'
 </script>
@@ -19,11 +17,9 @@
 		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,6 +1,5 @@
 <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'
@@ -31,12 +30,6 @@ 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])
@@ -72,19 +65,15 @@ JSON.parse(`{
     }
   }
   $: filteredObject = stringy(fakeObjects.filter(filterFunc)[0]) || 'No results found.'.padEnd(50)
-  const nextFilterText = () => setTimeout(() => {
+
-    filterTextIndex = (filterTextIndex + 1) % filterTexts.length
+  let realTimeIndex = 0
-    nextFilterText()
+  if (typeof window !== 'undefined') {
-  }, 2800)
+    window.setInterval(() => realTimeIndex = (realTimeIndex + 1) % fakeObjects.length, 1500)
-  nextFilterText()
+    window.setInterval(() => filterTextIndex = (filterTextIndex + 1) % filterTexts.length, 2800)
+  }
 
 </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>
@@ -92,10 +81,6 @@ 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">
@@ -112,12 +97,12 @@ JSON.parse(`{
         <div class="data-display">
             <div class="data-display-section">
                 <h3>Search your message history</h3>
-                <pre style={`color: ${oneShotColor}`};>{oneShotText}</pre>
+                <pre style={`color: ${oneShotColor}`};><code>{oneShotText}</code></pre>
             </div>
 
             <div class="data-display-section real-time-display">
                 <h3>Or monitor in real time</h3>
-                <pre>{JSON.stringify(fakeObjects[realTimeIndex], null, 2)}</pre>
+                <pre><code>{JSON.stringify(fakeObjects[realTimeIndex], null, 2)}</code></pre>
             </div>
         </div>
     </div>
@@ -126,17 +111,34 @@ JSON.parse(`{
         <h2>Flexible search</h2>
         <h3>Powered by Javascript</h3>
         <div class="data-display">
-            <div class="data-display-section">
+            <div class="data-display-section standalone-data-display">
-                <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><code><span style="color: #533;" class="wide-only">=&gt; </span>{filterTexts[filterTextIndex]}</code></pre>
-                <pre>{filteredObject}</pre>
+                <hr>
+                <pre><code>{filteredObject}</code></pre>
             </div>
         </div>
     </div>
 </div>
 
 <style>
-    h1 {
+    h3 {
-        padding-top: 1em;
+        margin-top: 0;
+    }
+
+    .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 {
@@ -147,8 +149,6 @@ 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-bottom: 1em;
+        margin: 1em;
     }
 
     .eye-catch h2 {
@@ -223,10 +223,8 @@ JSON.parse(`{
 
     img.big-photo {
         display: inline-block;
-        /*max-width: 40vw;*/
-        /*max-height: 50vw;*/
         margin-top: 2em;
-        max-width: 60vw;
+        max-width: 90vw;
         height: auto;
     }
 
@@ -240,13 +238,6 @@ 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;
@@ -271,7 +262,8 @@ JSON.parse(`{
             flex-direction: row;
         }
         img.big-photo {
-            width: 70vw;
+            max-width: 70vw;
+            max-height: 70vh;
         }
 
         .continue-reading {

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

@@ -0,0 +1,28 @@
+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

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

src/routes/blog/+page.svelte

@@ -0,0 +1,68 @@
+<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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,66 @@
+<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

@@ -0,0 +1,69 @@
+---
+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

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