🪞 bobbymeyer.com

2021.03.07 updated 2026.09.21

a portfolio that rebuilds itself from GitHub

Source: bobbymeyer/bobbymeyerdotcom
Live: www.bobbymeyer.com
Written in: TypeScript

merged

2026.09.21#38
tag kinds, even the grid, and say featured with a star
Six commits, three subjects. Two of them add a ribbon and a later one removes it — the diff shows the net result, so there is no ribbon in what gets reviewed. Kinds
Every note carries `project` now, so that a post can carry `post` and the two can be told apart the day there is one.
2026.09.21#37
Redraw the gridi splash around what the thing does
The old splash was a Euclidean rhythm on a line. True of gridi before distance on the grid meant anything; it has since become a spatial sequencer where a line's length is how long its pulses take to walk it, and the picture should say that.
2026.09.21#36
narrow on two tags, keep one way of filtering, and stop submitting the contact form twice
Two commits. The filter narrows now and there is one mechanism behind it — and chasing a question about whether that mechanism actually worked turned up a live bug in the contact form. The contact form was sending everything twice
This is the part to read.
2026.09.21#35
give every tag a page, and the index a filter
The interests on the about page were words. They are the way into the work now: each tag has a page listing everything that carries it, a card says what it is about, and the index has a dropdown that takes several tags at once.
2026.09.21#34
point at the rest of the work, and settle the address question
Two commits. The about page introduced him and then sent him nowhere; now it points at the profile, and the question of an email address is answered rather than left open.
2026.09.21#33
say who this is, and count what it is about
The about page was two borrowed lines and a photograph. It now opens on a statement, and then does the thing a paragraph claiming a set of interests could not: it counts them. Interests, tallied
Every note in `src/content/posts` carries `tags`, and the page tallies them across all of them.
2026.09.21#32
wear the real mark, drop the shadows, and downcase the name
Four corrections to the last round. The mark
The registration target goes. The mark this site already has — three process plates drifting slightly out of register — is the better badge for "this one runs in the page", and it was sitting in the header the whole time.
2026.09.21#31
introduce the site, tag its projects, and fix what a link unfurls into
The site was good at showing the work and silent about whose it was, and a link to it unfurled into nothing. Nine commits, each readable on its own. What changed
The index introduces its author. It opened on the word "projects" and left a first-time visitor to find the about page to learn whose these were.
2026.09.19#30
give succession a splash, and take its summary from GitHub
Two changes to the succession entry.
Summary — drops the `summary` override, so the index and the project page show the repository description, "a card game about seizing power", and there is one place to edit it rather than two. `summary` is optional and falls back to `repo.description`.
2026.09.19#29
add succession, and enable the house-rules plugin here
Two unrelated changes on one branch.
succession — the repository has its first commits, so the entry goes in: a rust field, no splash art yet, and the summary written by hand rather than taken from the GitHub description.
It is the first project without a splash.
2026.09.18#28
hover Send to the contact page's own ink
The Send button filled vermillion on hover, a colour that appears nowhere else on that page — contact's ink is process yellow, the same one beside its nav label.
The accent is a pair of properties on `.btn` now (`--btn-accent`, `--btn-accent-label`, defaulting to vermillion on white), so a page with an ink of its own…
2026.09.18#27
rule the message field like paper
The dotted rule under the message field was one line; what it wants is a line under every line of text. The field now carries a dotted grid on the text's own rhythm, and it scrolls with the message rather than sitting still behind it.
2026.09.18#26
let the page show through the contact form
The contact fields were flat white panels sitting on the page's gradient ground. Dropping the fill lets the ground run under them, and the message field — the one you actually write in — takes a dotted rule that inks in solid while you are in it.
2026.09.18#25
Stop keeping a second copy of treegen
The tool is loaded from its own deploy so that there is one copy rather than two that drift. That was true of the module and of nothing else.
| | where it came from | state | |---|---|---| | `treegen.js` | the deploy | current | | `treegen.css` | `public/posts/treegen/treegen.css` | stale | | the toolbar markup |…
2026.09.18#24
sort archived projects to the end of the index
Archiving a repository is itself a push, so a project that has just been put to rest was landing at the top of the index as the most recent change.
`projectEntries()` — the one ordering the index, each project page and the feed all share — now sorts live projects newest change first, then the archived ones on the…
2026.09.17#23
Use a piano for gridi
`🔴 gridi` becomes `🎹 gridi`.
2026.09.17#22
Add gridi to the index
One entry and one splash. No note yet — the project page is the README and the timeline.
- `🔴 gridi`, summary `route based midi generation`, blue field, last in the list - `public/posts/gridi/splash.svg`
The splash is sixteen steps on a line carrying `E(7,16) = x..x.x.x..x.x.x.`, which is what the instrument's own…
2026.09.17#21
Make the its-swiss splash the cross
A value ladder crossed by an accent band was the library's argument, not the project's mark, and at splash size it read as stripes. The flag says it in one shape.
2026.09.17#20
Lay the page on a ground, and print the portrait on it
White was stark and it was doing nothing. The ground is now a gradient in the mark's own two inks, faint enough that you notice it mostly by taking it away: white where the page starts, cyan settling in through the middle, magenta by the end.
2026.09.17#19
Print the favicon out of register
The favicon was a plain black circle from before the mark existed. It is now the mark at rest: process cyan, magenta and yellow multiplied, one plate off. The black at the centre is the dot; the colour around it is the slip.
2026.09.15#18
Give treegen a splash, grown rather than drawn
treegen was the only published project without a splash.
Rather than draw a picture of the tool, this is the tool's own output — the same way pandatone's splash is its colour grid and halftoner's is its output.
2026.09.14#17
Add treegen, loaded from its own deploy
A tool for growing trees on a grid, at `/posts/treegen`.
Points snap to a lattice; a branch is a straight line between two of them, at whatever angle and length that takes, so nothing staircases.
2026.09.13#16
Point a README's relative assets at its repository
The halftoner project page showed six broken images.
GitHub rewrites relative paths in *markdown* image and link syntax before handing over the rendered HTML, but leaves them alone inside raw `` and `` tags — which a README reaches for the moment it wants to set a width.
2026.09.13#15
Add halftoner to the index
One entry in `src/projects.ts`, a note, and two images. Everything else the page shows — the description, the README, the merged pull requests, the dates — comes from the repository at build time.
The images
Both are rendered by halftoner itself rather than drawn.
2026.09.13#14
Load the Albers sketch from its own deploy
The post carried a second copy of the sketch, and the two drifted the moment the palette changed — the post went on shipping the old colours until the fix was ported by hand in #13. This drops the copy.

