Maintaining car brand assets across multiple websites

File names

logo_bmw_final2.png in one repository, bmw-badge.svg in another. Nobody is sure which one is current.

/img/bmw

Sizes and padding

One site trimmed the whitespace, another did not. Badges in a shared table sit at different visual weights.

size=sm&aspect=square

Rebrands

A manufacturer refreshes its mark. The marketplace updates; the fleet tool ships the old badge for another year.

Cache-Control: max-age=86400

Missing variants

The consumer site has the wordmark. The internal tool has a badge someone screenshotted in 2021.

type=full|badge|wordmark

Package versions

The logo package is bumped in two of three apps. The third is pinned to a release from last spring.

brandLogoUrl()

1. 01

   Publish one URL helper

   The helper is the whole package. No binaries, no release when a logo changes, because the package never contained the logo. Each product installs it and passes the slug it already stores.

   export type LogoType = "full" | "badge" | "wordmark";
   export type LogoSize = "xs" | "sm" | "md" | "lg" | "xl";
   
   export interface LogoOptions {
     type?: LogoType;
     size?: LogoSize;
     format?: "png" | "webp";
     aspect?: "square" | "height";
   }
   
   export function brandLogoUrl(slug: string, options: LogoOptions = {}) {
     const { type = "badge", size = "sm", format, aspect } = options;
     const params = new URLSearchParams({
       type,
       size,
       token: process.env.NEXT_PUBLIC_MOTOMARKS_KEY!,
     });
     if (format) params.set("format", format);
     if (aspect) params.set("aspect", aspect);
     return `https://motomarks.io/img/${slug}?${params}`;
   }

2. 02

   Let each site choose a variant, not a file

   The consumer site wants the full logo at hero size. The marketplace wants a badge in a listing row. The fleet tool wants a 16px wordmark in a table. They agree on the slug and disagree on parameters, which is the right place to disagree.

   // dealer-group-web
   <img src={brandLogoUrl(slug, { type: "full", size: "lg" })} alt={`${name} logo`} />
   
   // listings-frontend
   <img src={brandLogoUrl(slug, { type: "badge", size: "sm" })} alt={`${name} badge`} />
   
   // fleet-ops-dashboard
   <img
     src={brandLogoUrl(slug, { type: "wordmark", size: "xs", aspect: "height" })}
     alt={`${name} wordmark`}
   />

3. 03

   Give each product a view of its own usage

   The usage dashboard lists requests by domain. Browser requests are attributed from their Referer automatically. Server-side calls carry none, so name the product with the optional header to break them out.

   Create a separate key per product when you want to roll one without touching the others.

   GET https://api.motomarks.io/brands/bmw
   Authorization: Bearer sk_live_...
   X-Motomarks-Referer: fleet.internal.example

4. 04

   Let the update arrive through the cache

   When a published logo changes, every site picks it up on its next uncached request. Browsers hold the previous version for at most 24 hours. The public changelog lists brand additions, logo updates, aliases, and metadata changes, so the rebrand ticket becomes a line you read rather than a file you chase.

   HTTP/1.1 200 OK
   Content-Type: image/webp
   Cache-Control: public, max-age=86400, immutable

Questions before you integrate