- Add section-specific CodeMirror syntax highlighting (purple selectors for CSS) - Logo now uses section colors (CSS purple as default, changes per section) - Add section color coding for hints - Add full footer to section and reference pages - Fix nav highlight updates for sidebar and prev/next navigation - Change welcome module mode to CSS for purple theme on first lesson - Rebrand "Code Crispies" to "CODE CRISPIES" across all translations - Fix scroll to top on section page navigation - Change HTML section color to raspberry (#c75b7a)
76 lines
1.5 KiB
JavaScript
76 lines
1.5 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
|
|
}
|
|
};
|
|
|
|
/**
|
|
* 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";
|
|
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;
|
|
});
|
|
}
|