2025 refresh of the landing page in Astro
landing README.md
3.3 kB
Markdown

dummy.cafe #

Landing page for dummy.cafe.

Development #

Package manager is bun.

bun install       # first time
bun dev           # local dev server on http://localhost:4321
bun run build     # production build into ./dist/
bun preview       # preview the built site
bun astro check   # type-check .astro / .ts files

Deploy #

bun run deploy

That runs astro build, copies clutter/* over the built site (see below), and wrangler deploys to Cloudflare Workers. Custom domains dummy.cafe and www.dummy.cafe are bound via wrangler.toml.

Layout #

public/
  assets/
    brand/      site-wide brand assets (og-card, logo, favicon source)
    people/     contact avatars
    projects/   per-project marks (lsky, realms)
  favicon.svg   phase 1E stacked-tag favicon source → see Images below

src/
  components/
    marks/          PdsMark, LskyMark, RealmsMark (card hero art)
    ContactPerson.astro
    Navigation.astro
    ProjectCard.astro
    Wordmark.astro  reusable <dummy.cafe /> text mark
  layouts/Layout.astro
  pages/
    index.astro     hero + projects grid + contact
    pds.astro       PDS-specific content (sub-site)
    404.astro
  styles/global.css Tailwind v4 + @theme design tokens

clutter/          hand-written files served at site root, NOT part of the
                  astro build — the deploy script copies these into dist/
                  after the build. login.json (ATProto OAuth client
                  metadata), countdown.html, etc.

If you add a file that must be served at a stable URL outside Astro's page pipeline (e.g. an OAuth client metadata JSON referenced by external services), put it in clutter/, not public/.

Images #

Two image pipelines worth knowing about:

Favicon — automatic #

Source of truth: public/favicon.svg (phase 1E stacked < / /> in JetBrains Mono Bold, green on dark).

At build time, the astro-favicons integration rasterises it into every size anyone might want: a real multi-size .ico, 16/32/48 PNGs, apple-touch-icon.png, Android Chrome 192/512, Microsoft tile icons, a web manifest, browserconfig.xml, and the full set of <link> / <meta> tags auto-injected into every page's <head>. Brand colors (#0b0f0d tile bg, etc.) are configured in astro.config.mjs.

To change the favicon: edit public/favicon.svg. That's it — bun run build regenerates everything downstream.

OG / share card — manual #

public/assets/brand/og-card.png (1200×630) is the image that Discord / iMessage / Slack / Twitter show when someone pastes a dummy.cafe link. It's referenced from Layout.astro as og:image + twitter:image.

This one is hand-authored in Figma and exported as a PNG. There's also an og-card.svg committed next to it as a design reference, but it isn't what gets served — the PNG is. If you update the card, export a new 1200×630 PNG from Figma and drop it at that path.

Why not auto-generate? rsvg-convert silently ignores font-feature-settings, so JB Mono's /> ligature stays live no matter what the SVG says. Rendering via headless Chrome works, but adding a browser to the build pipeline for one image isn't worth it — Figma export is faster and gives pixel-perfect control.