All on GitHub

readme

Personal site. Built with Astro, deployed on Netlify.

Local dev

nvm use            # picks up .nvmrc
npm install
npm run dev        # http://localhost:4321

npm run build produces a static site in dist/. npm run preview serves it.

Both read GitHub. Unauthenticated that is 60 requests an hour, which is enough for a few projects but not for a day of rebuilds — put a token in .env and it becomes 5,000:

GITHUB_TOKEN=ghp_…

It needs no scopes; every repository on the site is public.

The contact form only submits on Netlify (production or netlify dev). Plain npm run dev will show an error if you try to send.

Structure

src/
  projects.ts              # the list of projects — which repos, what colour, what tags
  site.ts                  # the name, the lede, the place — shared by index, about, cards
  lib/
    github.ts              # the GitHub API, with an on-disk cache
    github-text.ts         # readme HTML and pull request bodies, tidied
    project-entries.ts     # a repo + its note, assembled into a page
    og.ts                  # the social card, drawn at build time
  pages/
    index.astro            # the index — the grid, and the tag filter over it
    posts/[...slug].astro  # one project page
    og/[slug].png.ts       # /og/<slug>.png, one card per project + /og/site.png
  components/
    Timeline.astro         # the merged pull requests, under the splash
    RegMark.astro          # the registration target on an interactive splash
  content.config.ts        # the note schema (there is barely any)
  content/posts/           # optional note per project, named for its slug
  layouts/Base.astro       # HTML wrapper, meta and social tags
  scripts/
    project-filter.ts      # narrowing the grid to several tags, in the browser
    sketch-fallback.ts     # what an interactive piece says when it cannot load
  styles/                  # fonts, global, home, post, project, page (contact form)
  assets/fonts/            # Archivo TTF — for drawing cards, never served
  breakpoints.ts           # shared layout widths (sync with global.css)
public/
  posts/<slug>/            # per-project images
  fonts/                   # Archivo woff2 — self-hosted, see src/styles/fonts.css
  robots.txt
.github/workflows/
  ci.yml                   # type-check and build, on every push
  refresh.yml              # the clock that asks Netlify to rebuild
TODO.md                    # what this site still needs, in order

How the index works

The index is a list of projects, and a project is a GitHub repository. At build time each repo in src/projects.ts is read for its description, its README, its latest release or tag, and its merged pull requests.

