@curio-sd/e-module-builder 0.3.0 → 0.4.0

package/README.md

@@ -131,7 +131,6 @@ The Markdown **body** is split on blank lines: the first paragraph becomes the `
 week: 1
 title: Build a page layout
 subtitle: Practical assignment
-client: Acme Corp
 deliverables:
   - A working HTML/CSS page
 criteria:

package/build.mjs

@@ -26,6 +26,44 @@ const marked = new Marked(
 
 // ─── helpers ────────────────────────────────────────────────────────────────
 
+function rewriteAssetPaths(html, basePath) {
+  if (!basePath || !html) return html
+  const prefix = `../${basePath}/`
+  html = html.replace(
+    /(<img\s[^>]*\bsrc=")(?!https?:\/\/|\/|data:|\.\.)([^"]+)(")/g,
+    `$1${prefix}$2$3`
+  )
+  html = html.replace(
+    /(<a\s[^>]*\bhref=")(?!https?:\/\/|\/|#|mailto:|\.\.)([^"]+)(")/g,
+    `$1${prefix}$2$3`
+  )
+  return html
+}
+
+function copyStaticAssets() {
+  const PUBLIC_DIR = path.join(PROJECT_DIR, 'public')
+
+  const pkgPublic = path.join(PKG_DIR, 'public')
+  if (fs.existsSync(pkgPublic)) {
+    fs.cpSync(pkgPublic, PUBLIC_DIR, { recursive: true })
+  }
+
+  function walkAndCopy(srcDir, relPath) {
+    for (const entry of fs.readdirSync(srcDir, { withFileTypes: true })) {
+      const srcPath = path.join(srcDir, entry.name)
+      const destRel = relPath ? `${relPath}/${entry.name}` : entry.name
+      if (entry.isDirectory()) {
+        walkAndCopy(srcPath, destRel)
+      } else if (!entry.name.endsWith('.md') && !entry.name.endsWith('.html')) {
+        const destPath = path.join(PUBLIC_DIR, destRel)
+        fs.mkdirSync(path.dirname(destPath), { recursive: true })
+        fs.copyFileSync(srcPath, destPath)
+      }
+    }
+  }
+  walkAndCopy(CONTENT, '')
+}
+
 function readMd(filePath) {
   const raw = fs.readFileSync(filePath, 'utf8')
   return matter(raw)
@@ -91,7 +129,7 @@ for (const weekDir of activeWeeks) {
     title: theoryMd.data.title,
     goal: theoryMd.data.goal,
     accent: theoryMd.data.accent,
-    html: marked.parse(theoryMd.content ?? ''),
+    html: rewriteAssetPaths(marked.parse(theoryMd.content ?? ''), `week${weekNum}`),
   }
   writeJson(SRC_DATA, `theory-week${weekNum}.json`, theoryOut)
 
@@ -113,7 +151,7 @@ for (const weekDir of activeWeeks) {
   const exercises = exerciseFiles.map(f => {
     const ex = readMd(path.join(exDir, f)).data
     if (!ex.type || ex.type === 'text') {
-      ex.descriptionHtml = marked.parse(ex.description ?? '')
+      ex.descriptionHtml = rewriteAssetPaths(marked.parse(ex.description ?? ''), `week${weekNum}/exercises`)
     }
     return ex
   })
@@ -132,8 +170,7 @@ for (const weekDir of activeWeeks) {
     week: hwMd.data.week ?? weekNum,
     title: hwMd.data.title,
     subtitle: hwMd.data.subtitle ?? '',
-    client: hwMd.data.client ?? '',
-    html: marked.parse(hwMd.content ?? ''),
+    html: rewriteAssetPaths(marked.parse(hwMd.content ?? ''), `week${weekNum}`),
     deliverables: hwMd.data.deliverables ?? [],
     criteria: hwMd.data.criteria ?? [],
     maxPoints: hwMd.data.maxPoints ?? 0,
@@ -333,4 +370,6 @@ for (const f of htmlFiles) {
 const indexTpl = fs.readFileSync(path.join(PKG_DIR, 'templates/index.html'), 'utf8')
 fs.writeFileSync(path.join(PROJECT_DIR, 'index.html'), applyTemplate(indexTpl, { pageTitle: mod.name }))
 
+copyStaticAssets()
+
 console.log(`Build complete: ${weekCount} weeks → src/data/ and pages/`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@curio-sd/e-module-builder",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "description": "A tool for building e-modules for Curio SD",
   "license": "MIT",

package/src/css/main.css

@@ -23,6 +23,39 @@
   body {
     @apply text-zinc-800;
   }
+
+  /* Given that markdown is placed inside main, we want some basic styling for headings */
+  main h2 {
+    @apply mt-8 text-[11px] font-semibold uppercase tracking-[0.18em] text-zinc-400;
+  }
+
+  main h3 {
+    @apply mt-4 text-base font-bold text-zinc-900
+  }
+
+  main h4 {
+    @apply mt-3 text-sm font-semibold text-zinc-900
+  }
+
+  main h5 {
+    @apply mt-2 text-sm font-normal uppercase text-zinc-900
+  }
+
+  main h6 {
+    @apply mt-2 text-sm font-light uppercase text-zinc-900
+  }
+
+  main p {
+    @apply mt-2 text-sm leading-relaxed text-zinc-700;
+  }
+
+  main ul {
+    @apply mt-2 text-sm list-inside list-disc space-y-1.5 pl-1;
+  }
+
+  main ol {
+    @apply mt-2 text-sm list-inside list-decimal space-y-1.5 pl-1;
+  }
 }
 
 @layer components {

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

@@ -66,6 +66,9 @@ export function initAreasExercise(exercise, { onSolved } = {}) {
 
   if (!containerInput || !preview) return
 
+  const outerClassMatch = exercise.previewHtml.match(/<\w+[^>]*\bclass="([^"]*)"/)
+  const gridClass = (outerClassMatch?.[1] ?? '').split(/\s+/)[0] || 'grid-container'
+
   const updatePreview = () => {
     const areas = containerInput.value.trim()
     const itemStyles = Array.from(selects)
@@ -74,7 +77,7 @@ export function initAreasExercise(exercise, { onSolved } = {}) {
 
     preview.innerHTML = `
       <style>
