first commit

views/pages/home.twig

@@ -0,0 +1,94 @@
+{% extends "layout.twig" %}
+
+{% block title %}Slim Blog{% endblock %}
+
+{% block meta %}
+<meta name="description" content="{% if activeCategory %}Articles de la catégorie {{ activeCategory.name }} — {% endif %}Slim Blog, un blog propulsé par Slim 4.">
+<meta property="og:type"        content="website">
+<meta property="og:title"       content="Slim Blog">
+<meta property="og:description" content="Un blog propulsé par Slim 4.">
+<meta property="og:url"         content="{{ app_url }}/">
+{% endblock %}
+
+{% block content %}
+
+<form method="get" action="/" class="search-bar">
+    {% if activeCategory %}
+    <input type="hidden" name="categorie" value="{{ activeCategory.slug }}">
+    {% endif %}
+    <input type="search" name="q" value="{{ searchQuery }}"
+           placeholder="Rechercher un article…" class="search-bar__input" aria-label="Recherche">
+    <button type="submit" class="search-bar__btn">Rechercher</button>
+    {% if searchQuery %}
+    <a href="/{% if activeCategory %}?categorie={{ activeCategory.slug }}{% endif %}" class="search-bar__reset">✕</a>
+    {% endif %}
+</form>
+
+{% if searchQuery %}
+<p class="search-bar__info">
+    {% if posts is not empty %}
+        {{ posts|length }} résultat{{ posts|length > 1 ? 's' : '' }} pour « {{ searchQuery }} »
+    {% else %}
+        Aucun résultat pour « {{ searchQuery }} »
+    {% endif %}
+</p>
+{% endif %}
+
+{% if categories is not empty %}
+<nav class="category-filter">
+    <a href="/"
+       class="category-filter__item{% if activeCategory is null %} category-filter__item--active{% endif %}">
+        Tous
+    </a>
+    {% for category in categories %}
+    <a href="/?categorie={{ category.slug }}"
+       class="category-filter__item{% if activeCategory and activeCategory.id == category.id %} category-filter__item--active{% endif %}">
+        {{ category.name }}
+    </a>
+    {% endfor %}
+</nav>
+{% endif %}
+
+<div class="card-list card-list--contained">
+{% for post in posts %}
+    {% set thumb = post_thumbnail(post) %}
+    <article class="card">
+
+        <a href="{{ post_url(post) }}" class="card__thumb-link" tabindex="-1" aria-hidden="true">
+            {% if thumb %}
+            <img class="card__thumb" src="{{ thumb }}" alt="">
+            {% else %}
+            <span class="card__initials" aria-hidden="true">{{ post_initials(post) }}</span>
+            {% endif %}
+        </a>
+
+        <div class="card__content">
+            <div class="card__body">
+                <h2 class="card__title">
+                    <a href="{{ post_url(post) }}" class="card__title-link">{{ post.title }}</a>
+                </h2>
+
+                <div class="card__meta">
+                    <small>
+                        Publié le {{ post.createdAt|date("d/m/Y à H:i") }}
+                            par <strong>{{ post.authorUsername ?? 'inconnu' }}</strong>
+                    </small>
+                    {% if post.categoryName %}
+                    <a href="/?categorie={{ post.categorySlug }}" class="badge badge--category">{{ post.categoryName }}</a>
+                    {% endif %}
+                </div>
+
+                <p class="card__excerpt">{{ post_excerpt(post) }}</p>
+            </div>
+
+            <div class="card__actions">
+                <a href="{{ post_url(post) }}" class="card__actions-link">Lire la suite →</a>
+            </div>
+        </div>
+
+    </article>
+{% else %}
+    <p>Aucun article publié{% if searchQuery %} pour « {{ searchQuery }} »{% elseif activeCategory %} dans cette catégorie{% endif %}.</p>
+{% endfor %}
+</div>
+{% endblock %}