tino.software
Personal site. Next.js (App Router) + shadcn, with figures drawn by
mdxcn and type set in Geist Pixel.
Stack
- Framework: Next.js 16, Tailwind v4, shadcn (
components.json)
- Figures: mdxcn, forked under
registry/default (the @mdxcn registry is set up in components.json)
- Own components:
registry/tino, built on the mdxcn frame and Base UI for interactive parts
- Type: Geist Pixel (all five variants) for headlines, Geist Mono for body, via the
geist package
- Data: GitHub REST API, revalidated hourly (
lib/github.ts)
Development
bun install
bun run dev
Open http://localhost:3000.
Homepage checks
agent-browser is a dev dependency. test:home
serves the production build and checks both views of /: zero axe-core
violations and "good" Core Web Vitals. It writes screenshots to
artifacts/home/, plus home.mp4 with RECORD=1.
bun run build && bun run test:home
BASE_URL=https://tino.software bun run test:home # check a deployment
bun run test:tino-md # Host: tino.md rewrite/404/redirect
CI runs test:home on every PR and posts the screenshots and video as a
comment (media is stored on the pr-media branch).
GitHub stats
lib/github.ts pulls profile, repos, and recent public events for gravitinos.
Contribution counts come from the GitHub GraphQL API when GITHUB_TOKEN is set,
otherwise from the public github-contributions-api.jogruber.de proxy. A token
also lifts the 60 req/h unauthenticated rate limit, and the repo count becomes
public_repos + total_private_repos from authenticated /user. If the token is
rejected (401/403), the server logs the failure and falls back to public data.
The year grid (registry/tino/graph-year) shows each day as a square. Hover,
focus, or tap a cell for a readout like Oct 12 · 14 contributions; arrow keys
move with a roving tabindex. Phones show the last 26 weeks. A less→more legend
sits under the grid. The markdown twin keeps the weekly sparkline and adds
plain-text tables: last 30 days, busiest day, current/longest streak, and
monthly totals (lib/contributions.ts, rendered from lib/markdown.ts).
The "last commit" timer takes the newest of the most recently pushed repo's
pushed_at (updates immediately) and the newest push event (can lag by hours,
but covers repos the user doesn't own). Those two small requests refresh every
5 minutes; the rest of the GitHub data stays hourly. With a token belonging to
gravitinos (classic token with repo scope), private pushes such as
tino.build count too; only the timestamp is shown, never the repo name.
Without a token it only sees public pushes.
If GitHub is unreachable, the stats block is hidden.
Markdown view
Every page renders an HTML and a raw-markdown version. On tino.software, the
md control in [ html / md ] links to the matching
tino.md URL (/ → https://tino.md/). Press m or use
?view=md for the in-page markdown preview (data-view on <html>; an
inline script applies a saved choice before first paint). The home page
markdown is also served at /index.md with
Content-Type: text/markdown; charset=utf-8.
proxy.ts serves the markdown twin at the page's own URL when the request
asks for text/markdown or comes from a terminal client (curl, wget,
HTTPie, xh), so curl tino.software prints markdown. Browsers still get HTML.
tino.md
tino.md is the canonical markdown twin of tino.software.
When the request Host is tino.md (or www.tino.md), proxy.ts maps any
path P to the existing markdown route for P (/ → /index.md,
/foo → /foo.md when that handler exists) and returns it as-is. Explicit
/foo.md paths work the same way. Unknown paths get a clean 404 markdown
body. www.tino.md permanently redirects to tino.md.
Markdown served on tino.software links to the matching tino.md URL; markdown
on tino.md links back to the HTML page on tino.software. HTML negotiation on
tino.software is unchanged.
curl -sS https://tino.md
curl -sS -H 'Host: tino.md' http://localhost:3000/
curl -sS -H 'Host: tino.md' http://localhost:3000/index.md
Link previews
opengraph-image.tsx next to each page draws its share card with next/og:
the big pixel word, the page's line, and for / the contribution grid and last
commit (refreshed with the page, every 5 minutes). Shared pieces live in
lib/og.tsx. The renderer can't read woff2 or oklch(), so Geist Pixel and
Geist Mono are copied as TTF into assets/fonts (OFL, license alongside) and
the dark-theme colors are repeated there as hex.
Transitions
Following a link glides the big pixel word into the next page's word (React's
<ViewTransition>, components/page-transition.tsx); the rest of the page
swaps instantly. The home page sets data-still, so its figures render in
place instead of fading in on scroll.
mdxcn
The copy in registry/default is a fork: the components are Server Components
and their enter animations are CSS (graph-enter / graph-fade in
app/globals.css) instead of motion. A small client probe,
graph-frame/graph-reveal.tsx, inside <Graph> marks the figure
data-inview to start them. Only graph-timer and graph-countdown stay
client components, because they tick.
Pulling a new component from upstream still works, but it arrives written
against motion; convert it the same way before using it:
bunx shadcn@latest add @mdxcn/graph-table
registry/tino
Components that fit the mdxcn look but are not part of it. They reuse the
graph-frame base and the --graph-* tokens. Interactive behavior (focus,
keyboard, ARIA) comes from Base UI; keep the component itself a Server
Component and let only the Base UI parts hydrate.
graph-tabs: panels in one frame. ## heading sections or <Tab label> children.
Effect v3 (local reference)
bun run clone:effect
Source lands in reference/effect-v3/ (gitignored).
