@curio-sd/e-module-builder 0.1.0

package/src/js/exercises/hub.js

@@ -0,0 +1,57 @@
+import { getSolvedExercises } from './exercise-shared.js'
+import { sitePath } from '../site-path.js'
+
+const DIFFICULTY = ['', 'Beginner', 'Beginner', 'Gemiddeld', 'Gemiddeld', 'Gevorderd', 'Gevorderd', 'Expert', 'Expert']
+
+export function initExerciseHub(weekData, weekNum) {
+  const container = document.querySelector('[data-exercise-list]')
+  if (!container) return
+
+  const solved = getSolvedExercises(weekNum)
+  const external = weekData.mode === 'external'
+
+  const subtitle = document.querySelector('[data-hub-subtitle]')
+  if (subtitle) {
+    subtitle.textContent = external
+      ? `${weekData.title || `Week ${weekNum}`} — 8 opdrachten voor je eigen omgeving`
+      : `${weekData.title || `Week ${weekNum}`} — 8 oefeningen met oplopende moeilijkheid`
+  }
+
+  const items = weekData.exercises
+    .map((ex) => {
+      const label = DIFFICULTY[ex.difficulty] || 'Beginner'
+      const done = solved.includes(ex.id)
+      const modeBadge = external
+        ? '<span class="badge mt-3">Eigen omgeving</span>'
+        : `<span class="badge mt-3">${label}</span>`
+
+      return `
+        <a
+          href="${sitePath(`/pages/week${weekNum}-oefening.html`)}?id=${ex.id}"
+          class="group flex items-start gap-5 px-6 py-5 transition hover:bg-zinc-50"
+        >
+          <span class="mt-0.5 font-mono text-sm text-zinc-300 transition group-hover:text-zinc-900">${String(ex.id).padStart(2, '0')}</span>
+          <div class="flex-1">
+            <div class="flex flex-wrap items-baseline gap-x-3 gap-y-1">
+              <h3 class="font-medium text-zinc-900">${ex.title}</h3>
+              ${done ? '<span class="badge-done">Voltooid</span>' : ''}
+            </div>
+            <p class="mt-1.5 text-sm leading-relaxed text-zinc-500">${ex.description}</p>
+            ${modeBadge}
+          </div>
+        </a>
+      `
+    })
+    .join('')
+
+  container.innerHTML = `<div class="card divide-y divide-zinc-100 p-0">${items}</div>`
+
+  const progressEl = document.querySelector('[data-hub-progress]')
+  const progressBar = document.querySelector('[data-hub-progress-bar]')
+  if (progressEl) {
+    const total = weekData.exercises.length
+    const percent = total ? Math.round((solved.length / total) * 100) : 0
+    progressEl.textContent = `${solved.length} / ${total}`
+    if (progressBar) progressBar.style.width = `${percent}%`
+  }
+}

package/src/js/exercises/load-exercise.js

