+ Try removing a tag or using a different search term.
+
+ )}
+
+ {visiblePosts.map((post) => (
+
+ ))}
+
+
+
);
diff --git a/src/renderer/blogData.js b/src/renderer/blogData.js
new file mode 100644
index 0000000..6f64919
--- /dev/null
+++ b/src/renderer/blogData.js
@@ -0,0 +1,53 @@
+export const BLOG_POSTS = [
+ {
+ id: "caramelized-onions",
+ title: "Caramelizing Onions is Great for Your Kitchen",
+ subtitle: "The slow cook that cleans your kitchen for you.",
+ date: "2026-04-10",
+ body: `
+Most recipes lie to you about caramelizing onions. They'll say "cook until golden, about 10 minutes." Ignore that. Real caramelization takes **40–50 minutes** over medium-low heat, and that long timeline is secretly the best part.
+
+## Why it takes so long
+
+Onions are mostly water - around 90% by weight. Before any browning can happen, that moisture has to cook off. Crank the heat and you'll get scorched edges and a raw, pungent center. Keep it low and slow, and the natural sugars gradually break down into something sweet, complex, and deeply savory. You can't rush it without ruining it.
+
+## The rhythm of it
+
+Once the pan is set and the onions are in, your only job is to stir every **5–8 minutes** and scrape up any bits sticking to the bottom. That's it. Between stirs you have a solid 5-minute window, every single time, to do something else. The cadence looks roughly like this:
+
+1. Add onions, set heat to medium-low, walk away
+2. Come back, stir, scrape - counter gets wiped down
+3. Come back, stir, scrape - dishwasher gets loaded
+4. Come back, stir, scrape - sink gets scrubbed
+5. Come back, stir, scrape - stovetop around the pan gets cleaned
+6. Come back, stir, scrape - fridge front, microwave, whatever's left
+7. Onions are done, kitchen is spotless
+
+You're not multitasking in a stressful way. You're just filling the gaps.
+
+## What to watch for
+
+The onions will go through a few stages:
+
+- **Translucent and soft** (around 10 min) - they've released their water and collapsed
+- **Pale gold** (around 20–25 min) - real sweetness starting to develop
+- **Deep amber** (around 40–50 min) - this is the target, jammy and rich
+- **Dark brown edges** (around 50–60 min) - you've gone a bit far, but still delicious, just more bitter
+
+A splash of water or a small pour of wine or balsamic vinegar can help deglaze if things are sticking before you're ready. It picks up the fond and adds flavor.
+
+## What to do with them
+
+Properly caramelized onions are worth the wait and keep in the fridge for about a week. Some ideas:
+
+- Pile them onto a grilled cheese or burger
+- Stir into scrambled eggs or an omelette
+- Spread on toast with goat cheese
+- Use as a pizza base instead of tomato sauce
+- Fold into pasta with pasta water and parmesan
+
+The result is good. The clean kitchen is a bonus. Together, it's one of the better deals cooking has to offer.
+`,
+ tags: ["cooking", "kitchen", "tips"]
+ }
+];
diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index 3f730af..1280d53 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -229,6 +229,194 @@ body {
font-size: 0.7rem;
}
+.blog-panel {
+ margin-top: 22px;
+}
+
+.blog-controls {
+ display: grid;
+ gap: 14px;
+ margin-bottom: 14px;
+}
+
+.search-field {
+ display: grid;
+ gap: 8px;
+}
+
+.search-label {
+ font-size: 0.7rem;
+}
+
+.tag-filter-row {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+}
+
+.tag-chip {
+ font-size: 0.65rem;
+ line-height: 1;
+ padding: 10px 12px;
+}
+
+.blog-list {
+ display: grid;
+ gap: 12px;
+}
+
+.blog-empty {
+ margin-top: 4px;
+}
+
+.blog-card-btn {
+ display: block;
+ width: 100%;
+ text-align: left;
+ border: 2px solid #212529;
+ padding: 12px;
+ background: #fff;
+ cursor: pointer;
+ font-family: inherit;
+}
+
+.blog-card-btn:hover {
+ background: #f2f2f2;
+}
+
+.blog-card-btn h3 {
+ margin: 0 0 6px;
+ font-size: 0.78rem;
+ line-height: 1.5;
+}
+
+.blog-card-subtitle {
+ margin: 0;
+ font-size: 0.68rem;
+ line-height: 1.7;
+ opacity: 0.85;
+}
+
+.blog-post-page {
+ max-width: 740px;
+}
+
+.blog-post-back {
+ margin-bottom: 16px;
+ font-size: 0.7rem;
+}
+
+.blog-post-header {
+ margin-bottom: 18px;
+}
+
+.blog-post-header h1 {
+ margin: 0 0 10px;
+ font-size: 0.95rem;
+ line-height: 1.5;
+}
+
+.blog-post-body {
+ font-size: 0.72rem;
+ line-height: 2;
+}
+
+.blog-post-body p,
+.blog-post-body ul,
+.blog-post-body ol,
+.blog-post-body blockquote,
+.blog-post-body pre {
+ margin: 0 0 14px;
+}
+
+.blog-post-body p:last-child,
+.blog-post-body ul:last-child,
+.blog-post-body ol:last-child {
+ margin-bottom: 0;
+}
+
+.blog-post-body h1,
+.blog-post-body h2,
+.blog-post-body h3,
+.blog-post-body h4 {
+ margin: 20px 0 8px;
+ line-height: 1.5;
+}
+
+.blog-post-body h1 { font-size: 0.9rem; }
+.blog-post-body h2 { font-size: 0.82rem; }
+.blog-post-body h3 { font-size: 0.75rem; }
+
+.blog-post-body ul,
+.blog-post-body ol {
+ padding-left: 24px;
+}
+
+.blog-post-body li {
+ margin-bottom: 6px;
+}
+
+.blog-post-body strong {
+ font-weight: bold;
+}
+
+.blog-post-body em {
+ font-style: italic;
+}
+
+.blog-post-body code {
+ background: #f2f2f2;
+ border: 2px solid #212529;
+ padding: 1px 5px;
+ font-size: 0.68rem;
+}
+
+.blog-post-body pre {
+ background: #212529;
+ color: #f7f7f7;
+ border: 2px solid #212529;
+ padding: 12px;
+ overflow-x: auto;
+}
+
+.blog-post-body pre code {
+ background: none;
+ border: none;
+ padding: 0;
+ color: inherit;
+}
+
+.blog-post-body blockquote {
+ border-left: 4px solid #212529;
+ padding-left: 14px;
+ opacity: 0.8;
+}
+
+.blog-post-body a {
+ color: #209cee;
+}
+
+.blog-date {
+ margin: 0;
+ font-size: 0.62rem;
+ opacity: 0.8;
+}
+
+.blog-tags {
+ margin-top: 12px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+}
+
+.blog-tag-pill {
+ display: inline-block;
+ border: 2px solid #212529;
+ padding: 3px 7px;
+ font-size: 0.62rem;
+ background: #f2f2f2;
+}
+
.button-preview {
position: relative;
width: 80px;