← Index · ← File index · ← Prev · Next → · 📄 source

#20: index.adoc

doc/index.adoc

Path: site/index.adoc · Lines: 30 · Layout: page with width: expand

Purpose: THE HOMEPAGE of projectforge.org. A compose-only page — zero content of its own. Stitches together 5 Jekyll includes (boxes, image-block, videos, FAQs, team) into a full-bleed landing page. The hero section renders "ProjectForge — Improve your team work..." with a DevOps illustration.

Source: GitHub

22 lines · 15 code · 1 comments · 6 blank
CommitMessage
ac75fabf32021-08-10 Jekyll site migration
Compose-only architecture. The homepage has no content of its own. Every section is a Jekyll {% include %} — the page is purely a composition of reusable components. This is the "Lego brick" approach to page building: the index defines the order and parameters; each include renders its section independently.

The 5-section layout — a vertical story

{% include boxes.html columns="3" title="Why ProjectForge?" ... %}   <!-- Section 1 -->
{% include image-block.html %}                                        <!-- Section 2 -->
{% include videos.html columns="2" title="Video Tutorials" ... %}   <!-- Section 3 -->
{% include faqs.html category="faq-main" title="FAQs" ... %}          <!-- Section 4 -->
{% include team.html authors="kai,fin,wolfgang,christian,daniel,roger" %} <!-- 5 -->
SectionIncludeVisualPurpose
1boxes.html3-column grid of feature cards"Why ProjectForge?" — value proposition. Each box is a feature highlight (time tracking, Gantt, financials, etc.)
2image-block.htmlFull-width image with text overlayVisual break — screenshot/diagram showing ProjectForge in action
3videos.html2-column video thumbnails"Video Tutorials" — screencasts to get started fast
4faqs.htmlAccordion FAQ list"Frequently asked questions" — filtered by category faq-main
5team.htmlTeam member cards"We are here to help" — 6 named team members with avatars

Each include receives parameters: columns controls grid layout, title/subtitle sets section headers, category filters content. The includes handle their own rendering — the index only composes.

Why width: expand?

The homepage uses width: expand (line 3) — the special mode from page.html (#3925) that outputs raw {{ content }} without any section/container/article wrapper. This is necessary because each include (boxes.html, videos.html) provides its OWN section wrapper with its own background color and padding. If the page layout added another section wrapper, there would be double-padding and nested backgrounds — visually broken.

The hero section is also configured in front matter (lines 4-8): title "ProjectForge", subtitle about team work and budgets, background image Illustration_DevOps_omg.svg, and search: false (no search bar in the hero).

← #3920 · #3922 →