@@ -49,8 +48,8 @@ const fallbackInitial = name.charAt(0).toUpperCase()
height={avatarImage.height}
/>
) : (
-
- {fallbackInitial}
+
+ {getFallbackInitials(name)}
)
}
diff --git a/src/components/Avatar/server/@types/index.ts b/src/components/Avatar/server/@types/index.ts
new file mode 100644
index 000000000..72c602d60
--- /dev/null
+++ b/src/components/Avatar/server/@types/index.ts
@@ -0,0 +1,3 @@
+import type { ImageMetadata } from 'astro'
+
+export type AvatarMap = Record
diff --git a/src/components/Avatar/server/__tests__/index.spec.ts b/src/components/Avatar/server/__tests__/index.spec.ts
index 7280684f5..9e1967a37 100644
--- a/src/components/Avatar/server/__tests__/index.spec.ts
+++ b/src/components/Avatar/server/__tests__/index.spec.ts
@@ -42,6 +42,7 @@ describe('AvatarManager', () => {
let getAvatarImage: any
let avatarMap: any
let getAvailableAvatars: any
+ let getFallbackInitials: (_name?: string) => string
beforeEach(async () => {
mockLoadAvatarModules.mockClear()
@@ -54,6 +55,7 @@ describe('AvatarManager', () => {
// Import the module
const module = await import('..')
AvatarManager = module.AvatarManager
+ getFallbackInitials = module.getFallbackInitials
// Get the singleton instance and extract methods for backward compatibility
const instance = AvatarManager.getInstance()
@@ -66,6 +68,26 @@ describe('AvatarManager', () => {
vi.restoreAllMocks()
})
+ describe('getFallbackInitials', () => {
+ it('returns empty string when name is missing', () => {
+ expect(getFallbackInitials()).toBe('')
+ expect(getFallbackInitials(' ')).toBe('')
+ })
+
+ it('returns single initial for single-word names', () => {
+ expect(getFallbackInitials('Kevin')).toBe('K')
+ })
+
+ it('returns first and last initials for multi-word names', () => {
+ expect(getFallbackInitials('Kevin Brown')).toBe('KB')
+ expect(getFallbackInitials(' Jean Luc Picard ')).toBe('JP')
+ })
+
+ it('handles casing and punctuation gracefully', () => {
+ expect(getFallbackInitials("sarah o'conner")).toBe('SO')
+ })
+ })
+
describe('Singleton Pattern', () => {
it('should return the same instance on multiple getInstance calls', () => {
const instance1 = AvatarManager.getInstance()
diff --git a/src/components/Avatar/server/avatarImports.ts b/src/components/Avatar/server/avatarImports.ts
index a99613656..93c9da474 100644
--- a/src/components/Avatar/server/avatarImports.ts
+++ b/src/components/Avatar/server/avatarImports.ts
@@ -1,9 +1,10 @@
-import type { ImageMetadata } from 'astro'
+/**
+ * Kept in a separate file to facilitate mocking in tests
+ */
+import type { AvatarMap } from './@types'
-export type AvatarModuleMap = Record
-
-export const loadAvatarModules = (): AvatarModuleMap =>
- import.meta.glob('../../assets/images/avatars/*.{webp,jpg,png}', {
+export const loadAvatarModules = (): AvatarMap =>
+ import.meta.glob('@assets/images/avatars/*.{webp,jpg,png}', {
eager: true,
import: 'default',
- }) as AvatarModuleMap
+ }) as AvatarMap
diff --git a/src/components/Avatar/server/index.ts b/src/components/Avatar/server/index.ts
index 61c572638..d149816fb 100644
--- a/src/components/Avatar/server/index.ts
+++ b/src/components/Avatar/server/index.ts
@@ -16,10 +16,9 @@
import type { ImageMetadata } from 'astro'
import { isDev } from '@lib/config/environmentServer'
+import type { AvatarMap } from './@types'
import { loadAvatarModules } from './avatarImports'
-type AvatarMap = Record
-
/**
* Normalize a person's name to a filename format
* @param name - The person's name (e.g., "Chris Southam")
@@ -38,6 +37,24 @@ export function normalizeNameToFilename(name: string): string {
.replace(/[^a-z0-9-]/g, '') // Remove non-alphanumeric chars except hyphens
}
+export function getFallbackInitials(name?: string): string {
+ if (!name) return ''
+
+ const normalized = name.trim().replace(/\s+/g, ' ')
+ if (!normalized) return ''
+
+ const parts = normalized.split(' ')
+ const firstInitial = parts[0]?.charAt(0).toUpperCase() ?? ''
+ const lastInitial = parts[parts.length - 1]?.charAt(0).toUpperCase() ?? ''
+
+ if (!firstInitial) return ''
+ if (parts.length === 1 || !lastInitial) {
+ return firstInitial
+ }
+
+ return `${firstInitial}${lastInitial}`
+}
+
class AvatarManagerClass {
private static instance: AvatarManagerClass
private readonly avatarMap: Readonly
diff --git a/src/components/Brand/index.astro b/src/components/Brand/index.astro
index ca4fd2c96..b37e870aa 100644
--- a/src/components/Brand/index.astro
+++ b/src/components/Brand/index.astro
@@ -14,7 +14,7 @@ import WordmarkWebstack from '@components/Brand/WordmarkWebstack.astro'
aria-label="Go To Homepage"
>
-
+
diff --git a/src/components/Callout/index.astro b/src/components/Callout/index.astro
index 101a685da..ad9a4f584 100644
--- a/src/components/Callout/index.astro
+++ b/src/components/Callout/index.astro
@@ -2,7 +2,7 @@
import Icon from '@components/Icon/index.astro'
export interface Props {
- type?: 'warning' | 'action' | 'tip' | 'info' | 'note'
+ type?: 'warning' | 'action' | 'tip' | 'info' | 'note' | 'success' | 'danger'
}
const { type = 'info' } = Astro.props
@@ -14,7 +14,9 @@ const iconMap = {
info: 'info',
tip: 'lightbulb',
note: 'question',
-}
+ success: 'check',
+ danger: 'warning',
+} as const
// Map callout types to their background color CSS custom properties
const backgroundColorMap = {
@@ -23,7 +25,9 @@ const backgroundColorMap = {
info: 'var(--color-info-bg)',
tip: 'var(--color-bg-offset)',
note: 'var(--color-bg-offset)',
-}
+ success: 'var(--color-success-bg)',
+ danger: 'var(--color-danger-bg)',
+} as const
// Map callout types to their border/icon color CSS custom properties
const borderColorMap = {
@@ -32,11 +36,13 @@ const borderColorMap = {
info: 'var(--color-info)',
tip: 'var(--color-text)',
note: 'var(--color-text)',
-}
+ success: 'var(--color-success)',
+ danger: 'var(--color-danger)',
+} as const
-const icon = iconMap[type]
-const backgroundColor = backgroundColorMap[type]
-const borderColor = borderColorMap[type]
+const icon = iconMap[type] ?? iconMap.info
+const backgroundColor = backgroundColorMap[type] ?? backgroundColorMap.info
+const borderColor = borderColorMap[type] ?? borderColorMap.info
---