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 { :root {
font-family: 'Fira Sans', Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, font-family: 'Fira Sans', Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
@ -183,11 +183,18 @@ p {
} }
h3 { h3 {
font-family: 'Montserrat', sans-serif; font-size: 1.2rem;
margin-bottom: 0;
}
h4 {
font-size: 1.1rem;
margin-bottom: 0;
} }
p { p {
line-height: 1.5; line-height: 1.5;
font-size: 1.3rem;
} }
a { a {
@ -204,20 +211,35 @@ h1, h2 {
} }
h2 { h2 {
font-size: 1.2rem; font-size: 1.5rem;
margin-bottom: 0;
} }
pre { pre {
font-size: 16px;
font-family: var(--font-mono);
background-color: rgba(255, 255, 255, 0.45); background-color: rgba(255, 255, 255, 0.45);
border-radius: 3px; border-radius: 3px;
box-shadow: 2px 2px 6px rgb(255 255 255 / 25%); box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
padding: 0.5em; padding: 0.5em;
overflow-x: auto; 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 { .bracket {
color: #a0adb9; color: #a0adb9;
} }

8
src/routes/+page.svelte
View File

@ -97,12 +97,12 @@ JSON.parse(`{
<div class="data-display"> <div class="data-display">
<div class="data-display-section"> <div class="data-display-section">
<h3>Search your message history</h3> <h3>Search your message history</h3>
<pre style={`color: ${oneShotColor}`};>{oneShotText}</pre> <pre style={`color: ${oneShotColor}`};><code>{oneShotText}</code></pre>
</div> </div>
<div class="data-display-section real-time-display"> <div class="data-display-section real-time-display">
<h3>Or monitor in real time</h3> <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> </div>
</div> </div>
@ -112,9 +112,9 @@ JSON.parse(`{
<h3>Powered by Javascript</h3> <h3>Powered by Javascript</h3>
<div class="data-display"> <div class="data-display">
<div class="data-display-section standalone-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> <hr>
<pre>{filteredObject}</pre> <pre><code>{filteredObject}</code></pre>
</div> </div>
</div> </div>
</div> </div>

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

@ -2,6 +2,21 @@
export let data export let data
</script> </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"> <div class="title-with-image">
<h1>{data.metadata.title}</h1> <h1>{data.metadata.title}</h1>
<img src={data.metadata.headerImage} alt={data.metadata.headerImageAlt}/> <img src={data.metadata.headerImage} alt={data.metadata.headerImageAlt}/>
@ -29,24 +44,20 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.title-with-image h1 {
font-size: 5rem;
}
.title-with-image img { .title-with-image img {
margin: 0 2em 0; 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 { .title-with-image img {
max-width: 80vw; max-width: 80vw;
} }
@media (min-width: 720px) { @media (min-width: 720px) {
.content { .content {
max-width: 50vw; flex-wrap: nowrap;
max-width: calc(min(700px, 100%));
} }
.title-with-image img { .title-with-image img {
max-width: 30vw; 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" headerImageAlt: "Kafka's logo"
--- ---
Initially built by LinkedIn, Apache Kafka is a "distributed event store" and "stream processing" platform. Initially built by LinkedIn, Apache Kafka is a distributed event store and stream processing platform. But, in more
But what does that mean exactly? practical terms, what does it _do?_
## Basics of Kafka ## Basics of Kafka
@ -26,7 +26,7 @@ For example, a bookstore may have an application that _produces_ a message every
"title": "The Metamorphosis", "title": "The Metamorphosis",
"price": 9.99, "price": 9.99,
"buyerId": "84694fc7", "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**. 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 "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 `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 new message into the `book_purchases` topic. And of course, when someone orders a delicious fancy latte, a message is
bitter, a message is instead put into the `coffee_orders` topic. instead put into the `coffee_orders` topic.
Importantly, consumers do not blindly receive every message produced in the system. Instead, they subscribe to 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 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 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. consumers that have intentionally subscribed.
## TODO: TODO: Wrap it up.
## Distributed Event Store
Essentially
## Stream Processing