Demo site of the MFA tool — fictional products, example.com links. How it works

How this demo works

This site is built with the console's MFA tool. Nothing on it was hand-coded per page: every shortlist is data, and one template draws them all.

The chain

  1. Articles — one reviewed product each: title, score, badge, "Ideal for", a cover and a rich-text body. They hold no links.
  2. MFAs — an ordered pick of articles with a title, intro, byline, cover and disclosure.
  3. Links — set on the MFA: one per article, or a shared link pool handed out round robin, at random or by weight, with an override per position.
  4. Publishing — the MFA goes to a SITE whose template has a content-route page; its URL is the SITE, the mount and the MFA's slug.
  5. Rendering — the mfa-content component draws the MFA on its URL and the list of published MFAs on the bare mount; mfa-content-feed adds the endless "More shortlists" feed under each one.

On this site

  • Air purifiers takes its buttons from a round-robin pool, with the first pick's own link overriding it.
  • Coffee at home has one link per article.
  • Camping kit uses a weighted pool: the first offer gets three picks in four.

Starting your own

The template behind this site is mfa-demo. Its look lives in src/assets/css/brand.css — the --ad-* tokens the components read, plus the header and footer. Copy it, change the tokens and the chrome, create a SITE from it and publish MFAs to it from the MFA sheet.

See all the shortlists