Latest Tutorials Section

Wie es funktioniert

Die Latest Tutorials Section besteht aus drei Komponenten, die zusammenarbeiten:

Beim npm run build passiert Folgendes:

1. Das Script liest alle Tutorials aus TUTORIAL_ORDER
2. Für jedes Tutorial wird der Titel (aus H1 oder CUSTOM_TITLES ) und der Excerpt (aus .hero-subtitle ) extrahiert
3. Die Daten werden in /assets/data/tutorials.json gespeichert
4. Im Browser lädt latest-tutorials.js diese JSON und erstellt die Cards

Die LATEST_TUTORIALS Konfiguration

Welche Tutorials hier erscheinen, wird in LATEST_TUTORIALS in der generate-navigation.js definiert.

In generate-navigation.js findest du die Konstante:

javascript Kopieren

// Die neuesten Tutorials (manuell gepflegt)
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'
];

Variante 1: Startseite (Home)

Auf der Startseite werden die 4 Tutorials aus LATEST_TUTORIALS angezeigt - kategorieübergreifend.

HTML-Struktur

HTML Kopieren

<!-- Latest Tutorials Section -->
<section class="categories">
    <h2>Zuletzt hinzugefügt</h2>
    <div id="latestTutorials" class="tutorials-grid">
        <!-- Wird per JavaScript aus /assets/data/tutorials.json geladen -->
        <p class="text-muted">Tutorials werden geladen...</p>
    </div>
</section>

Wichtig

• Die ID muss latestTutorials sein
• Kein data-category Attribut nötig
• Das Script latest-tutorials.js muss eingebunden sein

Variante 2: Kategorieseiten

Auf Kategorieseiten (z.B. /tutorials/css/index.html ) werden die neuesten Tutorials dieser Kategorie angezeigt.

HTML-Struktur

HTML Kopieren

<!-- Latest Tutorials Section -->
<section class="categories">
    <h2>Zuletzt hinzugefügt</h2>
    <div id="categoryLatestTutorials" class="tutorials-grid" data-category="css">
        <!-- Wird per JavaScript aus /assets/data/tutorials.json geladen -->
        <p class="text-muted">Tutorials werden geladen...</p>
    </div>
</section>

Wichtig

• Die ID muss categoryLatestTutorials sein
• Das data-category Attribut bestimmt die Kategorie
• Gültige Werte: html , css , javascript , php , bootstrap , misc , devpaniczone

Was passiert im Browser?

Das Script liest data-category aus und filtert die Tutorials aus data.byCategory[category] . Es zeigt die letzten 4 dieser Kategorie.

Variante 3: In einzelnen Tutorials

Am Ende jedes Tutorials (vor den Prev/Next Buttons) werden verwandte Tutorials der gleichen Kategorie angezeigt - als "Mehr aus [Kategorie]".

Automatische Generierung

Diese Section wird automatisch durch generate-navigation.js eingefügt! Du musst sie nicht manuell anlegen.

Das Script fügt die Section zwischen den Markern ein (oder erstellt sie neu):

HTML Kopieren

<!-- Latest-Tutorials-Start -->
<section class="categories">
    <h2 id="mehr-aus-css">Mehr aus CSS</h2>
    <div id="categoryLatestTutorials" class="tutorials-grid" data-category="css">
        <!-- Wird per JavaScript aus /assets/data/tutorials.json geladen -->
        <p class="text-muted">Tutorials werden geladen...</p>
    </div>
</section>
<!-- Latest-Tutorials-End -->

<!-- Prev/Next Navigation -->
<section class="tutorials-content">
    <nav class="tutorial-nav"></nav>
</section>

Automatisch vs. Manuell

• Kategorie: Wird automatisch aus dem Dateipfad ermittelt
• Überschrift: "Mehr aus [Kategorie]" wird automatisch generiert
• ID für H2: Wird automatisch erstellt (z.B. mehr-aus-css )
• data-category: Wird automatisch gesetzt

