Elternbeirat.Web/Components/Pages/Home.razor

@@ -1,7 +1,49 @@
-@page "/"
+@page "/"
+@using System.Globalization
+@using Elternbeirat.Web.Services
+@inject PostService PostService
 
-<PageTitle>Home</PageTitle>
+<PageTitle>Elternbeirat der IGMH</PageTitle>
 
-<h1>Hello, world!</h1>
+<h1>Elternbeirat der IGMH</h1>
 
-Welcome to your new app.
+<p class="intro">
+    Willkommen beim Elternbeirat der IGMH. Hier finden Sie aktuelle Informationen,
+    Antworten auf häufige Fragen und Unterlagen rund um die Elternarbeit.
+</p>
+
+<section class="home-news">
+    <h2>Aktuelle Beiträge</h2>
+
+    @if (_latest.Count == 0)
+    {
+        <p>Zurzeit gibt es keine Beiträge.</p>
+    }
+    else
+    {
+        <ul class="post-list">
+            @foreach (var post in _latest)
+            {
+                <li>
+                    <a href="@($"/beitraege/{post.Slug}")">@post.Title</a>
+                    <time datetime="@post.Date.ToString("yyyy-MM-dd")">
+                        @post.Date.ToString("d. MMMM yyyy", _german)
+                    </time>
+                </li>
+            }
+        </ul>
+        <p><a href="/beitraege">Alle Beiträge &rarr;</a></p>
+    }
+</section>
+
+@code {
+    private static readonly CultureInfo _german = CultureInfo.GetCultureInfo("de-DE");
+
+    private IReadOnlyList<Post> _latest = [];
+
+    protected override void OnInitialized()
+    {
+        // Show the three most recent posts as a teaser on the home page.
+        _latest = PostService.All.Take(3).ToList();
+    }
+}

Elternbeirat.Web/wwwroot/app.css

@@ -22,6 +22,16 @@ h1:focus {
     outline: none;
 }
 
+/* Home page */
+.intro {
+    font-size: 1.1rem;
+    color: #444;
+}
+
+.home-news {
+    margin-top: 2rem;
+}
+
 /* News list on /beitraege */
 .post-list {
     list-style: none;