unparty.app
unparty.app fish out of water Logo

a picture first. words later.

Until now, everything on your site came with your copy. This is the first thing you add yourself. On your site, a cover is the picture a story is built around: every story has one, and they share a number. Your cover gets its number in this step. The next step writes the story that goes with it.

Your file
cover-052.jpg
Where it lives
public/covers/
What it pairs with
story-052.md, in the next step

this is a work in progress

  1. Pick it.

    One photo, under 1MB.

  • Success.your picture is on your site.

1️⃣ Pick a Photo and Shrink It

Choose a photo you took or have the rights to. Wide photos work best: your site shows covers in a wide frame. Camera and phone photos are far bigger than a website needs, and your copy refuses any cover over 1MB. Aim for about 2000 pixels on the long side, saved as a JPG:

  • On a Mac — open it in Preview. Tools → Adjust Size, set the width to 2000, click OK. Then File → Export, choose JPEG, and slide Quality to the middle
  • On Windows — open it in Photos. Click ⋯ → Resize image, set the long side to 2000, and save a copy as JPG
  • From an iPhone — photos may arrive as .heic, which your site cannot use. Exporting from Preview or Photos as above turns them into JPG

2️⃣ Add It to Your Copy

Open the public/covers folder in your copy. Your copy came with numbered covers, so find the highest one: cover-051.png if you have not added any. Yours is the next number up. Name your file exactly like this and move it into that folder:

text
cover-052.jpg

Your site keeps a list of every cover and its file type, and a list of each cover's colors. The build updates both, but your computer does not, so run the commands yourself. In the terminal, inside your copy:

bash
# Record that cover-052 is a .jpg (without this, your site looks for .png)
npm run generate-cover-extensions

# Check every cover is under 1MB
npm run audit:covers

# Mac only: pick your cover's colors (skip on Windows)
npm run extract-colors

The colors command looks at every cover again, not just yours, and its picks shift a little each time. GitHub Desktop will show hundreds of changed lines in cover-colors.json. That is normal. On Windows, skip it: your cover still shows everywhere, and only its link-preview image falls back to default colors.

Last, put it in your gallery. Open src/app/covers/covers-data.ts, find the line export const COVER_IMAGES, and add yours as the first entry right below it. The gallery shows the first five covers in each row, so first is where you will see it:

typescript
export const COVER_IMAGES: CoverImage[] = [
  { filename: 'cover-052.jpg', format: 'jpg', category: 'unparty' },
  // …the covers that were already here

3️⃣ See It, Then Ship It

Start your site with npm run dev and check two places:

  1. localhost:3000/covers/cover-052.jpg shows your photo on its own. The file is in the right place with the right name
  2. localhost:3000/covers shows it first in the unparty row. Your site knows about it

Now publish it. In GitHub Desktop, the Changes list should hold your photo, covers-data.ts, cover-extensions.json and, on a Mac, cover-colors.json. Write a summary like "Add my first cover", click Commit to main, then Push origin. A few minutes later it is on your live site too.

“The first thing on your site that did not come with it.”

— unparty-app

⚠️ Before You Add More

  • Leave the covers that came with your copy — stories, articles and pages point at them by name. Deleting or renaming one breaks whatever uses it. Clearing them out is a later step
  • Never reuse a number — a number already in the folder already has a story
  • Nothing stops a big file for you — your copy checks cover sizes on pull requests, and on commits only if you installed its checks. Pushing straight to main skips both, so run npm run audit:covers every time
  • A photo is public once pushed — anything in public/covers can be opened by anyone who guesses the address, even before a story links to it

🧯 If It Does Not Show

  • /covers/cover-052.jpg says 404 — the file is not in public/covers, or its name differs from what you typed: check for .JPG, .jpeg or a hidden .jpg.jpg
  • The gallery shows a broken image — run npm run generate-cover-extensions again. Without it, your site looks for cover-052.png
  • audit:covers lists your file as too big — shrink it further, or lower the JPEG quality, and run the check again
  • npm run extract-colors says swift is not found — you are on Windows, or Apple's Command Line Tools are missing. Skip it; your cover still works
  • You replaced a cover's picture and its colors stayed — a cover keeps the colors it has. Name it to pick again: npm run extract-colors -- cover-052

🤖 Ask Your LLM

prompt
I have a photo that is [size] MB and [width] × [height] pixels.
On a [Mac / Windows] computer, walk me through making it a JPG
under 1MB and about 2000 pixels wide, one click at a time.

(In Claude Code, inside your copy)
I added public/covers/cover-052.jpg. Run npm run
generate-cover-extensions and npm run audit:covers, add it as the
first entry in COVER_IMAGES in src/app/covers/covers-data.ts, and
tell me what changed.

✅ You Are Done When

  • public/covers has your photo, named with the next cover number and under 1MB
  • npm run audit:covers ends with all within the 1.0MB limit
  • Your cover is first in the unparty row at /covers, on your computer and on your live site
  • The commit with your cover is pushed, and Vercel shows it Ready

Your cover is up, but for now it is just a picture. Next is Your first story: the words that go with it, under the same number.

“Every story here starts with a picture. Yours just did.”

— unparty-app

FILL. add your pictures, your words, your way.

  1. Your first cover→

    Every story on your site starts with a picture. Add your first one.