feat: add infrastructure flow and official iconography
This commit is contained in:
129
src/icons/brand-icons.ts
Normal file
129
src/icons/brand-icons.ts
Normal file
@@ -0,0 +1,129 @@
|
||||
// The pinned package's generated declaration currently mixes `export =` with
|
||||
// named exports. Import its ESM entry directly until upstream ships a valid
|
||||
// TypeScript declaration; the selected runtime exports remain tree-shakeable.
|
||||
import {
|
||||
siDocker,
|
||||
siDotnet,
|
||||
siFlutter,
|
||||
siGit,
|
||||
siGithub,
|
||||
siGitlab,
|
||||
siJavascript,
|
||||
siLinux,
|
||||
siNginx,
|
||||
siOpenjdk,
|
||||
siPostgresql,
|
||||
siProxmox,
|
||||
siPython,
|
||||
siVuedotjs,
|
||||
siWordpress,
|
||||
// @ts-expect-error simple-icons 16.29.0 has no declaration for this ESM file.
|
||||
} from '../../node_modules/simple-icons/index.mjs';
|
||||
|
||||
/**
|
||||
* Labels emitted by the validated portfolio content and social-link schema.
|
||||
* Keep this union exhaustive when a new public technology or social service is
|
||||
* introduced so an icon cannot silently regress to a placeholder.
|
||||
*/
|
||||
export type BrandIconLabel =
|
||||
| 'Linux'
|
||||
| 'Docker'
|
||||
| 'Nginx'
|
||||
| 'Proxmox / KVM'
|
||||
| 'Git'
|
||||
| 'Python'
|
||||
| 'Vue.js'
|
||||
| 'JavaScript'
|
||||
| 'C# / .NET'
|
||||
| 'Flutter / Dart'
|
||||
| 'PostgreSQL / SQL'
|
||||
| 'Headless WordPress'
|
||||
| 'Java'
|
||||
| 'GitHub'
|
||||
| 'GitLab'
|
||||
| 'LinkedIn';
|
||||
|
||||
export interface BrandIconDefinition {
|
||||
/** The display title of the canonical brand asset. */
|
||||
title: string;
|
||||
/** The brand color supplied by the source asset, without a leading '#'. */
|
||||
hex: string;
|
||||
/** A viewBox-compatible SVG path from the source asset. */
|
||||
path: string;
|
||||
/** Coordinate space used by the canonical source path. */
|
||||
viewBox: string;
|
||||
/** Canonical source/project URL for provenance and review. */
|
||||
source: string;
|
||||
/** SPDX license identifier or source-specific brand terms. */
|
||||
license: string;
|
||||
}
|
||||
|
||||
/** Structural subset needed from the package so no package-internal type leaks into callers. */
|
||||
type SimpleIconWithLicense = {
|
||||
title: string;
|
||||
hex: string;
|
||||
path: string;
|
||||
source: string;
|
||||
license?: { type: string; url?: string };
|
||||
};
|
||||
|
||||
const fromSimpleIcons = (icon: SimpleIconWithLicense): BrandIconDefinition => ({
|
||||
title: icon.title,
|
||||
hex: icon.hex,
|
||||
path: icon.path,
|
||||
viewBox: '0 0 24 24',
|
||||
source: icon.source,
|
||||
// Simple Icons distributes its icon data under CC0-1.0. Individual entries
|
||||
// may carry a more specific license, which is retained when present.
|
||||
license: icon.license?.type ?? 'CC0-1.0',
|
||||
});
|
||||
|
||||
/*
|
||||
* Simple Icons 16.29.0 currently omits LinkedIn from its named exports. This
|
||||
* is the regular-weight LinkedIn mark from @phosphor-icons/vue 2.2.1, whose
|
||||
* MIT notice is already recorded in docs/third-party-notices.md. Keeping the
|
||||
* path local avoids a runtime dependency on an unpinned remote asset.
|
||||
*/
|
||||
const linkedIn: BrandIconDefinition = {
|
||||
title: 'LinkedIn',
|
||||
hex: '0A66C2',
|
||||
path: 'M216,24H40A16,16,0,0,0,24,40V216a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V40A16,16,0,0,0,216,24Zm0,192H40V40H216V216ZM96,112v64a8,8,0,0,1-16,0V112a8,8,0,0,1,16,0Zm88,28v36a8,8,0,0,1-16,0V140a20,20,0,0,0-40,0v36a8,8,0,0,1-16,0V112a8,8,0,0,1,15.79-1.78A36,36,0,0,1,184,140ZM100,84A12,12,0,1,1,88,72,12,12,0,0,1,100,84Z',
|
||||
viewBox: '0 0 256 256',
|
||||
source: 'https://github.com/phosphor-icons/core/blob/main/assets/regular/linkedin-logo.svg',
|
||||
license: 'MIT',
|
||||
};
|
||||
|
||||
/**
|
||||
* One canonical icon per visible toolkit/social label. Composite labels use
|
||||
* the most representative official mark (for example, PostgreSQL for SQL).
|
||||
*/
|
||||
export const brandIcons: Readonly<Record<BrandIconLabel, BrandIconDefinition>> = {
|
||||
Linux: fromSimpleIcons(siLinux),
|
||||
Docker: fromSimpleIcons(siDocker),
|
||||
Nginx: fromSimpleIcons(siNginx),
|
||||
'Proxmox / KVM': fromSimpleIcons(siProxmox),
|
||||
Git: fromSimpleIcons(siGit),
|
||||
Python: fromSimpleIcons(siPython),
|
||||
'Vue.js': fromSimpleIcons(siVuedotjs),
|
||||
JavaScript: fromSimpleIcons(siJavascript),
|
||||
'C# / .NET': fromSimpleIcons(siDotnet),
|
||||
'Flutter / Dart': fromSimpleIcons(siFlutter),
|
||||
'PostgreSQL / SQL': fromSimpleIcons(siPostgresql),
|
||||
'Headless WordPress': fromSimpleIcons(siWordpress),
|
||||
// Simple Icons does not currently publish a Java export; OpenJDK is the
|
||||
// official open Java platform mark and is the closest canonical asset.
|
||||
Java: fromSimpleIcons(siOpenjdk),
|
||||
GitHub: fromSimpleIcons(siGithub),
|
||||
GitLab: fromSimpleIcons(siGitlab),
|
||||
LinkedIn: linkedIn,
|
||||
} as const;
|
||||
|
||||
export const brandIconLabels = Object.freeze(Object.keys(brandIcons) as BrandIconLabel[]);
|
||||
|
||||
/** Resolve a validated content label, failing loudly for an unregistered mark. */
|
||||
export function brandIconFor(label: string): BrandIconDefinition {
|
||||
if (!Object.prototype.hasOwnProperty.call(brandIcons, label)) {
|
||||
throw new Error(`No official brand icon registered for: ${label}`);
|
||||
}
|
||||
return brandIcons[label as BrandIconLabel];
|
||||
}
|
||||
Reference in New Issue
Block a user