-
{honors.map((honor) => (
-
- +
- {honor} ))} diff --git a/src/components/ExternalLink.astro b/src/components/ExternalLink.astro index c5e01a50..53ae362d 100644 --- a/src/components/ExternalLink.astro +++ b/src/components/ExternalLink.astro @@ -143,40 +143,37 @@ const variantClasses: Record
- {
- hasValidImage ? (
-
+
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 660b4ed0..5a1b500f 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -48,7 +48,7 @@ const profile = HERO_PROFILE;
{showImage && (
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index 478a186f..56f0de33 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -324,193 +324,5 @@ function isActive(href: string, current: string): boolean {
diff --git a/src/components/ProjectImage.astro b/src/components/ProjectImage.astro
new file mode 100644
index 00000000..3d6e0d0a
--- /dev/null
+++ b/src/components/ProjectImage.astro
@@ -0,0 +1,101 @@
+---
+import type {HTMLAttributes} from 'astro/types';
+import {Image} from 'astro:assets';
+import placeholderImage from '../assets/images/projects/placeholder.svg';
+import {cn} from '../utils/cn';
+
+/**
+ * ProjectImage component for consistent project image rendering.
+ * Handles valid images and placeholder fallback with appropriate sizing per variant.
+ *
+ * @example
+ * ```astro
+ * ---
+ * import ProjectImage from './ProjectImage.astro';
+ * ---
+ *
+ {
+ hasValidImage ? (
+ variant === 'featured' ? (
+
diff --git a/src/components/ProjectImage.test.ts b/src/components/ProjectImage.test.ts
new file mode 100644
index 00000000..8d573265
--- /dev/null
+++ b/src/components/ProjectImage.test.ts
@@ -0,0 +1,159 @@
+import {describe, it, expect} from 'vitest';
+import {experimental_AstroContainer as AstroContainer} from 'astro/container';
+import ProjectImage from './ProjectImage.astro';
+import {mockImageMetadata} from '../../test/fixtures/props/project';
+
+describe('ProjectImage', () => {
+ describe('Featured Variant', () => {
+ it('renders with valid image and hover scale', async () => {
+ const container = await AstroContainer.create();
+ const result = await container.renderToString(ProjectImage, {
+ props: {
+ image: mockImageMetadata,
+ alt: 'Test project screenshot',
+ variant: 'featured',
+ },
+ });
+ expect(result).toContain('aspect-video');
+ expect(result).toContain('overflow-hidden');
+ expect(result).toContain('group-hover:scale-105');
+ expect(result).toContain('alt="Test project screenshot"');
+ });
+
+ it('renders placeholder when image is undefined', async () => {
+ const container = await AstroContainer.create();
+ const result = await container.renderToString(ProjectImage, {
+ props: {
+ image: undefined,
+ alt: 'Placeholder image',
+ variant: 'featured',
+ },
+ });
+ expect(result).toContain('aspect-video');
+ expect(result).toContain('alt="Placeholder image"');
+ // Placeholder should not have hover scale
+ expect(result).not.toContain('group-hover:scale-105');
+ });
+
+ it('has 16:9 aspect ratio container', async () => {
+ const container = await AstroContainer.create();
+ const result = await container.renderToString(ProjectImage, {
+ props: {
+ image: mockImageMetadata,
+ alt: 'Test image',
+ variant: 'featured',
+ },
+ });
+ expect(result).toContain('aspect-video');
+ });
+
+ it('disables hover scale when hoverScale is false', async () => {
+ const container = await AstroContainer.create();
+ const result = await container.renderToString(ProjectImage, {
+ props: {
+ image: mockImageMetadata,
+ alt: 'Test image',
+ variant: 'featured',
+ hoverScale: false,
+ },
+ });
+ expect(result).not.toContain('group-hover:scale-105');
+ });
+ });
+
+ describe('Thumbnail Variant', () => {
+ it('renders with valid image', async () => {
+ const container = await AstroContainer.create();
+ const result = await container.renderToString(ProjectImage, {
+ props: {
+ image: mockImageMetadata,
+ alt: 'Thumbnail image',
+ variant: 'thumbnail',
+ },
+ });
+ expect(result).toContain('w-20');
+ expect(result).toContain('h-20');
+ expect(result).toContain('md:w-24');
+ expect(result).toContain('md:h-24');
+ expect(result).toContain('flex-shrink-0');
+ });
+
+ it('renders placeholder when image is undefined', async () => {
+ const container = await AstroContainer.create();
+ const result = await container.renderToString(ProjectImage, {
+ props: {
+ image: undefined,
+ alt: 'Placeholder thumbnail',
+ variant: 'thumbnail',
+ },
+ });
+ expect(result).toContain('w-20');
+ expect(result).toContain('alt="Placeholder thumbnail"');
+ });
+
+ it('has square dimensions', async () => {
+ const container = await AstroContainer.create();
+ const result = await container.renderToString(ProjectImage, {
+ props: {
+ image: mockImageMetadata,
+ alt: 'Square thumbnail',
+ variant: 'thumbnail',
+ },
+ });
+ expect(result).toContain('w-20');
+ expect(result).toContain('h-20');
+ });
+ });
+
+ describe('Common Behavior', () => {
+ it('applies custom class to container', async () => {
+ const container = await AstroContainer.create();
+ const result = await container.renderToString(ProjectImage, {
+ props: {
+ image: mockImageMetadata,
+ alt: 'Test image',
+ variant: 'featured',
+ class: 'custom-class',
+ },
+ });
+ expect(result).toContain('custom-class');
+ });
+
+ it('has object-cover on images', async () => {
+ const container = await AstroContainer.create();
+ const result = await container.renderToString(ProjectImage, {
+ props: {
+ image: mockImageMetadata,
+ alt: 'Test image',
+ variant: 'featured',
+ },
+ });
+ expect(result).toContain('object-cover');
+ });
+
+ it('uses lazy loading', async () => {
+ const container = await AstroContainer.create();
+ const result = await container.renderToString(ProjectImage, {
+ props: {
+ image: mockImageMetadata,
+ alt: 'Test image',
+ variant: 'featured',
+ },
+ });
+ expect(result).toContain('loading="lazy"');
+ });
+
+ it('has dark mode background classes', async () => {
+ const container = await AstroContainer.create();
+ const result = await container.renderToString(ProjectImage, {
+ props: {
+ image: mockImageMetadata,
+ alt: 'Test image',
+ variant: 'featured',
+ },
+ });
+ expect(result).toContain('bg-surface');
+ expect(result).toContain('dark:bg-surface-dark');
+ });
+ });
+});
diff --git a/src/components/PublicationCard.astro b/src/components/PublicationCard.astro
index 68bd930b..6230c5d1 100644
--- a/src/components/PublicationCard.astro
+++ b/src/components/PublicationCard.astro
@@ -1,6 +1,7 @@
---
import type {HTMLAttributes} from 'astro/types';
import {cardSurfaceContainerClasses} from '../utils/card-styles';
+import {toSlugId} from '../utils/id-utils';
import ExternalLink from './ExternalLink.astro';
/**
@@ -9,6 +10,7 @@ import ExternalLink from './ExternalLink.astro';
*
* Uses utilities:
* - cardSurfaceContainerClasses() for consistent surface-based card styling
+ * - toSlugId() for generating accessible abstract element IDs
*
* @example
* ```astro
@@ -157,7 +159,7 @@ const hasLinks = pdfUrl || codeUrl || doiUrl;
type="button"
data-toggle
aria-expanded="true"
- aria-controls={`abstract-${title.replace(/\s+/g, '-').toLowerCase()}`}
+ aria-controls={toSlugId(title, 'abstract')}
class="abstract-toggle inline-flex items-center gap-1 text-sm text-accent dark:text-accent-dark hover:underline focus-ring rounded px-2 -mx-2 min-h-11"
>