add makefile improvements and index generator

- add deploy-html, optimize-images, copy-assets targets - add scripts/generate-index.sh for slide overview - integrate index generation into html/build targets - deploy to 223015c path 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-19 17:01:55 +01:00
parent 75c28fba58
commit fa888ede32
3 changed files with 153 additions and 41 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -63,3 +63,4 @@ Desktop.ini
 *.pdf
 index.md.bak
 hdm-lehrauftrag-uebersicht.md
+slides/assets-original/
--- a/105
+++ b/105
@@ -1,21 +1,16 @@
 # Makefile for Marp Slides Project

-.PHONY: help build dev watch pdf html clean install deploy assemble
+.PHONY: help build dev watch pdf html clean install deploy deploy-html copy-assets optimize-images

-# Slide components
+# Directories
 SLIDES_DIR = slides
 BUILD_DIR = build
-HEADER = $(SLIDES_DIR)/_frontmatter.md
-INTRO = $(SLIDES_DIR)/_intro.md
-OUTRO = $(SLIDES_DIR)/_outro.md

-# Termin files (date-topic naming convention)
-TERMIN_1 = 2025-12-19-termin-1-grundlagen-text-audio
-TERMIN_2 = 2026-01-09-termin-2-bild-audio-video
-TERMIN_3 = 2026-01-23-termin-3-speichermedien-schnittstellen
-TERMIN_4 = 2026-01-30-termin-4-distribution-apis-zukunft
-TERMIN_5 = 2026-xx-xx-termin-5-vertiefung-offene-fragen
-TERMINS = $(TERMIN_1) $(TERMIN_2) $(TERMIN_3) $(TERMIN_4) $(TERMIN_5)
+# Termin files (date-topic naming convention) - each is self-contained
+TERMIN_1 = 2025-12-20-termin-1-geschichte-grundlagen-html
+TERMIN_2 = 2026-01-10-termin-2-netzwerke-protokolle-css
+TERMIN_3 = 2026-01-24-termin-3-interaktivitaet-javascript
+TERMINS = $(TERMIN_1) $(TERMIN_2) $(TERMIN_3)

 # Default target
 help:
@@ -29,27 +24,25 @@ help:
 	@echo "    make pdf        - Export all slides to PDF"
 	@echo "    make html       - Export all slides to HTML"
 	@echo ""
+	@echo "  Deploy:"
+	@echo "    make deploy     - Full build + deploy (HTML, PDF, assets)"
+	@echo "    make deploy-html - HTML only deploy (faster)"
+	@echo ""
 	@echo "  Other:"
-	@echo "    make assemble   - Assemble all termin files in build/"
+	@echo "    make optimize-images - Resize images to max 1920px"
 	@echo "    make clean      - Remove generated files"
 	@echo "    make install    - Install dependencies"
-	@echo "    make deploy     - Deploy slides to server"

 # Ensure build directory exists
 $(BUILD_DIR)/.exists:
 	@mkdir -p $(BUILD_DIR)
 	@touch $@

-# Assemble all termin files
-assemble: $(BUILD_DIR)/.exists
-	@echo "Assembling slides..."
-	@for f in $(TERMINS); do \
-		echo "  $$f.md"; \
-		cat $(HEADER) $(INTRO) $(SLIDES_DIR)/$$f.md $(OUTRO) > $(BUILD_DIR)/$$f.md; \
-	done
-	@echo "  all.md"
-	@cat $(HEADER) $(INTRO) $(foreach t,$(TERMINS),$(SLIDES_DIR)/$(t).md) $(OUTRO) > $(BUILD_DIR)/all.md
-	@cp -r $(SLIDES_DIR)/assets $(BUILD_DIR)/ 2>/dev/null || true
+# Copy assets and materials to build directory
+copy-assets: $(BUILD_DIR)/.exists
+	@echo "Copying assets..."
+	@cp -r $(SLIDES_DIR)/assets $(BUILD_DIR)/
+	@cp -r $(SLIDES_DIR)/materials $(BUILD_DIR)/ 2>/dev/null || true

 # Development server - serves slides/ directly with HMR
 dev:
@@ -58,30 +51,38 @@ dev:
 	PORT=1312 npx @marp-team/marp-cli --server $(SLIDES_DIR)/

 # Watch for changes