@@ -0,0 +1,309 @@
+import { renderExerciseMeta, markExerciseSolved } from './exercise-shared.js'
+import { sitePath } from '../site-path.js'
+
+import { initExternalExercise } from './external-exercise.js'
+
+
+
+async function loadWeekData(weekNum) {
+
+  return import(`../../data/exercises/week${weekNum}.json`).then((m) => m.default)
+
+}
+
+
+
+function isExternalMode(weekData, exercise) {
+
+  return weekData?.mode === 'external' || exercise?.type === 'external'
+
+}
+
+
+
+function showMissingContent(weekNum) {
+
+  const panel = document.querySelector('[data-exercise-content]')
+
+  panel?.querySelector('[data-exercise-interactive]')?.classList.add('hidden')
+
+  panel?.querySelector('[data-exercise-external]')?.classList.add('hidden')
+
+  panel?.querySelector('[data-hint]')?.closest('.mb-4')?.classList.add('hidden')
+
+  panel?.insertAdjacentHTML(
+
+    'beforeend',
+
+    `<div class="card border-l-4 border-l-amber-500">
+
+      <p class="font-medium text-zinc-900">Content ontbreekt</p>
+
+      <p class="mt-2 text-sm text-zinc-600">De oefening staat in de navigatie, maar is nog niet gegenereerd. Run in een terminal:</p>
+
+      <pre class="code-block mt-3 text-sm"><code>npm run generate-content</code></pre>
+
+      <p class="mt-2 text-sm text-zinc-500">Herlaad daarna deze pagina.</p>
+
+    </div>`
+
+  )
+
+}
+
+
+
+export async function initExercisePage(weekNum) {
+
+  const params = new URLSearchParams(window.location.search)
+
+  const id = parseInt(params.get('id') || '1', 10)
+
+
+
+  let weekData
+
+  try {
+
+    weekData = await loadWeekData(weekNum)
+
+  } catch {
+
+    document.querySelector('[data-exercise-content]')?.insertAdjacentHTML(
+
+      'beforeend',
+
+      `<p class="text-red-600">Oefeningdata voor week ${weekNum} niet gevonden.</p>`
+
+    )
+
+    return
+
+  }
+
+
+
+  const exercise = weekData?.exercises?.find((e) => e.id === id)
+
+
+
+  if (!exercise) {
+
+    document.querySelector('[data-exercise-content]')?.insertAdjacentHTML(
+
+      'beforeend',
+
+      '<p class="text-red-600">Oefening niet gevonden.</p>'
+
+    )
+
+    return
+
+  }
+
+
+
+  if (!exercise.type || exercise.type === 'text') {
+    const panel = document.querySelector('[data-exercise-content]')
+    panel?.querySelector('[data-exercise-interactive]')?.classList.add('hidden')
+    panel?.querySelector('[data-exercise-external]')?.classList.add('hidden')
+    panel?.querySelector('[data-exercise-actions]')?.classList.add('hidden')
+
+    const descEl = document.querySelector('[data-exercise-description]')
+    if (descEl) {
+      descEl.classList.remove('hidden')
+      descEl.innerHTML = exercise.descriptionHtml ?? ''
+    }
+
+    renderExerciseMeta(exercise)
+    renderNavButtons(weekNum, id, weekData.exercises.length)
+    return
+  }
+
+  if (isExternalMode(weekData, exercise)) {
+
+    const missing = !exercise.task?.trim() && !exercise.description?.trim()
+
+    if (missing) {
+
+      showMissingContent(weekNum)
+
+      return
+
+    }
+
+    initExternalExercise(exercise, weekNum, {
+
+      onSolved: () => markExerciseSolved(weekNum, exercise.id),
+
+    })
+
+    renderNavButtons(weekNum, id, weekData.exercises.length)
+
+    return
+
+  }
+
+
+
+  renderExerciseMeta(exercise)
+
+
+
+  const missingContent =
+
+    !exercise.starterCss?.trim() ||
+
+    !exercise.previewHtml?.trim() ||
+
+    (exercise.type !== 'areas' && !exercise.checks?.length)
+
+
+
+  if (missingContent) {
+
+    showMissingContent(weekNum)
+
+    return
+
+  }
+
+
+
+  const {
+
+    initCssPlayground,
+
+    initAreasExercise,
+
+    initResponsiveExercise,
+
+  } = await import('./exercise-runner.js')
+
+
+
+  document.querySelector('[data-exercise-external]')?.classList.add('hidden')
+
+  document.querySelector('[data-exercise-interactive]')?.classList.remove('hidden')
+
+
+
+  const cssPanel = document.querySelector('[data-exercise-css-panel]')
+
+  const areasPanel = document.querySelector('[data-exercise-areas-panel]')
+
+  const responsiveBar = document.querySelector('[data-responsive-bar]')
+
+
+
+  const onSolved = () => markExerciseSolved(weekNum, exercise.id)
+
+
+
+  if (exercise.type === 'areas') {
+
+    cssPanel?.classList.add('hidden')
+
+    areasPanel?.classList.remove('hidden')
+
+    responsiveBar?.classList.add('hidden')
+
+    document.querySelector('[data-solution]')?.classList.add('hidden')
+
+
+
+    const containerInput = document.querySelector('[data-areas-container]')
+
+    if (containerInput) containerInput.value = exercise.starterAreas || ''
+
+
+
+    const selectsEl = document.querySelector('[data-area-selects]')
+
+    if (selectsEl) {
+
+      selectsEl.innerHTML = renderAreaSelects(exercise.areaItems, exercise.areaOptions)
+
+    }
+
+
+
+    initAreasExercise(exercise, { onSolved })
+
+  } else {
+
+    areasPanel?.classList.add('hidden')
+
+    cssPanel?.classList.remove('hidden')
+
+
+
+    if (exercise.type === 'responsive') {
+
+      responsiveBar?.classList.remove('hidden')
+
+      initResponsiveExercise(exercise, { onSolved })
+
+    } else {
+
+      responsiveBar?.classList.add('hidden')
+
+      initCssPlayground(exercise, { onSolved })
+
+    }
+
+  }
+
+
+
+  renderNavButtons(weekNum, id, weekData.exercises.length)
+
+}
+
+
+
+function renderNavButtons(week, currentId, total) {
+
+  const prev = document.querySelector('[data-prev-exercise]')
+
+  const next = document.querySelector('[data-next-exercise]')
+
+
+
+  if (prev) {
+
+    if (currentId > 1) {
+
+      prev.href = `${sitePath(`/pages/week${week}-oefening.html`)}?id=${currentId - 1}`
+
+      prev.classList.remove('hidden')
+
+    } else {
+
+      prev.classList.add('hidden')
+
+    }
+
+  }
+
+
+
+  if (next) {
+
+    if (currentId < total) {
+
+      next.href = `${sitePath(`/pages/week${week}-oefening.html`)}?id=${currentId + 1}`
+
+      next.classList.remove('hidden')
+
+    } else {
+
+      next.classList.add('hidden')
+
+    }
+
+  }
+
+}
+
+

