Data: Provider Name Mapping
Relevant source files
The following files were used as context for generating this wiki page:
The Provider Name Mapping system provides a mechanism to display custom, user-friendly names for certification providers. Its primary purpose is to correct or reformat provider names that, in their raw form, might not be ideal for display in the user interface. This is particularly useful when the standard conversion from the data source's format does not yield the desired result, such as for acronyms or specially formatted names like (ISC)2.
This system consists of a simple key-value map and is consumed by UI components responsible for rendering certification details. It ensures a consistent and polished presentation of provider information across the platform, decoupling display logic from the raw data source.
Sources: src/lib/provider-custom-names-mapping.ts:1-7
Core Implementation
The core of this feature is the providerCustomNamesMapping constant, a simple object that serves as a lookup table.
Sources: src/lib/provider-custom-names-mapping.ts
providerCustomNamesMapping Constant
This constant is defined in src/lib/provider-custom-names-mapping.ts. It is a plain JavaScript object where:
- Keys are the raw provider names as they appear in the certification data.
- Values are the custom, formatted strings that should be displayed in the UI.
// src/lib/provider-custom-names-mapping.ts:8-10
export const providerCustomNamesMapping = {
"Isc2": "(ISC)2",
} as const;
The use of as const ensures that the object is immutable, preventing accidental modifications at runtime.
Current Mappings
The table below lists all currently defined provider name mappings.
| Raw Provider Name (Key) | Custom Display Name (Value) |
|---|---|
Isc2 | (ISC)2 |
Sources: src/lib/provider-custom-names-mapping.ts:9-9
Data Structures
The mapping system operates on the provider field of the CertificationMetadata object.
CertificationMetadata Interface
This interface defines the shape of the data for each certification. The provider property is a string that is used as the key to look up a custom name in the providerCustomNamesMapping object.
// src/types/certification-metadata.ts:1-14
export interface CertificationMetadata {
image: string;
provider: string;
title: string;
acronym: string;
last_updated_at: Date;
reference: string;
aliases?: string[] | undefined;
career_paths: string[];
price: string;
currency: string;
slug: string;
}
Sources: src/types/certification-metadata.ts:1-14
Content Schema
The ultimate source of the provider name is the frontmatter of the Markdown files for each certification. The astro:content collection configuration in src/content.config.ts defines the schema, but it does not define the provider field directly. The provider name is derived from the directory structure where certification content files are stored (e.g., src/content/certifications/<provider>/...).
Sources: src/content.config.ts:6-19, src/pages/database/data.json.ts
Usage in UI Components
The mapping is applied within the ColCertification React component, which is responsible for rendering the main details of a certification in a table row.
Sources: src/components/astro/database/records-table/col-certification.tsx
ColCertification Component
This component imports providerCustomNamesMapping and uses a useMemo hook to determine the correct provider name to display. If the certification.provider string exists as a key in the mapping, its corresponding value is used. Otherwise, the original certification.provider string is used as a fallback.
This logic ensures that only providers needing special formatting are affected, while all others are displayed as-is.
The following diagram illustrates the logic within the ColCertification component.
Here is the relevant code snippet:
// src/components/astro/database/records-table/col-certification.tsx:12-16
export const ColCertification: FC<CertificationMetadata> = (certification) => {
const provider = useMemo(() => {
return providerCustomNamesMapping[certification.provider as keyof typeof providerCustomNamesMapping] ||
certification.provider;
}, [ certification.provider ]);
// ...
End-to-End Data Flow
The provider name mapping is the final step in a data flow that starts with content files and ends with a rendered UI component.
The diagram below shows the complete flow from data source to the final display.
- Data Source: Certification data is stored in Markdown files. The provider is inferred from the file's directory path.
Sources: src/content.config.ts:7 - Data Processing: The
getCertificationMetadatafunction reads these files and constructs aCertificationMetadataobject for each. This collection is exposed via a JSON API endpoint.
Sources: src/pages/database/data.json.ts - UI Layer:
- The
ReactiveDatatablecomponent fetches the certification data from the JSON endpoint.
Sources: src/components/astro/database/reactive-datatable.tsx:190-193 - It maps over the data and renders each certification using child components, including
ColCertification.
Sources: src/components/astro/database/reactive-datatable.tsx:304-312 - The
ColCertificationcomponent performs the name lookup usingproviderCustomNamesMapping.
Sources: src/components/astro/database/records-table/col-certification.tsx:13-16
- The
- Rendered Output: The final, correctly formatted provider name is rendered in the HTML table.
Conclusion
The Provider Name Mapping feature is a simple yet crucial utility for maintaining data presentation quality. By creating a small, dedicated mapping file, the system decouples the raw data representation from its presentation in the UI. This allows for specific formatting needs to be met without altering the underlying data sources or adding complex logic to the rendering components, ensuring that provider names are always displayed in a clean, professional, and user-friendly manner.