The order is three bands — featured, live, archived — and inside each one the last commit on the repo's default branch, so a project that moves comes back to the top of its band on the next build. Every card is one field wide; featuring is carried by the order alone. See Tags.

A project page sets a project out in two fields: the note and the README on the left across three of four, and on the right the repository's own account of itself — the splash, the facts under it, the merged pull requests under those, each with whatever was written about the merge. The merges had a field of their own on the far left until they didn't: that gave the loudest column on the page to a list of commit titles and pushed what the project actually is into the middle.

Nothing here is checked in. Push to a project, and the site says so the next time it builds.

Adding a project

One entry in src/projects.ts:

{
  repo: 'bobbymeyer/pandatone',   // owner/repo. Public repositories only
  title: '🐼 Pandatone',           // optional; defaults to the repo name
  summary: 'A unix inspired color tool',  // optional; defaults to the GitHub description
  tags: ['featured', 'interactive'],      // optional; see below
  bg_color: POST_PALETTE.vermillion,      // fills the 16:9 splash field
  splash: '/posts/pandatone/splash.svg',  // optional, laid over that field
  slug: 'pandatone',              // optional; defaults to the repo name
  draft: true,                    // optional; visible in dev, not in the built site
}

The build fails on a repo it cannot read, rather than quietly shipping a page with nothing on it. npm run dev warns and carries on without it.

Tag	What it does
`featured`	Sorted above everything unfeatured on the index, however recently anything moved. Position is all it buys — it took two fields of width for a while, and a page with a double-width card in it read as lopsided rather than emphatic.
`interactive`	The project runs on its own page, so its splash gets a registration target in the corner and the index prints a legend beside the heading saying what the mark means.

Writing a note

A project can have a note — the part only you can write, set above the README: src/content/posts/<slug>.md, named for the project's slug.

---
tags: [generative, color, p5]
---
markdown body…

There is barely any frontmatter. The title, summary, colour and splash are declared once in src/projects.ts; the version, the dates and the README come from GitHub. draft: true keeps an unfinished note off the site without hiding the project.

tags is what the note is about, and the about page collects them — see Interests. A note may be tags and nothing else: a project with something to declare and nothing written about it yet gets a frontmatter-only note, and the project page skips the empty article rather than setting one.

Palette — pick one from src/palette.ts (mid-century inks):

Name	Hex
vermillion	`#E03A2B`
orange	`#F15A24`
yellow	`#F5C400`
green	`#3D9970`
teal	`#00A3A0`
blue	`#2F6FED`
violet	`#5B4BB7`
magenta	`#E83A75`
cobalt	`#0047AB`
rust	`#B7410E`

Keeping it up to date

Netlify rebuilds when this repo is pushed to, and knows nothing about a push to any other one. .github/workflows/refresh.yml is the clock: every three hours it asks Netlify for a build, which re-reads GitHub and re-sorts the index. Two one-time settings, both described at the top of that file:

NETLIFY_BUILD_HOOK — a build hook URL, in this repo's Actions secrets.
GITHUB_TOKEN — in Netlify's environment, so the build reads the API at 5,000 requests an hour instead of 60. It needs no scopes; every repo on the site is public.

Run the workflow by hand from the Actions tab when a change should not wait.

Responses are cached under .cache/ for ten minutes so that editing a stylesheet does not re-read GitHub on every save. A Netlify build starts without it and always reads fresh.

Marginalia

Wrap anything that can sit in the right column at wide widths:

<div class="marginalia">

## Section title

A note, figure, or code group.

</div>

At 1200px and up, the block moves beside the nearest preceding paragraph, heading, or list — skipping other marginalia and decorative elements in between. Optional data-anchor="section-id" pins it to a specific heading. If the margin row is taken, the block stays inline in the article with a lighter indented treatment (.marginalia-inline).

Layout widths

Viewport	Columns	Index	Project layout
Phone (< 640px)	1	Stacked	Stacked
Tablet (640–1199px)	2	Two up, featured first	Stacked
Desktop (1200–1599px)	4	Four up, featured first	Note + readme, then the rail
Ultrawide (1600px+)	4, capped width	As above	As above

Prose in the note and the README keeps a 70ch measure on the wide layouts — three fields of body text runs past 160 characters otherwise. Tables, code, figures, sketches and marginalia go on using the full width.

Interests

/about sets out what the site is about by counting: every tags entry across every note in src/content/posts, tallied, in one of two orders.