package/src/js/exercises/validators.js

@@ -0,0 +1,53 @@
+export function normalizeCss(css) {
+  return css.toLowerCase().replace(/\s+/g, ' ').trim()
+}
+
+/**
+ * @param {string} css
+ * @param {Array<{type: string, value?: string, values?: string[], pattern?: string, msg: string}>} checks
+ */
+export function runChecks(css, checks) {
+  const n = normalizeCss(css)
+  return checks.map((check) => {
+    let ok = false
+    switch (check.type) {
+      case 'includes':
+        ok = n.includes(check.value.toLowerCase())
+        break
+      case 'includesAll':
+        ok = check.values.every((v) => n.includes(v.toLowerCase()))
+        break
+      case 'includesAny':
+        ok = check.values.some((v) => n.includes(v.toLowerCase()))
+        break
+      case 'regex':
+        ok = new RegExp(check.pattern, 'i').test(css)
+        break
+      case 'mediaQuery':
+        ok = n.includes('@media') && check.values.every((v) => n.includes(v.toLowerCase()))
+        break
+      default:
+        ok = false
+    }
+    return { ok, msg: check.msg }
+  })
+}
+
+export function validateAreas(containerValue, selects, expected) {
+  const errors = []
+  const normalized = containerValue.replace(/\s+/g, ' ').trim().toLowerCase()
+  const expectedNorm = expected.container.replace(/\s+/g, ' ').trim().toLowerCase()
+
+  if (normalized !== expectedNorm) {
+    errors.push('grid-template-areas op de container klopt niet')
+  }
+
+  selects.forEach((select) => {
+    const id = select.dataset.areaItem
+    if (select.value !== expected.items[id]) {
+      errors.push(`Item "${id.toUpperCase()}" heeft verkeerde grid-area`)
+    }
+  })
+
+  return errors
+}

package/src/js/home.js

