]> juplo.de Git - website/commitdiff
Schritt 1: Funktionsinventar für Hugo → Astro Migration
authorKai Moritz <kai.milan.moritz@googlemail.com>
Fri, 5 Jun 2026 20:49:11 +0000 (20:49 +0000)
committerKai Moritz <kai.milan.moritz@googlemail.com>
Fri, 5 Jun 2026 20:49:11 +0000 (20:49 +0000)
Vollständige Analyse des Hugo-Projekts:
- 75 Blog-Posts (2012–2021) mit Flat-URLs via Frontmatter
- 8 Jahres-Archive, Taxonomien (Categories + Tags)
- 4 Shortcodes, komplexe Navigation mit 2 Varianten
- SCSS mit 5 Breakpoints + Print + Resurrection-CSS
- Layout-Varianten Classic/Resurrection/None via localStorage

inventory.md listet alle Features und ihre geplanten Astro-Äquivalente.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
inventory.md [new file with mode: 0644]

diff --git a/inventory.md b/inventory.md
new file mode 100644 (file)
index 0000000..5086400
--- /dev/null
@@ -0,0 +1,194 @@
+# Funktionsinventar: Hugo → Astro Migration
+
+## Content-Struktur
+
+### Seiten-Typen und Dateien
+
+| Typ | Pfad | Anzahl | Besonderheiten |
+|-----|------|--------|----------------|
+| Startseite | `content/_index.md` | 1 | HTML-Content, Shortcodes, explizite `url: /` |
+| Blog-Index | `content/blog/_index.html` | 1 | Titel, weight |
+| Blog-Jahres-Index | `content/blog/archive/YYYY/_index.md` | 8 | 2012–2021, `layout: year` |
+| Blog-Artikel | `content/blog/archive/YYYY/*.md` | 75 | Explizite `url:` im Frontmatter (Flat-URL) |
+| Projects-Index | `content/projects/_index.md` | 1 | HTML-Content, explizite `url: /projects/` |
+| About-Sektion | `content/about/_index.html` | 1 | HTML-Content, `url: /about.html` |
+| Impressum | `content/about/impressum/_index.html` | 1 | `url: /impressum.html` |
+| Rechtliche Unterseiten | `content/about/impressum/*.html` | 6 | Datenschutz, AGB, Haftung, etc. |
+| Contact | `content/about/contact.html` | 1 | `url: /contact.html` |
+
+### Content-Besonderheiten
+- Blog-Posts haben **explizite Flat-URLs** im Frontmatter (`url: /post-slug/`), nicht hierarchisch
+- Viele Seiten enthalten **rohen HTML**-Content (kein reines Markdown)
+- Frontmatter enthält Legacy-Felder aus WordPress-Export (`post_id`, `guid`, `_edit_last`, etc.)
+- Projects-Sektion enthält generierte Maven-Site-Dokumentation als statische HTML-Dateien
+
+---
+
+## URL-Struktur
+
+| Route | Beschreibung |
+|-------|--------------|
+| `/` | Startseite |
+| `/blog/` | Blog-Index (letzte 3 Posts + Jahresarchiv + Taxonomien) |
+| `/blog/archive/` | Archiv-Übersicht |
+| `/blog/archive/YYYY/` | Jahres-Archiv |
+| `/post-slug/` | Einzelner Blog-Post (Flat-URL via Frontmatter) |
+| `/projects/` | Projects-Index |
+| `/hibernate-maven-plugin/` | Maven-Site-Doku (statisch, aus `static/`) |
+| `/about.html` | About-Seite |
+| `/impressum.html` | Impressum |
+| `/contact.html` | Kontakt |
+| `/categories/` | Kategorien-Übersicht |
+| `/categories/TERM/` | Einzelne Kategorie |
+| `/tags/` | Tags-Übersicht |
+| `/tags/TERM/` | Einzelner Tag |
+
+---
+
+## Taxonomien
+
+- **categories**: howto, tips, explained, … (ca. 3 Kategorien)
+- **tags**: hibernate, java, maven, spring, docker, kafka, … (viele)
+
+---
+
+## Shortcodes
+
+| Shortcode | Verwendung | Astro-Äquivalent |
+|-----------|------------|------------------|
+| `{{< recent-posts >}}` | Startseite: Liste der 5 neuesten Posts | Astro-Komponente mit `getCollection()` |
+| `{{< marginalcontent-md >}}...{{</ >}}` | Markdown-Content in Marginal-Bereich | Astro-Slot oder Props |
+| `{{< marginalcontent-html >}}...{{</ >}}` | HTML-Content in Marginal-Bereich | Astro-Slot oder Props |
+| `{{< footerlinks >}}...{{</ >}}` | Eigene Footer-Links (statt Standard) | Astro-Slot oder Props |
+
+---
+
+## Layout-Struktur
+
+### HTML-Gerüst (aus `baseof.html`)
+
+```
+body#top.menu
+  div#page.cf
+    header#header          ← Logo + Slogan
+    [breadcrumb]           ← Pfad-Navigation (überschreibbar)
+    main.content.cf
+      article#content.main ← Haupt-Content (Block: article → title + content)
+      div.marginal
+        nav#nav            ← Block: menu (Navigationsbaum)
+        [asides.m]         ← Block: marginalcontent (Taxonomien, Custom)
+    footer#footer          ← Copyright, Footer-Links, Layout-Switcher
+```
+
+### Layout-Varianten (data-layout auf `<html>`)
+- **classic**: Original-Layout (Standard)
+- **resurrection**: Alternatives CSS-Layout
+- **none**: Kein Layout-CSS
+
+Umschaltbar per Klick im Footer. Wert wird in `localStorage` gespeichert und beim Laden sofort gesetzt (via inline `<script>` im `<head>`, vor CSS-Load, um FOUC zu vermeiden).
+
+### Template-Dateien → Astro-Äquivalente
+
+| Hugo-Template | Seiten-Typ | Astro-Äquivalent |
+|---------------|------------|-----------------|
+| `baseof.html` | Alle | `layouts/BaseLayout.astro` |
+| `index.html` | Startseite | `pages/index.astro` |
+| `section.html` | Generische Sektionen | `layouts/SectionLayout.astro` |
+| `article.html` | Generische Artikel | `layouts/ArticleLayout.astro` |
+| `page.html` | Standalone-Seiten | `layouts/PageLayout.astro` |
+| `blog/section.html` | `/blog/` | `pages/blog/index.astro` |
+| `blog/archive/section.html` | `/blog/archive/` | `pages/blog/archive/index.astro` |
+| `blog/archive/year.html` | `/blog/archive/YYYY/` | `pages/blog/archive/[year].astro` |
+| `blog/archive/page.html` | Blog-Post | `layouts/BlogPostLayout.astro` |
+| `categories/taxonomy.html` | `/categories/` | `pages/categories/index.astro` |
+| `categories/term.html` | `/categories/TERM/` | `pages/categories/[category].astro` |
+| `tags/taxonomy.html` | `/tags/` | `pages/tags/index.astro` |
+| `tags/term.html` | `/tags/TERM/` | `pages/tags/[tag].astro` |
+
+---
+
+## Navigation (komplexeste Logik)
+
+### Ebene 1 – Section-Menu (`#menu`)
+- Links zu den `MainSections`: blog, projects, about
+- Aktive Sektion erhält `class="m selected"` am `<a>`
+
+### Ebene 2 – Sub-Menu (`#submenu`)
+Drei Varianten je nach aktuellem Seiten-Typ:
+
+**Standard (menu/default.html):** Vollständiger Site-Baum via rekursivem Partial `menu/tree.html`
+- Items mit Kindern: Klasse `sub`
+- Items außerhalb des aktuellen Pfads: Klasse `off`
+- Aktiver Link + Vorfahren: `class="s selected"`, Text in `<strong>`
+- Sonderlogik für `/projects/`: Nur Pages mit `current: true` im Frontmatter werden angezeigt (außer der aktuell besuchten Version)
+
+**Blog (menu/blog.html):** Speziell für Blog-Bereich
+- Zeigt Archive-Baum mit Jahres-Ebene und Posts-Ebene
+- Kategorien und Tags als separate Unterbäume (nur sichtbar auf Blog-Index, `off` auf Post-Seiten)
+- Blatt-Knoten (einzelne Posts) erhalten Klasse `nav-leaf`
+
+---
+
+## Assets
+
+### SCSS / CSS
+- Haupt-SCSS: `themes/hugo-juplo/assets/scss/screen.scss` → kompiliert zu `screen.css`
+- Resurrection-CSS: `themes/hugo-juplo/assets/css/resurrection.css` (natives CSS, kein SCSS)
+- Print-SCSS: `themes/hugo-juplo/assets/scss/print.scss`
+- 5 Breakpoints: screen (1440px), tablet (939px), small-tablet (800px), smaller-tablet (700px), phone (390px), tiny (280px)
+
+### JavaScript
+- `themes/hugo-juplo/assets/js/main.js`: Layout-Switcher
+- Inline-Script im `<head>`: Liest `localStorage('layout')` und setzt `data-layout` auf `<html>` vor CSS-Load (FOUC-Prevention)
+
+### Fonts
+- BPreplay (Regular, Bold, Italic, BoldItalic) — in `themes/hugo-juplo/static/fonts/`
+- DroidSerif (Regular, Bold, Italic, BoldItalic)
+- Symbols (Icon-Font)
+
+### Statische Dateien (→ Astro `public/`)
+- `themes/hugo-juplo/static/` → favicon, fonts, img (logo, EFRE, Ziel2NRW), js/html5shiv.js
+- `static/hibernate4-maven-plugin-*/` → Maven-Site-Outputs (alt, Plugin-Dokumentation)
+- `static/projects/` → Maven-Site für hibernate-maven-plugin (2.0.0–2.1.2-SNAPSHOT)
+- `static/wp-uploads/` → WordPress-Upload-Verzeichnis (Bilder, Dateien)
+- `static/img/wip.gif` etc.
+
+---
+
+## Data-Dateien
+
+| Datei | Inhalt | Verwendung |
+|-------|--------|------------|
+| `data/comments.yaml` | Blog-Kommentare (aus WordPress-Export) | Aktuell nicht gerendert (kein Template) |
+| `data/library.yaml` | WordPress-Upload-Bibliothek | Aktuell nicht gerendert |
+
+---
+
+## SEO & Meta
+
+- Kanonische URL (`<link rel="canonical">`)
+- Title: `Seitentitel | juplo` (Startseite: nur `juplo`)
+- Kein OpenGraph (aktuell)
+- Kein RSS (aktuell nicht in den Templates referenziert)
+- Author-Meta: `kai@juplo.de` / Kai Moritz
+
+---
+
+## Was Astro nachbilden muss
+
+### Muss (für Vollständigkeit)
+1. Alle 75 Blog-Posts unter ihren Original-URLs (Flat-URLs aus Frontmatter)
+2. Blog-Index, Jahres-Archive
+3. Taxonomie-Seiten (Kategorien + Tags)
+4. About/Impressum/Contact-Seiten
+5. Startseite mit Recent-Posts und Marginal-Content
+6. Navigation mit allen CSS-Klassen (identisches Markup)
+7. Layout-Varianten (Classic/Resurrection/None) via `data-layout` + localStorage
+8. SCSS kompilieren (screen.scss, print.scss) + resurrection.css einbinden
+9. Fonts einbinden
+10. Statische Assets aus `static/` unter gleichen URLs verfügbar
+
+### Optional / Niedrige Priorität
+- `data/comments.yaml` rendern (aktuell nicht gerendert in Hugo)
+- `archives.md` und `search.md` (spezielle Layouts, die Hugo nicht wirklich auflöst)
+- Projekte-Dokumentation (nur statische Dateien, keine Template-Logik)