Editorial / Blog system

Blog system

Eleven token-driven editorial primitives for the Oak Flats Mufflermen public site — a filterable index grid, cards, a featured hero, the full post layout with rich body slots, author byline, category filters, related row, newsletter CTA, prev/next nav, and a scroll-spy table of contents. Every value is drawn from the central design tokens, so light, dark, and responsive all re-theme from one place.

Production answer

Blog system is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Blog system states
Generative search brief

Blog system: Eleven token-driven editorial primitives for the Oak Flats Mufflermen public site — a filterable index grid, cards, a featured hero, the full post layout with rich body slots, author byline, category filters, related row, newsletter CTA, prev/next nav, and a scroll-spy table of contents. Every value is drawn from the central design tokens, so light, dark, and responsive all re-theme from one place.

Blog shared DNA

Connected editorial primitives

The blog system now advertises its shared contract at the index level: section patterns provide layout, typography sets reading hierarchy, surfaces frame editorial cards, and action DNA handles conversion and sharing.

Editorial surfaces
Cards, heroes, article shells, TOCs, and related rows share one section taxonomy.
Reading rhythm
Typography tokens control headline scale, lede density, body cadence, and captions.
Conversion handoff
Newsletter and share actions inherit Button DNA, focus rings, and feedback states.
Composable editorial surfaces — drop-in for the public blog
Primitive 01

Featured post hero

Large editorial hero for the lead story — image, category chip, headline, dek, expanded byline, and a metallic-paint CTA. Reverses to a stacked layout under 880px.

Featured storyExhaust tech

Mandrel vs crush bends: where your flow actually goes

A crush bend looks fine from the outside and chokes the gas the moment it turns. We cut three identical 2.5-inch sections and put them on the flow bench to settle the workshop argument once and for all.

Read the full story
Primitive 02

Blog card

The atomic unit — cover image with category chip, clamped title and excerpt, and an author byline footer. Vertical for grids, horizontal for list rows. Hover lifts the card and gently scales the cover.

320 — mobile
Horizontal — list row
Primitive 03

Blog index grid

A responsive, filterable card grid. The category filter is a keyboard-operable radio group; selecting a section narrows the grid live. Auto-fills from three columns down to one.

From the workshop

Latest from the bench

Primitive 04

Author byline

Avatar (image or initials monogram), name, dateline, and reading time. Compact for cards; expanded adds the role and bio for post headers.

Primitive 05

Table of contents

Scroll-spy navigation that highlights the section in view via IntersectionObserver. Anchors are keyboard focusable with a visible ring; the active marker extends and turns brand-red.

Primitive 06

Share row

Round share controls with hover tooltips. The copy-link action writes the canonical URL to the clipboard and announces the result to assistive tech.

Primitive 07

Prev / next nav

Two-up post navigation with direction arrows, category, and a clamped title. Falls back to muted end-of-log placeholders when there is no neighbour, and stacks under 640px.

Primitive 08

Related posts row

A three-up row of related cards under an article. Collapses to two, then one column on narrow viewports.

Primitive 09

Blog newsletter CTA

Conversion block built on the central button DNA — metallic-red primary that shifts to metallic-amber on hover. Carbon-fibre weave under the surface, single email field, and status feedback.

Workshop dispatch

Get the next teardown in your inbox

One email a month — what's been on the dyno, what we learned, and any Illawarra trade nights coming up.

One email a month. No spam, unsubscribe in a click.
Primitive 10

Responsive composition

The index grid at three breakpoints — 320 mobile, 768 tablet, and full desktop — proving the grid, filter bar, and cards reflow cleanly across the range.

320 — mobile
320px

Mobile

768 — tablet
768px

Tablet

Primitive 11

Full post layout — sample article

The complete reading experience: header chip + dateline, hero, lede, rich body slots (headings, paragraphs, list, inline media, pull-quote), a sticky table-of-contents aside, then tags and a share row in the footer.

Exhaust tech8 min read

Mandrel vs crush bends: where your flow actually goes

Every workshop has the same argument on a quiet Friday: does a crush bend really cost you anything if the diameter's right? We stopped arguing and put it on the flow bench.

The bench argument

A crush bend pinches the inside radius of the tube as it turns. The nominal diameter is still 2.5 inches on the straights, but at the apex of the bend the cross-section collapses to an oval — and gas does not like turning a sharp corner through a smaller hole. A mandrel bend keeps a round, full-bore section all the way through the curve because a steel ball is drawn through the tube while it forms.

  • Crush bend: cheap, fast, fine on a low-flow mild-steel muffler.
  • Mandrel bend: holds full bore, costs more, earns it under load.
  • Where it matters most: the first three bends off the collector.
The pipe diameter on the box is a promise the crush bend quietly breaks at every corner.
Macca, on the flow bench

How we tested it

We cut three 2.5-inch sections to the same length, each with a single 90-degree bend: one crush, one press-formed, one mandrel. Same flow bench, same depression, same operator. We logged CFM at a fixed pressure drop and ran each section three times to average out the noise.

Media pending
The three samples — crush, press, and mandrel — clamped to the same fixture.

What the numbers said

The mandrel section flowed roughly 14 percent more than the crush bend at the same pressure drop. The press-formed section landed in the middle, closer to the mandrel than most of the crew guessed. On a single bend that gap sounds small — but a typical cat-back has six to nine direction changes, and the losses stack.

The verdict

For a quiet daily that never sees the top of the tacho, a well-made press-formed system is honest value. For anything that breathes hard — a tuned engine, a tow rig under load, a build going on the dyno — mandrel pays for itself in the first three bends. We'll always tell you which one your car actually needs.

Composition

Editorial index composition

Featured hero, filterable index grid, related row, and the newsletter CTA composed into one long-scroll blog landing surface.

Featured storyExhaust tech

Mandrel vs crush bends: where your flow actually goes

A crush bend looks fine from the outside and chokes the gas the moment it turns. We cut three identical 2.5-inch sections and put them on the flow bench to settle the workshop argument once and for all.

Read the full story
Every entry

The full log

Workshop dispatch

Don't miss the next build log

One email a month. No spam, unsubscribe in a click.