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

Serif blog font. 

Other CSS tweaks, including header margin-bottoms.
This commit is contained in:
Sage Vaillancourt 2022-09-08 16:59:55 -04:00
parent d97433279b
commit 80be787180
4 changed files with 60 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/app.css
View File

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

8
src/routes/+page.svelte
View File

@ -97,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>
@ -112,9 +112,9 @@ JSON.parse(`{
<h3>Powered by Javascript</h3>
<div class="data-display">
<div class="data-display-section standalone-data-display">
<pre><span style="color: #533;" class="wide-only">=&gt; </span>{filterTexts[filterTextIndex]}</pre>
<pre><code><span style="color: #533;" class="wide-only">=&gt; </span>{filterTexts[filterTextIndex]}</code></pre>
<hr>
<pre>{filteredObject}</pre>
<pre><code>{filteredObject}</code></pre>
</div>
</div>
</div>

31
src/routes/blog/[post]/+page.svelte
View File

@ -2,6 +2,21 @@
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}/>
@ -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;

19
src/routes/blog/what-is-kafka.md
View File

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