# Marketing

Images and words for knotless's listings and accounts, and what draws them.

## ATStore

The listing is the record
`at://did:plc:i6y5vctpatds2umjmzmogmiv/fyi.atstore.listing.detail/3mzodyv6ioct6`,
on the knotless.dev account's PDS. ATStore reads it from there. To change the
listing, update that record with `com.atproto.repo.putRecord`. Creating another
would make a second listing.

- `atstore/listing.json`: the record's fields, with `BLOB:` naming the file each
  image was uploaded from.
- `atstore/hero.png`: the hero, 3200 by 1800.
- `atstore/hero-alt.png`: the hero not chosen.
- `atstore/icon.png`: the icon, a copy of the iOS app's.
- `atstore/screenshots/`: knotless.dev's pages at 1280 by 800, drawn at twice
  that, in the listing's order. The diff and the merged pull are
  `dev.knotless.listActorItems`'s pull.

The record allows a hero of 12 MB, an icon of 2 MB and 20 screenshots.

## Bluesky

`bluesky/banner.png` is the knotless.dev account's banner, 3000 by 1000. Bluesky
uploads it at 3:1 and shows it at about 4:1 on a desktop, with the profile picture
over its lower left, so the words stay inside that band and right of the picture.

The post for when the listing appeared:

> knotless is on @atstore.fyi now. It's git that lives in your Atmosphere
> account, pushed with plain git, with no git server to run.
>
> If you've tried it, a review would help.

## Drawing them again

`src/` holds a page for each drawn image. They take Inter and JetBrains Mono from
`crates/knotless-serve/fonts`, and the alternate hero's command takes the full
JetBrains Mono from Google Fonts, as the repository's copy is cut to the letters
of `~ knotless`.

```sh
cd marketing
npm install --no-save playwright@1.58.2
node src/render.mjs            # over the committed files
node src/render.mjs /tmp/look  # or beside them, to compare
```

The screenshots are taken from the live pages by hand, and show the star count,
the version and "hours ago" as they were on the day.

## Videos

`video/` makes videos of knotless with [Remotion](https://www.remotion.dev),
each rendered wide (1920 by 1080), square (1080) and tall (1080 by 1920), for
a page, a feed and a story, into `video/out`.

**A change, from push to deploy.** `just video-change <pull's page>` reads a
pull from the appview through `knotless-mcp --read-only` (`change/story.mjs`)
and tells what happened to it: the commands that opened it, what it changes
(its files, and the hunk of code adding the most lines), each push's checks
as a time-lapse of their real durations, each review with the line it
commented on, the queue and the commit it landed as, the deploy of that
commit, and how long it all took. The story is written to
`out/stories/<rkey>.json` first, to read or trim before rendering again with
`node render.mjs change <story>`. A stage the pull never reached is left out.
`change/sample.json` is one pull's, which the studio plays by default.

**The pages, filmed.** `just video-shoot review star` seeds the e2e world
(`harness/e2e/setup.mjs`), logs each scene's person in, and films them using
the pages (`shoot/scenes`): Chrome's screencast keeps every frame painted, with
a drawn cursor moving at a person's pace, into `public/footage/<scene>-wide`,
with the marks the edit cuts on. `just video-feature <reel>` cuts a reel of
those takes (`REELS` in `video/Feature.tsx`): cards saying what is shown, the
takes in a window, zoomed in after the clicks in the narrower shapes, and an
end card. A new feature is a scene there and a reel here.

```sh
cd marketing/video
npm ci
npm run studio                 # the compositions, played as they are worked on
npm run typecheck
```

Remotion needs a company licence once a company using it is more than three
people.