Navigation Script generate-navigation.js - So funktioniert's

JavaScript Kopieren

const fs = require('fs');
const path = require('path');
const { JSDOM } = require('jsdom');

// Pfade vom scripts/ Ordner aus
const tutorialsDir = path.join(__dirname, '..', 'tutorials');
const assetsDir = path.join(__dirname, '..', 'assets');

// Blacklist: Diese Ordner werden ignoriert
const BLACKLIST_FOLDERS = ['noupload', 'node_modules', '.git', 'assets'];

JavaScript Kopieren

// Kategorie-Namen für Main-Navigation
const CATEGORY_NAMES = {
    'html': 'HTML',
    'css': 'CSS',
    'javascript': 'JavaScript'
};

// Reihenfolge der Tutorials
const TUTORIAL_ORDER = {
    'tutorials/html/html-basics': [
        'html-basics.html',
        'html-grundgeruest.html'
    ]
};

// Eigene Titel für Links
const CUSTOM_TITLES = {
    'tutorials/html/html-basics/html-basics.html': 'Was ist HTML?'
};

JavaScript Kopieren

const LATEST_TUTORIALS = [
    'tutorials/css/css-specials/css-organization.html',
    'tutorials/javascript/javascript-basics/js-security.html',
    'tutorials/misc/web/console-security.html',
    'tutorials/php/php-basics/php-security.html'
];

JavaScript Kopieren

const HEADER_TEMPLATE = `<!-- Header -->
<header class="site-header">
    <div class="container">
        <!-- Logo, Theme Toggle, Navigation... -->
    </div>
</header>`;

const FOOTER_TEMPLATE = `<footer class="site-footer">
    <div class="container">
        <!-- Copyright, Links... -->
    </div>
</footer>`;

JavaScript Kopieren

const ACRONYMS = {
    'html': 'HTML',
    'css': 'CSS',
    'php': 'PHP',
    'js': 'JS',
    'javascript': 'JavaScript',
    'seo': 'SEO',
    'ftp': 'FTP',
    'devpaniczone': 'DevPanicZone'
};

function capitalizeWithAcronyms(text) {
    return text.split('-')
        .map(word => {
            const lower = word.toLowerCase();
            if (ACRONYMS[lower]) {
                return ACRONYMS[lower];
            }
            return word.charAt(0).toUpperCase() + word.slice(1);
        })
        .join(' ');
}

JavaScript Kopieren

function findHtmlFiles(dir, fileList = []) {
    const files = fs.readdirSync(dir);
    files.forEach(file => {
        const filePath = path.join(dir, file);
        const stat = fs.statSync(filePath);
        
        if (stat.isDirectory()) {
            // Blacklist-Ordner ignorieren
            if (BLACKLIST_FOLDERS.includes(file)) {
                return;
            }
            // Rekursiv in Unterordner gehen
            findHtmlFiles(filePath, fileList);
        } else if (file.endsWith('.html')) {
            fileList.push(filePath);
        }
    });
    return fileList;
}

JavaScript Kopieren

function getCategoryFromPath(filePath) {
    const relativePath = path.relative(tutorialsDir, filePath);
    const parts = relativePath.split(path.sep);
    return parts[0]; // Erste Ebene (html, css, etc.)
}

JavaScript Kopieren

function getSubcategoryFromPath(filePath) {
    const relativePath = path.relative(tutorialsDir, filePath);
    const parts = relativePath.split(path.sep);
    if (parts.length >= 2) {
        return 'tutorials/' + parts.slice(0, 2).join('/');
    }
    return 'tutorials/' + parts[0];
}

JavaScript Kopieren

function generateMainNavigation() {
    const categories = Object.keys(CATEGORY_NAMES);
    const navItems = [];

    categories.forEach(category => {
        const categoryName = CATEGORY_NAMES[category];
        const subcategories = getSubcategoriesForCategory(category);

        if (Object.keys(subcategories).length > 0) {
            let navItem = `<li class="nav-item-nested">
                <a href="/tutorials/${category}/" class="nav-link">
                    ${categoryName}
                    <span class="submenu-icon">▸</span>
                </a>
                <ul class="dropdown-submenu">`;

            // Unterkategorien hinzufügen
            Object.keys(subcategories).forEach(subKey => {
                const sub = subcategories[subKey];
                navItem += `
                    <li><a href="/tutorials/${category}/#${subKey}">${sub.name}</a></li>`;
            });

            navItem += `
                </ul>
            </li>`;

            navItems.push(navItem);
        }
    });

    return navItems;
}

Tutorials ▾
├── HTML ▸
│   ├── HTML Basics
│   └── HTML Advanced
├── CSS ▸
│   ├── CSS Basics
│   └── CSS Specials
└── JavaScript ▸
    ├── JavaScript Basics
    └── JavaScript Projects

JavaScript Kopieren

function generateBreadcrumbs(filePath, currentTitle) {
    const category = getCategoryFromPath(filePath);
    const categoryName = CATEGORY_NAMES[category] || category;
    const basename = path.basename(filePath);
    
    // Kategorieseite: Home › Kategorie
    if (basename === 'index.html') {
        return `<a href="/">Home</a>
                <span>›</span>
                <span>${categoryName}</span>`;
    }
    
    // Tutorial-Seite: Home › Kategorie › Tutorial
    return `<a href="/">Home</a>
            <span>›</span>
            <a href="/tutorials/${category}/">${categoryName}</a>
            <span>›</span>
            <span>${currentTitle}</span>`;
}

JavaScript Kopieren

