diff --git a/src/app.css b/src/app.css index f49645c..42342a4 100644 --- a/src/app.css +++ b/src/app.css @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&family=Inter:wght@700&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, @@ -183,11 +183,18 @@ p { } h3 { - font-family: 'Montserrat', sans-serif; + font-size: 1.2rem; + margin-bottom: 0; +} + +h4 { + font-size: 1.1rem; + margin-bottom: 0; } p { line-height: 1.5; + font-size: 1.3rem; } a { @@ -204,20 +211,35 @@ h1, h2 { } h2 { - font-size: 1.2rem; + font-size: 1.5rem; + 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; } diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 7ec6b8e..cce482e 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -97,12 +97,12 @@ JSON.parse(`{

Search your message history

- 
{oneShotText}
+ 
{oneShotText}

Or monitor in real time

- 
{JSON.stringify(fakeObjects[realTimeIndex], null, 2)}
+ 
{JSON.stringify(fakeObjects[realTimeIndex], null, 2)}
@@ -112,9 +112,9 @@ JSON.parse(`{

Powered by Javascript

- 
=> {filterTexts[filterTextIndex]}
+ 
=> {filterTexts[filterTextIndex]}
- 
{filteredObject}
+ 
{filteredObject}
diff --git a/src/routes/blog/[post]/+page.svelte b/src/routes/blog/[post]/+page.svelte index 7ca9829..8421ee9 100644 --- a/src/routes/blog/[post]/+page.svelte +++ b/src/routes/blog/[post]/+page.svelte @@ -2,6 +2,21 @@ export let data + + + +

{data.metadata.title}

{data.metadata.headerImageAlt}/ @@ -29,24 +44,20 @@ align-items: center; justify-content: center; } + .title-with-image h1 { + font-size: 5rem; + } .title-with-image img { margin: 0 2em 0; } - /* - .title-with-image h1 { - flex-grow: 1; - } - .title-with-image img { - flex-grow: 1; - max-width: 100%; - } - */ .title-with-image img { max-width: 80vw; } + @media (min-width: 720px) { .content { - max-width: 50vw; + flex-wrap: nowrap; + max-width: calc(min(700px, 100%)); } .title-with-image img { max-width: 30vw; diff --git a/src/routes/blog/what-is-kafka.md b/src/routes/blog/what-is-kafka.md index 8937113..fb83095 100644 --- a/src/routes/blog/what-is-kafka.md +++ b/src/routes/blog/what-is-kafka.md @@ -6,8 +6,8 @@ headerImage: "/kafka-logo.png" headerImageAlt: "Kafka's logo" --- -Initially built by LinkedIn, Apache Kafka is a "distributed event store" and "stream processing" platform. -But what does that mean exactly? +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 @@ -26,7 +26,7 @@ For example, a bookstore may have an application that _produces_ a message every "title": "The Metamorphosis", "price": 9.99, "buyerId": "84694fc7", - "storeNum": "FL-231", + "storeNum": "FL-231" } ``` @@ -52,12 +52,12 @@ producers and consumers can connect to the cluster, and the cluster itself can b The cluster decides exactly which messages need to go where, and a key part of this process is its use of **Topics**. -#### 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 fancy latte or something hot and -bitter, a message is instead put into the `coffee_orders` topic. +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 @@ -66,9 +66,4 @@ 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: -## Distributed Event Store - -Essentially - -## Stream Processing +TODO: Wrap it up. \ No newline at end of file