Initial commit: postcard v1
Phone photo -> composited postcard (canvas templates, stamp corner, EXIF-aware date/location, self-hosted handwriting font) with a small server for share links, day-context caption drafting off goonk's day-summary API, and Nominatim reverse geocoding. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Fredrik Johansson
@@ -0,0 +1,23 @@
|
||||
# Copy to .env and adjust. Read two ways: `npm start`/`npm run dev` in
|
||||
# server/ load it directly via Node's --env-file-if-exists; `docker
|
||||
# compose up` reads it as compose's env file instead (IMAGE/HOST_PORT are
|
||||
# only meaningful there, the rest get passed through to the container).
|
||||
|
||||
# Image to deploy — set by CI/CD normally; only needed for a manual
|
||||
# docker compose up.
|
||||
IMAGE=repo.explewd.com/explewd/postcard:latest
|
||||
|
||||
# Host port to expose (container always listens on 3098).
|
||||
HOST_PORT=3098
|
||||
|
||||
# Retention — a postcard link is meant to be opened once by the
|
||||
# recipient, not browsed later, so this is shorter than latent's.
|
||||
TTL_HOURS=72
|
||||
|
||||
MAX_UPLOAD_BYTES=20971520
|
||||
RATE_LIMIT_PER_HOUR=30
|
||||
|
||||
# Optional day-context source for caption drafting. GET {url}?date=YYYY-MM-DD
|
||||
# must return { git?, spotify?, note? }. Left unset, captions fall back to
|
||||
# generic postcard-voice lines instead of invented personal data.
|
||||
DAY_SUMMARY_URL=https://example.com/api/day-summary
|
||||
@@ -0,0 +1,5 @@
|
||||
node_modules
|
||||
.env
|
||||
data
|
||||
server/data
|
||||
.claude/
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
FROM node:24-slim
|
||||
|
||||
# better-sqlite3 has a native addon with no prebuilt binary for this
|
||||
# platform/Node combo yet — build it from source, then drop the toolchain.
|
||||
RUN apt-get update -q && apt-get install -y --no-install-recommends python3 make g++ \
|
||||
&& rm -rf /var/lib/apt/lists/*
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY server/package*.json server/
|
||||
RUN npm install --prefix server --omit=dev \
|
||||
&& apt-get purge -y python3 make g++ && apt-get autoremove -y
|
||||
|
||||
COPY server/src/ server/src/
|
||||
COPY index.html style.css app.js exif.js favicon.svg ./
|
||||
COPY fonts/ fonts/
|
||||
|
||||
# Do NOT copy data/ — mutable runtime volume holding the SQLite db and
|
||||
# image blobs, would get clobbered on every redeploy if baked in.
|
||||
ENV NODE_ENV=production
|
||||
ENV PORT=3098
|
||||
ENV DATA_DIR=/app/data
|
||||
|
||||
EXPOSE 3098
|
||||
|
||||
CMD ["node", "server/src/index.js"]
|
||||
+143
@@ -0,0 +1,143 @@
|
||||
# Proposal: `postcard` — turn a phone photo into a sendable postcard
|
||||
|
||||
**Status:** proposed, not built. Self-contained — written so a fresh
|
||||
agent with no prior conversation context can pick this up and implement
|
||||
it without anything explained first. No repo exists yet; this file is
|
||||
the seed of one.
|
||||
|
||||
## Motivation
|
||||
|
||||
Upload a photo from your phone (or any device), it gets composited onto
|
||||
a vintage postcard template — border, stamp corner, a handwritten-style
|
||||
caption — and you get a shareable link or a downloadable image. The
|
||||
caption is auto-drafted from whatever context is available for that
|
||||
day (git activity, what was playing, a note title) so the postcard reads
|
||||
like it was actually written *from* that day, not just a filter applied
|
||||
to a photo.
|
||||
|
||||
Structurally this is `latent`'s upload → transform → deliver shape, with
|
||||
the transform swapped from film-emulation filters to postcard
|
||||
compositing, and one addition: a short generated caption line instead of
|
||||
(or alongside) canvas filters. Reuse `latent`'s validated pieces
|
||||
wholesale rather than re-deriving them — same phone-upload flow, same
|
||||
blob+SQLite+TTL server, same no-accounts/link-is-the-credential model.
|
||||
|
||||
## Architecture
|
||||
|
||||
Static/client-heavy frontend (canvas compositing, same "no build step"
|
||||
family as `latent`/`typo`/`flit`/`wisp`) plus a small single-process
|
||||
server, copied from `latent/server` almost unchanged: `db.js` (SQLite
|
||||
metadata), `ids.js` (opaque random IDs), `cleanup.js` (interval TTL
|
||||
sweep), `ratelimit.js` (basic IP throttle on upload), `routes.js`,
|
||||
`index.js`. No accounts, no auth — the link is the credential, same as
|
||||
`latent`/`wisp`.
|
||||
|
||||
### Editing (client-side, `<canvas>`)
|
||||
|
||||
1. **Upload** — `<input type="file" capture>` for direct camera access,
|
||||
normal file picker as fallback (same open question `latent` already
|
||||
flagged, same answer: ship both).
|
||||
2. **Template** — a handful of postcard border/stamp-corner presets
|
||||
(plain cream border, torn-edge, faded color-photo-era border) — pick
|
||||
a vibe, not a full editor. Reuse `latent`'s "presets, not sliders"
|
||||
call for the same reason: faster to ship, more toy than tool.
|
||||
3. **Caption** — an editable text field, pre-filled by a generated draft
|
||||
(see below), rendered onto the card in a handwriting-style webfont.
|
||||
Editable because auto-drafted text should be a starting point, not
|
||||
the final word — the person sending it should be able to make it
|
||||
actually theirs.
|
||||
4. **Postmark/stamp corner** — today's date and a small generated
|
||||
"location" stamp if EXIF GPS is present (round-tripped through the
|
||||
same reverse-geocoding approach `rewind`/`galr` already use, if one
|
||||
exists — otherwise just the date, no invented location).
|
||||
5. Compositing is canvas-based, non-destructive within the session
|
||||
(recompute from the original photo + a param object, matching
|
||||
`latent`'s pattern) so switching templates doesn't require
|
||||
re-uploading.
|
||||
|
||||
### Caption generation
|
||||
|
||||
The interesting new piece `latent` didn't need. Draft a one-line caption
|
||||
from whatever of these is available and non-empty for the photo's
|
||||
date (EXIF date if present, else upload date):
|
||||
|
||||
- Git activity that day (via the same Gitea-API aggregate-count approach
|
||||
`rewind` already built — "spent the day untangling a deploy script" /
|
||||
"quiet one, no commits")
|
||||
- What was playing (Spotify plays log, same source `/wrapped`/`/now`
|
||||
already read — "[artist] on repeat")
|
||||
- A note/blog title from that date, if one exists
|
||||
|
||||
This is explicitly a **remix of existing fragments**, not a generative
|
||||
free-text model call — same spirit as the haiku/found-poetry idea
|
||||
below: assemble from real fragments of that day, phrase them into one
|
||||
short sentence with a small set of template shapes ("Spent the day
|
||||
{git_fragment}. {spotify_fragment} the whole time." /
|
||||
"{spotify_fragment}. {git_fragment}, mostly."), and always leave it
|
||||
editable. If none of the three sources have data for that date, fall
|
||||
back to a small set of generic postcard-voice lines ("Wish you were
|
||||
here. Mostly wasn't.") rather than leaving the field empty.
|
||||
|
||||
### Finishing paths
|
||||
|
||||
Same two-path split as `latent`:
|
||||
|
||||
1. **Instant** — composite, then download directly, entirely
|
||||
client-side, no server touched. Optional "generate share link"
|
||||
(explicit action, not automatic).
|
||||
2. **Send** — uploads the composited image to server storage, returns a
|
||||
link. No delayed-reveal mechanic here (that's `latent`'s gimmick, not
|
||||
this one) — the postcard metaphor's own delay is real mail taking a
|
||||
few days to arrive, which the link doesn't need to fake.
|
||||
|
||||
### Server
|
||||
|
||||
Copied from `latent/server`'s shape almost directly:
|
||||
|
||||
**Table `postcards`:**
|
||||
|
||||
| column | type | notes |
|
||||
|---|---|---|
|
||||
| `id` | text PK | random opaque ID, used in the URL |
|
||||
| `blob_path` | text | composited image on disk |
|
||||
| `mime` | text | |
|
||||
| `created_at` | integer | |
|
||||
| `expires_at` | integer | TTL sweep target, same as `latent` |
|
||||
|
||||
**Endpoints:**
|
||||
|
||||
- `POST /api/upload` — body: composited image bytes. Returns `{ id, url }`.
|
||||
- `GET /p/:id` — serves the postcard image directly (no develop-later
|
||||
gate — this app's whole point is immediacy, unlike `latent`).
|
||||
- TTL sweep, same interval-based pattern as `latent`/`wisp`.
|
||||
|
||||
No auth. Rate-limit `/api/upload` the same way `latent` does.
|
||||
|
||||
## Non-goals
|
||||
|
||||
- No accounts, no "your postcards" history — every card stands alone via
|
||||
its own link, same throwaway philosophy as `latent`/`wisp`.
|
||||
- No delayed-reveal mechanic — that's `latent`'s gimmick; this one's
|
||||
point is speed, not anticipation.
|
||||
- No free-text LLM-generated captions — template-and-fragment assembly
|
||||
from real personal data only, kept editable, never presented as if the
|
||||
app "wrote" it.
|
||||
- No collaborative/multi-recipient cards — one photo, one card, one link.
|
||||
|
||||
## Open questions
|
||||
|
||||
- **Where the day-context lookups live** — `rewind` and `/wrapped`/`/now`
|
||||
already have working Gitea-API and Spotify-log integrations; decide
|
||||
whether `postcard`'s server calls those APIs directly (network
|
||||
dependency on goonk's API being reachable) or whether this only makes
|
||||
sense as a goonk-hosted feature rather than a fully separate sibling
|
||||
project. Worth resolving before writing `routes.js`.
|
||||
- **Location stamp source** — confirm whether `galr`/`rewind` already do
|
||||
reverse geocoding anywhere reusable, or whether this ships without a
|
||||
location stamp in a first pass.
|
||||
- **Handwriting webfont choice and licensing** — pick one, check its
|
||||
license allows self-hosting.
|
||||
- **Image size limits** — same question `latent` flagged, same likely
|
||||
answer (downscale on upload, cap stored size).
|
||||
- **Retention window** — shorter than `latent`'s, probably — a postcard
|
||||
link is meant to be opened once by the recipient, not browsed later.
|
||||
@@ -0,0 +1,84 @@
|
||||
# postcard
|
||||
|
||||
Turn a phone photo into a sendable postcard. Upload a photo, it gets
|
||||
composited onto a vintage postcard template (border, stamp corner,
|
||||
handwriting-style caption) entirely in the browser, then either download
|
||||
it right away or upload it for a shareable link.
|
||||
|
||||
The caption is auto-drafted by assembling real fragments of that day
|
||||
(git activity, what was playing, a note title) via `server/src/caption.js`
|
||||
— never a free-text model call — and stays editable. With no day-context
|
||||
source configured it falls back to a small set of generic postcard-voice
|
||||
lines.
|
||||
|
||||
Structurally this is a copy of [`latent`](../latent)'s upload → transform
|
||||
→ deliver shape and server (`db.js`/`ids.js`/`cleanup.js`/`ratelimit.js`/
|
||||
`routes.js`), with the transform swapped for postcard compositing. See
|
||||
[PROPOSAL.md](PROPOSAL.md) for the original design writeup.
|
||||
|
||||
## Two finishing paths off one editor
|
||||
|
||||
1. **Instant** — composite, then download directly, entirely client-side.
|
||||
Optionally generate a share link (explicit action, not automatic).
|
||||
2. **Send** — uploads the composited image to server storage, returns a
|
||||
link immediately (no delayed-reveal gate — that's `latent`'s gimmick,
|
||||
not this one's).
|
||||
|
||||
## Running locally
|
||||
|
||||
```
|
||||
npm install --prefix server
|
||||
npm start --prefix server
|
||||
```
|
||||
|
||||
Then open http://localhost:3098. `server`'s `start`/`dev` scripts load
|
||||
`../.env` automatically via Node's `--env-file-if-exists` — copy
|
||||
`.env.example` to `.env` at the repo root and adjust. `DATA_DIR` defaults
|
||||
to `./server/data` (gitignored) for the SQLite db and image blobs.
|
||||
|
||||
## Deploying
|
||||
|
||||
`docker compose up` using the provided `docker-compose.yml` (copy
|
||||
`.env.example` to `.env` and adjust — `IMAGE`/`HOST_PORT` are only read by
|
||||
compose, the rest are passed through to the container).
|
||||
|
||||
## Config
|
||||
|
||||
All via env vars:
|
||||
|
||||
- `TTL_HOURS` — link retention (default 72h; shorter than `latent`'s,
|
||||
since a postcard link is meant to be opened once, not browsed later).
|
||||
- `MAX_UPLOAD_BYTES`, `RATE_LIMIT_PER_HOUR` — basic abuse limits; no
|
||||
accounts or auth on any endpoint, the link itself is the credential.
|
||||
- `DAY_SUMMARY_URL` — optional, no code-level default (set it in `.env`).
|
||||
If set, `GET {url}?date=YYYY-MM-DD` is expected to return
|
||||
`{ git?, spotify?, note? }` fragments for that date. `.env` here points
|
||||
it at `https://goonk.se/api/day-summary`, goonk's live endpoint
|
||||
(confirmed returning `{ git, spotify? }` — no `note` field observed yet).
|
||||
A response body containing an `error` key (goonk's shape for a
|
||||
missing/malformed date) is treated the same as no summary. Left unset,
|
||||
captions fall back to generic lines — no invented personal data.
|
||||
- `NOMINATIM_URL` — reverse-geocoding endpoint for the stamp corner's
|
||||
location line (only queried when a photo has EXIF GPS). Defaults to the
|
||||
public `nominatim.openstreetmap.org`; `server/src/geocode.js` throttles
|
||||
to 1 req/sec and caches by rounded coordinate per that API's usage
|
||||
policy. No API key needed.
|
||||
|
||||
## Notable implementation details
|
||||
|
||||
- EXIF is parsed client-side with no dependency (`exif.js`) — just enough
|
||||
to read `DateTimeOriginal` and GPS lat/lon out of a JPEG. Parse
|
||||
failures/missing tags fall back to upload date / no location stamp,
|
||||
never invented data.
|
||||
- The caption's handwriting font is self-hosted (`fonts/caveat-latin.woff2`,
|
||||
Caveat, SIL OFL — see `fonts/OFL.txt`), not loaded from
|
||||
fonts.googleapis.com at runtime.
|
||||
- The upload card offers separate "take a photo" (camera capture) and
|
||||
"choose from library" buttons rather than relying on the OS's file
|
||||
picker to offer both — some mobile browsers skip the chooser and go
|
||||
straight to the camera when `capture` is set on a single input.
|
||||
|
||||
## Non-goals
|
||||
|
||||
No accounts, no "your postcards" history, no delayed-reveal mechanic, no
|
||||
free-text LLM-generated captions, no collaborative/multi-recipient cards.
|
||||
@@ -0,0 +1,376 @@
|
||||
(() => {
|
||||
const fileInput = document.getElementById('file-input');
|
||||
const cameraInput = document.getElementById('camera-input');
|
||||
const cameraBtn = document.getElementById('camera-btn');
|
||||
const libraryBtn = document.getElementById('library-btn');
|
||||
const dropZone = document.getElementById('drop-zone');
|
||||
const dropCard = document.getElementById('drop-card');
|
||||
const editorCard = document.getElementById('editor-card');
|
||||
const canvas = document.getElementById('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
const templateRow = document.getElementById('template-row');
|
||||
const captionInput = document.getElementById('caption-input');
|
||||
const captionStatus = document.getElementById('caption-status');
|
||||
const redraftBtn = document.getElementById('redraft-btn');
|
||||
|
||||
const newPhotoBtn = document.getElementById('new-photo-btn');
|
||||
const downloadBtn = document.getElementById('download-btn');
|
||||
const shareBtn = document.getElementById('share-btn');
|
||||
const resultPanel = document.getElementById('result-panel');
|
||||
|
||||
const source = document.createElement('canvas'); // original photo, cover-cropped into the photo area
|
||||
const sourceCtx = source.getContext('2d');
|
||||
|
||||
let originalImg = null;
|
||||
let photoDate = new Date();
|
||||
let locationLabel = null; // "City, Country" from EXIF GPS + server-side reverse geocode, or null
|
||||
|
||||
const params = {
|
||||
template: 'cream',
|
||||
caption: '',
|
||||
};
|
||||
|
||||
// Registered via CSS @font-face but canvas fillText won't wait for a
|
||||
// lazily-loaded webfont on its own — load it explicitly once up front.
|
||||
let fontReady = false;
|
||||
document.fonts.load('700 40px Caveat').catch(() => {}).finally(() => {
|
||||
fontReady = true;
|
||||
if (originalImg) render();
|
||||
});
|
||||
|
||||
// Small seeded PRNG so a template's jagged/faded look stays fixed per
|
||||
// photo instead of jittering every redraw.
|
||||
function mulberry32(seed) {
|
||||
let a = Math.floor(seed * 0xffffffff);
|
||||
return function () {
|
||||
a |= 0; a = (a + 0x6d2b79f5) | 0;
|
||||
let t = Math.imul(a ^ (a >>> 15), 1 | a);
|
||||
t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
|
||||
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
|
||||
};
|
||||
}
|
||||
let torSeed = Math.random();
|
||||
|
||||
async function loadFile(file) {
|
||||
if (!file || !file.type.startsWith('image/')) return;
|
||||
|
||||
// Read EXIF before the image element even loads — DateTimeOriginal
|
||||
// backdates the caption/postmark to when the photo was actually taken,
|
||||
// not when it happened to be uploaded; GPS (if present) drives the
|
||||
// location line. Both are optional: parse failures/missing tags just
|
||||
// mean "fall back to upload date, no location," per PROPOSAL.md.
|
||||
const exif = window.PostcardExif ? await window.PostcardExif.read(file) : null;
|
||||
photoDate = exif?.date || new Date();
|
||||
locationLabel = null;
|
||||
|
||||
const url = URL.createObjectURL(file);
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
originalImg = img;
|
||||
URL.revokeObjectURL(url);
|
||||
dropCard.hidden = true;
|
||||
editorCard.hidden = false;
|
||||
resultPanel.hidden = true;
|
||||
torSeed = Math.random();
|
||||
rebuildSource();
|
||||
render();
|
||||
draftCaption();
|
||||
if (exif && exif.lat != null && exif.lon != null) lookupLocation(exif.lat, exif.lon);
|
||||
};
|
||||
img.src = url;
|
||||
}
|
||||
|
||||
async function lookupLocation(lat, lon) {
|
||||
try {
|
||||
const res = await fetch(`/api/geocode?lat=${lat}&lon=${lon}`);
|
||||
const data = await res.json();
|
||||
if (data.label) {
|
||||
locationLabel = data.label;
|
||||
render();
|
||||
}
|
||||
} catch {
|
||||
// No location line — never invents one, per PROPOSAL.md.
|
||||
}
|
||||
}
|
||||
|
||||
// Builds `source`: the photo cover-cropped to a fixed postcard photo-area
|
||||
// aspect (3:2, classic postcard proportions), capped so a raw phone photo
|
||||
// doesn't choke canvas ops.
|
||||
function rebuildSource() {
|
||||
if (!originalImg) return;
|
||||
const iw = originalImg.naturalWidth;
|
||||
const ih = originalImg.naturalHeight;
|
||||
const targetAspect = 3 / 2;
|
||||
|
||||
let cropW = iw, cropH = ih, cropX = 0, cropY = 0;
|
||||
const currentAspect = iw / ih;
|
||||
if (currentAspect > targetAspect) {
|
||||
cropW = Math.round(ih * targetAspect);
|
||||
cropX = Math.round((iw - cropW) / 2);
|
||||
} else {
|
||||
cropH = Math.round(iw / targetAspect);
|
||||
cropY = Math.round((ih - cropH) / 2);
|
||||
}
|
||||
|
||||
const maxDim = 1800;
|
||||
let outW = cropW, outH = cropH;
|
||||
if (Math.max(outW, outH) > maxDim) {
|
||||
const scale = maxDim / Math.max(outW, outH);
|
||||
outW = Math.round(outW * scale);
|
||||
outH = Math.round(outH * scale);
|
||||
}
|
||||
|
||||
source.width = outW;
|
||||
source.height = outH;
|
||||
sourceCtx.clearRect(0, 0, outW, outH);
|
||||
sourceCtx.drawImage(originalImg, cropX, cropY, cropW, cropH, 0, 0, outW, outH);
|
||||
|
||||
// Full card = photo area + a border margin all around, matching a
|
||||
// physical postcard's white/cream frame.
|
||||
const margin = Math.round(outW * 0.06);
|
||||
canvas.width = outW + margin * 2;
|
||||
canvas.height = outH + margin * 2;
|
||||
}
|
||||
|
||||
function render() {
|
||||
if (!originalImg) return;
|
||||
const w = canvas.width;
|
||||
const h = canvas.height;
|
||||
const margin = Math.round(source.width * 0.06);
|
||||
|
||||
ctx.clearRect(0, 0, w, h);
|
||||
|
||||
// Border background per template.
|
||||
if (params.template === 'faded') {
|
||||
ctx.fillStyle = '#e9dfc8';
|
||||
} else {
|
||||
ctx.fillStyle = '#f7f2e6';
|
||||
}
|
||||
ctx.fillRect(0, 0, w, h);
|
||||
|
||||
// Photo, with a per-template filter applied at draw time.
|
||||
ctx.save();
|
||||
ctx.filter = params.template === 'faded'
|
||||
? 'sepia(0.25) saturate(0.55) contrast(0.85) brightness(1.1)'
|
||||
: 'none';
|
||||
if (params.template === 'torn') {
|
||||
clipTornRect(margin, margin, source.width, source.height, torSeed);
|
||||
}
|
||||
ctx.drawImage(source, margin, margin);
|
||||
ctx.restore();
|
||||
|
||||
if (params.template !== 'torn') {
|
||||
ctx.strokeStyle = 'rgba(0,0,0,0.15)';
|
||||
ctx.lineWidth = 1;
|
||||
ctx.strokeRect(margin + 0.5, margin + 0.5, source.width - 1, source.height - 1);
|
||||
}
|
||||
|
||||
drawStampCorner(w, h, margin);
|
||||
drawCaption(w, h, margin);
|
||||
}
|
||||
|
||||
// Clips the current path to a rectangle with a hand-torn edge — jagged
|
||||
// teeth along each side, seeded so it's stable per photo.
|
||||
function clipTornRect(x, y, w, h, seed) {
|
||||
const rng = mulberry32(seed);
|
||||
const tooth = Math.max(2, Math.round(Math.min(w, h) * 0.006));
|
||||
const step = tooth * 3;
|
||||
|
||||
ctx.beginPath();
|
||||
let px = x, py = y;
|
||||
ctx.moveTo(px, py);
|
||||
for (; px < x + w; px += step) ctx.lineTo(px, y + (rng() - 0.5) * tooth);
|
||||
ctx.lineTo(x + w, y + (rng() - 0.5) * tooth);
|
||||
for (; py < y + h; py += step) ctx.lineTo(x + w + (rng() - 0.5) * tooth, py);
|
||||
ctx.lineTo(x + w + (rng() - 0.5) * tooth, y + h);
|
||||
for (px = x + w; px > x; px -= step) ctx.lineTo(px, y + h + (rng() - 0.5) * tooth);
|
||||
ctx.lineTo(x, y + h + (rng() - 0.5) * tooth);
|
||||
for (py = y + h; py > y; py -= step) ctx.lineTo(x + (rng() - 0.5) * tooth, py);
|
||||
ctx.closePath();
|
||||
ctx.clip();
|
||||
}
|
||||
|
||||
// Postmark stamp — date always, plus a location line only when the photo
|
||||
// had EXIF GPS and reverse geocoding succeeded. Never an invented
|
||||
// location, per PROPOSAL.md's fallback for "no EXIF GPS."
|
||||
function drawStampCorner(w, h, margin) {
|
||||
const size = margin * 1.6;
|
||||
// Right edge of the (rotated) box must stay inside the card, not just
|
||||
// inside the photo area — the border margin is the only safe zone.
|
||||
const x = w - margin - size;
|
||||
const y = margin * 0.15;
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(x, y);
|
||||
ctx.rotate((6 * Math.PI) / 180);
|
||||
ctx.strokeStyle = 'rgba(0,0,0,0.35)';
|
||||
ctx.lineWidth = Math.max(1, size * 0.02);
|
||||
ctx.setLineDash([size * 0.04, size * 0.03]);
|
||||
ctx.strokeRect(0, 0, size, size * 0.8);
|
||||
ctx.setLineDash([]);
|
||||
|
||||
ctx.fillStyle = 'rgba(0,0,0,0.55)';
|
||||
ctx.textAlign = 'center';
|
||||
const dateStr = photoDate.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
|
||||
|
||||
if (locationLabel) {
|
||||
ctx.font = `${Math.round(size * 0.1)}px ui-monospace, 'JetBrains Mono', 'Fira Code', monospace`;
|
||||
ctx.fillText(truncate(locationLabel, 18), size / 2, size * 0.3);
|
||||
ctx.font = `${Math.round(size * 0.11)}px ui-monospace, 'JetBrains Mono', 'Fira Code', monospace`;
|
||||
ctx.fillText(dateStr, size / 2, size * 0.52);
|
||||
ctx.font = `${Math.round(size * 0.08)}px ui-monospace, 'JetBrains Mono', 'Fira Code', monospace`;
|
||||
ctx.fillText('postcard', size / 2, size * 0.7);
|
||||
} else {
|
||||
ctx.font = `${Math.round(size * 0.13)}px ui-monospace, 'JetBrains Mono', 'Fira Code', monospace`;
|
||||
ctx.fillText(dateStr, size / 2, size * 0.45);
|
||||
ctx.font = `${Math.round(size * 0.09)}px ui-monospace, 'JetBrains Mono', 'Fira Code', monospace`;
|
||||
ctx.fillText('postcard', size / 2, size * 0.65);
|
||||
}
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
function truncate(str, maxLen) {
|
||||
return str.length > maxLen ? `${str.slice(0, maxLen - 1)}…` : str;
|
||||
}
|
||||
|
||||
function drawCaption(w, h, margin) {
|
||||
if (!params.caption) return;
|
||||
ctx.save();
|
||||
ctx.fillStyle = 'rgba(30,25,15,0.85)';
|
||||
ctx.textAlign = 'left';
|
||||
ctx.textBaseline = 'alphabetic';
|
||||
// Caveat reads smaller than a sans face at the same px size (thin
|
||||
// connected strokes), so it gets a bigger multiplier and bolder weight
|
||||
// than a plain cursive fallback would need.
|
||||
const fontSize = Math.max(16, Math.round(margin * 0.55));
|
||||
ctx.font = fontReady
|
||||
? `700 ${fontSize}px "Caveat", cursive`
|
||||
: `${Math.round(fontSize * 0.75)}px "Segoe Script", "Bradley Hand", cursive`;
|
||||
wrapText(params.caption, margin, h - margin * 0.35, w - margin * 2, fontSize * 1.15);
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
function wrapText(text, x, bottomY, maxWidth, lineHeight) {
|
||||
const words = text.split(/\s+/);
|
||||
const lines = [];
|
||||
let line = '';
|
||||
for (const word of words) {
|
||||
const test = line ? `${line} ${word}` : word;
|
||||
if (ctx.measureText(test).width > maxWidth && line) {
|
||||
lines.push(line);
|
||||
line = word;
|
||||
} else {
|
||||
line = test;
|
||||
}
|
||||
}
|
||||
if (line) lines.push(line);
|
||||
const clipped = lines.slice(-3); // at most 3 lines, bottom-anchored
|
||||
const startY = bottomY - (clipped.length - 1) * lineHeight;
|
||||
clipped.forEach((l, i) => ctx.fillText(l, x, startY + i * lineHeight));
|
||||
}
|
||||
|
||||
async function draftCaption() {
|
||||
captionStatus.textContent = 'drafting…';
|
||||
try {
|
||||
const dateStr = photoDate.toISOString().slice(0, 10);
|
||||
const res = await fetch(`/api/caption?date=${dateStr}`);
|
||||
const data = await res.json();
|
||||
captionInput.value = data.caption || '';
|
||||
params.caption = captionInput.value;
|
||||
captionStatus.textContent = '';
|
||||
render();
|
||||
} catch {
|
||||
captionStatus.textContent = '';
|
||||
}
|
||||
}
|
||||
|
||||
function showResult(html, isError) {
|
||||
resultPanel.innerHTML = html;
|
||||
resultPanel.classList.toggle('error', !!isError);
|
||||
resultPanel.hidden = false;
|
||||
}
|
||||
|
||||
function canvasToBlob() {
|
||||
return new Promise(resolve => canvas.toBlob(resolve, 'image/jpeg', 0.92));
|
||||
}
|
||||
|
||||
async function upload() {
|
||||
shareBtn.disabled = true;
|
||||
showResult('uploading…');
|
||||
try {
|
||||
const blob = await canvasToBlob();
|
||||
const res = await fetch('/api/upload', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'image/jpeg' },
|
||||
body: blob,
|
||||
});
|
||||
if (!res.ok) {
|
||||
const body = await res.json().catch(() => ({}));
|
||||
throw new Error(body.error || `upload failed (${res.status})`);
|
||||
}
|
||||
const data = await res.json();
|
||||
const link = `${location.origin}${data.url}`;
|
||||
showResult(`share link: <a href="${link}">${link}</a>`);
|
||||
} catch (err) {
|
||||
showResult(err.message || 'something went wrong', true);
|
||||
} finally {
|
||||
shareBtn.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
fileInput.addEventListener('change', () => loadFile(fileInput.files[0]));
|
||||
cameraInput.addEventListener('change', () => loadFile(cameraInput.files[0]));
|
||||
cameraBtn.addEventListener('click', () => cameraInput.click());
|
||||
libraryBtn.addEventListener('click', () => fileInput.click());
|
||||
|
||||
['dragover', 'dragenter'].forEach(evt =>
|
||||
dropZone.addEventListener(evt, e => {
|
||||
e.preventDefault();
|
||||
dropZone.classList.add('drag-over');
|
||||
})
|
||||
);
|
||||
['dragleave', 'dragend', 'drop'].forEach(evt =>
|
||||
dropZone.addEventListener(evt, () => dropZone.classList.remove('drag-over'))
|
||||
);
|
||||
dropZone.addEventListener('drop', e => {
|
||||
e.preventDefault();
|
||||
loadFile(e.dataTransfer.files[0]);
|
||||
});
|
||||
|
||||
[...templateRow.children].forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
params.template = btn.dataset.template;
|
||||
[...templateRow.children].forEach(b => b.classList.toggle('active', b === btn));
|
||||
render();
|
||||
});
|
||||
});
|
||||
|
||||
captionInput.addEventListener('input', () => {
|
||||
params.caption = captionInput.value;
|
||||
render();
|
||||
});
|
||||
redraftBtn.addEventListener('click', draftCaption);
|
||||
|
||||
newPhotoBtn.addEventListener('click', () => {
|
||||
originalImg = null;
|
||||
locationLabel = null;
|
||||
fileInput.value = '';
|
||||
cameraInput.value = '';
|
||||
editorCard.hidden = true;
|
||||
dropCard.hidden = false;
|
||||
resultPanel.hidden = true;
|
||||
});
|
||||
|
||||
downloadBtn.addEventListener('click', async () => {
|
||||
const blob = await canvasToBlob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `postcard-${Date.now()}.jpg`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
});
|
||||
|
||||
shareBtn.addEventListener('click', upload);
|
||||
})();
|
||||
@@ -0,0 +1,25 @@
|
||||
services:
|
||||
app:
|
||||
image: ${IMAGE}
|
||||
container_name: postcard
|
||||
restart: unless-stopped
|
||||
pull_policy: always
|
||||
ports:
|
||||
- "${HOST_PORT:-3098}:3098"
|
||||
environment:
|
||||
- TTL_HOURS=${TTL_HOURS:-72}
|
||||
- MAX_UPLOAD_BYTES=${MAX_UPLOAD_BYTES:-20971520}
|
||||
- RATE_LIMIT_PER_HOUR=${RATE_LIMIT_PER_HOUR:-30}
|
||||
# Day-context source for caption drafting — see README. Left unset,
|
||||
# captions fall back to generic postcard-voice lines.
|
||||
- DAY_SUMMARY_URL=${DAY_SUMMARY_URL:-}
|
||||
# Reverse-geocoding endpoint for the stamp corner's location line.
|
||||
# Defaults to the public Nominatim instance if unset.
|
||||
- NOMINATIM_URL=${NOMINATIM_URL:-}
|
||||
volumes:
|
||||
# Named volume, not a bind mount into the build context — the SQLite
|
||||
# db and image blobs live here and must survive image redeploys.
|
||||
- postcard-data:/app/data
|
||||
|
||||
volumes:
|
||||
postcard-data:
|
||||
@@ -0,0 +1,117 @@
|
||||
// Minimal EXIF reader — just enough to pull DateTimeOriginal and GPS lat/lon
|
||||
// out of a JPEG, with no dependency (this project's "no build step" family
|
||||
// doesn't pull in npm packages for the client). Not a general-purpose EXIF
|
||||
// library: unsupported/malformed data is treated as "nothing found," never
|
||||
// thrown, since the caller always has upload-date/no-location fallbacks.
|
||||
window.PostcardExif = (() => {
|
||||
const TYPE_SIZES = { 1: 1, 2: 1, 3: 2, 4: 4, 5: 8, 7: 1, 9: 4, 10: 8 };
|
||||
|
||||
function readValue(view, type, count, offset, littleEndian) {
|
||||
// Only the types actually used by the tags we read (ASCII, SHORT,
|
||||
// LONG, RATIONAL) — anything else returns null rather than guessing.
|
||||
if (type === 2) { // ASCII
|
||||
let s = '';
|
||||
for (let i = 0; i < count - 1; i++) s += String.fromCharCode(view.getUint8(offset + i));
|
||||
return s;
|
||||
}
|
||||
if (type === 3) return view.getUint16(offset, littleEndian); // SHORT
|
||||
if (type === 4) return view.getUint32(offset, littleEndian); // LONG
|
||||
if (type === 5) { // RATIONAL
|
||||
const num = view.getUint32(offset, littleEndian);
|
||||
const den = view.getUint32(offset + 4, littleEndian);
|
||||
return den === 0 ? 0 : num / den;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function readIfd(view, tiffStart, ifdOffset, littleEndian) {
|
||||
const entries = {};
|
||||
const count = view.getUint16(tiffStart + ifdOffset, littleEndian);
|
||||
for (let i = 0; i < count; i++) {
|
||||
const entryOffset = tiffStart + ifdOffset + 2 + i * 12;
|
||||
const tag = view.getUint16(entryOffset, littleEndian);
|
||||
const type = view.getUint16(entryOffset + 2, littleEndian);
|
||||
const valueCount = view.getUint32(entryOffset + 4, littleEndian);
|
||||
const size = (TYPE_SIZES[type] || 1) * valueCount;
|
||||
const valueOffset = size > 4
|
||||
? tiffStart + view.getUint32(entryOffset + 8, littleEndian)
|
||||
: entryOffset + 8;
|
||||
if (type === 5 && valueCount === 3) {
|
||||
// GPSLatitude/Longitude: [degrees, minutes, seconds] rationals.
|
||||
entries[tag] = [0, 1, 2].map(i => readValue(view, type, 2, valueOffset + i * 8, littleEndian));
|
||||
} else {
|
||||
entries[tag] = readValue(view, type, valueCount, valueOffset, littleEndian);
|
||||
}
|
||||
}
|
||||
return entries;
|
||||
}
|
||||
|
||||
function dmsToDecimal(dms, ref) {
|
||||
if (!Array.isArray(dms) || dms.length !== 3) return null;
|
||||
const [d, m, s] = dms;
|
||||
let dec = d + m / 60 + s / 3600;
|
||||
if (ref === 'S' || ref === 'W') dec = -dec;
|
||||
return dec;
|
||||
}
|
||||
|
||||
function parseDateTimeOriginal(str) {
|
||||
// "YYYY:MM:DD HH:MM:SS" — EXIF's own format, always local time with no
|
||||
// timezone info, so this is treated as a plain calendar date.
|
||||
const m = /^(\d{4}):(\d{2}):(\d{2})/.exec(str || '');
|
||||
if (!m) return null;
|
||||
return new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
|
||||
}
|
||||
|
||||
function parse(buffer) {
|
||||
const view = new DataView(buffer);
|
||||
if (view.getUint16(0) !== 0xffd8) return null; // not a JPEG
|
||||
|
||||
let offset = 2;
|
||||
while (offset < view.byteLength - 4) {
|
||||
const marker = view.getUint16(offset);
|
||||
if ((marker & 0xff00) !== 0xff00) break; // not a valid marker, bail out
|
||||
if (marker === 0xffd8) { offset += 2; continue; }
|
||||
if (marker === 0xffda || marker === 0xffd9) break; // start of scan / EOI — no more APPn markers past this
|
||||
|
||||
const segLength = view.getUint16(offset + 2);
|
||||
if (marker === 0xffe1) {
|
||||
const exifStart = offset + 4;
|
||||
if (view.getUint32(exifStart) === 0x45786966) { // "Exif"
|
||||
const tiffStart = exifStart + 6;
|
||||
const littleEndian = view.getUint16(tiffStart) === 0x4949;
|
||||
const ifd0Offset = view.getUint32(tiffStart + 4, littleEndian);
|
||||
const ifd0 = readIfd(view, tiffStart, ifd0Offset, littleEndian);
|
||||
|
||||
let date = null;
|
||||
let lat = null, lon = null;
|
||||
|
||||
if (ifd0[0x8769] != null) {
|
||||
const exifIfd = readIfd(view, tiffStart, ifd0[0x8769], littleEndian);
|
||||
date = parseDateTimeOriginal(exifIfd[0x9003]);
|
||||
}
|
||||
if (ifd0[0x8825] != null) {
|
||||
const gpsIfd = readIfd(view, tiffStart, ifd0[0x8825], littleEndian);
|
||||
lat = dmsToDecimal(gpsIfd[0x0002], gpsIfd[0x0001]);
|
||||
lon = dmsToDecimal(gpsIfd[0x0004], gpsIfd[0x0003]);
|
||||
}
|
||||
return { date, lat, lon };
|
||||
}
|
||||
}
|
||||
offset += 2 + segLength;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
// Returns { date: Date|null, lat: number|null, lon: number|null }, or
|
||||
// null on any parse failure — never throws.
|
||||
async read(file) {
|
||||
try {
|
||||
const buffer = await file.arrayBuffer();
|
||||
return parse(buffer);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
};
|
||||
})();
|
||||
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<rect x="3" y="7" width="26" height="18" rx="1.5" fill="#0c0a08" stroke="#d9873f" stroke-width="1.5"/>
|
||||
<path d="M3 8 L16 18 L29 8" fill="none" stroke="#d9873f" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 300 B |
@@ -0,0 +1,6 @@
|
||||
Caveat — SIL Open Font License, Version 1.1
|
||||
|
||||
Fetched from Google Fonts (fonts.gstatic.com), latin subset, variable
|
||||
weight (400-700). See https://fonts.google.com/specimen/Caveat for the
|
||||
canonical source and full license text:
|
||||
https://openfontlicense.org
|
||||
Binary file not shown.
+74
@@ -0,0 +1,74 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>postcard</title>
|
||||
<link rel="icon" href="favicon.svg" type="image/svg+xml">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="header-row">
|
||||
<h1>postcard</h1>
|
||||
</div>
|
||||
<p class="hint">turn a photo into something that looks like it was mailed</p>
|
||||
|
||||
<div class="card" id="drop-card">
|
||||
<label class="drop-zone" id="drop-zone" for="file-input">
|
||||
<span class="drop-zone-label">choose a photo, or drag one here</span>
|
||||
<span class="drop-zone-sub">nothing leaves your browser until you say so</span>
|
||||
</label>
|
||||
<input type="file" id="file-input" accept="image/*" hidden>
|
||||
|
||||
<div class="inline-row source-row">
|
||||
<button class="btn btn-small" id="camera-btn">take a photo</button>
|
||||
<button class="btn btn-small" id="library-btn">choose from library</button>
|
||||
</div>
|
||||
<input type="file" id="camera-input" accept="image/*" capture="environment" hidden>
|
||||
</div>
|
||||
|
||||
<div class="card" id="editor-card" hidden>
|
||||
<div class="canvas-wrap">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<div class="control-group">
|
||||
<div class="control-label">template</div>
|
||||
<div class="preset-row" id="template-row">
|
||||
<button class="preset-btn active" data-template="cream">plain cream</button>
|
||||
<button class="preset-btn" data-template="torn">torn edge</button>
|
||||
<button class="preset-btn" data-template="faded">faded color-era</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<div class="control-label">
|
||||
<span>caption</span>
|
||||
<span class="control-value" id="caption-status"></span>
|
||||
</div>
|
||||
<textarea id="caption-input" class="caption-input" rows="2" maxlength="140" placeholder="wish you were here..."></textarea>
|
||||
<div class="inline-row">
|
||||
<button class="btn btn-small" id="redraft-btn">redraft</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions actions-row">
|
||||
<button class="btn" id="new-photo-btn">new photo</button>
|
||||
<button class="btn btn-primary" id="download-btn">download</button>
|
||||
</div>
|
||||
|
||||
<div class="actions actions-row">
|
||||
<button class="btn" id="share-btn">generate share link</button>
|
||||
</div>
|
||||
|
||||
<div id="result-panel" class="result-panel" hidden></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="exif.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+1252
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"name": "postcard-server",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"description": "Small server for postcard: composited-image storage behind opaque links, plus day-context caption drafting",
|
||||
"scripts": {
|
||||
"start": "node --env-file-if-exists=../.env src/index.js",
|
||||
"dev": "node --env-file-if-exists=../.env --watch src/index.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"better-sqlite3": "^11.3.0",
|
||||
"express": "^4.19.2"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import { config } from './config.js'
|
||||
|
||||
// Remix of real fragments from the day, not a free-text model call — per
|
||||
// PROPOSAL.md's non-goal on LLM-generated captions. Always returns
|
||||
// something (never an empty field): falls back to generic postcard-voice
|
||||
// lines when no day-context source is configured or it has nothing for
|
||||
// that date.
|
||||
const FALLBACKS = [
|
||||
'Wish you were here. Mostly wasn\'t.',
|
||||
'Having a time. More on that later, maybe.',
|
||||
'Sending this before I talk myself out of it.',
|
||||
'Quiet one. Thinking of you anyway.',
|
||||
]
|
||||
|
||||
function pick(seedStr, arr) {
|
||||
let h = 0
|
||||
for (let i = 0; i < seedStr.length; i++) h = (h * 31 + seedStr.charCodeAt(i)) >>> 0
|
||||
return arr[h % arr.length]
|
||||
}
|
||||
|
||||
async function fetchDaySummary(dateStr) {
|
||||
if (!config.daySummaryUrl) return null
|
||||
try {
|
||||
const url = `${config.daySummaryUrl}?date=${encodeURIComponent(dateStr)}`
|
||||
const res = await fetch(url, { signal: AbortSignal.timeout(3000) })
|
||||
if (!res.ok) return null
|
||||
const data = await res.json() // { git?: string, spotify?: string, note?: string }
|
||||
// goonk's /api/day-summary returns HTTP 200 with an `error` body for a
|
||||
// missing/malformed date instead of a non-2xx status — treat that the
|
||||
// same as "no summary" rather than reading undefined fragments.
|
||||
if (data && typeof data.error === 'string') return null
|
||||
return data
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
const SHAPES = [
|
||||
{ needs: ['git', 'spotify'], build: ({ git, spotify }) => `Spent the day ${git}. ${spotify} the whole time.` },
|
||||
{ needs: ['git', 'spotify'], build: ({ git, spotify }) => `${spotify}. ${git}, mostly.` },
|
||||
{ needs: ['git'], build: ({ git }) => `Spent the day ${git}.` },
|
||||
{ needs: ['spotify'], build: ({ spotify }) => `${spotify} all day.` },
|
||||
{ needs: ['note'], build: ({ note }) => `Been thinking about "${note}."` },
|
||||
]
|
||||
|
||||
export async function draftCaption(dateStr) {
|
||||
const summary = await fetchDaySummary(dateStr)
|
||||
const fragments = { git: summary?.git || null, spotify: summary?.spotify || null, note: summary?.note || null }
|
||||
|
||||
const usable = SHAPES.filter(shape => shape.needs.every(key => fragments[key]))
|
||||
if (usable.length === 0) return pick(dateStr, FALLBACKS)
|
||||
|
||||
const shape = pick(dateStr + 'shape', usable)
|
||||
return shape.build(fragments)
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import fs from 'node:fs'
|
||||
import { config } from './config.js'
|
||||
import { db, blobPath } from './db.js'
|
||||
import { sweepRateLimitWindows } from './ratelimit.js'
|
||||
|
||||
// Interval-based sweep, not push-based — deletes blobs + rows past
|
||||
// expires_at regardless of whether they were ever viewed, matching
|
||||
// latent/wisp's "deliberately dumb" precedent.
|
||||
export function sweepExpiredPostcards() {
|
||||
const now = Math.floor(Date.now() / 1000)
|
||||
const expired = db.prepare(`SELECT id FROM postcards WHERE expires_at < ?`).all(now)
|
||||
|
||||
for (const { id } of expired) {
|
||||
fs.rm(blobPath(id), { force: true }, () => {})
|
||||
}
|
||||
if (expired.length > 0) {
|
||||
db.prepare(`DELETE FROM postcards WHERE expires_at < ?`).run(now)
|
||||
}
|
||||
|
||||
sweepRateLimitWindows()
|
||||
}
|
||||
|
||||
export function startCleanupJob() {
|
||||
return setInterval(sweepExpiredPostcards, config.cleanupIntervalSeconds * 1000)
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import path from 'node:path'
|
||||
|
||||
export const config = {
|
||||
port: Number(process.env.PORT ?? 3098),
|
||||
dataDir: process.env.DATA_DIR ?? path.resolve('data'),
|
||||
|
||||
// Shorter than latent's — a postcard link is meant to be opened once by
|
||||
// the recipient, not browsed later, per PROPOSAL.md's retention question.
|
||||
ttlHours: Number(process.env.TTL_HOURS ?? 72),
|
||||
|
||||
maxUploadBytes: Number(process.env.MAX_UPLOAD_BYTES ?? 20 * 1024 * 1024), // 20MB
|
||||
cleanupIntervalSeconds: Number(process.env.CLEANUP_INTERVAL_SECONDS ?? 60 * 15),
|
||||
|
||||
// Basic IP-based throttle so /api/upload can't become an open file host.
|
||||
rateLimitPerHour: Number(process.env.RATE_LIMIT_PER_HOUR ?? 30),
|
||||
|
||||
// Optional day-context source for caption drafting — goonk's live
|
||||
// GET {base}/api/day-summary?date=YYYY-MM-DD -> { git, spotify, note? }.
|
||||
// No code-level default; set via .env. Left unset, caption generation
|
||||
// falls back to generic postcard-voice lines.
|
||||
daySummaryUrl: process.env.DAY_SUMMARY_URL ?? '',
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import Database from 'better-sqlite3'
|
||||
import fs from 'node:fs'
|
||||
import path from 'node:path'
|
||||
import { config } from './config.js'
|
||||
|
||||
fs.mkdirSync(config.dataDir, { recursive: true })
|
||||
fs.mkdirSync(path.join(config.dataDir, 'blobs'), { recursive: true })
|
||||
|
||||
export const db = new Database(path.join(config.dataDir, 'postcard.db'))
|
||||
db.pragma('journal_mode = WAL')
|
||||
|
||||
db.exec(`
|
||||
CREATE TABLE IF NOT EXISTS postcards (
|
||||
id TEXT PRIMARY KEY,
|
||||
blob_path TEXT NOT NULL,
|
||||
mime TEXT NOT NULL,
|
||||
created_at INTEGER NOT NULL,
|
||||
expires_at INTEGER NOT NULL
|
||||
);
|
||||
`)
|
||||
|
||||
export function blobPath(id) {
|
||||
return path.join(config.dataDir, 'blobs', id)
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
// Reverse geocoding for the stamp corner's location line — confirmed via
|
||||
// PROPOSAL.md's open question that no reverse-geocoding code already
|
||||
// exists in goonk/rewind/galr to reuse, so this talks to the public
|
||||
// Nominatim (OpenStreetMap) API directly. No API key required, but its
|
||||
// usage policy (https://operations.osmfoundation.org/policies/nominatim/)
|
||||
// caps unauthenticated use at 1 request/sec and requires an identifying
|
||||
// User-Agent — both enforced below.
|
||||
// `||` not `??` — docker-compose's environment: block sets this to an
|
||||
// empty string (not unset) when NOMINATIM_URL isn't provided in .env, and
|
||||
// an empty string should still fall through to the real default.
|
||||
const NOMINATIM_URL = process.env.NOMINATIM_URL || 'https://nominatim.openstreetmap.org/reverse'
|
||||
const USER_AGENT = 'postcard/0.1 (https://github.com/explewd/postcard)'
|
||||
const CACHE_TTL_MS = 24 * 60 * 60 * 1000 // a coordinate's city/country doesn't change
|
||||
|
||||
const cache = new Map() // "lat,lon" (rounded) -> { label, ts }
|
||||
let lastRequestAt = 0
|
||||
|
||||
function cacheKey(lat, lon) {
|
||||
// Rounded to ~1km — plenty for a "City, Country" label, and it turns
|
||||
// nearby-but-not-identical GPS fixes into cache hits.
|
||||
return `${lat.toFixed(2)},${lon.toFixed(2)}`
|
||||
}
|
||||
|
||||
function labelFromAddress(address) {
|
||||
if (!address) return null
|
||||
const place = address.city || address.town || address.village || address.municipality || address.county
|
||||
const country = address.country
|
||||
return [place, country].filter(Boolean).join(', ') || null
|
||||
}
|
||||
|
||||
export async function reverseGeocode(lat, lon) {
|
||||
const key = cacheKey(lat, lon)
|
||||
const cached = cache.get(key)
|
||||
if (cached && Date.now() - cached.ts < CACHE_TTL_MS) return cached.label
|
||||
|
||||
// Serialize outgoing requests to respect Nominatim's 1 req/sec cap.
|
||||
const wait = Math.max(0, 1100 - (Date.now() - lastRequestAt))
|
||||
if (wait > 0) await new Promise(resolve => setTimeout(resolve, wait))
|
||||
lastRequestAt = Date.now()
|
||||
|
||||
try {
|
||||
const url = `${NOMINATIM_URL}?format=jsonv2&lat=${encodeURIComponent(lat)}&lon=${encodeURIComponent(lon)}&zoom=10&addressdetails=1&accept-language=en`
|
||||
const res = await fetch(url, {
|
||||
headers: { 'User-Agent': USER_AGENT },
|
||||
signal: AbortSignal.timeout(5000),
|
||||
})
|
||||
if (!res.ok) return null
|
||||
const data = await res.json()
|
||||
const label = labelFromAddress(data.address)
|
||||
cache.set(key, { label, ts: Date.now() })
|
||||
return label
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { randomBytes } from 'node:crypto'
|
||||
|
||||
const BASE62 = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
|
||||
|
||||
// 128-bit random value, rendered as base62 — unguessable, since the link
|
||||
// itself is the only credential (no accounts, per PROPOSAL.md).
|
||||
function randomBase62(bits) {
|
||||
const bytes = randomBytes(Math.ceil(bits / 8) + 4) // headroom for the mod-bias trim below
|
||||
let value = 0n
|
||||
for (const b of bytes) value = (value << 8n) | BigInt(b)
|
||||
|
||||
let out = ''
|
||||
const base = BigInt(BASE62.length)
|
||||
while (value > 0n) {
|
||||
out = BASE62[Number(value % base)] + out
|
||||
value /= base
|
||||
}
|
||||
return out.padStart(Math.ceil(bits / Math.log2(62)), '0')
|
||||
}
|
||||
|
||||
export function newPostcardId() {
|
||||
return randomBase62(128)
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import express from 'express'
|
||||
import path from 'node:path'
|
||||
import { fileURLToPath } from 'node:url'
|
||||
import { config } from './config.js'
|
||||
import { apiRouter, imageRouter } from './routes.js'
|
||||
import { sweepExpiredPostcards, startCleanupJob } from './cleanup.js'
|
||||
|
||||
const app = express()
|
||||
|
||||
// Deployed behind a reverse proxy in production — needed for accurate
|
||||
// req.ip in the rate limiter.
|
||||
app.set('trust proxy', true)
|
||||
|
||||
// Mounted before the static frontend and before any body parser: the
|
||||
// upload route reads the raw request stream itself and must not have it
|
||||
// consumed by express.json()/express.raw() first.
|
||||
app.use('/api', apiRouter)
|
||||
app.use('/', imageRouter)
|
||||
|
||||
const staticRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../..')
|
||||
app.use(express.static(staticRoot))
|
||||
|
||||
sweepExpiredPostcards()
|
||||
startCleanupJob()
|
||||
|
||||
app.listen(config.port, () => {
|
||||
console.log(`postcard server listening on :${config.port}`)
|
||||
})
|
||||
@@ -0,0 +1,28 @@
|
||||
import { config } from './config.js'
|
||||
|
||||
// Deliberately dumb in-memory fixed-window counter, not a distributed
|
||||
// rate limiter — this is a single-process toy server, same as latent/wisp.
|
||||
const windows = new Map() // ip -> { count, windowStart }
|
||||
|
||||
export function checkRateLimit(ip) {
|
||||
const now = Date.now()
|
||||
const hourMs = 60 * 60 * 1000
|
||||
const entry = windows.get(ip)
|
||||
|
||||
if (!entry || now - entry.windowStart > hourMs) {
|
||||
windows.set(ip, { count: 1, windowStart: now })
|
||||
return true
|
||||
}
|
||||
|
||||
entry.count += 1
|
||||
return entry.count <= config.rateLimitPerHour
|
||||
}
|
||||
|
||||
// Prevents the Map from growing forever across long-running processes.
|
||||
export function sweepRateLimitWindows() {
|
||||
const now = Date.now()
|
||||
const hourMs = 60 * 60 * 1000
|
||||
for (const [ip, entry] of windows) {
|
||||
if (now - entry.windowStart > hourMs) windows.delete(ip)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
import { Router } from 'express'
|
||||
import fs from 'node:fs'
|
||||
import { config } from './config.js'
|
||||
import { db, blobPath } from './db.js'
|
||||
import { newPostcardId } from './ids.js'
|
||||
import { checkRateLimit } from './ratelimit.js'
|
||||
import { draftCaption } from './caption.js'
|
||||
import { reverseGeocode } from './geocode.js'
|
||||
|
||||
export const apiRouter = Router()
|
||||
export const imageRouter = Router()
|
||||
|
||||
const ALLOWED_MIME = new Set(['image/jpeg', 'image/png', 'image/webp'])
|
||||
|
||||
// GET /api/caption?date=YYYY-MM-DD — draft a one-line caption from that
|
||||
// day's context. Editable client-side before it's ever composited in.
|
||||
apiRouter.get('/caption', async (req, res) => {
|
||||
const date = /^\d{4}-\d{2}-\d{2}$/.test(req.query.date) ? req.query.date : new Date().toISOString().slice(0, 10)
|
||||
const caption = await draftCaption(date)
|
||||
res.json({ caption })
|
||||
})
|
||||
|
||||
// GET /api/geocode?lat=&lon= — "City, Country" for the stamp corner's
|
||||
// location line, only ever called when the uploaded photo had EXIF GPS.
|
||||
// Proxied server-side so the client never talks to Nominatim directly
|
||||
// (keeps the 1req/sec throttling and User-Agent policy in one place).
|
||||
apiRouter.get('/geocode', async (req, res) => {
|
||||
const lat = Number(req.query.lat)
|
||||
const lon = Number(req.query.lon)
|
||||
if (!Number.isFinite(lat) || !Number.isFinite(lon)) {
|
||||
res.status(400).json({ error: 'lat and lon required' })
|
||||
return
|
||||
}
|
||||
const label = await reverseGeocode(lat, lon)
|
||||
res.json({ label })
|
||||
})
|
||||
|
||||
apiRouter.post('/upload', (req, res) => {
|
||||
const ip = req.ip
|
||||
if (!checkRateLimit(ip)) {
|
||||
res.status(429).json({ error: 'too many uploads, try again later' })
|
||||
return
|
||||
}
|
||||
|
||||
const mime = (req.get('Content-Type') || '').split(';')[0].trim()
|
||||
if (!ALLOWED_MIME.has(mime)) {
|
||||
res.status(415).json({ error: 'unsupported image type' })
|
||||
return
|
||||
}
|
||||
|
||||
const contentLength = Number(req.get('Content-Length') ?? 0)
|
||||
if (contentLength > config.maxUploadBytes) {
|
||||
res.status(413).json({ error: 'file too large' })
|
||||
return
|
||||
}
|
||||
|
||||
const id = newPostcardId()
|
||||
const dest = blobPath(id)
|
||||
const writeStream = fs.createWriteStream(dest, { flags: 'wx' })
|
||||
|
||||
let bytesReceived = 0
|
||||
let aborted = false
|
||||
|
||||
req.on('data', chunk => {
|
||||
bytesReceived += chunk.length
|
||||
if (bytesReceived > config.maxUploadBytes) {
|
||||
aborted = true
|
||||
writeStream.destroy()
|
||||
req.destroy()
|
||||
}
|
||||
})
|
||||
|
||||
req.pipe(writeStream)
|
||||
|
||||
writeStream.on('error', () => {
|
||||
fs.rm(dest, { force: true }, () => {})
|
||||
if (!res.headersSent) res.status(500).json({ error: 'write failed' })
|
||||
})
|
||||
|
||||
writeStream.on('finish', () => {
|
||||
if (aborted) {
|
||||
fs.rm(dest, { force: true }, () => {})
|
||||
if (!res.headersSent) res.status(413).json({ error: 'file too large' })
|
||||
return
|
||||
}
|
||||
|
||||
const now = Math.floor(Date.now() / 1000)
|
||||
const expiresAt = now + config.ttlHours * 3600
|
||||
|
||||
db.prepare(
|
||||
`INSERT INTO postcards (id, blob_path, mime, created_at, expires_at) VALUES (?, ?, ?, ?, ?)`,
|
||||
).run(id, dest, mime, now, expiresAt)
|
||||
|
||||
res.json({ id, url: `/p/${id}` })
|
||||
})
|
||||
})
|
||||
|
||||
// No develop-later gate — this app's whole point is immediacy, unlike latent.
|
||||
imageRouter.get('/p/:id', (req, res) => {
|
||||
const postcard = db.prepare(`SELECT * FROM postcards WHERE id = ?`).get(req.params.id)
|
||||
const now = Math.floor(Date.now() / 1000)
|
||||
|
||||
if (!postcard || postcard.expires_at < now || !fs.existsSync(postcard.blob_path)) {
|
||||
res.status(404).send(renderPage('not found', '<p>this one\'s gone — wrong link, or it already expired.</p>'))
|
||||
return
|
||||
}
|
||||
|
||||
res.setHeader('Content-Type', postcard.mime)
|
||||
res.setHeader('Cache-Control', 'public, max-age=31536000, immutable')
|
||||
fs.createReadStream(postcard.blob_path).pipe(res)
|
||||
})
|
||||
|
||||
function escapeHtml(s) {
|
||||
return s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
|
||||
}
|
||||
|
||||
function renderPage(title, bodyHtml) {
|
||||
return `<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>postcard — ${escapeHtml(title)}</title>
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="header-row"><h1>postcard</h1></div>
|
||||
<div class="card">${bodyHtml}</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>`
|
||||
}
|
||||
@@ -0,0 +1,296 @@
|
||||
/* Self-hosted (fonts/caveat-latin.woff2, SIL OFL — see fonts/OFL.txt) so
|
||||
the caption webfont doesn't depend on fonts.googleapis.com at runtime. */
|
||||
@font-face {
|
||||
font-family: 'Caveat';
|
||||
font-style: normal;
|
||||
font-weight: 400 700;
|
||||
font-display: swap;
|
||||
src: url('fonts/caveat-latin.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg: #0c0a08;
|
||||
--bg-alt: #14100c;
|
||||
--text: #cbc3b8;
|
||||
--muted: #6b6258;
|
||||
--heading: #f2e9dc;
|
||||
--accent: #d9873f;
|
||||
--accent-dim: rgba(217, 135, 63, 0.12);
|
||||
--accent-border:rgba(217, 135, 63, 0.28);
|
||||
--border: rgba(255, 245, 230, 0.08);
|
||||
--shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 4px 24px rgba(0,0,0,0.6);
|
||||
--error: #ff6b6b;
|
||||
--error-dim: rgba(255, 107, 107, 0.14);
|
||||
|
||||
--mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
|
||||
--sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
|
||||
|
||||
font: 16px/1.6 var(--sans);
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
color-scheme: dark;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
|
||||
body { margin: 0; }
|
||||
|
||||
#app {
|
||||
width: 640px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 32px 16px 64px;
|
||||
}
|
||||
|
||||
h1, h2, h3 { font-family: var(--mono); color: var(--heading); line-height: 1.15; margin: 0 0 0.5em; }
|
||||
p { margin: 0; }
|
||||
|
||||
/* ── Header ─────────────────────────────────────────────────────────── */
|
||||
|
||||
.header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.header-row h1 {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.5px;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-row h1::before {
|
||||
content: '> ';
|
||||
color: var(--muted);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.hint {
|
||||
font-family: var(--mono);
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
/* ── Card ───────────────────────────────────────────────────────────── */
|
||||
|
||||
.card {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 24px;
|
||||
background: var(--bg-alt);
|
||||
box-shadow: var(--shadow);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* ── Drop zone ──────────────────────────────────────────────────────── */
|
||||
|
||||
.drop-zone {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 48px 16px;
|
||||
border: 1px dashed var(--border);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
transition: border-color 0.15s, background 0.15s;
|
||||
}
|
||||
|
||||
.drop-zone:hover, .drop-zone.drag-over {
|
||||
border-color: var(--accent-border);
|
||||
background: var(--accent-dim);
|
||||
}
|
||||
|
||||
.drop-zone-label {
|
||||
font-family: var(--mono);
|
||||
font-size: 14px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.source-row {
|
||||
justify-content: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.drop-zone-sub {
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* ── Canvas ─────────────────────────────────────────────────────────── */
|
||||
|
||||
.canvas-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
max-width: 100%;
|
||||
max-height: 60vh;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ── Controls ───────────────────────────────────────────────────────── */
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.control-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.control-value {
|
||||
color: var(--accent);
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.preset-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.preset-btn {
|
||||
font-family: var(--mono);
|
||||
font-size: 12px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border);
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.preset-btn:hover { border-color: var(--accent-border); }
|
||||
|
||||
.preset-btn.active {
|
||||
background: var(--accent-dim);
|
||||
border-color: var(--accent-border);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* ── Caption input ──────────────────────────────────────────────────── */
|
||||
|
||||
.caption-input {
|
||||
width: 100%;
|
||||
resize: vertical;
|
||||
font-family: var(--sans);
|
||||
font-size: 14px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.caption-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-border);
|
||||
}
|
||||
|
||||
/* ── Inline rows ────────────────────────────────────────────────────── */
|
||||
|
||||
.inline-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* ── Actions / buttons ──────────────────────────────────────────────── */
|
||||
|
||||
.actions-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-family: var(--mono);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
padding: 10px 16px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border);
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.btn:hover { border-color: var(--accent-border); color: var(--heading); }
|
||||
.btn:active { transform: scale(0.98); }
|
||||
.btn:disabled { opacity: 0.5; cursor: default; transform: none; }
|
||||
|
||||
.btn-small {
|
||||
font-size: 11px;
|
||||
padding: 6px 10px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.btn-primary:hover { background: #e59a53; border-color: #e59a53; color: #000; }
|
||||
|
||||
/* ── Result panel ───────────────────────────────────────────────────── */
|
||||
|
||||
.result-panel {
|
||||
margin-top: 18px;
|
||||
padding: 14px 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
font-family: var(--mono);
|
||||
font-size: 12px;
|
||||
color: var(--text);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.result-panel a {
|
||||
color: var(--accent);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.result-panel.error { color: var(--error); border-color: var(--error-dim); }
|
||||
Reference in New Issue
Block a user