@@ -0,0 +1,86 @@
+import manifest from '../data/manifest.json'
+import { sitePath } from './site-path.js'
+
+
+
+export function initHome() {
+
+  const mod = manifest.module
+
+  const contentStatus = manifest.content?.status || 'empty'
+
+  const isReady = contentStatus === 'generated'
+
+
+
+  const titleEl = document.querySelector('[data-home-title]')
+
+  const descEl = document.querySelector('[data-home-description]')
+
+  const labelEl = document.querySelector('[data-home-label]')
+
+  const setupEl = document.querySelector('[data-home-setup]')
+
+  const readyEl = document.querySelector('[data-home-ready]')
+
+  const curriculumEl = document.querySelector('[data-home-curriculum]')
+
+
+
+  if (labelEl) labelEl.textContent = mod.subtitle
+
+  if (titleEl) titleEl.textContent = mod.name
+
+  if (descEl) descEl.textContent = mod.description
+
+
+
+  if (setupEl) setupEl.classList.toggle('hidden', isReady)
+
+  if (readyEl) readyEl.classList.toggle('hidden', !isReady)
+
+
+
+  if (!isReady || !curriculumEl) return
+
+
+
+  const weekLinks = (week) => week.pages
+
+    .filter((p) => p.key !== 'oefening')
+
+    .map((p) => `<a href="${sitePath(p.href)}" class="text-link">${p.label}</a>`)
+
+    .join('\n                  ')
+
+
+
+  curriculumEl.innerHTML = manifest.weeks
+
+    .map(
+
+      (w) => `
+
+              <div class="card-interactive bg-white">
+
+                <span class="week-label">Week ${String(w.week).padStart(2, '0')}</span>
+
+                <h3 class="text-lg font-medium text-zinc-900">${w.title}</h3>
+
+                <p class="mt-2 text-sm leading-relaxed text-zinc-500">${w.summary}</p>
+
+                <div class="mt-6 flex flex-wrap gap-5">
+
+                  ${weekLinks(w)}
+
+                </div>
+
+              </div>`
+
+    )
+
+    .join('\n')
+
+}
+
+

package/src/js/layout.js

@@ -0,0 +1,42 @@
+import '../css/main.css'
+import { sitePath } from './site-path.js'
+
+const MENU_SVG = `<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16" /></svg>`
+
+/**
+ * Wraps [data-page-content] in the shared app shell (sidebar + topbar).
+ * Pages only need their unique <main> content inside data-page-content.
+ */
+export function mountLayout() {
+  const icon = document.querySelector('link[rel="icon"]')
+  if (icon) icon.href = sitePath('/favicon.svg')
+
+  const contentEl = document.querySelector('[data-page-content]')
+  if (!contentEl || document.querySelector('[data-app-shell]')) return
+
+  const content = contentEl.innerHTML.trim()
+  contentEl.remove()
+
+  const shell = document.createElement('div')
+  shell.className = 'app-shell'
+  shell.dataset.appShell = ''
+  shell.innerHTML = `
+    <div data-nav-overlay class="nav-overlay"></div>
+    <aside data-sidebar class="sidebar-panel">
+      <nav data-module-nav></nav>
+    </aside>
+    <div class="md:pl-60">
+      <header class="topbar">
+        <div class="flex items-center gap-4 px-4 py-3 md:px-8">
+          <button data-nav-toggle type="button" class="p-2 text-zinc-600 transition hover:text-zinc-900 md:hidden" aria-label="Menu openen">
+            ${MENU_SVG}
+          </button>
+          <div data-breadcrumbs></div>
+        </div>
+      </header>
+      ${content}
+    </div>
+  `
+
+  document.body.insertBefore(shell, document.body.firstChild)
+}

package/src/js/monaco-setup.js

@@ -0,0 +1,49 @@
+import * as monaco from 'monaco-editor'
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
+
+self.MonacoEnvironment = {
+  getWorker(_, label) {
+    if (label === 'css' || label === 'scss' || label === 'less') {
+      return new cssWorker()
+    }
+    return new editorWorker()
+  },
+}
+
+/**
+ * @param {HTMLElement} container
+ * @param {string} initialValue
+ * @param {(value: string) => void} [onChange]
+ */
+export function createCssEditor(container, initialValue = '', onChange) {
+  const editor = monaco.editor.create(container, {
+    value: initialValue,
+    language: 'css',
+    theme: 'vs-dark',
+    fontSize: 14,
+    fontFamily: "'JetBrains Mono', ui-monospace, monospace",
+    minimap: { enabled: false },
+    lineNumbers: 'on',
+    scrollBeyondLastLine: false,
+    automaticLayout: true,
+    tabSize: 2,
+    wordWrap: 'on',
+    padding: { top: 12 },
+  })
+
+  if (onChange) {
+    editor.onDidChangeModelContent(() => onChange(editor.getValue()))
+  }
+
+  return editor
+}
+
+export function setEditorValue(editor, value) {
+  if (!editor) return
+  editor.setValue(value)
+}
+
+export function getEditorValue(editor) {
+  return editor?.getValue() ?? ''
+}