-watch: assemble
-	npx @marp-team/marp-cli --watch $(BUILD_DIR)/all.md
+watch:
+	npx @marp-team/marp-cli --watch $(SLIDES_DIR)/

 # Build all slides (HTML + PDF)
-build: assemble
+build: copy-assets
 	@echo "Building all slides..."
 	@for f in $(TERMINS); do \
 		echo "Building $$f..."; \
-		npx @marp-team/marp-cli $(BUILD_DIR)/$$f.md -o $(BUILD_DIR)/$$f.html; \
-		npx @marp-team/marp-cli $(BUILD_DIR)/$$f.md --pdf --allow-local-files -o $(BUILD_DIR)/$$f.pdf; \
+		npx @marp-team/marp-cli $(SLIDES_DIR)/$$f.md -o $(BUILD_DIR)/$$f.html; \
+		npx @marp-team/marp-cli $(SLIDES_DIR)/$$f.md --pdf --allow-local-files -o $(BUILD_DIR)/$$f.pdf; \
 	done
-	@echo "Building all.md..."
-	npx @marp-team/marp-cli $(BUILD_DIR)/all.md -o $(BUILD_DIR)/all.html
-	npx @marp-team/marp-cli $(BUILD_DIR)/all.md --pdf --allow-local-files -o $(BUILD_DIR)/all.pdf
+	@./scripts/generate-index.sh $(BUILD_DIR)
+	@echo "Done! Output in $(BUILD_DIR)/"

-# Export to PDF (all slides combined)
-pdf: assemble
+# Export all slides to PDF
+pdf: $(BUILD_DIR)/.exists
 	@echo "Exporting to PDF..."
-	npx @marp-team/marp-cli $(BUILD_DIR)/all.md --pdf --allow-local-files -o $(BUILD_DIR)/all.pdf
+	@for f in $(TERMINS); do \
+		echo "  $$f.pdf"; \
+		npx @marp-team/marp-cli $(SLIDES_DIR)/$$f.md --pdf --allow-local-files -o $(BUILD_DIR)/$$f.pdf; \
+	done
+	@echo "Done! PDFs in $(BUILD_DIR)/"

-# Export to HTML (all slides combined)
-html: assemble
+# Export all slides to HTML
+html: copy-assets
 	@echo "Exporting to HTML..."
-	npx @marp-team/marp-cli $(BUILD_DIR)/all.md -o $(BUILD_DIR)/all.html
+	@for f in $(TERMINS); do \
+		echo "  $$f.html"; \
+		npx @marp-team/marp-cli $(SLIDES_DIR)/$$f.md -o $(BUILD_DIR)/$$f.html; \
+	done
+	@./scripts/generate-index.sh $(BUILD_DIR)
+	@echo "Done! HTML files in $(BUILD_DIR)/"

 # Clean generated files
 clean:
@@ -93,8 +94,30 @@ install:
 	@echo "Installing dependencies..."
 	npm install