Script einbinden

Das Script ist bereits im FOOTER_TEMPLATE enthalten und wird automatisch auf allen Seiten eingebunden:

HTML Kopieren

<script src="/assets/js/latest-tutorials.js" defer></script>

Die tutorials.json Struktur

Die generierte JSON-Datei in /assets/data/tutorials.json hat folgende Struktur:

JSON Kopieren

{
  "generated": "2025-06-03T18:23:43.522Z",
  "total": 41,
  "all": [
    // Alle Tutorials
  ],
  "latest": [
    // Die 4 aus LATEST_TUTORIALS
    {
      "title": "CSS Organisation",
      "excerpt": "Wie du dein CSS strukturierst...",
      "url": "/tutorials/css/css-specials/css-organization.html",
      "category": "css",
      "categoryDisplay": "CSS",
      "subcategory": "css-specials",
      "subcategoryDisplay": "CSS Specials",
      "badgeClass": "card-badge-css"
    }
  ],
  "byCategory": {
    "html": [ /* HTML Tutorials */ ],
    "css": [ /* CSS Tutorials */ ],
    "bootstrap": [ /* Bootstrap Tutorials */ ],
    "javascript": [ /* JS Tutorials */ ],
    "php": [ /* PHP Tutorials */ ],
    "misc": [ /* Misc Tutorials */ ],
    "devpaniczone": [ /* DevPanicZone Tutorials */ ]
  }
}

Das Frontend Script

Die Datei /assets/js/latest-tutorials.js ist verantwortlich für das Laden und Rendern der Cards.

Die createTutorialCard Funktion

Diese Funktion erstellt das HTML für jede Card:

javascript Kopieren

function createTutorialCard(tutorial) {
    const card = document.createElement('article');
    card.className = 'tutorial-card';
    
    card.innerHTML = `
        <a href="${tutorial.url}">
            <span class="card-badge ${tutorial.badgeClass}">
                ${tutorial.categoryDisplay}
            </span>
            <h3 class="card-title">${tutorial.title}</h3>
            <p class="card-description">
                ${tutorial.excerpt || 'Tutorial entdecken...'}
            </p>
            <span class="card-link">Tutorial lesen →</span>
        </a>
    `;
    
    return card;
}

Container-Erkennung

Das Script prüft automatisch, welcher Container vorhanden ist:

javascript Kopieren

// Startseite: Neueste Tutorials (aus LATEST_TUTORIALS)
if (latestContainer) {
    renderLatestTutorials(latestContainer, data.latest);
}

// Kategorieseite: Tutorials dieser Kategorie
if (categoryContainer) {
    const category = categoryContainer.dataset.category;
    const latestInCategory = data.byCategory[category].slice(-4).reverse();
    renderLatestTutorials(categoryContainer, latestInCategory);
}

CSS Styling

Die Styles für die Tutorial Cards befinden sich in /assets/css/components.css :

Das Grid

CSS Kopieren

/* Tutorial Grid: 1 Spalte mobil, 2 Spalten Desktop */
.tutorials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .tutorials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

Die Cards

CSS Kopieren

.tutorial-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    transition: all 0.2s ease;
}

.tutorial-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

Farbcodierte Badges

CSS Kopieren

.card-badge-html { background: var(--accent-blue); }
.card-badge-css { background: var(--accent-green); }
.card-badge-bootstrap { background: var(--accent-purple); }
.card-badge-javascript { background: var(--accent-orange); }
.card-badge-php { background: var(--accent-cyan); }
.card-badge-misc { background: var(--accent-red); }

Zusammenfassung

Checkliste für neue Tutorials

1. Tutorial in TUTORIAL_ORDER eintragen
2. Optional: In LATEST_TUTORIALS oben einfügen
3. npm run build ausführen
4. Fertig! Die JSON wird automatisch aktualisiert