Every note also carries a kind — project, and post once there is writing that is not a project. Kinds live in the same list as the subjects, because a tag is a tag and the filter already understands them, but they are held apart wherever a reader meets them: off this list, since "project" is nobody's interest, off the cards, since it is on all nine at once and so says nothing on any of them, and in their own group in the filter, which is where they earn their place the first time there are two kinds to tell apart.

Greatest is by how often a tag comes up — what he keeps returning to. Recent is by when a tag was last touched, dated by the last commit on the project carrying it — what he is on now. The difference between the two orders is the interesting part, so both are worth having: a preoccupation that has gone quiet ranks high in one and low in the other.

The page renders the default order server-side and carries both positions on each tag, so the list is correct before any JavaScript runs and correct if none ever does; the dropdown reorders the DOM rather than applying a CSS order, because a ranked list's sequence is its content and a screen reader should get the order the page claims to be showing.

Tags live on the note rather than on the project because the note is the part that is not a repository — writing with no repo behind it would carry tags the same way. src/lib/interests.ts does the counting.

Filtering

There is one filtered view of the projects and it is the index with a query on it: /?tags=print,music. The dropdown on the heading line writes that query and narrows the grid in the browser.

There were briefly static pages under /tags/ as well. They were crawlable and worked without script, and they were also a second URL for one idea, a second code path to keep in step, and a dropdown that behaved differently depending on which of the two you were standing on. One mechanism won.

The filter offers the subjects, and — once there is more than one kind — a group for the kinds above them. A kind filters like any other tag whether or not it is offered: ?tags=project works today, it is just not worth a checkbox while everything is one.

Ticking tags narrows: a project has to carry all of them. On nine projects most second picks land on nothing, so an option that would take the result to zero is disabled as the selection changes — a reader cannot click their way into an empty page. The empty state exists anyway, for a ?tags= typed by hand.

The whole grid is rendered and the browser hides what does not match, so with scripting off every project is listed and reachable and the only thing missing is the narrowing. /about's interests link to the same query.

The panel is laid over the grid rather than above it, because opening a filter should not move the thing you are about to filter — which is also why it closes on Escape and on a click outside, neither of which a <details> does by itself.

A card prints its own tags but does not link them: the card is already one anchor and an anchor cannot hold another. The tag that matched is drawn in, so it is clear which one put the card there.

Social cards

A link to this site unfurls into a picture, and that picture is drawn here at build time: /og/<slug>.png for each project, /og/site.png for every page that is not one. 1200×630, which is what every platform crops to, and PNG, which is the part that matters — Twitter, Facebook, LinkedIn, Slack and iMessage all decline to render an SVG in a preview, and five of the eight splashes on this site are SVGs.

Satori lays the card out from src/lib/og.ts and hands back SVG; sharp rasterises it. The splash is flattened to a PNG over the project's ink first, because it may itself be an SVG and nesting one inside another renders on your machine and not on the build. Emoji are dropped from the title — Satori has no glyph for one without an emoji font bundled, and the card's right-hand third is already the project's own artwork.

Check one after changing the card: npm run build, then open dist/og/site.png.

Fonts

Archivo, served from this origin — public/fonts, declared in src/styles/fonts.css. No connection to fonts.googleapis.com, no DNS and no round trip before the first paint. Four files cover the eight faces the site sets, because they are Google's subsets of the variable face and each carries the whole 200–800 axis.

src/assets/fonts/*.ttf is a second copy, and not a mistake: Satori draws the social cards and wants a file per weight and does not decompress woff2. Those are never served.

Refreshing either: fetch the stylesheet with a browser User-Agent (which is what makes Google answer in woff2) and take the URLs out of it. OFL 1.1, text in public/fonts/OFL.txt.

Checks

.github/workflows/ci.yml type-checks and builds on every push. The build is a real check here rather than a formality: it reads every repository in src/projects.ts, so one that has been renamed, made private or deleted fails CI instead of failing a deploy.

npm run check      # astro check
npm run build

Feed

/rss.xml lists the projects, dated by their last change rather than by when they were first published — it is a feed of what moved. Linked from every page via <link rel="alternate"> in the document head.

Contact form (Netlify)

The contact page uses Netlify Forms — no extra service. After the first deploy with the form live:

Netlify dashboard → your site → Forms — confirm contact appears
Form notifications → Add notification → Email → your address

Optional: enable honeypot (already in markup) or Akismet under Forms → Spam filters. Free tier includes 100 submissions per month.

Branching

Default branch is main. Push directly; Netlify rebuilds on push.