Add pantry inventory post with styled images

- Add "Where Did I Put the Mochi Flour?" post about pantry organization app
- Add img shortcode for figure/caption support across themes
- Add CSS styling for figures: rounded corners, shadows, centered captions
- Update standup post date to 2026-01-06

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Eric Wagoner
2025-12-24 16:29:55 -05:00
parent 3b30bd0323
commit b727f92496
7 changed files with 137 additions and 2 deletions

View File

@@ -153,6 +153,53 @@
} }
} }
// Image and figure styling
figure {
margin: 2rem 0;
img {
display: block;
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
figcaption {
margin-top: 0.75rem;
font-size: 0.9rem;
color: var(--secondary-text, #666);
text-align: center;
font-style: italic;
}
}
// Also style standalone images in posts
.post-content img:not(figure img) {
display: block;
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
margin: 2rem auto;
}
@media (prefers-color-scheme: dark) {
figure {
img {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
figcaption {
color: rgba(255, 255, 255, 0.7);
}
}
.post-content img:not(figure img) {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
}
// Dark mode support // Dark mode support
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.series-box { .series-box {

View File

@@ -1,13 +1,13 @@
--- ---
title: I Thought I Had 15 Minutes title: I Thought I Had 15 Minutes
date: 2025-12-30T12:00:00-05:00 date: 2026-01-06T12:00:00-05:00
draft: true draft: true
tags: tags:
- Programming - Programming
- Neurodivergence - Neurodivergence
- Automation - Automation
- n8n - n8n
lastmod: 2025-12-21T01:54:55.065Z lastmod: 2025-12-24T21:23:29.536Z
description: I automated the five minutes before standup, and accidentally learned something about how my brain works. description: I automated the five minutes before standup, and accidentally learned something about how my brain works.
--- ---

Binary file not shown.

After

Width:  |  Height:  |  Size: 317 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 321 KiB

View File

@@ -0,0 +1,47 @@
---
title: Where Did I Put the Mochi Flour?
description: I found three opened bags of rice flour this week. So I built a pantry inventory app.
date: 2025-12-24T12:00:00-05:00
draft: false
tags:
- Cooking
- Projects
- Claude Code
lastmod: 2025-12-24T21:27:08.386Z
---
I found three opened bags of rice flour this week. Also two of tapioca starch. And a potato starch I'd forgotten existed entirely.
Gluten-free baking has always been my organizational weak spot. The flours all look similar, they come in bags that don't stack well, and I'm forever buying "just in case" because I can't remember if I have any left. We have shelves full of labelled containers of dry goods, but with jars in front of jars, bags everywhere, and two adventurous cooks in the kitchen, things just piled up to the point where we didn't know if we had something specific and even if we did who knew where it might be.
{{< img src="flip-top-jars.jpg" alt="Two wooden shelves of glass flip-top jars with printed labels containing various dry goods" caption="Glass flip-top jars full of dry goods, each with a printed label" >}}
The spice situation used to be just as bad. Multiple half-empty jars of cumin, duplicates of things I'd bought because I couldn't find the original. Last year I solved that with a wall of magnetic hex jars from [Gneiss Spice](https://gneissspice.com). Now we have over 100 herbs and spices, all visible at once. No more duplicates because I can see everything. And when I'm standing in the spice aisle at the grocery store, I can visualize the wall in my head and generally know whether I need more smoked paprika.
{{< img src="spice-wall.jpg" alt="A wall covered with approximately 100 magnetic hexagonal glass spice jars arranged in a honeycomb pattern" caption="The spice wall: over 100 magnetic hex jars in a honeycomb arrangement" >}}
Physical organization is great for storage, but it doesn't help you find anything. The spice wall works because it's small enough to scan visually. The pantry shelves are not.
{{< img src="flour-shelf.jpg" alt="Wire shelving unit with OXO pop-top containers holding various flours" caption="The flour shelf: OXO containers, pasta, and baking supplies" >}}
After consolidating the flours and refilling containers and adding labels, I stood back and felt mostly satisfied. The shelves looked good, or at least well enough to begin an actual deep reorganization effort. But I still couldn't answer the question I actually needed answered: do I have mochi flour, and if so, what kind of container is it in?
So the next evening, I built an app.
---
The core idea is simple: type part of a name, see what container to look for. That's it. Everything else—the stock status, the shopping list export, the category filters—grew naturally from that starting point. You can try it yourself and see what we have in the kitchen at [pantry.kestrelsnest.social](https://pantry.kestrelsnest.social).
This is unapologetically a household-scale tool—built to solve one specific annoyance in one specific kitchen.
The implementation is deliberately minimal, designed to fit YunoHost's "My Webapp" feature: one HTML file, one PHP file, a couple of JSON files for configuration. No database, no build step, no framework. My Webapp gives me a simple PHP server pointed at a subdomain, so deployment is just rsyncing the files up. The source is on [my Gitea](https://git.kestrelsnest.social/eric/pantry) if you want to run your own.
I built it with Claude Code over maybe two hours. This is the kind of thing where Claude Code and I really shine: I can type every character of code if I wanted to, but here I can rapidly prototype, try things out, and sculpt in real time. The code itself is very simple, straightforward CRUD stuff, but typing out all the boilerplate for forms and API endpoints and CSS is tedious, and Claude is good at tedious. I described what I wanted, Claude typed it out, and I nudged it into shape. It's the kind of collaboration that makes evening projects actually viable for someone with limited evening energy.
---
There's a QR code feature so I can print a little card and stick it on the pantry shelf. Anyone in the household can scan it and search. Viewing is open; editing requires a PIN. I'm not building a multi-tenant SaaS, so I went with simple access control for a simple problem.
The real test will be the next time I'm at the store wondering if I need tapioca starch. I'll pull up the app, search "tapioca," and see it's in a medium flip-top jar, in stock. Or maybe out of stock, and I'll know to grab some. I already did that today for a fresh bag of AP flour, white sugar, dried chives, and ground white pepper.
Here's to no more three-bag situations!

Binary file not shown.

After

Width:  |  Height:  |  Size: 419 KiB

View File

@@ -0,0 +1,41 @@
<figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
{{ with .Get "align" }}<div align="{{.}}">{{ end }}
{{ with .Get "href" }}<a href="{{.}}">{{ end }}
<img src="{{ or (.Get "src") (.Get 0) }}"
{{ with .Get "class" }}class="{{.}}"{{ end }}
{{ if or (.Get "alt") (.Get "caption") }}
alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}"
{{ end }}
{{ with .Get "width" }}width="{{.}}"{{ end }}
{{ with .Get "height" }}height="{{.}}"{{ end }}
/>
{{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
<figcaption>
{{ if isset .Params "title" }}<h4>{{ .Get "title" }}</h4>{{ end }}
{{ if or (.Get "caption") (.Get "attr")}}
{{ .Get "caption" }}
{{ if isset .Params "attrlink"}}
{{ if isset .Params "align"}}
{{/* we need the class here to remove margin-left for center alignment */}}
<a class="{{.Get "align"}}" href="{{.Get "attrlink"}}">
{{ else }}
<a href="{{.Get "attrlink"}}">
{{ end }}
{{ end }}
{{ .Get "attr" }}
{{ if isset .Params "attrlink"}}</a>{{ end }}
{{ end }}
</figcaption>
{{ end }}
{{ if isset .Params "align" }}</div>{{ end }}
{{ if isset .Params "href" }}</a>{{ end }}
</figure>