Add company logos to directory and profile pages

Use case prompt

Build directory listings with company logos, following https://www.logo.dev/docs/use-cases/directory-logos.md

Read that page and inspect this project's stack. Use this project's existing conventions.

Store a domain with each listing, and build the logo URL from that domain in a slot with a fixed size, on a small white well so that every mark looks the same on any surface. When a listing has no domain, show its initials in the well. When a visitor opens a listing, show a company profile with the description and social links, looked up on the server. While the brand is indexing, retry until the retry window ends. The profile always shows the logo and the name, even while the brand is indexing, when there is no brand, and when the request fails.

For API details, read https://www.logo.dev/docs/logo-images/introduction.md and https://www.logo.dev/docs/brand/introduction.md

An integrations marketplace, a job board, or a vendor directory shows the same card thousands of times, and a card with no logo looks incomplete. Put the company’s current logo on each listing and a real description on each profile, so visitors trust what they read. Store one domain for each listing, and a rebrand needs no new file. Your app owns that domain, the look of the cards, and what a listing shows when Logo.dev has no data for a company.

Store a domain with each listing

Each listing needs a name and the company’s domain:

Listing	Save	Show
Domain	Name and domain	The company’s logo, or a fallback image if Logo.dev has no logo
No domain	Name only	The company’s initials in the well
Wrong domain	A corrected domain	Fix the listing. A wrong domain shows the logo of a different company.

If the person who adds a listing has only a company name, let them pick the company with a company autocomplete, and store the domain that they pick.

Render the listing card

Each card is one Logo CDN URL next to the fields that the listing already has. The same card works as a connector tile, a job listing, or a vendor row:

type Listing = {
  name: string;
  domain: string | null;
  detail: string; // a category, a role and location, or a tagline
};

const initials = (name: string) =>
  name
    .split(/\s+/)
    .map((word) => word[0])
    .join("")
    .slice(0, 2)
    .toUpperCase();

export function ListingCard({
  listing,
  token,
}: {
  listing: Listing;
  token: string;
}) {
  const { name, domain, detail } = listing;
  return (
    <div className="flex items-center gap-3 rounded-xl border border-zinc-950/10 bg-white p-4 dark:border-white/10 dark:bg-zinc-900">
      {/* A white well makes transparent dark marks and white-background
          logos look the same on any surface. */}
      <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-white ring-1 ring-inset ring-zinc-950/5">
        {domain ? (
          <img
            alt={`${name} logo`}
            className="h-8 w-8 rounded-md object-contain"
            height={32}
            loading="lazy"
            src={`https://img.logo.dev/${domain}?token=${token}&size=32&retina=true&format=webp`}
            width={32}
          />
        ) : (
          <span aria-hidden className="text-xs font-semibold text-zinc-500">
            {initials(name)}
          </span>
        )}
      </span>
      <div className="min-w-0">
        <div className="truncate text-sm font-semibold">{name}</div>
        <div className="truncate text-xs text-zinc-500">{detail}</div>
      </div>
    </div>
  );
}

import { ListingCard } from "./ListingCard";

const LISTINGS = [
  { name: "Slack", domain: "slack.com", detail: "Messaging" },
  { name: "Stripe", domain: "stripe.com", detail: "Backend Engineer · Dublin" },
  { name: "Notion", domain: "notion.so", detail: "Docs and wikis" },
  { name: "Internal Webhooks", domain: null, detail: "Custom events" },
];

export function Directory() {
  return (
    <div className="grid gap-3 sm:grid-cols-2">
      {LISTINGS.map((listing) => (
        <ListingCard
          key={listing.name}
          listing={listing}
          token="LOGO_DEV_PUBLISHABLE_KEY"
        />
      ))}
    </div>
  );
}

For a muted grid, add the greyscale parameter to each logo URL.

Add a company profile

The Brand API returns the company’s name, description, and social profiles from the same domain. Call it from your server with your secret key:

api/company-profile.ts

type Brand = {
  id: string;
  name: string;
  description: string | null;
  socials: Record<string, string>;
};

export async function GET(request: Request) {
  const domain = new URL(request.url).searchParams
    .get("domain")
    ?.trim()
    .toLowerCase();
  if (!domain) {
    return Response.json({ status: "error" }, { status: 400 });
  }

  const res = await fetch(
    `https://api.logo.dev/v2/brands?domain=${encodeURIComponent(domain)}`,
    { headers: { Authorization: `Bearer ${process.env.LOGO_DEV_SECRET_KEY}` } }
  );

  // Not indexed yet: https://www.logo.dev/docs/brand/introduction#handle-each-status
  if (res.status === 202) {
    // Retry timing and the retry window:
    // https://www.logo.dev/docs/platform/errors#not-found-vs-still-indexing-202
    const body = await res.json().catch(() => null);
    const pending = body?.metadata?.pending;
    const retryAfter = Number(res.headers.get("Retry-After")) || pending?.retry_after_seconds || 30;
    const expiresIn = Number(pending?.expires_in_seconds) || 0;
    return Response.json({ status: "pending", retryAfter, expiresIn }, { status: 202 });
  }
  if (res.status === 404) {
    return Response.json({ status: "not_found" });
  }
  if (!res.ok) {
    // Any other 4xx or 5xx: a problem to log, not a company with no data.
    // Status codes: https://www.logo.dev/docs/platform/errors#logo-api-status-codes
    return Response.json({ status: "error" }, { status: 502 });
  }

  const { data }: { data: Brand } = await res.json();
  // Save data.id with the listing. It stays the same if the domain changes.
  return Response.json({
    status: "ready",
    brandId: data.id,
    name: data.name,
    description: data.description,
    socials: data.socials,
  });
}

