# made-with — shared provenance-footer primitive

The "Built with — how this page ships" provenance footer, rendered from a
placeholder so the wording, the deploy line and the favicon-control-plane link
all live in **one file**. Drop a placeholder, import the script, and the footer
renders — change it once and every page across the portfolio updates. This is
the pattern that ends hand-copied-footer drift. Hosted at
`https://assets.gf.cx/made-with/`.

The footer markup, wording and styling are the favicon control plane applied to
provenance: a single source of truth, imported everywhere.

## Import

```html
<script src="https://assets.gf.cx/made-with/made-with.js" defer></script>
```

The script self-injects its CSS — no separate stylesheet to load.

## The placeholder

Drop a placeholder where the footer should render. The script replaces it with a
collapsible `<details class="made-with">` footer at load:

```html
<div data-made-with data-path="web-assets/cards" data-project="assets-gf-cx"></div>
```

### Data attributes

| attribute | default | purpose |
|---|---|---|
| `data-repo` | `xlab-nyc/toolkit` | repo slug the page is authored in |
| `data-path` | `""` (repo root) | path within the repo (e.g. `web-assets/cards`) |
| `data-surface` | `assets.gf.cx` | the served domain the deploy line points at |
| `data-project` | `""` (generic deploy line) | CF Pages project name; omit for a generic deploy line |

All attributes are optional — a bare `<div data-made-with></div>` renders a
generic footer for the toolkit repo root served at assets.gf.cx.

## Why a pattern, not a copy

Hand-copying the footer into every page is drift: the deploy line, the wording,
the favicon link all fork the moment one page is edited and the others aren't.
Hosting it here means a single edit to `made-with.js` updates the whole portfolio
on the next CDN refresh — change once, propagate everywhere.

## No-JS note

With JavaScript off, no footer renders. Provenance is **non-critical** — keep
load-bearing content out of the footer. The placeholder is inert markup, so a
no-JS render simply omits the footer rather than showing a broken fragment.

## Cross-references

- **Favicon control plane** (`assets.gf.cx/icons/favicon/manifest.json`) — the
  sibling pattern: a single source of truth for the favicon, applied + audited
  by `~/bin/gfcx_favicon.py`. `made-with` is the same idea for the footer.
- `cards.css` / `status-pill.css` — sibling primitives; same
  CSS-custom-property theming convention (the footer reads `--ink-soft`,
  `--line-strong`, `--mono` with hex/built-in fallbacks).
- In use: every `assets.gf.cx` primitive page, and the subdomain-scaffold
  (`gfcx_subdomain_new.py` v0.1.1) emits the placeholder by default.

## Version

v0.1.0 · 2026-06-20 · first shipped at https://assets.gf.cx/made-with/