feat: add infrastructure flow and official iconography

tests/unit/brand-icons.test.ts

@@ -0,0 +1,47 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import BrandIcon from '@/components/BrandIcon.vue';
+import content from '@/../content/public/portfolio-content.json';
+import { brandIconFor, brandIconLabels } from '@/icons/brand-icons';
+
+const toolkitLabels = content.toolkit.flatMap((group) => group.technologies.map((technology) => technology.name));
+const socialLabels = content.contact.social.map((link) => link.service);
+
+describe('official brand icon registry', () => {
+  it('resolves every toolkit technology in validated portfolio content', () => {
+    for (const label of toolkitLabels) {
+      const icon = brandIconFor(label);
+      expect(icon.title).toBeTruthy();
+      expect(icon.hex).toMatch(/^[0-9A-F]{6}$/u);
+      expect(icon.path.length).toBeGreaterThan(20);
+      expect(icon.source).toMatch(/^https:\/\//u);
+      expect(icon.license).toBeTruthy();
+    }
+  });
+
+  it('resolves every configured social service mark', () => {
+    for (const label of socialLabels) {
+      expect(brandIconFor(label)).toMatchObject({ title: label });
+    }
+  });
+
+  it('keeps the registry closed over all content-facing labels', () => {
+    expect(brandIconLabels).toEqual([
+      'Linux', 'Docker', 'Nginx', 'Proxmox / KVM', 'Git', 'Python', 'Vue.js',
+      'JavaScript', 'C# / .NET', 'Flutter / Dart', 'PostgreSQL / SQL',
+      'Headless WordPress', 'Java', 'GitHub', 'GitLab', 'LinkedIn',
+    ]);
+    expect(() => brandIconFor('Unlisted technology')).toThrow(/No official brand icon/u);
+  });
+
+  it('renders a decorative, non-focusable SVG while leaving the visible label to its caller', () => {
+    const wrapper = mount(BrandIcon, { props: { label: 'Linux' } });
+    const svg = wrapper.get('svg');
+
+    expect(svg.attributes('aria-hidden')).toBe('true');
+    expect(svg.attributes('focusable')).toBe('false');
+    expect(svg.attributes('data-brand-icon')).toBe('Linux');
+    expect(svg.get('path').attributes('d')).toBe(brandIconFor('Linux').path);
+    expect(wrapper.text()).toBe('');
+  });
+});

tests/unit/components.test.ts

@@ -13,6 +13,8 @@ const infrastructure: InfrastructureCaseStudy = {
   bands: [
     { id: 'ingress-tls', title: 'Ingress and TLS', summary: 'Managed encrypted ingress.' },
     { id: 'identity-access', title: 'Identity and access', summary: 'Protected service access.' },
+    { id: 'service-lifecycle', title: 'Service lifecycle', summary: 'Managed container lifecycle.' },
+    { id: 'operations', title: 'Operations', summary: 'Routine maintenance and investigation.' },
   ],
 };
 
@@ -40,16 +42,29 @@ const publicProject: PublicProject = {
 describe('semantic section components', () => {
   it('gives the infrastructure graphic an accessible name, description, caption, and visible text equivalent', () => {
     const wrapper = mount(InfrastructureDiagram, { props: { infrastructure } });
-    const svg = wrapper.get('svg');
+    const flow = wrapper.get('[data-testid="infrastructure-flow"]');
 
-    expect(svg.attributes('role')).toBe('img');
-    expect(svg.attributes('aria-labelledby')).toContain('safe-infrastructure-diagram-title');
-    expect(svg.attributes('aria-describedby')).toContain('safe-infrastructure-diagram-description');
+    expect(flow.attributes('role')).toBe('img');
+    expect(flow.attributes('aria-labelledby')).toBe('safe-infrastructure-diagram-title');
+    expect(flow.attributes('aria-describedby')).toBe('safe-infrastructure-diagram-description');
     expect(wrapper.get('figcaption').text()).toContain('Secure self-hosted platform and lifecycle');
     expect(wrapper.get('[data-testid="infrastructure-text-equivalent"]').text()).toContain('Ingress and TLS');
     expect(wrapper.get('[data-testid="infrastructure-text-equivalent"]').text()).toContain('Identity and access');
   });
 
+  it('renders the real infrastructure route with explicit trust boundaries and operational support', () => {
+    const wrapper = mount(InfrastructureDiagram, { props: { infrastructure } });
+    const flow = wrapper.get('[data-testid="infrastructure-flow"]');
+
+    expect(flow.findAll('[data-infrastructure-node]').map((node) => node.attributes('data-infrastructure-node'))).toEqual([
+      'visitor', 'nginx-tls', 'authentication', 'containerized-services', 'operations',
+    ]);
+    expect(flow.findAll('[data-trust-boundary]').map((boundary) => boundary.text())).toEqual([
+      'Public edge', 'Access boundary', 'Service boundary',
+    ]);
+    expect(flow.text()).toContain('fail2ban guard');
+  });
+
   it('does not turn private project content into a link container', () => {
     const wrapper = mount(ProjectCaseStudy, { props: { project: privateProject, priority: 'primary' } });