-# Deploy slides
+# Optimize images (resize to max 1920px, requires nix-shell -p imagemagick)
+optimize-images:
+	@echo "Backing up originals to assets-original/..."
+	@mkdir -p $(SLIDES_DIR)/assets-original
+	@cp $(SLIDES_DIR)/assets/*.png $(SLIDES_DIR)/assets-original/ 2>/dev/null || true
+	@cp $(SLIDES_DIR)/assets/*.jpg $(SLIDES_DIR)/assets-original/ 2>/dev/null || true
+	@echo "Resizing images to max 1920px..."
+	@nix-shell -p imagemagick --run 'for img in $(SLIDES_DIR)/assets/*.png; do magick "$$img" -resize "1920x>" -quality 85 "$$img"; done'
+	@nix-shell -p imagemagick --run 'for img in $(SLIDES_DIR)/assets/*.jpg; do magick "$$img" -resize "1920x>" -quality 85 "$$img"; done'
+	@echo "Done! Originals backed up in assets-original/"
+
+# Deploy slides (full build)
 deploy: build
 	@echo "Deploying slides..."
-	scp $(BUILD_DIR)/all.html tengo@tuttle.uberspace.de:/home/tengo/html/malta/index.html
-	scp -r $(BUILD_DIR)/assets/ tengo@tuttle.uberspace.de:/home/tengo/html/malta/
+	@echo "Copying HTML files..."
+	scp $(BUILD_DIR)/*.html tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015c/
+	@echo "Copying assets..."
+	scp -r $(BUILD_DIR)/assets/ tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015c/
+	@echo "Copying materials..."
+	scp -r $(BUILD_DIR)/materials/ tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015c/ 2>/dev/null || true
+
+# Deploy HTML only (faster, no PDF rebuild)
+deploy-html: html
+	@echo "Deploying HTML only..."
+	scp $(BUILD_DIR)/*.html tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015c/
+	scp -r $(BUILD_DIR)/assets/ tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015c/
+	scp -r $(BUILD_DIR)/materials/ tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015c/ 2>/dev/null || true
--- a/scripts/generate-index.sh
+++ b/scripts/generate-index.sh
@@ -0,0 +1,88 @@
+#!/usr/bin/env bash
+# Generate index.html for slide overview
+
+BUILD_DIR="${1:-build}"
+
+cat > "$BUILD_DIR/index.html" << 'HEADER'
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>223015c - Internettechnologien</title>
+  <style>
+    * { box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      max-width: 800px;
+      margin: 0 auto;
+      padding: 2rem;
+      background: #1a1a2e;
+      color: #eee;
+    }
+    h1 { color: #fff; margin-bottom: 0.5rem; }
+    .subtitle { color: #888; margin-bottom: 2rem; }
+    .termin {
+      background: #16213e;
+      border-radius: 8px;
+      padding: 1.5rem;
+      margin-bottom: 1rem;
+      text-decoration: none;
+      display: block;
+      transition: transform 0.2s, background 0.2s;
+    }
+    .termin:hover { background: #1f4068; transform: translateX(5px); }
+    .termin h2 { color: #fff; margin: 0 0 0.5rem 0; font-size: 1.2rem; }
+    .termin .date { color: #4ecca3; font-size: 0.9rem; }
+    .termin .topic { color: #aaa; font-size: 0.95rem; margin-left: 1rem; }
+    footer { margin-top: 2rem; color: #666; font-size: 0.85rem; text-align: center; }
+    footer a { color: #4ecca3; }
+  </style>
+</head>
+<body>
+  <h1>223015c</h1>
+  <p class="subtitle">Internettechnologien<br>
+  HdM Stuttgart - WS 2025/26 - Michael Czechowski</p>
+HEADER
+
+# Generate links for each termin (sorted)
+for html in $(ls "$BUILD_DIR"/2*.html 2>/dev/null | sort); do
+  filename=$(basename "$html")
+
+  # Extract components from filename
+  # Format: 2025-12-20-termin-1-geschichte-grundlagen-html.html
+  date=$(echo "$filename" | grep -oE '^[0-9]{4}-[0-9]{2}-[0-9]{2}')
+  termin_num=$(echo "$filename" | grep -oE 'termin-[0-9]+' | grep -oE '[0-9]+')
+  topic_raw=$(echo "$filename" | sed -E 's/^[0-9]{4}-[0-9]{2}-[0-9]{2}-termin-[0-9]+-//' | sed 's/\.html$//')
+
+  # Format topic: replace - with space, capitalize
+  topic=$(echo "$topic_raw" | sed 's/-/ /g' | sed 's/.*/\u&/')
+
+  # Format date
+  if [[ "$date" =~ ^[0-9]{4}-[0-9]{2}-[0-9]{2}$ ]]; then
+    formatted_date=$(date -d "$date" "+%d.%m.%Y" 2>/dev/null || echo "$date")
+  else
+    formatted_date="TBA"
+  fi
+
+  termin_label="Termin $termin_num"
+
+  cat >> "$BUILD_DIR/index.html" << LINK
+  <a href="$filename" class="termin">
+    <h2>$termin_label</h2>
+    <span class="date">$formatted_date</span>
+    <span class="topic">$topic</span>
+  </a>
+LINK
+done
+
+cat >> "$BUILD_DIR/index.html" << 'FOOTER'
+  <footer>
+    <a href="https://git.librete.ch/hdm/223015c">Git Repository</a> -
+    <a href="mailto:mail@librete.ch">Kontakt</a>
+  </footer>
+</body>
+</html>
+FOOTER
+
+echo "Generated $BUILD_DIR/index.html"