208 lines
10 KiB
HTML
208 lines
10 KiB
HTML
{{ define "main" }}
|
||
|
||
{{/* ═════════════════════════════════════════════════════════════════
|
||
TRR379 HOMEPAGE TEMPLATE
|
||
─────────────────────────────────────────────────────────────────
|
||
|
||
CONTENT vs. UI STRINGS — where to edit what:
|
||
--------------------------------------------
|
||
• Page content (hero titles, panel texts, research-area labels)
|
||
lives in `content/_index.md` and `content/_index.de.md` frontmatter.
|
||
These files are intended to be auto-populated from the metadata
|
||
backend (forgejo actions, see q04 workflow).
|
||
|
||
• Generic UI labels ("Objectives", "all news", "see all projects")
|
||
live in `i18n/en.yaml` and `i18n/de.yaml`.
|
||
|
||
ANIMATION COUPLING — important caveat:
|
||
--------------------------------------
|
||
This template's structure is tightly coupled to scroll animations
|
||
defined in `static/js/trr379-home.js`. The following element IDs
|
||
are referenced by the JS and MUST exist for animations to work:
|
||
|
||
#hero, #heroText, #heroFigure
|
||
#middleWrapper
|
||
#fig2Wrap, #fig4Wrap
|
||
#rdocPanel, #multiPanel, #adolPanel ← exactly 3 panels expected
|
||
#researchAreas
|
||
#vennFigure, #vennConnectors, #vennFooter
|
||
#vennLabelA, #vennLabelB, #vennLabelC, #vennLabelZ
|
||
#scrollProgress
|
||
|
||
The 3-panel middle section is hardcoded by design — each panel
|
||
triggers a specific animation:
|
||
• #rdocPanel → triggers Figure2 draw-in
|
||
• #multiPanel → triggers Figure2-to-Figure4 fly transition + Figure4 draw
|
||
• #adolPanel → triggers Figure4 grey-arrow reveal
|
||
|
||
To ADD A NEW PANEL with associated animation:
|
||
1. Add the panel entry to `content/_index.md` frontmatter under `panels:`
|
||
2. Add a new <div class="text-panel" id="..."> block in this template
|
||
3. In `static/js/trr379-home.js`, add a new ScrollTrigger for the panel
|
||
(see sections 3, 4 for examples of how Figure2 and Figure4 panels
|
||
are wired up). The generic pin/dwell logic in section 7 will
|
||
automatically include any element with class `.text-panel`.
|
||
|
||
To REMOVE OR REORDER PANELS:
|
||
Both the template and JS need to be updated together. The JS
|
||
animation timing assumes 3 panels in the order rdoc → multi → adol.
|
||
══════════════════════════════════════════════════════════════════ */}}
|
||
|
||
{{/* ── CSS einbinden ── */}}
|
||
<link rel="stylesheet" href="/css/trr379-home.css">
|
||
|
||
{{/* ── GSAP (lokal) + Animation Code ── */}}
|
||
<script defer src="/js/gsap.min.js"></script>
|
||
<script defer src="/js/ScrollTrigger.min.js"></script>
|
||
<script defer src="/js/trr379-home.js"></script>
|
||
|
||
<div class="scroll-progress" id="scrollProgress"></div>
|
||
|
||
{{/* ── TOP STAGE — hero logo + intro text, one sticky scroll-stage ──
|
||
Content from frontmatter: hero.title, hero.subtitle, intro.text.
|
||
The logo (Figure1) draws in over the title, then on scroll "wanders"
|
||
down beside the intro text. This whole sequence is driven by the
|
||
sticky-scrub timeline in `static/js/trr379-home.js` (section 1).
|
||
Required IDs (referenced by the JS): #topStage #heroText #heroFigure #introText
|
||
The element must stay 100% tall (#topStage height) so the sticky inner
|
||
has scroll length to scrub against. */}}
|
||
<section class="top-stage" id="topStage">
|
||
<div class="top-sticky">
|
||
<div class="top-sticky-inner">
|
||
<div class="hero-text" id="heroText">
|
||
<h1 class="hero-title">{{ .Params.hero.title | safeHTML }}</h1>
|
||
<p class="hero-subtitle">{{ .Params.hero.subtitle | safeHTML }}</p>
|
||
</div>
|
||
<div class="hero-figure top-figure" id="heroFigure"></div>
|
||
{{ with .Params.intro }}
|
||
<div class="intro-text" id="introText">{{ .text | safeHTML }}</div>
|
||
{{ end }}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{{/* ── MIDDLE WRAPPER — 3 scroll-pinned panels, see header comment ──
|
||
Each panel reads its content from `.Params.panels.<id>` in frontmatter.
|
||
IDs are hardcoded because the animation references them. */}}
|
||
<div class="middle-wrapper" id="middleWrapper">
|
||
<div class="middle-figure-col">
|
||
<div class="fig-stack">
|
||
<div id="fig2Wrap"></div>
|
||
<div id="fig4Wrap"></div>
|
||
</div>
|
||
</div>
|
||
<div class="middle-text-col">
|
||
|
||
{{/* Panel 1: RDoC — triggers Figure2 draw */}}
|
||
{{ with .Params.panels.rdoc }}
|
||
<div class="text-panel" id="rdocPanel">
|
||
<div class="content-text">
|
||
{{ with .label_key }}<p class="section-label green">{{ i18n . }}</p>{{ end }}
|
||
<h2 class="section-title">{{ .title }}</h2>
|
||
<p class="section-text">{{ .text | safeHTML }}</p>
|
||
</div>
|
||
</div>
|
||
{{ end }}
|
||
|
||
{{/* Panel 2: Multilevel — triggers Figure2-to-Figure4 transition */}}
|
||
{{ with .Params.panels.multilevel }}
|
||
<div class="text-panel" id="multiPanel">
|
||
<div class="content-text">
|
||
<h2 class="section-title">{{ .title }}</h2>
|
||
<p class="section-text">{{ .text | safeHTML }}</p>
|
||
<a href="/topics/" style="display:inline-block;margin-top:1rem;color:var(--green-light);font-weight:600;text-decoration:none;">→ {{ i18n "all_research_topics" }}</a>
|
||
</div>
|
||
</div>
|
||
{{ end }}
|
||
|
||
{{/* Panel 3: Adolescence — triggers Figure4 grey-arrow reveal */}}
|
||
{{ with .Params.panels.adolescence }}
|
||
<div class="text-panel" id="adolPanel">
|
||
<div class="content-text">
|
||
<h2 class="section-title">{{ .title }}</h2>
|
||
<p class="section-text">{{ .text | safeHTML }}</p>
|
||
</div>
|
||
</div>
|
||
{{ end }}
|
||
|
||
</div>
|
||
</div>
|
||
|
||
{{/* ── VENN SECTION — research areas from frontmatter ──
|
||
Labels A/B/C/Z are read from `.Params.research_areas` array,
|
||
but their POSITIONS in the venn diagram are CSS-defined
|
||
(.venn-label-a, -b, -c, -z) and matched to area IDs ("a", "b", "c", "z"). */}}
|
||
|
||
<section class="venn-section" id="researchAreas">
|
||
<div class="venn-container">
|
||
<div class="venn-footer" id="vennFooter">
|
||
<h2 class="section-title" style="text-align:center">{{ i18n "research_areas" }}</h2>
|
||
<p style="text-align:center;color:#555;font-size:1rem;">
|
||
<a href="/projects" style="color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.3);">{{ i18n "see_all_projects" }} →</a>
|
||
</p>
|
||
</div>
|
||
<div class="venn-figure-wrap">
|
||
<div class="venn-figure" id="vennFigure"></div>
|
||
<div class="venn-labels">
|
||
{{/* Connector lines (viewBox 900×620): each starts at the edge of its
|
||
coloured circle and ends just before its corner label. The labels sit
|
||
at the far edges of the wrap, so the X coords run outside 0–900. */}}
|
||
<svg id="vennConnectors" viewBox="0 0 900 620" preserveAspectRatio="xMidYMid meet" style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:0;overflow:visible;">
|
||
<line x1="188" y1="233" x2="-6" y2="109" stroke="#ef9052" stroke-width="1.2"/>
|
||
<line x1="736" y1="155" x2="900" y2="158" stroke="#0a8f37" stroke-width="1.2"/>
|
||
<line x1="735" y1="453" x2="881" y2="439" stroke="#9c1916" stroke-width="1.2"/>
|
||
<line x1="184" y1="388" x2="54" y2="466" stroke="#b0b0b0" stroke-width="1.2"/>
|
||
</svg>
|
||
{{ range .Params.research_areas }}
|
||
<div class="venn-label venn-label-{{ .id }}" id="vennLabel{{ .id | upper }}">
|
||
<span class="venn-label-title" style="color:{{ .color }}">{{ .title }}</span>
|
||
<span class="venn-label-desc">{{ .desc | safeHTML }}</span>
|
||
</div>
|
||
{{ end }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
{{/* ── Latest News ── */}}
|
||
{{ $news := (site.GetPage "/news").Pages.ByDate.Reverse | first 6 }}
|
||
{{ if $news }}
|
||
<section class="home-news">
|
||
<div class="home-news-inner">
|
||
<div class="home-news-header">
|
||
<h2 class="home-news-title">{{ i18n "latest_news" }}</h2>
|
||
<a href="/news/" class="home-news-more">{{ i18n "all_news" }} →</a>
|
||
</div>
|
||
<div class="home-news-grid">
|
||
{{ range $news }}
|
||
{{ $thumb := .Resources.GetMatch "feature*" }}
|
||
{{ if not $thumb }}{{ $thumb = .Resources.GetMatch "thumbnail*" }}{{ end }}
|
||
<a class="home-news-card" href="{{ .Permalink }}">
|
||
{{ with $thumb }}
|
||
<div class="home-news-img">
|
||
<img src="{{ (.Fill "600x400 Center").RelPermalink }}" alt="">
|
||
</div>
|
||
{{ end }}
|
||
<div class="home-news-body">
|
||
<span class="home-news-date">{{ .Date.Format "2 Jan 2006" }}</span>
|
||
<h3 class="home-news-card-title">{{ .Title }}</h3>
|
||
<p class="home-news-excerpt">{{ .Summary | truncate 100 }}</p>
|
||
</div>
|
||
</a>
|
||
{{ end }}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{{ end }}
|
||
|
||
{{/* ── Optional intro markdown content from _index.md body ── */}}
|
||
{{ if .Content }}
|
||
<section class="trr-intro">
|
||
<div class="trr-intro-inner">
|
||
{{ .Content }}
|
||
</div>
|
||
</section>
|
||
{{ end }}
|
||
|
||
{{ end }} |