draft: add oer finder plugin

.github/workflows/e2e.yml

@@ -26,6 +26,8 @@ jobs:
 
     - name: Install dependencies
       run: pnpm install --frozen-lockfile
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
     - name: Install Playwright Browsers
       run: pnpm exec playwright install --with-deps

.github/workflows/pnpm-check.yml

@@ -28,6 +28,8 @@ jobs:
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Run pnpm check
         run: pnpm check
@@ -54,6 +56,8 @@ jobs:
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Run pnpm build
         run: pnpm build

.github/workflows/test.yml

@@ -28,6 +28,8 @@ jobs:
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Install Playwright Browsers
         run: pnpm exec playwright install

.npmrc

@@ -1 +1,4 @@
 engine-strict=true
+
+@edufeed-org:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

docker-compose.yml

@@ -1,4 +1,16 @@
 services:
+  # If the app needs to be started via docker compose, uncomment these lines of code and add a Dockerfile 
+  # app:
+  #   tty: true
+  #   stdin_open: true
+  #   build:
+  #     context: .
+  #     dockerfile: Dockerfile
+  #     target: development
+  #   volumes:
+  #     - .:/home/node/app
+  #   ports:
+  #     - "5173:5173"
   nostr-relay:
     image: scsibug/nostr-rs-relay:latest
     ports:

package.json

@@ -100,6 +100,7 @@
     ]
   },
   "dependencies": {
+    "@edufeed-org/oer-finder-plugin": "^0.0.5",
     "@nostr-dev-kit/ndk": "2.14.2",
     "@nostr-dev-kit/svelte": "^2.0.8",
     "jsoncrush": "^1.1.8",

src/lib/components/OerImagePicker.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import type {
+		OerSearchResultEvent,
+		OerSearchElement,
+		OerListElement,
+		PaginationElement,
+        OerCardClickEvent
+	} from '@edufeed-org/oer-finder-plugin';
+	import { onMount } from 'svelte';
+	import { settingsStore } from '$lib/stores/settingsStore.svelte';
+
+	interface Props {
+		onSelect: (imageUrl: string) => void;
+	}
+
+	const apiUrl = $state(settingsStore.settings.oerFinderPlugin.apiUrl)
+	const language = $state(settingsStore.settings.oerFinderPlugin.language)
+	const { onSelect }: Props = $props();
+
+	let searchEl: OerSearchElement;
+	let listEl: OerListElement;
+	let paginationEl: PaginationElement;
+
+	onMount(async () => {
+		// Dynamically import the plugin only on the client side to avoid SSR issues
+		await import('@edufeed-org/oer-finder-plugin');
+		// Handle search results
+		searchEl?.addEventListener('search-results', (e: Event) => {
+			const customEvent = e as CustomEvent<OerSearchResultEvent>;
+			listEl.oers = customEvent.detail.data;
+			listEl.loading = false;
+			paginationEl.metadata = customEvent.detail.meta;
+		});
+
+		searchEl?.addEventListener('search-error', (e: Event) => {
+			const customEvent = e as CustomEvent<{ error: string }>;
+			listEl.oers = [];
+			listEl.error = customEvent.detail.error;
+		});
+
+		// Handle card selection - extract original image URL
+		listEl?.addEventListener('card-click', (e: Event) => {
+			const customEvent = e as CustomEvent<OerCardClickEvent>;
+			const oer = customEvent.detail.oer;
+			const imageUrl = oer.images?.original || oer.images?.medium || oer.images?.small;
+			if (imageUrl) {
+				onSelect(imageUrl);
+			}
+		});
+
+		// Handle pagination
+		paginationEl?.addEventListener('page-change', (e: Event) => {
+			const customEvent = e as CustomEvent;
+			searchEl.dispatchEvent(new CustomEvent('page-change', { detail: customEvent.detail }));
+		});
+	});
+</script>
+
+<div class="oer-picker-container">
+	<oer-search
+		bind:this={searchEl}
+		api-url={apiUrl}
+		language={language}
+		locked-type="image"
+		show-type-filter={false}
+		page-size={12}
+	>
+		<oer-list bind:this={listEl} {language}></oer-list>
+		<oer-pagination bind:this={paginationEl} {language}></oer-pagination>
+	</oer-search>
+</div>
+
+<style>
+	.oer-picker-container {
+		--primary-color: var(--accent);
+		--primary-hover-color: color-mix(in oklch, var(--accent) 85%, black);
+		--secondary-color: var(--secondary);
+		--background-card: var(--card);
+		--background-form: var(--muted);
+		--text-primary: var(--foreground);
+		--text-secondary: var(--muted-foreground);
+		--text-muted: var(--muted-foreground);
+	}
+</style>

src/lib/stores/settingsStore.svelte.ts

@@ -59,6 +59,11 @@ export interface SettingsState {
   learningInitialConfidence: number; // Startwert für neue Patterns (Default: 0.3)
   learningConfidenceIncrement: number; // Increment bei erfolgreicher Nutzung (Default: 0.15)
   learningMinUsageCount: number; // Mindestanzahl Nutzungen für "learned" Status (Default: 3)
+
+  oerFinderPlugin: {
+    apiUrl: string,
+    language: string
+  }
 }
 
 /**
@@ -169,6 +174,11 @@ KRITISCH: Bei "leg an" / "erstelle" IMMER JSON! NIEMALS nur Text!`,
   learningInitialConfidence: 0.3,
   learningConfidenceIncrement: 0.15,
   learningMinUsageCount: 3,
+
+  oerFinderPlugin: {
+    apiUrl: "http://localhost:3001",
+    language: "de"
+  },
 };
 
 /**