DevPanicZone Logo DevPanicZone! Cheatsheets.

Latest Tutorials Section

Die "Zuletzt hinzugefügt" Section zeigt dynamisch die neuesten Tutorials an – auf der Startseite, Kategorieseiten und in einzelnen Tutorials. Alles basiert auf einer automatisch generierten JSON-Datei.

Wie es funktioniert

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

Die drei Bausteine
  • generate-navigation.js – Erstellt beim Build die JSON-Datei mit allen Tutorial-Metadaten
  • tutorials.json – Enthält Titel, Excerpt, URL und Kategorie aller Tutorials
  • latest-tutorials.js – Lädt die JSON und rendert die Cards im Browser

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 
// 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'
];

Neues Tutorial hinzufügen

  1. Den Pfad oben in LATEST_TUTORIALS einfügen
  2. Den untersten Eintrag entfernen (um bei 4 zu bleiben)
  3. npm run build ausführen

Variante 1: Startseite (Home)

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

HTML-Struktur

HTML 
<!-- 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

Was passiert im Browser?

Das Script latest-tutorials.js sucht nach #latestTutorials und lädt die 4 Einträge aus data.latest in der JSON.

Variante 2: Kategorieseiten

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

HTML-Struktur

HTML 
<!-- 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, misc, documentation

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]".

HTML-Struktur

Die Struktur ist identisch mit Variante 2:

HTML 
<!-- Latest Tutorials Section -->
<section class="categories">
    <h2>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>

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

Das Tutorial-Template enthält diese Section bereits. Wichtig: die data-category auf die richtige Kategorie setzen (oder es wird automatisch durch generate-navigation.js gesetzt).

Script einbinden nicht vergessen!

Das Script muss am Ende der Seite eingebunden sein:

<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 
{
  "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 */ ],
    "javascript": [ /* JS Tutorials */ ],
    "php": [ /* PHP Tutorials */ ],
    "misc": [ /* Misc Tutorials */ ],
    "documentation": [ /* DevPanicZone Tutorials */ ]
  }
}

Woher kommen die Daten?

Feld Quelle
title CUSTOM_TITLES oder H1 der Seite
excerpt .hero-subtitle oder .hero-text (max. 160 Zeichen)
url Dateipfad relativ zum Root
category Ordnername (html, css, etc.)
badgeClass Generiert aus Kategorie für CSS-Styling

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 
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 
// 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 
/* 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 
.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 
.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

Startseite

  • ID: #latestTutorials
  • Zeigt: Die 4 aus LATEST_TUTORIALS
  • Manuell gepflegt

Kategorieseiten & Tutorials

  • ID: #categoryLatestTutorials
  • Attribut: data-category="xxx"
  • Zeigt: Die letzten 4 der Kategorie

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

Mehr aus DevPanicZone!

Tutorials werden geladen...