Michael Czechowski
b9c90112a3
Implementation following plan: - S01: Foundation: schema, section config, and router - S02: Install CodeMirror JavaScript language support - S03: Create JavaScript lesson JSON files (variables, DOM, events) - S04: Register JavaScript lessons in module stores - S05: Add JavaScript validation logic - S06: Add JavaScript mode to LessonEngine preview rendering - S07: Add JavaScript mode to CodeEditor - S08: Update app.js for JavaScript mode support - S09: Update navigation HTML and CSS theming for JavaScript section - S10: Add section grouping headers in sidebar navigation - S11: Update and write tests
92 lines
1.9 KiB
JavaScript
92 lines
1.9 KiB
JavaScript
/**
|
|
* Section definitions for Code Crispies
|
|
* Sections group related modules (CSS, HTML, Tailwind)
|
|
*/
|
|
|
|
export const sections = {
|
|
css: {
|
|
id: "css",
|
|
title: "CSS",
|
|
description: "Styling, layout, and animations",
|
|
color: "#8b6bc4",
|
|
order: 1
|
|
},
|
|
html: {
|
|
id: "html",
|
|
title: "HTML",
|
|
description: "Semantic markup and native elements",
|
|
color: "#c75b7a",
|
|
order: 2
|
|
},
|
|
tailwind: {
|
|
id: "tailwind",
|
|
title: "Tailwind CSS",
|
|
description: "Utility-first CSS framework",
|
|
color: "#26a69a",
|
|
order: 3
|
|
},
|
|
markdown: {
|
|
id: "markdown",
|
|
title: "Markdown",
|
|
description: "Lightweight markup language for formatting text",
|
|
color: "#5b8dd9",
|
|
order: 4
|
|
},
|
|
javascript: {
|
|
id: "javascript",
|
|
title: "JavaScript",
|
|
description: "Interactive scripting for web pages",
|
|
color: "#f0db4f",
|
|
order: 5
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Get section by ID
|
|
* @param {string} sectionId
|
|
* @returns {object|null}
|
|
*/
|
|
export function getSection(sectionId) {
|
|
return sections[sectionId] || null;
|
|
}
|
|
|
|
/**
|
|
* Get all sections sorted by order
|
|
* @returns {object[]}
|
|
*/
|
|
export function getSectionList() {
|
|
return Object.values(sections).sort((a, b) => a.order - b.order);
|
|
}
|
|
|
|
/**
|
|
* Infer section from module mode
|
|
* @param {object} module
|
|
* @returns {string}
|
|
*/
|
|
export function getModuleSection(module) {
|
|
// Explicit section takes precedence
|
|
if (module.section) return module.section;
|
|
|
|
// Infer from mode
|
|
const mode = module.mode || "css";
|
|
if (mode === "html") return "html";
|
|
if (mode === "tailwind") return "tailwind";
|
|
if (mode === "markdown") return "markdown";
|
|
if (mode === "javascript") return "javascript";
|
|
return "css";
|
|
}
|
|
|
|
/**
|
|
* Filter modules by section
|
|
* @param {object[]} modules
|
|
* @param {string} sectionId
|
|
* @returns {object[]}
|
|
*/
|
|
export function getModulesBySection(modules, sectionId) {
|
|
return modules.filter((m) => {
|
|
// Skip excluded modules (welcome, goodbye)
|
|
if (m.excludeFromProgress) return false;
|
|
return getModuleSection(m) === sectionId;
|
|
});
|
|
}
|