Custom Blog Components

MDX components available in all blog posts. Imported globally — no per-file imports needed.

TerminalBlock

Basic bash with auto-prompt:

bash

$ npm install

$ cd my-project

$ npm run dev

Custom title:

install dependencies

$ npm install next react react-dom

$ npm install -D tailwindcss typescript

Non-shell language (no prompt):

sql

SELECT name, email FROM users WHERE active = true ORDER BY created_at DESC;

Shell with prompt disabled:

bash

# output from a command, not something you'd type

total 48

drwxr-xr-x 12 sam staff 384 Mar 23 10:00 .

-rw-r--r-- 1 sam staff 1024 Mar 23 09:58 package.json

Callout

📝Note

This is a standard note. Use it for supplementary information that's worth calling out but isn't critical.

⚠️Warning

This is a warning. Something could go wrong if the reader isn't careful here.

💡Tip

This is a tip. A helpful shortcut or best practice the reader might not know about.

🪤Gotcha

This is a gotcha. Something that looks right but will bite you — the API returns 200 even on auth failures.

👋Hey future me,

If this breaks, the token expires every 90 days. Check the .env file first.

Custom title override:

🪤This one got me

The sendBeacon API silently fails cross-origin if you set the wrong content type. No console error, no network tab trace.

StepList

Clone the repo

Run git clone and navigate into the directory.

Install dependencies

bash

$ npm install

Configure your environment

Copy .env.example to .env and fill in your values. You'll need API keys for the weather service and a Cloudflare account.

Start the dev server

bash

$ npm run dev

Open http://localhost:3000 to verify everything works.

TIL

rsync preserves file permissions by default but scp does not.

TIL

The sendBeacon API silently fails cross-origin with the wrong content type — no console error, no network tab trace. Use fetch with keepalive: true instead.

PartsList

Parts

1×Raspberry Pi 4 (4GB)

1×MicroSD card (32GB+)any brand works

1×USB-C power supply

1×Short ethernet cableor use WiFi

1×3D-printed caseoptional

Custom title:

Cables

2×USB-C to USB-C (100W)for laptop + battery bank

1×USB-C to LightningAirPods

1×Apple Watch magnetic cable

GitHubCard

samgutentag/portfolio

Personal portfolio and blog built with Next.js and MDX

TypeScript★ 12

With topics:

samgutentag/sbburgerweek

Santa Barbara Burger Week voting app — Claude-built, fork-ready

TypeScript★ 4next.jsclaudefood

Minimal (just repo name):

samgutentag/cloud-cover