feat(andreknie.de): improve accessibility and initial loading

privat/CV/andreknie.de/src/hooks/useContent.js

@@ -1,5 +1,9 @@
+import { useEffect, useState } from 'react'
 import content from 'virtual:content'
 
+const detailCache = new Map()
+const detailModulePromise = import('virtual:content-details')
+
 /**
  * Get all content of a given type, sorted by date descending.
  * @param {'posts'|'kniepunkt'|'podcast'|'talks'|'consulting'|'resources'|'events'} type
@@ -50,8 +54,27 @@ export function useContent(type, options = {}) {
  * Get a single content item by slug.
  */
 export function useContentItem(type, slug) {
-  const items = content[type] || []
-  return items.find(item => item.slug === slug) || null
+  const metadata = (content[type] || []).find(item => item.slug === slug) || null
+  const cacheKey = `${type}:${slug}`
+  const [detailState, setDetailState] = useState(() => ({
+    key: cacheKey,
+    item: detailCache.get(cacheKey) || metadata,
+  }))
+
+  useEffect(() => {
+    let active = true
+    if (!metadata || detailCache.has(cacheKey)) return () => { active = false }
+
+    detailModulePromise.then(module => {
+      const detail = module.default[type]?.find(candidate => candidate.slug === slug) || null
+      if (detail) detailCache.set(cacheKey, detail)
+      if (active) setDetailState({ key: cacheKey, item: detail })
+    })
+
+    return () => { active = false }
+  }, [cacheKey, metadata, slug, type])
+
+  return detailState.key === cacheKey ? detailState.item : metadata
 }
 
 /**