FHIR, API, datamodel

2025-11-21 22:32:29 +01:00
parent 5f7ef0801d
commit d5c6cf208b
39 changed files with 17974 additions and 1004 deletions
--- a/app/(marketing)/documentatie/components/mdx-components.tsx
+++ b/app/(marketing)/documentatie/components/mdx-components.tsx
@@ -8,28 +8,69 @@ import Image from 'next/image'
 import Link from 'next/link'
 import type { MDXComponents } from 'mdx/types'

+/**
+ * Generate slug from heading text for anchor links
+ */
+function slugify(text: string): string {
+  return text
+    .toString()
+    .toLowerCase()
+    .trim()
+    .replace(/\s+/g, '-')
+    .replace(/[^\w\-]+/g, '')
+    .replace(/\-\-+/g, '-')
+}
+
+/**
+ * Extract text content from React children
+ */
+function getTextContent(children: React.ReactNode): string {
+  if (typeof children === 'string') return children
+  if (Array.isArray(children)) return children.map(getTextContent).join('')
+  if (children && typeof children === 'object' && 'props' in children) {
+    return getTextContent(children.props.children)
+  }
+  return ''
+}
+
 export const mdxComponents: MDXComponents = {
  // Headings with anchor links
-  h1: ({ children, ...props }) => (
-    <h1 className="text-4xl font-bold text-slate-900 mt-8 mb-4" {...props}>
-      {children}
-    </h1>
-  ),
-  h2: ({ children, ...props }) => (
-    <h2 className="text-3xl font-bold text-slate-900 mt-8 mb-4 border-b border-slate-200 pb-2" {...props}>
-      {children}
-    </h2>
-  ),
-  h3: ({ children, ...props }) => (
-    <h3 className="text-2xl font-semibold text-slate-900 mt-6 mb-3" {...props}>
-      {children}
-    </h3>
-  ),
-  h4: ({ children, ...props }) => (
-    <h4 className="text-xl font-semibold text-slate-900 mt-4 mb-2" {...props}>
-      {children}
-    </h4>
-  ),
+  h1: ({ children, ...props }) => {
+    const text = getTextContent(children)
+    const id = slugify(text)
+    return (
+      <h1 id={id} className="text-4xl font-bold text-slate-900 mt-8 mb-4 scroll-mt-20" {...props}>
+        {children}
+      </h1>
+    )
+  },
+  h2: ({ children, ...props }) => {
+    const text = getTextContent(children)
+    const id = slugify(text)
+    return (
+      <h2 id={id} className="text-3xl font-bold text-slate-900 mt-8 mb-4 border-b border-slate-200 pb-2 scroll-mt-20" {...props}>
+        {children}
+      </h2>
+    )
+  },
+  h3: ({ children, ...props }) => {
+    const text = getTextContent(children)
+    const id = slugify(text)
+    return (
+      <h3 id={id} className="text-2xl font-semibold text-slate-900 mt-6 mb-3 scroll-mt-20" {...props}>
+        {children}
+      </h3>
+    )
+  },
+  h4: ({ children, ...props }) => {
+    const text = getTextContent(children)
+    const id = slugify(text)
+    return (
+      <h4 id={id} className="text-xl font-semibold text-slate-900 mt-4 mb-2 scroll-mt-20" {...props}>
+        {children}
+      </h4>
+    )
+  },

  // Paragraphs
  p: ({ children, ...props }) => (
@@ -67,7 +108,7 @@ export const mdxComponents: MDXComponents = {
  ),

  // Images
-  img: ({ src, alt, ...props }) => {
+  img: ({ src, alt, width, height, ...props }) => {
    if (!src) return null

    return (
@@ -76,8 +117,8 @@ export const mdxComponents: MDXComponents = {
          <Image
            src={src}
            alt={alt || ''}
-            width={1200}
-            height={675}
+            width={Number(width) || 1200}
+            height={Number(height) || 675}
            className="w-full h-auto"
            {...props}
          />
--- a/app/(marketing)/documentatie/components/release-sidebar-wrapper.tsx
+++ b/app/(marketing)/documentatie/components/release-sidebar-wrapper.tsx
@@ -7,7 +7,7 @@
 */

 import { ReleaseSidebar } from './release-sidebar'
-import type { ReleaseNote, GroupMetadata, CategoryMetadata } from '@/lib/mdx/documentatie'
+import type { ReleaseNote, GroupMetadata, CategoryMetadata, TocItem } from '@/lib/mdx/documentatie'

 interface ReleaseSidebarWrapperProps {
  releases: ReleaseNote[]
@@ -15,6 +15,7 @@ interface ReleaseSidebarWrapperProps {
    groups: GroupMetadata[]
    categories: CategoryMetadata[]
  }
+  tocMap: Record<string, TocItem[]>
 }

 export default function ReleaseSidebarWrapper(props: ReleaseSidebarWrapperProps) {
--- a/app/(marketing)/documentatie/components/release-sidebar.tsx
+++ b/app/(marketing)/documentatie/components/release-sidebar.tsx
@@ -11,7 +11,7 @@ import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { ChevronRight, ChevronDown, ChevronLeft, X } from 'lucide-react'
 import { useState, useEffect } from 'react'
-import type { ReleaseNote, GroupMetadata, CategoryMetadata } from '@/lib/mdx/documentatie'
+import type { ReleaseNote, GroupMetadata, CategoryMetadata, TocItem } from '@/lib/mdx/documentatie'

 interface ReleaseSidebarProps {
  releases: ReleaseNote[]
@@ -19,13 +19,15 @@ interface ReleaseSidebarProps {
    groups: GroupMetadata[]
    categories: CategoryMetadata[]
  }
+  tocMap: Record<string, TocItem[]>
 }

-export function ReleaseSidebar({ releases, metadata }: ReleaseSidebarProps) {
+export function ReleaseSidebar({ releases, metadata, tocMap }: ReleaseSidebarProps) {
  const pathname = usePathname()
  const [isExpanded, setIsExpanded] = useState(false)
  const [expandedGroups, setExpandedGroups] = useState<Record<string, boolean>>({
    foundation: true,
+    architecture: true,
    features: true,
    infrastructure: true,
    bugs: true,
@@ -143,25 +145,44 @@ export function ReleaseSidebar({ releases, metadata }: ReleaseSidebarProps) {
                        <div className="space-y-1 ml-2">
                          {groupReleases.map((release) => {
                            const isActive = pathname === `/documentatie/${release.slug}`
+                            const toc = tocMap[release.slug] || []

                            return (
-                              <Link
-                                key={release.slug}
-                                href={`/documentatie/${release.slug}`}
-                                className={`flex items-center justify-between px-3 py-2 rounded-lg text-sm font-medium transition-colors group ${
-                                  isActive
-                                    ? 'bg-teal-50 text-teal-700'
-                                    : 'text-slate-700 hover:bg-slate-50'
-                                }`}
-                              >
-                                <div className="flex items-center gap-2 min-w-0">
-                                  <StatusDot status={release.frontmatter.status} />
-                                  <span className="whitespace-normal">{release.frontmatter.title}</span>
-                                </div>
-                                <ChevronRight className={`w-4 h-4 flex-shrink-0 transition-opacity ${
-                                  isActive ? 'opacity-100' : 'opacity-0 group-hover:opacity-50'
-                                }`} />
-                              </Link>
+                              <div key={release.slug}>
+                                <Link
+                                  href={`/documentatie/${release.slug}`}
+                                  className={`flex items-center justify-between px-3 py-2 rounded-lg text-sm font-medium transition-colors group ${
+                                    isActive
+                                      ? 'bg-teal-50 text-teal-700'
+                                      : 'text-slate-700 hover:bg-slate-50'
+                                  }`}
+                                >
+                                  <div className="flex items-center gap-2 min-w-0">
+                                    <StatusDot status={release.frontmatter.status} />
+                                    <span className="whitespace-normal">{release.frontmatter.title}</span>
+                                  </div>
+                                  <ChevronRight className={`w-4 h-4 flex-shrink-0 transition-opacity ${
+                                    isActive ? 'opacity-100' : 'opacity-0 group-hover:opacity-50'
+                                  }`} />
+                                </Link>
+
+                                {/* Table of Contents for active page */}
+                                {isActive && toc.length > 0 && (
+                                  <div className="ml-4 mt-1 space-y-1 border-l-2 border-teal-200">
+                                    {toc.map((item) => (
+                                      <a
+                                        key={item.id}
+                                        href={`#${item.id}`}
+                                        className={`block py-1.5 text-xs text-slate-600 hover:text-teal-600 transition-colors ${
+                                          item.level === 2 ? 'pl-3 font-medium' : 'pl-6'
+                                        }`}
+                                      >
+                                        {item.text}
+                                      </a>
+                                    ))}
+                                  </div>
+                                )}
+                              </div>
                            )
                          })}
                        </div>
@@ -220,23 +241,42 @@ export function ReleaseSidebar({ releases, metadata }: ReleaseSidebarProps) {
                      <div className="space-y-1 ml-2">
                        {groupReleases.map((release) => {
                          const isActive = pathname === `/documentatie/${release.slug}`
+                          const toc = tocMap[release.slug] || []

                          return (
-                            <Link
-                              key={release.slug}
-                              href={`/documentatie/${release.slug}`}
-                              className={`flex items-center justify-between px-3 py-2 rounded-lg text-sm font-medium transition-colors group ${isActive
-                                  ? 'bg-teal-50 text-teal-700'
-                                  : 'text-slate-700 hover:bg-slate-50'
-                                }`}
-                            >
-                              <div className="flex items-center gap-2 min-w-0">
-                                <StatusDot status={release.frontmatter.status} />
-                                <span className="whitespace-normal">{release.frontmatter.title}</span>
-                              </div>
-                              <ChevronRight className={`w-4 h-4 flex-shrink-0 transition-opacity ${isActive ? 'opacity-100' : 'opacity-0 group-hover:opacity-50'
-                                }`} />
-                            </Link>
+                            <div key={release.slug}>
+                              <Link
+                                href={`/documentatie/${release.slug}`}
+                                className={`flex items-center justify-between px-3 py-2 rounded-lg text-sm font-medium transition-colors group ${isActive
+                                    ? 'bg-teal-50 text-teal-700'
+                                    : 'text-slate-700 hover:bg-slate-50'
+                                  }`}
+                              >
+                                <div className="flex items-center gap-2 min-w-0">
+                                  <StatusDot status={release.frontmatter.status} />
+                                  <span className="whitespace-normal">{release.frontmatter.title}</span>
+                                </div>
+                                <ChevronRight className={`w-4 h-4 flex-shrink-0 transition-opacity ${isActive ? 'opacity-100' : 'opacity-0 group-hover:opacity-50'
+                                  }`} />
+                              </Link>
+
+                              {/* Table of Contents for active page */}
+                              {isActive && toc.length > 0 && (
+                                <div className="ml-4 mt-1 space-y-1 border-l-2 border-teal-200">
+                                  {toc.map((item) => (
+                                    <a
+                                      key={item.id}
+                                      href={`#${item.id}`}
+                                      className={`block py-1.5 text-xs text-slate-600 hover:text-teal-600 transition-colors ${
+                                        item.level === 2 ? 'pl-3 font-medium' : 'pl-6'
+                                      }`}
+                                    >
+                                      {item.text}
+                                    </a>
+                                  ))}
+                                </div>
+                              )}
+                            </div>
                          )
                        })}
                      </div>