l-add-brand

Add a new brand to the Takazudo Modular website. Use when: (1) User wants to add a new brand, (2) User says 'add brand' or 'new brand'. Guides through gathering brand info, generating Japanese content...

Add New Brand to Website

Guide the user through adding a new brand to the Takazudo Modular website. This is a conversational process - ask questions one by one.

Information Gathering (One Question at a Time)

Brand Slug - URL-friendly identifier (lowercase, hyphen-separated, e.g., 4ms, addac, weston)
Website URL - Official brand website. Fetch and extract: company name, country, description, notable products, social links
Logo SVG File - Path to SVG file, or note it needs to be added later to src/assets/svgs/brands/
Position - Where on brands page (e.g., after mordax, at the end)

Content Generation

After fetching the website, generate and show for user approval:

Short description (~40-60 chars): Key characteristic. E.g., 1996年創業、ハードウェアとソフトウェアを融合した革新的なモジュールを展開。
Long description (~150-200 chars): Background, approach, notable products
Brand guide (2 paragraphs): Company intro + products/philosophy

Wait for user confirmation before proceeding.

Files to Update

A. `src/components/svg/index.ts`

Add logo export (alphabetically):

export { default as BrandFourMs } from '../../assets/svgs/brands/fourms.svg';

B. `src/components/svg/brand-logo-registry.ts`

Import the component
Add to brandLogoRegistry (slug as key)
Add to brandLogoByComponentName (component name as key)

C. `src/data/brands.mjs`

Add brand entry at specified position:

{
  slug: '4ms',
  name: '4ms Company',
  listToBrands: true,
  country: 'US',
  svg: { component: 'BrandFourMs', className: 'w-5/6' },
  ogImg: '/images/p/og-brand-4ms/ogp.jpg',
  description: 'SHORT_DESCRIPTION',
  descriptionMore: 'LONG_DESCRIPTION',
}

D. `src/data/brand-guide-content.ts`

Add brand guide (alphabetically by slug):

'4ms': {
  slug: '4ms',
  title: '4ms Companyについて',
  logoClassName: 'w-5/6',
  paragraphs: ['PARAGRAPH_1', 'PARAGRAPH_2'],
  links: [
    { href: 'https://...', text: 'Website' },
    { href: 'https://www.instagram.com/...', text: 'Instagram' },
  ],
}

E. `src/pages/brands.tsx`

Add import and mapping entry for the logo component.

OG Image Generation

pnpm generate-brand-og {brand-slug}

Then remind user to run pnpm convimgs later.

Verification

Run pnpm check to verify no errors.

Notes

Always use Japanese for descriptions and content
Country codes: US, UK, Japan, China, Spain, etc.
Logo className: Usually 'w-5/6' or 'w-full', add 'bg-white' for dark logos
Component naming: If slug starts with number, use word form (4ms -> FourMs)
If slug starts with number, rename SVG file accordingly (e.g., 4ms.svg -> fourms.svg)