ContentTaxonomies

Renders technology terms (with icons) and subject terms for content pages. Shared by Blog, Guide, LiveStream, and Kickstart. Single wrapper with CSLP for visual editing in CMS.

Props

Prop	Type	Required	Default	Description
`technologyTerms`	`string[]`	Yes	-	Technology term UIDs (e.g. "react", "next")
`subjectTerms`	`string[]`	Yes	-	Subject term UIDs
`cslp`	`CSLPFieldMapping`	No	-	CSLP mapping for taxonomies field

Usage

1import ContentTaxonomies from '@/components/molecules/ContentTaxonomies';
2import { extractContentTaxonomies } from '@/lib/utils';
3
4const { technologyTerms, subjectTerms } = extractContentTaxonomies(entry.taxonomies);
5
6<ContentTaxonomies
7  technologyTerms={technologyTerms}
8  subjectTerms={subjectTerms}
9  cslp={entry.$?.taxonomies}
10/>

import ContentTaxonomies from '@/components/molecules/ContentTaxonomies';
import { extractContentTaxonomies } from '@/lib/utils';

const { technologyTerms, subjectTerms } = extractContentTaxonomies(entry.taxonomies);

<ContentTaxonomies
  technologyTerms={technologyTerms}
  subjectTerms={subjectTerms}
  cslp={entry.$?.taxonomies}
/>

Features

Technology with icons: Uses TechnologyTags with icons from /technologies/ (Tag design system)
Subject tags: Uses TaxonomyTags with Tag design system for subject taxonomy terms
Separator: Bullet separator between technology and subjects
Single CSLP wrapper: One editable region for taxonomies in CMS
Interactive links: Both link to search (technology and subjects filters)

Notes

Returns null if both term arrays are empty
Uses className="contents" on wrapper so layout flows with parent flex
Data typically from extractContentTaxonomies(taxonomies) in lib/utils