378 lines
11 KiB
Bash
Executable File
378 lines
11 KiB
Bash
Executable File
#!/usr/bin/env bash
|
|
# Generate index.html for slide overview
|
|
# Usage: ./generate-index.sh <course_id> <build_dir>
|
|
|
|
COURSE="${1:-223015b}"
|
|
BUILD_DIR="${2:-build/$COURSE}"
|
|
|
|
# Course-specific configuration
|
|
case "$COURSE" in
|
|
223015b)
|
|
TITLE="Dateiformate, Schnittstellen, Speichermedien & Distributionswege"
|
|
SUBTITLE="223015b · Modul \"Technik 1\" · 1. Semester"
|
|
SLIDES_URL="https://librete.ch/hdm/223015b"
|
|
ACCENT_COLOR="#1e5f8a"
|
|
ACCENT_LIGHT="#e8f4fc"
|
|
;;
|
|
223015c)
|
|
TITLE="Grundlagen IT- und Internettechnik"
|
|
SUBTITLE="223015c · Modul \"Technik 1\" · 1. Semester"
|
|
SLIDES_URL="https://librete.ch/hdm/223015c"
|
|
ACCENT_COLOR="#d63384"
|
|
ACCENT_LIGHT="#fce4ec"
|
|
;;
|
|
*)
|
|
TITLE="$COURSE - HdM Slides"
|
|
SUBTITLE="Lecture Slides"
|
|
SLIDES_URL="https://librete.ch/hdm/$COURSE"
|
|
ACCENT_COLOR="#0066cc"
|
|
ACCENT_LIGHT="#e8f4fc"
|
|
;;
|
|
esac
|
|
|
|
# Topic mappings for nice German titles
|
|
declare -A TOPIC_MAP
|
|
TOPIC_MAP["intro"]="Einführung"
|
|
TOPIC_MAP["grundlagen-text-audio"]="Grundlagen, Text & Audio"
|
|
TOPIC_MAP["bild-audio-video"]="Bild, Audio & Video"
|
|
TOPIC_MAP["speichermedien-schnittstellen"]="Speichermedien & Schnittstellen"
|
|
TOPIC_MAP["distribution-apis-zukunft"]="Distribution, APIs & Zukunft"
|
|
TOPIC_MAP["vertiefung-offene-fragen"]="Vertiefung & Offene Fragen"
|
|
TOPIC_MAP["geschichte-grundlagen-html"]="Geschichte, Grundlagen & HTML"
|
|
TOPIC_MAP["netzwerke-protokolle-css"]="Netzwerke, Protokolle & CSS"
|
|
TOPIC_MAP["interaktivitaet-javascript"]="Interaktivität & JavaScript"
|
|
|
|
# Configure which topics should appear disabled per course
|
|
# Two modes: fully disabled (non-clickable card) and buttons-disabled (link remains clickable, buttons are disabled)
|
|
declare -A DISABLED_FULL
|
|
declare -A DISABLED_BUTTONS
|
|
# For course B: chapters 3,4,5 should be fully disabled
|
|
DISABLED_FULL["223015b"]="speichermedien-schnittstellen distribution-apis-zukunft vertiefung-offene-fragen"
|
|
# For course C: chapter 3 should keep link clickable but buttons disabled
|
|
DISABLED_BUTTONS["223015c"]="interaktivitaet-javascript"
|
|
|
|
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>$TITLE</title>
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
|
|
max-width: 720px;
|
|
margin: 0 auto;
|
|
padding: 3rem 1.5rem;
|
|
background: #fafafa;
|
|
color: #1d1d1f;
|
|
line-height: 1.5;
|
|
}
|
|
header { margin-bottom: 2rem; }
|
|
.breadcrumb {
|
|
margin-bottom: 1rem;
|
|
font-size: 0.85rem;
|
|
}
|
|
.breadcrumb a {
|
|
color: #86868b;
|
|
text-decoration: none;
|
|
}
|
|
.breadcrumb a:hover { text-decoration: underline; }
|
|
h1 {
|
|
font-size: 1.75rem;
|
|
font-weight: 600;
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: 0.5rem;
|
|
color: $ACCENT_COLOR;
|
|
}
|
|
.course-heading {
|
|
font-size: 1.25rem;
|
|
font-weight: 500;
|
|
color: #1d1d1f;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
.subtitle {
|
|
color: #86868b;
|
|
font-size: 0.95rem;
|
|
}
|
|
.meta {
|
|
color: #86868b;
|
|
font-size: 0.875rem;
|
|
margin-top: 0.25rem;
|
|
}
|
|
/* Use the .termine wrapper and add a gap between cards */
|
|
.termine {
|
|
margin-top: 1.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
.kapitel-card {
|
|
position: relative;
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
|
transition: all 0.2s ease;
|
|
display: grid;
|
|
grid-template-columns: 1fr auto auto;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 0; /* inner padding handled by kapitel-link */
|
|
}
|
|
.kapitel-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
|
|
}
|
|
.kapitel-link {
|
|
display: block;
|
|
padding: 1.25rem 1.5rem;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
grid-column: 1;
|
|
}
|
|
/* Disabled look: dim the entire card and prevent pointer events */
|
|
.kapitel-card.disabled { opacity: 0.6; pointer-events: none; }
|
|
.kapitel-label {
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
color: $ACCENT_COLOR;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.kapitel-title {
|
|
font-size: 1.05rem;
|
|
font-weight: 500;
|
|
color: #1d1d1f;
|
|
margin: 0.15rem 0;
|
|
}
|
|
.kapitel-date {
|
|
font-size: 0.8rem;
|
|
color: #86868b;
|
|
}
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
transition: all 0.2s;
|
|
white-space: nowrap;
|
|
position: relative;
|
|
z-index: 1;
|
|
margin-right: 0.5rem;
|
|
}
|
|
.btn-slides {
|
|
background: $ACCENT_COLOR;
|
|
color: #fff;
|
|
}
|
|
.btn-slides:hover {
|
|
filter: brightness(1.1);
|
|
}
|
|
.btn-pdf {
|
|
background: #f5f5f7;
|
|
color: #1d1d1f;
|
|
}
|
|
.btn-pdf:hover { background: #e8e8ed; }
|
|
.btn-disabled { opacity: 0.6; pointer-events: none; }
|
|
/* Make entire card clickable via overlay */
|
|
.kapitel-link::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 12px;
|
|
}
|
|
footer {
|
|
margin-top: 2.5rem;
|
|
padding-top: 1.5rem;
|
|
border-top: 1px solid #e5e5e7;
|
|
color: #86868b;
|
|
font-size: 0.85rem;
|
|
}
|
|
footer a { color: $ACCENT_COLOR; text-decoration: none; }
|
|
footer a:hover { text-decoration: underline; }
|
|
.qr-section {
|
|
margin-top: 2.5rem;
|
|
padding: 1.5rem;
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
|
text-align: center;
|
|
}
|
|
.qr-code {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
.qr-url {
|
|
margin-top: 0.75rem;
|
|
font-size: 0.85rem;
|
|
color: #86868b;
|
|
}
|
|
@media (max-width: 600px) {
|
|
.kapitel-card {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.kapitel-link {
|
|
padding-bottom: 0.75rem;
|
|
}
|
|
.btn-slides, .btn-pdf {
|
|
margin: 0 1rem 1rem 1.5rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<p class="breadcrumb"><a href="../">← Kursübersicht</a></p>
|
|
<h1>HdM Vorlesungen</h1>
|
|
<h2 class="course-heading">$TITLE</h2>
|
|
<p class="subtitle">$SUBTITLE</p>
|
|
<p class="meta">HdM Stuttgart · Sommersemester 2026 · Michael Czechowski</p>
|
|
</header>
|
|
<div class="termine">
|
|
HEADER
|
|
|
|
# Generate links for each kapitel (sorted)
|
|
for html in $(ls "$BUILD_DIR"/[0-9][0-9]-*.html 2>/dev/null | sort); do
|
|
filename=$(basename "$html")
|
|
|
|
# Extract components from filename (format: NN-topic.html)
|
|
kapitel_num=$(echo "$filename" | grep -oE '^[0-9]+' | sed 's/^0*//')
|
|
topic_raw=$(echo "$filename" | sed -E 's/^[0-9]+-//' | sed 's/\.html$//')
|
|
|
|
# Look up nice topic name or fallback
|
|
topic="${TOPIC_MAP[$topic_raw]}"
|
|
if [[ -z "$topic" ]]; then
|
|
topic=$(echo "$topic_raw" | sed 's/-/ /g' | sed 's/.*/\\u&/')
|
|
fi
|
|
|
|
# Handle kapitel number
|
|
if [[ "$kapitel_num" == "0" ]] || [[ -z "$kapitel_num" ]]; then
|
|
kapitel_label="Einführung"
|
|
else
|
|
kapitel_label="Kapitel $kapitel_num"
|
|
fi
|
|
|
|
pdf_filename="${filename%.html}.pdf"
|
|
|
|
# Determine whether this topic is configured as disabled for this course
|
|
disabled_full=false
|
|
disabled_buttons=false
|
|
for t in ${DISABLED_FULL["$COURSE"]}; do
|
|
if [[ "$topic_raw" == "$t" ]]; then
|
|
disabled_full=true
|
|
break
|
|
fi
|
|
done
|
|
if [[ "$disabled_full" == false ]]; then
|
|
for t in ${DISABLED_BUTTONS["$COURSE"]}; do
|
|
if [[ "$topic_raw" == "$t" ]]; then
|
|
disabled_buttons=true
|
|
break
|
|
fi
|
|
done
|
|
fi
|
|
|
|
# Decide card class
|
|
card_class="kapitel-card"
|
|
if [[ "$disabled_full" == true ]] || [[ "$disabled_buttons" == true ]]; then
|
|
card_class="$card_class disabled"
|
|
fi
|
|
|
|
# Build link/button HTML depending on disabled state
|
|
if [[ "$disabled_full" == true ]]; then
|
|
# non-interactive card (visually dimmed and not clickable)
|
|
link_html="<div class=\"kapitel-link\"><div class=\"kapitel-label\">$kapitel_label</div><div class=\"kapitel-title\">$topic</div></div>"
|
|
slides_html="<span class=\"btn btn-slides btn-disabled\">Folien</span>"
|
|
pdf_html=""
|
|
if [[ -f "$BUILD_DIR/$pdf_filename" ]]; then
|
|
pdf_html="<span class=\"btn btn-pdf btn-disabled\">PDF</span>"
|
|
fi
|
|
elif [[ "$disabled_buttons" == true ]]; then
|
|
# link stays clickable, but buttons are disabled; card appears dimmed
|
|
link_html="<a href=\"$filename\" class=\"kapitel-link\"><div class=\"kapitel-label\">$kapitel_label</div><div class=\"kapitel-title\">$topic</div></a>"
|
|
slides_html="<span class=\"btn btn-slides btn-disabled\">Folien</span>"
|
|
pdf_html=""
|
|
if [[ -f "$BUILD_DIR/$pdf_filename" ]]; then
|
|
pdf_html="<span class=\"btn btn-pdf btn-disabled\">PDF</span>"
|
|
fi
|
|
else
|
|
# normal interactive card
|
|
pdf_link=""
|
|
if [[ -f "$BUILD_DIR/$pdf_filename" ]]; then
|
|
pdf_link="<a href=\"$pdf_filename\" class=\"btn btn-pdf\">PDF</a>"
|
|
fi
|
|
link_html="<a href=\"$filename\" class=\"kapitel-link\"><div class=\"kapitel-label\">$kapitel_label</div><div class=\"kapitel-title\">$topic</div></a>"
|
|
slides_html="<a href=\"$filename\" class=\"btn btn-slides\">Folien</a>"
|
|
pdf_html="$pdf_link"
|
|
fi
|
|
|
|
cat >> "$BUILD_DIR/index.html" << LINK
|
|
<div class="$card_class">
|
|
$link_html
|
|
$slides_html
|
|
$pdf_html
|
|
</div>
|
|
LINK
|
|
|
|
done
|
|
|
|
# Add klausurfolien entry if it exists
|
|
if [[ -f "$BUILD_DIR/klausurfolien.html" ]]; then
|
|
pdf_link=""
|
|
if [[ -f "$BUILD_DIR/klausurfolien.pdf" ]]; then
|
|
pdf_link="<a href=\"klausurfolien.pdf\" class=\"btn btn-pdf\">PDF</a>"
|
|
fi
|
|
cat >> "$BUILD_DIR/index.html" << KLAUSUR
|
|
<div class="kapitel-card" style="border-left: 3px solid $ACCENT_COLOR;">
|
|
<a href="klausurfolien.html" class="kapitel-link">
|
|
<div class="kapitel-label">Prüfung</div>
|
|
<div class="kapitel-title">Klausurrelevante Folien</div>
|
|
</a>
|
|
<a href="klausurfolien.html" class="btn btn-slides">Folien</a>
|
|
$pdf_link
|
|
</div>
|
|
KLAUSUR
|
|
fi
|
|
|
|
# Add klausurfragen entry if it exists (HTML and/or PDF)
|
|
if [[ -f "$BUILD_DIR/klausurfragen.html" ]] || [[ -f "$BUILD_DIR/klausurfragen.pdf" ]]; then
|
|
pdf_link=""
|
|
if [[ -f "$BUILD_DIR/klausurfragen.pdf" ]]; then
|
|
pdf_link="<a href=\"klausurfragen.pdf\" class=\"btn btn-pdf\">PDF</a>"
|
|
fi
|
|
slides_link=""
|
|
if [[ -f "$BUILD_DIR/klausurfragen.html" ]]; then
|
|
slides_link="<a href=\"klausurfragen.html\" class=\"btn btn-slides\">Folien</a>"
|
|
fi
|
|
cat >> "$BUILD_DIR/index.html" << KLAUSURFRAGEN
|
|
<div class="kapitel-card" style="border-left: 3px solid $ACCENT_COLOR;">
|
|
<a href="klausurfragen.html" class="kapitel-link">
|
|
<div class="kapitel-label">Prüfung</div>
|
|
<div class="kapitel-title">Klausurfragen</div>
|
|
</a>
|
|
$slides_link
|
|
$pdf_link
|
|
</div>
|
|
KLAUSURFRAGEN
|
|
fi
|
|
|
|
cat >> "$BUILD_DIR/index.html" << FOOTER
|
|
</div>
|
|
<div class="qr-section">
|
|
<img src="qr-index.svg" alt="QR Code" class="qr-code">
|
|
<p class="qr-url">$SLIDES_URL</p>
|
|
</div>
|
|
<footer>
|
|
<a href="mailto:mail@librete.ch">Kontakt</a> ·
|
|
<a href="../">Kursübersicht</a>
|
|
</footer>
|
|
</body>
|
|
</html>
|
|
FOOTER
|
|
|
|
echo "Generated $BUILD_DIR/index.html"
|