Store the result with the listing, and render from it:

Result	Save	Show
Brand found	Brand id, description, socials, lookup time	Logo, name, description, and one link for each network in `socials`
Still indexing	Nothing yet	Logo and name. Show the profile when the brand is ready.
No brand, or request failed	The lookup time	Logo and name

The profile component calls the route, retries while the brand is indexing, and always shows the logo and the name:

import { useEffect, useState } from "react";

type Profile =
  | { status: "loading" }
  | { status: "pending"; retryAfter: number; expiresIn: number }
  | {
      status: "ready";
      description: string | null;
      socials: Record<string, string>;
    }
  | { status: "not_found" }
  | { status: "error" };

export function CompanyProfile({
  company,
  domain,
  token,
}: {
  company: string;
  domain: string;
  token: string;
}) {
  const [profile, setProfile] = useState<Profile>({ status: "loading" });

  useEffect(() => {
    // A new domain starts over. The cleanup stops the previous domain's
    // timer and drops its late responses.
    setProfile({ status: "loading" });
    let cancelled = false;
    let timer: ReturnType<typeof setTimeout>;
    let deadline = 0;

    const lookup = async () => {
      let next: Profile;
      try {
        const res = await fetch(`/api/company-profile?domain=${encodeURIComponent(domain)}`);
        next = (await res.json()) as Profile;
      } catch {
        next = { status: "error" };
      }
      if (cancelled) {
        return;
      }
      // Retry a 202 until the brand is ready or the retry window ends.
      // The window starts at the first 202. Retry timing and the window:
      // https://www.logo.dev/docs/platform/errors#not-found-vs-still-indexing-202
      if (next.status === "pending") {
        deadline ||= Date.now() + next.expiresIn * 1000;
        // Stop when the next attempt would start after the window ends.
        if (Date.now() + next.retryAfter * 1000 >= deadline) {
          setProfile({ status: "error" });
          return;
        }
        timer = setTimeout(lookup, next.retryAfter * 1000);
      }
      setProfile(next);
    };
    lookup();
    return () => {
      cancelled = true;
      clearTimeout(timer);
    };
  }, [domain]);

  const waiting = profile.status === "loading" || profile.status === "pending";

  return (
    <div className="max-w-sm space-y-3 rounded-xl border border-zinc-950/10 bg-white p-5">
      <div className="flex items-center gap-3">
        <img
          alt={`${company} logo`}
          className="h-12 w-12 rounded-lg object-contain"
          height={48}
          src={`https://img.logo.dev/${domain}?token=${token}&size=48&retina=true&format=webp`}
          width={48}
        />
        <div className="text-base font-semibold">{company}</div>
      </div>
      {waiting && (
        <div
          aria-hidden
          className="h-10 animate-pulse rounded-md bg-zinc-100 motion-reduce:animate-none"
        />
      )}
      {profile.status === "ready" && (
        <>
          {profile.description && (
            <div className="text-sm text-zinc-600">{profile.description}</div>
          )}
          <div className="flex flex-wrap gap-3 text-xs font-medium">
            {Object.entries(profile.socials).map(([network, url]) => (
              <a className="capitalize underline" href={url} key={network}>
                {network}
              </a>
            ))}
          </div>
        </>
      )}
    </div>
  );
}

import { CompanyProfile } from "./CompanyProfile";

export function CompanyPanel() {
  return (
    <CompanyProfile
      company="Stripe"
      domain="stripe.com"
      token="LOGO_DEV_PUBLISHABLE_KEY"
    />
  );
}

To refresh a saved profile when the company changes its brand, use update webhooks.

Test the directory

Test a card and a profile for a company with full data (stripe.com), a logo with a white background (notion.so), a transparent dark mark (github.com), a domain with no logo (made-up-startup.io), a listing with no domain, and a domain that Logo.dev has not indexed yet. Make the profile request fail once, and check that the logo and the name stay on screen. Check each card in light and dark mode.

Brand API

Get a brand’s description, socials, colors, and images.

CRM logos

Put a logo and description on every account record.

Start simple

Fintech

CRM and sales

Marketing and onboarding

Marketplaces

Branded content

Add company logos to directory and profile pages

Store a domain with each listing

Render the listing card

Add a company profile

Test the directory

Brand API

CRM logos

​Store a domain with each listing

​Render the listing card

​Add a company profile

​Test the directory

Brand API

CRM logos

Store a domain with each listing

Render the listing card

Add a company profile

Test the directory