fix: restore content compatibility checks

src/components/ToolkitGrid.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import BrandIcon from './BrandIcon.vue';
 import type { ToolkitGroup } from '@/content/types';
+import { brandIconAvailable } from '@/icons/brand-icons';
 
 defineProps<{ groups: readonly ToolkitGroup[] }>();
 </script>
@@ -11,7 +12,7 @@ defineProps<{ groups: readonly ToolkitGroup[] }>();
       <h3 :id="`${group.title}-heading`">{{ group.title }}</h3>
       <ul class="toolkit-items">
         <li v-for="technology in group.technologies" :key="technology.name" class="toolkit-item" data-testid="toolkit-technology">
-          <BrandIcon :label="technology.name" />
+          <BrandIcon v-if="brandIconAvailable(technology.name)" :label="technology.name" />
           <span>{{ technology.name }}</span>
         </li>
       </ul>

src/icons/brand-icons.ts

@@ -2,19 +2,29 @@
 // named exports. Import its ESM entry directly until upstream ships a valid
 // TypeScript declaration; the selected runtime exports remain tree-shakeable.
 import {
+  siAuthelia,
+  siCpanel,
   siDocker,
+  siDrizzle,
   siDotnet,
   siFlutter,
+  siFastify,
   siGit,
   siGithub,
   siGitlab,
   siJavascript,
   siLinux,
   siNginx,
+  siNextcloud,
   siOpenjdk,
+  siOpencv,
   siPostgresql,
   siProxmox,
   siPython,
+  siPytorch,
+  siSqlite,
+  siTypescript,
+  siUltralytics,
   siVuedotjs,
   siWordpress,
 // @ts-expect-error simple-icons 16.29.0 has no declaration for this ESM file.
@@ -29,16 +39,25 @@ export type BrandIconLabel =
   | 'Linux'
   | 'Docker'
   | 'Nginx'
-  | 'Proxmox / KVM'
+  | 'cPanel'
+  | 'Authelia'
+  | 'Nextcloud'
+  | 'Proxmox/KVM'
   | 'Git'
   | 'Python'
+  | 'TypeScript/JavaScript'
   | 'Vue.js'
-  | 'JavaScript'
-  | 'C# / .NET'
-  | 'Flutter / Dart'
-  | 'PostgreSQL / SQL'
+  | 'Flutter/Dart'
+  | 'Fastify'
+  | 'C#/.NET'
   | 'Headless WordPress'
   | 'Java'
+  | 'PostgreSQL'
+  | 'Drift/SQLite'
+  | 'Drizzle ORM'
+  | 'PyTorch'
+  | 'Ultralytics/YOLO'
+  | 'OpenCV'
   | 'GitHub'
   | 'GitLab'
   | 'LinkedIn';
@@ -95,24 +114,33 @@ const linkedIn: BrandIconDefinition = {
 
 /**
  * One canonical icon per visible toolkit/social label. Composite labels use
- * the most representative official mark (for example, PostgreSQL for SQL).
+ * the most representative official mark (for example, SQLite for Drift/SQLite).
  */
 export const brandIcons: Readonly<Record<BrandIconLabel, BrandIconDefinition>> = {
   Linux: fromSimpleIcons(siLinux),
   Docker: fromSimpleIcons(siDocker),
   Nginx: fromSimpleIcons(siNginx),
-  'Proxmox / KVM': fromSimpleIcons(siProxmox),
+  cPanel: fromSimpleIcons(siCpanel),
+  Authelia: fromSimpleIcons(siAuthelia),
+  Nextcloud: fromSimpleIcons(siNextcloud),
+  'Proxmox/KVM': fromSimpleIcons(siProxmox),
   Git: fromSimpleIcons(siGit),
   Python: fromSimpleIcons(siPython),
+  'TypeScript/JavaScript': fromSimpleIcons(siTypescript),
   'Vue.js': fromSimpleIcons(siVuedotjs),
-  JavaScript: fromSimpleIcons(siJavascript),
-  'C# / .NET': fromSimpleIcons(siDotnet),
-  'Flutter / Dart': fromSimpleIcons(siFlutter),
-  'PostgreSQL / SQL': fromSimpleIcons(siPostgresql),
+  'Flutter/Dart': fromSimpleIcons(siFlutter),
+  Fastify: fromSimpleIcons(siFastify),
+  'C#/.NET': fromSimpleIcons(siDotnet),
   '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),
+  PostgreSQL: fromSimpleIcons(siPostgresql),
+  'Drift/SQLite': fromSimpleIcons(siSqlite),
+  'Drizzle ORM': fromSimpleIcons(siDrizzle),
+  PyTorch: fromSimpleIcons(siPytorch),
+  'Ultralytics/YOLO': fromSimpleIcons(siUltralytics),
+  OpenCV: fromSimpleIcons(siOpencv),
   GitHub: fromSimpleIcons(siGithub),
   GitLab: fromSimpleIcons(siGitlab),
   LinkedIn: linkedIn,
@@ -120,9 +148,14 @@ export const brandIcons: Readonly<Record<BrandIconLabel, BrandIconDefinition>> =
 
 export const brandIconLabels = Object.freeze(Object.keys(brandIcons) as BrandIconLabel[]);
 
+/** Whether a visible toolkit label has a suitable official icon. */
+export function brandIconAvailable(label: string): label is BrandIconLabel {
+  return Object.prototype.hasOwnProperty.call(brandIcons, label);
+}
+
 /** Resolve a validated content label, failing loudly for an unregistered mark. */
 export function brandIconFor(label: string): BrandIconDefinition {
-  if (!Object.prototype.hasOwnProperty.call(brandIcons, label)) {
+  if (!brandIconAvailable(label)) {
     throw new Error(`No official brand icon registered for: ${label}`);
   }
   return brandIcons[label as BrandIconLabel];

src/styles/components.css

@@ -67,6 +67,11 @@
   content: none;
 }
 
+.hero-journey__action--primary:focus-visible {
+  outline: 3px solid var(--focus);
+  outline-offset: 3px;
+}
+
 .hero-journey__action::after {
   content: "→";
   transition: transform var(--transition);

src/styles/layout.css

@@ -79,14 +79,16 @@
   display: grid;
   min-block-size: calc(100svh - var(--site-navigation-block-size));
   align-items: start;
-  padding: clamp(3.5rem, 12vh, 8rem) 4vw 16vh;
+  padding: clamp(2rem, 8vh, 6rem) 4vw 16vh;
   scroll-margin-block-start: var(--site-navigation-block-size);
 }
 
 .hero-journey__content {
+  position: relative;
+  z-index: 1;
   display: grid;
   min-inline-size: 0;
-  inline-size: min(34rem, 39vw);
+  inline-size: min(38rem, 50vw);
   gap: 1rem;
   padding: clamp(1.4rem, 2.2vw, 2.1rem);
   border: 1px solid var(--line);