Tutorial Buttons

JavaScript Kopieren

// ============================================================================
// TUTORIAL-LISTEN (für Kategorieseiten)
// ============================================================================

/**
 * Sammelt alle Tutorials einer Kategorie, gruppiert nach Unterordnern
 */
function getTutorialsByCategory(category) {
    const tutorials = {};

    // Durchsuche manualOrder nach der Kategorie
    for (const [folder, files] of Object.entries(manualOrder)) {
        if (folder.includes(category)) {
            const subFolder = folder.split('/').pop(); // z.B. "html-basics"

            tutorials[subFolder] = files.map(file => {
                const fullPath = `${folder}/${file}`;
                return {
                    title: customTitles[fullPath] || fileNameToTitle(file),
                    url: fullPath,
                    fileName: file
                };
            });
        }
    }

    return tutorials;
}

/**
 * Generiert HTML für Tutorial-Buttons
 */
function generateTutorialButtonsHTML(tutorials, currentFile) {
    let html = '';

    // Sortiere die Gruppen nach der Reihenfolge in manualOrder (nicht alphabetisch!)
    const groupOrder = Object.keys(manualOrder)
        .filter(folder => Object.keys(tutorials).some(group => folder.endsWith(group)))
        .map(folder => folder.split('/').pop());

    const sortedGroups = Object.keys(tutorials).sort((a, b) => {
        const indexA = groupOrder.indexOf(a);
        const indexB = groupOrder.indexOf(b);
        return indexA - indexB;
    });

    sortedGroups.forEach(group => {
        // Gruppe-Überschrift
        const groupTitle = fileNameToTitle(group);
        html += `\n                    <div class="tutorial-group">\n`;
        html += `                        <h3 class="tutorial-group-title">${groupTitle}</h3>\n`;
        html += `                        <div class="tutorial-group-buttons">\n`;

        // Buttons für diese Gruppe
        tutorials[group].forEach(tutorial => {
            // Verwende absolute Pfade ab Root (statt relative)
            const absolutePath = '/' + tutorial.url;
            html += `                            <a href="${absolutePath}" class="tutorial-button">${tutorial.title}</a>\n`;
        });

        html += `                        </div>\n`;
        html += `                    </div>`;
    });

    return html;
}

/**
 * Aktualisiert Tutorial-Listen auf Kategorieseiten
 */
function updateTutorialLists(files) {
    let updatedCount = 0;

    files.forEach(file => {
        const filePath = path.join(BASE_DIR, file);
        let content = fs.readFileSync(filePath, 'utf8');

        // Suche nach dem öffnenden Tag mit data-category
        const startTagRegex = /<div\s+id=["']tutorialButtons["']\s+class=["']tutorial-buttons["']\s+data-category=["']([^"']+)["'][^>]*>/;
        const startMatch = content.match(startTagRegex);

        if (startMatch) {
            const category = startMatch[1]; // z.B. "html", "css", etc.
            const tutorials = getTutorialsByCategory(category);

            if (Object.keys(tutorials).length > 0) {
                const buttonsHTML = generateTutorialButtonsHTML(tutorials, file);

                // Finde die Position des öffnenden und schließenden Tags
                const startIndex = content.indexOf(startMatch[0]) + startMatch[0].length;
                const endTag = '</div>';

                // Finde das passende schließende div (zähle opening/closing tags)
                let depth = 1;
                let endIndex = startIndex;

                while (depth > 0 && endIndex < content.length) {
                    const nextOpen = content.indexOf('<div', endIndex);
                    const nextClose = content.indexOf('</div>', endIndex);

                    if (nextClose === -1) break;

                    if (nextOpen !== -1 && nextOpen < nextClose) {
                        depth++;
                        endIndex = nextOpen + 4;
                    } else {
                        depth--;
                        if (depth === 0) {
                            endIndex = nextClose;
                        } else {
                            endIndex = nextClose + 6;
                        }
                    }
                }

                // Ersetze nur den Inhalt zwischen den Tags
                const before = content.substring(0, startIndex);
                const after = content.substring(endIndex);

                content = before + buttonsHTML + '\n                ' + after;

                fs.writeFileSync(filePath, content, 'utf8');
                updatedCount++;
            }
        }
    });

    console.log(`✅ Tutorial-Listen aktualisiert in ${updatedCount} Dateien`);
}