-        .news-grid {
+        .${gridClass} {
           display: grid;
           grid-template-columns: ${exercise.gridColumns || '1fr 1fr 1fr'};
           grid-template-areas: ${areas || '"a b c"'};

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

@@ -1,108 +1,57 @@
 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>
-
+      <p class="mt-2 text-sm text-zinc-600">De oefening staat in de navigatie, maar de inhoud is niet beschikbaar.</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')
@@ -121,189 +70,100 @@ export async function initExercisePage(weekNum) {
   }
 
   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.type === 'areas' ? !exercise.starterAreas?.trim() : !exercise.starterCss?.trim()) ||
     !exercise.previewHtml?.trim() ||
-
     (exercise.type !== 'areas' && !exercise.checks?.length)
 
-
-
   if (missingContent) {
-
     showMissingContent(weekNum)
-
     return
-
   }
 
-
-
   const {
-
     initCssPlayground,
-
     initAreasExercise,
-
     initResponsiveExercise,
-
+    renderAreaSelects,
   } = 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/inleveropdracht.js

@@ -38,11 +38,6 @@ export function initInleveropdracht(data) {
   const tipsHtml = data.tips.map((t) => `<li class="text-sm text-zinc-600">${t}</li>`).join('')
 
   container.innerHTML = `
-    <section class="card mb-6">
-      <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-zinc-400">Casus</p>
-      <h2 class="mt-2 text-xl font-medium text-zinc-900">${data.client}</h2>
-    </section>
-
     <section class="card prose-inleveropdracht mb-6">
       ${data.html}
     </section>
@@ -109,8 +104,6 @@ export function initInleveropdracht(data) {
       data.title,
       '='.repeat(40),
       '',
-      `Klant: ${data.client}`,
-      '',
       'Criteria:',
     ]
     for (const c of data.criteria) {

package/src/js/theory.js

@@ -15,7 +15,6 @@ export async function initTheory(week) {
   } catch {
     container.innerHTML = `
       <p class="text-red-600">Theorie voor week ${week} niet gevonden.</p>
-      <p class="mt-2 text-sm text-zinc-500">Run <code class="font-mono">npm run generate-content</code> om content te genereren.</p>
     `
     return
   }
@@ -23,7 +22,6 @@ export async function initTheory(week) {
   if (!data?.html) {
     container.innerHTML = `
       <p class="text-amber-700">Theorie voor week ${week} is nog leeg.</p>
-      <p class="mt-2 text-sm text-zinc-500">Run <code class="font-mono">npm run generate-content</code> om content te genereren.</p>
     `
     return
   }

package/vite.config.js

@@ -9,7 +9,9 @@ export function createConfig({ projectDir, pkgDir }) {
   return defineConfig({
     root: projectDir,
     base: './',
-    publicDir: path.join(pkgDir, 'public'),
+    publicDir: existsSync(path.join(projectDir, 'public'))
+      ? path.join(projectDir, 'public')
+      : path.join(pkgDir, 'public'),
     plugins: [
       htmlIncludes({ partialsDir: path.join(pkgDir, 'src', 'partials') }),
       tailwindcss(),