function generatePrevNextNav(filePath) {
    const category = getCategoryFromPath(filePath);
    const currentSubcategory = getSubcategoryFromPath(filePath);
    const allTutorials = getAllTutorialsFlat(category);  // Alle Tutorials der Kategorie!
    const currentIndex = allTutorials.findIndex(t => t.filePath === filePath);

    if (currentIndex === -1) return '';

    const prev = currentIndex > 0 ? allTutorials[currentIndex - 1] : null;
    const next = currentIndex < allTutorials.length - 1 ? allTutorials[currentIndex + 1] : null;

    let navHtml = '';

    // PREV Button
    if (prev) {
        const prevSubcategory = `tutorials/${category}/${prev.subcategory}`;
        const isNewCategory = prevSubcategory !== currentSubcategory;
        const categoryClass = isNewCategory ? ' is-new' : '';

        navHtml += `<div class="tutorial-nav-prev">
            <a href="${prev.url}">
                <span class="tutorial-nav-label">← Vorheriges</span>
                <span class="tutorial-nav-link">${prev.title}</span>
                <span class="tutorial-nav-category${categoryClass}">${prev.subcategoryDisplay}</span>
            </a>
        </div>`;
    } else {
        navHtml += '<div class="tutorial-nav-prev"></div>';
    }

    // NEXT Button (analog)
    if (next) {
        const nextSubcategory = `tutorials/${category}/${next.subcategory}`;
        const isNewCategory = nextSubcategory !== currentSubcategory;
        const categoryClass = isNewCategory ? ' is-new' : '';

        navHtml += `<div class="tutorial-nav-next">
            <a href="${next.url}">
                <span class="tutorial-nav-label">Nächstes →</span>
                <span class="tutorial-nav-link">${next.title}</span>
                <span class="tutorial-nav-category${categoryClass}">${next.subcategoryDisplay}</span>
            </a>
        </div>`;
    } else {
        navHtml += '<div class="tutorial-nav-next"></div>';
    }

    return navHtml;
}

<div class="tutorial-nav-prev">
    <a href="/tutorials/html/html-basics/html-listen.html">
        <span class="tutorial-nav-label">← Vorheriges</span>
        <span class="tutorial-nav-link">HTML Listen</span>
        <span class="tutorial-nav-category">HTML Basics</span>
    </a>
</div><div class="tutorial-nav-next">
    <a href="/tutorials/html/html-advanced/html-semantik.html">
        <span class="tutorial-nav-label">Nächstes →</span>
        <span class="tutorial-nav-link">HTML Semantik</span>
        <span class="tutorial-nav-category is-new">HTML Advanced</span>
    </a>
</div>

JavaScript Kopieren

function generateSidebarNavList(filePath) {
    const category = getCategoryFromPath(filePath);
    const currentUrl = getRelativeUrl(filePath);
    const allTutorials = getAllTutorialsForCategory(category);

    let html = '';

    Object.keys(allTutorials).forEach(subcategoryKey => {
        const group = allTutorials[subcategoryKey];

        // Gruppen-Überschrift
        html += `<li class="sidebar-group-title">${group.displayName}</li>\n`;

        // Tutorials dieser Gruppe
        group.tutorials.forEach(tutorial => {
            const isActive = tutorial.url === currentUrl;
            const activeClass = isActive ? ' class="active"' : '';
            html += `<li><a href="${tutorial.url}"${activeClass}>${tutorial.title}</a></li>\n`;
        });
    });

    return html.trim();
}

<li class="sidebar-group-title">HTML Basics</li>
<li><a href="/tutorials/html/html-basics/html-basics.html">HTML Basics</a></li>
<li><a href="/tutorials/html/html-basics/html-grundgeruest.html">HTML Grundgerüst</a></li>

<li class="sidebar-group-title">HTML Advanced</li>
<li><a href="/tutorials/html/html-advanced/html-semantik.html" class="active">HTML Semantik</a></li>
<li><a href="/tutorials/html/html-advanced/html-formulare.html">HTML Formulare</a></li>

JavaScript Kopieren

function extractHeroExcerpt(html) {
    const dom = new JSDOM(html);
    const document = dom.window.document;

    // Versuche verschiedene Selektoren
    const selectors = [
        '.hero-subtitle',
        '.hero-text',
        '.hero p',
        '.tutorial-hero p'
    ];

    for (const selector of selectors) {
        const element = document.querySelector(selector);
        if (element) {
            let text = element.textContent.trim();
            // Kürze auf max 160 Zeichen
            if (text.length > 160) {
                text = text.substring(0, 157) + '...';
            }
            return text;
        }
    }
    return null;
}

{
    "generated": "2025-01-06T12:00:00.000Z",
    "total": 42,
    "all": [...],           // Alle Tutorials
    "latest": [...],        // Die 4 aus LATEST_TUTORIALS
    "byCategory": {         // Gruppiert
        "html": [...],
        "css": [...],
        "javascript": [...]
    }
}

JavaScript Kopieren

/<!-- Main-Nav-Start -->.*?<!-- Main-Nav-End -->/s

HTML Kopieren

<!-- Main-Nav-Start -->
<li><a href="/tutorials/html/">HTML</a></li>
<li><a href="/tutorials/css/">CSS</a></li>
<!-- Main-Nav-End -->

JavaScript Kopieren

/<nav class="breadcrumbs">.*?<\/nav>/s

JavaScript Kopieren

console.log('Aktuelle Kategorie:', category);
console.log('Gefundene Tutorials:', tutorials);
console.log('Current Index:', currentIndex);