migrate "spatial image analytics" from dariah teach

.stylelintignore

@@ -0,0 +1,24 @@
+# dependencies
+node_modules/
+.pnpm-store/
+
+# misc
+.idea/
+
+# next.js
+.next/
+next-env.d.ts
+out/
+
+# test
+/coverage/
+
+# playwright
+/blob-report/
+/playwright/.cache/
+/playwright-report/
+/test-results/
+
+#vendor
+/public/vendor
+

components/content/embed.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 
 interface EmbedProps {
-	children: ReactNode;
+	children?: ReactNode;
 	src: string;
 	/** Added by `with-iframe-titles` mdx plugin. */
 	title?: string;
@@ -20,7 +20,7 @@ export function Embed(props: Readonly<EmbedProps>): ReactNode {
 				src={src}
 				title={title}
 			/>
-			<figcaption>{children}</figcaption>
+			{children != null && children !== "" ? <figcaption>{children}</figcaption> : null}
 		</figure>
 	);
 }

components/content/figure.tsx

@@ -8,7 +8,7 @@ interface FigureProps {
 	/** @default "stretch" */
 	alignment?: FigureAlignment;
 	alt?: string;
-	children: ReactNode;
+	children?: ReactNode;
 	/** Maybe added by `with-image-sizes` mdx plugin. */
 	height?: number;
 	src: string;
@@ -22,7 +22,7 @@ export function Figure(props: Readonly<FigureProps>): ReactNode {
 	return (
 		<figure className={cn("flex flex-col", alignment === "center" ? "justify-center" : undefined)}>
 			<Image alt={alt} height={height} src={src} width={width} />
-			<figcaption>{children}</figcaption>
+			{children != null && children !== "" ? <figcaption>{children}</figcaption> : null}
 		</figure>
 	);
 }

components/content/h5p-wrapper.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import Script from "next/script";
+import { Fragment, type ReactNode, useEffect, useRef } from "react";
+
+interface H5PWrapperProps {
+	path: string;
+}
+
+type H5PConstructor = new (
+	container: HTMLElement,
+	options: {
+		h5pJsonPath: string;
+		frameJs?: string;
+		frameCss?: string;
+		embedType?: string;
+		id?: string;
+		preventH5PInit?: boolean;
+	},
+) => {
+	destroy?: () => void;
+	[key: string]: unknown;
+};
+
+interface H5PModule {
+	H5P: H5PConstructor;
+}
+
+declare global {
+	interface Window {
+		H5PPlayer?: H5PConstructor;
+		H5PStandalone?: H5PModule;
+		H5P?: unknown;
+	}
+}
+
+export function H5PWrapper(props: Readonly<H5PWrapperProps>): ReactNode {
+	const { path } = props;
+
+	const ref = useRef<HTMLDivElement | null>(null);
+
+	useEffect(() => {
+		const container = ref.current;
+
+		if (!((window.H5PStandalone?.H5P || window.H5PPlayer) && container)) return;
+
+		if (window.H5PStandalone?.H5P) {
+			window.H5PPlayer = window.H5PStandalone.H5P;
+		}
+
+		const { H5PPlayer } = window;
+
+		const loadH5P = () => {
+			const options = {
+				h5pJsonPath: `/vendor/h5p-content/${path}`,
+				librariesPath: "/vendor/h5p-shared-libraries",
+				frameJs: "/vendor/h5p-standalone/frame.bundle.js",
+				frameCss: "/vendor/h5p-standalone/styles/h5p.css",
+			};
+
+			try {
+				if (H5PPlayer) {
+					new H5PPlayer(container, options);
+				}
+			} catch (error: unknown) {
+				console.error("Error loading H5P content", error);
+			}
+		};
+
+		loadH5P();
+
+		return () => {
+			container.innerHTML = "";
+		};
+	}, [path]);
+
+	return (
+		<Fragment>
+			<div ref={ref} />
+			<Script
+				id="h5p-script"
+				src="/vendor/h5p-standalone/main.bundle.js"
+				strategy="beforeInteractive"
+			/>
+		</Fragment>
+	);
+}

components/content/video.tsx

@@ -4,7 +4,7 @@ import type { VideoProvider } from "@/lib/content/options";
 import { createVideoUrl } from "@/lib/navigation/create-video-url";
 
 interface VideoProps {
-	children: ReactNode;
+	children?: ReactNode;
 	id: string;
 	provider: VideoProvider;
 	startTime?: number | null;
@@ -27,7 +27,7 @@ export function Video(props: Readonly<VideoProps>): ReactNode {
 				src={src}
 				title={title}
 			/>
-			<figcaption>{children}</figcaption>
+			{children != null && children !== "" ? <figcaption>{children}</figcaption> : null}
 		</figure>
 	);
 }

content/en/people/dariah-teach/index.mdx

@@ -0,0 +1,5 @@
+---
+name: DARIAH Teach
+image: /assets/images/default-avatar.svg
+social: []
+---